@shohojdhara/atomix 0.3.15 → 0.4.0

package/src/components/Form/Checkbox.tsx

@@ -10,116 +10,124 @@ const CHECKBOX_CLASSES = {
   MIXED: 'c-checkbox--mixed',
 };
 
-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);
+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);
 
-  // Merge refs
-  useImperativeHandle(ref, () => localRef.current as HTMLInputElement);
+      // Merge refs
+      useImperativeHandle(ref, () => localRef.current as HTMLInputElement);
 
-  // Handle indeterminate
-  useEffect(() => {
-    if (localRef.current) {
-      localRef.current.indeterminate = Boolean(indeterminate);
-    }
-  }, [indeterminate]);
+      // 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;
-  }
+      // 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 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 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 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;
+      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 (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>;
-  }
+      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;
-}));
+      return content;
+    }
+  )
+);
 
 Checkbox.displayName = 'Checkbox';
 

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

@@ -211,19 +211,11 @@ export const CompleteForm: Story = {
         </FormGroup>
 
         <FormGroup label="Bio" htmlFor="bio">
-          <Textarea
-            id="bio"
-            name="bio"
-            placeholder="Tell us about yourself"
-            rows={4}
-          />
+          <Textarea id="bio" name="bio" placeholder="Tell us about yourself" rows={4} />
         </FormGroup>
 
         <FormGroup label="Subscribe to newsletter">
-          <Checkbox
-            name="newsletter"
-            label="Yes, I would like to receive updates"
-          />
+          <Checkbox name="newsletter" label="Yes, I would like to receive updates" />
         </FormGroup>
 
         <div className="u-flex u-gap-3 u-mt-4">

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

@@ -167,25 +167,14 @@ export const States: Story = {
 export const WithIcons: Story = {
   render: () => (
     <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
-      <Input
-        placeholder="Search..."
-        prefixIcon={<MagnifyingGlass size={18} />}
-      />
-      <Input
-        placeholder="Email address"
-        type="email"
-        prefixIcon={<Envelope size={18} />}
-      />
+      <Input placeholder="Search..." prefixIcon={<MagnifyingGlass size={18} />} />
+      <Input placeholder="Email address" type="email" prefixIcon={<Envelope size={18} />} />
       <Input
         placeholder="Username"
         prefixIcon={<User size={18} />}
         suffixIcon={<span style={{ color: 'green' }}>✓</span>}
       />
-      <Input
-        placeholder="Phone number"
-        type="tel"
-        prefixIcon={<Phone size={18} />}
-      />
+      <Input placeholder="Phone number" type="tel" prefixIcon={<Phone size={18} />} />
     </div>
   ),
 };
@@ -201,14 +190,14 @@ export const Clearable: Story = {
         <Input
           placeholder="Type to see clear button"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={e => setValue(e.target.value)}
           clearable
         />
         <Input
           placeholder="With prefix icon"
           prefixIcon={<MagnifyingGlass size={18} />}
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={e => setValue(e.target.value)}
           clearable
         />
       </div>
@@ -227,14 +216,14 @@ export const WithCounter: Story = {
         <Input
           placeholder="Type here (max 50 characters)"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={e => setValue(e.target.value)}
           maxLength={50}
           showCounter
         />
         <Input
           placeholder="With custom max count"
           value={value}
-          onChange={(e) => setValue(e.target.value)}
+          onChange={e => setValue(e.target.value)}
           maxCount={100}
           showCounter
         />
@@ -255,7 +244,7 @@ export const PasswordToggle: Story = {
           type="password"
           placeholder="Enter password"
           value={password}
-          onChange={(e) => setPassword(e.target.value)}
+          onChange={e => setPassword(e.target.value)}
           showPasswordToggle
         />
         <Input
@@ -263,7 +252,7 @@ export const PasswordToggle: Story = {
           placeholder="Password with prefix icon"
           prefixIcon={<Lock size={18} />}
           value={password}
-          onChange={(e) => setPassword(e.target.value)}
+          onChange={e => setPassword(e.target.value)}
           showPasswordToggle
         />
       </div>
@@ -287,22 +276,18 @@ export const WithMessages: Story = {
           type="email"
           placeholder="Email address"
           value={email}
-          onChange={(e) => setEmail(e.target.value)}
+          onChange={e => setEmail(e.target.value)}
           invalid={isInvalidEmail}
           errorMessage={isInvalidEmail ? 'Please enter a valid email address' : undefined}
-          helperText={!isInvalidEmail ? 'We\'ll never share your email' : undefined}
+          helperText={!isInvalidEmail ? "We'll never share your email" : undefined}
         />
         <Input
           placeholder="Username"
           value={username}
-          onChange={(e) => setUsername(e.target.value)}
+          onChange={e => setUsername(e.target.value)}
           helperText="Choose a unique username"
         />
-        <Input
-          placeholder="Required field"
-          required
-          helperText="This field is required"
-        />
+        <Input placeholder="Required field" required helperText="This field is required" />
       </div>
     );
   },
@@ -331,7 +316,8 @@ 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.',
+        story:
+          'A comprehensive example demonstrating multiple input features including icons, clearable functionality, password toggle, character counter, and helper text in a form-like layout.',
       },
     },
   },
@@ -343,13 +329,11 @@ export const Comprehensive: Story = {
     return (
       <div className="u-flex u-flex-column u-gap-4" style={{ width: '400px' }}>
         <div>
-          <label style={{ display: 'block', marginBottom: '0.5rem', color: 'white' }}>
-            Search
-          </label>
+          <label style={{ display: 'block', marginBottom: '0.5rem', color: 'white' }}>Search</label>
           <Input
             placeholder="Search products..."
             value={search}
-            onChange={(e) => setSearch(e.target.value)}
+            onChange={e => setSearch(e.target.value)}
             prefixIcon={<MagnifyingGlass size={18} />}
             clearable
             fullWidth
@@ -364,7 +348,7 @@ export const Comprehensive: Story = {
             type="password"
             placeholder="Enter your password"
             value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            onChange={e => setPassword(e.target.value)}
             prefixIcon={<Lock size={18} />}
             showPasswordToggle
             fullWidth
@@ -373,13 +357,11 @@ export const Comprehensive: Story = {
         </div>
 
         <div>
-          <label style={{ display: 'block', marginBottom: '0.5rem', color: 'white' }}>
-            Bio
-          </label>
+          <label style={{ display: 'block', marginBottom: '0.5rem', color: 'white' }}>Bio</label>
           <Input
             placeholder="Tell us about yourself"
             value={bio}
-            onChange={(e) => setBio(e.target.value)}
+            onChange={e => setBio(e.target.value)}
             maxLength={200}
             showCounter
             fullWidth
@@ -465,7 +447,8 @@ 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.',
+        story:
+          'Demonstrates glass morphism effects on inputs with different modes and configurations, showing how inputs look over colorful backgrounds.',
       },
     },
   },

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

@@ -4,56 +4,50 @@ import { Input } from './Input';
 
 // Mock AtomixGlass component
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
-    AtomixGlass: ({ children, ...props }: any) => (
-        <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
-            {children}
-        </div>
-    ),
+  AtomixGlass: ({ children, ...props }: any) => (
+    <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
 }));
 
 describe('Input Component', () => {
-    it('renders correctly', () => {
-        render(<Input placeholder="Test Input" />);
-        expect(screen.getByPlaceholderText('Test Input')).toBeInTheDocument();
-    });
+  it('renders correctly', () => {
+    render(<Input placeholder="Test Input" />);
+    expect(screen.getByPlaceholderText('Test Input')).toBeInTheDocument();
+  });
 
-    it('handles controlled value', () => {
-        render(<Input value="Controlled Value" onChange={() => { }} />);
-        const input = screen.getByDisplayValue('Controlled Value');
-        expect(input).toBeInTheDocument();
-        expect(input).toHaveValue('Controlled Value');
-    });
+  it('handles controlled value', () => {
+    render(<Input value="Controlled Value" onChange={() => {}} />);
+    const input = screen.getByDisplayValue('Controlled Value');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue('Controlled Value');
+  });
 
-    it('handles uncontrolled defaultValue', () => {
-        render(<Input defaultValue="Default Value" />);
-        const input = screen.getByDisplayValue('Default Value');
-        expect(input).toBeInTheDocument();
-        expect(input).toHaveValue('Default Value');
-    });
+  it('handles uncontrolled defaultValue', () => {
+    render(<Input defaultValue="Default Value" />);
+    const input = screen.getByDisplayValue('Default Value');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveValue('Default Value');
+  });
 
-    it('calls onChange when typing', () => {
-        const handleChange = vi.fn();
-        render(<Input onChange={handleChange} />);
-        const input = screen.getByRole('textbox');
-        fireEvent.change(input, { target: { value: 'New Value' } });
-        expect(handleChange).toHaveBeenCalledTimes(1);
-    });
+  it('calls onChange when typing', () => {
+    const handleChange = vi.fn();
+    render(<Input onChange={handleChange} />);
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'New Value' } });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
 
-    it('applies accessibility attributes', () => {
-        render(
-            <Input
-                aria-label="Accessible Label"
-                aria-describedby="description-id"
-                invalid
-            />
-        );
-        const input = screen.getByLabelText('Accessible Label');
-        expect(input).toHaveAttribute('aria-describedby', 'description-id');
-        expect(input).toHaveAttribute('aria-invalid', 'true');
-    });
+  it('applies accessibility attributes', () => {
+    render(<Input aria-label="Accessible Label" aria-describedby="description-id" invalid />);
+    const input = screen.getByLabelText('Accessible Label');
+    expect(input).toHaveAttribute('aria-describedby', 'description-id');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  });
 
-    it('renders as glass when enabled', () => {
-        render(<Input glass placeholder="Glass Input" />);
-        expect(screen.getByTestId('atomix-glass')).toBeInTheDocument();
-    });
+  it('renders as glass when enabled', () => {
+    render(<Input glass placeholder="Glass Input" />);
+    expect(screen.getByTestId('atomix-glass')).toBeInTheDocument();
+  });
 });

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

