@shohojdhara/atomix 0.3.5 → 0.3.6

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: {

package/src/components/Modal/Modal.stories.tsx

@@ -1,16 +1,27 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import type { AtomixGlassProps } from '../../lib/types/components';
 import Modal from './Modal';
 
-const meta: Meta<typeof Modal> = {
+// Helper type for glass props in stories (without children requirement)
+type GlassProps = boolean | Omit<AtomixGlassProps, 'children'>;
+
+const meta = {
   title: 'Components/Modal',
   component: Modal,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Modal component displays content in a focused overlay dialog. It provides a way to present important information or actions that require user attention. Modals support various sizes, can include headers and footers, and support glass morphism effects.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     size: {
-      control: 'select',
+      control: { type: 'select' },
       options: ['sm', 'md', 'lg', 'xl'],
       description: 'Size of the modal',
       defaultValue: 'md',
@@ -35,10 +46,10 @@ const meta: Meta<typeof Modal> = {
       description: 'Enable glass morphism effect',
     },
   },
-};
+} satisfies Meta<typeof Modal>;
 
 export default meta;
-type Story = StoryObj<typeof Modal>;
+type Story = StoryObj<typeof meta>;
 
 /**
  * Basic modal example with a button to trigger opening.
@@ -377,7 +388,7 @@ export const GlassModalCustom: Story = {
               aberrationIntensity: 2,
               cornerRadius: 20,
               mode: 'polar',
-            } as any
+            } as GlassProps
           }
           footer={
             <>

package/src/components/Navigation/Menu/Menu.stories.tsx

@@ -6,7 +6,14 @@ const meta = {
   component: Menu,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Menu component provides a vertical list of menu items, typically used in dropdowns, sidebars, or context menus. It supports dividers, icons, and can be nested. Menus are ideal for organizing navigation options, actions, or any hierarchical list of choices.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     disabled: {
       control: 'boolean',

package/src/components/Navigation/Nav/Nav.stories.tsx

@@ -9,7 +9,14 @@ const meta = {
   component: Nav,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The Nav component provides a horizontal navigation bar for organizing links and menu items. It supports various alignment options, can include dropdowns, and provides a clean interface for site navigation. Nav components are essential for primary site navigation and work seamlessly with NavItem and NavDropdown components.',
+      },
+    },
   },
+  tags: ['autodocs'],
   argTypes: {
     alignment: {
       control: { type: 'select' },

package/src/components/Navigation/Navbar/Navbar.stories.tsx

@@ -71,6 +71,7 @@ The Navbar component provides a responsive navigation header with brand, navigat
       },
     },
   },
+  tags: ['autodocs'],
   argTypes: {
     position: {
       control: { type: 'select' },

package/src/components/Navigation/SideMenu/SideMenu.stories.tsx

@@ -138,7 +138,7 @@ The SideMenu component provides a collapsible navigation menu with title and men
 } satisfies Meta<typeof SideMenu>;
 
 export default meta;
-type Story = StoryObj<typeof SideMenu>;
+type Story = StoryObj<typeof meta>;
 
 // Default SideMenu
 export const Default: Story = {