@shohojdhara/atomix 0.3.14 → 0.4.0

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,54 @@ 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.',
+      },
+    },
+  },
 };
 
 /**
@@ -98,7 +226,8 @@ 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.',
+        story:
+          'Demonstrates tabs containing rich HTML content including headings, lists, and tables, showing the flexibility of the tabs component.',
       },
     },
   },
@@ -266,4 +395,4 @@ export const GlassCustom: Story = {
       </div>
     </div>
   ),
-};
+};

package/src/components/Tabs/Tabs.tsx

@@ -61,83 +61,85 @@ export interface TabsProps {
 /**
  * Tabs component for switching between different content panels
  */
-export const Tabs: React.FC<TabsProps> = memo(({
-  items,
-  activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
-  onTabChange,
-  className = '',
-  style,
-  glass,
-}) => {
-  const [currentTab, setCurrentTab] = useState(activeIndex);
-
-  // Handle tab change
-  const handleTabClick = (index: number) => {
-    setCurrentTab(index);
-    if (onTabChange) {
-      onTabChange(index);
-    }
-  };
-
-  const tabContent = (
-    <div className={`c-tabs js-atomix-tab ${className}`} style={style}>
-      <ul className="c-tabs__nav">
-        {items.map((item, index) => (
-          <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
-            <button
-              className={`c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
-              onClick={() => handleTabClick(index)}
+export const Tabs: React.FC<TabsProps> = memo(
+  ({
+    items,
+    activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
+    onTabChange,
+    className = '',
+    style,
+    glass,
+  }) => {
+    const [currentTab, setCurrentTab] = useState(activeIndex);
+
+    // Handle tab change
+    const handleTabClick = (index: number) => {
+      setCurrentTab(index);
+      if (onTabChange) {
+        onTabChange(index);
+      }
+    };
+
+    const tabContent = (
+      <div className={`c-tabs js-atomix-tab ${className}`} style={style}>
+        <ul className="c-tabs__nav">
+          {items.map((item, index) => (
+            <li className="c-tabs__nav-item" key={`tab-nav-${index}`}>
+              <button
+                className={`c-tabs__nav-btn ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
+                onClick={() => handleTabClick(index)}
+                data-tabindex={index}
+                role="tab"
+                aria-selected={index === currentTab}
+                aria-controls={`tab-panel-${index}`}
+              >
+                {item.label}
+              </button>
+            </li>
+          ))}
+        </ul>
+        <div className="c-tabs__panels">
+          {items.map((item, index) => (
+            <div
+              className={`c-tabs__panel ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
+              key={`tab-panel-${index}`}
               data-tabindex={index}
-              role="tab"
-              aria-selected={index === currentTab}
-              aria-controls={`tab-panel-${index}`}
+              id={`tab-panel-${index}`}
+              role="tabpanel"
+              aria-labelledby={`tab-nav-${index}`}
+              style={{
+                height: index === currentTab ? 'auto' : '0px',
+                opacity: index === currentTab ? 1 : 0,
+                overflow: 'hidden',
+                transition: 'height 0.3s ease, opacity 0.3s ease',
+              }}
             >
-              {item.label}
-            </button>
-          </li>
-        ))}
-      </ul>
-      <div className="c-tabs__panels">
-        {items.map((item, index) => (
-          <div
-            className={`c-tabs__panel ${index === currentTab ? TAB.CLASSES.ACTIVE : ''}`}
-            key={`tab-panel-${index}`}
-            data-tabindex={index}
-            id={`tab-panel-${index}`}
-            role="tabpanel"
-            aria-labelledby={`tab-nav-${index}`}
-            style={{
-              height: index === currentTab ? 'auto' : '0px',
-              opacity: index === currentTab ? 1 : 0,
-              overflow: 'hidden',
-              transition: 'height 0.3s ease, opacity 0.3s ease',
-            }}
-          >
-            <div className="c-tabs__panel-body">{item.content}</div>
-          </div>
-        ))}
+              <div className="c-tabs__panel-body">{item.content}</div>
+            </div>
+          ))}
+        </div>
       </div>
-    </div>
-  );
-
-  if (glass) {
-    // Default glass settings for tabs
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.5,
-      cornerRadius: 8,
-      mode: 'shader' as const,
-    };
-
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+    );
+
+    if (glass) {
+      // Default glass settings for tabs
+      const defaultGlassProps = {
+        displacementScale: 60,
+        blurAmount: 1,
+        saturation: 160,
+        aberrationIntensity: 0.5,
+        cornerRadius: 8,
+        mode: 'shader' as const,
+      };
+
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+      return <AtomixGlass {...glassProps}>{tabContent}</AtomixGlass>;
+    }
 
-    return <AtomixGlass {...glassProps}>{tabContent}</AtomixGlass>;
+    return tabContent;
   }
-
-  return tabContent;
-});
+);
 
 Tabs.displayName = 'Tabs';
 

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