@shohojdhara/atomix 0.3.4 → 0.3.6

package/src/components/River/River.stories.tsx

@@ -1,23 +1,32 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { River } from './River';
-import type { RiverProps } from './River';
 
-export default {
+const meta = {
   title: 'Components/River',
   component: River,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'The River component provides a flexible two-column layout pattern with an image on one side and content on the other. It supports various alignment options, background images, overlays, and can be reversed or centered. Rivers are ideal for showcasing features, products, or any content requiring side-by-side image and text presentation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
   argTypes: {
     center: {
       control: { type: 'boolean' },
-      defaultValue: false,
+      description: 'Whether to center the content',
     },
     breakout: {
       control: { type: 'boolean' },
-      defaultValue: false,
+      description: 'Whether to break out of container constraints',
     },
     reverse: {
       control: { type: 'boolean' },
-      defaultValue: false,
+      description: 'Whether to reverse the image and content positions',
     },
     backgroundImageSrc: {
       control: { type: 'text' },
@@ -25,7 +34,6 @@ export default {
     },
     showOverlay: {
       control: { type: 'boolean' },
-      defaultValue: true,
       description: 'Show background overlay',
     },
     contentWidth: {
@@ -33,145 +41,215 @@ export default {
       description: 'Custom width for the river content (e.g., "800px", "50%")',
     },
   },
-} as Meta<typeof River>;
+} satisfies Meta<typeof River>;
 
-const Template: StoryFn<typeof River> = args => (
-  <div style={{ padding: '0', maxWidth: '100%' }}>
-    <River {...args} />
-  </div>
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 // Default river (image left, content right)
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Streamline Your Workflow',
-  text: 'Our platform provides a comprehensive suite of tools to optimize your workflow and increase productivity. With intuitive interfaces and powerful features, you can accomplish more in less time.',
-  actions: (
-    <a href="#" className="c-btn c-btn--primary">
-      Get Started
-    </a>
+export const Default: Story = {
+  render: args => (
+    <div style={{ padding: '0', maxWidth: '100%' }}>
+      <River {...args} />
+    </div>
   ),
-  imageSrc: 'https://unsplash.it/g/500/300',
-  imageAlt: 'Workflow diagram',
+  args: {
+    title: 'Streamline Your Workflow',
+    text: 'Our platform provides a comprehensive suite of tools to optimize your workflow and increase productivity. With intuitive interfaces and powerful features, you can accomplish more in less time.',
+    actions: (
+      <a href="#" className="c-btn c-btn--primary">
+        Get Started
+      </a>
+    ),
+    imageSrc: 'https://unsplash.it/g/500/300',
+    imageAlt: 'Workflow diagram',
+  },
 };
 
 // Reverse layout (content left, image right)
-export const Reverse = Template.bind({});
-Reverse.args = {
-  ...Default.args,
-  title: 'Data-Driven Insights',
-  text: 'Harness the power of analytics to make informed decisions. Our advanced data visualization tools help you understand trends and identify opportunities for growth.',
-  reverse: true,
+export const Reverse: Story = {
+  render: args => (
+    <div style={{ padding: '0', maxWidth: '100%' }}>
+      <River {...args} />
+    </div>
+  ),
+  args: {
+    title: 'Data-Driven Insights',
+    text: 'Harness the power of analytics to make informed decisions. Our advanced data visualization tools help you understand trends and identify opportunities for growth.',
+    actions: (
+      <a href="#" className="c-btn c-btn--primary">
+        Get Started
+      </a>
+    ),
+    imageSrc: 'https://unsplash.it/g/500/300',
+    imageAlt: 'Workflow diagram',
+    reverse: true,
+  },
 };
 
 // Center layout (content centered)
-export const Centered = Template.bind({});
-Centered.args = {
-  ...Default.args,
-  title: 'Award-Winning Support',
-  text: 'Our dedicated team of experts is available around the clock to provide assistance and ensure your success. Experience the highest level of customer service.',
-  center: true,
+export const Centered: Story = {
+  render: args => (
+    <div style={{ padding: '0', maxWidth: '100%' }}>
+      <River {...args} />
+    </div>
+  ),
+  args: {
+    title: 'Award-Winning Support',
+    text: 'Our dedicated team of experts is available around the clock to provide assistance and ensure your success. Experience the highest level of customer service.',
+    actions: (
+      <a href="#" className="c-btn c-btn--primary">
+        Get Started
+      </a>
+    ),
+    imageSrc: 'https://unsplash.it/g/500/300',
+    imageAlt: 'Workflow diagram',
+    center: true,
+  },
 };
 
 // Breakout layout (full width)
-export const Breakout = Template.bind({});
-Breakout.args = {
-  ...Default.args,
-  title: 'Scale With Confidence',
-  text: "Our robust infrastructure adapts to your needs, whether you're a small business or a global enterprise. Grow your operations without worrying about technical limitations.",
-  breakout: true,
+export const Breakout: Story = {
+  render: args => (
+    <div style={{ padding: '0', maxWidth: '100%' }}>
+      <River {...args} />
+    </div>
+  ),
+  args: {
+    title: 'Scale With Confidence',
+    text: "Our robust infrastructure adapts to your needs, whether you're a small business or a global enterprise. Grow your operations without worrying about technical limitations.",
+    actions: (
+      <a href="#" className="c-btn c-btn--primary">
+        Get Started
+      </a>
+    ),
+    imageSrc: 'https://unsplash.it/g/500/300',
+    imageAlt: 'Workflow diagram',
+    breakout: true,
+  },
 };
 
 // Multi-paragraph text
-export const MultiParagraph = Template.bind({});
-MultiParagraph.args = {
-  ...Default.args,
-  title: 'Revolutionize Your Approach',
-  text: [
-    'Our innovative solutions are designed to transform how you work, making complex tasks simple and intuitive.',
-    "By focusing on user experience and practical functionality, we've created tools that adapt to your workflow rather than forcing you to adapt to them.",
-    'Experience the difference that thoughtful design and powerful technology can make in your daily operations.',
-  ],
-  actions: (
-    <a href="#" className="c-btn c-btn--primary">
-      Learn More
-    </a>
+export const MultiParagraph: Story = {
+  render: args => (
+    <div style={{ padding: '0', maxWidth: '100%' }}>
+      <River {...args} />
+    </div>
   ),
+  args: {
+    title: 'Revolutionize Your Approach',
+    text: [
+      'Our innovative solutions are designed to transform how you work, making complex tasks simple and intuitive.',
+      "By focusing on user experience and practical functionality, we've created tools that adapt to your workflow rather than forcing you to adapt to them.",
+      'Experience the difference that thoughtful design and powerful technology can make in your daily operations.',
+    ],
+    actions: (
+      <a href="#" className="c-btn c-btn--primary">
+        Learn More
+      </a>
+    ),
+    imageSrc: 'https://unsplash.it/g/500/300',
+    imageAlt: 'Workflow diagram',
+  },
 };
 
 // Content columns
-export const ContentColumns = Template.bind({});
-ContentColumns.args = {
-  contentColumns: [
-    {
-      type: 'title',
-      content: <h2 className="c-river__title">Flexible Content Layout</h2>,
-    },
-    {
-      type: 'text',
-      content: (
-        <div>
-          <p className="c-river__text">
-            Use content columns to create custom layouts with different types of content. This
-            approach gives you more control over the structure and presentation of your information.
-          </p>
-          <p className="c-river__text">
-            Perfect for featuring important statistics, quotes, or highlighting key information
-            alongside your main content.
-          </p>
-        </div>
-      ),
-    },
-  ],
-  actions: (
-    <a href="#" className="c-btn c-btn--primary">
-      Explore Options
-    </a>
+export const ContentColumns: Story = {
+  render: args => (
+    <div style={{ padding: '0', maxWidth: '100%' }}>
+      <River {...args} />
+    </div>
   ),
-  imageSrc: 'https://unsplash.it/g/500/300',
+  args: {
+    contentColumns: [
+      {
+        type: 'title',
+        content: <h2 className="c-river__title">Flexible Content Layout</h2>,
+      },
+      {
+        type: 'text',
+        content: (
+          <div>
+            <p className="c-river__text">
+              Use content columns to create custom layouts with different types of content. This
+              approach gives you more control over the structure and presentation of your information.
+            </p>
+            <p className="c-river__text">
+              Perfect for featuring important statistics, quotes, or highlighting key information
+              alongside your main content.
+            </p>
+          </div>
+        ),
+      },
+    ],
+    actions: (
+      <a href="#" className="c-btn c-btn--primary">
+        Explore Options
+      </a>
+    ),
+    imageSrc: 'https://unsplash.it/g/500/300',
+  },
 };
 
 // Custom title styling
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: <h1 className="c-river__title u-text-gradient">Custom Title with Gradient</h1>,
-  text: 'The sun had set, leaving the sky painted in shades of orange and pink as the stars twinkled above. The air was filled with the sound of crickets and the rustle of leaves in the gentle breeze.',
-  actions: (
-    <a href="#" className="c-btn u-pl-0">
-      Text Link <i className="icon-lux-circle"></i>
-    </a>
+export const CustomTitle: Story = {
+  render: args => (
+    <div style={{ padding: '0', maxWidth: '100%' }}>
+      <River {...args} />
+    </div>
   ),
-  imageSrc: 'https://unsplash.it/g/712/196',
-  imageAlt: 'Image',
+  args: {
+    title: <h1 className="c-river__title u-text-gradient">Custom Title with Gradient</h1>,
+    text: 'The sun had set, leaving the sky painted in shades of orange and pink as the stars twinkled above. The air was filled with the sound of crickets and the rustle of leaves in the gentle breeze.',
+    actions: (
+      <a href="#" className="c-btn u-pl-0">
+        Text Link <i className="icon-lux-circle"></i>
+      </a>
+    ),
+    imageSrc: 'https://unsplash.it/g/712/196',
+    imageAlt: 'Image',
+  },
 };
 
 // With background image
-export const WithBackgroundAndContent = Template.bind({});
-WithBackgroundAndContent.args = {
-  title: 'Build Faster Applications',
-  text: 'Our component library is designed for developers who want to create beautiful interfaces with minimal effort. With built-in TypeScript support and comprehensive documentation, you can focus on building features, not fighting with UI.',
-  actions: (
-    <a href="#" className="c-btn c-btn--light">
-      View Documentation
-    </a>
+export const WithBackgroundAndContent: Story = {
+  render: args => (
+    <div style={{ padding: '0', maxWidth: '100%' }}>
+      <River {...args} />
+    </div>
   ),
-  imageSrc: 'https://unsplash.it/g/500/300',
-  backgroundImageSrc: 'https://unsplash.it/g/1920/600',
-  showOverlay: true,
+  args: {
+    title: 'Build Faster Applications',
+    text: 'Our component library is designed for developers who want to create beautiful interfaces with minimal effort. With built-in TypeScript support and comprehensive documentation, you can focus on building features, not fighting with UI.',
+    actions: (
+      <a href="#" className="c-btn c-btn--light">
+        View Documentation
+      </a>
+    ),
+    imageSrc: 'https://unsplash.it/g/500/300',
+    backgroundImageSrc: 'https://unsplash.it/g/1920/600',
+    showOverlay: true,
+  },
 };
 
 // With custom content width
-export const CustomContentWidth = Template.bind({});
-CustomContentWidth.args = {
-  title: 'Powerful Developer Experience',
-  text: 'Our River component gives you complete control over your content layout. Customize content width, background images, and layouts to create engaging sections that convert visitors into customers.',
-  actions: (
-    <a href="#" className="c-btn c-btn--primary">
-      Explore API
-    </a>
+export const CustomContentWidth: Story = {
+  render: args => (
+    <div style={{ padding: '0', maxWidth: '100%' }}>
+      <River {...args} />
+    </div>
   ),
-  imageSrc: 'https://unsplash.it/g/500/300',
-  contentWidth: '800px',
+  args: {
+    title: 'Powerful Developer Experience',
+    text: 'Our River component gives you complete control over your content layout. Customize content width, background images, and layouts to create engaging sections that convert visitors into customers.',
+    actions: (
+      <a href="#" className="c-btn c-btn--primary">
+        Explore API
+      </a>
+    ),
+    imageSrc: 'https://unsplash.it/g/500/300',
+    contentWidth: '800px',
+  },
 };
 
 // Multiple Rivers layout example
@@ -227,4 +305,6 @@ const MultipeRiversExample: React.FC = () => {
   );
 };
 
-export const MultipleRivers: StoryFn<typeof River> = () => <MultipeRiversExample />;
+export const MultipleRivers: Story = {
+  render: () => <MultipeRiversExample />,
+};

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

@@ -1,36 +1,46 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '../Button';
 import { SectionIntro } from './SectionIntro';
+import { SIZES } from '../../lib/constants/components';
 
-const meta: Meta<typeof SectionIntro> = {
+const meta = {
   title: 'Components/SectionIntro',
   component: SectionIntro,
   parameters: {
     layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The SectionIntro component provides a prominent introduction section for pages or content areas. It supports titles, labels, text content, images, background images, and call-to-action buttons. SectionIntros are ideal for page headers, section introductions, or any area requiring prominent content presentation.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
-    title: { control: 'text' },
-    label: { control: 'text' },
-    text: { control: 'text' },
+    title: { control: 'text', description: 'Main title text' },
+    label: { control: 'text', description: 'Label text displayed above the title' },
+    text: { control: 'text', description: 'Description text content' },
     alignment: {
       control: { type: 'select' },
       options: ['left', 'center', 'right'],
+      description: 'Text alignment',
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
+      description: 'Size variant',
     },
     skeleton: { control: 'boolean' },
     showOverlay: { control: 'boolean' },
     actions: { control: false },
     backgroundImageSrc: { control: 'text' },
     imageSrc: { control: 'text' },
-    imageAlt: { control: 'text' },
+    imageAlt: { control: 'text', description: 'Alt text for the image' },
   },
-};
+} satisfies Meta<typeof SectionIntro>;
 
 export default meta;
-type Story = StoryObj<typeof SectionIntro>;
+type Story = StoryObj<typeof meta>;
 
 // Default SectionIntro
 export const Default: Story = {

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

@@ -10,7 +10,14 @@ const meta = {
   component: Slider,
   parameters: {
     layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The Slider component provides a carousel/slideshow interface for displaying multiple items in a scrollable container. It supports horizontal and vertical orientations, navigation controls, pagination, autoplay, and various transition effects. Sliders are ideal for showcasing images, cards, testimonials, or any collection of content.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     slides: { control: 'object' },
     slidesToShow: { control: { type: 'number', min: 1, max: 5 } },

package/src/components/Slider/Slider.tsx

@@ -25,16 +25,9 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     ...rest
   } = props;
 
-  if (!slides || slides.length === 0) {
-    return (
-      <div className="c-slider c-slider--empty" style={{ height, width, ...style }}>
-        <div className="c-slider__empty-message">No slides available</div>
-      </div>
-    );
-  }
-
+  // Hooks must be called unconditionally - before early return
   const slider = useSlider({
-    slides,
+    slides: slides || [],
     slidesToShow,
     spaceBetween,
     loop,
@@ -72,6 +65,14 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     return allSlides.length * (slideWidth + spaceBetween) - spaceBetween;
   }, [allSlides.length, slideWidth, spaceBetween]);
 
+  if (!slides || slides.length === 0) {
+    return (
+      <div className="c-slider c-slider--empty" style={{ height, width, ...style }}>
+        <div className="c-slider__empty-message">No slides available</div>
+      </div>
+    );
+  }
+
   const containerClasses = [
     'c-slider',
     direction === 'vertical' && 'c-slider--vertical',

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

@@ -1,21 +1,30 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Spinner } from './Spinner';
+import { THEME_COLORS, SIZES } from '../../lib/constants/components';
 
 const meta = {
   title: 'Components/Spinner',
   component: Spinner,
   parameters: {
     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.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
+      options: THEME_COLORS,
       description: 'The color variant of the spinner',
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       description: 'The size of the spinner',
     },
     fullscreen: {
@@ -26,7 +35,7 @@ const meta = {
 } satisfies Meta<typeof Spinner>;
 
 export default meta;
-type Story = StoryObj<typeof Spinner>;
+type Story = StoryObj<typeof meta>;
 
 // Default Spinner
 export const Default: Story = {
@@ -52,14 +61,9 @@ export const Sizes: Story = {
 export const ColorVariants: Story = {
   render: () => (
     <div className="u-d-flex u-flex-wrap u-gap-3 u-align-items-center">
-      <Spinner variant="primary" />
-      <Spinner variant="secondary" />
-      <Spinner variant="success" />
-      <Spinner variant="info" />
-      <Spinner variant="warning" />
-      <Spinner variant="error" />
-      <Spinner variant="light" />
-      <Spinner variant="dark" />
+      {THEME_COLORS.map(color => (
+        <Spinner key={color} variant={color} />
+      ))}
     </div>
   ),
 };

package/src/components/Spinner/Spinner.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { SpinnerProps } from '../../lib/types/components';
 import { useSpinner } from '../../lib/composables/useSpinner';
 import { SPINNER } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Spinner: React.FC<SpinnerProps> = ({
+export const Spinner: React.FC<SpinnerProps> = memo(({
   size = 'md',
   variant = 'primary',
   fullscreen = false,
@@ -43,7 +43,7 @@ export const Spinner: React.FC<SpinnerProps> = ({
   }
 
   return spinnerContent;
-};
+});
 
 export type { SpinnerProps };