@shohojdhara/atomix 0.3.4 → 0.3.6

package/src/components/Steps/Steps.stories.tsx

@@ -1,19 +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 { Steps } from './Steps';
-import type { StepsProps } from './Steps';
 
-export default {
+const meta = {
   title: 'Components/Steps',
   component: Steps,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The Steps component displays a sequence of steps in a process or workflow. It provides visual progress indication and can be displayed horizontally or vertically. Steps are ideal for multi-step forms, onboarding flows, or any process that requires clear progress visualization.',
+      },
+    },
+  },
+  tags: ['autodocs'],
   argTypes: {
     activeIndex: {
       control: { type: 'number' },
+      description: 'The index of the currently active step',
       defaultValue: 1,
     },
     vertical: {
       control: { type: 'boolean' },
+      description: 'Whether to display steps vertically',
       defaultValue: false,
     },
     glass: {
@@ -21,103 +31,124 @@ export default {
       description: 'Enable glass morphism effect',
     },
   },
-} as Meta<typeof Steps>;
+} satisfies Meta<typeof Steps>;
 
-const Template: StoryFn<typeof Steps> = args => (
-  <div style={{ padding: '30px' }}>
-    <Steps {...args} />
-  </div>
-);
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 // Default horizontal steps
-export const Default = Template.bind({});
-Default.args = {
-  items: [
-    { number: 1, text: 'Step 1' },
-    { number: 2, text: 'Step 2' },
-    { number: 3, text: 'Step 3' },
-    { number: 4, text: 'Step 4' },
-    { number: 5, text: 'Step 5' },
-  ],
-  activeIndex: 1,
-  vertical: false,
+export const Default: Story = {
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Steps {...args} />
+    </div>
+  ),
+  args: {
+    items: [
+      { number: 1, text: 'Step 1' },
+      { number: 2, text: 'Step 2' },
+      { number: 3, text: 'Step 3' },
+      { number: 4, text: 'Step 4' },
+      { number: 5, text: 'Step 5' },
+    ],
+    activeIndex: 1,
+    vertical: false,
+  },
 };
 
 // Vertical steps
-export const Vertical = Template.bind({});
-Vertical.args = {
-  items: [
-    { number: 1, text: 'Step 1' },
-    { number: 2, text: 'Step 2' },
-    { number: 3, text: 'Step 3' },
-    { number: 4, text: 'Step 4' },
-    { number: 5, text: 'Step 5' },
-  ],
-  activeIndex: 1,
-  vertical: true,
+export const Vertical: Story = {
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Steps {...args} />
+    </div>
+  ),
+  args: {
+    items: [
+      { number: 1, text: 'Step 1' },
+      { number: 2, text: 'Step 2' },
+      { number: 3, text: 'Step 3' },
+      { number: 4, text: 'Step 4' },
+      { number: 5, text: 'Step 5' },
+    ],
+    activeIndex: 1,
+    vertical: true,
+  },
 };
 
 // Steps with custom content
-export const WithCustomContent = Template.bind({});
-WithCustomContent.args = {
-  items: [
-    {
-      number: 1,
-      text: 'Registration',
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Create your account</p>,
-    },
-    {
-      number: 2,
-      text: 'Personal Info',
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Tell us about yourself</p>,
-    },
-    {
-      number: 3,
-      text: 'Preferences',
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Select your preferences</p>,
-    },
-    {
-      number: 4,
-      text: 'Payment',
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Add payment information</p>,
-    },
-    {
-      number: 5,
-      text: 'Confirmation',
-      content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Complete your signup</p>,
-    },
-  ],
-  activeIndex: 1,
-  vertical: false,
+export const WithCustomContent: Story = {
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Steps {...args} />
+    </div>
+  ),
+  args: {
+    items: [
+      {
+        number: 1,
+        text: 'Registration',
+        content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Create your account</p>,
+      },
+      {
+        number: 2,
+        text: 'Personal Info',
+        content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Tell us about yourself</p>,
+      },
+      {
+        number: 3,
+        text: 'Preferences',
+        content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Select your preferences</p>,
+      },
+      {
+        number: 4,
+        text: 'Payment',
+        content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Add payment information</p>,
+      },
+      {
+        number: 5,
+        text: 'Confirmation',
+        content: <p style={{ marginTop: '10px', fontSize: '0.85em' }}>Complete your signup</p>,
+      },
+    ],
+    activeIndex: 1,
+    vertical: false,
+  },
 };
 
 // Steps with custom icons instead of numbers
-export const WithIcons = Template.bind({});
-WithIcons.args = {
-  items: [
-    {
-      number: <i className="icon-lux-user" style={{ fontSize: '16px' }}></i>,
-      text: 'Account',
-    },
-    {
-      number: <i className="icon-lux-settings" style={{ fontSize: '16px' }}></i>,
-      text: 'Settings',
-    },
-    {
-      number: <i className="icon-lux-calendar" style={{ fontSize: '16px' }}></i>,
-      text: 'Schedule',
-    },
-    {
-      number: <i className="icon-lux-card" style={{ fontSize: '16px' }}></i>,
-      text: 'Payment',
-    },
-    {
-      number: <i className="icon-lux-check" style={{ fontSize: '16px' }}></i>,
-      text: 'Complete',
-    },
-  ],
-  activeIndex: 1,
-  vertical: false,
+export const WithIcons: Story = {
+  render: args => (
+    <div style={{ padding: '30px' }}>
+      <Steps {...args} />
+    </div>
+  ),
+  args: {
+    items: [
+      {
+        number: <i className="icon-lux-user" style={{ fontSize: '16px' }}></i>,
+        text: 'Account',
+      },
+      {
+        number: <i className="icon-lux-settings" style={{ fontSize: '16px' }}></i>,
+        text: 'Settings',
+      },
+      {
+        number: <i className="icon-lux-calendar" style={{ fontSize: '16px' }}></i>,
+        text: 'Schedule',
+      },
+      {
+        number: <i className="icon-lux-card" style={{ fontSize: '16px' }}></i>,
+        text: 'Payment',
+      },
+      {
+        number: <i className="icon-lux-check" style={{ fontSize: '16px' }}></i>,
+        text: 'Complete',
+      },
+    ],
+    activeIndex: 1,
+    vertical: false,
+  },
 };
 
 // Interactive steps with buttons for navigation
@@ -155,13 +186,16 @@ const InteractiveSteps: React.FC = () => {
   );
 };
 
-export const Interactive: StoryFn<typeof Steps> = () => (
-  <div style={{ padding: '30px' }}>
-    <InteractiveSteps />
-  </div>
-);
+export const Interactive: Story = {
+  args: {} as any,
+  render: () => (
+    <div style={{ padding: '30px' }}>
+      <InteractiveSteps />
+    </div>
+  ),
+};
 
-export const Glass = {
+export const Glass: Story = {
   args: {
     items: [
       { number: 1, text: 'Glass Step 1' },
@@ -193,7 +227,7 @@ export const Glass = {
   ),
 };
 
-export const GlassVertical = {
+export const GlassVertical: Story = {
   args: {
     items: [
       { number: 1, text: 'Glass Step 1' },
@@ -228,7 +262,7 @@ export const GlassVertical = {
   ),
 };
 
-export const GlassCustom = {
+export const GlassCustom: Story = {
   args: {
     items: [
       { number: 1, text: 'Custom Glass Step 1' },
@@ -245,7 +279,7 @@ export const GlassCustom = {
       saturation: 200,
       aberrationIntensity: 0.8,
       cornerRadius: 12,
-    },
+    } as any,
   },
   render: (args: any) => (
     <div

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/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactNode } from 'react';
+import React, { useState, ReactNode, memo } from 'react';
 import { TAB } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
@@ -61,7 +61,7 @@ export interface TabsProps {
 /**
  * Tabs component for switching between different content panels
  */
-export const Tabs: React.FC<TabsProps> = ({
+export const Tabs: React.FC<TabsProps> = memo(({
   items,
   activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
   onTabChange,
@@ -137,7 +137,7 @@ export const Tabs: React.FC<TabsProps> = ({
   }
 
   return tabContent;
-};
+});
 
 Tabs.displayName = 'Tabs';