Merge pull request #9 from CQCL/expose-react-form-deps

fix(): expose react-hook-form as a nested module

Author: DNA386

package-lock.json

@@ -115,8 +115,8 @@
     "lucide-react": "^0.298.0",
     "next-themes": "^0.2.1",
     "react-day-picker": "^8.10.0",
-    "react-hook-form": "^7.50.1",
     "react-resizable-panels": "^1.0.5",
+    "sonner": "^1.3.1",
     "tailwind-merge": "^2.1.0",
     "vaul": "^0.8.0",
     "zod": "^3.22.4"
@@ -125,8 +125,8 @@
     "@tailwindcss/typography": "^0.5.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sonner": "^1.3.1",
     "tailwindcss": "^3.3.6",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "react-hook-form": "^7.50.1"
   }
 }

package.json

@@ -2,29 +2,38 @@
 
 import { useTheme } from "next-themes"
 import { Toaster as Sonner} from "sonner"
+import { cn } from "src/utils"
+export * as sonner from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
-export const SonnerToast = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
+export const SonnerToast = ({ theme, className, toastOptions, ...props }: ToasterProps) => {
+  const { theme: defaultTheme  = "system" } = useTheme()
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
+      theme={theme ?? defaultTheme as ToasterProps["theme"]}
+      className={cn("toaster group", className)}
       toastOptions={{
+        ...toastOptions,
         classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
+          toast: cn(
+              "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+              toastOptions?.classNames?.toast
+          ),
+          description: cn("group-[.toast]:text-muted-foreground", toastOptions?.classNames?.description),
+          actionButton: cn(
             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
+              toastOptions?.classNames?.actionButton
+          ),
+          cancelButton: cn(
             "group-[.toaster]:bg-muted group-[.toaster]:text-muted-foreground bg-red",
-                
-                closeButton:
-                "group-[.toaster]:bg-muted group-[.toaster]:border-border group-[.toaster]:text-foreground bg-red group-[.toaster]:hover:text-background",
-                    },
+              toastOptions?.classNames?.cancelButton
+          ),
+          closeButton:cn(
+            "group-[.toaster]:bg-muted group-[.toaster]:border-border group-[.toaster]:text-foreground bg-red group-[.toaster]:hover:text-muted-foreground",
+              toastOptions?.classNames?.closeButton
+          ),
+        },
       }}
       {...props}
     />

src/shadcn/ui/sonner.tsx

@@ -2,23 +2,31 @@ import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Button, SonnerToast } from "src";
 import * as sonner from 'sonner'
-const SonnerDemo = () => {
-    return (
-        <div>
-        <SonnerToast closeButton duration={9000000}>
 
+const SonnerDemo = (props: {defaultStyles: Boolean}) => {
+    return props.defaultStyles ? (
+      <div>
+        <SonnerToast closeButton duration={9000000}>
+        </SonnerToast>
+        <Button onClick={() => sonner.toast.success('Success!')}>Show Toast</Button>
+      </div>
+    ) : (
+      <div>
+        <SonnerToast closeButton duration={9000000} toastOptions={{classNames: {toast: 'group-[.toaster]:bg-green-500 group-[.toaster]:border-green-700'}}}>
         </SonnerToast>
-         <Button onClick={() => sonner.toast.success('Success!')}>Show Toast</Button>   </div>
-    );
+        <Button onClick={() => sonner.toast.info('Info: this toast has overriden styles.')}>
+          Show Styled Toast
+        </Button>
+      </div>
+    )
 }
 
 const meta: Meta<typeof SonnerDemo> = {
-    component: SonnerDemo,
-  };
-  
-  export default meta;
-  
-  export const Default: StoryObj<typeof SonnerDemo> = {
-    args: {},
-  };
-  
+  component: SonnerDemo,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof SonnerDemo> = {
+  args: {defaultStyles: true},
+};