@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Form/Checkbox.tsx

@@ -1,92 +1,136 @@
-import React, { memo } from 'react';
+import React, { memo, forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
 import { CheckboxProps } from '../../lib/types/components';
-import { useCheckbox } from '../../lib/composables/useCheckbox';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-/**
- * Checkbox - A component for checkbox inputs
- */
-export const Checkbox: React.FC<CheckboxProps> = memo(({
-  label,
-  checked = false,
-  onChange,
-  className = '',
-  style,
-  disabled = false,
-  required = false,
-  id,
-  name,
-  value,
-  invalid = false,
-  valid = false,
-  indeterminate = false,
-  'aria-label': ariaLabel,
-  'aria-describedby': ariaDescribedBy,
-  onClick,
-  glass,
-}) => {
-  const { generateCheckboxClass, checkboxRef } = useCheckbox({
-    indeterminate,
-    disabled,
-    invalid,
-    valid,
-  });
+const CHECKBOX_CLASSES = {
+  BASE: 'c-checkbox',
+  INVALID: 'is-error',
+  VALID: 'is-valid',
+  DISABLED: 'is-disabled',
+  MIXED: 'c-checkbox--mixed',
+};
 
-  const checkboxClass = generateCheckboxClass({
-    className: `${className} ${glass ? 'c-checkbox--glass' : ''}`.trim(),
-    disabled,
-    invalid,
-    valid,
-    indeterminate,
-  });
+export const Checkbox = React.memo(
+  forwardRef<HTMLInputElement, CheckboxProps>(
+    (
+      {
+        label,
+        checked,
+        onChange,
+        className = '',
+        style,
+        disabled = false,
+        required = false,
+        id,
+        name,
+        value,
+        invalid = false,
+        valid = false,
+        indeterminate = false,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        onClick,
+        glass,
+        ...props
+      },
+      ref
+    ) => {
+      // Local ref to handle indeterminate state
+      const localRef = useRef<HTMLInputElement>(null);
 
-  const checkboxContent = (
-    <div className={checkboxClass} style={style}>
-      <input
-        ref={checkboxRef}
-        type="checkbox"
-        className="c-checkbox__input"
-        checked={checked}
-        onChange={onChange}
-        onClick={onClick}
-        disabled={disabled}
-        required={required}
-        id={id}
-        name={name}
-        value={value}
-        aria-label={!label ? ariaLabel : undefined}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={invalid}
-      />
-      {label && (
-        <label className="c-checkbox__label" htmlFor={id}>
-          {label}
-        </label>
-      )}
-    </div>
-  );
+      // Merge refs
+      useImperativeHandle(ref, () => localRef.current as HTMLInputElement);
 
-  if (glass) {
-    // Default glass settings for checkboxes
-    const defaultGlassProps = {
-      displacementScale: 40,
-      blurAmount: 1,
-      saturation: 160,
-      aberrationIntensity: 0.3,
-      cornerRadius: 6,
-      mode: 'shader' as const,
-    };
+      // Handle indeterminate
+      useEffect(() => {
+        if (localRef.current) {
+          localRef.current.indeterminate = Boolean(indeterminate);
+        }
+      }, [indeterminate]);
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      // Generate classes
+      let validationClass = '';
+      if (invalid) {
+        validationClass = CHECKBOX_CLASSES.INVALID;
+      } else if (valid) {
+        validationClass = CHECKBOX_CLASSES.VALID;
+      }
 
-    return <AtomixGlass {...glassProps}>{checkboxContent}</AtomixGlass>;
-  }
+      const disabledClass = disabled ? CHECKBOX_CLASSES.DISABLED : '';
+      const indeterminateClass = indeterminate ? CHECKBOX_CLASSES.MIXED : '';
+      const glassClass = glass ? 'c-checkbox--glass' : '';
 
-  return checkboxContent;
-});
+      const checkboxClass =
+        `${CHECKBOX_CLASSES.BASE} ${validationClass} ${disabledClass} ${indeterminateClass} ${glassClass} ${className}`.trim();
 
-export type { CheckboxProps };
+      const inputElement = (
+        <input
+          ref={localRef}
+          type="checkbox"
+          className="c-checkbox__input"
+          checked={checked}
+          onChange={onChange}
+          onClick={onClick}
+          disabled={disabled}
+          required={required}
+          id={id}
+          name={name}
+          value={value}
+          aria-label={!label ? ariaLabel : undefined}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={invalid}
+          {...props}
+        />
+      );
+
+      let content: React.ReactNode;
+
+      if (id && label) {
+        content = (
+          <div className={checkboxClass} style={style}>
+            {inputElement}
+            <label className="c-checkbox__label" htmlFor={id}>
+              {label}
+            </label>
+          </div>
+        );
+      } else if (label) {
+        // Wrap input in label for accessibility when no ID is provided
+        content = (
+          <label className={checkboxClass} style={style}>
+            {inputElement}
+            <span className="c-checkbox__label">{label}</span>
+          </label>
+        );
+      } else {
+        // No label
+        content = (
+          <div className={checkboxClass} style={style}>
+            {inputElement}
+          </div>
+        );
+      }
+
+      if (glass) {
+        const defaultGlassProps = {
+          displacementScale: 40,
+          blurAmount: 1,
+          saturation: 160,
+          aberrationIntensity: 0.3,
+          cornerRadius: 6,
+          mode: 'shader' as const,
+        };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        return <AtomixGlass {...glassProps}>{content}</AtomixGlass>;
+      }
+
+      return content;
+    }
+  )
+);
 
 Checkbox.displayName = 'Checkbox';
 
+export type { CheckboxProps };
+
 export default Checkbox;

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import { useState } from 'react';
 import { Checkbox } from './Checkbox';
 import { Form } from './Form';
@@ -20,8 +21,69 @@ const meta = {
     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.',
+        component: `
+# Form
+
+## Overview
+
+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.
+
+## Features
+
+- Semantic HTML form wrapper
+- Form validation support
+- Submission handling
+- Disabled state
+- Auto-complete control
+- Method selection (GET/POST)
+- Accessible design
+- Responsive behavior
+
+## Accessibility
+
+- Screen reader: Form structure and labels announced properly
+- ARIA support: Proper roles and properties for form components
+- Keyboard support: Navigate and submit forms with keyboard
+- Focus management: Maintains focus on interactive elements
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Form onSubmit={handleSubmit}>
+  <FormGroup label="Name" htmlFor="name">
+    <Input id="name" placeholder="Enter your name" />
+  </FormGroup>
+  <button type="submit">Submit</button>
+</Form>
+\`\`\`
+
+### With Validation
+
+\`\`\`tsx
+<Form 
+  onSubmit={handleSubmit}
+  noValidate={false}
+  autoComplete="on"
+>
+  {/* Form fields */}
+</Form>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| disabled | boolean | false | Whether the form is disabled |
+| method | 'get' \\| 'post' | 'get' | Form submission method |
+| noValidate | boolean | false | Whether to disable browser validation |
+| autoComplete | string | 'on' | Form autocomplete setting |
+| className | string | - | Additional CSS class names |
+| onSubmit | (event: FormEvent) => void | - | Callback when form is submitted |
+        `,
       },
     },
   },
@@ -30,23 +92,47 @@ const meta = {
     disabled: {
       control: 'boolean',
       description: 'Whether the form is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     className: {
       control: 'text',
       description: 'Additional CSS class names',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
     },
     method: {
       control: { type: 'select' },
       options: ['get', 'post'],
       description: 'Form submission method',
+      table: {
+        type: { summary: '"get" | "post"' },
+        defaultValue: { summary: 'get' },
+      },
     },
     noValidate: {
       control: 'boolean',
       description: 'Whether to disable browser validation',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
     },
     autoComplete: {
       control: 'text',
       description: 'Form autocomplete setting',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'on' },
+      },
+    },
+    onSubmit: {
+      action: 'submitted',
+      description: 'Callback when form is submitted',
     },
   },
 } satisfies Meta<FormWithOptionalChildren>;
@@ -55,10 +141,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Basic form
-export const Basic: Story = {
+export const BasicUsage: Story = {
   args: { children: undefined },
   render: args => (
-    <Form {...args}>
+    <Form {...args} onSubmit={fn()}>
       <FormGroup label="Name" htmlFor="name">
         <Input id="name" placeholder="Enter your name" />
       </FormGroup>
@@ -70,6 +156,13 @@ export const Basic: Story = {
       </button>
     </Form>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic form with name and email fields.',
+      },
+    },
+  },
 };
 
 // Complete form with all input types
@@ -77,7 +170,7 @@ export const CompleteForm: Story = {
   args: { children: undefined },
   render: () => (
     <div style={{ width: '500px' }}>
-      <Form>
+      <Form onSubmit={fn()}>
         <h2 className="u-mb-4">Registration Form</h2>
 
         <FormGroup label="Full Name" htmlFor="fullName" required>
@@ -109,42 +202,40 @@ export const CompleteForm: Story = {
             id="country"
             name="country"
             options={[
+              { value: '', label: 'Select a country' },
               { value: 'us', label: 'United States' },
               { value: 'ca', label: 'Canada' },
-              { value: 'mx', label: 'Mexico' },
               { value: 'uk', label: 'United Kingdom' },
             ]}
-            placeholder="Select your country"
           />
         </FormGroup>
 
-        <FormGroup label="About yourself" htmlFor="bio">
+        <FormGroup label="Bio" htmlFor="bio">
           <Textarea id="bio" name="bio" placeholder="Tell us about yourself" rows={4} />
         </FormGroup>
 
-        <FormGroup>
-          <Checkbox id="terms" name="terms" label="I agree to the Terms and Conditions" required />
-        </FormGroup>
-
-        <FormGroup label="Preferred contact method">
-          <div className="u-flex u-flex-column u-gap-2">
-            <Radio id="contact-email" name="contactMethod" value="email" label="Email" checked />
-            <Radio id="contact-phone" name="contactMethod" value="phone" label="Phone" />
-            <Radio id="contact-mail" name="contactMethod" value="mail" label="Mail" />
-          </div>
+        <FormGroup label="Subscribe to newsletter">
+          <Checkbox name="newsletter" label="Yes, I would like to receive updates" />
         </FormGroup>
 
         <div className="u-flex u-gap-3 u-mt-4">
           <button type="submit" className="c-btn c-btn--primary">
             Register
           </button>
-          <button type="reset" className="c-btn c-btn--outline-secondary">
+          <button type="reset" className="c-btn c-btn--secondary">
             Reset
           </button>
         </div>
       </Form>
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete registration form with various input types.',
+      },
+    },
+  },
 };
 
 // Interactive form

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