@@ -256,20 +256,14 @@ export const States: Story = {
           checked={selectedValue === 'checked'}
           onChange={() => setSelectedValue('checked')}
         />
-        <Radio
-          label="Disabled radio"
-          name="states"
-          value="disabled"
-          disabled
-          onChange={() => { }}
-        />
+        <Radio label="Disabled radio" name="states" value="disabled" disabled onChange={() => {}} />
         <Radio
           label="Disabled and checked radio"
           name="states"
           value="disabledChecked"
           disabled
           checked
-          onChange={() => { }}
+          onChange={() => {}}
         />
         <Radio
           label="Valid radio"
@@ -298,7 +292,7 @@ export const WithoutLabel: Story = {
     name: 'noLabel',
     value: 'noLabel',
     'aria-label': 'Radio button without visible label',
-    onChange: () => { },
+    onChange: () => {},
   },
 };
 
@@ -309,7 +303,7 @@ export const Glass: Story = {
     name: 'glass',
     value: 'glass',
     glass: true,
-    onChange: () => { },
+    onChange: () => {},
   },
   render: (args: any) => (
     <div
@@ -341,7 +335,7 @@ export const GlassCustom: Story = {
       aberrationIntensity: 0.8,
       cornerRadius: 12,
     } as any,
-    onChange: () => { },
+    onChange: () => {},
   },
   render: (args: any) => (
     <div
@@ -520,4 +514,4 @@ export const GlassStates: Story = {
       </div>
     );
   },
-};
+};