feat: Add ui-dialog component (#42)

* feat: Add ui-modal component

This commit adds the ui-modal component to the @halvaradop/ui library. The ui-modal component provides a modal package for the library. It includes a new package.json file with scripts for building and cleaning, as well as a tsconfig.json file and a tsup.config.ts file. Additionally, it introduces a new index.tsx file that exports the Modal component and a modal.stories.tsx file with different stories showcasing the component's usage.

* refactor: clean up stories and rename package

- Rename package from `ui-modal` to `ui-dialog`
- Create a custom component to eliminate duplicate code in stories

* chore: install dependencies in `ui-dialog`

packages/ui-dialog/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@halvaradop/ui-dialog",
+  "version": "0.1.0",
+  "private": false,
+  "description": "A customizable dialog component for @halvaradop/ui library with Tailwind CSS styling.",
+  "type": "module",
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "clean:build": "rm -rf dist",
+    "clean:modules": "rm -rf node_modules"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/halvaradop/ui.git"
+  },
+  "keywords": [
+    "button",
+    "react",
+    "component",
+    "tailwindcss",
+    "react",
+    "ui",
+    "library"
+  ],
+  "author": "Hernan Alvarado <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/halvaradop/ui/issues"
+  },
+  "homepage": "https://github.com/halvaradop/ui#readme",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "devDependencies": {
+    "@halvaradop/ui-core": "workspace:*"
+  }
+}

packages/ui-dialog/src/dialog.stories.tsx

@@ -0,0 +1,70 @@
+import { useRef } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Modal, innerDialogVariants } from "./index.js"
+import { Button } from "../../ui-button/src/index.js"
+
+const meta: Meta = {
+    title: "ui-dialog",
+    tags: ["autodocs"],
+    component: Modal,
+    parameters: {
+        layout: "centered",
+    },
+} satisfies Meta<typeof Modal>
+
+type Story = StoryObj<typeof meta>
+
+interface DialogStoryProps {
+    size?: "sm" | "md" | "lg"
+    variant?: "inner" | "fixed"
+}
+
+const DialogStory = ({ size, variant }: DialogStoryProps) => {
+    const modalRef = useRef<HTMLDialogElement>(null)
+
+    const handleToggleModal = (isOpen: boolean): void => {
+        if (isOpen) {
+            modalRef.current?.showModal()
+        } else {
+            modalRef.current?.close()
+        }
+    }
+
+    return (
+        <>
+            <Button onClick={() => handleToggleModal(true)}>Open</Button>
+            <Modal ref={modalRef}>
+                <div className={innerDialogVariants({ size, variant })}>
+                    <div>Modal content</div>
+                    <Button onClick={() => handleToggleModal(false)}>Close</Button>
+                </div>
+            </Modal>
+        </>
+    )
+}
+
+export const Base: Story = {
+    render: () => <DialogStory />,
+}
+
+export const Small: Story = {
+    render: () => <DialogStory size="sm" />,
+}
+
+export const Medium: Story = {
+    render: () => <DialogStory size="md" />,
+}
+
+export const Large: Story = {
+    render: () => <DialogStory size="lg" />,
+}
+
+export const Inner: Story = {
+    render: () => <DialogStory variant="inner" />,
+}
+
+export const Fixed: Story = {
+    render: () => <DialogStory variant="fixed" />,
+}
+
+export default meta

packages/ui-dialog/src/index.tsx

@@ -0,0 +1,35 @@
+import { ComponentProps, forwardRef } from "react"
+import { cva } from "class-variance-authority"
+import { merge } from "@halvaradop/ui-core"
+
+export type DialogProps = ComponentProps<"dialog">
+
+export const innerDialogVariants = cva("flex items-center justify-center", {
+    variants: {
+        variant: {
+            base: "flex-col shadow bg-white",
+            inner: "flex-col shadow-inner bg-white",
+            fixed: "flex-col fixed top-1/2 -translate-y-1/2 bg-white",
+        },
+        size: {
+            sm: "pt-6 p-4 rounded",
+            base: "pt-8 p-6 rounded",
+            md: "pt-10 p-8 rounded-md",
+            lg: "pt-12 p-10 rounded-lg",
+        },
+    },
+    defaultVariants: {
+        variant: "base",
+        size: "base",
+    },
+})
+
+const classNameDialog = "w-full min-h-screen max-w-none max-h-none items-center justify-center relative inset-0 bg-transparent backdrop:bg-slate-500/50 open:flex"
+
+export const Modal = forwardRef<HTMLDialogElement, DialogProps>(({ className, children, ...props }, ref) => {
+    return (
+        <dialog className={merge(classNameDialog, className)} ref={ref} {...props}>
+            {children}
+        </dialog>
+    )
+})

packages/ui-dialog/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@halvaradop/ui-core/tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

packages/ui-dialog/tsup.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from "tsup"
+import { tsupConfig } from "@halvaradop/ui-core/tsup.config.base"
+
+export default defineConfig(tsupConfig)