dynamic-example.tsx

Overview

dynamic-example.tsx defines a React functional component named DynamicExample that provides a dynamic, user-editable list of text areas within a form. This component leverages the react-hook-form library for form state management, allowing users to add or remove example input fields dynamically. It is designed to be used as part of a larger form system where form context is shared, and it supports internationalization through react-i18next.

Key features include:

• Dynamic management of multiple text inputs using useFieldArray.

• Integration with a form context (useFormContext) for seamless form state synchronization.

• User interface components styled and structured for accessibility and usability.

• Internationalized labels and tooltips.

Component: DynamicExample

Purpose

Renders a labeled section within a form that contains a dynamic list of example input fields (text areas). Users can append new empty examples or remove existing ones, except the first example which can only be appended to but not removed.

Props

External Hooks and Libraries Used

• useTranslation (from react-i18next): Provides translation function t for labels and tooltips.

• useFormContext (from react-hook-form): Accesses the shared form context for control and state.

• useFieldArray (from react-hook-form): Manages a dynamic array of fields under the specified name in form state.

Internal Variables

• fields: An array representing current dynamic fields, each with a unique id.

• append: Function to add a new field with default value.

• remove: Function to remove a field by index.

Rendered Elements and Behavior

• FormItem: Container for the entire form section.

• FormLabel: Displays the label "Examples" (translated) with a tooltip (also translated).

• Fields Mapping: Iterates over fields and renders:

  • A Textarea input bound to each field's value.

  • A button on the right:

    • On the first field, a "+" (Plus icon) button to append new fields.

    • On other fields, an "X" (X icon) button to remove that field.

• FormMessage: Displays validation or error messages related to the field array.

Usage Example

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

function MyForm() {
  const methods = useForm({
    defaultValues: {
      examples: [{ value: 'Initial example' }],
    },
  });

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(data => console.log(data))}>
        <DynamicExample name="examples" />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

Implementation Details

• Dynamic Field Management:
  The component uses useFieldArray to handle an array of example objects under the key specified by the name prop. Each example object is expected to have a value property representing the text content.

• Controlled Inputs:
  Each Textarea is controlled via react-hook-form using the FormField component, connecting the input to the form state at the path ${name}.${index}.value.

• Conditional Rendering of Buttons:
  The first example field has a "+" button to allow adding more examples, but no removal button to ensure there is always at least one example. Subsequent example fields have an "X" button to remove them.

• Memoization:
  The component is wrapped with React.memo to prevent unnecessary re-renders when props do not change.

• Internationalization:
  The label and tooltip text are dynamically fetched using the t function from react-i18next.

Interaction with Other Parts of the System

• Form System:
  This component must be used within a react-hook-form context (e.g., wrapped by FormProvider) to function correctly. It reads and updates form state via useFormContext and useFieldArray.

• UI Components:
  It uses UI primitives (Button, FormControl, FormField, FormItem, FormLabel, FormMessage, Textarea) from a local UI library (@/components/ui/*), which likely provide consistent styling and behavior across the app.

• Icons:
  Uses Plus and X icons from the lucide-react icon set for button visuals.

• Localization:
  Relies on react-i18next for translation keys flow.examples (label) and flow.msgTip (tooltip).

Mermaid Component Diagram

componentDiagram
    component DynamicExample {
      +props: { name: string }
      +uses: useFormContext()
      +uses: useFieldArray(name, control)
      +renders: FormItem
      +renders: FormLabel (with tooltip)
      +renders: [Textarea fields + Add/Remove Buttons]
      +renders: FormMessage
    }
    component react-hook-form {
      +useFormContext()
      +useFieldArray()
    }
    component UI_Components {
      +Button
      +FormControl
      +FormField
      +FormItem
      +FormLabel
      +FormMessage
      +Textarea
    }
    component i18next {
      +useTranslation()
    }

    DynamicExample --> react-hook-form
    DynamicExample --> UI_Components
    DynamicExample --> i18next

Summary

The dynamic-example.tsx file exports a memoized React component that provides a user interface for dynamically managing an array of text input examples within a form. It integrates tightly with react-hook-form for state management and validation, uses a local UI component library for consistent styling, and supports internationalization. The component enables users to add or remove example entries in a controlled and accessible way, making it suitable for forms requiring a flexible number of inputs.

If you need additional information or integration details, please provide relevant parts of the form or UI libraries used in the project.