@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Progress/Progress.stories.tsx

@@ -1,17 +1,71 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Progress } from './Progress';
 import { THEME_COLORS, SIZES } from '../../lib/constants/components';
 
-const meta = {
+const meta: Meta<typeof Progress> = {
   title: 'Components/Progress',
   component: Progress,
   parameters: {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Progress component displays the completion status of a task or process. It provides visual feedback on progress through a horizontal bar that fills based on a percentage value. Progress bars support multiple variants, sizes, and can be used to show loading states, form completion, or any incremental process.',
+        component: `
+# Progress
+
+## Overview
+
+Progress displays the completion status of a task or process. It provides visual feedback on progress through a horizontal bar that fills based on a percentage value. Progress bars support multiple variants, sizes, and can be used to show loading states, form completion, or any incremental process.
+
+## Features
+
+- Multiple color variants (primary, secondary, success, warning, error, etc.)
+- Multiple size options (sm, md, lg)
+- Percentage-based value tracking
+- Accessible design
+- Responsive behavior
+- Smooth transitions
+
+## Accessibility
+
+- Screen reader: Progress value announced appropriately
+- ARIA support: Proper roles and properties for progress bar
+- Keyboard support: Accessible via keyboard navigation
+- Focus management: Focus indicators maintained for interactive elements
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Progress value={50} />
+\`\`\`
+
+### With Variant and Size
+
+\`\`\`tsx
+<Progress 
+  value={75} 
+  variant="success" 
+  size="lg" 
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| value | number | 0 | The progress value as a percentage (0-100) |
+| variant | ThemeColor | 'primary' | The color variant of the progress bar |
+| size | 'sm' \\| 'md' \\| 'lg' | 'md' | The size of the progress bar |
+| animated | boolean | false | Whether to animate the progress bar |
+| striped | boolean | false | Whether to apply striped styling |
+| label | string | - | Optional label to display with the progress |
+| max | number | 100 | The maximum value for the progress bar |
+        `,
       },
     },
   },
@@ -27,26 +81,125 @@ const meta = {
     value: {
       control: { type: 'range', min: 0, max: 100 },
       description: 'The progress value as a percentage (0-100)',
-      defaultValue: 50,
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
     },
     variant: {
       control: { type: 'select' },
       options: THEME_COLORS,
       description: 'The color variant of the progress bar',
-      defaultValue: 'primary',
+      table: {
+        type: { summary: 'ThemeColor' },
+        defaultValue: { summary: 'primary' },
+      },
     },
     size: {
       control: { type: 'select' },
       options: SIZES,
       description: 'The size of the progress bar',
-      defaultValue: 'md',
+      table: {
+        type: { summary: '"sm" | "md" | "lg"' },
+        defaultValue: { summary: 'md' },
+      },
     },
   },
-} satisfies Meta<typeof Progress>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+export const BasicUsage: Story = {
+  args: {
+    value: 50,
+    variant: 'primary',
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic progress bar with default settings.',
+      },
+    },
+  },
+};
+
+export const AllVariants: Story = {
+  args: { value: 0 },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+      <div>
+        <strong>Primary:</strong> <Progress value={75} variant="primary" />
+      </div>
+      <div>
+        <strong>Secondary:</strong> <Progress value={60} variant="secondary" />
+      </div>
+      <div>
+        <strong>Success:</strong> <Progress value={100} variant="success" />
+      </div>
+      <div>
+        <strong>Warning:</strong> <Progress value={45} variant="warning" />
+      </div>
+      <div>
+        <strong>Error:</strong> <Progress value={30} variant="error" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress bars with all available color variants.',
+      },
+    },
+  },
+};
+
+export const AllSizes: Story = {
+  args: { value: 0 },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
+      <div>
+        <strong>Small:</strong> <Progress value={60} size="sm" />
+      </div>
+      <div>
+        <strong>Medium:</strong> <Progress value={70} size="md" />
+      </div>
+      <div>
+        <strong>Large:</strong> <Progress value={80} size="lg" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress bars with all available sizes.',
+      },
+    },
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    value: 75,
+    variant: 'primary',
+    size: 'md',
+  },
+  render: args => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <label>Processing files: 75%</label>
+      <Progress {...args} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Progress bar with a label showing current value.',
+      },
+    },
+  },
+};
+
 // Default Progress
 export const Default: Story = {
   args: {

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

@@ -172,7 +172,8 @@ export const ContentColumns: Story = {
           <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.
+              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
@@ -199,7 +200,7 @@ export const CustomTitle: Story = {
     </div>
   ),
   args: {
-    title: <h1 className="c-river__title u-text-gradient">Custom Title with Gradient</h1>,
+    title: <h1 className="c-river__title u-text-gradient-primary">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">

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '../Button';
 import { SectionIntro } from './SectionIntro';
 import { SIZES } from '../../lib/constants/components';
+import { fn } from '@storybook/test';
 
 const meta = {
   title: 'Components/SectionIntro',
@@ -17,33 +18,129 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
-    title: { control: 'text', description: 'Main title text' },
-    label: { control: 'text', description: 'Label text displayed above the title' },
-    text: { control: 'text', description: 'Description text content' },
+    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)',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    text: {
+      control: 'text',
+      description: 'Description text content (supports ReactNode)',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
     alignment: {
-      control: { type: 'select' },
+      control: { type: 'radio', options: ['left', 'center', 'right'] },
       options: ['left', 'center', 'right'],
       description: 'Text alignment',
+      table: {
+        type: { summary: '"left" | "center" | "right"' },
+        defaultValue: { summary: 'left' },
+      },
     },
     size: {
-      control: { type: 'select' },
+      control: { type: 'radio', options: SIZES },
       options: SIZES,
       description: 'Size variant',
+      table: {
+        type: { summary: '"sm" | "md" | "lg"' },
+        defaultValue: { summary: 'md' },
+      },
+    },
+    skeleton: {
+      control: 'boolean',
+      description: 'Show skeleton loading state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    showOverlay: {
+      control: 'boolean',
+      description: 'Whether to show an overlay on the background',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    actions: {
+      control: { type: 'text' },
+      description: 'Call to action elements (supports ReactNode)',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    backgroundImageSrc: {
+      control: 'text',
+      description: 'URL for the background image',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    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',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Section image' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS class',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    style: {
+      control: 'object',
+      description: 'Custom style object for the section intro',
+      table: {
+        type: { summary: 'CSSProperties' },
+        defaultValue: { summary: '{}' },
+      },
     },
-    skeleton: { control: 'boolean' },
-    showOverlay: { control: 'boolean' },
-    actions: { control: false },
-    backgroundImageSrc: { control: 'text' },
-    imageSrc: { control: 'text' },
-    imageAlt: { control: 'text', description: 'Alt text for the image' },
+  },
+  args: {
+    title: 'Our Mission',
+    label: 'About Us',
+    text: 'We are dedicated to creating beautiful, functional, and accessible components that help developers build amazing websites and applications.',
+    alignment: 'left',
+    size: 'md',
+    // Adding a mock function for any potential event handling
+    onClick: fn(),
   },
 } satisfies Meta<typeof SectionIntro>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Default SectionIntro
-export const Default: Story = {
+// Basic usage example
+export const BasicUsage: Story = {
   args: {
     title: 'Our Mission',
     label: 'About Us',
@@ -51,89 +148,174 @@ export const Default: Story = {
     alignment: 'left',
     size: 'md',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic usage of the SectionIntro component with title, label, and text.',
+      },
+    },
+  },
 };
 
-// Left-aligned with actions
+// With actions example
 export const WithActions: Story = {
   args: {
-    ...Default.args,
+    title: 'Ready to get started?',
+    label: 'Take Action',
+    text: 'Join thousands of satisfied users who have transformed their workflow with our components.',
+    alignment: 'center',
+    size: 'md',
     actions: (
-      <div className="u-flex u-gap-md">
-        <Button label="Learn More" />
-        <Button label="Contact Us" variant="secondary" />
+      <div className="u-flex u-gap-4">
+        <Button label="Get Started" />
+        <Button label="Learn More" variant="secondary" />
       </div>
     ),
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'SectionIntro with call-to-action buttons.',
+      },
+    },
+  },
 };
 
-// Center-aligned
-export const Centered: Story = {
+// Center-aligned example
+export const CenterAligned: Story = {
   args: {
-    ...Default.args,
-    alignment: 'center',
+    title: 'Discover Our Vision',
+    label: 'Our Vision',
     text: 'We are dedicated to creating beautiful, functional, and accessible components that help developers build amazing websites and applications.',
+    alignment: 'center',
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Center-aligned SectionIntro content.',
+      },
+    },
   },
 };
 
-// Right-aligned
+// Right-aligned example
 export const RightAligned: Story = {
   args: {
-    ...Default.args,
-    alignment: 'right',
+    title: 'Our Approach',
+    label: 'Methodology',
     text: 'We are dedicated to creating beautiful, functional, and accessible components that help developers build amazing websites and applications.',
+    alignment: 'right',
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Right-aligned SectionIntro content.',
+      },
+    },
   },
 };
 
