@shohojdhara/atomix 0.3.14 → 0.3.15

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Checkbox } from './Checkbox';
 import { FormGroup } from './FormGroup';
 import { Input } from './Input';
@@ -14,8 +15,73 @@ const meta = {
     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.',
+        component: `
+# FormGroup
+
+## Overview
+
+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.
+
+## Features
+
+- Structured form field wrapper
+- Label support
+- Helper text display
+- Validation states (valid/invalid)
+- Required field indicator
+- Consistent spacing
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Screen reader: Labels and form controls announced properly
+- ARIA support: Proper associations between labels and controls
+- Keyboard support: Navigate form with keyboard
+- Focus management: Maintains focus on interactive elements
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<FormGroup 
+  label="Field Label" 
+  htmlFor="fieldId"
+  helperText="Helper text"
+>
+  <Input id="fieldId" placeholder="Placeholder" />
+</FormGroup>
+\`\`\`
+
+### With Validation
+
+\`\`\`tsx
+<FormGroup 
+  label="Field Label" 
+  htmlFor="fieldId"
+  required={true}
+  valid={isValid}
+>
+  <Input id="fieldId" placeholder="Placeholder" />
+</FormGroup>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label | string | - | Label for the form group |
+| helperText | string | - | Helper text displayed below the input |
+| htmlFor | string | - | ID of the form control this label is for |
+| required | boolean | false | Whether the field is required |
+| invalid | boolean | false | Whether the field is invalid |
+| valid | boolean | false | Whether the field is valid |
+| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Size variant |
+| children | ReactNode | - | Form control element to wrap |
+        `,
       },
     },
   },
@@ -24,31 +90,67 @@ const meta = {
     label: {
       control: 'text',
       description: 'Label for the form group',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     helperText: {
       control: 'text',
       description: 'Helper text displayed below the input',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     htmlFor: {
       control: 'text',
       description: 'ID of the form control this label is for',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     required: {
       control: 'boolean',
       description: 'Whether the field is required',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     invalid: {
       control: 'boolean',
       description: 'Whether the field is invalid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     valid: {
       control: 'boolean',
       description: 'Whether the field is valid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     size: {
       control: { type: 'select' },
       options: SIZES,
       description: 'Size variant',
+      table: {
+        type: { summary: '"sm" | "md" | "lg"' },
+        defaultValue: { summary: 'md' },
+      },
+    },
+    children: {
+      control: 'object',
+      description: 'Form control element to wrap',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: '-' },
+      },
     },
   },
 } satisfies Meta<typeof FormGroup>;
@@ -57,7 +159,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Basic form group with text
-export const Basic: Story = {
+export const BasicUsage: Story = {
   args: {
     label: 'Username',
     htmlFor: 'username',
@@ -65,6 +167,13 @@ export const Basic: Story = {
     required: true,
     children: <Input id="username" placeholder="Enter username" />,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic form group with label, helper text and required indicator.',
+      },
+    },
+  },
 };
 
 // Required field
@@ -76,6 +185,13 @@ export const Required: Story = {
     helperText: 'We will never share your email',
     children: <Input id="email" type="email" placeholder="name@example.com" required />,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Form group with required field indicator.',
+      },
+    },
+  },
 };
 
 // With validation states
@@ -99,10 +215,17 @@ export const ValidationStates: Story = {
         helperText="Password must be at least 8 characters"
         invalid
       >
-        <Input id="password" type="password" value="1234" invalid />
+        <Input id="password" type="password" value="123" invalid />
       </FormGroup>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Form group with different validation states.',
+      },
+    },
+  },
 };
 
 // Different form control types

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { Radio } from './Radio';
 
 const meta = {
@@ -9,8 +10,79 @@ const meta = {
     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.',
+        component: `
+# Radio
+
+## Overview
+
+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.
+
+## Features
+
+- Single selection from mutually exclusive options
+- Label support
+- Disabled state
+- Validation states (valid/invalid)
+- Glass morphism effect
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Navigate and toggle with keyboard
+- Screen reader: State and label announced properly
+- ARIA support: Proper roles and properties for radio components
+- Focus management: Visible focus indicators maintained
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Radio 
+  label="Option label" 
+  name="groupName"
+  value="optionValue"
+  checked={isSelected}
+  onChange={setSelected}
+/>
+\`\`\`
+
+### Radio Group
+
+\`\`\`tsx
+<Radio 
+  label="Option 1" 
+  name="group" 
+  value="opt1"
+  checked={selected === 'opt1'}
+  onChange={() => setSelected('opt1')}
+/>
+<Radio 
+  label="Option 2" 
+  name="group" 
+  value="opt2"
+  checked={selected === 'opt2'}
+  onChange={() => setSelected('opt2')}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label | string | - | Radio button label text |
+| checked | boolean | false | Whether the radio button is checked |
+| disabled | boolean | false | Whether the radio button is disabled |
+| invalid | boolean | false | Whether the radio button is invalid |
+| valid | boolean | false | Whether the radio button is valid |
+| glass | boolean | false | Enable glass morphism effect |
+| name | string | - | Name of the radio button group |
+| value | string | - | Value of the radio button |
+| onChange | (value: string) => void | - | Callback when radio button state changes |
+        `,
       },
     },
   },
@@ -19,26 +91,70 @@ const meta = {
     label: {
       control: 'text',
       description: 'Radio button label text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     checked: {
       control: 'boolean',
       description: 'Whether the radio button is checked',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     disabled: {
       control: 'boolean',
       description: 'Whether the radio button is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     invalid: {
       control: 'boolean',
       description: 'Whether the radio button is invalid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     valid: {
       control: 'boolean',
       description: 'Whether the radio button is valid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     glass: {
       control: 'boolean',
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'Name of the radio button group',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    value: {
+      control: 'text',
+      description: 'Value of the radio button',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback when radio button state changes',
     },
   },
 } satisfies Meta<typeof Radio>;
@@ -47,12 +163,18 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Basic radio button
-export const Basic: Story = {
+export const BasicUsage: Story = {
   args: {
     label: 'Option 1',
     name: 'option',
     value: 'option1',
-    onChange: () => { },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic radio button with label.',
+      },
+    },
   },
 };
 
@@ -63,7 +185,13 @@ export const Checked: Story = {
     name: 'option',
     value: 'option1',
     checked: true,
-    onChange: () => { },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checked radio button state.',
+      },
+    },
   },
 };
 
@@ -98,6 +226,13 @@ export const RadioGroup: Story = {
       </div>
     );
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Group of radio buttons demonstrating mutual exclusivity.',
+      },
+    },
+  },
 };
 
 // Radio button states

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { useState } from 'react';
 import { Select } from './Select';
 import { SIZES } from '../../lib/constants/components';
@@ -10,41 +11,155 @@ const meta = {
     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.',
+        component: `
+# Select
+
+## Overview
+
+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.
+
+## Features
+
+- Single and multiple selection modes
+- Various size options
+- Validation states (valid/invalid)
+- Placeholder support
+- Disabled state
+- Glass morphism effect
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Keyboard support: Navigate and select options with keyboard
+- Screen reader: Options and selection announced properly
+- ARIA support: Proper roles and properties for select components
+- Focus management: Visible focus indicators maintained
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Select 
+  options={[
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+  ]}
+  placeholder="Select an option"
+  onChange={handleChange}
+/>
+\`\`\`
+
+### Multiple Selection
+
+\`\`\`tsx
+<Select 
+  options={options}
+  multiple={true}
+  placeholder="Select options"
+  onChange={handleChange}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| options | Option[] | [] | Array of options to select from |
+| size | 'sm' \\| 'md' \\| 'lg' | 'md' | Size of the select |
+| disabled | boolean | false | Whether the select is disabled |
+| invalid | boolean | false | Whether the select is invalid |
+| valid | boolean | false | Whether the select is valid |
+| placeholder | string | - | Placeholder text |
+| multiple | boolean | false | Whether multiple options can be selected |
+| glass | boolean | false | Enable glass morphism effect |
+| value | string \\| string[] | - | Selected value(s) |
+| onChange | (event: ChangeEvent) => void | - | Callback when selection changes |
+        `,
       },
     },
   },
   tags: ['autodocs'],
   argTypes: {
+    options: {
+      control: 'object',
+      description: 'Array of options to select from',
+      table: {
+        type: { summary: 'Option[]' },
+        defaultValue: { summary: '[]' },
+      },
+    },
     size: {
       control: { type: 'select' },
       options: SIZES,
       description: 'Size of the select',
+      table: {
+        type: { summary: '"sm" | "md" | "lg"' },
+        defaultValue: { summary: 'md' },
+      },
     },
     disabled: {
       control: 'boolean',
       description: 'Whether the select is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     invalid: {
       control: 'boolean',
       description: 'Whether the select is invalid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     valid: {
       control: 'boolean',
       description: 'Whether the select is valid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     placeholder: {
       control: 'text',
       description: 'Placeholder text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     multiple: {
       control: 'boolean',
       description: 'Whether multiple options can be selected',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     glass: {
       control: 'boolean',
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    value: {
+      control: 'text',
+      description: 'Selected value(s)',
+      table: {
+        type: { summary: 'string | string[]' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback when selection changes',
     },
   },
 } satisfies Meta<typeof Select>;
@@ -64,11 +179,18 @@ const countries = [
 ];
 
 // Basic select
-export const Basic: Story = {
+export const BasicUsage: Story = {
   args: {
     options: countries,
     placeholder: 'Select a country',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic select component with placeholder.',
+      },
+    },
+  },
 };
 
 // With selected value
@@ -78,6 +200,13 @@ export const WithValue: Story = {
     value: 'ca',
     placeholder: 'Select a country',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Select component with a pre-selected value.',
+      },
+    },
+  },
 };
 
 // Interactive select
@@ -100,14 +229,17 @@ export const Interactive: Story = {
           value={selectedValue}
           onChange={handleChange}
         />
-        {selectedValue && (
-          <div className="u-mt-3">
-            Selected value: <strong>{selectedValue}</strong>
-          </div>
-        )}
+        <div>Selected: {selectedValue || 'Nothing selected'}</div>
       </div>
     );
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive select component with state management.',
+      },
+    },
+  },
 };
 
 // Select sizes