@shohojdhara/atomix 0.3.15 → 0.4.1

package/src/components/Steps/Steps.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState, ReactNode } from 'react';
+import React, { useEffect, useState, ReactNode, forwardRef, Children, cloneElement, isValidElement } from 'react';
 import { STEPS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
 
-export interface StepItem {
+// Legacy Item Interface
+export interface StepItemData {
   /**
    * The number for the step
    */
@@ -20,11 +21,71 @@ export interface StepItem {
   content?: React.ReactNode;
 }
 
+export type { StepItemData as StepItem };
+
+// Compound Component Props
+export interface StepsItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The number or icon for the step
+   */
+  number?: number | string | ReactNode;
+
+  /**
+   * The text label/title for the step
+   */
+  title?: ReactNode;
+
+  /**
+   * Whether the step is active
+   */
+  active?: boolean;
+
+  /**
+   * Whether the step is completed
+   */
+  completed?: boolean;
+
+  /**
+   * Index of the step (injected by parent)
+   */
+  index?: number;
+}
+
+export const StepsItem = forwardRef<HTMLDivElement, StepsItemProps>(
+  ({ children, className = '', number, title, active, completed, index, ...props }, ref) => {
+    const itemClasses = [
+      'c-steps__item',
+      active ? STEPS.CLASSES.ACTIVE : '',
+      completed ? STEPS.CLASSES.COMPLETED : '',
+      className
+    ].filter(Boolean).join(' ');
+
+    return (
+      <div
+        ref={ref}
+        className={itemClasses}
+        aria-current={active ? 'step' : undefined}
+        data-index={index}
+        {...props}
+      >
+        <div className="c-steps__line"></div>
+        <div className="c-steps__content">
+          {(number !== undefined && number !== null) && <div className="c-steps__number">{number}</div>}
+          {title && <div className="c-steps__text">{title}</div>}
+          {children && <div className="c-steps__custom-content">{children}</div>}
+        </div>
+      </div>
+    );
+  }
+);
+
+StepsItem.displayName = 'StepsItem';
+
 export interface StepsProps {
   /**
-   * Array of step items
+   * Array of step items (Legacy)
    */
-  items: StepItem[];
+  items?: StepItemData[];
 
   /**
    * Current active step index (0-based)
@@ -56,12 +117,22 @@ export interface StepsProps {
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
    */
   glass?: AtomixGlassProps | boolean;
+
+  /**
+   * Children (Compound)
+   */
+  children?: ReactNode;
 }
 
+type StepsComponent = React.FC<StepsProps> & {
+  Item: typeof StepsItem;
+  Step: typeof StepsItem; // Alias for convenience
+};
+
 /**
  * Steps component for displaying a sequence of steps
  */
-export const Steps: React.FC<StepsProps> = ({
+const StepsComp: React.FC<StepsProps> = ({
   items,
   activeIndex = 0,
   vertical = false,
@@ -69,6 +140,7 @@ export const Steps: React.FC<StepsProps> = ({
   className = '',
   style,
   glass,
+  children,
 }) => {
   const [currentStep, setCurrentStep] = useState(activeIndex);
 
@@ -79,10 +151,11 @@ export const Steps: React.FC<StepsProps> = ({
     }
   }, [activeIndex]);
 
-  // Method to go to next step
+  // Method to go to next step (Internal helper)
   const goToNextStep = () => {
     const nextIndex = currentStep + 1;
-    if (nextIndex < items.length) {
+    const maxIndex = items ? items.length : Children.count(children);
+    if (nextIndex < maxIndex) {
       setCurrentStep(nextIndex);
       if (onStepChange) {
         onStepChange(nextIndex);
@@ -101,6 +174,45 @@ export const Steps: React.FC<StepsProps> = ({
     }
   };
 
+  let content: ReactNode;
+
+  if (items && items.length > 0) {
+    // Legacy rendering
+    content = items.map((item, index) => (
+      <StepsItem
+        key={`step-${index}`}
+        index={index}
+        number={item.number}
+        title={item.text}
+        active={index <= currentStep}
+        completed={index < currentStep}
+      >
+        {item.content}
+      </StepsItem>
+    ));
+  } else {
+    // Compound rendering
+    content = Children.map(children, (child, index) => {
+      if (isValidElement(child)) {
+        const childProps = child.props as any;
+        // Inject active/completed based on index if not explicitly provided
+        const isActive = childProps.active ?? index <= currentStep;
+        const isCompleted = childProps.completed ?? index < currentStep;
+
+        // If number is not provided, default to index + 1
+        const number = childProps.number ?? (index + 1);
+
+        return cloneElement(child, {
+          index,
+          active: isActive,
+          completed: isCompleted,
+          number,
+        } as any);
+      }
+      return child;
+    });
+  }
+
   const stepsContent = (
     <div
       className={`c-steps ${vertical ? STEPS.CLASSES.VERTICAL : ''} ${className}`}
@@ -108,20 +220,7 @@ export const Steps: React.FC<StepsProps> = ({
       role="navigation"
       aria-label="Steps"
     >
-      {items.map((item, index) => (
-        <div
-          key={`step-${index}`}
-          className={`c-steps__item ${index <= currentStep ? STEPS.CLASSES.ACTIVE : ''} ${index < currentStep ? STEPS.CLASSES.COMPLETED : ''}`}
-          aria-current={index === currentStep ? 'step' : undefined}
-        >
-          <div className="c-steps__line"></div>
-          <div className="c-steps__content">
-            <div className="c-steps__number">{item.number}</div>
-            <div className="c-steps__text">{item.text}</div>
-            {item.content && <div className="c-steps__custom-content">{item.content}</div>}
-          </div>
-        </div>
-      ))}
+      {content}
     </div>
   );
 
@@ -144,6 +243,10 @@ export const Steps: React.FC<StepsProps> = ({
   return stepsContent;
 };
 
+export const Steps = StepsComp as StepsComponent;
+
 Steps.displayName = 'Steps';
+Steps.Item = StepsItem;
+Steps.Step = StepsItem;
 
 export default Steps;

package/src/components/Steps/StepsCompound.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Steps } from './Steps';
+import React from 'react';
+
+describe('Steps Component', () => {
+  it('renders correctly with legacy items prop', () => {
+    const items = [
+      { number: 1, text: 'Step 1' },
+      { number: 2, text: 'Step 2' },
+      { number: 3, text: 'Step 3' },
+    ];
+    render(<Steps items={items} activeIndex={1} />);
+
+    // Step 1: active (<= 1) and completed (< 1)
+    const step1 = screen.getByText('Step 1').closest('.c-steps__item');
+    expect(step1).toHaveClass('is-active');
+    expect(step1).toHaveClass('is-completed');
+
+    // Step 2: active (<= 1) and NOT completed (>= 1)
+    const step2 = screen.getByText('Step 2').closest('.c-steps__item');
+    expect(step2).toHaveClass('is-active');
+    expect(step2).not.toHaveClass('is-completed');
+
+    // Step 3: NOT active (> 1)
+    const step3 = screen.getByText('Step 3').closest('.c-steps__item');
+    expect(step3).not.toHaveClass('is-active');
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Steps activeIndex={1}>
+        <Steps.Item title="Step 1">Content 1</Steps.Item>
+        <Steps.Item title="Step 2">Content 2</Steps.Item>
+        <Steps.Item title="Step 3">Content 3</Steps.Item>
+      </Steps>
+    );
+
+    // Verify titles
+    expect(screen.getByText('Step 1')).toBeInTheDocument();
+    expect(screen.getByText('Step 2')).toBeInTheDocument();
+    expect(screen.getByText('Step 3')).toBeInTheDocument();
+
+    // Verify content
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+
+    // Step 1: active and completed (inferred from activeIndex 1)
+    const step1 = screen.getByText('Step 1').closest('.c-steps__item');
+    expect(step1).toHaveClass('is-active');
+    expect(step1).toHaveClass('is-completed');
+
+    // Step 2: active and NOT completed
+    const step2 = screen.getByText('Step 2').closest('.c-steps__item');
+    expect(step2).toHaveClass('is-active');
+    expect(step2).not.toHaveClass('is-completed');
+
+    // Step 3: NOT active
+    const step3 = screen.getByText('Step 3').closest('.c-steps__item');
+    expect(step3).not.toHaveClass('is-active');
+
+    // Verify automatic numbering
+    expect(step1?.querySelector('.c-steps__number')).toHaveTextContent('1');
+    expect(step2?.querySelector('.c-steps__number')).toHaveTextContent('2');
+    expect(step3?.querySelector('.c-steps__number')).toHaveTextContent('3');
+  });
+
+  it('supports explicit props on Steps.Item', () => {
+    render(
+      <Steps>
+        <Steps.Item title="Custom Step" number="A" active completed>
+          Custom Content
+        </Steps.Item>
+      </Steps>
+    );
+
+    const step = screen.getByText('Custom Step').closest('.c-steps__item');
+    expect(step).toHaveClass('is-active');
+    expect(step).toHaveClass('is-completed');
+    expect(step?.querySelector('.c-steps__number')).toHaveTextContent('A');
+  });
+});

package/src/components/Tabs/Tabs.stories.tsx

@@ -180,13 +180,15 @@ export const WithDifferentActiveTab: Story = {
 
 export const WithGlassEffect: Story = {
   render: args => (
-    <div style={{ 
-      maxWidth: '600px', 
-      margin: '0 auto', 
-      padding: '30px',
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      minHeight: '300px'
-    }}>
+    <div
+      style={{
+        maxWidth: '600px',
+        margin: '0 auto',
+        padding: '30px',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        minHeight: '300px',
+      }}
+    >
       <Tabs {...args} />
     </div>
   ),
@@ -224,7 +226,8 @@ export const WithRichContent: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Demonstrates tabs containing rich HTML content including headings, lists, and tables, showing the flexibility of the tabs component.',
+        story:
+          'Demonstrates tabs containing rich HTML content including headings, lists, and tables, showing the flexibility of the tabs component.',
       },
     },
   },
@@ -392,4 +395,4 @@ export const GlassCustom: Story = {
       </div>
     </div>
   ),
-};
+};

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactNode, memo } from 'react';
+import React, { useState, ReactNode, memo, createContext, useContext, forwardRef } from 'react';
 import { TAB } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
@@ -27,9 +27,9 @@ export interface TabsItemProps {
 
 export interface TabsProps {
   /**
-   * Array of tab items
+   * Array of tab items (Legacy mode)
    */
-  items: TabsItemProps[];
+  items?: TabsItemProps[];
 
   /**
    * Initial active tab index
@@ -56,89 +56,244 @@ export interface TabsProps {
    * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
    */
   glass?: AtomixGlassProps | boolean;
+
+  /**
+   * Children (Compound mode)
+   */
+  children?: ReactNode;
+}
+
+// Context for compound usage
+const TabsContext = createContext<{
+  currentTab: number;
+  handleTabClick: (index: number) => void;
+}>({
+  currentTab: 0,
+  handleTabClick: () => {},
+});
+
+// Compound components
+export const TabsList = forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <ul ref={ref} className={`c-tabs__nav ${className}`.trim()} {...props}>
+        {React.Children.map(children, (child, index) => {
+          if (React.isValidElement(child)) {
+             // Inject index into TabsTrigger
+             return React.cloneElement(child, { index } as any);
+          }
+          return child;
+        })}
+      </ul>
+    );
+  }
+);
+TabsList.displayName = 'TabsList';
+
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  index?: number; // Injected by TabsList or passed explicitly
+}
+
+export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ children, className = '', index, onClick, ...props }, ref) => {
+    const { currentTab, handleTabClick } = useContext(TabsContext);
+
+    // Safety check if used outside context or without index
+    if (index === undefined) {
+      console.warn('TabsTrigger requires an index prop or must be a direct child of TabsList');
+    }
+
+    const isActive = index !== undefined && currentTab === index;
+
+    return (
+      <li className="c-tabs__nav-item">
+        <button
+          ref={ref}
+          className={`c-tabs__nav-btn ${isActive ? TAB.CLASSES.ACTIVE : ''} ${className}`.trim()}
+          onClick={(e) => {
+            if (index !== undefined) handleTabClick(index);
+            onClick?.(e);
+          }}
+          data-tabindex={index}
+          role="tab"
+          aria-selected={isActive}
+          aria-controls={`tab-panel-${index}`}
+          type="button"
+          {...props}
+        >
+          {children}
+        </button>
+      </li>
+    );
+  }
+);
+TabsTrigger.displayName = 'TabsTrigger';
+
+export const TabsPanels = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-tabs__panels ${className}`.trim()} {...props}>
+        {React.Children.map(children, (child, index) => {
+           if (React.isValidElement(child)) {
+             return React.cloneElement(child, { index } as any);
+           }
+           return child;
+        })}
+      </div>
+    );
+  }
+);
+TabsPanels.displayName = 'TabsPanels';
+
+export interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  index?: number;
 }
 
+export const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
+  ({ children, className = '', index, style, ...props }, ref) => {
+    const { currentTab } = useContext(TabsContext);
+    const isActive = index !== undefined && currentTab === index;
+
+    return (
+      <div
+        ref={ref}
+        className={`c-tabs__panel ${isActive ? TAB.CLASSES.ACTIVE : ''} ${className}`.trim()}
+        data-tabindex={index}
+        id={`tab-panel-${index}`}
+        role="tabpanel"
+        aria-labelledby={`tab-nav-${index}`}
+        style={{
+          height: isActive ? 'auto' : '0px',
+          opacity: isActive ? 1 : 0,
+          overflow: 'hidden',
+          transition: 'height 0.3s ease, opacity 0.3s ease',
+          ...style,
+        }}
+        {...props}
+      >
+        <div className="c-tabs__panel-body">{children}</div>
+      </div>
+    );
+  }
+);
+TabsPanel.displayName = 'TabsPanel';
+
+
 /**
  * Tabs component for switching between different content panels
  */
-export const Tabs: React.FC<TabsProps> = memo(({
-  items,
-  activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
-  onTabChange,
-  className = '',
-  style,
-  glass,
-}) => {
-  const [currentTab, setCurrentTab] = useState(activeIndex);
-
-  // Handle tab change
-  const handleTabClick = (index: number) => {
-    setCurrentTab(index);
-    if (onTabChange) {
-      onTabChange(index);
-    }
-  };
-
-  const tabContent = (
-    <div className={`c-tabs js-atomix-tab ${className}`} style={style}>
-      <ul className="c-tabs__nav">
-        {items.map((item, index) => (
-          <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
-            <button
-              className={`c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
-              onClick={() => handleTabClick(index)}
-              data-tabindex={index}
-              role="tab"
-              aria-selected={index === currentTab}
-              aria-controls={`tab-panel-${index}`}
-            >
-              {item.label}
-            </button>
-          </li>
-        ))}
-      </ul>
-      <div className="c-tabs__panels">
-        {items.map((item, index) => (
-          <div
-            className={`c-tabs__panel ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
-            key={`tab-panel-${index}`}
-            data-tabindex={index}
-            id={`tab-panel-${index}`}
-            role="tabpanel"
-            aria-labelledby={`tab-nav-${index}`}
-            style={{
-              height: index === currentTab ? 'auto' : '0px',
-              opacity: index === currentTab ? 1 : 0,
-              overflow: 'hidden',
-              transition: 'height 0.3s ease, opacity 0.3s ease',
-            }}
-          >
-            <div className="c-tabs__panel-body">{item.content}</div>
+type TabsComponent = React.FC<TabsProps> & {
+  List: typeof TabsList;
+  Trigger: typeof TabsTrigger;
+  Panels: typeof TabsPanels;
+  Panel: typeof TabsPanel;
+};
+
+export const Tabs: TabsComponent = memo(
+  ({
+    items,
+    activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
+    onTabChange,
+    className = '',
+    style,
+    glass,
+    children,
+  }: TabsProps) => {
+    const [currentTab, setCurrentTab] = useState(activeIndex);
+
+    // Handle tab change
+    const handleTabClick = (index: number) => {
+      setCurrentTab(index);
+      if (onTabChange) {
+        onTabChange(index);
+      }
+    };
+
+    // Determine content based on mode (legacy items vs compound children)
+    let content: ReactNode;
+
+    // Use items prop if provided
+    if (items && items.length > 0) {
+      // Legacy mode
+      content = (
+        <>
+          <ul className="c-tabs__nav">
+            {items.map((item, index) => (
+              <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
+                <button
+                  className={`c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
+                  onClick={() => handleTabClick(index)}
+                  data-tabindex={index}
+                  role="tab"
+                  aria-selected={index === currentTab}
+                  aria-controls={`tab-panel-${index}`}
+                >
+                  {item.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+          <div className="c-tabs__panels">
+            {items.map((item, index) => (
+              <div
+                className={`c-tabs__panel ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
+                key={`tab-panel-${index}`}
+                data-tabindex={index}
+                id={`tab-panel-${index}`}
+                role="tabpanel"
+                aria-labelledby={`tab-nav-${index}`}
+                style={{
+                  height: index === currentTab ? 'auto' : '0px',
+                  opacity: index === currentTab ? 1 : 0,
+                  overflow: 'hidden',
+                  transition: 'height 0.3s ease, opacity 0.3s ease',
+                }}
+              >
+                <div className="c-tabs__panel-body">{item.content}</div>
+              </div>
+            ))}
           </div>
-        ))}
+        </>
+      );
+    } else {
+      // Compound mode
+      content = (
+        <TabsContext.Provider value={{ currentTab, handleTabClick }}>
+          {children}
+        </TabsContext.Provider>
+      );
+    }
+
+    const wrapper = (
+      <div className={`c-tabs js-atomix-tab ${className}`} style={style}>
+        {content}
       </div>
-    </div>
-  );
-
-  if (glass) {
-    // Default glass settings for tabs
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.5,
-      cornerRadius: 8,
-      mode: 'shader' as const,
-    };
+    );
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+    if (glass) {
+      // Default glass settings for tabs
+      const defaultGlassProps = {
+        displacementScale: 60,
+        blurAmount: 1,
+        saturation: 160,
+        aberrationIntensity: 0.5,
+        cornerRadius: 8,
+        mode: 'shader' as const,
+      };
 
-    return <AtomixGlass {...glassProps}>{tabContent}</AtomixGlass>;
-  }
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-  return tabContent;
-});
+      return <AtomixGlass {...glassProps}>{wrapper}</AtomixGlass>;
+    }
+
+    return wrapper;
+  }
+) as unknown as TabsComponent;
 
 Tabs.displayName = 'Tabs';
+Tabs.List = TabsList;
+Tabs.Trigger = TabsTrigger;
+Tabs.Panels = TabsPanels;
+Tabs.Panel = TabsPanel;
 
 export default Tabs;