@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/components/Dropdown/Dropdown.tsx

@@ -6,6 +6,8 @@ import React, {
   useContext,
   useEffect,
   memo,
+  forwardRef,
+  ReactNode,
 } from 'react';
 import { DROPDOWN } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -14,6 +16,7 @@ import type {
   DropdownItemProps,
   DropdownDividerProps,
   DropdownHeaderProps,
+  AtomixGlassProps,
 } from '../../lib/types/components';
 
 // Context type definition
@@ -32,6 +35,54 @@ const DropdownContext = createContext<DropdownContextType>({
   trigger: 'click',
 });
 
+// Compound Components
+
+export const DropdownMenu = forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    const { glass } = useContext(DropdownStyleContext); // We need to access glass prop here?
+    // Wait, the original code wrapped <ul> in Context Provider.
+    // And applied glass wrapper around <ul>.
+    // If we use Compound Component, DropdownMenu should be the list.
+
+    return (
+      <ul
+        ref={ref}
+        className={`c-dropdown__menu ${glass ? 'c-dropdown__menu--glass' : ''} ${className}`.trim()}
+        {...props}
+      >
+        {children}
+      </ul>
+    );
+  }
+);
+DropdownMenu.displayName = 'DropdownMenu';
+
+export const DropdownTrigger = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', onClick, onKeyDown, ...props }, ref) => {
+    // We need to inject the trigger logic here.
+    // But triggers are usually handled by the parent Dropdown in the original code.
+    // The original code wraps children in `c-dropdown__toggle` div.
+
+    // Ideally, DropdownTrigger allows user to customize the trigger element.
+    // For backward compat, Dropdown wraps `children` (legacy) in `c-dropdown__toggle`.
+
+    // If we use <Dropdown.Trigger><Button/></Dropdown.Trigger>, we want the Button to be the trigger.
+
+    return (
+       <div
+         ref={ref}
+         className={`c-dropdown__toggle ${className}`.trim()}
+         onClick={onClick}
+         onKeyDown={onKeyDown}
+         {...props}
+       >
+         {children}
+       </div>
+    );
+  }
+);
+DropdownTrigger.displayName = 'DropdownTrigger';
+
 /**
  * DropdownItem component for menu items
  */
@@ -139,10 +190,21 @@ export const DropdownHeader: React.FC<DropdownHeaderProps> = memo(
   }
 );
 
+// Helper context to pass glass prop to DropdownMenu
+const DropdownStyleContext = createContext<{ glass?: AtomixGlassProps | boolean }>({});
+
 /**
  * Dropdown component for creating dropdown menus
  */
-export const Dropdown: React.FC<DropdownProps> = memo(
+type DropdownComponent = React.FC<DropdownProps> & {
+  Trigger: typeof DropdownTrigger;
+  Menu: typeof DropdownMenu;
+  Item: typeof DropdownItem;
+  Divider: typeof DropdownDivider;
+  Header: typeof DropdownHeader;
+};
+
+export const Dropdown: DropdownComponent = memo(
   ({
     children,
     menu,
@@ -160,7 +222,7 @@ export const Dropdown: React.FC<DropdownProps> = memo(
     style,
     glass,
     ...props
-  }) => {
+  }: DropdownProps) => {
     // Set up controlled vs uncontrolled state
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(false);
     const isControlled = controlledIsOpen !== undefined;
@@ -328,22 +390,46 @@ export const Dropdown: React.FC<DropdownProps> = memo(
       menuStyleProps.minWidth = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
     }
 
-    const menuContent = (
-      <div className="c-dropdown__menu-inner" style={menuStyleProps}>
-        <DropdownContext.Provider value={{ isOpen, close, id: dropdownId, trigger }}>
-          <ul className={`c-dropdown__menu ${glass ? 'c-dropdown__menu--glass' : ''}`}>{menu}</ul>
-        </DropdownContext.Provider>
-      </div>
+    // Determine content structure
+    // Legacy: menu prop + children as trigger
+    // Compound: children contains Trigger and Menu
+
+    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+      React.isValidElement(child) &&
+      ['DropdownTrigger', 'DropdownMenu'].includes((child.type as any).displayName)
     );
 
-    return (
-      <div
-        ref={dropdownRef}
-        className={dropdownClasses}
-        style={style}
-        onMouseEnter={trigger === 'hover' ? handleHoverOpen : undefined}
-        {...props}
-      >
+    let triggerContent: ReactNode;
+    let menuContentNode: ReactNode;
+
+    if (hasCompoundComponents) {
+      // Find Trigger and Menu in children
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child)) {
+          if ((child.type as any).displayName === 'DropdownTrigger') {
+            triggerContent = React.cloneElement(child, {
+              ref: toggleRef,
+              onClick: (e: React.MouseEvent) => {
+                handleToggleClick(e);
+                (child.props as any).onClick?.(e);
+              },
+              onKeyDown: (e: React.KeyboardEvent) => {
+                handleToggleKeyDown(e);
+                (child.props as any).onKeyDown?.(e);
+              },
+              'aria-haspopup': 'menu',
+              'aria-expanded': isOpen,
+              'aria-controls': dropdownId,
+              tabIndex: 0,
+            } as any);
+          } else if ((child.type as any).displayName === 'DropdownMenu') {
+            menuContentNode = child;
+          }
+        }
+      });
+    } else {
+      // Legacy mode
+      triggerContent = (
         <div
           ref={toggleRef}
           className="c-dropdown__toggle"
@@ -356,6 +442,31 @@ export const Dropdown: React.FC<DropdownProps> = memo(
         >
           {children}
         </div>
+      );
+      menuContentNode = (
+        <ul className={`c-dropdown__menu ${glass ? 'c-dropdown__menu--glass' : ''}`}>{menu}</ul>
+      );
+    }
+
+    const menuContent = (
+      <div className="c-dropdown__menu-inner" style={menuStyleProps}>
+        <DropdownStyleContext.Provider value={{ glass }}>
+          <DropdownContext.Provider value={{ isOpen, close, id: dropdownId, trigger }}>
+             {menuContentNode}
+          </DropdownContext.Provider>
+        </DropdownStyleContext.Provider>
+      </div>
+    );
+
+    return (
+      <div
+        ref={dropdownRef}
+        className={dropdownClasses}
+        style={style}
+        onMouseEnter={trigger === 'hover' ? handleHoverOpen : undefined}
+        {...props}
+      >
+        {triggerContent}
 
         <div
           ref={menuRef}
@@ -384,13 +495,15 @@ export const Dropdown: React.FC<DropdownProps> = memo(
       </div>
     );
   }
-);
+) as unknown as DropdownComponent;
 
 export type { DropdownProps, DropdownItemProps, DropdownDividerProps, DropdownHeaderProps };
 
 Dropdown.displayName = 'Dropdown';
-DropdownItem.displayName = 'DropdownItem';
-DropdownDivider.displayName = 'DropdownDivider';
-DropdownHeader.displayName = 'DropdownHeader';
+Dropdown.Trigger = DropdownTrigger;
+Dropdown.Menu = DropdownMenu;
+Dropdown.Item = DropdownItem;
+Dropdown.Divider = DropdownDivider;
+Dropdown.Header = DropdownHeader;
 
 export default Dropdown;

package/src/components/Dropdown/DropdownCompound.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Dropdown } from './Dropdown';
+import React from 'react';
+
+describe('Dropdown Component', () => {
+  it('renders correctly with legacy props', () => {
+    // In legacy mode, `menu` prop content is rendered inside the dropdown wrapper.
+    // The dropdown wrapper uses CSS visibility/opacity/display to hide the menu when not open.
+    // `toBeVisible` checks if the element is visible to the user.
+    // However, if the menu is just visually hidden via CSS classes (e.g. opacity: 0),
+    // jest-dom might consider it visible if display is not none and visibility is not hidden.
+    // Let's check if the wrapper has `is-open` class.
+
+    const { container } = render(
+      <Dropdown menu={<Dropdown.Item>Item 1</Dropdown.Item>}>
+        <button>Trigger</button>
+      </Dropdown>
+    );
+
+    expect(screen.getByText('Trigger')).toBeInTheDocument();
+
+    // Check if the menu wrapper exists but does not have 'is-open' class
+    const menuWrapper = container.querySelector('.c-dropdown__menu-wrapper');
+    expect(menuWrapper).not.toHaveClass('is-open');
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <button>Compound Trigger</button>
+        </Dropdown.Trigger>
+        <Dropdown.Menu>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+
+    expect(screen.getByText('Compound Trigger')).toBeInTheDocument();
+  });
+
+  it('toggles menu in compound mode', () => {
+    const { container } = render(
+      <Dropdown>
+        <Dropdown.Trigger>
+          <button>Trigger</button>
+        </Dropdown.Trigger>
+        <Dropdown.Menu>
+          <Dropdown.Item>Item 1</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+
+    fireEvent.click(screen.getByText('Trigger'));
+
+    // Check if open class is applied or aria-expanded
+    const trigger = screen.getByText('Trigger').closest('.c-dropdown__toggle');
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    const menuWrapper = container.querySelector('.c-dropdown__menu-wrapper');
+    expect(menuWrapper).toHaveClass('is-open');
+  });
+});

package/src/components/EdgePanel/EdgePanel.stories.tsx

@@ -627,7 +627,7 @@ export const GlassCustom: Story = {
               displacementScale: 70,
               blurAmount: 1.8,
               saturation: 170,
-              cornerRadius: 0,
+              borderRadius: 0,
             } as any
           }
         >
