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

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

@@ -1,21 +1,77 @@
 'use client';
 
+import { forwardRef, useState, memo, useMemo, useCallback } from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
-import { getTypographyClasses } from '../../tokens/typography';
-import { getColorClass } from '../../tokens/colors';
+import { getTypographyClasses, getTypographySize } from '../../tokens/typography';
+import { getColorClass, getFocusColorClass } from '../../tokens/colors';
+import { getRadiusClass } from '../../tokens/radius';
+import { getSpacingClass } from '../../tokens/spacing';
+import { cn, cva } from '../../utils';
+import { X, Eye, EyeOff } from 'lucide-react';
+import Button from '../Button/Button';
+
+/**
+ * Helper Text Component
+ * Memoized component for helper/error text
+ */
+const HelperText = memo(function HelperText({
+  error,
+  success,
+  helperText,
+  errorId,
+  helperId,
+}: {
+  error: boolean;
+  success: boolean;
+  helperText?: string;
+  errorId?: string;
+  helperId?: string;
+}) {
+  const helperClasses = useMemo(() => cn(
+    getSpacingClass('xs', 'mt'),
+    getTypographyClasses('caption'),
+    error && getColorClass('error', 'DEFAULT', 'text'),
+    success && getColorClass('success', 'DEFAULT', 'text'),
+    !error && !success && getColorClass('neutral', 'DEFAULT', 'text')
+  ), [error, success]);
+
+  const text = useMemo(() => 
+    helperText || (error ? 'Error' : success ? 'Success' : ''),
+    [helperText, error, success]
+  );
+
+  return (
+    <div
+      id={errorId || helperId}
+      className={helperClasses}
+      role={error || success ? 'alert' : undefined}
+    >
+      {text}
+    </div>
+  );
+});
+
+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,67 +84,222 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  *   placeholder="Enter your email"
  *   error={hasError}
  *   helperText={errorMessage}
