@shohojdhara/atomix 0.3.14 → 0.4.0

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.',
+      },
+    },
   },
 };

package/src/components/Toggle/Toggle.stories.tsx

@@ -1,16 +1,70 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Toggle } from './Toggle';
 
-const meta = {
+const meta: Meta<typeof Toggle> = {
   title: 'Components/Toggle',
   component: Toggle,
   parameters: {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'The Toggle component provides an on/off switch control for binary choices. It offers a more visually distinct alternative to checkboxes for settings, preferences, or feature toggles. Toggles support disabled states and can include glass morphism effects.',
+        component: `
+# Toggle
+
+## Overview
+
+Toggle provides an on/off switch control for binary choices. It offers a more visually distinct alternative to checkboxes for settings, preferences, or feature toggles. Toggles support disabled states and can include glass morphism effects.
+
+## Features
+
+- On/off state control
+- Uncontrolled and controlled usage
+- Disabled state
+- Glass morphism effect
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Toggle with Space or Enter key
+- Screen reader: State changes announced appropriately
+- ARIA support: Proper roles and properties for toggle components
+- Focus management: Visible focus indicators maintained
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Toggle 
+  defaultChecked={false} 
+  onChange={(checked) => console.log(checked)} 
+/>
+\`\`\`
+
+### Controlled Usage
+
+\`\`\`tsx
+<Toggle 
+  checked={isEnabled} 
+  onChange={setEnabled} 
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| defaultChecked | boolean | false | Whether the toggle is initially on (uncontrolled) |
+| checked | boolean | - | Whether the toggle is on (controlled) |
+| onChange | (checked: boolean) => void | - | Callback when the toggle state changes |
+| disabled | boolean | false | Whether the toggle is disabled |
+| glass | boolean | false | Enable glass morphism effect |
+        `,
       },
     },
   },
@@ -19,11 +73,18 @@ const meta = {
     defaultChecked: {
       control: { type: 'boolean' },
       description: 'Whether the toggle is initially on (uncontrolled)',
-      defaultValue: false,
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     checked: {
       control: { type: 'boolean' },
       description: 'Whether the toggle is on (controlled)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: '-' },
+      },
     },
     onChange: {
       action: 'changed',
@@ -32,19 +93,26 @@ const meta = {
     disabled: {
       control: { type: 'boolean' },
       description: 'Whether the toggle is disabled',
-      defaultValue: false,
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     glass: {
       control: 'boolean',
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
   },
-} satisfies Meta<typeof Toggle>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const BasicUsage: Story = {
   render: args => (
     <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
       <Toggle {...args} />
@@ -54,11 +122,15 @@ export const Default: Story = {
     defaultChecked: false,
     disabled: false,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic toggle with default settings.',
+      },
+    },
+  },
 };
 
-/**
- * Controlled Toggle using checked and onChange.
- */
 export const Controlled: Story = {
   render: () => {
     const [isChecked, setIsChecked] = React.useState(false);
@@ -69,6 +141,13 @@ export const Controlled: Story = {
       </div>
     );
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Controlled toggle using checked and onChange.',
+      },
+    },
+  },
 };
 
 export const InitiallyOn: Story = {
@@ -81,42 +160,52 @@ export const InitiallyOn: Story = {
     defaultChecked: true,
     disabled: false,
   },
-};
-
-export const Disabled: Story = {
-  render: args => (
-    <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
-      <Toggle {...args} />
-    </div>
-  ),
-  args: {
-    defaultChecked: false,
-    disabled: true,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toggle that starts in the "on" position.',
+      },
+    },
   },
 };
 
-export const DisabledOn: Story = {
-  render: args => (
-    <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
-      <Toggle {...args} />
+export const DisabledStates: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '2rem',
+        padding: '30px',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <Toggle disabled={true} checked={false} />
+        <span>Disabled Off</span>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <Toggle disabled={true} checked={true} />
+        <span>Disabled On</span>
+      </div>
     </div>
   ),
-  args: {
-    defaultChecked: true,
-    disabled: true,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toggle in both disabled states (off and on).',
+      },
+    },
   },
 };
 
-export const Glass: Story = {
-  args: {
-    defaultChecked: false,
-    disabled: false,
-    glass: true,
-  },
-  render: (args: any) => (
+export const WithGlassEffect: Story = {
+  render: args => (
     <div
       style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        background: 'url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
         padding: '3rem',
         borderRadius: '12px',
         minHeight: '200px',
@@ -128,6 +217,18 @@ export const Glass: Story = {
       <Toggle {...args} />
     </div>
   ),
+  args: {
+    defaultChecked: false,
+    disabled: false,
+    glass: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toggle with glass morphism effect applied.',
+      },
+    },
+  },
 };
 
 export const GlassOn: Story = {