@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/SectionIntro/SectionIntro.stories.tsx

@@ -18,29 +18,29 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
-    title: { 
-      control: 'text', 
-      description: 'Main title text (supports ReactNode)', 
+    title: {
+      control: 'text',
+      description: 'Main title text (supports ReactNode)',
       table: {
         type: { summary: 'ReactNode' },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
-    label: { 
-      control: 'text', 
-      description: 'Label text displayed above the title (supports ReactNode)', 
+    label: {
+      control: 'text',
+      description: 'Label text displayed above the title (supports ReactNode)',
       table: {
         type: { summary: 'ReactNode' },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
-    text: { 
-      control: 'text', 
-      description: 'Description text content (supports ReactNode)', 
+    text: {
+      control: 'text',
+      description: 'Description text content (supports ReactNode)',
       table: {
         type: { summary: 'ReactNode' },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
     alignment: {
       control: { type: 'radio', options: ['left', 'center', 'right'] },
@@ -49,7 +49,7 @@ const meta = {
       table: {
         type: { summary: '"left" | "center" | "right"' },
         defaultValue: { summary: 'left' },
-      }
+      },
     },
     size: {
       control: { type: 'radio', options: SIZES },
@@ -58,55 +58,55 @@ const meta = {
       table: {
         type: { summary: '"sm" | "md" | "lg"' },
         defaultValue: { summary: 'md' },
-      }
+      },
     },
-    skeleton: { 
+    skeleton: {
       control: 'boolean',
       description: 'Show skeleton loading state',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
-      }
+      },
     },
-    showOverlay: { 
+    showOverlay: {
       control: 'boolean',
       description: 'Whether to show an overlay on the background',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
-      }
+      },
     },
-    actions: { 
+    actions: {
       control: { type: 'text' },
       description: 'Call to action elements (supports ReactNode)',
       table: {
         type: { summary: 'ReactNode' },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
-    backgroundImageSrc: { 
+    backgroundImageSrc: {
       control: 'text',
       description: 'URL for the background image',
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
-    imageSrc: { 
+    imageSrc: {
       control: 'text',
       description: 'URL for the foreground image',
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
-    imageAlt: { 
-      control: 'text', 
-      description: 'Alt text for the image', 
+    imageAlt: {
+      control: 'text',
+      description: 'Alt text for the image',
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'Section image' },
-      }
+      },
     },
     className: {
       control: 'text',
@@ -114,7 +114,7 @@ const meta = {
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: '' },
-      }
+      },
     },
     style: {
       control: 'object',
@@ -122,7 +122,7 @@ const meta = {
       table: {
         type: { summary: 'CSSProperties' },
         defaultValue: { summary: '{}' },
-      }
+      },
     },
   },
   args: {
@@ -151,10 +151,10 @@ export const BasicUsage: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Basic usage of the SectionIntro component with title, label, and text.'
-      }
-    }
-  }
+        story: 'Basic usage of the SectionIntro component with title, label, and text.',
+      },
+    },
+  },
 };
 
 // With actions example
@@ -175,10 +175,10 @@ export const WithActions: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'SectionIntro with call-to-action buttons.'
-      }
-    }
-  }
+        story: 'SectionIntro with call-to-action buttons.',
+      },
+    },
+  },
 };
 
 // Center-aligned example
@@ -193,10 +193,10 @@ export const CenterAligned: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Center-aligned SectionIntro content.'
-      }
-    }
-  }
+        story: 'Center-aligned SectionIntro content.',
+      },
+    },
+  },
 };
 
 // Right-aligned example
@@ -211,10 +211,10 @@ export const RightAligned: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Right-aligned SectionIntro content.'
-      }
-    }
-  }
+        story: 'Right-aligned SectionIntro content.',
+      },
+    },
+  },
 };
 
 // With background image example
@@ -232,10 +232,10 @@ export const WithBackgroundImage: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'SectionIntro with a background image and overlay.'
-      }
-    }
-  }
+        story: 'SectionIntro with a background image and overlay.',
+      },
+    },
+  },
 };
 
 // With foreground image example
@@ -253,10 +253,10 @@ export const WithForegroundImage: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'SectionIntro with a foreground image.'
-      }
-    }
-  }
+        story: 'SectionIntro with a foreground image.',
+      },
+    },
+  },
 };
 
 // Small size example
@@ -271,10 +271,10 @@ export const SmallSize: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Small-sized SectionIntro for compact layouts.'
-      }
-    }
-  }
+        story: 'Small-sized SectionIntro for compact layouts.',
+      },
+    },
+  },
 };
 
 // Large size example
@@ -289,10 +289,10 @@ export const LargeSize: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Large-sized SectionIntro for prominent displays.'
-      }
-    }
-  }
+        story: 'Large-sized SectionIntro for prominent displays.',
+      },
+    },
+  },
 };
 
 // Skeleton loading state example
