@shohojdhara/atomix 0.4.0 → 0.4.1

package/src/components/Callout/Callout.tsx

@@ -1,85 +1,206 @@
-import React from 'react';
+import React, { memo, forwardRef } from 'react';
 import { CalloutProps } from '../../lib/types/components';
 import { useCallout } from '../../lib/composables/useCallout';
 import { Icon } from '../Icon/Icon';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
+// Subcomponents
+export const CalloutIcon = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__icon ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutIcon.displayName = 'CalloutIcon';
+
+export const CalloutMessage = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__message ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutMessage.displayName = 'CalloutMessage';
+
+export const CalloutTitle = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__title ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutTitle.displayName = 'CalloutTitle';
+
+export const CalloutText = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__text ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutText.displayName = 'CalloutText';
+
+export const CalloutActions = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__actions ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutActions.displayName = 'CalloutActions';
+
+export interface CalloutCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+export const CalloutCloseButton = forwardRef<HTMLButtonElement, CalloutCloseButtonProps>(
+  ({ onClick, className = '', ...props }, ref) => (
+    <button
+      ref={ref}
+      className={`c-callout__close-btn ${className}`.trim()}
+      onClick={onClick}
+      aria-label="Close"
+      {...props}
+    >
+      <Icon name="X" size="md" />
+    </button>
+  )
+);
+CalloutCloseButton.displayName = 'CalloutCloseButton';
+
+// Wrapper for content (icon + message)
+export const CalloutContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__content ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutContent.displayName = 'CalloutContent';
+
 /**
  * Callout component for displaying important messages, notifications, or alerts
  */
