@form-engine-ts/react 2.2.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +20 -0
  2. package/dist/index.cjs +959 -435
  3. package/dist/index.d.cts +146 -4
  4. package/dist/index.d.ts +146 -4
  5. package/dist/index.js +964 -439
  6. package/package.json +2 -2
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, ComponentType } from 'react';
3
- 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';
2
+ import { ReactNode, ComponentType, MouseEvent } from 'react';
3
+ import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, FieldOption, TranslationReport, ValidationError, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, ValidationIssue, FormValues, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
4
4
 
5
5
  /** @deprecated Import FormPolicy from @form-engine-ts/core instead. */
6
6
  type BuilderPolicy = FormPolicy;
@@ -84,6 +84,146 @@ interface FormBuilderResult {
84
84
  }
85
85
  declare function useFormBuilder({ schema, onChange, policy, idFactory, factories }: FormBuilderOptions): FormBuilderResult;
86
86
 
87
+ interface ComponentBaseProps {
88
+ readonly id?: string;
89
+ readonly className?: string;
90
+ readonly disabled?: boolean;
91
+ readonly readOnly?: boolean;
92
+ readonly "aria-label"?: string;
93
+ }
94
+ interface BuilderButtonProps extends ComponentBaseProps {
95
+ readonly onClick?: () => void;
96
+ readonly variant?: "primary" | "secondary" | "danger";
97
+ readonly children: ReactNode;
98
+ readonly title?: string;
99
+ readonly action?: string;
100
+ readonly targetId?: string;
101
+ }
102
+ interface BuilderIconButtonProps extends ComponentBaseProps {
103
+ readonly onClick?: () => void;
104
+ readonly icon: string;
105
+ readonly title: string;
106
+ }
107
+ interface InputComponentProps extends ComponentBaseProps {
108
+ readonly name?: string;
109
+ readonly label?: string;
110
+ readonly required?: boolean;
111
+ readonly error?: boolean;
112
+ readonly helperText?: string;
113
+ readonly value: string;
114
+ readonly onChange: (value: string) => void;
115
+ readonly placeholder?: string;
116
+ readonly maxLength?: number;
117
+ }
118
+ interface BuilderTextInputProps extends InputComponentProps {
119
+ readonly inputMode?: "text" | "numeric";
120
+ readonly type?: "text" | "number";
121
+ readonly min?: number;
122
+ readonly max?: number;
123
+ readonly step?: number;
124
+ }
125
+ interface BuilderTextAreaProps extends InputComponentProps {
126
+ readonly rows?: number;
127
+ }
128
+ interface BuilderSelectOption {
129
+ readonly label: string;
130
+ readonly value: string;
131
+ readonly disabled?: boolean;
132
+ }
133
+ interface BuilderSelectProps extends InputComponentProps {
134
+ readonly options: readonly BuilderSelectOption[];
135
+ }
136
+ interface BuilderCheckboxProps extends ComponentBaseProps {
137
+ readonly checked: boolean;
138
+ readonly onChange: (checked: boolean) => void;
139
+ readonly label: string;
140
+ }
141
+ interface BuilderSectionProps {
142
+ readonly id?: string;
143
+ readonly className?: string;
144
+ readonly title?: string;
145
+ readonly description?: string;
146
+ readonly headingId?: string;
147
+ readonly "aria-label"?: string;
148
+ readonly onClickCapture?: (event: MouseEvent<HTMLElement>) => void;
149
+ readonly children: ReactNode;
150
+ }
151
+ interface BuilderFieldsetProps {
152
+ readonly className?: string;
153
+ readonly legend?: string;
154
+ readonly disabled?: boolean;
155
+ readonly children: ReactNode;
156
+ }
157
+ interface FormBuilderComponents {
158
+ readonly Button?: ComponentType<BuilderButtonProps>;
159
+ readonly IconButton?: ComponentType<BuilderIconButtonProps>;
160
+ readonly TextInput?: ComponentType<BuilderTextInputProps>;
161
+ readonly TextArea?: ComponentType<BuilderTextAreaProps>;
162
+ readonly Select?: ComponentType<BuilderSelectProps>;
163
+ readonly Checkbox?: ComponentType<BuilderCheckboxProps>;
164
+ readonly Section?: ComponentType<BuilderSectionProps>;
165
+ readonly Fieldset?: ComponentType<BuilderFieldsetProps>;
166
+ readonly ErrorMessage?: ComponentType<{
167
+ readonly message: string;
168
+ }>;
169
+ }
170
+ type FormBuilderActions = Omit<FormBuilderResult, "schema" | "validationIssues">;
171
+ interface BuilderSlotBaseProps {
172
+ readonly schema: FormSchema;
173
+ readonly readOnly: boolean;
174
+ readonly actions: FormBuilderActions;
175
+ readonly components: Required<FormBuilderComponents>;
176
+ }
177
+ interface BuilderToolbarSlotProps extends BuilderSlotBaseProps {
178
+ readonly kind: "page" | "field" | "option";
179
+ readonly targetId: string;
180
+ readonly index: number;
181
+ readonly total: number;
182
+ readonly title: string;
183
+ readonly onMoveUp: () => void;
184
+ readonly onMoveDown: () => void;
185
+ readonly onRemove: () => void;
186
+ }
187
+ interface BuilderFieldEditorSlotProps extends BuilderSlotBaseProps {
188
+ readonly field: FormField;
189
+ readonly index: number;
190
+ readonly currentLocale: string;
191
+ readonly policy?: FormPolicy;
192
+ }
193
+ interface BuilderOptionEditorSlotProps extends BuilderSlotBaseProps {
194
+ readonly field: FormField & {
195
+ readonly options: readonly FieldOption[];
196
+ };
197
+ readonly option: FieldOption;
198
+ readonly index: number;
199
+ readonly currentLocale: string;
200
+ }
201
+ interface BuilderPagesSlotProps extends BuilderSlotBaseProps {
202
+ readonly currentLocale: string;
203
+ }
204
+ interface BuilderLocalizationSlotProps extends BuilderSlotBaseProps {
205
+ readonly currentLocale: string;
206
+ readonly onCurrentLocaleChange: (locale: string) => void;
207
+ readonly onAutoTranslate: () => void;
208
+ readonly isTranslating: boolean;
209
+ readonly translationError?: string;
210
+ }
211
+ interface BuilderTranslationActionsSlotProps extends BuilderSlotBaseProps {
212
+ readonly currentLocale: string;
213
+ readonly onAutoTranslate: () => void;
214
+ readonly isTranslating: boolean;
215
+ readonly translationError?: string;
216
+ readonly translationReport?: TranslationReport;
217
+ readonly onClearTranslationError?: () => void;
218
+ }
219
+ interface FormBuilderSlots {
220
+ readonly toolbar?: ComponentType<BuilderToolbarSlotProps>;
221
+ readonly fieldEditor?: ComponentType<BuilderFieldEditorSlotProps>;
222
+ readonly optionEditor?: ComponentType<BuilderOptionEditorSlotProps>;
223
+ readonly pages?: ComponentType<BuilderPagesSlotProps>;
224
+ readonly localization?: ComponentType<BuilderLocalizationSlotProps>;
225
+ readonly translationActions?: ComponentType<BuilderTranslationActionsSlotProps>;
226
+ }
87
227
  interface BuilderActionContext {
88
228
  readonly action: "addField" | "removeField" | "moveField" | "changeFieldType" | "updateField" | "addOption" | "removeOption" | "moveOption" | "updateOption" | "addPage" | "removePage" | "movePage" | "updatePage" | "assignFieldToPage" | "addLocale" | "setDefaultLocale" | "setDisplayCondition" | "setSourceText" | "setLocaleTranslation";
89
229
  readonly targetId?: string;
@@ -173,8 +313,10 @@ interface FormBuilderProps {
173
313
  readonly createManualTranslationMetadata?: (context: ManualTranslationContext) => Readonly<Record<string, JsonValue>> | undefined;
174
314
  readonly readOnly?: boolean;
175
315
  readonly features?: FormBuilderFeatures;
316
+ readonly components?: FormBuilderComponents;
317
+ readonly slots?: FormBuilderSlots;
176
318
  }
177
- declare function FormBuilder({ schema, onChange, locale, translator, translationAdapter, translationOptions, onTranslationReport, policy, idFactory, factories, className, defaultFieldType, onActionError, createManualTranslationMetadata, readOnly, features }: FormBuilderProps): react.JSX.Element;
319
+ 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;
178
320
 
179
321
  type SubmitStatus = "idle" | "submitting" | "success" | "error";
180
322
  interface FormContextValue {
@@ -246,4 +388,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
246
388
  type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
247
389
  declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
248
390
 
249
- 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 };
391
+ 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 InputComponentProps, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, ComponentType } from 'react';
3
- 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';
2
+ import { ReactNode, ComponentType, MouseEvent } from 'react';
3
+ import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, FieldOption, TranslationReport, ValidationError, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, ValidationIssue, FormValues, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
4
4
 
