@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

package/src/ui/atoms/Info/Info.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Info from './Info';
+
+describe('Info', () => {
+  it('renders info message', () => {
+    render(<Info>This is an info message</Info>);
+    expect(screen.getByText('This is an info message')).toBeInTheDocument();
+  });
+
+  it('has role="alert"', () => {
+    render(<Info>Info message</Info>);
+    const info = screen.getByRole('alert');
+    expect(info).toBeInTheDocument();
+  });
+
+  it('applies info variant classes by default', () => {
+    const { container } = render(<Info>Info message</Info>);
+    const info = container.querySelector('div[role="alert"]');
+    expect(info).toHaveClass('bg-blue-100', 'text-blue-800', 'border-blue-500');
+  });
+
+  it('applies warning variant classes', () => {
+    const { container } = render(<Info variant="warning">Warning message</Info>);
+    const info = container.querySelector('div[role="alert"]');
+    expect(info).toHaveClass('bg-yellow-100', 'text-yellow-800', 'border-yellow-500');
+  });
+
+  it('applies error variant classes', () => {
+    const { container } = render(<Info variant="error">Error message</Info>);
+    const info = container.querySelector('div[role="alert"]');
+    expect(info).toHaveClass('bg-red-100', 'text-red-800', 'border-red-500');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Info className="custom-class">Info</Info>);
+    const info = container.querySelector('div[role="alert"]');
+    expect(info).toHaveClass('custom-class');
+  });
+
+  it('passes through HTML attributes', () => {
+    render(<Info data-testid="info">Info message</Info>);
+    expect(screen.getByTestId('info')).toBeInTheDocument();
+  });
+});

package/src/ui/atoms/Info/Info.tsx

@@ -1,10 +1,10 @@
 import type { HTMLAttributes } from "react";
 
