@shohojdhara/atomix 0.3.12 → 0.3.14

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

@@ -72,6 +72,10 @@ const meta = {
       control: 'boolean',
       description: 'Input takes full width',
     },
+    defaultValue: {
+      control: 'text',
+      description: 'Initial value for uncontrolled input',
+    },
   },
 } satisfies Meta<typeof Input>;
 
@@ -88,12 +92,22 @@ export const Basic: Story = {
   },
 };
 
+/**
+ * Input using defaultValue for uncontrolled component pattern.
+ */
+export const Uncontrolled: Story = {
+  args: {
+    defaultValue: 'Initial value',
+    placeholder: 'Type something...',
+  },
+};
+
 /**
  * Showcase of all input sizes (small, medium, large).
  */
 export const Sizes: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Input size="sm" placeholder="Small input" />
       <Input size="md" placeholder="Medium input (default)" />
       <Input size="lg" placeholder="Large input" />
@@ -106,7 +120,7 @@ export const Sizes: Story = {
  */
 export const Types: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Input type="text" placeholder="Text input" />
       <Input type="email" placeholder="Email input" />
       <Input type="password" placeholder="Password input" />
@@ -123,7 +137,7 @@ export const Types: Story = {
  */
 export const Variants: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Input variant="primary" placeholder="Primary input" />
       <Input variant="success" placeholder="Success input" />
       <Input variant="error" placeholder="Error input" />
@@ -138,7 +152,7 @@ export const Variants: Story = {
  */
 export const States: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Input placeholder="Default input" />
       <Input placeholder="Disabled input" disabled />
       <Input placeholder="Valid input" valid />
@@ -152,7 +166,7 @@ export const States: Story = {
  */
 export const WithIcons: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
       <Input
         placeholder="Search..."
         prefixIcon={<MagnifyingGlass size={18} />}
@@ -183,7 +197,7 @@ export const Clearable: Story = {
   render: () => {
     const [value, setValue] = React.useState('');
     return (
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+      <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
         <Input
           placeholder="Type to see clear button"
           value={value}
@@ -209,7 +223,7 @@ export const WithCounter: Story = {
   render: () => {
     const [value, setValue] = React.useState('');
     return (
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+      <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
         <Input
           placeholder="Type here (max 50 characters)"
           value={value}
@@ -236,7 +250,7 @@ export const PasswordToggle: Story = {
   render: () => {
     const [password, setPassword] = React.useState('');
     return (
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+      <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
         <Input
           type="password"
           placeholder="Enter password"
@@ -268,7 +282,7 @@ export const WithMessages: Story = {
     const isInvalidEmail = email.length > 0 && !isValidEmail;
 
     return (
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+      <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
         <Input
           type="email"
           placeholder="Email address"
@@ -299,7 +313,7 @@ export const WithMessages: Story = {
  */
 export const FullWidth: Story = {
   render: () => (
-    <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '100%', maxWidth: '500px' }}>
+    <div className="u-flex u-flex-column u-gap-3" style={{ width: '100%', maxWidth: '500px' }}>
       <Input placeholder="Full width input" fullWidth />
       <Input
         placeholder="Full width with icon"
@@ -327,7 +341,7 @@ export const Comprehensive: Story = {
     const [bio, setBio] = React.useState('');
 
     return (
-      <div className="u-d-flex u-flex-column u-gap-4" style={{ width: '400px' }}>
+      <div className="u-flex u-flex-column u-gap-4" style={{ width: '400px' }}>
         <div>
           <label style={{ display: 'block', marginBottom: '0.5rem', color: 'white' }}>
             Search
@@ -423,7 +437,7 @@ export const GlassVariants: Story = {
       <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
         Glass Input Variants
       </h3>
-      <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+      <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
         <Input placeholder="Small Glass" size="sm" glass />
         <Input placeholder="Medium Glass" size="md" glass />
         <Input placeholder="Large Glass" size="lg" glass />
@@ -465,8 +479,6 @@ export const GlassShowcase: Story = {
           backgroundPosition: 'center',
           padding: '2rem',
           borderRadius: '12px',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
           minHeight: '200px',
           display: 'flex',
           alignItems: 'center',
@@ -476,7 +488,7 @@ export const GlassShowcase: Story = {
         <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>
           Glass Input on Background
         </h3>
-        <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+        <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
           <Input placeholder="Enter your name" glass />
           <Input type="email" placeholder="Enter your email" glass />
           <Input type="password" placeholder="Enter password" glass />
@@ -498,7 +510,7 @@ export const GlassShowcase: Story = {
         }}
       >
         <h3 style={{ color: 'white', marginBottom: '1rem', fontSize: '1.2rem' }}>Glass Modes</h3>
-        <div className="u-d-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
+        <div className="u-flex u-flex-column u-gap-3" style={{ width: '300px' }}>
           <Input placeholder="Standard Mode" glass={{ mode: 'standard' }} />
           <Input placeholder="Polar Mode" glass={{ mode: 'polar' }} />
           <Input placeholder="Prominent Mode" glass={{ mode: 'prominent' }} />

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

@@ -0,0 +1,59 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+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>
+    ),
+}));
+
+describe('Input Component', () => {
+    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 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('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();
+    });
+});

package/src/components/Form/Input.tsx

@@ -8,108 +8,110 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
  */
 export const Input = memo(
   forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      type = 'text',
-      value,
-      onChange,
-      onBlur,
-      onFocus,
-      placeholder,
-      className = '',
-      style,
-      disabled = false,
-      required = false,
-      readOnly = false,
-      id,
-      name,
-      autoComplete,
-      autoFocus = false,
-      size = 'md',
-      variant,
-      invalid = false,
-      valid = false,
-      maxLength,
-      minLength,
-      pattern,
-      min,
-      max,
-      step,
-      ariaLabel,
-      ariaDescribedBy,
-      glass,
-    },
-    ref
-  ) => {
-    const { generateInputClass } = useInput({
-      size,
-      variant,
-      disabled,
-      invalid,
-      valid,
-    });
+    (
+      {
+        type = 'text',
+        value,
+        defaultValue,
+        onChange,
+        onBlur,
+        onFocus,
+        placeholder,
+        className = '',
+        style,
+        disabled = false,
+        required = false,
+        readOnly = false,
+        id,
+        name,
+        autoComplete,
+        autoFocus = false,
+        size = 'md',
+        variant,
+        invalid = false,
+        valid = false,
+        maxLength,
+        minLength,
+        pattern,
+        min,
+        max,
+        step,
+        'aria-label': ariaLabel,
+        'aria-describedby': ariaDescribedBy,
+        glass,
+      },
+      ref
+    ) => {
+      const { generateInputClass } = useInput({
+        size,
+        variant,
+        disabled,
+        invalid,
+        valid,
+      });
 
-    const inputClass = generateInputClass({
-      className: `${className} ${glass ? 'c-input--glass' : ''}`.trim(),
-      size,
-      variant,
-      disabled,
-      invalid,
-      valid,
-      type,
-    });
+      const inputClass = generateInputClass({
+        className: `${className} ${glass ? 'c-input--glass' : ''}`.trim(),
+        size,
+        variant,
+        disabled,
+        invalid,
+        valid,
+        type,
+      });
 
-    // Custom styles for glass effect
-    const glassStyles = glass ? {} : {};
+      // Custom styles for glass effect
+      const glassStyles = glass ? {} : {};
 
-    const inputElement = (
-      <input
-        ref={ref}
-        type={type}
-        className={inputClass}
-        value={value}
-        onChange={onChange}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        placeholder={placeholder}
-        disabled={disabled}
-        required={required}
-        readOnly={readOnly}
-        id={id}
-        name={name}
-        autoComplete={autoComplete}
-        autoFocus={autoFocus}
-        maxLength={maxLength}
-        minLength={minLength}
-        pattern={pattern}
-        min={min}
-        max={max}
-        step={step}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={invalid}
-        style={glass ? { ...glassStyles, ...style } : style}
-      />
-    );
+      const inputElement = (
+        <input
+          ref={ref}
+          type={type}
+          className={inputClass}
+          value={value}
+          defaultValue={defaultValue}
+          onChange={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          readOnly={readOnly}
+          id={id}
+          name={name}
+          autoComplete={autoComplete}
+          autoFocus={autoFocus}
+          maxLength={maxLength}
+          minLength={minLength}
+          pattern={pattern}
+          min={min}
+          max={max}
+          step={step}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={invalid}
+          style={glass ? { ...glassStyles, ...style } : style}
+        />
+      );
 
-    if (glass) {
-      // Default glass settings for inputs
-      const defaultGlassProps = {
-        displacementScale: 60,
-        blurAmount: 1,
-        saturation: 180,
-        aberrationIntensity: 0.2,
-        cornerRadius: 12,
-        mode: 'shader' as const,
-      };
+      if (glass) {
+        // Default glass settings for inputs
+        const defaultGlassProps = {
+          displacementScale: 60,
+          blurAmount: 1,
+          saturation: 180,
+          aberrationIntensity: 0.2,
+          cornerRadius: 12,
+          mode: 'shader' as const,
+        };
 
-      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-      return <AtomixGlass {...glassProps}>{inputElement}</AtomixGlass>;
-    }
+        return <AtomixGlass {...glassProps}>{inputElement}</AtomixGlass>;
+      }
 
-    return inputElement;
-  }
+      return inputElement;
+    }
   )
 );