@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Spinner/Spinner.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Spinner } from './Spinner';
 import { THEME_COLORS, SIZES } from '../../lib/constants/components';
 
@@ -10,8 +11,56 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Spinner component provides visual feedback during loading states. It displays an animated loading indicator that can be customized with different variants and sizes. Use spinners to indicate that content is being loaded or processed.',
+        component: `
+# Spinner
+
+## Overview
+
+Spinner provides visual feedback during loading states. It displays an animated loading indicator that can be customized with different variants and sizes. Use spinners to indicate that content is being loaded or processed.
+
+## Features
+
+- Multiple color variants
+- Multiple size options
+- Fullscreen mode
+- Smooth animations
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Screen reader: Loading state announced appropriately
+- ARIA support: Proper roles and properties for spinner components
+- Keyboard support: Accessible via keyboard navigation
+- Focus management: Focus indicators maintained for interactive elements
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Spinner />
+\`\`\`
+
+### With Variant and Size
+
+\`\`\`tsx
+<Spinner 
+  variant="primary" 
+  size="lg" 
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| variant | ThemeColor | 'primary' | The color variant of the spinner |
+| size | 'sm' \\| 'md' \\| 'lg' | 'md' | The size of the spinner |
+| fullscreen | boolean | false | Whether the spinner should be centered and fixed in the viewport |
+        `,
       },
     },
   },
@@ -21,15 +70,27 @@ const meta = {
       control: { type: 'select' },
       options: THEME_COLORS,
       description: 'The color variant of the spinner',
+      table: {
+        type: { summary: 'ThemeColor' },
+        defaultValue: { summary: 'primary' },
+      },
     },
     size: {
       control: { type: 'select' },
       options: SIZES,
       description: 'The size of the spinner',
+      table: {
+        type: { summary: '"sm" | "md" | "lg"' },
+        defaultValue: { summary: 'md' },
+      },
     },
     fullscreen: {
       control: 'boolean',
       description: 'Whether the spinner should be centered and fixed in the viewport',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
   },
 } satisfies Meta<typeof Spinner>;
@@ -37,17 +98,22 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Default Spinner
-export const Default: Story = {
+export const BasicUsage: Story = {
   args: {
     variant: 'primary',
     size: 'md',
     fullscreen: false,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic spinner with default settings.',
+      },
+    },
+  },
 };
 
-// Size Variants
-export const Sizes: Story = {
+export const AllSizes: Story = {
   render: () => (
     <div className="u-flex u-flex-wrap u-gap-3 u-items-center">
       <Spinner size="sm" />
@@ -55,10 +121,16 @@ export const Sizes: Story = {
       <Spinner size="lg" />
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Spinner in all available sizes.',
+      },
+    },
+  },
 };
 
-// Color Variants
-export const ColorVariants: Story = {
+export const AllVariants: Story = {
   render: () => (
     <div className="u-flex u-flex-wrap u-gap-3 u-items-center">
       {THEME_COLORS.map(color => (
@@ -66,4 +138,28 @@ export const ColorVariants: Story = {
       ))}
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Spinner in all available color variants.',
+      },
+    },
+  },
+};
+
+export const Fullscreen: Story = {
+  render: () => (
+    <div
+      style={{ height: '200px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+    >
+      <Spinner fullscreen={true} variant="primary" size="lg" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fullscreen spinner centered in the viewport.',
+      },
+    },
+  },
 };

package/src/components/Spinner/Spinner.test.tsx