-interface Props extends HTMLAttributes<HTMLDivElement> {
+export interface InfoProps extends HTMLAttributes<HTMLDivElement> {
   variant?: "info" | "warning" | "error";
 }
 
-export default function Info({ variant = "info", className, ...props }: Props) {
+export default function Info({ variant = "info", className, ...props }: InfoProps) {
   const cls: string[] = [className || ""];
 
   switch (variant) {

package/src/ui/atoms/Input/Input.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Input from './Input';
+import { Mail, Search, Lock, User } from 'lucide-react';
 
 const meta: Meta<typeof Input> = {
   title: 'Atoms/Input',
@@ -12,6 +13,9 @@ const meta: Meta<typeof Input> = {
     error: {
       control: 'boolean',
     },
+    success: {
+      control: 'boolean',
+    },
     size: {
       control: 'select',
       options: ['sm', 'md', 'lg'],
@@ -23,6 +27,9 @@ const meta: Meta<typeof Input> = {
     disabled: {
       control: 'boolean',
     },
+    showClearButton: {
+      control: 'boolean',
+    },
   },
 };
 
@@ -47,6 +54,18 @@ export const WithError: Story = {
   },
 };
 
+export const WithSuccess: Story = {
+  args: {
+    label: 'Email',
+    type: 'email',
+    placeholder: 'Enter your email',
+    success: true,
+    helperText: 'Email is valid',
+    value: 'user@example.com',
+    onChange: () => {},
+  },
+};
+
 export const Sizes: Story = {
   render: () => (
     <div className="space-y-4">
@@ -67,6 +86,56 @@ export const Variants: Story = {
   ),
 };
 
+export const WithIcons: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Input 
+        label="Email" 
+        leftIcon={<Mail className="h-4 w-4" />}
+        placeholder="Enter your email"
+      />
+      <Input 
+        label="Search" 
+        rightIcon={<Search className="h-4 w-4" />}
+        placeholder="Search..."
+      />
+      <Input 
+        label="Username" 
+        leftIcon={<User className="h-4 w-4" />}
+        rightIcon={<Search className="h-4 w-4" />}
+        placeholder="Enter username"
+      />
+    </div>
+  ),
+};
+
+export const WithClearButton: Story = {
+  args: {
+    label: 'Search',
+    placeholder: 'Type to search...',
+    showClearButton: true,
+    value: 'Search term',
+    onChange: () => {},
+  },
+};
+
+export const Password: Story = {
+  args: {
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter your password',
+  },
+};
+
+export const PasswordWithIcon: Story = {
+  args: {
+    label: 'Password',
+    type: 'password',
+    placeholder: 'Enter your password',
+    leftIcon: <Lock className="h-4 w-4" />,
+  },
+};
+
 export const Disabled: Story = {
   args: {
     label: 'Disabled Input',
@@ -74,3 +143,14 @@ export const Disabled: Story = {
     disabled: true,
   },
 };
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Input label="Default" placeholder="Default state" />
+      <Input label="Error" error helperText="This field has an error" />
+      <Input label="Success" success helperText="This field is valid" value="Valid value" onChange={() => {}} />
+      <Input label="Disabled" disabled placeholder="Disabled input" />
+    </div>
+  ),
+};

package/src/ui/atoms/Input/Input.test.tsx

@@ -1,54 +1,208 @@
-import type { ChangeEvent } from "react";
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Input from './Input';
+import { Mail, Search } from 'lucide-react';
 
-import { fireEvent, render } from "@testing-library/react";
+describe('Input', () => {
+  it('renders input', () => {
+    render(<Input placeholder="Enter text" />);
+    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
+  });
+
+  it('renders with label', () => {
+    render(<Input label="Email" />);
+    expect(screen.getByText('Email')).toBeInTheDocument();
+  });
+
+  it('shows error state', () => {
+    const { container } = render(<Input error helperText="Error message" />);
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(screen.getByText('Error message')).toBeInTheDocument();
+  });
+
+  it('shows success state', () => {
+    render(<Input success helperText="Valid" />);
+    expect(screen.getByText('Valid')).toBeInTheDocument();
+  });
+
+  it('renders left icon', () => {
+    render(<Input leftIcon={<Mail data-testid="mail-icon" />} />);
+    expect(screen.getByTestId('mail-icon')).toBeInTheDocument();
+  });
 
-import Input from "./Input";
+  it('renders right icon', () => {
+    render(<Input rightIcon={<Search data-testid="search-icon" />} />);
+    expect(screen.getByTestId('search-icon')).toBeInTheDocument();
+  });
 
-describe("UI / atom / Input", () => {
-  const PLACEHOLDER = "Hello from Input";
+  it('shows clear button when showClearButton and has value', () => {
+    render(<Input showClearButton value="test" onChange={vi.fn()} />);
+    const clearButton = screen.getByLabelText('Clear input');
+    expect(clearButton).toBeInTheDocument();
+  });
 
-  it("should properly render", () => {
-    const { getByPlaceholderText } = render(
-      <Input placeholder={PLACEHOLDER} />,
-    );
+  it('calls onClear when clear button clicked', () => {
+    const handleClear = vi.fn();
+    render(<Input showClearButton value="test" onChange={vi.fn()} onClear={handleClear} />);
+    fireEvent.click(screen.getByLabelText('Clear input'));
+    expect(handleClear).toHaveBeenCalledTimes(1);
+  });
 
-    expect(getByPlaceholderText(PLACEHOLDER)).toBeInTheDocument();
+  it('toggles password visibility', () => {
+    const { container } = render(<Input type="password" />);
+    const input = container.querySelector('input');
+    const toggleButton = screen.getByLabelText('Show password');
+    
+    expect(input).toHaveAttribute('type', 'password');
+    fireEvent.click(toggleButton);
+    expect(input).toHaveAttribute('type', 'text');
+    expect(screen.getByLabelText('Hide password')).toBeInTheDocument();
   });
 
-  it("should display a default value", () => {
-    const VALUE = "Hello from Input";
-    const { getByDisplayValue } = render(<Input defaultValue={VALUE} />);
-    expect(getByDisplayValue(VALUE)).toBeInTheDocument();
+  it('applies size classes', () => {
+    const { container } = render(<Input size="sm" />);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('h-8', 'text-sm');
+  });
+
+  it('applies variant classes', () => {
+    const { container } = render(<Input variant="filled" />);
+    const input = container.querySelector('input');
+    expect(input).toHaveClass('bg-gray-100');
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('handles Enter key', () => {
+      const handleKeyDown = vi.fn();
+      render(<Input onKeyDown={handleKeyDown} />);
+      const input = screen.getByRole('textbox');
+      fireEvent.keyDown(input, { key: 'Enter' });
+      expect(handleKeyDown).toHaveBeenCalled();
+    });
+
+    it('handles Escape key to clear', () => {
+      const handleClear = vi.fn();
+      render(<Input showClearButton value="test" onChange={vi.fn()} onClear={handleClear} />);
+      const input = screen.getByRole('textbox');
+      fireEvent.keyDown(input, { key: 'Escape' });
+      // Escape might trigger clear if implemented
+      expect(input).toBeInTheDocument();
+    });
+
+    it('is focusable', () => {
+      render(<Input />);
+      const input = screen.getByRole('textbox');
+      input.focus();
+      expect(document.activeElement).toBe(input);
+    });
+
+    it('is not focusable when disabled', () => {
+      render(<Input disabled />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeDisabled();
+      // Disabled inputs are not focusable by default
+      input.focus();
+      expect(document.activeElement).not.toBe(input);
+    });
   });
 
-  it("should emit an event when the value is changed", () => {
-    const changeFn: (input: string) => void = vitest.fn();
-    const CHANGE_TEXT = "Hello";
+  describe('Accessibility', () => {
+    it('has correct role', () => {
+      render(<Input />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('associates label with input', () => {
+      render(<Input label="Email" id="email" />);
+      const input = screen.getByLabelText('Email');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveAttribute('id', 'email');
+    });
+
+    it('has aria-invalid when error', () => {
+      render(<Input error />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-invalid', 'true');
+    });
+
+    it('has aria-describedby when helperText is provided', () => {
+      render(<Input helperText="Helper text" id="test-input" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-describedby', 'test-input-helper');
+    });
+
+    it('has aria-describedby for error message', () => {
+      render(<Input error helperText="Error message" id="test-input" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-describedby', 'test-input-error');
+    });
 
-    const { getByPlaceholderText } = render(
-      <Input
-        placeholder={PLACEHOLDER}
-        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-          changeFn(e.target.value)
-        }
-      />,
-    );
+    it('has aria-required when required', () => {
+      render(<Input required />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('aria-required', 'true');
+      expect(input).toHaveAttribute('required');
+    });
+
+    it('has aria-label when provided', () => {
+      render(<Input aria-label="Search input" />);
+      const input = screen.getByLabelText('Search input');
+      expect(input).toBeInTheDocument();
+    });
 
-    fireEvent.change(getByPlaceholderText(PLACEHOLDER), {
-      target: { value: CHANGE_TEXT },
+    it('has aria-placeholder when placeholder is provided', () => {
+      render(<Input placeholder="Enter text" />);
+      const input = screen.getByPlaceholderText('Enter text');
+      expect(input).toBeInTheDocument();
     });
 
-    expect(changeFn).toHaveBeenCalledWith(CHANGE_TEXT);
+    it('has correct type attribute', () => {
+      const { container } = render(<Input type="email" />);
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('type', 'email');
+    });
+
+    it('has correct autocomplete attribute', () => {
+      const { container } = render(<Input autoComplete="email" />);
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('autocomplete', 'email');
+    });
   });
 
-  it("should allow for change of the type", () => {
-    const { getByPlaceholderText } = render(
-      <Input placeholder={PLACEHOLDER} type="password" />,
-    );
+  describe('Edge Cases', () => {
+    it('handles controlled input', () => {
+      const { rerender } = render(<Input value="initial" onChange={vi.fn()} />);
+      const input = screen.getByRole('textbox') as HTMLInputElement;
+      expect(input.value).toBe('initial');
+      
+      rerender(<Input value="updated" onChange={vi.fn()} />);
+      expect(input.value).toBe('updated');
+    });
+
+    it('handles uncontrolled input', () => {
+      render(<Input defaultValue="default" />);
+      const input = screen.getByRole('textbox') as HTMLInputElement;
+      expect(input.value).toBe('default');
+    });
 
-    expect(getByPlaceholderText(PLACEHOLDER)).toHaveAttribute(
-      "type",
-      "password",
-    );
+    it('handles maxLength', () => {
+      render(<Input maxLength={10} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('maxLength', '10');
+    });
+
+    it('handles minLength', () => {
+      render(<Input minLength={2} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('minLength', '2');
+    });
+
+    it('handles pattern validation', () => {
+      render(<Input pattern="[0-9]*" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('pattern', '[0-9]*');
+    });
   });
 });

package/src/ui/atoms/Input/Input.tsx

@@ -1,21 +1,33 @@
 'use client';
 
+import { forwardRef, useState } from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import { getTypographyClasses } from '../../tokens/typography';
 import { getColorClass } from '../../tokens/colors';
+import { X, Eye, EyeOff } from 'lucide-react';
+import Button from '../Button/Button';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputVariant = 'default' | 'outlined' | 'filled';
+export type InputState = 'default' | 'error' | 'success';
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   label?: ReactNode;
   error?: boolean;
+  success?: boolean;
   helperText?: string;
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'default' | 'outlined' | 'filled';
+  size?: InputSize;
+  variant?: InputVariant;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  showClearButton?: boolean;
+  onClear?: () => void;
 }
 
 /**
  * Input Component
  * 
- * A styled text input component with label and error support.
+ * A styled text input component with label, error/success states, icons, and clear button.
  * Follows Atomic Design principles as an Atom component.
  * Uses Composite Pattern when combined with Label and ErrorMessage.
  * 
@@ -28,38 +40,66 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  *   placeholder="Enter your email"
  *   error={hasError}
  *   helperText={errorMessage}
+ *   leftIcon={<MailIcon />}
  * />
  * ```
  */
-export default function Input({
+const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   id,
   label,
   error = false,
+  success = false,
   helperText,
   size = 'md',
   variant = 'outlined',
+  leftIcon,
+  rightIcon,
+  showClearButton = false,
+  onClear,
   className = '',
   disabled = false,
+  type = 'text',
+  value,
+  onChange,
   ...props
-}: InputProps) {
+}, ref) {
   const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
   const errorId = error ? `${inputId}-error` : undefined;
   const helperId = helperText ? `${inputId}-helper` : undefined;
+  
+  // Password toggle state
+  const [showPassword, setShowPassword] = useState(false);
+  const isPassword = type === 'password';
+  const inputType = isPassword && showPassword ? 'text' : type;
+  
+  // Determine state
+  const state: InputState = error ? 'error' : success ? 'success' : 'default';
+  
+  // Determine if we should show clear button
+  const hasValue = value !== undefined && value !== null && value !== '';
+  const shouldShowClear = showClearButton && hasValue && !disabled;
 
   // Size classes
-  const sizeClasses = {
+  const sizeClasses: Record<InputSize, string> = {
     sm: 'h-8 text-sm px-3',
     md: 'h-10 text-base px-4',
     lg: 'h-12 text-lg px-5',
   };
 
   // Variant classes
-  const variantClasses = {
+  const variantClasses: Record<InputVariant, string> = {
     default: 'border-0 border-b-2 border-gray-300 focus:border-indigo-500',
     outlined: 'border border-gray-300 focus:border-indigo-500',
     filled: 'bg-gray-100 border-0 focus:bg-white focus:ring-2 focus:ring-indigo-500',
   };
 
+  // State classes
+  const stateClasses: Record<InputState, string> = {
+    default: '',
+    error: 'border-red-500 focus:border-red-500 focus:ring-red-500',
+    success: 'border-green-500 focus:border-green-500 focus:ring-green-500',
+  };
+
   const baseClasses = [
     'w-full',
     'rounded-md',
@@ -71,25 +111,47 @@ export default function Input({
     'disabled:cursor-not-allowed',
     sizeClasses[size],
     variantClasses[variant],
+    stateClasses[state],
   ];
 
-  const errorClasses = error
-    ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
-    : '';
+  // Add padding for icons
+  if (leftIcon) {
+    baseClasses.push(size === 'sm' ? 'pl-9' : size === 'lg' ? 'pl-12' : 'pl-10');
+  }
+  if (rightIcon || shouldShowClear || isPassword) {
+    baseClasses.push(size === 'sm' ? 'pr-9' : size === 'lg' ? 'pr-12' : 'pr-10');
+  }
 
   const inputClasses = [
     ...baseClasses,
-    errorClasses,
     className,
   ].filter(Boolean).join(' ');
 
   const labelClasses = [
     'block',
     getTypographyClasses('label'),
-      'mb-1',
+    'mb-1',
     disabled ? 'opacity-50' : '',
   ].filter(Boolean).join(' ');
 
+  const iconSize = size === 'sm' ? 'h-4 w-4' : size === 'lg' ? 'h-5 w-5' : 'h-4 w-4';
+  const iconPosition = size === 'sm' ? 'top-2' : size === 'lg' ? 'top-3.5' : 'top-2.5';
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onClear) {
+      onClear();
+    } else if (onChange) {
+      // Create synthetic event to clear input
+      const syntheticEvent = {
+        ...e,
+        target: { ...e.target, value: '' },
+        currentTarget: { ...e.currentTarget, value: '' },
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange(syntheticEvent);
+    }
+  };
+
   return (
     <div className="w-full">
       {label && (
@@ -100,23 +162,80 @@ export default function Input({
           {label}
         </label>
       )}
-      <input
-        id={inputId}
-        className={inputClasses}
-        disabled={disabled}
-        aria-invalid={error}
-        aria-describedby={errorId || helperId}
-        {...props}
-      />
-      {(error || helperText) && (
+      <div className="relative">
+        {leftIcon && (
+          <div className={`absolute left-3 ${iconPosition} text-gray-400 pointer-events-none`}>
+            <div className={iconSize}>
+              {leftIcon}
+            </div>
+          </div>
+        )}
+        <input
+          id={inputId}
+          ref={ref}
+          type={inputType}
+          className={inputClasses}
+          disabled={disabled}
+          value={value}
+          onChange={onChange}
+          aria-invalid={error}
+          aria-required={props.required}
+          aria-describedby={errorId || helperId}
+          {...props}
+        />
+        <div className="absolute right-3 top-0 bottom-0 flex items-center gap-1">
+          {shouldShowClear && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleClear}
+              className="h-auto p-1"
+              aria-label="Clear input"
+            >
+              <X className={iconSize} />
+            </Button>
+          )}
+          {isPassword && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowPassword(!showPassword)}
+              className="h-auto p-1"
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+            >
+              {showPassword ? (
+                <EyeOff className={iconSize} />
+              ) : (
+                <Eye className={iconSize} />
+              )}
+            </Button>
+          )}
+          {rightIcon && !shouldShowClear && !isPassword && (
+            <div className={`text-gray-400 pointer-events-none ${iconSize}`}>
+              {rightIcon}
+            </div>
+          )}
+        </div>
+      </div>
+      {(error || success || helperText) && (
         <div
           id={errorId || helperId}
-          className={`mt-1 ${getTypographyClasses('caption')} ${error ? getColorClass('error', 'DEFAULT', 'text') : 'text-gray-500'}`}
-          role={error ? 'alert' : undefined}
+          className={`mt-1 ${getTypographyClasses('caption')} ${
+            error 
+              ? getColorClass('error', 'DEFAULT', 'text')
+              : success
+              ? getColorClass('success', 'DEFAULT', 'text')
+              : 'text-gray-500'
+          }`}
+          role={error || success ? 'alert' : undefined}
         >
-          {error || helperText}
+          {helperText || (error ? 'Error' : success ? 'Success' : '')}
         </div>
       )}
     </div>
   );
-}
+});
+
+Input.displayName = 'Input';
+
+export default Input;

package/src/ui/atoms/Label/Label.stories.tsx

@@ -3,7 +3,7 @@ import Label from "./Label";
 import { Input } from "../../atoms";
 
 const meta: Meta<typeof Label> = {
-  title: "UI/Atoms/Label",
+  title: "Atoms/Label",
   component: Label,
   parameters: {
     docs: {