@shohojdhara/atomix 0.3.5 → 0.3.6

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,14 +1,28 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { AtomixGlassProps } from '../../lib/types/components';
 import { Tabs } from './Tabs';
 
-export default {
+// Helper type for glass props in stories (without children requirement)
+type GlassProps = boolean | Omit<AtomixGlassProps, 'children'>;
+
+const meta = {
   title: 'Components/Tabs',
   component: Tabs,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The Tabs component organizes content into multiple panels accessible via tab navigation. It provides a clean interface for switching between different views or sections of content. Tabs support keyboard navigation and can include rich content in each panel.',
+      },
+    },
+  },
+  tags: ['autodocs'],
   argTypes: {
     activeIndex: {
       control: { type: 'number' },
+      description: 'The index of the currently active tab',
       defaultValue: 0,
     },
     glass: {
@@ -16,123 +30,157 @@ export default {
       description: 'Enable glass morphism effect',
     },
   },
-} as Meta<typeof Tabs>;
+} satisfies Meta<typeof Tabs>;
 
-const Template: StoryFn<typeof Tabs> = args => (
-  <div style={{ maxWidth: '600px', margin: '0 auto', padding: '30px' }}>
-    <Tabs {...args} />
-  </div>
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default = Template.bind({});
-Default.args = {
-  items: [
-    {
-      label: 'Tab 1',
-      content: <p>This is the content for Tab 1. Default tab content.</p>,
-    },
-    {
-      label: 'Tab 2',
-      content: <p>This is the content for Tab 2. It contains different information.</p>,
-    },
-    {
-      label: 'Tab 3',
-      content: <p>This is the content for Tab 3. Another unique content section.</p>,
-    },
-  ],
-  activeIndex: 0,
+/**
+ * Default tabs component with three tabs.
+ */
+export const Default: Story = {
+  render: args => (
+    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '30px' }}>
+      <Tabs {...args} />
+    </div>
+  ),
+  args: {
+    items: [
+      {
+        label: 'Tab 1',
+        content: <p>This is the content for Tab 1. Default tab content.</p>,
+      },
+      {
+        label: 'Tab 2',
+        content: <p>This is the content for Tab 2. It contains different information.</p>,
+      },
+      {
+        label: 'Tab 3',
+        content: <p>This is the content for Tab 3. Another unique content section.</p>,
+      },
+    ],
+    activeIndex: 0,
+  },
 };
 
-export const WithDifferentActiveTab = Template.bind({});
-WithDifferentActiveTab.args = {
-  items: [
-    {
-      label: 'Tab 1',
-      content: <p>This is the content for Tab 1.</p>,
-    },
-    {
-      label: 'Tab 2',
-      content: <p>This is the content for Tab 2. It's initially active.</p>,
-    },
-    {
-      label: 'Tab 3',
-      content: <p>This is the content for Tab 3.</p>,
-    },
-  ],
-  activeIndex: 1,
+/**
+ * Tabs with a different tab initially active (Tab 2).
+ */
+export const WithDifferentActiveTab: Story = {
+  render: args => (
+    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '30px' }}>
+      <Tabs {...args} />
+    </div>
+  ),
+  args: {
+    items: [
+      {
+        label: 'Tab 1',
+        content: <p>This is the content for Tab 1.</p>,
+      },
+      {
+        label: 'Tab 2',
+        content: <p>This is the content for Tab 2. It's initially active.</p>,
+      },
+      {
+        label: 'Tab 3',
+        content: <p>This is the content for Tab 3.</p>,
+      },
+    ],
+    activeIndex: 1,
+  },
 };
 
-export const WithRichContent = Template.bind({});
-WithRichContent.args = {
-  items: [
-    {
-      label: 'Features',
-      content: (
-        <div>
-          <h3>Key Features</h3>
-          <ul>
-            <li>Responsive design</li>
-            <li>Accessible navigation</li>
-            <li>Smooth transitions</li>
-          </ul>
-        </div>
-      ),
-    },
-    {
-      label: 'Specifications',
-      content: (
-        <div>
-          <h3>Technical Specifications</h3>
-          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-            <thead>
-              <tr>
-                <th style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}>
-                  Property
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}>
-                  Value
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td style={{ border: '1px solid #ddd', padding: '8px' }}>Size</td>
-                <td style={{ border: '1px solid #ddd', padding: '8px' }}>Medium</td>
-              </tr>
-              <tr>
-                <td style={{ border: '1px solid #ddd', padding: '8px' }}>Material</td>
-                <td style={{ border: '1px solid #ddd', padding: '8px' }}>Aluminum</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      ),
+/**
+ * Tabs with rich content including headings, lists, and tables.
+ */
+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.',
+      },
     },
