@shohojdhara/atomix 0.3.4 → 0.3.6

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback, createContext, useContext, useEffect } from 'react';
+import React, { useRef, useState, useCallback, createContext, useContext, useEffect, memo } from 'react';
 import { DROPDOWN } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import type {
@@ -27,7 +27,7 @@ const DropdownContext = createContext<DropdownContextType>({
 /**
  * DropdownItem component for menu items
  */
-export const DropdownItem: React.FC<DropdownItemProps> = ({
+export const DropdownItem: React.FC<DropdownItemProps> = memo(({
   children,
   href,
   active = false,
@@ -111,26 +111,26 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
       </button>
     </li>
   );
-};
+});
 
 /**
  * DropdownDivider component for separating groups of items
  */
-export const DropdownDivider: React.FC<DropdownDividerProps> = ({ className = '' }) => {
+export const DropdownDivider: React.FC<DropdownDividerProps> = memo(({ className = '' }) => {
   return <li className={`c-dropdown__divider ${className}`} role="separator" />;
-};
+});
 
 /**
  * DropdownHeader component for section headers
  */
-export const DropdownHeader: React.FC<DropdownHeaderProps> = ({ children, className = '' }) => {
+export const DropdownHeader: React.FC<DropdownHeaderProps> = memo(({ children, className = '' }) => {
   return <li className={`c-dropdown__header ${className}`}>{children}</li>;
-};
+});
 
 /**
  * Dropdown component for creating dropdown menus
  */
-export const Dropdown: React.FC<DropdownProps> = ({
+export const Dropdown: React.FC<DropdownProps> = memo(({
   children,
   menu,
   placement = 'bottom-start',
@@ -370,10 +370,13 @@ export const Dropdown: React.FC<DropdownProps> = ({
       </div>
     </div>
   );
-};
+});
 
 export type { DropdownProps, DropdownItemProps, DropdownDividerProps, DropdownHeaderProps };
 
 Dropdown.displayName = 'Dropdown';
+DropdownItem.displayName = 'DropdownItem';
+DropdownDivider.displayName = 'DropdownDivider';
+DropdownHeader.displayName = 'DropdownHeader';
 
 export default Dropdown;

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/Footer/FooterSection.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
-import { FooterSectionProps } from '@/lib/types/components';
-import { GridCol } from '@/layouts';
-import { useFooter } from '@/lib/composables/useFooter';
+import { FooterSectionProps } from '../../lib/types/components';
+import { GridCol } from '../../layouts';
+import { useFooter } from '../../lib/composables/useFooter';
 
 /**
  * FooterSection component provides a section within the footer for organizing links and content.

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { CheckboxProps } from '../../lib/types/components';
 import { useCheckbox } from '../../lib/composables/useCheckbox';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -6,7 +6,7 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Checkbox - A component for checkbox inputs
  */
-export const Checkbox: React.FC<CheckboxProps> = ({
+export const Checkbox: React.FC<CheckboxProps> = memo(({
   label,
   checked = false,
   onChange,
@@ -81,7 +81,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   }
 
   return checkboxContent;
-};
+});
 
 export type { CheckboxProps };
 

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

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { InputProps } from '../../lib/types/components';
 import { useInput } from '../../lib/composables/useInput';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -6,7 +6,8 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Input - A component for text input fields
  */
-export const Input = forwardRef<HTMLInputElement, InputProps>(
+export const Input = memo(
+  forwardRef<HTMLInputElement, InputProps>(
   (
     {
       type = 'text',
@@ -109,6 +110,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
     return inputElement;
   }
+  )
 );
 
 Input.displayName = 'Input';

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