@shohojdhara/atomix 0.3.14 → 0.3.15

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import type { AtomixGlassProps } from '../../lib/types/components';
 import { Tabs } from './Tabs';
 
@@ -13,8 +14,67 @@ const meta = {
     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.',
+        component: `
+# Tabs
+
+## Overview
+
+Tabs organize 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.
+
+## Features
+
+- Multiple tab panels with distinct content
+- Keyboard navigation support
+- Active tab indication
+- Glass morphism effect option
+- Rich content support
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Navigate tabs with arrow keys, activate with Enter/Space
+- Screen reader: Tab labels and content announced properly
+- ARIA support: Proper roles and properties for tab components
+- Focus management: Maintains focus on active tab element
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Tabs 
+  items={[
+    { label: 'Tab 1', content: <div>Content 1</div> },
+    { label: 'Tab 2', content: <div>Content 2</div> },
+  ]}
+/>
+\`\`\`
+
+### With Glass Effect
+
+\`\`\`tsx
+<Tabs 
+  glass={true}
+  items={[
+    { label: 'Tab 1', content: <div>Content 1</div> },
+    { label: 'Tab 2', content: <div>Content 2</div> },
+  ]}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| activeIndex | number | 0 | The index of the currently active tab |
+| items | TabItem[] | [] | Array of tab items with labels and content |
+| glass | boolean \\| GlassProps | false | Enable glass morphism effect |
+| onChange | (index: number) => void | - | Callback when active tab changes |
+| className | string | - | Additional CSS classes for the component |
+        `,
       },
     },
   },
@@ -23,11 +83,30 @@ const meta = {
     activeIndex: {
       control: { type: 'number' },
       description: 'The index of the currently active tab',
-      defaultValue: 0,
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 0 },
+      },
     },
     glass: {
       control: 'boolean',
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean | GlassProps' },
+        defaultValue: { summary: false },
+      },
+    },
+    onChange: {
+      action: 'tab changed',
+      description: 'Callback when active tab changes',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for the component',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
   },
 } satisfies Meta<typeof Tabs>;
@@ -35,10 +114,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/**
- * Default tabs component with three tabs.
- */
-export const Default: Story = {
+export const BasicUsage: Story = {
   render: args => (
     <div style={{ maxWidth: '600px', margin: '0 auto', padding: '30px' }}>
       <Tabs {...args} />
@@ -61,11 +137,15 @@ export const Default: Story = {
     ],
     activeIndex: 0,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic tabs component with three tabs.',
+      },
+    },
+  },
 };
 
