@shohojdhara/atomix 0.3.14 → 0.3.15

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

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
 import { Checkbox } from './Checkbox';
 
+// Mock event handlers
+const mockOnChange = fn();
+
 const meta = {
   title: 'Components/Form/Checkbox',
   component: Checkbox,
@@ -8,8 +13,66 @@ const meta = {
     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.',
+        component: `
+# Checkbox
+
+## Overview
+
+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.
+
+## Features
+
+- Checked, unchecked, and indeterminate states
+- 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 checkbox components
+- Focus management: Visible focus indicators maintained
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<Checkbox 
+  label="Option label" 
+  checked={isChecked}
+  onChange={setChecked}
+/>
+\`\`\`
+
+### Indeterminate State
+
+\`\`\`tsx
+<Checkbox 
+  label="Option label" 
+  indeterminate={true}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| label | ReactNode | - | Checkbox label text or element |
+| checked | boolean | false | Whether the checkbox is checked |
+| disabled | boolean | false | Whether the checkbox is disabled |
+| invalid | boolean | false | Whether the checkbox is invalid |
+| valid | boolean | false | Whether the checkbox is valid |
+| indeterminate | boolean | false | Whether the checkbox is in indeterminate state |
+| glass | boolean \| AtomixGlassProps | false | Enable glass morphism effect |
+| onChange | (event: ChangeEvent<HTMLInputElement>) => void | - | Callback when checkbox state changes |
+        `,
       },
     },
   },
@@ -17,31 +80,63 @@ const meta = {
   argTypes: {
     label: {
       control: 'text',
-      description: 'Checkbox label text',
+      description: 'Checkbox label text or element',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: '-' },
+      },
     },
     checked: {
       control: 'boolean',
       description: 'Whether the checkbox is checked',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     disabled: {
       control: 'boolean',
       description: 'Whether the checkbox is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     invalid: {
       control: 'boolean',
       description: 'Whether the checkbox is invalid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     valid: {
       control: 'boolean',
       description: 'Whether the checkbox is valid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     indeterminate: {
       control: 'boolean',
       description: 'Whether the checkbox is in indeterminate state',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     glass: {
-      control: 'boolean',
+      control: { type: 'boolean' },
       description: 'Enable glass morphism effect',
+      table: {
+        type: { summary: 'boolean | AtomixGlassProps' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback when checkbox state changes',
     },
   },
 } satisfies Meta<typeof Checkbox>;
@@ -50,9 +145,17 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Basic checkbox
-export const Basic: Story = {
+export const BasicUsage: Story = {
   args: {
     label: 'Accept terms and conditions',
+    onChange: mockOnChange,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic checkbox with label.',
+      },
+    },
   },
 };
 
@@ -61,11 +164,19 @@ export const Checked: Story = {
   args: {
     label: 'Accept terms and conditions',
     checked: true,
+    onChange: mockOnChange,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checked checkbox state.',
+      },
+    },
   },
 };
 
 // Checkbox states
-export const States: Story = {
+export const AllStates: Story = {
   render: (args: any) => (
     <div className="u-flex u-flex-column u-gap-3">
       <Checkbox label="Default checkbox" />
@@ -77,12 +188,27 @@ export const States: Story = {
       <Checkbox label="Indeterminate checkbox" indeterminate />
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox in all available states.',
+      },
+    },
+  },
 };
 
 // Without label
 export const WithoutLabel: Story = {
   args: {
     'aria-label': 'Checkbox without visible label',
+    onChange: mockOnChange,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox without visible label, using aria-label.',
+      },
+    },
   },
 };
 
@@ -91,6 +217,7 @@ export const Glass: Story = {
   args: {
     label: 'Glass Checkbox',
     glass: true,
+    onChange: mockOnChange,
   },
   render: (args: any) => (
     <div
@@ -107,6 +234,13 @@ export const Glass: Story = {
       <Checkbox {...args} />
     </div>
   ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkbox with glass morphism effect.',
+      },
+    },
+  },
 };
 
 // Glass with custom settings