@@ -308,10 +308,10 @@ export const SkeletonLoading: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Skeleton loading state of the SectionIntro component.'
-      }
-    }
-  }
+        story: 'Skeleton loading state of the SectionIntro component.',
+      },
+    },
+  },
 };
 
 // Full featured example
@@ -338,8 +338,8 @@ export const FullFeaturedExample: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Full featured SectionIntro with all options enabled.'
-      }
-    }
-  }
-};
+        story: 'Full featured SectionIntro with all options enabled.',
+      },
+    },
+  },
+};

package/src/components/Slider/Slider.stories.tsx

@@ -225,7 +225,9 @@ const basicSlides: SliderSlide[] = [
       >
         <div className="u-text-center">
           <h2 className="u-text-3 u-c-white u-mb-3">Developer Friendly</h2>
-          <p className="u-text-base u-c-white u-mb-4">Well documented with clear APIs and examples</p>
+          <p className="u-text-base u-c-white u-mb-4">
+            Well documented with clear APIs and examples
+          </p>
           <Button variant="primary">View Docs</Button>
         </div>
       </div>
@@ -295,7 +297,9 @@ const basicSlides: SliderSlide[] = [
       >
         <div className="u-text-center">
           <h2 className="u-text-3 u-c-white u-mb-3">RTL Support</h2>
-          <p className="u-text-base u-c-white u-mb-4">Full right-to-left language support built-in</p>
+          <p className="u-text-base u-c-white u-mb-4">
+            Full right-to-left language support built-in
+          </p>
           <Button variant="info">Learn More</Button>
         </div>
       </div>
@@ -317,7 +321,9 @@ const basicSlides: SliderSlide[] = [
       >
         <div className="u-text-center">
           <h2 className="u-text-3 u-c-white u-mb-3">Open Source</h2>
-          <p className="u-text-base u-c-white u-mb-4">Free to use and contribute to the community</p>
+          <p className="u-text-base u-c-white u-mb-4">
+            Free to use and contribute to the community
+          </p>
           <Button variant="success">View on GitHub</Button>
         </div>
       </div>
@@ -342,7 +348,9 @@ const productSlides: SliderSlide[] = [
             }}
           />
           <h3 className="u-text-4 u-font-bold u-mb-2">Premium Plan</h3>
-          <p className="u-text-sm u-c-muted u-mb-3">Perfect for small teams and growing businesses</p>
+          <p className="u-text-sm u-c-muted u-mb-3">
+            Perfect for small teams and growing businesses
+          </p>
           <div className="u-mb-4">
             <span className="u-text-1 u-font-bold">$29</span>
             <span className="u-text-sm u-c-muted">/month</span>

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

@@ -149,7 +149,9 @@ export const AllVariants: Story = {
 
 export const Fullscreen: Story = {
   render: () => (
-    <div style={{ height: '200px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+    <div
+      style={{ height: '200px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+    >
       <Spinner fullscreen={true} variant="primary" size="lg" />
     </div>
   ),

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

@@ -129,7 +129,7 @@ export const BasicHorizontal: Story = {
     activeIndex: 1,
     vertical: false,
   },
-  render: (args) => (
+  render: args => (
     <div style={{ padding: '30px' }}>
       <Steps {...args} />
     </div>
@@ -156,7 +156,7 @@ export const BasicVertical: Story = {
     activeIndex: 1,
     vertical: true,
   },
-  render: (args) => (
+  render: args => (
     <div style={{ padding: '30px' }}>
       <Steps {...args} />
     </div>
@@ -243,7 +243,9 @@ export const WithIcons: Story = {
 };
 
 // Interactive steps with buttons for navigation
-const InteractiveStepsTemplate: React.FC<{ onStepChange?: (index: number) => void }> = ({ onStepChange }) => {
+const InteractiveStepsTemplate: React.FC<{ onStepChange?: (index: number) => void }> = ({
+  onStepChange,
+}) => {
   const [activeStep, setActiveStep] = React.useState(0);
 
   const handleStepChange = (stepIndex: number) => {
@@ -316,7 +318,7 @@ export const GlassHorizontal: Story = {
     vertical: false,
     glass: true,
   },
-  render: (args) => (
+  render: args => (
     <div
       style={{
         background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -356,7 +358,7 @@ export const GlassVertical: Story = {
     vertical: true,
     glass: true,
   },
-  render: (args) => (
+  render: args => (
     <div
       style={{
         background:
@@ -405,7 +407,7 @@ export const GlassCustom: Story = {
       cornerRadius: 12,
     },
   },
-  render: (args) => (
+  render: args => (
     <div
       style={{
         background: 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)',

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