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

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

@@ -1,30 +1,62 @@
 'use client';
 
 import type { FormHTMLAttributes, ReactNode } from "react";
+import { FormProvider } from './FormProvider';
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
 
-interface Props extends FormHTMLAttributes<HTMLFormElement> {
+// Simple Form Props (backward compatible)
+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 (backward compatible)
  * <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 +64,68 @@ export default function Form({
   success = null,
   className = "",
   ...props
-}: Props) {
-  const baseClasses = [
-    "space-y-4",
-  ];
+}: FormProps<TFieldValues>) {
+  const baseClasses = ["space-y-4"];
+  const classes = [...baseClasses, className].filter(Boolean).join(" ");
+
+  // 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="p-3 text-sm text-red-800 bg-red-50 border border-red-200 rounded"
+            >
+              {error}
+            </div>
+          )}
+          {success && (
+            <div
+              role="alert"
+              className="p-3 text-sm text-green-800 bg-green-50 border border-green-200 rounded"
+            >
+              {success}
+            </div>
+          )}
+        </form>
+      </FormProvider>
+    );
+  }
 
-  const classes = [
-    ...baseClasses,
-    className,
-  ].filter(Boolean).join(" ");
+  // Simple form mode (backward compatible)
+  // 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,7 +134,7 @@ export default function Form({
       className={classes}
       onSubmit={handleSubmit}
       noValidate
