dynamic-domain.tsx

Overview

dynamic-domain.tsx defines a reusable React functional component named DynamicDomain that integrates with react-hook-form to manage a dynamic list of input fields within a form. This component allows users to add or remove fields dynamically, making it ideal for forms where the number of inputs is not fixed (e.g., entering multiple domains, tags, or emails).

Key features:

• Dynamically add new input fields.

• Remove existing input fields.

• Automatically integrates with react-hook-form context for form state management and validation.

• Uses UI components consistent with the project's design system (buttons, inputs, labels, and messages).

• Translated button label using i18next for internationalization.

Detailed Description

Component: DynamicDomain

Purpose

Manages an array of input fields dynamically within a form. Each field corresponds to an item in a form array, allowing users to add or remove entries seamlessly.

Props

Usage Example

import { useForm, FormProvider } from 'react-hook-form';
import { DynamicDomain } from './dynamic-domain';

function ExampleForm() {
  const methods = useForm({
    defaultValues: { domains: [{ value: '' }] }
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <DynamicDomain name="domains" label="Domains" />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

Internal Implementation Details

• Form Context Access:
  Uses useFormContext() from react-hook-form to obtain the form control and state, allowing this component to function as a child inside a parent form.

• Dynamic Field Array:
  Uses the useFieldArray() hook to manage the array of fields:

  • fields: Current array of field objects, each with a unique id.

  • append: Function to add a new empty item.

  • remove: Function to remove an item by index.

• Rendering Strategy:
  For each item in fields, renders:

  • A controlled Input field linked to ${name}.${index}.value in the form state.

  • A "remove" button with an X icon to delete that specific input field.

• Adding New Fields:
  Renders a block-level button labeled with the localized string for "Add" (t('common.add')). Clicking it appends a new empty item ({ value: '' }) to the array.

• Form Elements and Styling:
  Uses composable UI components (FormItem, FormLabel, FormControl, FormField, FormMessage, Button, Input) to maintain consistent styling and accessibility.

• Internationalization:
  Button text is localized using i18next (t function).

Functions and Methods

This file exports a single React component function:

DynamicDomain({ name, label }: DynamicDomainProps): JSX.Element

• Parameters:

  • name: string - Path in the form data representing the array of inputs.

  • label: ReactNode - Label for the input group.

• Returns: JSX element rendering the full dynamic input array UI.

Interaction with Other Parts of the System

• Form Management:
  Relies on being rendered inside a react-hook-form context (FormProvider or equivalent) for form state synchronization.

• UI Components:
  Integrates with the project's shared UI components located at:

  • @/components/ui/button

  • @/components/ui/form

  • @/components/ui/input

  These provide consistent UI styling and behavior across the application.

• Icons:
  Uses the X icon from lucide-react for the remove button, ensuring visual consistency.

• Internationalization:
  Uses the t function from i18next for localized text rendering.

Visual Diagram

componentDiagram
    direction TB
    DynamicDomain --> useFormContext : accesses form context
    DynamicDomain --> useFieldArray : manages dynamic fields
    DynamicDomain --> FormItem
    DynamicDomain --> FormLabel
    DynamicDomain --> FormControl
    DynamicDomain --> FormField
    DynamicDomain --> Input
    DynamicDomain --> Button
    DynamicDomain --> X (icon)
    DynamicDomain --> t (i18next translation)

    note right of DynamicDomain
      - Renders dynamic list of inputs with add/remove
      - Integrates with react-hook-form
    end

Summary

dynamic-domain.tsx provides a clean, reusable React component that enables dynamic input arrays within forms managed by react-hook-form. Its design ensures form integration, accessibility, internationalization, and UI consistency. This component is essential when the number of user inputs is not predetermined and must be user-controlled dynamically.

If you are implementing or maintaining forms requiring dynamic lists, DynamicDomain offers a robust and extensible solution that fits well into the existing UI and form management architecture.