@shohojdhara/atomix 0.3.14 → 0.3.15

package/src/components/Modal/Modal.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { useState } from 'react';
 import type { AtomixGlassProps } from '../../lib/types/components';
 import Modal from './Modal';
@@ -13,8 +14,75 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Modal component displays content in a focused overlay dialog. It provides a way to present important information or actions that require user attention. Modals support various sizes, can include headers and footers, and support glass morphism effects.',
+        component: `
+# Modal
+
+## Overview
+
+Modal displays content in a focused overlay dialog. It provides a way to present important information or actions that require user attention. Modals support various sizes, can include headers and footers, and support glass morphism effects.
+
+## Features
+
+- Multiple size options (sm, md, lg, xl)
+- Backdrop click to close
+- Keyboard (Escape) to close
+- Close button visibility control
+- Glass morphism effect
+- Header and footer sections
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Close with Escape key, tab navigation within modal
+- Screen reader: Modal content and purpose announced properly
+- ARIA support: Proper roles and properties for modal dialogs
+- Focus management: Traps focus within the modal during open state
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Modal 
+  isOpen={isOpen} 
+  onOpenChange={setIsOpen} 
+  title="Modal Title"
+>
+  <p>Modal content goes here</p>
+</Modal>
+\`\`\`
+
+### With Glass Effect
+
+\`\`\`tsx
+<Modal 
+  isOpen={isOpen} 
+  onOpenChange={setIsOpen} 
+  title="Modal Title"
+  glass={true}
+>
+  <p>Modal content goes here</p>
+</Modal>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| size | 'sm' \\| 'md' \\| 'lg' \\| 'xl' | 'md' | Size of the modal |
+| backdrop | boolean | true | Whether clicking the backdrop closes the modal |
+| keyboard | boolean | true | Whether pressing Escape key closes the modal |
+| closeButton | boolean | true | Whether to show the close button |
+| glass | boolean \\| GlassProps | false | Enable glass morphism effect |
+| title | string | - | Title of the modal |
+| subtitle | string | - | Subtitle of the modal |
+| isOpen | boolean | false | Whether the modal is open |
+| onOpenChange | (open: boolean) => void | - | Callback when open state changes |
+| children | ReactNode | - | Content of the modal |
+        `,
       },
     },
   },
@@ -24,26 +92,70 @@ const meta = {
       control: { type: 'select' },
       options: ['sm', 'md', 'lg', 'xl'],
       description: 'Size of the modal',
-      defaultValue: 'md',
+      table: {
+        type: { summary: '"sm" | "md" | "lg" | "xl"' },
+        defaultValue: { summary: 'md' },
+      },
     },
     backdrop: {
       control: 'boolean',
       description: 'Whether clicking the backdrop closes the modal',
-      defaultValue: true,
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
     },
     keyboard: {
       control: 'boolean',
       description: 'Whether pressing Escape key closes the modal',
-      defaultValue: true,
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
     },
     closeButton: {
       control: 'boolean',
       description: 'Whether to show the close button',
-      defaultValue: true,
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
     },
     glass: {
       control: 'boolean',
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean | GlassProps' },
+        defaultValue: { summary: false },
+      },
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the modal',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtitle of the modal',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the modal is open',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    onOpenChange: {
+      action: 'open state changed',
+      description: 'Callback when open state changes',
     },
   },
 } satisfies Meta<typeof Modal>;
@@ -51,10 +163,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/**
- * Basic modal example with a button to trigger opening.
- */
-export const Basic: Story = {
+export const BasicUsage: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(false);
 
@@ -85,11 +194,15 @@ export const Basic: Story = {
       </>
     );
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic modal example with a button to trigger opening.',
+      },
+    },
+  },
 };
 
-/**
- * Modal with a title, subtitle, and footer actions.
- */
 export const WithFooter: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(false);
@@ -109,40 +222,66 @@ export const WithFooter: Story = {
           isOpen={isOpen}
           onOpenChange={setIsOpen}
           title="Modal with Footer"
-          subtitle="This is some description text. This text is only a placeholder and should be replaced with the actual content of the modal."
-          footer={
-            <>
-              <div
-                className="c-btn c-btn--outline-secondary"
-                onClick={() => setIsOpen(false)}
-                style={{
-                  cursor: 'pointer',
-                  padding: '8px 16px',
-                  display: 'inline-block',
-                  marginRight: '8px',
-                }}
-              >
-                Cancel
-              </div>
-              <div
-                className="c-btn c-btn--primary"
-                onClick={() => {
-                  alert('Action confirmed!');
-                  setIsOpen(false);
-                }}
-                style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
-              >
-                Confirm
-              </div>
-            </>
-          }
+          subtitle="This modal includes footer actions for user interaction."
         >
-          <p>This modal has a title, subtitle, and footer with action buttons.</p>
-          <p>The footer is ideal for placing action buttons or other controls.</p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, odio vitae
+            faucibus luctus, elit nisi tincidunt justo, in malesuada enim nisl eget nisl.
+            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
+            egestas.
+          </p>
         </Modal>
       </>
     );
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Modal with a title, subtitle, and footer actions.',
+      },
+    },
+  },
+};
+
+export const WithGlassEffect: Story = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <>
+        <div
+          className="c-btn c-btn--primary"
+          onClick={() => setIsOpen(true)}
+          style={{ cursor: 'pointer', padding: '8px 16px', display: 'inline-block' }}
+        >
+          Open Glass Modal
+        </div>
+
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          title="Glass Modal"
+          subtitle="This modal has a glass morphism effect applied."
+          glass={true}
+        >
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, odio vitae
+            faucibus luctus, elit nisi tincidunt justo, in malesuada enim nisl eget nisl.
+            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
+            egestas.
+          </p>
+        </Modal>
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Modal with glass morphism effect applied.',
+      },
+    },
+  },
 };
 
 /**