@shohojdhara/atomix 0.4.0 → 0.4.1

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;

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/Form/Select.stories.tsx

@@ -256,6 +256,29 @@ export const Sizes: Story = {
   ),
 };
 
+// Compound usage
+export const Compound: Story = {
+  render: () => (
+    <div style={{ width: '300px' }}>
+      <Select placeholder="Select a framework">
+        <Select.Option value="react">React</Select.Option>
+        <Select.Option value="vue">Vue</Select.Option>
+        <Select.Option value="angular">Angular</Select.Option>
+        <Select.Option value="svelte" disabled>
+          Svelte (Disabled)
+        </Select.Option>
+      </Select>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Select component using Compound Component Pattern.',
+      },
+    },
+  },
+};
+
 // Select states
 export const States: Story = {
   args: {

package/src/components/Form/Select.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Select } from './Select';
+
+describe('Select Component', () => {
+  it('renders legacy options correctly', () => {
+    const options = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+    ];
+    render(<Select options={options} value="" onChange={() => {}} />);
+
+    // Check custom UI items
+    const items = document.querySelectorAll('.c-select__item');
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveTextContent('Option 1');
+    expect(items[1]).toHaveTextContent('Option 2');
+
+    // Check native select options
+    const select = document.querySelector('select');
+    expect(select).not.toBeNull();
+    expect(select?.options).toHaveLength(3); // Placeholder + 2
+    expect(select?.options[1].value).toBe('1');
+    expect(select?.options[2].value).toBe('2');
+  });
+
+  it('renders compound options correctly', async () => {
+    render(
+      <Select value="" onChange={() => {}}>
+        <Select.Option value="1">Compound Option 1</Select.Option>
+        <Select.Option value="2">Compound Option 2</Select.Option>
+      </Select>
+    );
+
+    // Check custom UI items
+    const items = document.querySelectorAll('.c-select__item');
+    expect(items).toHaveLength(2);
+    expect(items[0]).toHaveTextContent('Compound Option 1');
+    expect(items[1]).toHaveTextContent('Compound Option 2');
+
+    // Check native select options
+    await waitFor(() => {
+        const select = document.querySelector('select');
+        expect(select).not.toBeNull();
+        expect(select?.options).toHaveLength(3); // Placeholder + 2
+        expect(select?.options[1].value).toBe('1');
+        expect(select?.options[2].value).toBe('2');
+    });
+  });
+
+  it('handles selection in legacy mode', () => {
+    const handleChange = vi.fn();
+    const options = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+    ];
+    render(<Select options={options} value="" onChange={handleChange} />);
+
+    // Open dropdown
+    const trigger = document.querySelector('.c-select__selected');
+    fireEvent.click(trigger!);
+
+    // Click item
+    const item = document.querySelector('.c-select__item[data-value="1"]');
+    fireEvent.click(item!);
+
+    expect(handleChange).toHaveBeenCalled();
+    // Check event value
+    expect(handleChange.mock.calls[0][0].target.value).toBe('1');
+  });
+
+  it('handles selection in compound mode', async () => {
+    const handleChange = vi.fn();
+    render(
+      <Select value="" onChange={handleChange}>
+        <Select.Option value="1">Option 1</Select.Option>
+        <Select.Option value="2">Option 2</Select.Option>
+      </Select>
+    );
+
+    // Wait for options to be registered
+    await waitFor(() => {
+        const select = document.querySelector('select');
+        expect(select?.options).toHaveLength(3);
+    });
+
+    // Open dropdown
+    const trigger = document.querySelector('.c-select__selected');
+    fireEvent.click(trigger!);
+
+    // Click item
+    const item = document.querySelector('.c-select__item[data-value="2"]');
+    fireEvent.click(item!);
+
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleChange.mock.calls[0][0].target.value).toBe('2');
+  });
+});