[feat]: Dialog

.gitignore

@@ -36,4 +36,6 @@ yarn-error.log*
 next-env.d.ts
 
 # contentlayer
-.contentlayer
+.contentlayer
+
+package-lock.json

config/components.ts

@@ -22,6 +22,10 @@ export const componentConfig = {
       name: "text",
       filePath: "packages/ui/Text/Text.tsx",
     },
+    dialog: {
+      name: "dialog",
+      filePath: "packages/ui/Dialog/Dialog.tsx",
+    },
   },
   examples: {
     "accordion-style-default": {
@@ -122,5 +126,31 @@ export const componentConfig = {
       filePath: "preview/components/tab-style-default.tsx",
       preview: lazy(() => import("@/preview/components/tab-style-default")),
     },
+    "dialog-style-default": {
+      name: "dialog-style-default",
+      filePath: "preview/components/dialog-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/dialog-style-default")),
+    },
+    "dialog-style-with-footer": {
+      name: "dialog-style-with-footer",
+      filePath: "preview/components/dialog-style-with-footer.tsx",
+      preview: lazy(
+        () => import("@/preview/components/dialog-style-with-footer")
+      ),
+    },
+    "dialog-style-width-variant": {
+      name: "dialog-style-width-variant",
+      filePath: "preview/components/dialog-style-width-variant.tsx",
+      preview: lazy(
+        () => import("@/preview/components/dialog-style-width-variant")
+      ),
+    },
+    "dialog-style-with-form": {
+      name: "dialog-style-with-form",
+      filePath: "preview/components/dialog-style-with-form.tsx",
+      preview: lazy(
+        () => import("@/preview/components/dialog-style-with-form")
+      ),
+    },
   },
 };

config/navigation.ts

@@ -25,6 +25,7 @@ export const navConfig: INavigationConfig = {
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },
         { title: "Text", href: `${componentsRoute}/text` },
+        { title: "Dialog", href: `${componentsRoute}/dialog` },
       ],
     },
     {

content/docs/components/dialog.mdx

@@ -0,0 +1,74 @@
+---
+title: Dialog
+description: An impactful dialog that ensures your important messages and actions get the attention they deserve! 💬✨
+lastUpdated: 26 Oct, 2024
+---
+
+<ComponentShowcase name="dialog-style-default" />
+<br />
+<br />
+
+## Instalation
+
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-dialog @radix-ui/react-visually-hidden tailwindcss-animate
+```
+
+<br />
+
+#### 2. Configure your `tailwind.config.ts` add:
+
+```sh
+{
+  content: [...],
+  theme: [...],
+
+  // add plugin
+  plugins: [require("tailwindcss-animate")],
+}
+```
+
+<br />
+<br />
+
+#### 3. Copy the code 👇 into your project:
+
+<ComponentSource name="dialog" />
+
+<br />
+<br />
+
+## Example
+
+#### Confirm dialog message
+
+<ComponentShowcase name="dialog-style-default" />
+<br />
+<br />
+
+#### Confirm dialog with footer
+
+<ComponentShowcase name="dialog-style-with-footer" />
+
+<br />
+<br />
+
+#### Dialog `size` variants
+
+<ComponentShowcase name="dialog-style-width-variant" />
+
+<br />
+<br />
+
+#### Dialog with form
+
+<ComponentShowcase name="dialog-style-with-form" />
+
+<br />
+<br />
+
+## Notes
+
+For customize anything on dialog you can change `className` for the component and doas you want.

package.json

@@ -12,6 +12,8 @@
     "@headlessui/react": "^2.1.9",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-visually-hidden": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "contentlayer": "^0.3.4",
@@ -35,6 +37,7 @@
     "eslint-config-next": "14.2.7",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5"
   }
 }

packages/ui/Buttons/Button.tsx

@@ -27,21 +27,24 @@ export interface IButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {}
 
-export function Button({
-  children,
-  size = "md",
-  className = "",
-  variant = "default",
-  ...props
-}: IButtonProps) {
-  return (
+export const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
+  (
+    {
+      children,
+      size = "md",
+      className = "",
+      variant = "default",
+      ...props
+    }: IButtonProps,
+    forwardedRef
+  ) => (
     <button
       className={cn(buttonVariants({ variant, size }), className)}
       {...props}
     >
       {children}
     </button>
-  );
-}
+  )
+);
 
 Button.displayName = "Button";