-      {...props}
+      {...simpleProps}
     >
       {children}
       {error && (

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,83 @@
+'use client';
+
+import { useFormContext } from './FormContext';
+import { ErrorMessage } from '../../atoms';
+import type { FieldValues, Path, RegisterOptions } from 'react-hook-form';
+import type { ReactNode } from 'react';
+
+export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues> {
+  name: Path<TFieldValues>;
+  label?: string;
+  children: (props: {
+    name: string;
+    register: ReturnType<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={`space-y-2 ${className}`}>
+      {label && (
+        <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+          {label}
+        </label>
+      )}
+      {children({
+        name,
+        register: fieldRegister,
+        error,
+        value,
+        onChange: fieldRegister.onChange,
+        onBlur: fieldRegister.onBlur,
+      })}
+      {error && <ErrorMessage>{error}</ErrorMessage>}
+    </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/InputWithLabel/InputWithLabel.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import InputWithLabel from "./InputWithLabel";
 
 const meta: Meta<typeof InputWithLabel> = {
-  title: "UI/Molecules/InputWithLabel",
+  title: "Molecules/InputWithLabel",
   component: InputWithLabel,
 };
 

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

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import InputWithLabel from './InputWithLabel';
+
+describe('InputWithLabel', () => {
+  it('renders label and input', () => {
+    render(<InputWithLabel id="test-input" label="Test Label" />);
+    expect(screen.getByText('Test Label')).toBeInTheDocument();
+    expect(screen.getByLabelText('Test Label')).toBeInTheDocument();
+  });
+
+  it('associates label with input via htmlFor', () => {
+    render(<InputWithLabel id="test-input" label="Test Label" />);
+    const label = screen.getByText('Test Label');
+    const input = screen.getByLabelText('Test Label');
+    expect(label).toHaveAttribute('for', 'test-input');
+    expect(input).toHaveAttribute('id', 'test-input');
+  });
+
+  it('passes through input props', () => {
+    render(
+      <InputWithLabel
+        id="test-input"
+        label="Test Label"
+        type="email"
+        placeholder="Enter email"
+        required
+      />
+    );
+    const input = screen.getByLabelText('Test Label');
+    expect(input).toHaveAttribute('type', 'email');
+    expect(input).toHaveAttribute('placeholder', 'Enter email');
+    expect(input).toBeRequired();
+  });
+
+  it('applies size prop to input', () => {
+    const { container } = render(
+      <InputWithLabel id="test-input" label="Test Label" size="sm" />
+    );
+    const input = container.querySelector('input');
+    // Input component should receive size prop
+    expect(input).toBeInTheDocument();
+  });
+});

package/src/ui/molecules/InputWithLabel/InputWithLabel.tsx

@@ -7,7 +7,9 @@ interface Props extends Omit<HTMLProps<HTMLInputElement>, 'size'> {
 }
 
 export default function InputWithLabel({ label, size, ...props }: Props) {
-  if (!props.id) {
+   
+  if (!props.id && process.env.NODE_ENV === 'development') {
+     
     console.error("InputWithLabel component requires an id prop");
   }
 

package/src/ui/molecules/NavbarGroup/NavbarGroup.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import NavbarGroup from "./NavbarGroup";
 
 const meta: Meta<typeof NavbarGroup> = {
-  title: "UI/Molecules/NavbarGroup",
+  title: "Molecules/NavbarGroup",
   component: NavbarGroup,
   parameters: {
     docs: {

package/src/ui/molecules/Pagination/Pagination.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import Pagination from "./Pagination";
 
 const meta: Meta<typeof Pagination> = {
-  title: "UI/Molecules/Pagination",
+  title: "Molecules/Pagination",
   component: Pagination,
   parameters: {
     docs: {

package/src/ui/molecules/Rating/Rating.stories.tsx

@@ -0,0 +1,206 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import Rating from './Rating';
+
+const meta: Meta<typeof Rating> = {
+  title: 'Molecules/Rating',
+  component: Rating,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      options: ['filled', 'outlined'],
+    },
+    max: {
+      control: 'number',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Rating>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.defaultValue || 0);
+    return (
+      <Rating
+        {...args}
+        value={value}
+        onChange={setValue}
+      />
+    );
+  },
+  args: {
+    max: 5,
+    defaultValue: 0,
+  },
+};
+
+export const WithValue: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.defaultValue || 3);
+    return (
+      <Rating
+        {...args}
+        value={value}
+        onChange={setValue}
+        showValue
+      />
+    );
+  },
+  args: {
+    max: 5,
+    defaultValue: 3,
+  },
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Read-only rating (3 stars)</p>
+        <Rating value={3} readOnly showValue />
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Read-only rating (4.5 stars)</p>
+        <Rating value={4.5} readOnly showValue allowHalf />
+      </div>
+    </div>
+  ),
+};
+
+export const HalfRatings: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.defaultValue || 2.5);
+    return (
+      <div className="space-y-4">
+        <Rating
+          {...args}
+          value={value}
+          onChange={setValue}
+          allowHalf
+          showValue
+        />
+        <p className="text-sm text-gray-600">Current value: {value}</p>
+      </div>
+    );
+  },
+  args: {
+    max: 5,
+    defaultValue: 2.5,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => {
+    const [smValue, setSmValue] = useState(3);
+    const [mdValue, setMdValue] = useState(3);
+    const [lgValue, setLgValue] = useState(3);
+    
+    return (
+      <div className="space-y-6">
+        <div>
+          <p className="text-sm text-gray-600 mb-2">Small</p>
+          <Rating size="sm" value={smValue} onChange={setSmValue} showValue />
+        </div>
+        <div>
+          <p className="text-sm text-gray-600 mb-2">Medium</p>
+          <Rating size="md" value={mdValue} onChange={setMdValue} showValue />
+        </div>
+        <div>
+          <p className="text-sm text-gray-600 mb-2">Large</p>
+          <Rating size="lg" value={lgValue} onChange={setLgValue} showValue />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const CustomMax: Story = {
+  render: () => {
+    const [value, setValue] = useState(7);
+    return (
+      <div className="space-y-4">
+        <Rating
+          max={10}
+          value={value}
+          onChange={setValue}
+          showValue
+        />
+        <p className="text-sm text-gray-600">Rating out of 10</p>
+      </div>
+    );
+  },
+};
+
+export const Variants: Story = {
+  render: () => {
+    const [filledValue, setFilledValue] = useState(3);
+    const [outlinedValue, setOutlinedValue] = useState(3);
+    
+    return (
+      <div className="space-y-6">
+        <div>
+          <p className="text-sm text-gray-600 mb-2">Filled</p>
+          <Rating variant="filled" value={filledValue} onChange={setFilledValue} showValue />
+        </div>
+        <div>
+          <p className="text-sm text-gray-600 mb-2">Outlined</p>
+          <Rating variant="outlined" value={outlinedValue} onChange={setOutlinedValue} showValue />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const InContext: Story = {
+  render: () => {
+    const [productRating, setProductRating] = useState(4.5);
+    const [serviceRating, setServiceRating] = useState(5);
+    
+    return (
+      <div className="w-96 space-y-6 p-4 border border-gray-200 rounded-lg">
+        <h3 className="text-lg font-semibold">Rate Your Experience</h3>
+        
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">Product Quality</span>
+            <Rating
+              value={productRating}
+              onChange={setProductRating}
+              allowHalf
+              showValue
+              size="sm"
+            />
+          </div>
+        </div>
+        
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">Customer Service</span>
+            <Rating
+              value={serviceRating}
+              onChange={setServiceRating}
+              showValue
+              size="sm"
+            />
+          </div>
+        </div>
+        
+        <div className="pt-4 border-t border-gray-200">
+          <p className="text-xs text-gray-500">
+            Average: {((productRating + serviceRating) / 2).toFixed(1)}/5
+          </p>
+        </div>
+      </div>
+    );
+  },
+};