-// With background image
-export const WithBackground: Story = {
+// With background image example
+export const WithBackgroundImage: Story = {
   args: {
-    ...Default.args,
-    backgroundImageSrc:
-      'https://images.unsplash.com/photo-1557682250-33bd709cbe85?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
-    showOverlay: true,
-    alignment: 'center',
     title: 'Discover Our Vision',
     label: 'About Us',
     text: 'We are dedicated to creating beautiful, functional, and accessible components that help developers build amazing websites and applications.',
+    alignment: 'center',
+    size: 'md',
+    backgroundImageSrc:
+      'https://images.unsplash.com/photo-1557682250-33bd709cbe85?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+    showOverlay: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'SectionIntro with a background image and overlay.',
+      },
+    },
   },
 };
 
-// With image
-export const WithImage: Story = {
+// With foreground image example
+export const WithForegroundImage: Story = {
   args: {
-    ...Default.args,
+    title: 'Team Collaboration',
+    label: 'Our Team',
+    text: 'We are dedicated to creating beautiful, functional, and accessible components that help developers build amazing websites and applications.',
+    alignment: 'left',
+    size: 'md',
     imageSrc:
       'https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
     imageAlt: 'Team collaboration',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'SectionIntro with a foreground image.',
+      },
+    },
+  },
 };
 
-// Small size
-export const Small: Story = {
+// Small size example
+export const SmallSize: Story = {
   args: {
-    ...Default.args,
+    title: 'Compact View',
+    label: 'Small Size',
+    text: 'This is a smaller version of the SectionIntro component.',
+    alignment: 'left',
     size: 'sm',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small-sized SectionIntro for compact layouts.',
+      },
+    },
+  },
 };
 
-// Large size
-export const Large: Story = {
+// Large size example
+export const LargeSize: Story = {
   args: {
-    ...Default.args,
+    title: 'Impressive Header',
+    label: 'Large Size',
+    text: 'This is a larger version of the SectionIntro component suitable for hero sections and prominent displays.',
+    alignment: 'center',
     size: 'lg',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large-sized SectionIntro for prominent displays.',
+      },
+    },
+  },
 };
 
-// Skeleton loading state
-export const Skeleton: Story = {
+// Skeleton loading state example
+export const SkeletonLoading: Story = {
   args: {
-    ...Default.args,
+    title: 'Loading Content',
+    label: 'Please Wait',
+    text: 'Content is being loaded...',
+    alignment: 'left',
+    size: 'md',
     skeleton: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skeleton loading state of the SectionIntro component.',
+      },
+    },
+  },
 };
 
-// Full example with all features
-export const FullExample: Story = {
+// Full featured example
+export const FullFeaturedExample: Story = {
   args: {
     title: 'Building the Future Together',
     label: 'Our Vision',
@@ -143,11 +325,21 @@ export const FullExample: Story = {
     backgroundImageSrc:
       'https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
     showOverlay: true,
+    imageSrc:
+      'https://images.unsplash.com/photo-1468436139062-f6fdfcd1e6cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+    imageAlt: 'Mountain landscape',
     actions: (
-      <div className="u-flex u-gap-md u-justify-center">
+      <div className="u-flex u-justify-center u-gap-4">
         <Button label="Get Started" size="lg" />
         <Button label="Learn More" size="lg" variant="secondary" />
       </div>
     ),
   },
+  parameters: {
+    docs: {
+      description: {
+        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>