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

package/src/ui/molecules/Form/Form.test.tsx

@@ -16,9 +16,7 @@ describe("Form", () => {
   });
 
   it("calls onSubmit when form is submitted", () => {
-    const handleSubmit = vi.fn((e) => {
-      e.preventDefault();
-    });
+    const handleSubmit = vi.fn();
     const { container } = render(
       <Form onSubmit={handleSubmit}>
         <Button type="submit">Submit</Button>

package/src/ui/molecules/Form/Form.tsx

@@ -1,30 +1,71 @@
 'use client';
 
 import type { FormHTMLAttributes, ReactNode } from "react";
+import { FormProvider } from './FormProvider';
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
+import { cn } from '../../utils';
+import { 
+  getColorClass, 
+  getSpacingClass, 
+  getRadiusClass,
+  getTypographySize,
+  getTypographySizeFromFontSize
+} from '../../tokens';
+import ErrorMessage from '../../atoms/ErrorMessage/ErrorMessage';
 
-interface Props extends FormHTMLAttributes<HTMLFormElement> {
+// Simple Form Props
+interface SimpleFormProps extends FormHTMLAttributes<HTMLFormElement> {
   children: ReactNode;
   onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
   loading?: boolean;
   error?: string | null;
   success?: string | null;
+  form?: never; // Cannot use form prop in simple mode
 }
 
+// React Hook Form Props
+interface ReactHookFormProps<TFieldValues extends FieldValues = FieldValues> extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+  children: ReactNode;
+  form: UseFormReturn<TFieldValues>;
+  onSubmit: (data: TFieldValues) => void | Promise<void>;
+  loading?: boolean;
+  error?: string | null;
+  success?: string | null;
+  onSubmitError?: (errors: unknown) => void;
+}
+
+type FormProps<TFieldValues extends FieldValues = FieldValues> = 
+  | SimpleFormProps 
+  | ReactHookFormProps<TFieldValues>;
+
 /**
  * Form Component
  * 
- * A wrapper component for forms with validation states and layout.
- * Follows Atomic Design principles as a Molecule component.
+ * A flexible form component that supports both simple forms and react-hook-form integration.
  * 
  * @example
  * ```tsx
+ * // Simple form
  * <Form onSubmit={handleSubmit} loading={isSubmitting}>
  *   <Input name="email" />
  *   <Button type="submit">Submit</Button>
  * </Form>
+ * 
+ * // With react-hook-form
+ * const form = useForm({ resolver: zodResolver(schema) });
+ * <Form form={form} onSubmit={handleSubmit}>
+ *   <FormField name="email">
+ *     {({ register, error }) => (
+ *       <>
+ *         <Input {...register('email')} />
+ *         {error && <ErrorMessage>{error}</ErrorMessage>}
+ *       </>
+ *     )}
+ *   </FormField>
+ * </Form>
  * ```
  */
-export default function Form({
+export default function Form<TFieldValues extends FieldValues = FieldValues>({
   children,
   onSubmit,
   loading = false,
@@ -32,20 +73,83 @@ export default function Form({
   success = null,
   className = "",
   ...props
-}: Props) {
-  const baseClasses = [
-    "space-y-4",
-  ];
+}: FormProps<TFieldValues>) {
+  const classes = cn(getSpacingClass('lg', 'gap'), 'flex', 'flex-col', className);
+
+  // Check if using react-hook-form
+  const isReactHookForm = 'form' in props && props.form !== undefined;
+  
+  if (isReactHookForm) {
+    const { form, onSubmit: onSubmitData, onSubmitError, ...formProps } = props as ReactHookFormProps<TFieldValues>;
+    
+    const handleSubmit = form.handleSubmit(
+      async (data) => {
+        try {
+          await onSubmitData(data);
+        } catch (err) {
+          onSubmitError?.(err);
+        }
+      },
+      (errors) => {
+        onSubmitError?.(errors);
+      }
+    );
+
+    return (
+      <FormProvider form={form} loading={loading}>
+        <form
+          className={classes}
+          onSubmit={handleSubmit}
+          noValidate
+          {...formProps}
+        >
+          {children}
+          {error && (
+            <div
+              role="alert"
+              className={cn(
+                getSpacingClass('md', 'p'),
+                getTypographySizeFromFontSize('sm'),
+                getColorClass('error', 'dark', 'text'),
+                getColorClass('error', 'light', 'bg'),
+                'border',
+                getColorClass('error', 'DEFAULT', 'border'),
+                getRadiusClass('md')
+              )}
+            >
+              {error}
+            </div>
+          )}
+          {success && (
+            <div
+              role="alert"
+              className={cn(
+                getSpacingClass('md', 'p'),
+                getTypographySizeFromFontSize('sm'),
+                getColorClass('success', 'dark', 'text'),
+                getColorClass('success', 'light', 'bg'),
+                'border',
+                getColorClass('success', 'DEFAULT', 'border'),
+                getRadiusClass('md')
+              )}
+            >
+              {success}
+            </div>
+          )}
+        </form>
+      </FormProvider>
+    );
+  }
 
-  const classes = [
-    ...baseClasses,
-    className,
-  ].filter(Boolean).join(" ");
+  // Simple form mode
+  // Use onSubmit from props or from direct prop
+  const onSubmitSimple = (props as SimpleFormProps).onSubmit || onSubmit;
+  const { onSubmit: _, ...simpleProps } = props as SimpleFormProps;
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (onSubmit && !loading) {
-      onSubmit(e);
+    if (onSubmitSimple && !loading) {
+      onSubmitSimple(e);
     }
   };
 
@@ -54,13 +158,21 @@ export default function Form({
       className={classes}
       onSubmit={handleSubmit}
       noValidate
-      {...props}
+      {...simpleProps}
     >
       {children}
       {error && (
         <div
           role="alert"
-          className="p-3 text-sm text-red-800 bg-red-50 border border-red-200 rounded"
+          className={cn(
+            getSpacingClass('md', 'p'),
+            getTypographySizeFromFontSize('sm'),
+            getColorClass('error', 'dark', 'text'),
+            getColorClass('error', 'light', 'bg'),
+            'border',
+            getColorClass('error', 'DEFAULT', 'border'),
+            getRadiusClass('md')
+          )}
         >
           {error}
         </div>
@@ -68,7 +180,15 @@ export default function Form({
       {success && (
         <div
           role="alert"
-          className="p-3 text-sm text-green-800 bg-green-50 border border-green-200 rounded"
+          className={cn(
+            getSpacingClass('md', 'p'),
+            getTypographySizeFromFontSize('sm'),
+            getColorClass('success', 'dark', 'text'),
+            getColorClass('success', 'light', 'bg'),
+            'border',
+            getColorClass('success', 'DEFAULT', 'border'),
+            getRadiusClass('md')
+          )}
         >
           {success}
         </div>

package/src/ui/molecules/Form/FormContext.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
+
+export interface FormContextValue<TFieldValues extends FieldValues = FieldValues> {
+  form?: UseFormReturn<TFieldValues>;
+  loading?: boolean;
+}
+
+const FormContext = createContext<FormContextValue<FieldValues> | undefined>(undefined);
+
+/**
+ * Hook to access Form context
+ * 
+ * @throws Error if used outside of Form component with react-hook-form
+ */
+export function useFormContext<TFieldValues extends FieldValues = FieldValues>(): FormContextValue<TFieldValues> {
+  const context = useContext(FormContext);
+  
+  if (context === undefined) {
+    throw new Error('useFormContext must be used within a Form component with react-hook-form integration');
+  }
+  
+  return context as FormContextValue<TFieldValues>;
+}
+
+/**
+ * Hook to access Form context (optional, returns undefined if not in Form)
+ */
+export function useFormContextOptional<TFieldValues extends FieldValues = FieldValues>(): FormContextValue<TFieldValues> | undefined {
+  return useContext(FormContext) as FormContextValue<TFieldValues> | undefined;
+}
+
+export { FormContext };

package/src/ui/molecules/Form/FormField.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useFormContext } from './FormContext';
+import { ErrorMessage, Label } from '../../atoms';
+import { cn } from '../../utils';
+import { 
+  getSpacingClass, 
+  getTypographySizeFromFontSize, 
+  getTypographyWeightFromFontWeight,
+  getColorClass
+} from '../../tokens';
+import type { FieldValues, Path, RegisterOptions } from 'react-hook-form';
+import type { ReactNode } from 'react';
+import type { UseFormReturn } from 'react-hook-form';
+
+export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues> {
+  name: Path<TFieldValues>;
+  label?: string;
+  children: (props: {
+    name: string;
+    register: (fieldName: Path<TFieldValues>) => ReturnType<UseFormReturn<TFieldValues>['register']>;
+    error?: string;
+    value?: unknown;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    onBlur?: () => void;
+  }) => ReactNode;
+  rules?: RegisterOptions<TFieldValues>;
+  className?: string;
+}
+
+/**
+ * FormField Component
+ * 
+ * A wrapper component for form fields that integrates with react-hook-form.
+ * Provides register, error, and validation state to children.
+ * 
+ * @example
+ * ```tsx
+ * <FormField name="email" label="Email">
+ *   {({ register, error }) => (
+ *     <>
+ *       <Label htmlFor="email">Email</Label>
+ *       <Input id="email" {...register('email')} />
+ *       {error && <ErrorMessage>{error}</ErrorMessage>}
+ *     </>
+ *   )}
+ * </FormField>
+ * ```
+ */
+export function FormField<TFieldValues extends FieldValues = FieldValues>({
+  name,
+  label,
+  children,
+  rules,
+  className = '',
+}: FormFieldProps<TFieldValues>) {
+  const { form } = useFormContext<TFieldValues>();
+  
+  if (!form) {
+    throw new Error('FormField must be used within a Form component with react-hook-form integration');
+  }
+
+  const {
+    register,
+    formState: { errors },
+    watch,
+  } = form;
+
+  const fieldRegister = register(name, rules);
+  const error = errors[name]?.message as string | undefined;
+  const value = watch(name);
+
+  return (
+    <div className={cn('flex', 'flex-col', getSpacingClass('sm', 'gap'), className)}>
+      {label && (
+        <Label 
+          htmlFor={name}
+          className={cn(
+            'block',
+            getTypographySizeFromFontSize('sm'),
+            getTypographyWeightFromFontWeight('medium'),
+            getColorClass('neutral', 'dark', 'text')
+          )}
+        >
+          {label}
+        </Label>
+      )}
+      {children({
+        name,
+        register: (fieldName: Path<TFieldValues>) => register(fieldName, rules),
+        error,
+        value,
+        onChange: fieldRegister.onChange,
+        onBlur: fieldRegister.onBlur,
+      })}
+      {error && <ErrorMessage message={error} />}
+    </div>
+  );
+}

package/src/ui/molecules/Form/FormProvider.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { FormContext, type FormContextValue } from './FormContext';
+import type { ReactNode } from 'react';
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
+
+export interface FormProviderProps<TFieldValues extends FieldValues = FieldValues> {
+  form?: UseFormReturn<TFieldValues>;
+  loading?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * FormProvider Component
+ * 
+ * Provides react-hook-form context to form children.
+ * Used internally by Form component when react-hook-form is integrated.
+ */
+export function FormProvider<TFieldValues extends FieldValues = FieldValues>({
+  form,
+  loading = false,
+  children,
+}: FormProviderProps<TFieldValues>) {
+  const contextValue: FormContextValue<TFieldValues> = {
+    form,
+    loading,
+  };
+
+  return (
+    <FormContext.Provider value={contextValue}>
+      {children}
+    </FormContext.Provider>
+  );
+}

package/src/ui/molecules/Form/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Form Components
+ * 
+ * Form components with optional react-hook-form and Zod integration.
+ */
+
+// Main Form component
+export { default as Form } from './Form';
+
+// Context and Provider
+export { FormContext, useFormContext, useFormContextOptional } from './FormContext';
+export type { FormContextValue } from './FormContext';
+export { FormProvider } from './FormProvider';
+export type { FormProviderProps } from './FormProvider';
+
+// FormField for react-hook-form integration
+export { FormField } from './FormField';
+export type { FormFieldProps } from './FormField';
+
+// Hooks
+export { useFormFieldArray } from './useFormFieldArray';

package/src/ui/molecules/Form/useFormFieldArray.ts

@@ -0,0 +1,46 @@
+'use client';
+
+import { useFormContext } from './FormContext';
+import { useFieldArray } from 'react-hook-form';
+import type { FieldValues, Path, UseFieldArrayProps } from 'react-hook-form';
+
+/**
+ * Hook for managing field arrays in forms
+ * 
+ * Wrapper around react-hook-form's useFieldArray that integrates with Form context.
+ * 
+ * @example
+ * ```tsx
+ * const { fields, append, remove } = useFormFieldArray({
+ *   name: 'items',
+ * });
+ * 
+ * return (
+ *   <>
+ *     {fields.map((field, index) => (
+ *       <div key={field.id}>
+ *         <FormField name={`items.${index}.name`}>
+ *           {({ register }) => <Input {...register(`items.${index}.name`)} />}
+ *         </FormField>
+ *         <Button onClick={() => remove(index)}>Remove</Button>
+ *       </div>
+ *     ))}
+ *     <Button onClick={() => append({ name: '' })}>Add Item</Button>
+ *   </>
+ * );
+ * ```
+ */
+export function useFormFieldArray<TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends Path<TFieldValues> = Path<TFieldValues>>(
+  props: Omit<UseFieldArrayProps<TFieldValues, TFieldArrayName>, 'control'>
+) {
+  const { form } = useFormContext<TFieldValues>();
+  
+  if (!form) {
+    throw new Error('useFormFieldArray must be used within a Form component with react-hook-form integration');
+  }
+
+  return useFieldArray<TFieldValues, TFieldArrayName>({
+    ...props,
+    control: form.control,
+  });
+}

package/src/ui/molecules/Header/Header.accessibility.test.tsx

@@ -0,0 +1,229 @@
+/**
+ * Header Accessibility Tests
+ * 
+ * Accessibility tests for the Header component.
+ * Following TDD approach: tests first, then implementation improvements.
+ * 
+ * @see TASK-038: Testes de Acessibilidade do Header
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Header } from './Header';
+import { NavLink } from '../../atoms/NavLink';
+import { Button } from '../../atoms/Button/Button';
+
+describe('Header Accessibility', () => {
+  describe('ARIA Labels and Roles', () => {
+    it('should have proper semantic structure', () => {
+      // TDD: Test semantic HTML
+      const { container } = render(
+        <Header>
+          <Header.Logo href="/">MyApp</Header.Logo>
+        </Header>
+      );
+
+      const header = container.querySelector('header');
+      expect(header).toBeInTheDocument();
+    });
+
+    it('should have proper navigation ARIA labels', () => {
+      // TDD: Test navigation ARIA labels
+      render(
+        <Header>
+          <Header.Navigation>
+            <NavLink href="/home">Home</NavLink>
+          </Header.Navigation>
+        </Header>
+      );
+
+      const nav = screen.getByLabelText('Main navigation');
+      expect(nav).toBeInTheDocument();
+    });
+
+    it('should have proper hamburger button ARIA labels', () => {
+      // TDD: Test hamburger ARIA labels
+      render(
+        <Header>
+          <Header.Hamburger />
+        </Header>
+      );
+
+      const hamburger = screen.getByLabelText(/open menu|close menu/i);
+      expect(hamburger).toBeInTheDocument();
+      expect(hamburger).toHaveAttribute('aria-expanded');
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('should support Tab navigation through interactive elements', async () => {
+      // TDD: Test Tab navigation
+      const user = userEvent.setup();
+      render(
+        <Header>
+          <Header.Logo href="/">MyApp</Header.Logo>
+          <Header.Navigation>
+            <NavLink href="/home">Home</NavLink>
+            <NavLink href="/about">About</NavLink>
+          </Header.Navigation>
+          <Header.Actions>
+            <Button>Action</Button>
+          </Header.Actions>
+        </Header>
+      );
+
+      // Tab should move focus through interactive elements
+      await user.tab();
+      const focusedElement = document.activeElement;
+      expect(focusedElement).toBeInTheDocument();
+    });
+
+    it('should support Enter and Space on hamburger button', async () => {
+      // TDD: Test keyboard activation of hamburger
+      const user = userEvent.setup();
+      render(
+        <Header>
+          <Header.Hamburger />
+        </Header>
+      );
+
+      const hamburger = screen.getByLabelText(/open menu/i);
+      hamburger.focus();
+
+      // Enter should toggle menu
+      await act(async () => {
+        await user.keyboard('{Enter}');
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText(/close menu/i)).toBeInTheDocument();
+      });
+    });
+
+    it('should support Escape to close mobile menu', async () => {
+      // TDD: Test Escape key to close menu
+      const user = userEvent.setup();
+      render(
+        <Header>
+          <Header.Hamburger />
+          <Header.MobileMenu>
+            <NavLink href="/home">Home</NavLink>
+          </Header.MobileMenu>
+        </Header>
+      );
+
+      const hamburger = screen.getByLabelText(/open menu/i);
+      await act(async () => {
+        await user.click(hamburger);
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText(/close menu/i)).toBeInTheDocument();
+      });
+      
+      // Escape should close menu
+      await act(async () => {
+        await user.keyboard('{Escape}');
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText(/open menu/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Focus Management', () => {
+    it('should have visible focus indicators', () => {
+      // TDD: Test focus indicators
+      const { container } = render(
+        <Header>
+          <Header.Logo href="/">MyApp</Header.Logo>
+        </Header>
+      );
+
+      const logo = screen.getByText('MyApp').closest('a');
+      if (logo) {
+        logo.focus();
+        // Focus should be visible (check for focus-visible classes)
+        expect(logo).toHaveFocus();
+      }
+    });
+
+    it('should trap focus in mobile menu when open', async () => {
+      // TDD: Test focus trap in mobile menu
+      const user = userEvent.setup();
+      render(
+        <Header>
+          <Header.Hamburger />
+          <Header.MobileMenu>
+            <NavLink href="/home">Home</NavLink>
+            <NavLink href="/about">About</NavLink>
+          </Header.MobileMenu>
+        </Header>
+      );
+
+      const hamburger = screen.getByLabelText(/open menu/i);
+      await act(async () => {
+        await user.click(hamburger);
+      });
+
+      // Focus should be in the menu
+      await waitFor(() => {
+        const menuContent = screen.getByLabelText('Mobile navigation');
+        expect(menuContent).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Screen Reader Support', () => {
+    it('should have proper heading structure', () => {
+      // TDD: Test heading structure
+      render(
+        <Header>
+          <Header.Logo href="/">MyApp</Header.Logo>
+        </Header>
+      );
+
+      // Logo should be accessible
+      const logo = screen.getByText('MyApp');
+      expect(logo).toBeInTheDocument();
+    });
+
+    it('should announce mobile menu state changes', async () => {
+      // TDD: Test screen reader announcements
+      const user = userEvent.setup();
+      render(
+        <Header>
+          <Header.Hamburger />
+        </Header>
+      );
+
+      const hamburger = screen.getByLabelText(/open menu/i);
+      expect(hamburger).toHaveAttribute('aria-expanded', 'false');
+
+      await act(async () => {
+        await user.click(hamburger);
+      });
+      
+      await waitFor(() => {
+        expect(hamburger).toHaveAttribute('aria-expanded', 'true');
+      });
+    });
+  });
+
+  describe('Color Contrast and Visual', () => {
+    it('should have sufficient color contrast for text', () => {
+      // TDD: Test that components render (contrast will be validated visually)
+      render(
+        <Header>
+          <Header.Logo href="/">MyApp</Header.Logo>
+        </Header>
+      );
+
+      const logo = screen.getByText('MyApp');
+      expect(logo).toBeInTheDocument();
+      // Color contrast will be validated with jest-axe or visual testing
+    });
+  });
+});