@shohojdhara/atomix 0.3.14 → 0.4.0

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.',
+      },
+    },
+  },
 };
 
 /**
@@ -510,7 +649,8 @@ export const GlassModalSizes: Story = {
             The glass effect adapts to different modal sizes while maintaining its visual appeal.
           </p>
           <p>
-            The glass effect enhances the modal's appearance, making it visually appealing and  easier to read.
+            The glass effect enhances the modal's appearance, making it visually appealing and
+            easier to read.
           </p>
         </Modal>
       </div>

package/src/components/Modal/Modal.tsx

@@ -76,144 +76,147 @@ function useModal({
 /**
  * Modal component for displaying overlay content
  */
-export const Modal: React.FC<ModalProps> = memo(({
-  children,
-  isOpen = false,
-  onOpenChange,
-  onClose,
-  onOpen,
-  title,
-  subtitle,
-  size = 'md',
-  backdrop = true,
-  keyboard = true,
-  className = '',
-  style,
-  closeButton = true,
-  footer,
-  glass,
-  ...props
-}) => {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const dialogRef = useRef<HTMLDivElement>(null);
-  const backdropRef = useRef<HTMLDivElement>(null);
-
-  const {
-    isOpen: isOpenState,
-    open,
-    close,
-  } = useModal({
-    isOpen,
+export const Modal: React.FC<ModalProps> = memo(
+  ({
+    children,
+    isOpen = false,
     onOpenChange,
     onClose,
     onOpen,
-  });
-
-  // Handle keyboard events for Escape key
-  useEffect(() => {
-    if (!keyboard) return undefined;
-
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpenState) {
+    title,
+    subtitle,
+    size = 'md',
+    backdrop = true,
+    keyboard = true,
+    className = '',
+    style,
+    closeButton = true,
+    footer,
+    glass,
+    ...props
+  }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const dialogRef = useRef<HTMLDivElement>(null);
+    const backdropRef = useRef<HTMLDivElement>(null);
+
+    const {
+      isOpen: isOpenState,
+      open,
+      close,
+    } = useModal({
+      isOpen,
+      onOpenChange,
+      onClose,
+      onOpen,
+    });
+
+    // Handle keyboard events for Escape key
+    useEffect(() => {
+      if (!keyboard) return undefined;
+
+      const handleKeydown = (event: KeyboardEvent) => {
+        if (event.key === 'Escape' && isOpenState) {
+          close();
+        }
+      };
+
+      document.addEventListener('keydown', handleKeydown);
+      return () => {
+        document.removeEventListener('keydown', handleKeydown);
+      };
+    }, [isOpenState, close, keyboard]);
+
+    // Handle backdrop click
+    const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+      if (backdrop && event.target === event.currentTarget) {
         close();
       }
     };
 
-    document.addEventListener('keydown', handleKeydown);
-    return () => {
-      document.removeEventListener('keydown', handleKeydown);
-    };
-  }, [isOpenState, close, keyboard]);
-
-  // Handle backdrop click
-  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (backdrop && event.target === event.currentTarget) {
-      close();
-    }
-  };
-
-  // Assemble classes
-  const modalClasses = [
-    'c-modal',
-    isOpenState ? MODAL.CLASSES.IS_OPEN : '',
-    size ? `c-modal--${size}` : '',
-    glass ? 'c-modal--glass' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const modalContent = (
-    <div className="c-modal__content">
-      {(title || closeButton) && (
-        <div className="c-modal__header">
-          <div className="c-modal__header-content">
-            {title && <h3 className="c-modal__title">{title}</h3>}
-            {subtitle && <p className="c-modal__sub">{subtitle}</p>}
-          </div>
-          {closeButton && (
-            <button
-              type="button"
-              className="c-modal__close c-btn js-modal-close"
-              onClick={close}
-              aria-label="Close modal"
-            >
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
+    // Assemble classes
+    const modalClasses = [
+      'c-modal',
+      isOpenState ? MODAL.CLASSES.IS_OPEN : '',
+      size ? `c-modal--${size}` : '',
+      glass ? 'c-modal--glass' : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const modalContent = (
+      <div className="c-modal__content">
+        {(title || closeButton) && (
+          <div className="c-modal__header">
+            <div className="c-modal__header-content">
+              {title && <h3 className="c-modal__title">{title}</h3>}
+              {subtitle && <p className="c-modal__sub">{subtitle}</p>}
+            </div>
+            {closeButton && (
+              <button
+                type="button"
+                className="c-modal__close c-btn js-modal-close"
+                onClick={close}
+                aria-label="Close modal"
               >
-                <path
-                  d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
-                  fill="#141414"
-                />
-              </svg>
-            </button>
-          )}
-        </div>
-      )}
-
-      <div className="c-modal__body">{children}</div>
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
+                    fill="#141414"
+                  />
+                </svg>
+              </button>
+            )}
+          </div>
+        )}
 
-      {footer && <div className="c-modal__footer">{footer}</div>}
-    </div>
-  );
+        <div className="c-modal__body">{children}</div>
 
-  return (
-    <div
-      ref={modalRef}
-      className={modalClasses}
-      style={{ display: isOpenState ? 'block' : 'none', ...style }}
-      role="dialog"
-      aria-modal="true"
-      aria-hidden={!isOpenState}
-      {...props}
-    >
-      <div ref={backdropRef} className="c-modal__backdrop" onClick={handleBackdropClick} />
-      <div ref={dialogRef} className="c-modal__dialog">
-        {glass
-          ? // Default glass settings for modals
-            (() => {
-              const defaultGlassProps = {
-                displacementScale: document.querySelector('.c-modal---glass .c-modal__content')?.clientHeight,
-                blurAmount: 2.2,
-                elasticity: 0,
-                mode: 'shader' as const,
-                shaderMode: 'premiumGlass'
-              };
-
-              const glassProps =
-                glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-              return <AtomixGlass {...glassProps}>{modalContent}</AtomixGlass>;
-            })()
-          : modalContent}
+        {footer && <div className="c-modal__footer">{footer}</div>}
       </div>
-    </div>
-  );
-});
+    );
+
+    return (
+      <div
+        ref={modalRef}
+        className={modalClasses}
+        style={{ display: isOpenState ? 'block' : 'none', ...style }}
+        role="dialog"
+        aria-modal="true"
+        aria-hidden={!isOpenState}
+        {...props}
+      >
+        <div ref={backdropRef} className="c-modal__backdrop" onClick={handleBackdropClick} />
+        <div ref={dialogRef} className="c-modal__dialog">
+          {glass
+            ? // Default glass settings for modals
+              (() => {
+                const defaultGlassProps = {
+                  displacementScale: document.querySelector('.c-modal---glass .c-modal__content')
+                    ?.clientHeight,
+                  blurAmount: 2.2,
+                  elasticity: 0,
+                  mode: 'shader' as const,
+                  shaderMode: 'premiumGlass',
+                };
+
+                const glassProps =
+                  glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+                return <AtomixGlass {...glassProps}>{modalContent}</AtomixGlass>;
+              })()
+            : modalContent}
+        </div>
+      </div>
+    );
+  }
+);
 
 Modal.displayName = 'Modal';