@@ -693,7 +693,7 @@ export const GlassPremium: Story = {
               displacementScale: 180,
               blurAmount: 1,
               saturation: 60,
-              cornerRadius: 0,
+              borderRadius: 0,
             } as any
           }
         >
@@ -786,7 +786,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 25,
                 blurAmount: 1.2,
                 saturation: 140,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -815,7 +815,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 35,
                 blurAmount: 1.5,
                 saturation: 160,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -844,7 +844,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 50,
                 blurAmount: 2,
                 saturation: 180,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -874,7 +874,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 70,
                 blurAmount: 1.8,
                 saturation: 170,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -907,7 +907,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 180,
                 blurAmount: 1,
                 saturation: 60,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >

package/src/components/EdgePanel/EdgePanel.tsx

@@ -1,10 +1,53 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, memo, forwardRef } from 'react';
 import { EdgePanelProps } from '../../lib/types/components';
 import { useEdgePanel } from '../../lib/composables/useEdgePanel';
 import { EDGE_PANEL } from '../../lib/constants/components';
 import { Icon } from '../Icon/Icon';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
+// Subcomponents
+export const EdgePanelHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-edge-panel__header ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+EdgePanelHeader.displayName = 'EdgePanelHeader';
+
+export const EdgePanelBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-edge-panel__body ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+EdgePanelBody.displayName = 'EdgePanelBody';
+
+export const EdgePanelFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-edge-panel__footer ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+EdgePanelFooter.displayName = 'EdgePanelFooter';
+
+export const EdgePanelCloseButton = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className = '', onClick, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={`c-edge-panel__close c-btn c-btn--icon ${className}`.trim()}
+      onClick={onClick}
+      aria-label="Close panel"
+      {...props}
+    >
+      <Icon name="X" />
+    </button>
+  )
+);
+EdgePanelCloseButton.displayName = 'EdgePanelCloseButton';
+
 /**
  * EdgePanel - A sliding panel component that appears from any screen edge
  *
@@ -21,129 +64,138 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
  *   <p>Panel content</p>
  * </EdgePanel>
  *
- * // With glass effect
- * <EdgePanel
- *   title="Glass Panel"
- *   isOpen={isOpen}
- *   onOpenChange={setIsOpen}
- *   position="end"
- *   glass={true}
- * >
- *   <p>Panel with glass morphism</p>
- * </EdgePanel>
- *
- * // With custom glass configuration
- * <EdgePanel
- *   title="Custom Glass"
- *   isOpen={isOpen}
- *   onOpenChange={setIsOpen}
- *   position="start"
- *   glass={{
- *     mode: 'shader',
- *     shaderVariant: 'liquidGlass',
- *     displacementScale: 70,
- *     blurAmount: 1.8,
- *     saturation: 170,
- *   }}
- * >
- *   <p>Panel with custom glass effect</p>
+ * // Compound Usage
+ * <EdgePanel isOpen={isOpen} onOpenChange={setIsOpen}>
+ *    <EdgePanel.Header>
+ *       <h4>Title</h4>
+ *       <EdgePanel.CloseButton onClick={() => setIsOpen(false)} />
+ *    </EdgePanel.Header>
+ *    <EdgePanel.Body>Content</EdgePanel.Body>
+ *    <EdgePanel.Footer>Footer</EdgePanel.Footer>
  * </EdgePanel>
  * ```
  */
