@shohojdhara/atomix 0.3.4 → 0.3.6

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

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

@@ -1,18 +1,29 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Toggle } from './Toggle';
 
-export default {
+const meta = {
   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.',
+      },
+    },
+  },
+  tags: ['autodocs'],
   argTypes: {
     initialOn: {
       control: { type: 'boolean' },
+      description: 'Whether the toggle is initially on',
       defaultValue: false,
     },
     disabled: {
       control: { type: 'boolean' },
+      description: 'Whether the toggle is disabled',
       defaultValue: false,
     },
     glass: {
@@ -20,39 +31,60 @@ export default {
       description: 'Enable glass morphism effect',
     },
   },
-} as Meta<typeof Toggle>;
+} satisfies Meta<typeof Toggle>;
 
-const Template: StoryFn<typeof Toggle> = args => (
-  <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
-    <Toggle {...args} />
-  </div>
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default = Template.bind({});
-Default.args = {
-  initialOn: false,
-  disabled: false,
+export const Default: Story = {
+  render: args => (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
+      <Toggle {...args} />
+    </div>
+  ),
+  args: {
+    initialOn: false,
+    disabled: false,
+  },
 };
 
-export const InitiallyOn = Template.bind({});
-InitiallyOn.args = {
-  initialOn: true,
-  disabled: false,
+export const InitiallyOn: Story = {
+  render: args => (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
+      <Toggle {...args} />
+    </div>
+  ),
+  args: {
+    initialOn: true,
+    disabled: false,
+  },
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  initialOn: false,
-  disabled: true,
+export const Disabled: Story = {
+  render: args => (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
+      <Toggle {...args} />
+    </div>
+  ),
+  args: {
+    initialOn: false,
+    disabled: true,
+  },
 };
 
-export const DisabledOn = Template.bind({});
-DisabledOn.args = {
-  initialOn: true,
-  disabled: true,
+export const DisabledOn: Story = {
+  render: args => (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '30px' }}>
+      <Toggle {...args} />
+    </div>
+  ),
+  args: {
+    initialOn: true,
+    disabled: true,
+  },
 };
 
-export const Glass = {
+export const Glass: Story = {
   args: {
     initialOn: false,
     disabled: false,
@@ -75,7 +107,7 @@ export const Glass = {
   ),
 };
 
-export const GlassOn = {
+export const GlassOn: Story = {
   args: {
     initialOn: true,
     disabled: false,
@@ -101,7 +133,7 @@ export const GlassOn = {
   ),
 };
 
-export const GlassCustom = {
+export const GlassCustom: Story = {
   args: {
     initialOn: false,
     disabled: false,
@@ -111,6 +143,7 @@ export const GlassCustom = {
       saturation: 200,
       aberrationIntensity: 0.8,
       cornerRadius: 12,
+      children: <div>Custom glass</div>,
     },
   },
   render: (args: any) => (