-    {
-      label: 'Reviews',
-      content: (
-        <div>
-          <h3>Customer Reviews</h3>
-          <div style={{ padding: '10px', marginBottom: '10px', backgroundColor: '#f9f9f9' }}>
-            <p style={{ marginBottom: '5px' }}>
-              <strong>John D.</strong> ★★★★★
-            </p>
-            <p>Great product, highly recommended!</p>
+  },
+  render: args => (
+    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '30px' }}>
+      <Tabs {...args} />
+    </div>
+  ),
+  args: {
+    items: [
+      {
+        label: 'Features',
+        content: (
+          <div>
+            <h3>Key Features</h3>
+            <ul>
+              <li>Responsive design</li>
+              <li>Accessible navigation</li>
+              <li>Smooth transitions</li>
+            </ul>
           </div>
-          <div style={{ padding: '10px', backgroundColor: '#f9f9f9' }}>
-            <p style={{ marginBottom: '5px' }}>
-              <strong>Sarah T.</strong> ★★★★☆
-            </p>
-            <p>Very good quality and fast shipping.</p>
+        ),
+      },
+      {
+        label: 'Specifications',
+        content: (
+          <div>
+            <h3>Technical Specifications</h3>
+            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <thead>
+                <tr>
+                  <th style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}>
+                    Property
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left' }}>
+                    Value
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td style={{ border: '1px solid #ddd', padding: '8px' }}>Size</td>
+                  <td style={{ border: '1px solid #ddd', padding: '8px' }}>Medium</td>
+                </tr>
+                <tr>
+                  <td style={{ border: '1px solid #ddd', padding: '8px' }}>Material</td>
+                  <td style={{ border: '1px solid #ddd', padding: '8px' }}>Aluminum</td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-        </div>
-      ),
-    },
-  ],
-  activeIndex: 0,
+        ),
+      },
+      {
+        label: 'Reviews',
+        content: (
+          <div>
+            <h3>Customer Reviews</h3>
+            <div style={{ padding: '10px', marginBottom: '10px', backgroundColor: '#f9f9f9' }}>
+              <p style={{ marginBottom: '5px' }}>
+                <strong>John D.</strong> ★★★★★
+              </p>
+              <p>Great product, highly recommended!</p>
+            </div>
+            <div style={{ padding: '10px', backgroundColor: '#f9f9f9' }}>
+              <p style={{ marginBottom: '5px' }}>
+                <strong>Sarah T.</strong> ★★★★☆
+              </p>
+              <p>Very good quality and fast shipping.</p>
+            </div>
+          </div>
+        ),
+      },
+    ],
+    activeIndex: 0,
+  },
 };
 