-export const EdgePanel: React.FC<EdgePanelProps> = ({
-  title,
-  children,
-  position = 'start',
-  mode = 'slide',
-  isOpen = false,
-  onOpenChange,
-  backdrop = true,
-  closeOnBackdropClick = true,
-  closeOnEscape = true,
-  className = '',
-  style,
-  glass,
-}) => {
-  const {
-    isOpen: isOpenState,
-    containerRef,
-    backdropRef,
-    generateEdgePanelClass,
-    closePanel,
-    handleBackdropClick,
-  } = useEdgePanel({
-    position,
-    mode,
-    isOpen,
+type EdgePanelComponent = React.FC<EdgePanelProps> & {
+  Header: typeof EdgePanelHeader;
+  Body: typeof EdgePanelBody;
+  Footer: typeof EdgePanelFooter;
+  CloseButton: typeof EdgePanelCloseButton;
+};
+
+export const EdgePanel: EdgePanelComponent = memo(
+  ({
+    title,
+    children,
+    position = 'start',
+    mode = 'slide',
+    isOpen = false,
     onOpenChange,
-    backdrop,
-    closeOnBackdropClick,
-    closeOnEscape,
+    backdrop = true,
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    className = '',
+    style,
     glass,
-  });
+  }: EdgePanelProps) => {
+    const {
+      isOpen: isOpenState,
+      containerRef,
+      backdropRef,
+      generateEdgePanelClass,
+      closePanel,
+      handleBackdropClick,
+    } = useEdgePanel({
+      position,
+      mode,
+      isOpen,
+      onOpenChange,
+      backdrop,
+      closeOnBackdropClick,
+      closeOnEscape,
+      glass,
+    });
 
-  // Moved useRef outside of conditional rendering to fix hook order issue
-  const glassContentRef = useRef<HTMLDivElement>(null);
+    // Moved useRef outside of conditional rendering to fix hook order issue
+    const glassContentRef = useRef<HTMLDivElement>(null);
 
-  const panelClass = generateEdgePanelClass({
-    position,
-    isOpen,
-    className: glass ? `${className} c-edge-panel--glass` : className,
-  });
+    const panelClass = generateEdgePanelClass({
+      position,
+      isOpen,
+      className: glass ? `${className} c-edge-panel--glass` : className,
+    });
 
-  // If not open and not controlled by parent, don't render
-  if (!isOpenState && isOpen === false) {
-    return null;
-  }
+    // If not open and not controlled by parent, don't render
+    // Note: useEdgePanel manages internal state if onOpenChange is not provided?
+    // Looking at useEdgePanel (implied): it seems to return isOpenState.
+    // If we return null here, animations might be cut off.
+    // Usually EdgePanel/Drawer should stay mounted but hidden or conditionally mounted.
+    // The original code returned null if !isOpenState && isOpen === false.
+    // Let's keep that logic.
+    if (!isOpenState && isOpen === false) {
+      return null;
+    }
 
-  const defaultGlassProps = {
-    elasticity: 0,
-  };
-
-  const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-  const panelContent = (
-    <>
-      <div className="c-edge-panel__header">
-        <h4>{title}</h4>
-        <button
-          className="c-edge-panel__close c-btn c-btn--icon"
-          onClick={() => closePanel()}
-          aria-label="Close panel"
-        >
-          <Icon name="X" />
-        </button>
-      </div>
-      <div className="c-edge-panel__body">{children}</div>
-    </>
-  );
-
-  return (
-    <div className={panelClass} data-position={position} data-mode={mode} style={style}>
-      {backdrop && (
-        <div ref={backdropRef} className="c-edge-panel__backdrop" onClick={handleBackdropClick} />
-      )}
-      <div ref={containerRef} className="c-edge-panel__container">
-        {glass ? (
-          <AtomixGlass {...glassProps}>
-            <div
-              ref={glassContentRef}
-              className="c-edge-panel__glass-content"
-              style={{ borderRadius: containerRef.current?.style.borderRadius }}
-            >
-              {panelContent}
-            </div>
-          </AtomixGlass>
-        ) : (
-          panelContent
+    const defaultGlassProps = {
+      elasticity: 0,
+    };
+
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+    // Check for compound components
+    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+      React.isValidElement(child) &&
+      ['EdgePanelHeader', 'EdgePanelBody', 'EdgePanelFooter'].includes((child.type as any).displayName)
+    );
+
+    const panelContent = hasCompoundComponents ? (
+      children
+    ) : (
+      <>
+        <div className="c-edge-panel__header">
+          <h4>{title}</h4>
+          <button
+            className="c-edge-panel__close c-btn c-btn--icon"
+            onClick={() => closePanel()}
+            aria-label="Close panel"
+          >
+            <Icon name="X" />
+          </button>
+        </div>
+        <div className="c-edge-panel__body">{children}</div>
+      </>
+    );
+
+    return (
+      <div className={panelClass} data-position={position} data-mode={mode} style={style}>
+        {backdrop && (
+          <div ref={backdropRef} className="c-edge-panel__backdrop" onClick={handleBackdropClick} />
         )}
+        <div ref={containerRef} className="c-edge-panel__container">
+          {glass ? (
+            <AtomixGlass {...glassProps}>
+              <div
+                ref={glassContentRef}
+                className="c-edge-panel__glass-content"
+                style={{ borderRadius: containerRef.current?.style.borderRadius }}
+              >
+                {panelContent}
+              </div>
+            </AtomixGlass>
+          ) : (
+            panelContent
+          )}
+        </div>
       </div>
-    </div>
-  );
-};
-
-export type { EdgePanelProps };
+    );
+  }
+) as unknown as EdgePanelComponent;
 
 EdgePanel.displayName = 'EdgePanel';
+EdgePanel.Header = EdgePanelHeader;
+EdgePanel.Body = EdgePanelBody;
+EdgePanel.Footer = EdgePanelFooter;
+EdgePanel.CloseButton = EdgePanelCloseButton;
+
+export type { EdgePanelProps };
 
 export default EdgePanel;