-export const Callout: React.FC<CalloutProps> = ({
-  title,
-  children,
-  icon,
-  variant = 'primary',
-  onClose,
-  actions,
-  compact = false,
-  isToast = false,
-  glass,
-  className,
-  style,
-  ...props
-}) => {
-  const { generateCalloutClass, handleClose } = useCallout({
-    variant,
-    compact,
-    isToast,
+type CalloutComponent = React.FC<CalloutProps> & {
+  Icon: typeof CalloutIcon;
+  Message: typeof CalloutMessage;
+  Title: typeof CalloutTitle;
+  Text: typeof CalloutText;
+  Actions: typeof CalloutActions;
+  CloseButton: typeof CalloutCloseButton;
+  Content: typeof CalloutContent;
+};
+
+export const Callout: CalloutComponent = memo(
+  ({
+    title,
+    children,
+    icon,
+    variant = 'primary',
+    onClose,
+    actions,
+    compact = false,
+    isToast = false,
     glass,
     className,
     style,
-  });
+    ...props
+  }: CalloutProps) => {
+    const { generateCalloutClass, handleClose } = useCallout({
+      variant,
+      compact,
+      isToast,
+      glass,
+      className,
+      style,
+    });
 
-  // Determine appropriate ARIA attributes based on variant
-  const getAriaAttributes = () => {
-    const baseAttributes: Record<string, string> = {
-      role: 'region',
-    };
+    // Determine appropriate ARIA attributes based on variant
+    const getAriaAttributes = () => {
+      const baseAttributes: Record<string, string> = {
+        role: 'region',
+      };
 
-    // For toast notifications or alerts, use appropriate role and live region
-    if (isToast) {
-      baseAttributes.role = 'alert';
-      baseAttributes['aria-live'] = 'polite';
-    } else if (['warning', 'error'].includes(variant)) {
-      baseAttributes.role = 'alert';
-      baseAttributes['aria-live'] = 'assertive';
-    } else if (['info', 'success'].includes(variant)) {
-      baseAttributes.role = 'status';
-      baseAttributes['aria-live'] = 'polite';
-    }
+      // For toast notifications or alerts, use appropriate role and live region
+      if (isToast) {
+        baseAttributes.role = 'alert';
+        baseAttributes['aria-live'] = 'polite';
+      } else if (['warning', 'error'].includes(variant)) {
+        baseAttributes.role = 'alert';
+        baseAttributes['aria-live'] = 'assertive';
+      } else if (['info', 'success'].includes(variant)) {
+        baseAttributes.role = 'status';
+        baseAttributes['aria-live'] = 'polite';
+      }
+
+      return baseAttributes;
+    };
 
-    return baseAttributes;
-  };
+    // Check for compound usage
+    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+      React.isValidElement(child) &&
+      [
+        'CalloutIcon',
+        'CalloutMessage',
+        'CalloutTitle',
+        'CalloutText',
+        'CalloutActions',
+        'CalloutContent',
+      ].includes((child.type as any).displayName)
+    );
 
-  const calloutContent = (
-    <>
-      <div className="c-callout__content">
-        {icon && <div className="c-callout__icon">{icon}</div>}
-        <div className="c-callout__message">
-          {title && <div className="c-callout__title">{title}</div>}
-          {children && <div className="c-callout__text">{children}</div>}
+    const calloutContent = hasCompoundComponents ? (
+      children
+    ) : (
+      <>
+        <div className="c-callout__content">
+          {icon && <div className="c-callout__icon">{icon}</div>}
+          <div className="c-callout__message">
+            {title && <div className="c-callout__title">{title}</div>}
+            {children && <div className="c-callout__text">{children}</div>}
+          </div>
         </div>
-      </div>
 
-      {actions && <div className="c-callout__actions">{actions}</div>}
-
-      {onClose && (
-        <button className="c-callout__close-btn" onClick={handleClose(onClose)} aria-label="Close">
-          <Icon name="X" size="md" />
-        </button>
-      )}
-    </>
-  );
-
-  if (glass) {
-    // Default glass settings for callouts
-    const defaultGlassProps = {
-      displacementScale: 30,
-      cornerRadius: 8,
-      elasticity: 0,
-    };
+        {actions && <div className="c-callout__actions">{actions}</div>}
+
+        {onClose && (
+          <button
+            className="c-callout__close-btn"
+            onClick={handleClose(onClose)}
+            aria-label="Close"
+          >
+            <Icon name="X" size="md" />
+          </button>
+        )}
+      </>
+    );
+
+    if (glass) {
+      // Default glass settings for callouts
+      const defaultGlassProps = {
+        displacementScale: 30,
+        cornerRadius: 8,
+        elasticity: 0,
+      };
+
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      return (
+        <div
+          className={generateCalloutClass({ variant, compact, isToast, glass, className })}
+          {...getAriaAttributes()}
+          {...props}
+          style={style}
+        >
+          <AtomixGlass {...glassProps}>
+            <div
+              className="c-callout__glass-content"
+              style={{ borderRadius: glassProps.cornerRadius }}
+            >
+              {calloutContent}
+            </div>
+          </AtomixGlass>
+        </div>
+      );
+    }
 
     return (
       <div
@@ -88,32 +209,23 @@ export const Callout: React.FC<CalloutProps> = ({
         {...props}
         style={style}
       >
-        <AtomixGlass {...glassProps}>
-          <div
-            className="c-callout__glass-content"
-            style={{ borderRadius: glassProps.cornerRadius }}
-          >
-            {calloutContent}
-          </div>
-        </AtomixGlass>
+        {calloutContent}
       </div>
     );
   }
-
-  return (
-    <div
-      className={generateCalloutClass({ variant, compact, isToast, glass, className })}
-      {...getAriaAttributes()}
-      {...props}
-      style={style}
-    >
-      {calloutContent}
-    </div>
-  );
-};
+) as unknown as CalloutComponent;
 
 Callout.displayName = 'Callout';
 
+// Attach subcomponents
+Callout.Icon = CalloutIcon;
+Callout.Message = CalloutMessage;
+Callout.Title = CalloutTitle;
+Callout.Text = CalloutText;
+Callout.Actions = CalloutActions;
+Callout.CloseButton = CalloutCloseButton;
+Callout.Content = CalloutContent;
+
 export type { CalloutProps };
 
 export default Callout;

package/src/components/Callout/CalloutCompound.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Callout } from './Callout';
+import React from 'react';
+
+describe('Callout Component', () => {
+  it('renders correctly with legacy props', () => {
+    render(
+      <Callout title="Legacy Title" icon={<span>Icon</span>}>
+        Legacy Content
+      </Callout>
+    );
+
+    expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Content')).toBeInTheDocument();
+    expect(screen.getByText('Icon')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Callout>
+        <Callout.Content>
+          <Callout.Icon>
+            <span>Compound Icon</span>
+          </Callout.Icon>
+          <Callout.Message>
+            <Callout.Title>Compound Title</Callout.Title>
+            <Callout.Text>Compound Text</Callout.Text>
+          </Callout.Message>
+        </Callout.Content>
+        <Callout.Actions>
+          <button>Action</button>
+        </Callout.Actions>
+        <Callout.CloseButton onClick={() => {}} />
+      </Callout>
+    );
+
+    expect(screen.getByText('Compound Icon')).toBeInTheDocument();
+    expect(screen.getByText('Compound Title')).toBeInTheDocument();
+    expect(screen.getByText('Compound Text')).toBeInTheDocument();
+    expect(screen.getByText('Action')).toBeInTheDocument();
+    expect(screen.getByLabelText('Close')).toBeInTheDocument();
+  });
+
+  it('prioritizes compound components over legacy props', () => {
+    render(
+      <Callout title="Legacy Title">
+        <Callout.Content>
+          <Callout.Message>
+            <Callout.Text>Compound Text</Callout.Text>
+          </Callout.Message>
+        </Callout.Content>
+      </Callout>
+    );
+
+    expect(screen.getByText('Compound Text')).toBeInTheDocument();
+    expect(screen.queryByText('Legacy Title')).not.toBeInTheDocument();
+  });
+
+  it('renders close button when used as compound', () => {
+    const onClose = vi.fn();
+    render(
+      <Callout>
+         <Callout.CloseButton onClick={onClose} />
+      </Callout>
+    );
+
+    const button = screen.getByLabelText('Close');
+    fireEvent.click(button);
+    expect(onClose).toHaveBeenCalled();
+  });
+});

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');
+  });
+});