-/**
- * Tabs with a different tab initially active (Tab 2).
- */
 export const WithDifferentActiveTab: Story = {
   render: args => (
     <div style={{ maxWidth: '600px', margin: '0 auto', padding: '30px' }}>
@@ -89,6 +169,52 @@ export const WithDifferentActiveTab: Story = {
     ],
     activeIndex: 1,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabs with a different tab initially active (Tab 2).',
+      },
+    },
+  },
+};
+
+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'
+    }}>
+      <Tabs {...args} />
+    </div>
+  ),
+  args: {
+    items: [
+      {
+        label: 'Tab 1',
+        content: <p>This is the content for Tab 1 with glass effect.</p>,
+      },
+      {
+        label: 'Tab 2',
+        content: <p>This is the content for Tab 2 with glass effect.</p>,
+      },
+      {
+        label: 'Tab 3',
+        content: <p>This is the content for Tab 3 with glass effect.</p>,
+      },
+    ],
+    activeIndex: 0,
+    glass: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabs with glass morphism effect applied.',
+      },
+    },
+  },
 };
 
 /**

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Testimonial } from './Testimonial';
 
 const meta = {
@@ -9,20 +10,108 @@ const meta = {
     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.',
+        component: `
+# Testimonial
+
+## Overview
+
+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.
+
+## Features
+
+- Customer quotes with author information
+- Avatar display with author details
+- Multiple size variants
+- Skeleton loading states
+- Responsive design
+- Accessible markup
+- Customizable styling
+
+## Accessibility
+
+- Screen reader: Quote and author information announced properly
+- ARIA support: Proper roles and properties for testimonial components
+- Keyboard support: Accessible via keyboard navigation
+- Focus management: Maintains focus on interactive elements
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Testimonial 
+  quote="Great product!"
+  author={{
+    name: 'John Doe',
+    role: 'Customer',
+    avatarSrc: '/path/to/avatar.jpg',
+    avatarAlt: 'John Doe'
+  }}
+/>
+\`\`\`
+
+### With Size Variant
+
+\`\`\`tsx
+<Testimonial 
+  quote="Great product!"
+  author={{
+    name: 'John Doe',
+    role: 'Customer',
+    avatarSrc: '/path/to/avatar.jpg',
+    avatarAlt: 'John Doe'
+  }}
+  size="lg"
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| quote | string | - | The testimonial quote text |
+| author | AuthorInfo | - | Information about the testimonial author |
+| size | '' \\| 'sm' \\| 'lg' | '' | Size variant of the testimonial |
+| skeleton | boolean | false | Whether to show skeleton loading state |
+        `,
       },
     },
   },
   tags: ['autodocs'],
   argTypes: {
+    quote: {
+      control: 'text',
+      description: 'The testimonial quote text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    author: {
+      control: 'object',
+      description: 'Information about the testimonial author',
+      table: {
+        type: { summary: 'AuthorInfo' },
+        defaultValue: { summary: '-' },
+      },
+    },
     size: {
       control: { type: 'select', options: ['', 'sm', 'lg'] },
       description: 'Size variant of the testimonial',
+      table: {
+        type: { summary: '"" | "sm" | "lg"' },
+        defaultValue: { summary: '' },
+      },
     },
     skeleton: {
       control: 'boolean',
       description: 'Whether to show skeleton loading state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
   },
 } satisfies Meta<typeof Testimonial>;
@@ -31,7 +120,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Default testimonial
-export const Default: Story = {
+export const BasicUsage: Story = {
   render: args => (
     <div style={{ padding: '30px' }}>
       <Testimonial {...args} />
@@ -49,6 +138,13 @@ export const Default: Story = {
     },
     size: '',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic testimonial with default size.',
+      },
+    },
+  },
 };
 
 // Large testimonial
@@ -70,6 +166,13 @@ export const Large: Story = {
     },
     size: 'lg',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large testimonial with expanded size.',
+      },
+    },
+  },
 };
 
 // Small testimonial
@@ -91,6 +194,13 @@ export const Small: Story = {
     },
     size: 'sm',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small testimonial with compact size.',
+      },
+    },
+  },
 };
 
 // Skeleton loading state
@@ -104,6 +214,13 @@ export const Skeleton: Story = {
     skeleton: true,
     size: '',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Testimonial showing skeleton loading state.',
+      },
+    },
+  },
 };
 
 // Large skeleton

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { generateUUID } from '../../lib/utils';
 import { Todo } from './Todo';
 import { SIZES } from '../../lib/constants/components';
@@ -10,8 +11,71 @@ const meta = {
     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.',
+        component: `
+# Todo
+
+## Overview
+
+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.
+
+## Features
+
+- Add, complete, and manage tasks
+- Multiple size options
+- Show/hide completed items
+- Clean and intuitive interface
+- Responsive design
+- Task persistence
+- Accessible markup
+
+## Accessibility
+
+- Keyboard support: Navigate and interact with todos using keyboard
+- Screen reader: Task status and content announced properly
+- ARIA support: Proper roles and properties for todo components
+- Focus management: Maintains focus on interactive elements
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Todo 
+  items={[
+    { id: '1', text: 'Task 1', completed: false },
+    { id: '2', text: 'Task 2', completed: true },
+  ]}
+  title="My Tasks"
+  placeholder="Add a new task"
+/>
+\`\`\`
+
+### With Configuration
+
+\`\`\`tsx
+<Todo 
+  items={tasks}
+  title="Project Tasks"
+  placeholder="Add a new task"
+  size="lg"
+  showCompleted={false}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| items | TodoItem[] | [] | Array of todo items |
+| title | string | - | Title of the todo list |
+| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Size of the todo component |
+| placeholder | string | - | Placeholder text for the input field |
+| showCompleted | boolean | true | Whether to show completed items |
+| className | string | - | Additional CSS class names |
+| disabled | boolean | false | Whether the todo list is disabled |
+        `,
       },
     },
   },
@@ -20,31 +84,59 @@ const meta = {
     items: {
       control: 'object',
       description: 'Array of todo items',
+      table: {
+        type: { summary: 'TodoItem[]' },
+        defaultValue: { summary: '[]' },
+      },
     },
     title: {
       control: 'text',
       description: 'Title of the todo list',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     size: {
       control: { type: 'select' },
       options: SIZES,
       description: 'Size of the todo component',
+      table: {
+        type: { summary: '"sm" | "md" | "lg"' },
+        defaultValue: { summary: 'md' },
+      },
     },
     placeholder: {
       control: 'text',
       description: 'Placeholder text for the input field',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     showCompleted: {
       control: 'boolean',
       description: 'Whether to show completed items',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
     },
     className: {
       control: 'text',
       description: 'Additional CSS class names',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     disabled: {
       control: 'boolean',
       description: 'Whether the todo list is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
   },
 } satisfies Meta<typeof Todo>;
@@ -52,7 +144,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const BasicUsage: Story = {
   args: {
     items: [
       { id: '1', text: 'Learn React', completed: true },
@@ -65,6 +157,13 @@ export const Default: Story = {
     showCompleted: true,
     disabled: false,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic todo list with sample tasks.',
+      },
+    },
+  },
 };
 
 export const WithManyItems: Story = {
@@ -79,19 +178,56 @@ export const WithManyItems: Story = {
     title: 'Project Tasks',
     showCompleted: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Todo list with multiple tasks.',
+      },
+    },
+  },
 };
 
 export const Small: Story = {
   args: {
-    ...Default.args,
+    items: [
+      { id: '1', text: 'Learn React', completed: true },
+      { id: '2', text: 'Build a todo app', completed: false },
+      { id: '3', text: 'Deploy to production', completed: false },
+    ],
+    title: 'Todo List',
+    placeholder: 'Add a new task',
     size: 'sm',
+    showCompleted: true,
+    disabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small-sized todo list.',
+      },
+    },
   },
 };
 
 export const Large: Story = {
   args: {
-    ...Default.args,
+    items: [
+      { id: '1', text: 'Learn React', completed: true },
+      { id: '2', text: 'Build a todo app', completed: false },
+      { id: '3', text: 'Deploy to production', completed: false },
+    ],
+    title: 'Todo List',
+    placeholder: 'Add a new task',
     size: 'lg',
+    showCompleted: true,
+    disabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large-sized todo list.',
+      },
+    },
   },
 };
 
@@ -102,28 +238,81 @@ export const HideCompleted: Story = {
       { id: generateUUID(), text: 'Build a todo app', completed: false },
       { id: generateUUID(), text: 'Deploy to production', completed: false },
     ],
+    title: 'Todo List',
+    placeholder: 'Add a new task',
     showCompleted: false,
-    title: 'Active Tasks',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Todo list that hides completed items.',
+      },
+    },
   },
 };
 
 export const Disabled: Story = {
   args: {
-    ...Default.args,
+    items: [
+      { id: '1', text: 'Learn React', completed: true },
+      { id: '2', text: 'Build a todo app', completed: false },
+      { id: '3', text: 'Deploy to production', completed: false },
+    ],
+    title: 'Todo List',
+    placeholder: 'Add a new task',
+    size: 'md',
+    showCompleted: true,
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled todo list.',
+      },
+    },
+  },
 };
 
 export const CustomTitle: Story = {
   args: {
-    ...Default.args,
+    items: [
+      { id: '1', text: 'Learn React', completed: true },
+      { id: '2', text: 'Build a todo app', completed: false },
+      { id: '3', text: 'Deploy to production', completed: false },
+    ],
     title: 'My Custom Todo List',
+    placeholder: 'Add a new task',
+    size: 'md',
+    showCompleted: true,
+    disabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Todo list with a custom title.',
+      },
+    },
   },
 };
 
 export const NoTitle: Story = {
   args: {
-    ...Default.args,
+    items: [
+      { id: '1', text: 'Learn React', completed: true },
+      { id: '2', text: 'Build a todo app', completed: false },
+      { id: '3', text: 'Deploy to production', completed: false },
+    ],
     title: '',
+    placeholder: 'Add a new task',
+    size: 'md',
+    showCompleted: true,
+    disabled: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Todo list without a title.',
+      },
+    },
   },
 };