-export const Glass = {
+/**
+ * Tabs with glass morphism effect enabled.
+ */
+export const Glass: Story = {
   args: {
     items: [
       {
@@ -170,7 +218,10 @@ export const Glass = {
   ),
 };
 
-export const GlassCustom = {
+/**
+ * Tabs with custom glass morphism settings.
+ */
+export const GlassCustom: Story = {
   args: {
     items: [
       {
@@ -193,9 +244,9 @@ export const GlassCustom = {
       saturation: 200,
       aberrationIntensity: 0.8,
       cornerRadius: 12,
-    },
+    } as GlassProps,
   },
-  render: (args: any) => (
+  render: args => (
     <div
       style={{
         background:

package/src/components/Testimonial/Testimonial.stories.tsx

@@ -1,103 +1,145 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Testimonial } from './Testimonial';
-import type { TestimonialProps } from './Testimonial';
 
-export default {
+const meta = {
   title: 'Components/Testimonial',
   component: Testimonial,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Testimonial component displays customer reviews, quotes, or endorsements with author information and avatars. It supports multiple sizes, skeleton loading states, and can display rich content. Testimonials are ideal for showcasing social proof, customer feedback, or featured quotes on landing pages and marketing sites.',
+      },
+    },
+  },
+  tags: ['autodocs'],
   argTypes: {
     size: {
       control: { type: 'select', options: ['', 'sm', 'lg'] },
-      defaultValue: '',
+      description: 'Size variant of the testimonial',
     },
     skeleton: {
-      control: { type: 'boolean' },
-      defaultValue: false,
+      control: 'boolean',
+      description: 'Whether to show skeleton loading state',
     },
   },
-} as Meta<typeof Testimonial>;
+} satisfies Meta<typeof Testimonial>;
 
-const Template: StoryFn<typeof Testimonial> = args => (
-  <div style={{ padding: '30px' }}>
-    <Testimonial {...args} />
-  </div>
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 // Default testimonial
-export const Default = Template.bind({});
-Default.args = {
-  quote:
-    'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
-  author: {
-    name: 'Emily Rodriguez',
-    role: 'Software Engineer, Acme',
-    avatarSrc:
-      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    avatarAlt: 'Emily Rodriguez',
+export const Default: Story = {
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Testimonial {...args} />
+    </div>
+  ),
+  args: {
+    quote:
+      'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
+    author: {
+      name: 'Emily Rodriguez',
+      role: 'Software Engineer, Acme',
+      avatarSrc:
+        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      avatarAlt: 'Emily Rodriguez',
+    },
+    size: '',
   },
-  size: '',
 };
 
 // Large testimonial
-export const Large = Template.bind({});
-Large.args = {
-  quote:
-    'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
-  author: {
-    name: 'Emily Rodriguez',
-    role: 'Software Engineer, Acme',
-    avatarSrc:
-      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    avatarAlt: 'Emily Rodriguez',
+export const Large: Story = {
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Testimonial {...args} />
+    </div>
+  ),
+  args: {
+    quote:
+      'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
+    author: {
+      name: 'Emily Rodriguez',
+      role: 'Software Engineer, Acme',
+      avatarSrc:
+        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      avatarAlt: 'Emily Rodriguez',
+    },
+    size: 'lg',
   },
-  size: 'lg',
 };
 
 // Small testimonial
-export const Small = Template.bind({});
-Small.args = {
-  quote:
-    'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
-  author: {
-    name: 'Emily Rodriguez',
-    role: 'Software Engineer, Acme',
-    avatarSrc:
-      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-    avatarAlt: 'Emily Rodriguez',
+export const Small: Story = {
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Testimonial {...args} />
+    </div>
+  ),
+  args: {
+    quote:
+      'The intuitive interface, seamless syncing across devices, and helpful features have made me more productive than ever before.',
+    author: {
+      name: 'Emily Rodriguez',
+      role: 'Software Engineer, Acme',
+      avatarSrc:
+        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      avatarAlt: 'Emily Rodriguez',
+    },
+    size: 'sm',
   },
-  size: 'sm',
 };
 
 // Skeleton loading state
-export const Skeleton = Template.bind({});
-Skeleton.args = {
-  skeleton: true,
-  size: '',
+export const Skeleton: Story = {
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Testimonial {...args} />
+    </div>
+  ),
+  args: {
+    skeleton: true,
+    size: '',
+  },
 };
 
 // Large skeleton
-export const LargeSkeleton = Template.bind({});
-LargeSkeleton.args = {
-  skeleton: true,
-  size: 'lg',
+export const LargeSkeleton: Story = {
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Testimonial {...args} />
+    </div>
+  ),
+  args: {
+    skeleton: true,
+    size: 'lg',
+  },
 };
 
 // With rich content in quote
-export const RichContent = Template.bind({});
-RichContent.args = {
-  quote: (
-    <>
-      <p>"I feel more in charge of my schedule and less overwhelmed. Highly recommended for</p>
-      <p>professionals and anyone aiming to enhance their productivity."</p>
-    </>
+export const RichContent: Story = {
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Testimonial {...args} />
+    </div>
   ),
-  author: {
-    name: 'John Smith',
-    role: 'Product Manager, XYZ Corp',
-    avatarSrc:
-      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3',
-    avatarAlt: 'John Smith',
+  args: {
+    quote: (
+      <>
+        <p>"I feel more in charge of my schedule and less overwhelmed. Highly recommended for</p>
+        <p>professionals and anyone aiming to enhance their productivity."</p>
+      </>
+    ),
+    author: {
+      name: 'John Smith',
+      role: 'Product Manager, XYZ Corp',
+      avatarSrc:
+        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3',
+      avatarAlt: 'John Smith',
+    },
   },
 };
 
@@ -150,7 +192,9 @@ const TestimonialGrid: React.FC = () => {
   );
 };
 
-export const TestimonialGridLayout: StoryFn<typeof Testimonial> = () => <TestimonialGrid />;
+export const TestimonialGridLayout: Story = {
+  render: () => <TestimonialGrid />,
+};
 
 // Testimonial with image
 const TestimonialWithImage: React.FC = () => {
@@ -177,4 +221,6 @@ const TestimonialWithImage: React.FC = () => {
   );
 };
 
-export const WithImage: StoryFn<typeof Testimonial> = () => <TestimonialWithImage />;
+export const WithImage: Story = {
+  render: () => <TestimonialWithImage />,
+};

package/src/components/Todo/Todo.stories.tsx

@@ -1,30 +1,56 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { generateUUID } from '../../lib/utils';
 import { Todo } from './Todo';
+import { SIZES } from '../../lib/constants/components';
 
-const meta: Meta<typeof Todo> = {
+const meta = {
   title: 'Components/Todo',
   component: Todo,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Todo component provides a complete todo list interface with the ability to add, complete, and manage tasks. It supports multiple sizes, can show or hide completed items, and provides a clean interface for task management. Ideal for task tracking, project management, or any scenario requiring a simple todo list.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
-    items: { control: 'object' },
-    title: { control: 'text' },
-
+    items: {
+      control: 'object',
+      description: 'Array of todo items',
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the todo list',
+    },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
+      description: 'Size of the todo component',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text for the input field',
+    },
+    showCompleted: {
+      control: 'boolean',
+      description: 'Whether to show completed items',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS class names',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the todo list is disabled',
     },
-    placeholder: { control: 'text' },
-    showCompleted: { control: 'boolean' },
-    className: { control: 'text' },
-    disabled: { control: 'boolean' },
   },
-};
+} satisfies Meta<typeof Todo>;
 
 export default meta;
-type Story = StoryObj<typeof Todo>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {