dynamic-page-range.tsx

Overview

dynamic-page-range.tsx is a React component implemented with TypeScript and React Hook Form. It provides a user interface for dynamically managing a list of page ranges within a form context. Users can add, edit, and remove page ranges, where each range consists of a "from" and "to" numeric input. This component is designed for use in a larger form that likely configures parsing or document processing settings, specifically under the parser_config.pages field array.

Key features include:

• Dynamic addition and removal of page ranges.

• Controlled inputs integrated with React Hook Form for form validation and state management.

• Localization support through react-i18next.

• UI components styled and structured using a shared UI component library.

Detailed Explanation

Component: DynamicPageRange

A React functional component that renders a dynamic list of page ranges with inputs for "from" and "to" page numbers.

Usage

import { DynamicPageRange } from './dynamic-page-range';

// Inside a form wrapped with react-hook-form context provider
function ExampleForm() {
  const methods = useForm({
    defaultValues: {
      parser_config: {
        pages: [{ from: 1, to: 10 }],
      },
    },
  });

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

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <DynamicPageRange />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

Parameters

• This component does not accept any props directly.

• It relies on useFormContext() from react-hook-form to access the parent form's context, implying it must be used inside a form wrapped with FormProvider or similar.

Return Value

• Returns React JSX elements rendering the form fields for page ranges and controls for adding/removing ranges.

Internal Working

• Form Context Access: Uses useFormContext to get form control and state.

• Field Array Management: Uses useFieldArray at path parser_config.pages to manage the dynamic list of page ranges.

• Rendering Fields: For each page range, renders two number inputs (from and to), each bound to the form state.

• Add Button: Appends a new page range with default values { from: 1, to: 100 }.

• Remove Button: Removes the specific page range by index.

• Localization: Uses the t function from react-i18next for all user-facing text, including labels, placeholders, and tooltips.

• Styling: Utilizes custom UI components (Button, FormControl, FormField, Input, Separator) for consistent styling and behavior.

Implementation Details

• React Hook Form Integration:
  The component leverages useFieldArray to synchronize dynamic inputs with the form state, ensuring that additions and removals are tracked and validated seamlessly.

• Field Pathing:
  The fields are named with the dynamic path parser_config.pages.${index}.from and parser_config.pages.${index}.to, allowing form data to be nested correctly.

• Accessibility and UX:
  Each input is wrapped in FormItem with labels and form messages, supporting accessibility and inline validation feedback.

• Localization:
  All static texts, including tooltips and placeholders, are localized, supporting internationalization.

Interaction with Other Parts of the System

• Form Context:
  The component requires a parent form to provide context through react-hook-form. It does not function standalone and expects the parent form to handle submission and validation.

• UI Components:
  It depends on shared UI components (Button, FormControl, FormField, FormItem, Input, Separator) likely maintained in a common component library within the project (@/components/ui/*).

• Localization:
  Uses the useTranslation hook from react-i18next to integrate with the project’s internationalization setup.

• Iconography:
  Uses Plus and X icons from lucide-react for the add and remove buttons.

Visual Diagram

componentDiagram
    component DynamicPageRange {
        +useFormContext()
        +useFieldArray(name='parser_config.pages')
        +useTranslation()
        +render()
    }

    component UI_Components {
        Button
        FormControl
        FormField
        FormItem
        Input
        Separator
    }

    component ReactHookForm {
        useFormContext
        useFieldArray
    }

    component Localization {
        useTranslation
    }

    DynamicPageRange --> ReactHookForm : form context, field array
    DynamicPageRange --> UI_Components : UI elements
    DynamicPageRange --> Localization : text translation

Summary of Exposed Methods and Properties

Example Interaction Scenario

1. User opens the form containing DynamicPageRange.

2. The component renders existing page ranges as pairs of numeric inputs.

3. User can change the "from" and "to" page numbers for each range.

4. User clicks the "Add Page" button to append a new range initialized as 1 to 100.

5. User clicks the "X" button next to a range to remove it.

6. Form state updates accordingly, ready for validation or submission.

End of Documentation for dynamic-page-range.tsx