package/src/components/Form/Checkbox.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { Checkbox } from './Checkbox';
+import React from 'react';
+
+expect.extend(toHaveNoViolations);
+
+// Mock AtomixGlass
+vi.mock('../AtomixGlass/AtomixGlass', () => ({
+    AtomixGlass: ({ children }: any) => <div>{children}</div>,
+}));
+
+describe('Checkbox Component', () => {
+    it('renders correctly with label', () => {
+        render(<Checkbox label="Accept Terms" />);
+        // In current implementation, if no ID is provided, htmlFor is undefined, so label is not associated.
+        // screen.getByLabelText might fail or might not find the input.
+        // Let's see.
+        expect(screen.getByText('Accept Terms')).toBeInTheDocument();
+    });
+
+    it('associates label with input when ID is provided', () => {
+        render(<Checkbox label="Subscribe" id="subscribe-check" />);
+        expect(screen.getByLabelText('Subscribe')).toBeInTheDocument();
+    });
+
+    it('associates label with input WITHOUT ID', () => {
+        // This tests my proposed improvement: wrapping input in label or auto-ID
+        render(<Checkbox label="No ID Checkbox" />);
+        // If not associated, this throws
+        expect(screen.getByLabelText('No ID Checkbox')).toBeInTheDocument();
+    });
+
+    it('handles checked state', () => {
+        const handleChange = vi.fn();
+        render(<Checkbox checked onChange={handleChange} label="Checked" id="checked-id" />);
+        const input = screen.getByLabelText('Checked');
+        expect(input).toBeChecked();
+
+        fireEvent.click(input);
+        expect(handleChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('forwards ref', () => {
+        const ref = React.createRef<HTMLInputElement>();
+        render(<Checkbox ref={ref} label="Ref Checkbox" />);
+        expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    });
+
+    it('handles indeterminate state', () => {
+        // This might need manual DOM check as indeterminate is a property, not attribute
+        const { getByRole } = render(<Checkbox indeterminate label="Indeterminate" id="indet" />);
+        const input = getByRole('checkbox') as HTMLInputElement;
+        expect(input.indeterminate).toBe(true);
+    });
+
+    it('should have no accessibility violations', async () => {
+        const { container } = render(<Checkbox label="Accessible Checkbox" id="a11y-check" />);
+        const results = await axe(container);
+        expect(results).toHaveNoViolations();
+    });
+});

package/src/components/Form/Checkbox.tsx

@@ -1,14 +1,18 @@
-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(({
+const CHECKBOX_CLASSES = {
+  BASE: 'c-checkbox',
+  INVALID: 'is-error',
+  VALID: 'is-valid',
+  DISABLED: 'is-disabled',
+  MIXED: 'c-checkbox--mixed',
+};
+
+export const Checkbox = React.memo(forwardRef<HTMLInputElement, CheckboxProps>(({
   label,
-  checked = false,
+  checked,
   onChange,
   className = '',
   style,
@@ -24,50 +28,84 @@ export const Checkbox: React.FC<CheckboxProps> = memo(({
   'aria-describedby': ariaDescribedBy,
   onClick,
   glass,
-}) => {
-  const { generateCheckboxClass, checkboxRef } = useCheckbox({
-    indeterminate,
-    disabled,
-    invalid,
-    valid,
-  });
+  ...props
+}, ref) => {
+  // Local ref to handle indeterminate state
+  const localRef = useRef<HTMLInputElement>(null);
+
+  // Merge refs
+  useImperativeHandle(ref, () => localRef.current as HTMLInputElement);
+
+  // Handle indeterminate
+  useEffect(() => {
+    if (localRef.current) {
+      localRef.current.indeterminate = Boolean(indeterminate);
+    }
+  }, [indeterminate]);
+
+  // Generate classes
+  let validationClass = '';
+  if (invalid) {
+    validationClass = CHECKBOX_CLASSES.INVALID;
+  } else if (valid) {
+    validationClass = CHECKBOX_CLASSES.VALID;
+  }
+
+  const disabledClass = disabled ? CHECKBOX_CLASSES.DISABLED : '';
+  const indeterminateClass = indeterminate ? CHECKBOX_CLASSES.MIXED : '';
+  const glassClass = glass ? 'c-checkbox--glass' : '';
+
+  const checkboxClass = `${CHECKBOX_CLASSES.BASE} ${validationClass} ${disabledClass} ${indeterminateClass} ${glassClass} ${className}`.trim();
+
+  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}
+    />
+  );
 
-  const checkboxClass = generateCheckboxClass({
-    className: `${className} ${glass ? 'c-checkbox--glass' : ''}`.trim(),
-    disabled,
-    invalid,
-    valid,
-    indeterminate,
-  });
+  let content: React.ReactNode;
 
-  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 && (
+  if (id && label) {
+    content = (
+      <div className={checkboxClass} style={style}>
+        {inputElement}
         <label className="c-checkbox__label" htmlFor={id}>
           {label}
         </label>
-      )}
-    </div>
-  );
+      </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) {
-    // Default glass settings for checkboxes
     const defaultGlassProps = {
       displacementScale: 40,
       blurAmount: 1,
@@ -76,17 +114,15 @@ export const Checkbox: React.FC<CheckboxProps> = memo(({
       cornerRadius: 6,
       mode: 'shader' as const,
     };
-
     const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-    return <AtomixGlass {...glassProps}>{checkboxContent}</AtomixGlass>;
+    return <AtomixGlass {...glassProps}>{content}</AtomixGlass>;
   }
 
-  return checkboxContent;
-});
-
-export type { CheckboxProps };
+  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,48 @@ 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">
-          <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 label="Bio" htmlFor="bio">
+          <Textarea
+            id="bio"
+            name="bio"
+            placeholder="Tell us about yourself"
+            rows={4}
+          />
         </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