react-form-dto 0.0.8 → 0.0.9

package/README.md

@@ -214,6 +214,143 @@ const profileForm: FormDTO = {
 
 ---
 
+## 🌍 Internationalization (I18n)
+
+React Form DTO has built-in support for multi-language forms through `I18String` and `I18nOption` types.
+
+### Using I18String
+
+Any text property (`label`, `placeholder`, `title`, `description`, validation messages) can be either a plain string or a locale map:
+
+```tsx
+// Simple string (single language)
+{
+  label: "First Name"
+}
+
+// Multi-language support
+{
+  label: {
+    en: "First Name",
+    fr: "Prénom",
+    es: "Nombre",
+    de: "Vorname"
+  }
+}
+```
+
+### Using I18nOption for Selections
+
+For select, autocomplete, and multi-autocomplete fields, you can use `I18nOption` objects to provide translatable labels while maintaining stable values:
+
+```tsx
+{
+  id: "country",
+  type: "select",
+  label: { en: "Country", fr: "Pays" },
+  options: [
+    {
+      value: "us",
+      label: { en: "United States", fr: "États-Unis" }
+    },
+    {
+      value: "fr",
+      label: { en: "France", fr: "France" }
+    },
+    {
+      value: "de",
+      label: { en: "Germany", fr: "Allemagne" }
+    }
+  ]
+}
+```
+
+**Backward Compatibility:** Simple string arrays still work:
+
+```tsx
+options: ["USA", "France", "Germany"] // Still supported
+```
+
+### I18n Validation Messages
+
+Validation messages also support I18n:
+
+```tsx
+validations: {
+  required: {
+    en: "This field is required",
+    fr: "Ce champ est obligatoire",
+    es: "Este campo es obligatorio"
+  },
+  validate: (value) => value.length < 2 
+    ? { 
+        en: "Minimum 2 characters",
+        fr: "Minimum 2 caractères" 
+      }
+    : null
+}
+```
+
+### Complete I18n Example
+
+```tsx
+const multilingualForm: FormDTO = {
+  title: {
+    en: "User Registration",
+    fr: "Inscription de l'utilisateur",
+    es: "Registro de Usuario"
+  },
+  description: {
+    en: "Please fill in your details",
+    fr: "Veuillez remplir vos coordonnées",
+    es: "Por favor complete sus datos"
+  },
+  sections: [
+    {
+      id: "personal",
+      heading: {
+        en: "Personal Information",
+        fr: "Informations personnelles",
+        es: "Información Personal"
+      },
+      fields: [
+        {
+          id: "title",
+          type: "select",
+          label: { en: "Title", fr: "Titre", es: "Título" },
+          options: [
+            { value: "mr", label: { en: "Mr", fr: "M.", es: "Sr." } },
+            { value: "ms", label: { en: "Ms", fr: "Mme", es: "Sra." } },
+            { value: "dr", label: { en: "Dr", fr: "Dr", es: "Dr." } }
+          ]
+        },
+        {
+          id: "firstName",
+          type: "text",
+          label: { en: "First Name", fr: "Prénom", es: "Nombre" },
+          placeholder: { 
+            en: "Enter your first name",
+            fr: "Entrez votre prénom",
+            es: "Ingrese su nombre"
+          },
+          validations: {
+            required: {
+              en: "First name is required",
+              fr: "Le prénom est obligatoire",
+              es: "El nombre es obligatorio"
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+```
+
+> **Note:** The library provides the I18n structure. You'll need to implement locale selection and text resolution in your application layer.
+
+---
+
 ## Custom Field Renderers
 
 Override any default renderer by supplying your own component:

package/dist/components/Field.d.ts

@@ -11,6 +11,7 @@ export interface FieldRendererProps {
     /** Callback function to update the field value */
     onChange: (val: any) => void;
     error?: string | null;
+    locale: string;
 }
 /**
  * Props for the Field component.

package/dist/components/FormBuilder.d.ts

@@ -23,6 +23,8 @@ type FormBuilderProps = {
     dto: FormDTO;
     /** Optional custom renderers for specific field types */
     renderers?: Record<string, React.ComponentType<any>>;
+    /** Current locale for i18n string resolution (default: 'en') */
+    locale?: string;
 };
 /**
  * FormBuilder component that dynamically renders a form based on a FormDTO definition.

package/dist/components/Section.d.ts

@@ -13,6 +13,8 @@ type SectionProps = {
     /** Optional custom renderers for specific field types */
     renderers?: Record<string, React.ComponentType<any>>;
     validateField: (id: string) => string[];
+    /** Current locale for i18n string resolution (default: 'en') */
+    locale?: string;
 };
 /**
  * Section component that renders a form section with its heading, description, and fields.

package/dist/components/renderers/AutoComplete.d.ts

@@ -5,6 +5,7 @@ type AutoCompleteFieldProps = {
     value: any;
     onChange: (val: any) => void;
     error?: string | null;
+    locale?: string;
 };
 export declare const AutoCompleteField: React.FC<AutoCompleteFieldProps>;
 export {};

package/dist/components/renderers/CheckBoxInput.d.ts

@@ -13,4 +13,4 @@ import { FieldRendererProps } from '../../components/Field';
  *   onChange={handleChange}
  * />
  */
-export declare function CheckBoxInput({ field, value, onChange, error, }: FieldRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckBoxInput({ field, value, onChange, error, locale, }: FieldRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/renderers/MultiAutoComplete.d.ts

@@ -5,6 +5,7 @@ type MultiAutoCompleteFieldProps = {
     value: any[];
     onChange: (val: any) => void;
     error?: string | null;
+    locale?: string;
 };
 export declare const MultiAutoCompleteField: React.FC<MultiAutoCompleteFieldProps>;
 export {};

package/dist/components/renderers/RadioInput.d.ts

@@ -5,6 +5,7 @@ type RadioInputProps = {
     value: any;
     onChange: (val: any) => void;
     error?: string | null;
+    locale?: string;
 };
 export declare const RadioInput: React.FC<RadioInputProps>;
 export {};

package/dist/components/renderers/SelectInput.d.ts

@@ -13,4 +13,4 @@ import { FieldRendererProps } from '../../components/Field';
  *   onChange={handleChange}
  * />
  */
-export declare function SelectInput({ field, value, onChange, error, }: FieldRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectInput({ field, value, onChange, error, locale, }: FieldRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/renderers/TextInput.d.ts

@@ -13,4 +13,4 @@ import { FieldRendererProps } from '../../components/Field';
  *   onChange={handleChange}
  * />
  */
-export declare function TextInput({ field, value, onChange, error, }: FieldRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextInput({ field, value, onChange, error, locale, }: FieldRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/renderers/TextareaInput.d.ts

@@ -5,6 +5,7 @@ type TextAreaInputProps = {
     value: any;
     onChange: (val: any) => void;
     error?: string | null;
+    locale?: string;
 };
 export declare const TextAreaInput: React.FC<TextAreaInputProps>;
 export {};

package/dist/examples/profileForm.d.ts

@@ -1,2 +1,3 @@
 import { FormDTO } from '../types';
 export declare const profileForm: FormDTO;
+export declare const profileFormI18n: FormDTO;

package/dist/hooks/useFormBuilder.d.ts

@@ -12,7 +12,7 @@ type Errors = Record<string, string | null>;
  * form.handleChange('email', 'user@example.com');
  * const errors = form.validateAll();
  */
-export declare function useFormBuilder(dto: FormDTO): {
+export declare function useFormBuilder(dto: FormDTO, locale?: string): {
     /** Current form values for all fields */
     values: Record<string, any>;
     /** Function to update a field value */