+ *   leftIcon={<MailIcon />}
  * />
  * ```
  */
-export default function Input({
+const Input = memo(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) {
-  const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
-  const errorId = error ? `${inputId}-error` : undefined;
-  const helperId = helperText ? `${inputId}-helper` : undefined;
-
-  // Size classes
-  const sizeClasses = {
-    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 = {
-    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',
-  };
-
-  const baseClasses = [
-    'w-full',
-    'rounded-md',
-    'transition-colors',
-    'focus:outline-none',
-    'focus:ring-2',
-    'focus:ring-offset-2',
-    'disabled:opacity-50',
-    'disabled:cursor-not-allowed',
-    sizeClasses[size],
-    variantClasses[variant],
-  ];
-
-  const errorClasses = error
-    ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
-    : '';
-
-  const inputClasses = [
-    ...baseClasses,
-    errorClasses,
-    className,
-  ].filter(Boolean).join(' ');
-
-  const labelClasses = [
+}, ref) {
+  // Memoize input ID
+  const inputId = useMemo(() => 
+    id || `input-${Math.random().toString(36).substr(2, 9)}`,
+    [id]
+  );
+  
+  // Memoize error and helper IDs
+  const errorId = useMemo(() => 
+    error ? `${inputId}-error` : undefined,
+    [error, inputId]
+  );
+  
+  const helperId = useMemo(() => 
+    helperText ? `${inputId}-helper` : undefined,
+    [helperText, inputId]
+  );
+  
+  // Password toggle state
+  const [showPassword, setShowPassword] = useState(false);
+  
+  // Memoize password-related values
+  const isPassword = useMemo(() => type === 'password', [type]);
+  const inputType = useMemo(() => 
+    isPassword && showPassword ? 'text' : type,
+    [isPassword, showPassword, type]
+  );
+  
+  // Memoize state
+  const state = useMemo<InputState>(() => 
+    error ? 'error' : success ? 'success' : 'default',
+    [error, success]
+  );
+  
+  // Memoize clear button visibility
+  const hasValue = useMemo(() => 
+    value !== undefined && value !== null && value !== '',
+    [value]
+  );
+  
+  const shouldShowClear = useMemo(() => 
+    showClearButton && hasValue && !disabled,
+    [showClearButton, hasValue, disabled]
+  );
+
+  // Memoize focus ring colors
+  const primaryFocusRing = useMemo(() => 
+    getFocusColorClass('primary', 'DEFAULT', 'border'),
+    []
+  );
+  
+  const errorFocusRing = useMemo(() => 
+    getFocusColorClass('error', 'DEFAULT', 'border'),
+    []
+  );
+  
+  const successFocusRing = useMemo(() => 
+    getFocusColorClass('success', 'DEFAULT', 'border'),
+    []
+  );
+  
+  const getFocusRingColor = useMemo(() => 
+    primaryFocusRing.replace('focus:border-', 'focus:ring-'),
+    [primaryFocusRing]
+  );
+
+  const getStateFocusRingColor = useCallback((stateType: 'error' | 'success'): string => {
+    return stateType === 'error' 
+      ? errorFocusRing.replace('focus:border-', 'focus:ring-')
+      : successFocusRing.replace('focus:border-', 'focus:ring-');
+  }, [errorFocusRing, successFocusRing]);
+
+  // Input variants using CVA
+  const inputVariants = cva(
+    // Base classes
+    cn(
+      'w-full',
+      getRadiusClass('md'),
+      'transition-colors',
+      'focus:outline-none',
+      'focus:ring-2',
+      'focus:ring-offset-2',
+      'disabled:opacity-50',
+      'disabled:cursor-not-allowed'
+    ),
+    {
+      variants: {
+        variant: {
+          default: cn(
+            'border-0',
+            'border-b-2',
+            getColorClass('neutral', 'DEFAULT', 'border'),
+            getFocusColorClass('primary', 'DEFAULT', 'border')
+          ),
+          outlined: cn(
+            'border',
+            getColorClass('neutral', 'DEFAULT', 'border'),
+            getFocusColorClass('primary', 'DEFAULT', 'border')
+          ),
+          filled: cn(
+            getColorClass('neutral', 'light', 'bg'),
+            'border-0',
+            'focus:bg-white',
+            'focus:ring-2',
+            getFocusRingColor
+          ),
+        },
+        size: {
+          sm: cn(
+            'h-8',
+            getTypographySize('bodySmall'),
+            getSpacingClass('md', 'px')
+          ),
+          md: cn(
+            'h-10',
+            getTypographySize('body'),
+            getSpacingClass('base', 'px')
+          ),
+          lg: cn(
+            'h-12',
+            getTypographySize('bodyLarge'),
+            getSpacingClass('lg', 'px')
+          ),
+        },
+        state: {
+          default: '',
+          error: cn(
+            getColorClass('error', 'DEFAULT', 'border'),
+            getFocusColorClass('error', 'DEFAULT', 'border'),
+            getStateFocusRingColor('error')
+          ),
+          success: cn(
+            getColorClass('success', 'DEFAULT', 'border'),
+            getFocusColorClass('success', 'DEFAULT', 'border'),
+            getStateFocusRingColor('success')
+          ),
+        },
+      },
+      defaultVariants: {
+        variant: 'outlined',
+        size: 'md',
+        state: 'default',
+      },
+    }
+  );
+
+  // Memoize input classes
+  const inputClasses = useMemo(() => cn(
+    inputVariants({ variant, size, state }),
+    // Icon padding - specific values for icon positioning
+    leftIcon && (size === 'sm' ? 'pl-9' : size === 'lg' ? 'pl-12' : 'pl-10'),
+    (rightIcon || shouldShowClear || isPassword) && (size === 'sm' ? 'pr-9' : size === 'lg' ? 'pr-12' : 'pr-10'),
+    className
+  ), [variant, size, state, leftIcon, rightIcon, shouldShowClear, isPassword, className]);
+
+  // Memoize label classes
+  const labelClasses = useMemo(() => cn(
     'block',
     getTypographyClasses('label'),
-      'mb-1',
-    disabled ? 'opacity-50' : '',
-  ].filter(Boolean).join(' ');
+    getSpacingClass('xs', 'mb'),
+    disabled && 'opacity-50'
+  ), [disabled]);
+
+  // Memoize icon size and position
+  const iconSize = useMemo(() => 
+    size === 'sm' ? 'h-4 w-4' : size === 'lg' ? 'h-5 w-5' : 'h-4 w-4',
+    [size]
+  );
+  
+  const iconPosition = useMemo(() => 
+    size === 'sm' ? 'top-2' : size === 'lg' ? 'top-3.5' : 'top-2.5',
+    [size]
+  );
+
+  // Memoize clear handler
+  const handleClear = useCallback((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);
+    }
+  }, [onClear, onChange]);
+
+  // Memoize password toggle handler
+  const handleTogglePassword = useCallback(() => {
+    setShowPassword(prev => !prev);
+  }, []);
 
   return (
     <div className="w-full">
@@ -100,23 +311,75 @@ export default function Input({
           {label}
         </label>
       )}
-      <input
-        id={inputId}
-        className={inputClasses}
-        disabled={disabled}
-        aria-invalid={error}
-        aria-describedby={errorId || helperId}
-        {...props}
-      />
-      {(error || helperText) && (
-        <div
-          id={errorId || helperId}
-          className={`mt-1 ${getTypographyClasses('caption')} ${error ? getColorClass('error', 'DEFAULT', 'text') : 'text-gray-500'}`}
-          role={error ? 'alert' : undefined}
-        >
-          {error || helperText}
+      <div className="relative">
+        {leftIcon && (
+          <div className={`absolute left-3 ${iconPosition} ${getColorClass('neutral', 'DEFAULT', 'text')} opacity-60 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}
+          suppressHydrationWarning
+          {...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={handleTogglePassword}
+              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={`${getColorClass('neutral', 'DEFAULT', 'text')} opacity-60 pointer-events-none ${iconSize}`}>
+              {rightIcon}
+            </div>
+          )}
         </div>