@@ -4,32 +4,32 @@ import { Spinner } from './Spinner';
 
 // Mock AtomixGlass component
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
-    AtomixGlass: ({ children, ...props }: any) => (
-        <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
-            {children}
-        </div>
-    ),
+  AtomixGlass: ({ children, ...props }: any) => (
+    <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
 }));
 
 describe('Spinner Component', () => {
-    it('renders with default accessibility props', () => {
-        render(<Spinner />);
-        const spinner = screen.getByRole('status');
-        expect(spinner).toBeInTheDocument();
-        expect(spinner).toHaveAttribute('aria-label', 'Loading');
-        expect(screen.getByText('Loading...')).toBeInTheDocument();
-    });
+  it('renders with default accessibility props', () => {
+    render(<Spinner />);
+    const spinner = screen.getByRole('status');
+    expect(spinner).toBeInTheDocument();
+    expect(spinner).toHaveAttribute('aria-label', 'Loading');
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
 
-    it('renders with custom accessibility props', () => {
-        render(<Spinner role="alert" aria-label="Please wait" />);
-        const spinner = screen.getByRole('alert');
-        expect(spinner).toBeInTheDocument();
-        expect(spinner).toHaveAttribute('aria-label', 'Please wait');
-        expect(screen.getByText('Please wait')).toBeInTheDocument();
-    });
+  it('renders with custom accessibility props', () => {
+    render(<Spinner role="alert" aria-label="Please wait" />);
+    const spinner = screen.getByRole('alert');
+    expect(spinner).toBeInTheDocument();
+    expect(spinner).toHaveAttribute('aria-label', 'Please wait');
+    expect(screen.getByText('Please wait')).toBeInTheDocument();
+  });
 
-    it('renders as glass when enabled', () => {
-        render(<Spinner glass />);
-        expect(screen.getByTestId('atomix-glass')).toBeInTheDocument();
-    });
+  it('renders as glass when enabled', () => {
+    render(<Spinner glass />);
+    expect(screen.getByTestId('atomix-glass')).toBeInTheDocument();
+  });
 });

package/src/components/Spinner/Spinner.tsx

@@ -4,53 +4,50 @@ import { useSpinner } from '../../lib/composables/useSpinner';
 import { SPINNER } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Spinner: React.FC<SpinnerProps> = memo(({
-  size = 'md',
-  variant = 'primary',
-  fullscreen = false,
-  className = '',
-  style,
-  glass,
-  'aria-label': ariaLabel,
-  role = 'status',
-}) => {
-  const { generateSpinnerClass } = useSpinner({
-    size,
-    variant,
-    fullscreen,
-  });
-
-  const spinnerClass = generateSpinnerClass({
-    size,
-    variant,
-    fullscreen,
-    className: `${className} ${glass ? 'c-spinner--glass' : ''}`.trim(),
-  });
-
-  const spinnerContent = (
-    <div
-      className={spinnerClass}
-      style={style}
-      role={role}
-      aria-label={ariaLabel || 'Loading'}
-    >
-      <span className={SPINNER.VISUALLY_HIDDEN}>{ariaLabel || 'Loading...'}</span>
-    </div>
-  );
-
-  if (glass) {
-    const defaultGlassProps = {
-      displacementScale: 20,
-      blurAmount: 1,
-      cornerRadius: 999,
-      mode: 'shader' as const,
-    };
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-    return <AtomixGlass {...glassProps}>{spinnerContent}</AtomixGlass>;
+export const Spinner: React.FC<SpinnerProps> = memo(
+  ({
+    size = 'md',
+    variant = 'primary',
+    fullscreen = false,
+    className = '',
+    style,
+    glass,
+    'aria-label': ariaLabel,
+    role = 'status',
+  }) => {
+    const { generateSpinnerClass } = useSpinner({
+      size,
+      variant,
+      fullscreen,
+    });
+
+    const spinnerClass = generateSpinnerClass({
+      size,
+      variant,
+      fullscreen,
+      className: `${className} ${glass ? 'c-spinner--glass' : ''}`.trim(),
+    });
+
+    const spinnerContent = (
+      <div className={spinnerClass} style={style} role={role} aria-label={ariaLabel || 'Loading'}>
+        <span className={SPINNER.VISUALLY_HIDDEN}>{ariaLabel || 'Loading...'}</span>
+      </div>
+    );
+
+    if (glass) {
+      const defaultGlassProps = {
+        displacementScale: 20,
+        blurAmount: 1,
+        cornerRadius: 999,
+        mode: 'shader' as const,
+      };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      return <AtomixGlass {...glassProps}>{spinnerContent}</AtomixGlass>;
+    }
+
+    return spinnerContent;
   }
-
-  return spinnerContent;
-});
+);
 
 export type { SpinnerProps };
 

package/src/components/Steps/Steps.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Steps } from './Steps';
 
 const meta = {
@@ -9,26 +10,105 @@ const meta = {
     layout: 'padded',
     docs: {
       description: {
-        component:
-          'The Steps component displays a sequence of steps in a process or workflow. It provides visual progress indication and can be displayed horizontally or vertically. Steps are ideal for multi-step forms, onboarding flows, or any process that requires clear progress visualization.',
+        component: `
+# Steps
+
+## Overview
+
+Steps component displays a sequence of steps in a process or workflow. It provides visual progress indication and can be displayed horizontally or vertically. Steps are ideal for multi-step forms, onboarding flows, or any process that requires clear progress visualization.
+
+## Features
+
+- Horizontal and vertical orientations
+- Active step indication
+- Customizable step content
+- Glass morphism effect
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Screen reader: Step status and progress announced appropriately
+- ARIA support: Proper roles and properties for step components
+- Keyboard support: Accessible via keyboard navigation
+- Focus management: Maintains focus on interactive elements
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Steps 
+  items={[
+    { number: 1, text: 'Step 1' },
+    { number: 2, text: 'Step 2' },
+    { number: 3, text: 'Step 3' },
+  ]}
+  activeIndex={1}
+/>
+\`\`\`
+
+### Vertical Orientation
+
+\`\`\`tsx
+<Steps 
+  items={[
+    { number: 1, text: 'Step 1' },
+    { number: 2, text: 'Step 2' },
+    { number: 3, text: 'Step 3' },
+  ]}
+  activeIndex={1}
+  vertical={true}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| activeIndex | number | 1 | The index of the currently active step |
+| vertical | boolean | false | Whether to display steps vertically |
+| glass | boolean | false | Enable glass morphism effect |
+| items | StepItem[] | [] | Array of step items with number and text |
+        `,
       },
     },
   },
   tags: ['autodocs'],
   argTypes: {
     activeIndex: {
-      control: { type: 'number' },
+      control: { type: 'number', min: 0 },
       description: 'The index of the currently active step',
-      defaultValue: 1,
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 1 },
+      },
     },
     vertical: {
       control: { type: 'boolean' },
       description: 'Whether to display steps vertically',
-      defaultValue: false,
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     glass: {
       control: 'boolean',
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    items: {
+      control: { type: 'object' },
+      description: 'Array of step items with number and text',
+      table: {
+        type: { summary: 'StepItem[]' },
+        defaultValue: { summary: '[]' },
+      },
     },
   },
 } satisfies Meta<typeof Steps>;
@@ -36,13 +116,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Default horizontal steps
-export const Default: Story = {
-  render: args => (
-    <div style={{ padding: '30px' }}>
-      <Steps {...args} />
-    </div>
-  ),
+// Basic horizontal steps
+export const BasicHorizontal: Story = {
   args: {
     items: [
       { number: 1, text: 'Step 1' },
@@ -54,15 +129,22 @@ export const Default: Story = {
     activeIndex: 1,
     vertical: false,
   },
-};
-
-// Vertical steps
-export const Vertical: Story = {
   render: args => (
     <div style={{ padding: '30px' }}>
       <Steps {...args} />
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default horizontal steps with basic configuration.',
+      },
+    },
+  },
+};
+
+// Vertical steps
+export const BasicVertical: Story = {
   args: {
     items: [
       { number: 1, text: 'Step 1' },
@@ -74,6 +156,18 @@ export const Vertical: Story = {
     activeIndex: 1,
     vertical: true,
   },
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Steps {...args} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Steps displayed in vertical orientation.',
+      },
+    },
+  },
 };
 
 // Steps with custom content
@@ -100,20 +194,17 @@ export const WithCustomContent: Story = {
         text: 'Preferences',
         content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Select your preferences</p>,
       },
-      {
-        number: 4,
-        text: 'Payment',
-        content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Add payment information</p>,
-      },
-      {
-        number: 5,
-        text: 'Confirmation',
-        content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Complete your signup</p>,
-      },
     ],
     activeIndex: 1,
     vertical: false,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Steps with custom content in each step.',
+      },
+    },
+  },
 };
 
 // Steps with custom icons instead of numbers
