dify

dify/web/app/components/base/dialog/index.stories.tsx

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import Dialog from '.'
+
+const meta = {
+  title: 'Base/Feedback/Dialog',
+  component: Dialog,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Modal dialog built on Headless UI. Provides animated overlay, title slot, and optional footer region.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes applied to the panel.',
+    },
+    titleClassName: {
+      control: 'text',
+      description: 'Extra classes for the title element.',
+    },
+    bodyClassName: {
+      control: 'text',
+      description: 'Extra classes for the content area.',
+    },
+    footerClassName: {
+      control: 'text',
+      description: 'Extra classes for the footer container.',
+    },
+    title: {
+      control: 'text',
+      description: 'Dialog title.',
+    },
+    show: {
+      control: 'boolean',
+      description: 'Controls visibility of the dialog.',
+    },
+    onClose: {
+      control: false,
+      description: 'Called when the dialog backdrop or close handler fires.',
+    },
+  },
+  args: {
+    title: 'Manage API Keys',
+    show: false,
+    children: null,
+  },
+} satisfies Meta<typeof Dialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const DialogDemo = (props: React.ComponentProps<typeof Dialog>) => {
+  const [open, setOpen] = useState(props.show)
+  useEffect(() => {
+    setOpen(props.show)
+  }, [props.show])
+
+  return (
+    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
+      <button
+        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+        onClick={() => setOpen(true)}
+      >
+        Show dialog
+      </button>
+
+      <Dialog
+        {...props}
+        show={open}
+        onClose={() => {
+          props.onClose?.()
+          setOpen(false)
+        }}
+      >
+        <div className="space-y-4 text-sm text-gray-600">
+          <p>
+            Centralize API key management for collaborators. You can revoke, rotate, or generate new keys directly from this dialog.
+          </p>
+          <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+            This placeholder area represents a form or table that would live inside the dialog body.
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <DialogDemo {...args} />,
+  args: {
+    footer: (
+      <>
+        <button className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
+          Cancel
+        </button>
+        <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+          Save changes
+        </button>
+      </>
+    ),
+  },
+}
+
+export const WithoutFooter: Story = {
+  render: args => <DialogDemo {...args} />,
+  args: {
+    footer: undefined,
+    title: 'Read-only summary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the dialog when no footer actions are provided.',
+      },
+    },
+  },
+}
+
+export const CustomStyling: Story = {
+  render: args => <DialogDemo {...args} />,
+  args: {
+    className: 'max-w-[560px] bg-white/95 backdrop-blur',
+    bodyClassName: 'bg-gray-50 rounded-xl p-5',
+    footerClassName: 'justify-between px-4 pb-4 pt-4',
+    titleClassName: 'text-lg text-primary-600',
+    footer: (
+      <>
+        <span className="text-xs text-gray-400">Last synced 2 minutes ago</span>
+        <div className="flex gap-2">
+          <button className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
+            Close
+          </button>
+          <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+            Refresh data
+          </button>
+        </div>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Applies custom classes to the panel, body, title, and footer to match different surfaces.',
+      },
+    },
+  },
+}