5
5
  /** @deprecated Import FormPolicy from @form-engine-ts/core instead. */
6
6
  type BuilderPolicy = FormPolicy;
@@ -84,6 +84,146 @@ interface FormBuilderResult {
84
84
  }
85
85
  declare function useFormBuilder({ schema, onChange, policy, idFactory, factories }: FormBuilderOptions): FormBuilderResult;
86
86
 
87
+ interface ComponentBaseProps {
88
+ readonly id?: string;
89
+ readonly className?: string;
90
+ readonly disabled?: boolean;
91
+ readonly readOnly?: boolean;
92
+ readonly "aria-label"?: string;
93
+ }
94
+ interface BuilderButtonProps extends ComponentBaseProps {
95
+ readonly onClick?: () => void;
96
+ readonly variant?: "primary" | "secondary" | "danger";
97
+ readonly children: ReactNode;
98
+ readonly title?: string;
99
+ readonly action?: string;
100
+ readonly targetId?: string;
101
+ }
102
+ interface BuilderIconButtonProps extends ComponentBaseProps {
103
+ readonly onClick?: () => void;
104
+ readonly icon: string;
105
+ readonly title: string;
106
+ }
107
+ interface InputComponentProps extends ComponentBaseProps {
108
+ readonly name?: string;
109
+ readonly label?: string;
110
+ readonly required?: boolean;
111
+ readonly error?: boolean;
112
+ readonly helperText?: string;
113
+ readonly value: string;
114
+ readonly onChange: (value: string) => void;
115
+ readonly placeholder?: string;
116
+ readonly maxLength?: number;
117
+ }
118
+ interface BuilderTextInputProps extends InputComponentProps {
119
+ readonly inputMode?: "text" | "numeric";
120
+ readonly type?: "text" | "number";
121
+ readonly min?: number;
122
+ readonly max?: number;
123
+ readonly step?: number;
124
+ }
125
+ interface BuilderTextAreaProps extends InputComponentProps {
126
+ readonly rows?: number;
127
+ }
128
+ interface BuilderSelectOption {
129
+ readonly label: string;
130
+ readonly value: string;
131
+ readonly disabled?: boolean;
132
+ }
133
+ interface BuilderSelectProps extends InputComponentProps {
134
+ readonly options: readonly BuilderSelectOption[];
135
+ }
136
+ interface BuilderCheckboxProps extends ComponentBaseProps {
137
+ readonly checked: boolean;
138
+ readonly onChange: (checked: boolean) => void;
139
+ readonly label: string;
140
+ }
141
+ interface BuilderSectionProps {
142
+ readonly id?: string;
143
+ readonly className?: string;
144
+ readonly title?: string;
145
+ readonly description?: string;
146
+ readonly headingId?: string;
147
+ readonly "aria-label"?: string;
148
+ readonly onClickCapture?: (event: MouseEvent<HTMLElement>) => void;
149
+ readonly children: ReactNode;
150
+ }
151
+ interface BuilderFieldsetProps {
152
+ readonly className?: string;
153
+ readonly legend?: string;
154
+ readonly disabled?: boolean;
155
+ readonly children: ReactNode;
156
+ }
157
+ interface FormBuilderComponents {
158
+ readonly Button?: ComponentType<BuilderButtonProps>;
159
+ readonly IconButton?: ComponentType<BuilderIconButtonProps>;
160
+ readonly TextInput?: ComponentType<BuilderTextInputProps>;
161
+ readonly TextArea?: ComponentType<BuilderTextAreaProps>;
162
+ readonly Select?: ComponentType<BuilderSelectProps>;
163
+ readonly Checkbox?: ComponentType<BuilderCheckboxProps>;
164
+ readonly Section?: ComponentType<BuilderSectionProps>;
165
+ readonly Fieldset?: ComponentType<BuilderFieldsetProps>;
166
+ readonly ErrorMessage?: ComponentType<{
167
+ readonly message: string;
168
+ }>;
169
+ }
170
+ type FormBuilderActions = Omit<FormBuilderResult, "schema" | "validationIssues">;
171
+ interface BuilderSlotBaseProps {
172
+ readonly schema: FormSchema;
173
+ readonly readOnly: boolean;
174
+ readonly actions: FormBuilderActions;
175
+ readonly components: Required<FormBuilderComponents>;
176
+ }
177
+ interface BuilderToolbarSlotProps extends BuilderSlotBaseProps {
178
+ readonly kind: "page" | "field" | "option";
179
+ readonly targetId: string;
180
+ readonly index: number;
181
+ readonly total: number;
182
+ readonly title: string;
183
+ readonly onMoveUp: () => void;
184
+ readonly onMoveDown: () => void;
185
+ readonly onRemove: () => void;
186
+ }
187
+ interface BuilderFieldEditorSlotProps extends BuilderSlotBaseProps {
188
+ readonly field: FormField;
189
+ readonly index: number;
190
+ readonly currentLocale: string;
191
+ readonly policy?: FormPolicy;
192
+ }
193
+ interface BuilderOptionEditorSlotProps extends BuilderSlotBaseProps {
194
+ readonly field: FormField & {
195
+ readonly options: readonly FieldOption[];
196
+ };
197
+ readonly option: FieldOption;
198
+ readonly index: number;
199
+ readonly currentLocale: string;
200
+ }
201
+ interface BuilderPagesSlotProps extends BuilderSlotBaseProps {
202
+ readonly currentLocale: string;
203
+ }
204
+ interface BuilderLocalizationSlotProps extends BuilderSlotBaseProps {
205
+ readonly currentLocale: string;
206
+ readonly onCurrentLocaleChange: (locale: string) => void;
207
+ readonly onAutoTranslate: () => void;
208
+ readonly isTranslating: boolean;
209
+ readonly translationError?: string;
210
+ }
211
+ interface BuilderTranslationActionsSlotProps extends BuilderSlotBaseProps {
212
+ readonly currentLocale: string;
213
+ readonly onAutoTranslate: () => void;
214
+ readonly isTranslating: boolean;
215
+ readonly translationError?: string;
216
+ readonly translationReport?: TranslationReport;
217
+ readonly onClearTranslationError?: () => void;
218
+ }
219
+ interface FormBuilderSlots {
220
+ readonly toolbar?: ComponentType<BuilderToolbarSlotProps>;
221
+ readonly fieldEditor?: ComponentType<BuilderFieldEditorSlotProps>;
222
+ readonly optionEditor?: ComponentType<BuilderOptionEditorSlotProps>;
223
+ readonly pages?: ComponentType<BuilderPagesSlotProps>;
224
+ readonly localization?: ComponentType<BuilderLocalizationSlotProps>;
225
+ readonly translationActions?: ComponentType<BuilderTranslationActionsSlotProps>;
226
+ }
87
227
  interface BuilderActionContext {
88
228
  readonly action: "addField" | "removeField" | "moveField" | "changeFieldType" | "updateField" | "addOption" | "removeOption" | "moveOption" | "updateOption" | "addPage" | "removePage" | "movePage" | "updatePage" | "assignFieldToPage" | "addLocale" | "setDefaultLocale" | "setDisplayCondition" | "setSourceText" | "setLocaleTranslation";
89
229
  readonly targetId?: string;
@@ -173,8 +313,10 @@ interface FormBuilderProps {
173
313
  readonly createManualTranslationMetadata?: (context: ManualTranslationContext) => Readonly<Record<string, JsonValue>> | undefined;
174
314
  readonly readOnly?: boolean;
175
315
  readonly features?: FormBuilderFeatures;
316
+ readonly components?: FormBuilderComponents;
317
+ readonly slots?: FormBuilderSlots;
176
318
  }
177
- declare function FormBuilder({ schema, onChange, locale, translator, translationAdapter, translationOptions, onTranslationReport, policy, idFactory, factories, className, defaultFieldType, onActionError, createManualTranslationMetadata, readOnly, features }: FormBuilderProps): react.JSX.Element;
319
+ 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;
178
320
 
179
321
  type SubmitStatus = "idle" | "submitting" | "success" | "error";
180
322
  interface FormContextValue {
@@ -246,4 +388,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
246
388
  type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
247
389
  declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
248
390
 
249
- 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 };
391
+ 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 InputComponentProps, type ManualTranslationContext, type StandaloneFormRendererProps, type SubmitResult, type SubmitStatus, resolveInitialFieldType, useField, useForm, useFormBuilder };