@@ -152,9 +243,18 @@ export const WithIcons: Story = {
 };
 
 // Interactive steps with buttons for navigation
-const InteractiveSteps: React.FC = () => {
+const InteractiveStepsTemplate: React.FC<{ onStepChange?: (index: number) => void }> = ({
+  onStepChange,
+}) => {
   const [activeStep, setActiveStep] = React.useState(0);
 
+  const handleStepChange = (stepIndex: number) => {
+    setActiveStep(stepIndex);
+    if (onStepChange) {
+      onStepChange(stepIndex);
+    }
+  };
+
   const items = [
     { number: 1, text: 'Step 1' },
     { number: 2, text: 'Step 2' },
@@ -165,37 +265,47 @@ const InteractiveSteps: React.FC = () => {
 
   return (
     <div>
-      <Steps items={items} activeIndex={activeStep} onStepChange={setActiveStep} />
-      <div style={{ marginTop: '30px', display: 'flex', gap: '10px' }}>
+      <Steps items={items} activeIndex={activeStep} onStepChange={handleStepChange} />
+      <div style={{ marginTop: '30px', display: 'flex', gap: '10px', justifyContent: 'center' }}>
         <button
           className="c-btn c-btn--primary"
-          onClick={() => setActiveStep(Math.max(0, activeStep - 1))}
+          onClick={() => handleStepChange(Math.max(0, activeStep - 1))}
           disabled={activeStep === 0}
         >
           Previous
         </button>
         <button
           className="c-btn c-btn--primary"
-          onClick={() => setActiveStep(Math.min(items.length - 1, activeStep + 1))}
+          onClick={() => handleStepChange(Math.min(items.length - 1, activeStep + 1))}
           disabled={activeStep === items.length - 1}
         >
           Next
         </button>
+        <span style={{ marginLeft: '15px', alignSelf: 'center' }}>
+          Current step: {activeStep + 1} of {items.length}
+        </span>
       </div>
     </div>
   );
 };
 
 export const Interactive: Story = {
-  args: {} as any,
   render: () => (
     <div style={{ padding: '30px' }}>
-      <InteractiveSteps />
+      <InteractiveStepsTemplate />
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive steps with navigation controls to demonstrate state management.',
+      },
+    },
+  },
 };
 
-export const Glass: Story = {
+// Glass effect horizontal
+export const GlassHorizontal: Story = {
   args: {
     items: [
       { number: 1, text: 'Glass Step 1' },
@@ -208,7 +318,7 @@ export const Glass: Story = {
     vertical: false,
     glass: true,
   },
-  render: (args: any) => (
+  render: args => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -225,8 +335,16 @@ export const Glass: Story = {
       </div>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Horizontal steps with glass morphism effect applied.',
+      },
+    },
+  },
 };
 
+// Glass effect vertical
 export const GlassVertical: Story = {
   args: {
     items: [
@@ -240,7 +358,7 @@ export const GlassVertical: Story = {
     vertical: true,
     glass: true,
   },
-  render: (args: any) => (
+  render: args => (
     <div
       style={{
         background:
@@ -260,8 +378,16 @@ export const GlassVertical: Story = {
       </div>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Vertical steps with glass morphism effect applied.',
+      },
+    },
+  },
 };
 
+// Glass effect with custom configuration
 export const GlassCustom: Story = {
   args: {
     items: [
@@ -279,9 +405,9 @@ export const GlassCustom: Story = {
       saturation: 200,
       aberrationIntensity: 0.8,
       cornerRadius: 12,
-    } as any,
+    },
   },
-  render: (args: any) => (
+  render: args => (
     <div
       style={{
         background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',
@@ -295,18 +421,23 @@ export const GlassCustom: Story = {
         justifyContent: 'center',
       }}
     >
-      <style>
-        {`
+      <style>{`
           @keyframes gradient {
             0% { background-position: 0% 50%; }
             50% { background-position: 100% 50%; }
             100% { background-position: 0% 50%; }
           }
-        `}
-      </style>
+        `}</style>
       <div style={{ width: '100%', maxWidth: '800px' }}>
         <Steps {...args} />
       </div>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Horizontal steps with custom glass morphism effect parameters.',
+      },
+    },
+  },
 };