@shohojdhara/atomix 0.3.15 → 0.4.1

package/src/components/List/List.tsx

@@ -1,36 +1,43 @@
 import React, { memo } from 'react';
 import { ListProps } from '../../lib/types/components';
 import { LIST } from '../../lib/constants/components';
+import { ListItem } from './ListItem';
 
-export const List: React.FC<ListProps> = memo(({
-  children,
-  variant = 'default',
-  className = '',
-  style,
-  ...props
-}) => {
-  // Generate CSS classes
-  const listClasses = [LIST.BASE_CLASS, variant !== 'default' && `c-list--${variant}`, className]
-    .filter(Boolean)
-    .join(' ');
+export type { ListProps };
 
-  // Determine the HTML element based on variant
-  const ListElement = ['number', 'text'].includes(variant) ? 'ol' : 'ul';
+export type ListComponent = React.FC<ListProps> & {
+  Item: typeof ListItem;
+};
 
-  return (
-    <ListElement className={listClasses} style={style} {...props}>
-      {React.Children.map(children, child => {
-        if (React.isValidElement(child)) {
-          return <li className="c-list__item">{child}</li>;
-        }
-        return <li className="c-list__item">{child}</li>;
-      })}
-    </ListElement>
-  );
-});
+export const List: ListComponent = memo(
+  ({ children, variant = 'default', className = '', style, ...props }: ListProps) => {
+    // Generate CSS classes
+    const listClasses = [LIST.BASE_CLASS, variant !== 'default' && `c-list--${variant}`, className]
+      .filter(Boolean)
+      .join(' ');
 
-export type { ListProps };
+    // Determine the HTML element based on variant
+    const ListElement = ['number', 'text'].includes(variant) ? 'ol' : 'ul';
+
+    return (
+      <ListElement className={listClasses} style={style} {...props}>
+        {React.Children.map(children, child => {
+          if (React.isValidElement(child)) {
+            // Check if child is a ListItem
+            if (child.type === ListItem) {
+              return child;
+            }
+            // Legacy behavior: wrap in li
+            return <li className="c-list__item">{child}</li>;
+          }
+          return <li className="c-list__item">{child}</li>;
+        })}
+      </ListElement>
+    );
+  }
+) as unknown as ListComponent;
 
 List.displayName = 'List';
+List.Item = ListItem;
 
 export default List;

package/src/components/List/ListItem.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import { LIST } from '../../lib/constants/components';
+
+export interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  children?: React.ReactNode;
+}
+
+export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <li ref={ref} className={`${LIST.ITEM_CLASS} ${className}`.trim()} {...props}>
+        {children}
+      </li>
+    );
+  }
+);
+
+ListItem.displayName = 'ListItem';
+
+export default ListItem;

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

@@ -2,7 +2,7 @@ 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';
+import { Modal } from './Modal';
 
 // Helper type for glass props in stories (without children requirement)
 type GlassProps = boolean | Omit<AtomixGlassProps, 'children'>;
@@ -31,6 +31,7 @@ Modal displays content in a focused overlay dialog. It provides a way to present
 - Header and footer sections
 - Accessible design
 - Responsive behavior
+- **Compound Component Pattern** (new)
 
 ## Accessibility
 
@@ -53,6 +54,20 @@ Modal displays content in a focused overlay dialog. It provides a way to present
 </Modal>
 \`\`\`
 
+### Compound Component Usage
+
+\`\`\`tsx
+<Modal isOpen={isOpen} onOpenChange={setIsOpen}>
+  <Modal.Header closeButton title="Custom Header" />
+  <Modal.Body>
+    <p>Flexible body content</p>
+  </Modal.Body>
+  <Modal.Footer>
+    <button>Action</button>
+  </Modal.Footer>
+</Modal>
+\`\`\`
+
 ### With Glass Effect
 
 \`\`\`tsx
@@ -284,6 +299,55 @@ export const WithGlassEffect: Story = {
   },
 };
 
+export const CompoundUsage: 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 Compound Modal
+        </div>
+
+        <Modal
+          {...args}
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+        >
+          <Modal.Header
+            title="Compound Component Pattern"
+            subtitle="Fully customizable header"
+            closeButton
+          />
+          <Modal.Body>
+            <p>
+              This modal uses the Compound Component pattern (Modal.Header, Modal.Body, Modal.Footer).
+              This allows for greater flexibility in content arrangement.
+            </p>
+            <div style={{ marginTop: '1rem', padding: '1rem', background: '#f5f5f5', borderRadius: '4px' }}>
+              Custom content structure inside Body
+            </div>
+          </Modal.Body>
+          <Modal.Footer>
+             <button className="c-btn c-btn--outline-secondary" onClick={() => setIsOpen(false)}>Custom Footer Button</button>
+          </Modal.Footer>
+        </Modal>
+      </>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the Compound Component usage pattern.',
+      },
+    },
+  },
+};
+
 /**
  * Small size modal variant.
  */
@@ -649,7 +713,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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useCallback, memo } from 'react';
+import React, { useEffect, useRef, useState, useCallback, memo, forwardRef, ReactNode } from 'react';
 import { ModalProps } from '../../lib/types/components';
 import { MODAL } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -73,149 +73,232 @@ function useModal({
   };
 }
 
+// Modal Subcomponents
+
+export interface ModalHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  closeButton?: boolean;
+  onClose?: () => void;
+}
+
+export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
+  ({ title, subtitle, closeButton, onClose, children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-modal__header ${className}`.trim()} {...props}>
+        <div className="c-modal__header-content">
+          {title && <h3 className="c-modal__title">{title}</h3>}
+          {subtitle && <p className="c-modal__sub">{subtitle}</p>}
+          {children}
+        </div>
+        {closeButton && (
+          <button
+            type="button"
+            className="c-modal__close c-btn js-modal-close"
+            onClick={onClose}
+            aria-label="Close modal"
+          >
+            <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>
+    );
+  }
+);
+ModalHeader.displayName = 'ModalHeader';
+
+export const ModalBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-modal__body ${className}`.trim()} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalBody.displayName = 'ModalBody';
+
+export const ModalFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-modal__footer ${className}`.trim()} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalFooter.displayName = 'ModalFooter';
+
 /**
  * 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,
+type ModalComponent = React.FC<ModalProps> & {
+  Header: typeof ModalHeader;
+  Body: typeof ModalBody;
+  Footer: typeof ModalFooter;
+};
+
+const ModalImpl = memo(
+  ({
+    children,
+    isOpen = false,
     onOpenChange,
     onClose,
     onOpen,
-  });
+    title,
+    subtitle,
+    size = 'md',
+    backdrop = true,
+    keyboard = true,
+    className = '',
+    style,
+    closeButton = true,
+    footer,
+    glass,
+    ...props
+  }: ModalProps) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const dialogRef = useRef<HTMLDivElement>(null);
+    const backdropRef = useRef<HTMLDivElement>(null);
 
-  // Handle keyboard events for Escape key
-  useEffect(() => {
-    if (!keyboard) return undefined;
+    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();
+        }
+      };
 
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpenState) {
+      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]);
+    // Assemble classes
+    const modalClasses = [
+      'c-modal',
+      isOpenState ? MODAL.CLASSES.IS_OPEN : '',
+      size ? `c-modal--${size}` : '',
+      glass ? 'c-modal--glass' : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
 
-  // Handle backdrop click
-  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (backdrop && event.target === event.currentTarget) {
-      close();
-    }
-  };
+    // Check for compound components usage
+    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+      React.isValidElement(child) &&
+      ['ModalHeader', 'ModalBody', 'ModalFooter'].includes((child.type as any).displayName)
+    );
 
-  // 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"
-              >
-                <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>
-      )}
+    const modalContent = (
+      <div className="c-modal__content">
+        {hasCompoundComponents ? (
+          React.Children.map(children, child => {
+            if (
+              React.isValidElement(child) &&
+              (child.type as any).displayName === 'ModalHeader'
+            ) {
+              return React.cloneElement(child, {
+                onClose: (child.props as any).onClose || close,
+              } as any);
+            }
+            return child;
+          })
+        ) : (
+          <>
+            {(title || closeButton) && (
+              <ModalHeader
+                title={title}
+                subtitle={subtitle}
+                closeButton={closeButton}
+                onClose={close}
+              />
+            )}
+            <ModalBody>{children}</ModalBody>
+            {footer && <ModalFooter>{footer}</ModalFooter>}
+          </>
+        )}
+      </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',
+                };
 
-      {footer && <div className="c-modal__footer">{footer}</div>}
-    </div>
-  );
+                const glassProps =
+                  glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-  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}
+                return <AtomixGlass {...glassProps}>{modalContent}</AtomixGlass>;
+              })()
+            : modalContent}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
+
+ModalImpl.displayName = 'Modal';
+
+// Attach subcomponents
+const ModalWithSubcomponents = ModalImpl as unknown as ModalComponent;
+ModalWithSubcomponents.Header = ModalHeader;
+ModalWithSubcomponents.Body = ModalBody;
+ModalWithSubcomponents.Footer = ModalFooter;
 
-Modal.displayName = 'Modal';
+export const Modal = ModalWithSubcomponents;
 
 export type { ModalProps };
 

package/src/components/Modal/ModalCompound.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Modal } from './Modal';
+import React from 'react';
+
+describe('Modal Component', () => {
+  it('renders correctly with legacy props', () => {
+    render(
+      <Modal isOpen={true} title="Legacy Title" footer="Legacy Footer">
+        Legacy Content
+      </Modal>
+    );
+
+    expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Content')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Footer')).toBeInTheDocument();
+
+    // Check structure classes
+    expect(document.querySelector('.c-modal__header')).toBeInTheDocument();
+    expect(document.querySelector('.c-modal__body')).toBeInTheDocument();
+    expect(document.querySelector('.c-modal__footer')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Modal isOpen={true}>
+        <Modal.Header title="Compound Header" />
+        <Modal.Body>Compound Body</Modal.Body>
+        <Modal.Footer>Compound Footer</Modal.Footer>
+      </Modal>
+    );
+
+    expect(screen.getByText('Compound Header')).toBeInTheDocument();
+    expect(screen.getByText('Compound Body')).toBeInTheDocument();
+    expect(screen.getByText('Compound Footer')).toBeInTheDocument();
+
+    // Verify no double wrapping
+    // If double wrapping occurred, we might see nested .c-modal__body or similar issues,
+    // or the header inside the body if logic failed.
+
+    const header = document.querySelector('.c-modal__header');
+    const body = document.querySelector('.c-modal__body');
+    const footer = document.querySelector('.c-modal__footer');
+
+    // Header should be a direct child of .c-modal__content (or close to it)
+    expect(header?.parentElement).toHaveClass('c-modal__content');
+    expect(body?.parentElement).toHaveClass('c-modal__content');
+    expect(footer?.parentElement).toHaveClass('c-modal__content');
+  });
+
+  it('injects onClose into Modal.Header when used in compound mode', () => {
+    const onClose = vi.fn();
+    render(
+      <Modal isOpen={true} onClose={onClose}>
+        <Modal.Header closeButton data-testid="header" />
+        <Modal.Body>Content</Modal.Body>
+      </Modal>
+    );
+
+    const closeBtn = screen.getByLabelText('Close modal');
+    fireEvent.click(closeBtn);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('allows custom onClose in Modal.Header', () => {
+    const modalOnClose = vi.fn();
+    const headerOnClose = vi.fn();
+
+    render(
+      <Modal isOpen={true} onClose={modalOnClose}>
+        <Modal.Header closeButton onClose={headerOnClose} />
+        <Modal.Body>Content</Modal.Body>
+      </Modal>
+    );
+
+    const closeBtn = screen.getByLabelText('Close modal');
+    fireEvent.click(closeBtn);
+
+    expect(headerOnClose).toHaveBeenCalled();
+    expect(modalOnClose).not.toHaveBeenCalled();
+  });
+
+  it('prioritizes compound components over legacy props', () => {
+    render(
+      <Modal isOpen={true} title="Legacy Title">
+        <Modal.Header title="Compound Header" />
+        <Modal.Body>Compound Body</Modal.Body>
+      </Modal>
+    );
+
+    expect(screen.getByText('Compound Header')).toBeInTheDocument();
+    expect(screen.queryByText('Legacy Title')).not.toBeInTheDocument();
+  });
+});