@shohojdhara/atomix 0.3.5 → 0.3.7

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,37 +1,46 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import DatePicker from './DatePicker';
 import { DateRange } from './types';
 import { formatDateRange } from './utils';
+import { SIZES } from '../../lib/constants/components';
 
-const meta: Meta<typeof DatePicker> = {
+const meta = {
   title: 'Components/DatePicker',
   component: DatePicker,
   parameters: {
     layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The DatePicker component provides a user-friendly interface for selecting dates or date ranges. It supports single date selection, date range selection, custom date formatting, and various display options. DatePickers are essential for forms requiring date input and provide calendar-based selection with keyboard navigation.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
-    value: { control: 'date' },
-    startDate: { control: 'date' },
-    endDate: { control: 'date' },
+    value: { control: 'date', description: 'Selected date value' },
+    startDate: { control: 'date', description: 'Start date for range selection' },
+    endDate: { control: 'date', description: 'End date for range selection' },
     selectionMode: {
       control: { type: 'radio' },
       options: ['single', 'range'],
       description: 'Selection mode - single date or date range',
     },
-    minDate: { control: 'date' },
-    maxDate: { control: 'date' },
-    format: { control: 'text' },
-    placeholder: { control: 'text' },
-    disabled: { control: 'boolean' },
-    readOnly: { control: 'boolean' },
-    clearable: { control: 'boolean' },
-    showTodayButton: { control: 'boolean' },
-    showWeekNumbers: { control: 'boolean' },
-    inline: { control: 'boolean' },
+    minDate: { control: 'date', description: 'Minimum selectable date' },
+    maxDate: { control: 'date', description: 'Maximum selectable date' },
+    format: { control: 'text', description: 'Date format string' },
+    placeholder: { control: 'text', description: 'Placeholder text' },
+    disabled: { control: 'boolean', description: 'Whether the date picker is disabled' },
+    readOnly: { control: 'boolean', description: 'Whether the date picker is read-only' },
+    clearable: { control: 'boolean', description: 'Whether the date can be cleared' },
+    showTodayButton: { control: 'boolean', description: 'Whether to show a "Today" button' },
+    showWeekNumbers: { control: 'boolean', description: 'Whether to show week numbers' },
+    inline: { control: 'boolean', description: 'Whether to display inline (always visible)' },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
+      description: 'Size of the date picker',
     },
     placement: {
       control: { type: 'select' },
@@ -51,11 +60,10 @@ const meta: Meta<typeof DatePicker> = {
       description: 'Apply glass morphism effect to the calendar dropdown',
     },
   },
-};
+} satisfies Meta<typeof DatePicker>;
 
 export default meta;
-
-type Story = StoryObj<typeof DatePicker>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,10 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import { ThemeColor } from '../../lib/types/components';
 import { Icon } from '../Icon';
 import { Dropdown, DropdownDivider, DropdownHeader, DropdownItem } from './index';
+import { THEME_COLORS } from '../../lib/constants/components';
 
