@shohojdhara/atomix 0.3.14 → 0.4.0

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

package/src/components/Form/Select.tsx

@@ -7,204 +7,206 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Select - A component for dropdown selection
  */
-export const Select: React.FC<SelectProps> = memo(({
-  options = [],
-  value,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder = 'Select an option',
-  className = '',
-  style,
-  disabled = false,
-  required = false,
-  id,
-  name,
-  size = 'md',
-  invalid = false,
-  valid = false,
-  multiple = false,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  glass,
-}) => {
-  const { generateSelectClass } = useSelect({
-    size,
-    disabled,
-    invalid,
-    valid,
-  });
-
-  const selectClass = generateSelectClass({
-    className: `${className} ${glass ? 'c-select--glass' : ''}`.trim(),
-    size,
-    disabled,
-    invalid,
-    valid,
-  });
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedLabel, setSelectedLabel] = useState(placeholder);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const panelRef = useRef<HTMLDivElement>(null);
-  const bodyRef = useRef<HTMLDivElement>(null);
-  const nativeSelectRef = useRef<HTMLSelectElement>(null);
-
-  // Update selected label when value changes
-  useEffect(() => {
-    if (value) {
-      const selectedOption = options.find(opt => opt.value === value);
-      if (selectedOption) {
-        setSelectedLabel(selectedOption.label);
+export const Select: React.FC<SelectProps> = memo(
+  ({
+    options = [],
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    placeholder = 'Select an option',
+    className = '',
+    style,
+    disabled = false,
+    required = false,
+    id,
+    name,
+    size = 'md',
+    invalid = false,
+    valid = false,
+    multiple = false,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    glass,
+  }) => {
+    const { generateSelectClass } = useSelect({
+      size,
+      disabled,
+      invalid,
+      valid,
+    });
+
+    const selectClass = generateSelectClass({
+      className: `${className} ${glass ? 'c-select--glass' : ''}`.trim(),
+      size,
+      disabled,
+      invalid,
+      valid,
+    });
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedLabel, setSelectedLabel] = useState(placeholder);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const panelRef = useRef<HTMLDivElement>(null);
+    const bodyRef = useRef<HTMLDivElement>(null);
+    const nativeSelectRef = useRef<HTMLSelectElement>(null);
+
+    // Update selected label when value changes
+    useEffect(() => {
+      if (value) {
+        const selectedOption = options.find(opt => opt.value === value);
+        if (selectedOption) {
+          setSelectedLabel(selectedOption.label);
+        }
+      } else {
+        setSelectedLabel(placeholder);
       }
-    } else {
-      setSelectedLabel(placeholder);
-    }
-  }, [value, options, placeholder]);
-
-  // Handle click outside to close dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-        if (bodyRef.current) {
+    }, [value, options, placeholder]);
+
+    // Handle click outside to close dropdown
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+          setIsOpen(false);
+          if (bodyRef.current) {
+            bodyRef.current.style.height = '0px';
+          }
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, []);
+
+    // Toggle dropdown
+    const handleToggle = () => {
+      if (!disabled) {
+        if (!isOpen && bodyRef.current && panelRef.current) {
+          bodyRef.current.style.height = `${panelRef.current.clientHeight}px`;
+        } else if (bodyRef.current) {
           bodyRef.current.style.height = '0px';
         }
+        setIsOpen(!isOpen);
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  // Toggle dropdown
-  const handleToggle = () => {
-    if (!disabled) {
-      if (!isOpen && bodyRef.current && panelRef.current) {
-        bodyRef.current.style.height = `${panelRef.current.clientHeight}px`;
-      } else if (bodyRef.current) {
+    // Handle item selection
+    const handleItemClick = (option: { value: string; label: string }) => {
+      setSelectedLabel(option.label);
+      setIsOpen(false);
+      if (bodyRef.current) {
         bodyRef.current.style.height = '0px';
       }
-      setIsOpen(!isOpen);
-    }
-  };
-
-  // Handle item selection
-  const handleItemClick = (option: { value: string; label: string }) => {
-    setSelectedLabel(option.label);
-    setIsOpen(false);
-    if (bodyRef.current) {
-      bodyRef.current.style.height = '0px';
-    }
 
-    if (nativeSelectRef.current) {
-      nativeSelectRef.current.value = option.value;
-    }
+      if (nativeSelectRef.current) {
+        nativeSelectRef.current.value = option.value;
+      }
 
-    if (onChange) {
-      // Create a synthetic event
-      const event = {
-        target: {
-          name,
-          value: option.value,
-        },
-      } as React.ChangeEvent<HTMLSelectElement>;
-      onChange(event);
-    }
-  };
-
-  const selectContent = (
-    <div
-      className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
-      ref={dropdownRef}
-      style={style}
-      aria-expanded={isOpen}
-    >
-      {/* Native select for accessibility and form submission */}
-      <select
-        ref={nativeSelectRef}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        disabled={disabled}
-        required={required}
-        id={id}
-        name={name}
-        multiple={multiple}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={invalid}
-        style={{ display: 'none' }}
+      if (onChange) {
+        // Create a synthetic event
+        const event = {
+          target: {
+            name,
+            value: option.value,
+          },
+        } as React.ChangeEvent<HTMLSelectElement>;
+        onChange(event);
+      }
+    };
+
+    const selectContent = (
+      <div
+        className={`${selectClass} ${isOpen ? SELECT.CLASSES.IS_OPEN : ''}`}
+        ref={dropdownRef}
+        style={style}
+        aria-expanded={isOpen}
       >
-        {placeholder && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {options.map(option => (
-          <option key={option.value} value={option.value} disabled={option.disabled}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-
-      {/* Custom Select UI */}
-      <div className={SELECT.CLASSES.SELECTED} onClick={handleToggle} aria-disabled={disabled}>
-        {selectedLabel}
-      </div>
+        {/* Native select for accessibility and form submission */}
+        <select
+          ref={nativeSelectRef}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          disabled={disabled}
+          required={required}
+          id={id}
+          name={name}
+          multiple={multiple}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={invalid}
+          style={{ display: 'none' }}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map(option => (
+            <option key={option.value} value={option.value} disabled={option.disabled}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+
+        {/* Custom Select UI */}
+        <div className={SELECT.CLASSES.SELECTED} onClick={handleToggle} aria-disabled={disabled}>
+          {selectedLabel}
+        </div>
 
-      <i className={`${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`} />
-
-      <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
-        <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
-          <ul className={SELECT.CLASSES.SELECT_ITEMS}>
-            {options.map((option, index) => (
-              <li
-                key={option.value}
-                className={SELECT.CLASSES.SELECT_ITEM}
-                data-value={option.value}
-                onClick={() => !option.disabled && handleItemClick(option)}
-              >
-                <label htmlFor={`SelectItem${index}`} className="c-checkbox">
-                  <input
-                    type="checkbox"
-                    id={`SelectItem${index}`}
-                    className="c-checkbox__input c-select__item-input"
-                    checked={value === option.value}
-                    readOnly
-                    disabled={option.disabled}
-                  />
-                  <div className="c-select__item-label">{option.label}</div>
-                </label>
-              </li>
-            ))}
-          </ul>
+        <i className={`${SELECT.CLASSES.ICON_CARET} ${SELECT.CLASSES.TOGGLE_ICON}`} />
+
+        <div className={SELECT.CLASSES.SELECT_BODY} ref={bodyRef} style={{ height: 0 }}>
+          <div className={SELECT.CLASSES.SELECT_PANEL} ref={panelRef}>
+            <ul className={SELECT.CLASSES.SELECT_ITEMS}>
+              {options.map((option, index) => (
+                <li
+                  key={option.value}
+                  className={SELECT.CLASSES.SELECT_ITEM}
+                  data-value={option.value}
+                  onClick={() => !option.disabled && handleItemClick(option)}
+                >
+                  <label htmlFor={`SelectItem${index}`} className="c-checkbox">
+                    <input
+                      type="checkbox"
+                      id={`SelectItem${index}`}
+                      className="c-checkbox__input c-select__item-input"
+                      checked={value === option.value}
+                      readOnly
+                      disabled={option.disabled}
+                    />
+                    <div className="c-select__item-label">{option.label}</div>
+                  </label>
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
-  );
-
-  if (glass) {
-    // Default glass settings for select components
-    const defaultGlassProps = {
-      displacementScale: 60,
-      blurAmount: 1,
-      saturation: 180,
-      aberrationIntensity: 0.2,
-      cornerRadius: 12,
-      mode: 'shader' as const,
-    };
-
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+    );
+
+    if (glass) {
+      // Default glass settings for select components
+      const defaultGlassProps = {
+        displacementScale: 60,
+        blurAmount: 1,
+        saturation: 180,
+        aberrationIntensity: 0.2,
+        cornerRadius: 12,
+        mode: 'shader' as const,
+      };
+
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+      return <AtomixGlass {...glassProps}>{selectContent}</AtomixGlass>;
+    }
 
-    return <AtomixGlass {...glassProps}>{selectContent}</AtomixGlass>;
+    return selectContent;
   }
-
-  return selectContent;
-});
+);
 
 export type { SelectProps };