@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-modal/WakaModal.stories.tsx

@@ -0,0 +1,434 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaModal, useModal } from './index'
+import * as React from 'react'
+import { Button } from '../button'
+import { AlertTriangle, CheckCircle, Info, Trash2 } from 'lucide-react'
+
+const meta: Meta<typeof WakaModal> = {
+  title: 'Components/Display/WakaModal',
+  component: WakaModal,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A modal dialog component with multiple sizes, animations, and customization options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'full'],
+      description: 'Size of the modal',
+    },
+    animation: {
+      control: 'select',
+      options: ['fade', 'slide', 'scale', 'none'],
+      description: 'Animation style',
+    },
+    centered: {
+      control: 'boolean',
+      description: 'Center modal vertically',
+    },
+    showCloseButton: {
+      control: 'boolean',
+      description: 'Show close button',
+    },
+    closeOnOverlayClick: {
+      control: 'boolean',
+      description: 'Close when clicking overlay',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaModal>
+
+export const Default: Story = {
+  args: {
+    title: 'Modal Title',
+    description: 'This is a modal description that provides context.',
+  },
+  render: (args) => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Modal</Button>
+        <WakaModal
+          {...args}
+          open={open}
+          onOpenChange={setOpen}
+        >
+          <p>Modal content goes here. You can put any content inside.</p>
+        </WakaModal>
+      </>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: () => {
+    const [size, setSize] = React.useState<'sm' | 'md' | 'lg' | 'xl' | 'full'>('md')
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 flex-wrap">
+          {(['sm', 'md', 'lg', 'xl', 'full'] as const).map((s) => (
+            <Button
+              key={s}
+              variant={size === s ? 'default' : 'outline'}
+              onClick={() => {
+                setSize(s)
+                setOpen(true)
+              }}
+            >
+              {s.toUpperCase()}
+            </Button>
+          ))}
+        </div>
+        <WakaModal
+          open={open}
+          onOpenChange={setOpen}
+          size={size}
+          title={`Size: ${size.toUpperCase()}`}
+          description="Demonstrating different modal sizes."
+        >
+          <p>This modal has size "{size}".</p>
+        </WakaModal>
+      </div>
+    )
+  },
+}
+
+export const Animations: Story = {
+  render: () => {
+    const [animation, setAnimation] = React.useState<'fade' | 'slide' | 'scale' | 'none'>('scale')
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2 flex-wrap">
+          {(['fade', 'slide', 'scale', 'none'] as const).map((a) => (
+            <Button
+              key={a}
+              variant={animation === a ? 'default' : 'outline'}
+              onClick={() => {
+                setAnimation(a)
+                setOpen(true)
+              }}
+            >
+              {a.charAt(0).toUpperCase() + a.slice(1)}
+            </Button>
+          ))}
+        </div>
+        <WakaModal
+          open={open}
+          onOpenChange={setOpen}
+          animation={animation}
+          title={`Animation: ${animation}`}
+          description="Demonstrating different animation styles."
+        >
+          <p>This modal uses the "{animation}" animation.</p>
+        </WakaModal>
+      </div>
+    )
+  },
+}
+
+export const WithFooter: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open with Footer</Button>
+        <WakaModal
+          open={open}
+          onOpenChange={setOpen}
+          title="Confirm Action"
+          description="Are you sure you want to proceed with this action?"
+          footer={
+            <>
+              <Button variant="outline" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setOpen(false)}>
+                Confirm
+              </Button>
+            </>
+          }
+        >
+          <p>This action cannot be undone. Please make sure you want to continue.</p>
+        </WakaModal>
+      </>
+    )
+  },
+}
+
+export const DeleteConfirmation: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button variant="destructive" onClick={() => setOpen(true)}>
+          <Trash2 className="h-4 w-4 mr-2" />
+          Delete Item
+        </Button>
+        <WakaModal
+          open={open}
+          onOpenChange={setOpen}
+          size="sm"
+          title="Delete Item"
+          description="This action cannot be undone."
+          footer={
+            <>
+              <Button variant="outline" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" onClick={() => setOpen(false)}>
+                Delete
+              </Button>
+            </>
+          }
+        >
+          <div className="flex items-center gap-3 p-4 bg-destructive/10 rounded-lg">
+            <AlertTriangle className="h-6 w-6 text-destructive" />
+            <p className="text-sm">
+              Are you sure you want to delete this item? This will permanently remove all associated data.
+            </p>
+          </div>
+        </WakaModal>
+      </>
+    )
+  },
+}
+
+export const SuccessModal: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Show Success</Button>
+        <WakaModal
+          open={open}
+          onOpenChange={setOpen}
+          size="sm"
+          showCloseButton={false}
+        >
+          <div className="text-center py-6">
+            <div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
+              <CheckCircle className="h-10 w-10 text-green-600" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">Success!</h3>
+            <p className="text-muted-foreground mb-6">
+              Your changes have been saved successfully.
+            </p>
+            <Button onClick={() => setOpen(false)} className="w-full">
+              Continue
+            </Button>
+          </div>
+        </WakaModal>
+      </>
+    )
+  },
+}
+
+export const InfoModal: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          <Info className="h-4 w-4 mr-2" />
+          Learn More
+        </Button>
+        <WakaModal
+          open={open}
+          onOpenChange={setOpen}
+          size="lg"
+          title="Feature Overview"
+          description="Learn about the new features in this release."
+        >
+          <div className="space-y-4">
+            <div className="p-4 bg-muted rounded-lg">
+              <h4 className="font-medium mb-2">Dark Mode Support</h4>
+              <p className="text-sm text-muted-foreground">
+                Automatically adapts to your system preferences or can be manually toggled.
+              </p>
+            </div>
+            <div className="p-4 bg-muted rounded-lg">
+              <h4 className="font-medium mb-2">Keyboard Shortcuts</h4>
+              <p className="text-sm text-muted-foreground">
+                Navigate faster with our comprehensive keyboard shortcut system.
+              </p>
+            </div>
+            <div className="p-4 bg-muted rounded-lg">
+              <h4 className="font-medium mb-2">Export Options</h4>
+              <p className="text-sm text-muted-foreground">
+                Export your data in multiple formats including CSV, JSON, and PDF.
+              </p>
+            </div>
+          </div>
+        </WakaModal>
+      </>
+    )
+  },
+}
+
+export const FormModal: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Add New Item</Button>
+        <WakaModal
+          open={open}
+          onOpenChange={setOpen}
+          title="Add New Item"
+          description="Fill in the details to create a new item."
+          stickyFooter
+          footer={
+            <>
+              <Button variant="outline" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setOpen(false)}>
+                Create Item
+              </Button>
+            </>
+          }
+        >
+          <form className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">Title</label>
+              <input
+                type="text"
+                className="w-full mt-1 px-3 py-2 border rounded-md"
+                placeholder="Enter title"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">Category</label>
+              <select className="w-full mt-1 px-3 py-2 border rounded-md">
+                <option value="">Select a category</option>
+                <option value="work">Work</option>
+                <option value="personal">Personal</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            <div>
+              <label className="text-sm font-medium">Description</label>
+              <textarea
+                className="w-full mt-1 px-3 py-2 border rounded-md"
+                rows={3}
+                placeholder="Enter description"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <input type="checkbox" id="priority" />
+              <label htmlFor="priority" className="text-sm">
+                Mark as high priority
+              </label>
+            </div>
+          </form>
+        </WakaModal>
+      </>
+    )
+  },
+}
+
+export const ScrollableContent: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Scrollable Modal</Button>
+        <WakaModal
+          open={open}
+          onOpenChange={setOpen}
+          title="Terms of Service"
+          description="Please read and accept our terms."
+          stickyHeader
+          stickyFooter
+          footer={
+            <>
+              <Button variant="outline" onClick={() => setOpen(false)}>
+                Decline
+              </Button>
+              <Button onClick={() => setOpen(false)}>
+                Accept
+              </Button>
+            </>
+          }
+        >
+          <div className="max-h-[300px] overflow-auto space-y-4 text-sm text-muted-foreground">
+            {Array.from({ length: 10 }).map((_, i) => (
+              <div key={i}>
+                <h4 className="font-medium text-foreground">Section {i + 1}</h4>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                  aliquip ex ea commodo consequat.
+                </p>
+              </div>
+            ))}
+          </div>
+        </WakaModal>
+      </>
+    )
+  },
+}
+
+export const WithHook: Story = {
+  render: () => {
+    const modal = useModal({
+      onOpenChange: (open) => console.log('Modal state:', open),
+    })
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <Button onClick={modal.open}>Open</Button>
+          <Button variant="outline" onClick={modal.toggle}>Toggle</Button>
+        </div>
+        <WakaModal
+          open={modal.isOpen}
+          onOpenChange={modal.onOpenChange}
+          title="Using useModal Hook"
+          description="This modal is controlled by the useModal hook."
+        >
+          <p>The modal state is managed by the hook.</p>
+          <Button
+            variant="outline"
+            className="mt-4"
+            onClick={modal.close}
+          >
+            Close Modal
+          </Button>
+        </WakaModal>
+      </div>
+    )
+  },
+}
+
+export const NotCentered: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Top-Aligned Modal</Button>
+        <WakaModal
+          open={open}
+          onOpenChange={setOpen}
+          centered={false}
+          title="Top-Aligned Modal"
+          description="This modal appears near the top of the viewport."
+        >
+          <p>This positioning can be useful for modals that contain long content.</p>
+        </WakaModal>
+      </>
+    )
+  },
+}