heroui 组件库集成优化

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*@heroui/*

hero.ts

@@ -1,5 +1,5 @@
 // hero.ts
-import { heroui } from "@heroui/react";
+// import { heroui } from "@heroui/react";
 // or import from theme package if you are using individual packages.
-// import { heroui } from "@heroui/theme";
+import { heroui } from "@heroui/theme";
 export default heroui();

package.json

@@ -16,12 +16,18 @@
     "@heroui/accordion": "^2.2.25",
     "@heroui/alert": "^2.2.32",
     "@heroui/avatar": "^2.2.26",
+    "@heroui/button": "^2.2.32",
+    "@heroui/date-picker": "^2.3.33",
     "@heroui/drawer": "^2.2.25",
+    "@heroui/input": "^2.4.33",
+    "@heroui/modal": "^2.2.29",
     "@heroui/popover": "^2.3.32",
-    "@heroui/react": "^2.8.6",
+    "@heroui/radio": "^2.3.32",
     "@heroui/select": "^2.4.29",
     "@heroui/switch": "^2.2.27",
     "@heroui/system": "^2.4.28",
+    "@heroui/tooltip": "^2.2.29",
+    "@heroui/use-disclosure": "^2.2.19",
     "@react-aria/visually-hidden": "^3.8.31",
     "@react-types/shared": "^3.33.1",
     "@reduxjs/toolkit": "^2.10.1",

src/app/(public)/page.tsx

@@ -3,7 +3,7 @@ import RenderThemeCustomization from "@components/home/RenderThemeCustomization"
 import HomeImageBanner from "@components/home/HomeImageBanner";
 import { ThemeCustomizationResponse } from "@/types/theme/theme-customization";
 import { cachedGraphQLRequest } from "@/utils/hooks/useCache";
-
+import {DatePicker} from "@heroui/date-picker";
 export const revalidate = 3600;
 
 export default async function Home() {
@@ -17,6 +17,7 @@ export default async function Home() {
   return (
     <>
       <HomeImageBanner />
+      <DatePicker label={"Birth date"} labelPlacement={"outside"} />
       <RenderThemeCustomization themeCustomizations={data?.themeCustomizations} />
     </>
     

src/app/(public)/product/_components/review/AddProductReview.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Textarea } from "@heroui/react";
+import { Textarea } from "@heroui/input";
 import { AddRatingStar } from "./AddRatingStar";
 import { Button } from "@components/common/button/Button";
 import { useCustomToast } from "@utils/hooks/useToast";

src/app/(public)/product/_components/review/ReviewAdd.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Modal, ModalContent } from "@heroui/react";
+import { Modal, ModalContent } from "@heroui/modal";
 import AddProductReview from "./AddProductReview";
 import { ReviewButton } from "@components/common/button/ReviewButton";
 

src/app/(public)/product/_components/review/ReviewDetail.tsx

@@ -4,7 +4,8 @@ import { Rating } from "@components/common/Rating";
 import { GridTileImage } from "@components/theme/ui/grid/Tile";
 import { formatDate, getInitials, getReviews } from "@/utils/helper";
 import { isArray } from "@/utils/type-guards";
-import { Avatar, Tooltip } from "@heroui/react";
+import { Avatar } from "@heroui/avatar";
+import { Tooltip } from "@heroui/tooltip";
 import clsx from "clsx";
 import { FC, useState } from "react";
 import { ProductReviewNode } from "@/components/catalog/type";

src/components/cart/CartModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 import clsx from "clsx";
-import { useDisclosure } from "@heroui/react";
+import { useDisclosure } from "@heroui/use-disclosure";
 import { AnimatePresence, motion } from "framer-motion";
 import {
   Drawer,

src/components/catalog/review/AddProductReview.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Textarea } from "@heroui/react";
+import { Textarea } from "@heroui/input";
 import { AddRatingStar } from "./AddRatingStar";
 import { Button } from "@components/common/button/Button";
 import { useCustomToast } from "@utils/hooks/useToast";

src/components/catalog/review/ReviewDetail.tsx

@@ -4,7 +4,8 @@ import { Rating } from "@components/common/Rating";
 import { GridTileImage } from "@components/theme/ui/grid/Tile";
 import { formatDate, getInitials, getReviews } from "@/utils/helper";
 import { isArray } from "@/utils/type-guards";
-import { Avatar, Tooltip } from "@heroui/react";
+import { Avatar } from "@heroui/avatar";
+import { Tooltip } from "@heroui/tooltip";
 import clsx from "clsx";
 import { FC, useState } from "react";
 import ReviewSection from "./ReviewSection";

src/components/catalog/review/ReviewSection.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Modal, ModalContent } from "@heroui/react";
+import { Modal, ModalContent } from "@heroui/modal";
 import AddProductReview from "./AddProductReview";
 import { ReviewButton } from "@components/common/button/ReviewButton";
 import { NoReview } from "./NoReview";

src/components/checkout/stepper/payment/PaymentMethod.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { Controller, FieldValues, useForm } from "react-hook-form";
-import { cn, Radio, RadioGroup } from "@heroui/react";
+import { cn } from "@heroui/theme";
+import { Radio, RadioGroup } from "@heroui/radio";
 import { useState } from "react";
 import { useCustomToast } from "@utils/hooks/useToast";
 import { useCheckout } from "@utils/hooks/useCheckout";

src/components/checkout/stepper/shipping/ShippingMethod.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { FieldValues, useForm, Controller } from "react-hook-form";
-import { cn, Radio, RadioGroup } from "@heroui/react";
+import { cn } from "@heroui/theme";
+import { Radio, RadioGroup } from "@heroui/radio";
 import { useState } from "react";
 import { ProceedToCheckout } from "../ProceedToCheckout";
 import { useCustomToast } from "@utils/hooks/useToast";

src/components/checkout/type.ts

@@ -1,4 +1,4 @@
-import { Radio } from "@heroui/react";
+import { Radio } from "@heroui/radio";
 import { FieldErrors, UseFormRegister } from "react-hook-form";
 
 export type CustomRadioProps = {

src/components/customer/credentials/CredentialModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useDisclosure } from "@heroui/react";
+import { useDisclosure } from "@heroui/use-disclosure";
 import { AnimatePresence, motion } from "framer-motion";
 import clsx from "clsx";
 import { signOut } from "next-auth/react";

src/components/theme/filters/MobileFilter.tsx

@@ -5,9 +5,10 @@ import {
   DrawerContent,
   DrawerHeader,
   DrawerBody,
-  Button,
-  useDisclosure,
-} from "@heroui/react";
+} from "@heroui/drawer";
+
+import { Button } from "@heroui/button";
+import { useDisclosure } from "@heroui/use-disclosure";
 import {
   AdjustmentsHorizontalIcon,
 } from "@heroicons/react/24/outline";

src/components/theme/filters/SortOrder.tsx

@@ -9,10 +9,10 @@ import {
   Drawer,
   DrawerContent,
   DrawerHeader,
-  DrawerBody,
-  Button,
-  useDisclosure,
-} from "@heroui/react";
+  DrawerBody
+} from "@heroui/drawer";
+import { Button } from "@heroui/button";
+import { useDisclosure } from "@heroui/use-disclosure";
 import { SortIcon } from "@components/common/icons/SortIcon";