+      </div>
+      {(error || success || helperText) && (
+        <HelperText
+          error={error}
+          success={success}
+          helperText={helperText}
+          errorId={errorId}
+          helperId={helperId}
+        />
       )}
     </div>
   );
-}
+}));
+
+Input.displayName = 'Input';
+
+export default Input;

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

@@ -1,14 +1,35 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from '@storybook/test';
+import { expect, userEvent, within, waitFor } from '@storybook/test';
 import Label from "./Label";
 import { Input } from "../../atoms";
 
 const meta: Meta<typeof Label> = {
-  title: "UI/Atoms/Label",
+  title: "Atoms/Label",
   component: Label,
+  tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
-        component: "A styled label component for form inputs. Supports required and optional variants.",
+        component: `
+## Label
+
+A styled label component for form inputs with support for required and optional variants.
+
+### Events
+
+| Event | Description | Parameters | When Fired |
+|-------|-------------|------------|------------|
+| \`onClick\` | Label clicado | \`(event: MouseEvent) => void\` | Quando o label é clicado (foca o input associado) |
+
+### States
+
+| State | Description | How to Activate | Visual |
+|-------|-------------|-----------------|--------|
+| \`default\` | Estado padrão | \`variant="default"\` ou sem variant | Label normal |
+| \`required\` | Campo obrigatório | \`variant="required"\` | Label com asterisco (*) |
+| \`optional\` | Campo opcional | \`variant="optional"\` | Label com texto "(optional)" |
+        `,
       },
     },
   },
@@ -22,6 +43,18 @@ const meta: Meta<typeof Label> = {
       control: "text",
       description: "ID of the associated input element",
     },
+    children: {
+      control: "text",
+      description: "Label text",
+    },
+    onClick: {
+      description: 'Callback fired when the label is clicked',
+      action: 'onClick',
+      table: {
+        type: { summary: '(event: MouseEvent) => void' },
+        category: 'Events',
+      },
+    },
   },
 };
 
@@ -91,4 +124,196 @@ export const WithInput: StoryObj<typeof Label> = {
   ),
 };
 
