@shohojdhara/atomix 0.3.5 → 0.3.6

package/src/components/Popover/Popover.stories.tsx

@@ -1,13 +1,22 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Popover, PopoverTrigger } from './Popover';
 import { Toggle } from '../Toggle/Toggle';
 import { Button } from '../Button/Button';
 
-export default {
+const meta = {
   title: 'Components/Popover',
   component: Popover,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'The Popover component displays floating content relative to a trigger element. It provides a flexible way to show additional information, actions, or controls without navigating away from the current context. Popovers support multiple positions, click or hover triggers, and can include rich interactive content.',
+      },
+    },
+  },
+  tags: ['autodocs'],
   argTypes: {
     position: {
       control: { type: 'select' },
@@ -47,10 +56,13 @@ export default {
       description: 'Enable glass morphism effect',
     },
   },
-} as Meta<typeof Popover>;
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-// Default template
-const Template: StoryFn<typeof Popover> = args => {
+// Helper component for interactive stories
+const InteractivePopover = (args: React.ComponentProps<typeof Popover>) => {
   const selectOptions = [
     { value: '1', label: 'Option 1' },
     { value: '2', label: 'Option 2' },
@@ -103,143 +115,207 @@ const Template: StoryFn<typeof Popover> = args => {
   );
 };
 
-export const Default = Template.bind({});
-Default.args = {
-  position: 'top',
-  trigger: 'click',
-  offset: 12,
-  delay: 0,
-  defaultOpen: false,
-  closeOnClickOutside: true,
-  closeOnEscape: true,
+export const Default: Story = {
+  render: args => <InteractivePopover {...args} />,
+  args: {
+    position: 'top',
+    trigger: 'click',
+    offset: 12,
+    delay: 0,
+    defaultOpen: false,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+  } as any,
 };
 
-export const Hover = Template.bind({});
-Hover.args = {
-  ...Default.args,
-  trigger: 'hover',
-  delay: 200,
+export const Hover: Story = {
+  render: args => <InteractivePopover {...args} />,
+  args: {
+    position: 'top',
+    trigger: 'hover',
+    offset: 12,
+    delay: 200,
+    defaultOpen: false,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+  } as any,
 };
 
-export const BottomPosition = Template.bind({});
-BottomPosition.args = {
-  ...Default.args,
-  position: 'bottom',
+export const BottomPosition: Story = {
+  render: args => <InteractivePopover {...args} />,
+  args: {
+    position: 'bottom',
+    trigger: 'click',
+    offset: 12,
+    delay: 0,
+    defaultOpen: false,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+  } as any,
 };
 
-export const LeftPosition = Template.bind({});
-LeftPosition.args = {
-  ...Default.args,
-  position: 'left',
+export const LeftPosition: Story = {
+  render: args => <InteractivePopover {...args} />,
+  args: {
+    position: 'left',
+    trigger: 'click',
+    offset: 12,
+    delay: 0,
+    defaultOpen: false,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+  } as any,
 };
 
-export const RightPosition = Template.bind({});
-RightPosition.args = {
-  ...Default.args,
-  position: 'right',
+export const RightPosition: Story = {
+  render: args => <InteractivePopover {...args} />,
+  args: {
+    position: 'right',
+    trigger: 'click',
+    offset: 12,
+    delay: 0,
+    defaultOpen: false,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+  } as any,
 };
 
-export const AutoPosition = Template.bind({});
-AutoPosition.args = {
-  ...Default.args,
-  position: 'auto',
-  defaultOpen: true, // Open by default to showcase auto-positioning
+export const AutoPosition: Story = {
+  render: args => <InteractivePopover {...args} />,
+  args: {
+    position: 'auto',
+    trigger: 'click',
+    offset: 12,
+    delay: 0,
+    defaultOpen: true, // Open by default to showcase auto-positioning
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+  } as any,
 };
 
 /**
  * Glass morphism popover example.
  */
-export const GlassPopover = Template.bind({});
-GlassPopover.args = {
-  ...Default.args,
-  glass: true,
+export const GlassPopover: Story = {
+  render: args => <InteractivePopover {...args} />,
+  args: {
+    position: 'top',
+    trigger: 'click',
+    offset: 12,
+    delay: 0,
+    defaultOpen: false,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    glass: true,
+  } as any,
+  decorators: [
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
 };
-GlassPopover.decorators = [
-  Story => (
-    <div
-      style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        minHeight: '100vh',
-        padding: '2rem',
-      }}
-    >
-      <Story />
-    </div>
-  ),
-];
 
 /**
  * Glass popover with custom settings.
  */
-export const GlassPopoverCustom = Template.bind({});
-GlassPopoverCustom.args = {
-  ...Default.args,
-  glass: {
-    displacementScale: 80,
-    blurAmount: 2,
-    saturation: 200,
-    aberrationIntensity: 1,
-    cornerRadius: 16,
-    mode: 'polar',
-  },
+export const GlassPopoverCustom: Story = {
+  render: args => <InteractivePopover {...args} />,
+  args: {
+    position: 'top',
+    trigger: 'click',
+    offset: 12,
+    delay: 0,
+    defaultOpen: false,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    glass: {
+      displacementScale: 80,
+      blurAmount: 2,
+      saturation: 200,
+      aberrationIntensity: 1,
+      cornerRadius: 16,
+      mode: 'polar',
+    } as any,
+  } as any,
+  decorators: [
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
 };
-GlassPopoverCustom.decorators = [
-  Story => (
-    <div
-      style={{
-        background: 'linear-gradient(45deg, #f093fb 0%, #f5576c 100%)',
-        minHeight: '100vh',
-        padding: '2rem',
-      }}
-    >
-      <Story />
-    </div>
-  ),
-];
 
 /**
  * Glass popover with hover trigger.
  */
-export const GlassPopoverHover = Template.bind({});
-GlassPopoverHover.args = {
-  ...Default.args,
-  trigger: 'hover',
-  delay: 200,
-  glass: true,
+export const GlassPopoverHover: Story = {
+  render: args => <InteractivePopover {...args} />,
+  args: {
+    position: 'top',
+    trigger: 'hover',
+    offset: 12,
+    delay: 200,
+    defaultOpen: false,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    glass: true,
+  } as any,
+  decorators: [
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
 };
-GlassPopoverHover.decorators = [
-  Story => (
-    <div
-      style={{
-        background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
-        minHeight: '100vh',
-        padding: '2rem',
-      }}
-    >
-      <Story />
-    </div>
-  ),
-];
 
 /**
  * Glass popover with different positions.
  */
-export const GlassPopoverPositions = Template.bind({});
-GlassPopoverPositions.args = {
-  ...Default.args,
-  glass: true,
-  defaultOpen: true,
+export const GlassPopoverPositions: Story = {
+  render: args => <InteractivePopover {...args} />,
+  args: {
+    position: 'top',
+    trigger: 'click',
+    offset: 12,
+    delay: 0,
+    defaultOpen: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    glass: true,
+  } as any,
+  decorators: [
+    Story => (
+      <div
+        style={{
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          minHeight: '100vh',
+          padding: '2rem',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
 };
-GlassPopoverPositions.decorators = [
-  Story => (
-    <div
-      style={{
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        minHeight: '100vh',
-        padding: '2rem',
-      }}
-    >
-      <Story />
-    </div>
-  ),
-];

package/src/components/ProductReview/ProductReview.stories.tsx

@@ -1,88 +1,110 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { ProductReview, ProductReviewProps } from './ProductReview';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProductReview } from './ProductReview';
+import { THEME_COLORS } from '../../lib/constants/components';
 
-export default {
+const meta = {
   title: 'Components/ProductReview',
   component: ProductReview,
   parameters: {
+    layout: 'centered',
     docs: {
       description: {
-        component: 'Product review form for collecting user ratings and feedback',
+        component:
+          'The ProductReview component provides a comprehensive form for collecting user ratings and feedback on products. It supports customizable rating scales, half-star ratings, product images, and detailed comment sections. Ideal for e-commerce sites, review platforms, or any application requiring product feedback collection.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
-    productName: { control: 'text' },
-    productImage: { control: 'text' },
-    initialRating: { control: { type: 'number', min: 0, max: 5, step: 0.5 } },
-    maxRating: { control: { type: 'number', min: 1, max: 10 } },
-    allowHalf: { control: 'boolean' },
+    productName: {
+      control: 'text',
+      description: 'Name of the product being reviewed',
+    },
+    productImage: {
+      control: 'text',
+      description: 'URL of the product image',
+    },
+    initialRating: {
+      control: { type: 'number', min: 0, max: 5, step: 0.5 },
+      description: 'Initial rating value',
+    },
+    maxRating: {
+      control: { type: 'number', min: 1, max: 10 },
+      description: 'Maximum rating value',
+    },
+    allowHalf: {
+      control: 'boolean',
+      description: 'Whether to allow half-star ratings',
+    },
     ratingColor: {
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
+        options: THEME_COLORS,
       },
+      description: 'Color variant for the rating stars',
     },
   },
-} as Meta<typeof ProductReview>;
+} satisfies Meta<typeof ProductReview>;
 
-const Template: StoryFn<ProductReviewProps> = (args: ProductReviewProps) => (
-  <ProductReview {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default = Template.bind({});
-Default.args = {
-  productName: 'Wireless Headphones',
-  productImage: 'https://via.placeholder.com/100',
-  initialRating: 0,
-  maxRating: 5,
-  allowHalf: true,
-  ratingColor: 'warning',
-  onSubmit: (rating: number, comment: string) => {
-    console.log('Rating:', rating);
-    console.log('Comment:', comment);
+export const Default: Story = {
+  args: {
+    productName: 'Wireless Headphones',
+    productImage: 'https://via.placeholder.com/100',
+    initialRating: 0,
+    maxRating: 5,
+    allowHalf: true,
+    ratingColor: 'warning',
+    onSubmit: (rating: number, comment: string) => {
+      console.log('Rating:', rating);
+      console.log('Comment:', comment);
+    },
   },
 };
 
-export const WithInitialRating = Template.bind({});
-WithInitialRating.args = {
-  productName: 'Smart Watch',
-  productImage: 'https://via.placeholder.com/100',
-  initialRating: 4,
-  maxRating: 5,
-  allowHalf: true,
-  ratingColor: 'warning',
-  onSubmit: (rating: number, comment: string) => {
-    console.log('Rating:', rating);
-    console.log('Comment:', comment);
+export const WithInitialRating: Story = {
+  args: {
+    productName: 'Smart Watch',
+    productImage: 'https://via.placeholder.com/100',
+    initialRating: 4,
+    maxRating: 5,
+    allowHalf: true,
+    ratingColor: 'warning',
+    onSubmit: (rating: number, comment: string) => {
+      console.log('Rating:', rating);
+      console.log('Comment:', comment);
+    },
   },
 };
 
-export const WithoutImage = Template.bind({});
-WithoutImage.args = {
-  productName: 'Bluetooth Speaker',
-  initialRating: 0,
-  maxRating: 5,
-  allowHalf: true,
-  ratingColor: 'warning',
-  onSubmit: (rating: number, comment: string) => {
-    console.log('Rating:', rating);
-    console.log('Comment:', comment);
+export const WithoutImage: Story = {
+  args: {
+    productName: 'Bluetooth Speaker',
+    initialRating: 0,
+    maxRating: 5,
+    allowHalf: true,
+    ratingColor: 'warning',
+    onSubmit: (rating: number, comment: string) => {
+      console.log('Rating:', rating);
+      console.log('Comment:', comment);
+    },
   },
 };
 
-export const CustomRatingScale = Template.bind({});
-CustomRatingScale.args = {
-  productName: 'Gaming Laptop',
-  productImage: 'https://via.placeholder.com/100',
-  initialRating: 0,
-  maxRating: 10,
-  allowHalf: false,
-  ratingColor: 'primary',
-  onSubmit: (rating: number, comment: string) => {
-    console.log('Rating:', rating);
-    console.log('Comment:', comment);
+export const CustomRatingScale: Story = {
+  args: {
+    productName: 'Gaming Laptop',
+    productImage: 'https://via.placeholder.com/100',
+    initialRating: 0,
+    maxRating: 10,
+    allowHalf: false,
+    ratingColor: 'primary',
+    onSubmit: (rating: number, comment: string) => {
+      console.log('Rating:', rating);
+      console.log('Comment:', comment);
+    },
   },
 };

package/src/components/Progress/Progress.stories.tsx

@@ -1,75 +1,105 @@
 import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Progress } from './Progress';
-import { ProgressProps } from '../../lib/types/components';
+import { THEME_COLORS, SIZES } from '../../lib/constants/components';
 
-export default {
+const meta = {
   title: 'Components/Progress',
   component: Progress,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Progress component displays the completion status of a task or process. It provides visual feedback on progress through a horizontal bar that fills based on a percentage value. Progress bars support multiple variants, sizes, and can be used to show loading states, form completion, or any incremental process.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div style={{ width: '50%' }}>
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
-    value: { control: { type: 'range', min: 0, max: 100 } },
+    value: {
+      control: { type: 'range', min: 0, max: 100 },
+      description: 'The progress value as a percentage (0-100)',
+      defaultValue: 50,
+    },
     variant: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'success', 'warning', 'error', 'info', 'light', 'dark'],
-      },
+      control: { type: 'select' },
+      options: THEME_COLORS,
+      description: 'The color variant of the progress bar',
+      defaultValue: 'primary',
     },
     size: {
-      control: {
-        type: 'select',
-        options: ['sm', 'md', 'lg'],
-      },
+      control: { type: 'select' },
+      options: SIZES,
+      description: 'The size of the progress bar',
+      defaultValue: 'md',
     },
   },
-} as Meta<typeof Progress>;
+} satisfies Meta<typeof Progress>;
 
-const Template: StoryFn<ProgressProps> = (args: ProgressProps) => <Progress {...args} />;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default = Template.bind({});
-Default.args = {
-  value: 50,
-  variant: 'primary',
-  size: 'md',
+// Default Progress
+export const Default: Story = {
+  args: {
+    value: 50,
+    variant: 'primary',
+    size: 'md',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  value: 75,
-  variant: 'secondary',
-  size: 'md',
+export const Secondary: Story = {
+  args: {
+    value: 75,
+    variant: 'secondary',
+    size: 'md',
+  },
 };
 
-export const Success = Template.bind({});
-Success.args = {
-  value: 100,
-  variant: 'success',
-  size: 'md',
+export const Success: Story = {
+  args: {
+    value: 100,
+    variant: 'success',
+    size: 'md',
+  },
 };
 
-export const Warning = Template.bind({});
-Warning.args = {
-  value: 25,
-  variant: 'warning',
-  size: 'md',
+export const Warning: Story = {
+  args: {
+    value: 25,
+    variant: 'warning',
+    size: 'md',
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  value: 10,
-  variant: 'error',
-  size: 'md',
+export const Error: Story = {
+  args: {
+    value: 10,
+    variant: 'error',
+    size: 'md',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  value: 60,
-  variant: 'primary',
-  size: 'sm',
+export const Small: Story = {
+  args: {
+    value: 60,
+    variant: 'primary',
+    size: 'sm',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  value: 80,
-  variant: 'primary',
-  size: 'lg',
+export const Large: Story = {
+  args: {
+    value: 80,
+    variant: 'primary',
+    size: 'lg',
+  },
 };