From 1f5abf86a0d89d7047dfae779a9c76b12a52d2a0 Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat Date: Tue, 2 Dec 2025 18:31:49 +0800 Subject: [PATCH] feat(dialog): enhance Dialog component and add comprehensive Storybook examples - Updated DialogContent styling to use a rounded border and improved shadow effects for better visual appeal. - Introduced a new Storybook file for the Dialog component, featuring multiple stories that demonstrate various use cases, including default, alert, form, and customizable dialogs. - Enhanced accessibility and usability by providing examples for different dialog configurations and actions. --- .../ui/src/components/primitives/dialog.tsx | 2 +- .../components/primitives/Dialog.stories.tsx | 343 ++++++++++++++++++ 2 files changed, 344 insertions(+), 1 deletion(-) create mode 100644 packages/ui/stories/components/primitives/Dialog.stories.tsx diff --git a/packages/ui/src/components/primitives/dialog.tsx b/packages/ui/src/components/primitives/dialog.tsx index b27e423ae2..6b36644bc7 100644 --- a/packages/ui/src/components/primitives/dialog.tsx +++ b/packages/ui/src/components/primitives/dialog.tsx @@ -46,7 +46,7 @@ function DialogContent({ diff --git a/packages/ui/stories/components/primitives/Dialog.stories.tsx b/packages/ui/stories/components/primitives/Dialog.stories.tsx new file mode 100644 index 0000000000..ef4ef0a93f --- /dev/null +++ b/packages/ui/stories/components/primitives/Dialog.stories.tsx @@ -0,0 +1,343 @@ +import { + Button, + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger +} from '@cherrystudio/ui' +import type { Meta, StoryObj } from '@storybook/react' + +const meta: Meta = { + title: 'Components/Primitives/Dialog', + component: Dialog, + parameters: { + layout: 'centered', + docs: { + description: { + component: + 'A modal dialog component that interrupts the user with important content and expects a response. Based on Radix UI Dialog primitive.' + } + } + }, + tags: ['autodocs'] +} + +export default meta +type Story = StoryObj + +// Default +export const Default: Story = { + render: () => ( + + + + + + + Dialog Title + This is a description of the dialog content. + +

Dialog body content goes here.

+ + + + + + + + + ) +} + +// Without Close Button +export const WithoutCloseButton: Story = { + render: () => ( + + + + + + + No Close Button + This dialog does not have a close button in the corner. + +

Users must use the footer buttons to close this dialog.

+ + + + + + + + + ) +} + +// Simple Alert +export const SimpleAlert: Story = { + render: () => ( + + + + + + + Are you sure? + + This action cannot be undone. This will permanently delete the item from the database. + + + + + + + + + + + ) +} + +// With Form +export const WithForm: Story = { + render: () => ( + + + + + + + Edit Profile + Make changes to your profile here. Click save when you're done. + +
+
+ + +
+
+ + +
+
+ + + + + + + + + ) +} + +// Custom Width +export const CustomWidth: Story = { + render: () => ( + + + + + + + Wide Dialog + This dialog has a custom max-width of 2xl (672px). + +
+

+ You can customize the dialog width by passing a className prop with a max-width utility class. +

+
+ + + + + + + + ) +} + +// Scrollable Content +export const ScrollableContent: Story = { + render: () => ( + + + + + + + Terms of Service + Please read the following terms carefully. + +
+ {Array.from({ length: 10 }, (_, i) => ( +

+ 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. +

+ ))} +
+ + + + + + + + + ) +} + +// Header Only +export const HeaderOnly: Story = { + render: () => ( + + + + + + + Information + + This is a simple informational dialog with only a header and description. + + + + + ) +} + +// Multiple Actions +export const MultipleActions: Story = { + render: () => ( + + + + + + + Save Document + Choose how you want to save your document. + + + + + + + + + + + ) +} + +// Real World Examples +export const RealWorldExamples: Story = { + render: () => ( +
+ {/* Delete Confirmation */} + + + + + + + Delete Account + + Are you sure you want to delete your account? All of your data will be permanently removed. This action + cannot be undone. + + + + + + + + + + + + {/* Settings Dialog */} + + + + + + + Settings + Manage your application preferences. + +
+
+
+

Dark Mode

+

Enable dark theme

+
+ +
+
+
+

Notifications

+

Receive email notifications

+
+ +
+
+ + + + + + + + + {/* Share Dialog */} + + + + + + + Share Link + Anyone with this link can view this document. + +
+ + +
+ + + + + + + +
+ ) +}