@shohojdhara/atomix 0.3.5 → 0.3.6

package/src/components/Rating/Rating.stories.tsx

@@ -1,118 +1,143 @@
 import React, { useState } from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Rating } from './Rating';
-import type { RatingProps } from '../../lib/types/components';
+import { THEME_COLORS, SIZES } from '../../lib/constants/components';
 
-export default {
+const meta = {
   title: 'Components/Rating',
   component: Rating,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Rating component allows users to display and interact with star-based ratings. It supports whole and half-star ratings, customizable maximum values, and can be used in both interactive and read-only modes. Ratings are ideal for product reviews, user feedback, or any scenario requiring visual rating input.',
+      },
+    },
+  },
+  tags: ['autodocs'],
   argTypes: {
-    value: { control: { type: 'number', min: 0, max: 5, step: 0.5 } },
-    maxValue: { control: { type: 'number', min: 1, max: 10 } },
-    allowHalf: { control: 'boolean' },
-    readOnly: { control: 'boolean' },
+    value: {
+      control: { type: 'number', min: 0, max: 5, step: 0.5 },
+      description: 'The current rating value',
+    },
+    maxValue: {
+      control: { type: 'number', min: 1, max: 10 },
+      description: 'The maximum rating value',
+    },
+    allowHalf: {
+      control: 'boolean',
+      description: 'Whether to allow half-star ratings',
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Whether the rating is read-only',
+    },
     size: {
-      control: { type: 'select', options: ['sm', 'md', 'lg'] },
+      control: { type: 'select' },
+      options: SIZES,
+      description: 'The size of the rating stars',
     },
     color: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
-      },
+      control: { type: 'select' },
+      options: THEME_COLORS,
+      description: 'The color variant of the rating',
     },
     glass: {
       control: 'boolean',
       description: 'Enable glass morphism effect',
     },
   },
-  parameters: {
-    docs: {
-      description: {
-        component: 'Rating component for displaying and collecting star ratings',
-      },
-    },
-  },
-} as Meta;
+} satisfies Meta<typeof Rating>;
 
-const Template: StoryFn<RatingProps> = (args: RatingProps) => <Rating {...args} />;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default = Template.bind({});
-Default.args = {
-  value: 3,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: false,
-  size: 'md',
+// Default Rating
+export const Default: Story = {
+  args: {
+    value: 3,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: false,
+    size: 'md',
+  },
 };
 
-export const ReadOnly = Template.bind({});
-ReadOnly.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'md',
+export const ReadOnly: Story = {
+  args: {
+    value: 4,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: true,
+    size: 'md',
+  },
 };
 
-export const HalfStars = Template.bind({});
-HalfStars.args = {
-  value: 3.5,
-  maxValue: 5,
-  allowHalf: true,
-  readOnly: true,
-  size: 'md',
+export const HalfStars: Story = {
+  args: {
+    value: 3.5,
+    maxValue: 5,
+    allowHalf: true,
+    readOnly: true,
+    size: 'md',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'sm',
+export const Small: Story = {
+  args: {
+    value: 4,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: true,
+    size: 'sm',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'lg',
+export const Large: Story = {
+  args: {
+    value: 4,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: true,
+    size: 'lg',
+  },
 };
 
-export const CustomColor = Template.bind({});
-CustomColor.args = {
-  value: 4,
-  maxValue: 5,
-  allowHalf: false,
-  readOnly: true,
-  size: 'md',
-  color: 'warning',
+export const CustomColor: Story = {
+  args: {
+    value: 4,
+    maxValue: 5,
+    allowHalf: false,
+    readOnly: true,
+    size: 'md',
+    color: 'warning',
+  },
 };
 
-export const Interactive: StoryFn<RatingProps> = () => {
-  const [rating, setRating] = useState(3);
-
-  return (
-    <div>
-      <p>Selected rating: {rating}</p>
-      <Rating value={rating} onChange={setRating} allowHalf={true} />
-    </div>
-  );
+export const Interactive: Story = {
+  render: () => {
+    const [rating, setRating] = useState(3);
+    return (
+      <div>
+        <p>Selected rating: {rating}</p>
+        <Rating value={rating} onChange={setRating} allowHalf={true} />
+      </div>
+    );
+  },
 };
 
-export const CustomMaxValue = Template.bind({});
-CustomMaxValue.args = {
-  value: 7,
-  maxValue: 10,
-  allowHalf: false,
-  readOnly: true,
-  size: 'md',
+export const CustomMaxValue: Story = {
+  args: {
+    value: 7,
+    maxValue: 10,
+    allowHalf: false,
+    readOnly: true,
+    size: 'md',
+  },
 };
 
-export const Glass = {
+export const Glass: Story = {
   args: {
     value: 4,
     maxValue: 5,
@@ -138,7 +163,7 @@ export const Glass = {
   ),
 };
 
-export const GlassInteractive = {
+export const GlassInteractive: Story = {
   args: {
     value: 3,
     maxValue: 5,
@@ -174,7 +199,7 @@ export const GlassInteractive = {
   ),
 };
 
-export const GlassCustom = {
+export const GlassCustom: Story = {
   args: {
     value: 4.5,
     maxValue: 5,

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 = {