-const meta: Meta<typeof Dropdown> = {
+const meta = {
   title: 'Components/Dropdown',
   component: Dropdown,
   parameters: {
@@ -12,13 +13,14 @@ const meta: Meta<typeof Dropdown> = {
     docs: {
       description: {
         component:
-          'Dropdown component with a toggleable menu. The dropdown menu appears on click or hover, depending on the trigger prop.',
+          'The Dropdown component provides a toggleable menu that appears relative to a trigger element. It supports multiple placement options, click or hover triggers, and can include dividers, headers, and icons. Dropdowns are ideal for navigation menus, action menus, or any context where options need to be revealed on demand.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     placement: {
-      control: 'select',
+      control: { type: 'select' },
       options: [
         'bottom-start',
         'bottom-end',
@@ -32,23 +34,13 @@ const meta: Meta<typeof Dropdown> = {
       description: 'The placement of the dropdown menu relative to the trigger element',
     },
     trigger: {
-      control: 'radio',
+      control: { type: 'radio' },
       options: ['click', 'hover'],
       description: 'How the dropdown is triggered - by click or hover',
     },
     variant: {
-      control: 'select',
-      options: [
-        'primary',
-        'secondary',
-        'tertiary',
-        'success',
-        'info',
-        'warning',
-        'error',
-        'light',
-        'dark',
-      ],
+      control: { type: 'select' },
+      options: THEME_COLORS,
       description: 'The color variant of the dropdown',
     },
     minWidth: {
@@ -72,10 +64,10 @@ const meta: Meta<typeof Dropdown> = {
       description: 'Enable glass morphism effect',
     },
   },
-};
+} satisfies Meta<typeof Dropdown>;
 
 export default meta;
-type Story = StoryObj<typeof Dropdown>;
+type Story = StoryObj<typeof meta>;
 
 /**
  * Interactive dropdown component that can be used in Storybook

package/src/components/EdgePanel/EdgePanel.stories.tsx

@@ -17,6 +17,7 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     position: {
       control: { type: 'select' },

package/src/components/Footer/Footer.stories.tsx

@@ -3,8 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Footer } from './Footer';
 import { FooterSection } from './FooterSection';
 import { FooterLink } from './FooterLink';
+import { THEME_COLORS, SIZES } from '../../lib/constants/components';
 
-const meta: Meta<typeof Footer> = {
+const meta = {
   title: 'Components/Footer',
   component: Footer,
   parameters: {
@@ -12,10 +13,11 @@ const meta: Meta<typeof Footer> = {
     docs: {
       description: {
         component:
-          'A modern, comprehensive footer component with enhanced visual effects, accessibility features, responsive design, and multiple layout variants. Features include design token integration, improved hover effects, modern gradients, and comprehensive accessibility support following Atomix design patterns.',
+          'The Footer component provides a comprehensive footer section for websites with multiple layout variants, sections, links, and optional features like newsletter signup and back-to-top buttons. Footers support various color variants, sizes, and can be sticky. Essential for site navigation, branding, and additional information display.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     layout: {
       control: 'select',
@@ -24,12 +26,12 @@ const meta: Meta<typeof Footer> = {
     },
     variant: {
       control: 'select',
-      options: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'light', 'dark'],
+      options: THEME_COLORS,
       description: 'Color variant',
     },
     size: {
       control: 'select',
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       description: 'Size variant',
     },
     showNewsletter: {
@@ -49,10 +51,10 @@ const meta: Meta<typeof Footer> = {
       description: 'Whether footer should be sticky',
     },
   },
-};
+} satisfies Meta<typeof Footer>;
 
 export default meta;
-type Story = StoryObj<typeof Footer>;
+type Story = StoryObj<typeof meta>;
 
 // Sample social links
 const sampleSocialLinks = [

package/src/components/Footer/FooterLink.tsx

@@ -49,8 +49,15 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
 
     if (LinkComponent) {
       const Component = LinkComponent as React.ComponentType<any>;
+      // Only pass href if the link is not disabled and href exists
+      const componentProps = {
+        ref,
+        ...(href && !disabled ? { to: href } : {}),
+        ...linkProps,
+      };
+      
       return (
-        <Component ref={ref} to={href} {...linkProps}>
+        <Component {...componentProps}>
           {icon && <span className="c-footer__link-icon">{icon}</span>}
           <span className="c-footer__link-text">{children}</span>
           {external && <span className="c-footer__link-external">↗</span>}
@@ -70,4 +77,4 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
 
 FooterLink.displayName = 'FooterLink';
 
-export default FooterLink;
+export default FooterLink;

package/src/components/Form/Checkbox.stories.tsx

@@ -6,7 +6,14 @@ const meta = {
   component: Checkbox,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Checkbox component allows users to select one or more options from a set. It supports checked, unchecked, and indeterminate states, and can be used in forms or as standalone controls. Checkboxes provide clear visual feedback and support keyboard navigation.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     label: {
       control: 'text',

package/src/components/Form/Form.stories.tsx

@@ -18,7 +18,14 @@ const meta = {
   component: Form,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Form component provides a semantic HTML form wrapper with enhanced functionality. It supports form validation, submission handling, and can be disabled as a whole. Forms work seamlessly with FormGroup and all form input components to create complete, accessible form experiences.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     disabled: {
       control: 'boolean',

package/src/components/Form/FormGroup.stories.tsx

@@ -5,13 +5,21 @@ import { Input } from './Input';
 import { Radio } from './Radio';
 import { Select } from './Select';
 import { Textarea } from './Textarea';
+import { SIZES } from '../../lib/constants/components';
 
 const meta = {
   title: 'Components/Form/FormGroup',
   component: FormGroup,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The FormGroup component provides a structured wrapper for form fields, including labels, inputs, helper text, and error messages. It ensures proper accessibility, consistent spacing, and validation state display. FormGroups are essential for creating well-organized and accessible forms.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     label: {
       control: 'text',
@@ -39,7 +47,7 @@ const meta = {
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       description: 'Size variant',
     },
   },

package/src/components/Form/Input.stories.tsx

@@ -2,28 +2,39 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Input } from './Input';
 import { MagnifyingGlass, Envelope, Lock, User, Phone, Calendar } from '@phosphor-icons/react';
+import { SIZES, THEME_COLORS } from '../../lib/constants/components';
 
 const meta = {
   title: 'Components/Form/Input',
   component: Input,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Input component provides a text input field for user data entry. It supports various input types, sizes, validation states, and can include icons and clear buttons. Inputs are essential form elements for collecting user information and can be customized to match your design system.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     type: {
       control: { type: 'select' },
       options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
       description: 'Input type',
+      defaultValue: 'text',
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       description: 'Size of the input',
+      defaultValue: 'md',
     },
     variant: {
       control: { type: 'select' },
-      options: ['primary', 'success', 'error', 'warning', 'info'],
+      options: THEME_COLORS,
       description: 'Color variant of the input',
+      defaultValue: 'secondary',
     },
     disabled: {
       control: 'boolean',
@@ -67,7 +78,9 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Basic text input
+/**
+ * Basic text input with placeholder.
+ */
 export const Basic: Story = {
   args: {
     placeholder: 'Enter text here',
@@ -75,7 +88,9 @@ export const Basic: Story = {
   },
 };
 
-// Input sizes
+/**
+ * Showcase of all input sizes (small, medium, large).
+ */
 export const Sizes: Story = {
   render: () => (
     <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
@@ -86,7 +101,9 @@ export const Sizes: Story = {
   ),
 };
 
-// Input types
+/**
+ * Showcase of different input types (text, email, password, number, search, tel, url).
+ */
 export const Types: Story = {
   render: () => (
     <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
@@ -101,7 +118,9 @@ export const Types: Story = {
   ),
 };
 
-// Input variants
+/**
+ * Showcase of input color variants (primary, success, error, warning, info).
+ */
 export const Variants: Story = {
   render: () => (
     <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
@@ -114,7 +133,9 @@ export const Variants: Story = {
   ),
 };
 
-// States
+/**
+ * Showcase of input states (default, disabled, valid, invalid).
+ */
 export const States: Story = {
   render: () => (
     <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
@@ -126,7 +147,9 @@ export const States: Story = {
   ),
 };
 
-// Prefix and Suffix Icons
+/**
+ * Input with prefix and suffix icons for enhanced UX.
+ */
 export const WithIcons: Story = {
   render: () => (
     <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
@@ -153,7 +176,9 @@ export const WithIcons: Story = {
   ),
 };
 
-// Clearable Input
+/**
+ * Input with clear button that appears when there's a value.
+ */
 export const Clearable: Story = {
   render: () => {
     const [value, setValue] = React.useState('');
@@ -177,7 +202,9 @@ export const Clearable: Story = {
   },
 };
 
-// Character Counter
+/**
+ * Input with character counter showing remaining characters.
+ */
 export const WithCounter: Story = {
   render: () => {
     const [value, setValue] = React.useState('');
@@ -202,7 +229,9 @@ export const WithCounter: Story = {
   },
 };
 
-// Password Toggle
+/**
+ * Password input with visibility toggle button.
+ */
 export const PasswordToggle: Story = {
   render: () => {
     const [password, setPassword] = React.useState('');
@@ -228,7 +257,9 @@ export const PasswordToggle: Story = {
   },
 };
 
-// Error Messages and Helper Text
+/**
+ * Input with error messages and helper text for validation feedback.
+ */
 export const WithMessages: Story = {
   render: () => {
     const [email, setEmail] = React.useState('');
@@ -263,7 +294,9 @@ export const WithMessages: Story = {
   },
 };
 
-// Full Width
+/**
+ * Full-width input that takes the full width of its container.
+ */
 export const FullWidth: Story = {
   render: () => (
     <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '100%', maxWidth: '500px' }}>
@@ -277,8 +310,17 @@ export const FullWidth: Story = {
   ),
 };
 
-// Comprehensive Example
+/**
+ * Comprehensive example showcasing multiple input features together.
+ */
 export const Comprehensive: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'A comprehensive example demonstrating multiple input features including icons, clearable functionality, password toggle, character counter, and helper text in a form-like layout.',
+      },
+    },
+  },
   render: () => {
     const [search, setSearch] = React.useState('');
     const [password, setPassword] = React.useState('');
@@ -335,7 +377,9 @@ export const Comprehensive: Story = {
   },
 };
 
-// Glass Effect
+/**
+ * Input with glass morphism effect enabled.
+ */
 export const Glass: Story = {
   args: {
     placeholder: 'Glass Input',
@@ -400,8 +444,17 @@ export const GlassVariants: Story = {
   ),
 };
 
-// Glass Showcase
+/**
+ * Comprehensive showcase of glass morphism effects on inputs.
+ */
 export const GlassShowcase: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates glass morphism effects on inputs with different modes and configurations, showing how inputs look over colorful backgrounds.',
+      },
+    },
+  },
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
       {/* Basic Glass */}

package/src/components/Form/Radio.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Radio } from './Radio';
 
@@ -6,7 +7,14 @@ const meta = {
   component: Radio,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Radio component allows users to select a single option from a group of mutually exclusive options. Radio buttons are typically used in groups where only one selection is allowed. They provide clear visual feedback and support keyboard navigation.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     label: {
       control: 'text',
@@ -134,7 +142,7 @@ export const GlassCustom: Story = {
       saturation: 200,
       aberrationIntensity: 0.8,
       cornerRadius: 12,
-    },
+    } as any,
   },
   render: (args: any) => (
     <div

package/src/components/Form/Select.stories.tsx

@@ -1,17 +1,25 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { Select } from './Select';
+import { SIZES } from '../../lib/constants/components';
 
 const meta = {
   title: 'Components/Form/Select',
   component: Select,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Select component provides a dropdown menu for selecting one or more options from a list. It supports single and multiple selection modes, validation states, and can be customized with different sizes. Select components are essential for forms requiring user choice from predefined options.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       description: 'Size of the select',
     },
     disabled: {

package/src/components/Form/Textarea.stories.tsx

@@ -1,12 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Textarea } from './Textarea';
+import { SIZES, THEME_COLORS } from '../../lib/constants/components';
 
 const meta = {
   title: 'Components/Form/Textarea',
   component: Textarea,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Textarea component provides a multi-line text input field for longer content. It supports various sizes, validation states, and can be customized with different variants. Textareas are ideal for comments, descriptions, or any content requiring multiple lines of input.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     value: {
       control: 'text',
@@ -26,12 +34,12 @@ const meta = {
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: SIZES,
       description: 'Size of the textarea',
     },
     variant: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
+      options: THEME_COLORS,
       description: 'Color variant of the textarea',
     },
     disabled: {

package/src/components/Hero/Hero.stories.tsx

@@ -27,7 +27,14 @@ const meta = {
   component: Hero,
   parameters: {
     layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'The Hero component creates prominent banner sections typically used at the top of pages. It provides a flexible layout for titles, subtitles, text content, call-to-action buttons, and images. Heroes are ideal for landing pages, marketing sections, or any area requiring prominent visual presentation.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     title: {
       control: 'text',

package/src/components/List/List.stories.tsx

@@ -8,7 +8,14 @@ const meta = {
   component: List,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The List component provides a flexible way to display ordered or unordered lists of items. It supports multiple style variants including default, dashed, numbered, and text styles. Lists can be used for navigation, content organization, or any scenario requiring structured item display.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     variant: {
       control: { type: 'select' },

package/src/components/Messages/Messages.stories.tsx

@@ -1,9 +1,9 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { MessageItem } from '../../lib/types/components';
 import { Messages } from './Messages';
 
-const meta: Meta<typeof Messages> = {
+const meta = {
   title: 'Components/Messages',
   component: Messages,
   parameters: {
@@ -11,10 +11,11 @@ const meta: Meta<typeof Messages> = {
     docs: {
       description: {
         component:
-          'Messages component for displaying chat conversations with support for text messages, images, and file attachments.',
+          'The Messages component provides a complete chat interface for displaying conversations. It supports text messages, images, file attachments, timestamps, and user avatars. Messages are ideal for chat applications, support systems, or any scenario requiring real-time or historical message display.',
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     messages: { control: 'object' },
     width: { control: 'text' },
@@ -23,13 +24,13 @@ const meta: Meta<typeof Messages> = {
     otherName: { control: 'text' },
     otherAvatar: { control: 'text' },
     selfAvatar: { control: 'text' },
-    placeholder: { control: 'text' },
-    disabled: { control: 'boolean' },
+    placeholder: { control: 'text', description: 'Placeholder text for the input field' },
+    disabled: { control: 'boolean', description: 'Whether the messages component is disabled' },
   },
-};
+} satisfies Meta<typeof Messages>;
 
 export default meta;
-type Story = StoryObj<typeof Messages>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {