@shohojdhara/atomix 0.3.15 → 0.4.1

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

@@ -230,18 +230,13 @@ const DemoPanelContent = ({
 );
 
 export const BasicUsage: Story = {
-  render: (args) => {
+  render: args => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Open Edge Panel</Button>
-        <EdgePanel
-          {...args}
-          isOpen={isOpen}
-          onOpenChange={setIsOpen}
-          title="Basic Edge Panel"
-        >
+        <EdgePanel {...args} isOpen={isOpen} onOpenChange={setIsOpen} title="Basic Edge Panel">
           <DemoPanelContent {...args} />
         </EdgePanel>
       </>
@@ -271,7 +266,7 @@ export const AllPositions: Story = {
     return (
       <>
         <div className="u-flex u-gap-2 u-flex-wrap">
-          {(['start', 'end', 'top', 'bottom'] as const).map((pos) => (
+          {(['start', 'end', 'top', 'bottom'] as const).map(pos => (
             <Button
               key={pos}
               variant={position === pos ? 'primary' : 'secondary'}
@@ -306,18 +301,13 @@ export const AllPositions: Story = {
 };
 
 export const WithSlideMode: Story = {
-  render: (args) => {
+  render: args => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
       <>
         <Button onClick={() => setIsOpen(true)}>Open Slide Mode Panel</Button>
-        <EdgePanel
-          {...args}
-          isOpen={isOpen}
-          onOpenChange={setIsOpen}
-          title="Slide Mode Panel"
-        >
+        <EdgePanel {...args} isOpen={isOpen} onOpenChange={setIsOpen} title="Slide Mode Panel">
           <DemoPanelContent {...args} />
         </EdgePanel>
       </>
@@ -834,10 +824,7 @@ export const GlassShowcase: Story = {
               <p className="u-mb-4">
                 Enhanced polar distortion creates unique radial patterns from center.
               </p>
-              <Card
-                title="Radial Distortion"
-                text="Creates circular displacement patterns."
-              />
+              <Card title="Radial Distortion" text="Creates circular displacement patterns." />
             </div>
           </EdgePanel>
 

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,131 +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}
+    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"
           >
-            <div
-              ref={glassContentRef}
-              className="c-edge-panel__glass-content"
-              style={{ borderRadius: containerRef.current?.style.borderRadius }}
-            >
-              {panelContent}
-            </div>
-          </AtomixGlass>
-        ) : (
-          panelContent
+            <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;

package/src/components/EdgePanel/EdgePanelCompound.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { EdgePanel } from './EdgePanel';
+import React from 'react';
+
+describe('EdgePanel Component', () => {
+  it('renders correctly with legacy props', () => {
+    render(
+      <EdgePanel isOpen={true} title="Legacy Title">
+        Legacy Content
+      </EdgePanel>
+    );
+
+    expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Content')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <EdgePanel isOpen={true}>
+        <EdgePanel.Header>
+          <h4>Compound Title</h4>
+        </EdgePanel.Header>
+        <EdgePanel.Body>
+          Compound Content
+        </EdgePanel.Body>
+        <EdgePanel.Footer>
+          Footer
+        </EdgePanel.Footer>
+      </EdgePanel>
+    );
+
+    expect(screen.getByText('Compound Title')).toBeInTheDocument();
+    expect(screen.getByText('Compound Content')).toBeInTheDocument();
+    expect(screen.getByText('Footer')).toBeInTheDocument();
+  });
+
+  it('uses close button in compound mode', () => {
+    const onClose = vi.fn();
+    render(
+      <EdgePanel isOpen={true} onOpenChange={onClose}>
+        <EdgePanel.Header>
+          <EdgePanel.CloseButton onClick={() => onClose(false)} />
+        </EdgePanel.Header>
+        <EdgePanel.Body>Content</EdgePanel.Body>
+      </EdgePanel>
+    );
+
+    const closeBtn = screen.getByLabelText('Close panel');
+    fireEvent.click(closeBtn);
+    expect(onClose).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/Footer/Footer.stories.tsx

@@ -97,7 +97,10 @@ Footer provides a comprehensive footer section for websites with multiple layout
       options: ['columns', 'centered', 'minimal', 'stacked', 'flexible', 'sidebar', 'wide'],
       description: 'Footer layout variant',
       table: {
-        type: { summary: '"columns" | "centered" | "minimal" | "stacked" | "flexible" | "sidebar" | "wide"' },
+        type: {
+          summary:
+            '"columns" | "centered" | "minimal" | "stacked" | "flexible" | "sidebar" | "wide"',
+        },
         defaultValue: { summary: 'columns' },
       },
     },
@@ -289,7 +292,7 @@ export const BasicUsage: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -316,7 +319,7 @@ export const WithNewsletter: Story = {
     onNewsletterSubmit: fn(),
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -340,7 +343,7 @@ export const WithBackToTop: Story = {
     onBackToTop: fn(),
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -362,7 +365,7 @@ export const CenteredLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -384,7 +387,7 @@ export const MinimalLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -406,7 +409,7 @@ export const StackedLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -428,7 +431,7 @@ export const FlexibleLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -450,7 +453,7 @@ export const SidebarLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -472,7 +475,7 @@ export const WideLayout: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -494,7 +497,7 @@ export const DarkVariant: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -516,7 +519,7 @@ export const LargeSize: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -538,7 +541,7 @@ export const WithGlassEffect: Story = {
     socialLinks: sampleSocialLinks,
     glass: true,
   },
-  render: (args) => (
+  render: args => (
     <Footer {...args}>
       <SampleFooterContent />
     </Footer>
@@ -560,9 +563,11 @@ export const StickyFooter: Story = {
     copyright: '© 2024 Atomix. All rights reserved.',
     socialLinks: sampleSocialLinks,
   },
-  render: (args) => (
+  render: args => (
     <div style={{ minHeight: '200vh' }}>
-      <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div
+        style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      >
         <p>Scroll down to see the sticky footer</p>
       </div>
       <Footer {...args}>
@@ -577,4 +582,4 @@ export const StickyFooter: Story = {
       },
     },
   },
-};
+};