+export const AllVariants: StoryObj<typeof Label> = {
+  render: () => (
+    <div className="space-y-4 max-w-md">
+      <div className="space-y-2">
+        <Label htmlFor="default" variant="default">
+          Default Label
+        </Label>
+        <Input id="default" placeholder="Default variant..." />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="required" variant="required">
+          Required Label
+        </Label>
+        <Input id="required" placeholder="Required variant..." />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="optional" variant="optional">
+          Optional Label
+        </Label>
+        <Input id="optional" placeholder="Optional variant..." />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates all label variants: default, required (with asterisk), and optional (with '(optional)' text).",
+      },
+    },
+  },
+};
+
+export const WithDifferentInputs: StoryObj<typeof Label> = {
+  render: () => (
+    <div className="space-y-4 max-w-md">
+      <div className="space-y-2">
+        <Label htmlFor="text-input" variant="required">
+          Text Input
+        </Label>
+        <Input id="text-input" type="text" placeholder="Text input..." />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="email-input" variant="required">
+          Email Input
+        </Label>
+        <Input id="email-input" type="email" placeholder="Email input..." />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="password-input" variant="required">
+          Password Input
+        </Label>
+        <Input id="password-input" type="password" placeholder="Password input..." />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="textarea-input" variant="optional">
+          Textarea
+        </Label>
+        <textarea
+          id="textarea-input"
+          className="w-full px-3 py-2 border border-gray-300 rounded-md"
+          placeholder="Textarea..."
+          rows={3}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="select-input" variant="required">
+          Select
+        </Label>
+        <select
+          id="select-input"
+          className="w-full px-3 py-2 border border-gray-300 rounded-md"
+        >
+          <option>Option 1</option>
+          <option>Option 2</option>
+        </select>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates Label component with different types of form inputs.",
+      },
+    },
+  },
+};
+
+// Event Stories
+export const WithEvents: StoryObj<typeof Label> = {
+  render: () => {
+    const handleClick = fn((e: React.MouseEvent<HTMLLabelElement>) => {
+      console.log('Label clicked');
+    });
+    
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600">
+          Click the label below. It will focus the associated input and fire the onClick event.
+        </p>
+        <div className="space-y-2">
+          <Label htmlFor="events-input" onClick={handleClick}>
+            Click me to focus input
+          </Label>
+          <Input id="events-input" placeholder="Click the label above..." />
+        </div>
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const label = canvas.getByText('Click me to focus input');
+    const input = canvas.getByRole('textbox');
+    
+    // Click label should focus input
+    await userEvent.click(label);
+    await waitFor(() => {
+      expect(input).toHaveFocus();
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates label click event. Clicking the label focuses the associated input.',
+      },
+    },
+  },
+};
+
+// State Stories
+export const DefaultState: StoryObj<typeof Label> = {
+  args: {
+    children: "Default Label",
+    htmlFor: "default-input",
+    variant: "default",
+  },
+  render: (args) => (
+    <div className="space-y-2">
+      <Label {...args} />
+      <Input id="default-input" placeholder="Default variant..." />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default state - standard label without special indicators.',
+      },
+    },
+  },
+};
+
+export const RequiredState: StoryObj<typeof Label> = {
+  args: {
+    children: "Required Label",
+    htmlFor: "required-input",
+    variant: "required",
+  },
+  render: (args) => (
+    <div className="space-y-2">
+      <Label {...args} />
+      <Input id="required-input" placeholder="Required variant..." required />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Required state - shows asterisk (*) to indicate the field is required.',
+      },
+    },
+  },
+};
+
+export const OptionalState: StoryObj<typeof Label> = {
+  args: {
+    children: "Optional Label",
+    htmlFor: "optional-input",
+    variant: "optional",
+  },
+  render: (args) => (
+    <div className="space-y-2">
+      <Label {...args} />
+      <Input id="optional-input" placeholder="Optional variant..." />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Optional state - shows "(optional)" text to indicate the field is optional.',
+      },
+    },
+  },
+};
+
 export default meta;