@form-engine-ts/react 2.2.0 → 2.3.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { ReactNode, ComponentType } from 'react';
-import { QuestionType, FormField, ChoiceOption, FormPage, FormPolicy, FormSchema, DisplayCondition, JsonValue, SchemaIssue, ValidationError, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, TranslationReport, FormValue, ValidationIssue, FormValues, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
+import { ReactNode, ComponentType, MouseEvent } from 'react';
+import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, FieldOption, ValidationError, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, TranslationReport, FormValue, ValidationIssue, FormValues, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
 
 /** @deprecated Import FormPolicy from @form-engine-ts/core instead. */
 type BuilderPolicy = FormPolicy;
@@ -84,6 +84,142 @@ interface FormBuilderResult {
 }
 declare function useFormBuilder({ schema, onChange, policy, idFactory, factories }: FormBuilderOptions): FormBuilderResult;
 
+interface ComponentBaseProps {
+    readonly id?: string;
+    readonly className?: string;
+    readonly disabled?: boolean;
+    readonly readOnly?: boolean;
+    readonly "aria-label"?: string;
+}
+interface BuilderButtonProps extends ComponentBaseProps {
+    readonly onClick?: () => void;
+    readonly variant?: "primary" | "secondary" | "danger";
+    readonly children: ReactNode;
+    readonly title?: string;
+    readonly action?: string;
+    readonly targetId?: string;
+}
+interface BuilderIconButtonProps extends ComponentBaseProps {
+    readonly onClick?: () => void;
+    readonly icon: string;
+    readonly title: string;
+}
+interface BuilderTextInputProps extends ComponentBaseProps {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    readonly placeholder?: string;
+    readonly maxLength?: number;
+    readonly inputMode?: "text" | "numeric";
+    readonly type?: "text" | "number";
+    readonly min?: number;
+    readonly max?: number;
+    readonly step?: number;
+}
+interface BuilderTextAreaProps extends ComponentBaseProps {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    readonly rows?: number;
+    readonly placeholder?: string;
+    readonly maxLength?: number;
+}
+interface BuilderSelectOption {
+    readonly label: string;
+    readonly value: string;
+    readonly disabled?: boolean;
+}
+interface BuilderSelectProps extends ComponentBaseProps {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    readonly options: readonly BuilderSelectOption[];
+}
+interface BuilderCheckboxProps extends ComponentBaseProps {
+    readonly checked: boolean;
+    readonly onChange: (checked: boolean) => void;
+    readonly label: string;
+}
+interface BuilderSectionProps {
+    readonly id?: string;
+    readonly className?: string;
+    readonly title?: string;
+    readonly description?: string;
+    readonly headingId?: string;
+    readonly "aria-label"?: string;
+    readonly onClickCapture?: (event: MouseEvent<HTMLElement>) => void;
+    readonly children: ReactNode;
+}
+interface BuilderFieldsetProps {
+    readonly className?: string;
+    readonly legend?: string;
+    readonly disabled?: boolean;
+    readonly children: ReactNode;
+}
+interface FormBuilderComponents {
+    readonly Button?: ComponentType<BuilderButtonProps>;
+    readonly IconButton?: ComponentType<BuilderIconButtonProps>;
+    readonly TextInput?: ComponentType<BuilderTextInputProps>;
+    readonly TextArea?: ComponentType<BuilderTextAreaProps>;
+    readonly Select?: ComponentType<BuilderSelectProps>;
+    readonly Checkbox?: ComponentType<BuilderCheckboxProps>;
+    readonly Section?: ComponentType<BuilderSectionProps>;
+    readonly Fieldset?: ComponentType<BuilderFieldsetProps>;
+    readonly ErrorMessage?: ComponentType<{
+        readonly message: string;
+    }>;
+}
+type FormBuilderActions = Omit<FormBuilderResult, "schema" | "validationIssues">;
+interface BuilderSlotBaseProps {
+    readonly schema: FormSchema;
+    readonly readOnly: boolean;
+    readonly actions: FormBuilderActions;
+    readonly components: Required<FormBuilderComponents>;
+}
+interface BuilderToolbarSlotProps extends BuilderSlotBaseProps {
+    readonly kind: "page" | "field" | "option";
+    readonly targetId: string;
+    readonly index: number;
+    readonly total: number;
+    readonly title: string;
+    readonly onMoveUp: () => void;
+    readonly onMoveDown: () => void;
+    readonly onRemove: () => void;
+}
+interface BuilderFieldEditorSlotProps extends BuilderSlotBaseProps {
+    readonly field: FormField;
+    readonly index: number;
+    readonly currentLocale: string;
+    readonly policy?: FormPolicy;
+}
+interface BuilderOptionEditorSlotProps extends BuilderSlotBaseProps {
+    readonly field: FormField & {
+        readonly options: readonly FieldOption[];
+    };
+    readonly option: FieldOption;
+    readonly index: number;
+    readonly currentLocale: string;
+}
+interface BuilderPagesSlotProps extends BuilderSlotBaseProps {
+    readonly currentLocale: string;
+}
+interface BuilderLocalizationSlotProps extends BuilderSlotBaseProps {
+    readonly currentLocale: string;
+    readonly onCurrentLocaleChange: (locale: string) => void;
+    readonly onAutoTranslate: () => void;
+    readonly isTranslating: boolean;
+    readonly translationError?: string;
+}
+interface BuilderTranslationActionsSlotProps extends BuilderSlotBaseProps {
+    readonly currentLocale: string;
+    readonly onAutoTranslate: () => void;
+    readonly isTranslating: boolean;
+}
+interface FormBuilderSlots {
+    readonly toolbar?: ComponentType<BuilderToolbarSlotProps>;
+    readonly fieldEditor?: ComponentType<BuilderFieldEditorSlotProps>;
+    readonly optionEditor?: ComponentType<BuilderOptionEditorSlotProps>;
+    readonly pages?: ComponentType<BuilderPagesSlotProps>;
+    readonly localization?: ComponentType<BuilderLocalizationSlotProps>;
+    readonly translationActions?: ComponentType<BuilderTranslationActionsSlotProps>;
+}
 interface BuilderActionContext {
     readonly action: "addField" | "removeField" | "moveField" | "changeFieldType" | "updateField" | "addOption" | "removeOption" | "moveOption" | "updateOption" | "addPage" | "removePage" | "movePage" | "updatePage" | "assignFieldToPage" | "addLocale" | "setDefaultLocale" | "setDisplayCondition" | "setSourceText" | "setLocaleTranslation";
     readonly targetId?: string;
@@ -173,8 +309,10 @@ interface FormBuilderProps {
     readonly createManualTranslationMetadata?: (context: ManualTranslationContext) => Readonly<Record<string, JsonValue>> | undefined;
     readonly readOnly?: boolean;
     readonly features?: FormBuilderFeatures;
+    readonly components?: FormBuilderComponents;
+    readonly slots?: FormBuilderSlots;
 }
-declare function FormBuilder({ schema, onChange, locale, translator, translationAdapter, translationOptions, onTranslationReport, policy, idFactory, factories, className, defaultFieldType, onActionError, createManualTranslationMetadata, readOnly, features }: FormBuilderProps): react.JSX.Element;
+declare function FormBuilder({ schema, onChange, locale, translator, translationAdapter, translationOptions, onTranslationReport, policy, idFactory, factories, className, defaultFieldType, onActionError, createManualTranslationMetadata, readOnly, features, components: componentOverrides, slots }: FormBuilderProps): react.JSX.Element;
 
 type SubmitStatus = "idle" | "submitting" | "success" | "error";
 interface FormContextValue {
@@ -246,4 +384,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderFactories, type BuilderIdKind, type BuilderPolicy, type BuilderTextTarget, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };
+export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSlots, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { ReactNode, ComponentType } from 'react';
-import { QuestionType, FormField, ChoiceOption, FormPage, FormPolicy, FormSchema, DisplayCondition, JsonValue, SchemaIssue, ValidationError, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, TranslationReport, FormValue, ValidationIssue, FormValues, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
+import { ReactNode, ComponentType, MouseEvent } from 'react';
+import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, FieldOption, ValidationError, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, TranslationReport, FormValue, ValidationIssue, FormValues, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
 
 /** @deprecated Import FormPolicy from @form-engine-ts/core instead. */
 type BuilderPolicy = FormPolicy;
@@ -84,6 +84,142 @@ interface FormBuilderResult {
 }
 declare function useFormBuilder({ schema, onChange, policy, idFactory, factories }: FormBuilderOptions): FormBuilderResult;
 
+interface ComponentBaseProps {
+    readonly id?: string;
+    readonly className?: string;
+    readonly disabled?: boolean;
+    readonly readOnly?: boolean;
+    readonly "aria-label"?: string;
+}
+interface BuilderButtonProps extends ComponentBaseProps {
+    readonly onClick?: () => void;
+    readonly variant?: "primary" | "secondary" | "danger";
+    readonly children: ReactNode;
+    readonly title?: string;
+    readonly action?: string;
+    readonly targetId?: string;
+}
+interface BuilderIconButtonProps extends ComponentBaseProps {
+    readonly onClick?: () => void;
+    readonly icon: string;
+    readonly title: string;
+}
+interface BuilderTextInputProps extends ComponentBaseProps {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    readonly placeholder?: string;
+    readonly maxLength?: number;
+    readonly inputMode?: "text" | "numeric";
+    readonly type?: "text" | "number";
+    readonly min?: number;
+    readonly max?: number;
+    readonly step?: number;
+}
+interface BuilderTextAreaProps extends ComponentBaseProps {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    readonly rows?: number;
+    readonly placeholder?: string;
+    readonly maxLength?: number;
+}
+interface BuilderSelectOption {
+    readonly label: string;
+    readonly value: string;
+    readonly disabled?: boolean;
+}
+interface BuilderSelectProps extends ComponentBaseProps {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    readonly options: readonly BuilderSelectOption[];
+}
+interface BuilderCheckboxProps extends ComponentBaseProps {
+    readonly checked: boolean;
+    readonly onChange: (checked: boolean) => void;
+    readonly label: string;
+}
+interface BuilderSectionProps {
+    readonly id?: string;
+    readonly className?: string;
+    readonly title?: string;
+    readonly description?: string;
+    readonly headingId?: string;
+    readonly "aria-label"?: string;
+    readonly onClickCapture?: (event: MouseEvent<HTMLElement>) => void;
+    readonly children: ReactNode;
+}
+interface BuilderFieldsetProps {
+    readonly className?: string;
+    readonly legend?: string;
+    readonly disabled?: boolean;
+    readonly children: ReactNode;
+}
+interface FormBuilderComponents {
+    readonly Button?: ComponentType<BuilderButtonProps>;
+    readonly IconButton?: ComponentType<BuilderIconButtonProps>;
+    readonly TextInput?: ComponentType<BuilderTextInputProps>;
+    readonly TextArea?: ComponentType<BuilderTextAreaProps>;
+    readonly Select?: ComponentType<BuilderSelectProps>;
+    readonly Checkbox?: ComponentType<BuilderCheckboxProps>;
+    readonly Section?: ComponentType<BuilderSectionProps>;
+    readonly Fieldset?: ComponentType<BuilderFieldsetProps>;
+    readonly ErrorMessage?: ComponentType<{
+        readonly message: string;
+    }>;
+}
+type FormBuilderActions = Omit<FormBuilderResult, "schema" | "validationIssues">;
+interface BuilderSlotBaseProps {
+    readonly schema: FormSchema;
+    readonly readOnly: boolean;
+    readonly actions: FormBuilderActions;
+    readonly components: Required<FormBuilderComponents>;
+}
+interface BuilderToolbarSlotProps extends BuilderSlotBaseProps {
+    readonly kind: "page" | "field" | "option";
+    readonly targetId: string;
+    readonly index: number;
+    readonly total: number;
+    readonly title: string;
+    readonly onMoveUp: () => void;
+    readonly onMoveDown: () => void;
+    readonly onRemove: () => void;
+}
+interface BuilderFieldEditorSlotProps extends BuilderSlotBaseProps {
+    readonly field: FormField;
+    readonly index: number;
+    readonly currentLocale: string;
+    readonly policy?: FormPolicy;
+}
+interface BuilderOptionEditorSlotProps extends BuilderSlotBaseProps {
+    readonly field: FormField & {
+        readonly options: readonly FieldOption[];
+    };
+    readonly option: FieldOption;
+    readonly index: number;
+    readonly currentLocale: string;
+}
+interface BuilderPagesSlotProps extends BuilderSlotBaseProps {
+    readonly currentLocale: string;
+}
+interface BuilderLocalizationSlotProps extends BuilderSlotBaseProps {
+    readonly currentLocale: string;
+    readonly onCurrentLocaleChange: (locale: string) => void;
+    readonly onAutoTranslate: () => void;
+    readonly isTranslating: boolean;
+    readonly translationError?: string;
+}
+interface BuilderTranslationActionsSlotProps extends BuilderSlotBaseProps {
+    readonly currentLocale: string;
+    readonly onAutoTranslate: () => void;
+    readonly isTranslating: boolean;
+}
+interface FormBuilderSlots {
+    readonly toolbar?: ComponentType<BuilderToolbarSlotProps>;
+    readonly fieldEditor?: ComponentType<BuilderFieldEditorSlotProps>;
+    readonly optionEditor?: ComponentType<BuilderOptionEditorSlotProps>;
+    readonly pages?: ComponentType<BuilderPagesSlotProps>;
+    readonly localization?: ComponentType<BuilderLocalizationSlotProps>;
+    readonly translationActions?: ComponentType<BuilderTranslationActionsSlotProps>;
+}
 interface BuilderActionContext {
     readonly action: "addField" | "removeField" | "moveField" | "changeFieldType" | "updateField" | "addOption" | "removeOption" | "moveOption" | "updateOption" | "addPage" | "removePage" | "movePage" | "updatePage" | "assignFieldToPage" | "addLocale" | "setDefaultLocale" | "setDisplayCondition" | "setSourceText" | "setLocaleTranslation";
     readonly targetId?: string;
@@ -173,8 +309,10 @@ interface FormBuilderProps {
     readonly createManualTranslationMetadata?: (context: ManualTranslationContext) => Readonly<Record<string, JsonValue>> | undefined;
     readonly readOnly?: boolean;
     readonly features?: FormBuilderFeatures;
+    readonly components?: FormBuilderComponents;
+    readonly slots?: FormBuilderSlots;
 }
-declare function FormBuilder({ schema, onChange, locale, translator, translationAdapter, translationOptions, onTranslationReport, policy, idFactory, factories, className, defaultFieldType, onActionError, createManualTranslationMetadata, readOnly, features }: FormBuilderProps): react.JSX.Element;
+declare function FormBuilder({ schema, onChange, locale, translator, translationAdapter, translationOptions, onTranslationReport, policy, idFactory, factories, className, defaultFieldType, onActionError, createManualTranslationMetadata, readOnly, features, components: componentOverrides, slots }: FormBuilderProps): react.JSX.Element;
 
 type SubmitStatus = "idle" | "submitting" | "success" | "error";
 interface FormContextValue {
@@ -246,4 +384,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderFactories, type BuilderIdKind, type BuilderPolicy, type BuilderTextTarget, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };
+export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSlots, type FormContextValue, FormProvider, type FormProviderProps, FormRenderer, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };