@akad/form-builder 1.0.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.
- package/components/FormBuilder/FormBuilder.config.d.ts +333 -0
- package/components/FormBuilder/FormBuilder.d.ts +31 -0
- package/components/FormBuilder/components/AddressFormGroup/AddressFormGroup.d.ts +53 -0
- package/components/FormBuilder/components/AddressFormGroup/AddressFormGroup.test.d.ts +1 -0
- package/components/FormBuilder/components/AddressFormGroup/index.d.ts +4 -0
- package/components/FormBuilder/components/FieldRenderer/FieldRenderer.d.ts +39 -0
- package/components/FormBuilder/components/FieldRenderer/FieldRenderer.test.d.ts +1 -0
- package/components/FormBuilder/components/FieldRenderer/index.d.ts +3 -0
- package/components/FormBuilder/components/GenericWrapper/GenericWrapper.d.ts +61 -0
- package/components/FormBuilder/components/GenericWrapper/GenericWrapper.test.d.ts +1 -0
- package/components/FormBuilder/components/GenericWrapper/index.d.ts +4 -0
- package/components/FormBuilder/components/RadioGroup/RadioGroup.d.ts +67 -0
- package/components/FormBuilder/components/RadioGroup/RadioGroup.test.d.ts +1 -0
- package/components/FormBuilder/components/RadioGroup/index.d.ts +4 -0
- package/components/FormBuilder/hooks/useForm.d.ts +30 -0
- package/components/FormBuilder/hooks/useForm.test.d.ts +1 -0
- package/components/FormBuilder/hooks/useFormParser.d.ts +7 -0
- package/components/FormBuilder/hooks/useFormParser.test.d.ts +1 -0
- package/components/FormBuilder/hooks/useFormState.d.ts +28 -0
- package/components/FormBuilder/hooks/useFormState.test.d.ts +1 -0
- package/components/FormBuilder/hooks/useFormStepper.d.ts +64 -0
- package/components/FormBuilder/hooks/useFormStepper.test.d.ts +1 -0
- package/components/FormBuilder/hooks/useFormValidation.d.ts +7 -0
- package/components/FormBuilder/hooks/useFormValidation.test.d.ts +1 -0
- package/components/FormBuilder/index.d.ts +27 -0
- package/components/FormBuilder/utils/ajv/formats.d.ts +27 -0
- package/components/FormBuilder/utils/ajv/formats.test.d.ts +1 -0
- package/components/FormBuilder/utils/ajv/instance.d.ts +2 -0
- package/components/FormBuilder/utils/ajv/instance.test.d.ts +1 -0
- package/components/FormBuilder/utils/componentDetection.d.ts +24 -0
- package/components/FormBuilder/utils/componentDetection.test.d.ts +1 -0
- package/components/FormBuilder/utils/componentRegistry.d.ts +10 -0
- package/components/FormBuilder/utils/componentRegistry.test.d.ts +1 -0
- package/components/FormBuilder/utils/facade/AddressFormLegacy.d.ts +20 -0
- package/components/FormBuilder/utils/facade/AddressFormLegacy.test.d.ts +1 -0
- package/components/FormBuilder/utils/facade/PaymentOptionsLegacy.d.ts +22 -0
- package/components/FormBuilder/utils/facade/PaymentOptionsLegacy.test.d.ts +1 -0
- package/components/FormBuilder/utils/facade/index.d.ts +6 -0
- package/components/FormBuilder/utils/facade/makeFullFormHookFacade.d.ts +111 -0
- package/components/FormBuilder/utils/facade/makeFullFormHookFacade.test.d.ts +1 -0
- package/components/FormBuilder/utils/facade/useLegacyFormHook.d.ts +45 -0
- package/components/FormBuilder/utils/facade/useLegacyFormHook.test.d.ts +1 -0
- package/components/FormBuilder/utils/fieldExtractors.d.ts +68 -0
- package/components/FormBuilder/utils/fieldExtractors.test.d.ts +1 -0
- package/components/FormBuilder/utils/generateFieldsFromSchema.d.ts +67 -0
- package/components/FormBuilder/utils/generateFieldsFromSchema.test.d.ts +1 -0
- package/components/FormBuilder/utils/objectAccess.d.ts +7 -0
- package/components/FormBuilder/utils/objectAccess.test.d.ts +1 -0
- package/components/FormBuilder/utils/schemaUtils.d.ts +113 -0
- package/components/FormBuilder/utils/schemaUtils.test.d.ts +1 -0
- package/components/FormBuilder/utils/typeCoercion.d.ts +57 -0
- package/components/FormBuilder/utils/typeCoercion.test.d.ts +1 -0
- package/components/index.d.ts +2 -0
- package/main.d.ts +1 -0
- package/main.test.d.ts +1 -0
- package/package.json +13 -0
- package/react-lib.css +1 -0
- package/react-lib.js +72330 -0
- package/react-lib.umd.cjs +215 -0
- package/vite.svg +1 -0
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { UseFormStateConfig, UseFormStateReturn } from '../FormBuilder.config';
|
|
2
|
+
/**
|
|
3
|
+
* Hook for form state management without validation or parsing logic
|
|
4
|
+
* @description Manages form data state, dirty/touched tracking, and field updates with dot notation support for nested objects
|
|
5
|
+
* @param config UseFormStateConfig with initialData and deepEqual options
|
|
6
|
+
* @returns UseFormStateReturn with form state and manipulation functions
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* const state = useFormState({
|
|
10
|
+
* initialData: { name: '', email: '' },
|
|
11
|
+
* deepEqual: false
|
|
12
|
+
* });
|
|
13
|
+
*
|
|
14
|
+
* // Update fields
|
|
15
|
+
* state.setField('name', 'John');
|
|
16
|
+
* state.setField('user.address.street', '123 Main St'); // nested objects with dot notation
|
|
17
|
+
*
|
|
18
|
+
* // Check state
|
|
19
|
+
* console.log(state.isDirty); // true
|
|
20
|
+
* console.log(state.formData); // { name: 'John', user: { address: { street: '123 Main St' } } }
|
|
21
|
+
*
|
|
22
|
+
* // Clear or reset
|
|
23
|
+
* state.clearForm(); // Empty state
|
|
24
|
+
* state.resetForm(); // Back to initialData
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
export declare const useFormState: (config?: UseFormStateConfig) => UseFormStateReturn;
|
|
28
|
+
export default useFormState;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { JSONSchema7 } from 'json-schema';
|
|
2
|
+
import { useForm } from './useForm';
|
|
3
|
+
/**
|
|
4
|
+
* Helper to create step-specific schema from fields
|
|
5
|
+
* Extracts only the fields needed for current step
|
|
6
|
+
* Supports nested fields with dot notation (e.g., 'insured.address.postCode')
|
|
7
|
+
*/
|
|
8
|
+
export declare const createStepSchema: (fields: string[], dataSchema: JSONSchema7) => JSONSchema7;
|
|
9
|
+
/**
|
|
10
|
+
* Form stepper step configuration
|
|
11
|
+
*/
|
|
12
|
+
export interface FormStepperStep {
|
|
13
|
+
id: string;
|
|
14
|
+
title: string;
|
|
15
|
+
subtitle?: string;
|
|
16
|
+
icon?: string;
|
|
17
|
+
fields: string[];
|
|
18
|
+
schema: JSONSchema7;
|
|
19
|
+
uiSchema?: Record<string, unknown>;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Form stepper configuration
|
|
23
|
+
*/
|
|
24
|
+
export interface UseFormStepperConfig {
|
|
25
|
+
steps: FormStepperStep[];
|
|
26
|
+
dataSchema: JSONSchema7;
|
|
27
|
+
initialData?: Record<string, unknown>;
|
|
28
|
+
onSubmit?: (data: Record<string, unknown>) => void | Promise<void>;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Form stepper return type
|
|
32
|
+
*/
|
|
33
|
+
export interface UseFormStepperReturn {
|
|
34
|
+
currentStep: number;
|
|
35
|
+
currentStepConfig: FormStepperStep;
|
|
36
|
+
completedSteps: Set<number>;
|
|
37
|
+
form: ReturnType<typeof useForm>;
|
|
38
|
+
isStepValid: boolean;
|
|
39
|
+
validateStep: (stepIndex: number) => boolean;
|
|
40
|
+
goNext: () => void;
|
|
41
|
+
goPrev: () => void;
|
|
42
|
+
goTo: (stepIndex: number) => void;
|
|
43
|
+
canGoNext: boolean;
|
|
44
|
+
canGoPrev: boolean;
|
|
45
|
+
canGoTo: (stepIndex: number) => boolean;
|
|
46
|
+
isFirstStep: boolean;
|
|
47
|
+
isLastStep: boolean;
|
|
48
|
+
totalSteps: number;
|
|
49
|
+
progress: number;
|
|
50
|
+
submit: () => Promise<void>;
|
|
51
|
+
reset: () => void;
|
|
52
|
+
createStepSchema: (fields: string[], dataSchema: JSONSchema7) => JSONSchema7;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Hook for managing multi-step forms with DsStepper integration
|
|
56
|
+
*
|
|
57
|
+
* Simple, clean architecture:
|
|
58
|
+
* - No infinite loops
|
|
59
|
+
* - Inline validation
|
|
60
|
+
* - Direct state control
|
|
61
|
+
* - Works perfectly with DsStepper
|
|
62
|
+
*/
|
|
63
|
+
export declare const useFormStepper: (config: UseFormStepperConfig) => UseFormStepperReturn;
|
|
64
|
+
export default useFormStepper;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { UseFormValidationConfig, UseFormValidationReturn } from '../FormBuilder.config';
|
|
2
|
+
/**
|
|
3
|
+
* Hook for form validation using JSON Schema and custom validators
|
|
4
|
+
* Implements two-layer validation system for optimal performance
|
|
5
|
+
*/
|
|
6
|
+
export declare const useFormValidation: (config: UseFormValidationConfig) => UseFormValidationReturn;
|
|
7
|
+
export default useFormValidation;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { default as FieldRenderer } from './components/FieldRenderer';
|
|
2
|
+
import { GenericWrapper } from './components/GenericWrapper';
|
|
3
|
+
import { default as RadioGroup } from './components/RadioGroup/RadioGroup';
|
|
4
|
+
import { default as FormBuilderComponent } from './FormBuilder';
|
|
5
|
+
import { default as useForm } from './hooks/useForm';
|
|
6
|
+
import { default as useFormParser } from './hooks/useFormParser';
|
|
7
|
+
import { default as useFormState } from './hooks/useFormState';
|
|
8
|
+
import { default as useFormStepper } from './hooks/useFormStepper';
|
|
9
|
+
import { default as useFormValidation } from './hooks/useFormValidation';
|
|
10
|
+
import { resolveComponent } from './utils/componentRegistry';
|
|
11
|
+
import { default as generateFieldsFromSchema, processWrapperChildren } from './utils/generateFieldsFromSchema';
|
|
12
|
+
declare const FormBuilder: typeof FormBuilderComponent & {
|
|
13
|
+
useForm: typeof useForm;
|
|
14
|
+
useFormState: typeof useFormState;
|
|
15
|
+
useFormValidation: typeof useFormValidation;
|
|
16
|
+
useFormParser: typeof useFormParser;
|
|
17
|
+
useFormStepper: typeof useFormStepper;
|
|
18
|
+
generateFieldsFromSchema: typeof generateFieldsFromSchema;
|
|
19
|
+
processWrapperChildren: typeof processWrapperChildren;
|
|
20
|
+
resolveComponent: typeof resolveComponent;
|
|
21
|
+
FieldRenderer: typeof FieldRenderer;
|
|
22
|
+
GenericWrapper: typeof GenericWrapper;
|
|
23
|
+
};
|
|
24
|
+
export { FormBuilder, useForm, GenericWrapper, RadioGroup };
|
|
25
|
+
export type { FormBuilderProps, UseFormConfig, UseFormReturn, FieldConfig, ComponentProps, UISchema, ValidationResult, FieldError, } from './FormBuilder.config';
|
|
26
|
+
export type { GenericWrapperProps } from './components/GenericWrapper';
|
|
27
|
+
export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { cnpjValidator, cpfCnpjValidator, cpfValidator, emailValidator, phoneBrValidator } from '@akad/helptils';
|
|
2
|
+
export declare const RegularExpressions: {
|
|
3
|
+
'zip-code': {
|
|
4
|
+
type: string;
|
|
5
|
+
validate: string;
|
|
6
|
+
};
|
|
7
|
+
cnpj: {
|
|
8
|
+
type: string;
|
|
9
|
+
validate: typeof cnpjValidator;
|
|
10
|
+
};
|
|
11
|
+
email: {
|
|
12
|
+
type: string;
|
|
13
|
+
validate: typeof emailValidator;
|
|
14
|
+
};
|
|
15
|
+
'phone-br': {
|
|
16
|
+
type: string;
|
|
17
|
+
validate: typeof phoneBrValidator;
|
|
18
|
+
};
|
|
19
|
+
cpf: {
|
|
20
|
+
type: string;
|
|
21
|
+
validate: typeof cpfValidator;
|
|
22
|
+
};
|
|
23
|
+
'cpf-cnpj': {
|
|
24
|
+
type: string;
|
|
25
|
+
validate: typeof cpfCnpjValidator;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ComponentType, ComponentDetectionRule } from '../FormBuilder.config';
|
|
2
|
+
/**
|
|
3
|
+
* Schema-to-Component detection mapping
|
|
4
|
+
* @description Maps JSON Schema types to appropriate UI components with conditions
|
|
5
|
+
*/
|
|
6
|
+
export declare const SCHEMA_COMPONENT_MAP: Record<string, ComponentDetectionRule>;
|
|
7
|
+
/**
|
|
8
|
+
* Detect appropriate UI component based on JSON Schema properties
|
|
9
|
+
* @description Analyzes JSON Schema field properties to determine the best UI component
|
|
10
|
+
* @param fieldSchema JSON Schema field definition with type and constraints
|
|
11
|
+
* @returns Object with detected ComponentType and suggested props
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* detectFieldComponent({ type: 'string', format: 'email' })
|
|
15
|
+
* // returns { component: ComponentType.Input, props: { type: 'email' } }
|
|
16
|
+
*
|
|
17
|
+
* detectFieldComponent({ type: 'string', 'x-options': [...] })
|
|
18
|
+
* // returns { component: ComponentType.Select, props: {} }
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare const detectFieldComponent: (fieldSchema: Record<string, unknown>) => {
|
|
22
|
+
component: ComponentType;
|
|
23
|
+
props: Record<string, unknown>;
|
|
24
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ComponentRegistry, ComponentType, ComponentProps } from '../FormBuilder.config';
|
|
3
|
+
/**
|
|
4
|
+
* Resolve component from registry
|
|
5
|
+
*/
|
|
6
|
+
export declare const resolveComponent: (componentName: ComponentType, customComponents?: ComponentRegistry) => React.ComponentType<ComponentProps>;
|
|
7
|
+
declare const _default: {
|
|
8
|
+
resolveComponent: (componentName: ComponentType, customComponents?: ComponentRegistry) => React.ComponentType<ComponentProps>;
|
|
9
|
+
};
|
|
10
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ComponentProps } from '../../FormBuilder.config';
|
|
3
|
+
import { FBForm } from './makeFullFormHookFacade';
|
|
4
|
+
interface AddressFormLegacyProps extends ComponentProps {
|
|
5
|
+
__form: FBForm;
|
|
6
|
+
__schema: Record<string, unknown>;
|
|
7
|
+
schemaPrefix?: string;
|
|
8
|
+
title?: string;
|
|
9
|
+
getAddress?: (postCode: string) => Promise<unknown>;
|
|
10
|
+
address?: Record<string, unknown>;
|
|
11
|
+
isLoading?: boolean;
|
|
12
|
+
isError?: boolean;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Legacy AddressForm wrapper using FormHook Facade
|
|
17
|
+
* Allows AddressForm (which expects legacy formHook interface) to work with FormBuilder
|
|
18
|
+
*/
|
|
19
|
+
export declare const AddressFormLegacy: React.FC<AddressFormLegacyProps>;
|
|
20
|
+
export default AddressFormLegacy;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ComponentProps } from '../../FormBuilder.config';
|
|
3
|
+
import { FBForm } from './makeFullFormHookFacade';
|
|
4
|
+
interface PaymentOptionsLegacyProps extends ComponentProps {
|
|
5
|
+
__form: FBForm;
|
|
6
|
+
__schema: Record<string, unknown>;
|
|
7
|
+
paymentSummary?: Array<{
|
|
8
|
+
paymentType: string;
|
|
9
|
+
installments: Array<{
|
|
10
|
+
quantity: number;
|
|
11
|
+
amount: number;
|
|
12
|
+
}>;
|
|
13
|
+
}>;
|
|
14
|
+
showDecimals?: boolean;
|
|
15
|
+
currencyType?: string;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Legacy PaymentOptions wrapper using FormHook Facade
|
|
19
|
+
* Allows PaymentOptions (which expects legacy formHook interface) to work with FormBuilder
|
|
20
|
+
*/
|
|
21
|
+
export declare const PaymentOptionsLegacy: React.FC<PaymentOptionsLegacyProps>;
|
|
22
|
+
export default PaymentOptionsLegacy;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { useMakeFullFormHookFacade, makeFullFormHookFacade, } from './makeFullFormHookFacade';
|
|
2
|
+
export { AddressFormLegacy } from './AddressFormLegacy';
|
|
3
|
+
export { PaymentOptionsLegacy } from './PaymentOptionsLegacy';
|
|
4
|
+
export { useLegacyFormHook } from './useLegacyFormHook';
|
|
5
|
+
export type { FBForm, MakeFacadeOptions } from './makeFullFormHookFacade';
|
|
6
|
+
export type { LegacyFormHook } from './useLegacyFormHook';
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
type FieldError = {
|
|
3
|
+
message?: string;
|
|
4
|
+
type?: string;
|
|
5
|
+
};
|
|
6
|
+
export type FBForm = {
|
|
7
|
+
data: Record<string, unknown>;
|
|
8
|
+
setField: (path: string, value: unknown) => void;
|
|
9
|
+
setData: (data: Record<string, unknown>) => void;
|
|
10
|
+
clear?: () => void;
|
|
11
|
+
reset?: () => void;
|
|
12
|
+
validate?: () => Promise<{
|
|
13
|
+
isValid: boolean;
|
|
14
|
+
errors?: Record<string, FieldError>;
|
|
15
|
+
}>;
|
|
16
|
+
validateField: (name: string) => {
|
|
17
|
+
isValid: boolean;
|
|
18
|
+
error?: FieldError;
|
|
19
|
+
};
|
|
20
|
+
onBlur: (name: string) => void;
|
|
21
|
+
errors: Record<string, FieldError>;
|
|
22
|
+
isDirty?: boolean;
|
|
23
|
+
touched?: Record<string, boolean>;
|
|
24
|
+
};
|
|
25
|
+
export type MakeFacadeOptions = {
|
|
26
|
+
ajvInstance?: unknown;
|
|
27
|
+
requireTouchedForStatus?: boolean;
|
|
28
|
+
};
|
|
29
|
+
export declare function useMakeFullFormHookFacade({ form, schema, options, }: {
|
|
30
|
+
form: FBForm;
|
|
31
|
+
schema: Record<string, unknown>;
|
|
32
|
+
options?: MakeFacadeOptions;
|
|
33
|
+
}): {
|
|
34
|
+
getFormSchema: () => Record<string, unknown>;
|
|
35
|
+
getFormData: Record<string, unknown>;
|
|
36
|
+
getInputSchema: (name: string) => Record<string, unknown>;
|
|
37
|
+
getInputValidateStatus: (name: string) => string;
|
|
38
|
+
getInputValidateMessage: (name: string) => string | undefined;
|
|
39
|
+
validateForm: ({ touched }?: {
|
|
40
|
+
touched?: boolean;
|
|
41
|
+
}) => {
|
|
42
|
+
status: boolean;
|
|
43
|
+
fields: Record<string, {
|
|
44
|
+
status: boolean;
|
|
45
|
+
touched?: boolean;
|
|
46
|
+
message?: string;
|
|
47
|
+
}>;
|
|
48
|
+
};
|
|
49
|
+
validateFormSchema: (schemaId: string, _schemaData: Record<string, unknown>, opts?: {
|
|
50
|
+
touched?: boolean;
|
|
51
|
+
}) => {
|
|
52
|
+
status: boolean;
|
|
53
|
+
fields: Record<string, {
|
|
54
|
+
status: boolean;
|
|
55
|
+
touched?: boolean;
|
|
56
|
+
message?: string;
|
|
57
|
+
}>;
|
|
58
|
+
};
|
|
59
|
+
handleCustomValue: (name: string, value: unknown) => void;
|
|
60
|
+
clearFormDataKey: () => void;
|
|
61
|
+
handleFormInput: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
62
|
+
register: (name: string) => {
|
|
63
|
+
checked: boolean;
|
|
64
|
+
onChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
65
|
+
onBlurHandler: () => {
|
|
66
|
+
isValid: boolean;
|
|
67
|
+
error?: FieldError;
|
|
68
|
+
};
|
|
69
|
+
onFocusHandler: () => Set<string>;
|
|
70
|
+
name: string;
|
|
71
|
+
value: unknown;
|
|
72
|
+
label: {};
|
|
73
|
+
status: string;
|
|
74
|
+
feedback: string | undefined;
|
|
75
|
+
type: string | undefined;
|
|
76
|
+
ref: (el: HTMLElement | null) => void;
|
|
77
|
+
} | {
|
|
78
|
+
options: {};
|
|
79
|
+
onChangeHandler: (e: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
80
|
+
name: string;
|
|
81
|
+
value: unknown;
|
|
82
|
+
label: {};
|
|
83
|
+
status: string;
|
|
84
|
+
feedback: string | undefined;
|
|
85
|
+
type: string | undefined;
|
|
86
|
+
ref: (el: HTMLElement | null) => void;
|
|
87
|
+
} | {
|
|
88
|
+
onChangeHandler: (e: React.ChangeEvent<HTMLInputElement> | unknown) => void;
|
|
89
|
+
onBlurHandler: () => void;
|
|
90
|
+
onFocusHandler: () => void;
|
|
91
|
+
name: string;
|
|
92
|
+
value: unknown;
|
|
93
|
+
label: {};
|
|
94
|
+
status: string;
|
|
95
|
+
feedback: string | undefined;
|
|
96
|
+
type: string | undefined;
|
|
97
|
+
ref: (el: HTMLElement | null) => void;
|
|
98
|
+
};
|
|
99
|
+
getFormEvent: Record<string, unknown>;
|
|
100
|
+
setFormData: (events: Record<string, unknown>) => void;
|
|
101
|
+
handleFormFlagFields: (key: string, value: unknown) => void;
|
|
102
|
+
getFormFlagFields: Record<string, unknown>;
|
|
103
|
+
parseFormToObject: () => {
|
|
104
|
+
toJson: () => string;
|
|
105
|
+
};
|
|
106
|
+
clearFormData: () => void;
|
|
107
|
+
isFormDirty: boolean;
|
|
108
|
+
ajv: unknown;
|
|
109
|
+
};
|
|
110
|
+
export default useMakeFullFormHookFacade;
|
|
111
|
+
export declare const makeFullFormHookFacade: typeof useMakeFullFormHookFacade;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ReactNode, ChangeEvent } from 'react';
|
|
2
|
+
import { FBForm, MakeFacadeOptions } from './makeFullFormHookFacade';
|
|
3
|
+
/**
|
|
4
|
+
* Legacy FormHook interface used by older components (AddressForm, PaymentOptions)
|
|
5
|
+
* This interface is kept for backwards compatibility with components written before FormBuilder
|
|
6
|
+
*/
|
|
7
|
+
export interface LegacyFormHook {
|
|
8
|
+
register: (name: string) => Record<string, ReactNode>;
|
|
9
|
+
getInputSchema: (name: string) => Record<string, string>;
|
|
10
|
+
getFormData: Record<string, unknown>;
|
|
11
|
+
handleCustomValue: (name: string, value: unknown) => void;
|
|
12
|
+
clearFormDataKey: (name: string) => void;
|
|
13
|
+
handleFormInput: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
14
|
+
validateFormSchema: (name: string, value: unknown) => void;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Composition hook that creates a legacy-compatible FormHook from FormBuilder's form/schema
|
|
18
|
+
*
|
|
19
|
+
* **Purpose:**
|
|
20
|
+
* - Bridges the gap between new FormBuilder components and legacy components
|
|
21
|
+
* - Provides a React-idiomatic way to adapt the facade to legacy format
|
|
22
|
+
* - Eliminates code duplication across legacy wrapper components
|
|
23
|
+
*
|
|
24
|
+
* **Usage Example:**
|
|
25
|
+
* ```typescript
|
|
26
|
+
* export const AddressFormLegacy = (props) => {
|
|
27
|
+
* const { __form: form, __schema: schema } = props;
|
|
28
|
+
* const formHook = useLegacyFormHook({ form, schema });
|
|
29
|
+
*
|
|
30
|
+
* return <AddressForm formHook={formHook} {...otherProps} />;
|
|
31
|
+
* };
|
|
32
|
+
* ```
|
|
33
|
+
*
|
|
34
|
+
* @param params - Configuration object
|
|
35
|
+
* @param params.form - FormBuilder's FBForm instance
|
|
36
|
+
* @param params.schema - JSON Schema for validation
|
|
37
|
+
* @param params.options - Optional facade configuration
|
|
38
|
+
* @returns Legacy-compatible FormHook object
|
|
39
|
+
*/
|
|
40
|
+
export declare function useLegacyFormHook({ form, schema, options, }: {
|
|
41
|
+
form: FBForm;
|
|
42
|
+
schema: Record<string, unknown>;
|
|
43
|
+
options?: MakeFacadeOptions;
|
|
44
|
+
}): LegacyFormHook;
|
|
45
|
+
export default useLegacyFormHook;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { ValidationRules, FieldOption, UISchemaField } from '../FormBuilder.config';
|
|
2
|
+
/**
|
|
3
|
+
* Extract validation rules from JSON Schema field
|
|
4
|
+
* @description Converts JSON Schema validation properties into ValidationRules format
|
|
5
|
+
* @param fieldSchema JSON Schema field definition with validation constraints
|
|
6
|
+
* @returns ValidationRules object with extracted validation rules
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* extractValidationRules({
|
|
10
|
+
* type: 'string',
|
|
11
|
+
* minLength: 2,
|
|
12
|
+
* maxLength: 50,
|
|
13
|
+
* format: 'email'
|
|
14
|
+
* })
|
|
15
|
+
* // returns { type: 'string', minLength: 2, maxLength: 50, format: 'email' }
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare const extractValidationRules: (fieldSchema: Record<string, unknown>) => ValidationRules;
|
|
19
|
+
/**
|
|
20
|
+
* Extract field options from schema
|
|
21
|
+
* @description Extracts dropdown/select options from x-options or enum properties
|
|
22
|
+
* @param fieldSchema JSON Schema field definition that may contain options
|
|
23
|
+
* @returns Array of FieldOption objects or undefined if no options found
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* extractFieldOptions({
|
|
27
|
+
* 'x-options': [
|
|
28
|
+
* { value: 'BR', label: 'Brazil' },
|
|
29
|
+
* { value: 'US', label: 'United States' }
|
|
30
|
+
* ]
|
|
31
|
+
* })
|
|
32
|
+
* // returns [{ value: 'BR', label: 'Brazil' }, { value: 'US', label: 'United States' }]
|
|
33
|
+
*
|
|
34
|
+
* extractFieldOptions({ enum: ['small', 'medium', 'large'] })
|
|
35
|
+
* // returns [{ value: 'small', label: 'Small' }, { value: 'medium', label: 'Medium' }, ...]
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
export declare const extractFieldOptions: (fieldSchema: Record<string, unknown>) => FieldOption[] | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* Extract field label from schema and UI config
|
|
41
|
+
*/
|
|
42
|
+
export declare const extractFieldLabel: (fieldName: string, fieldSchema: Record<string, unknown>, uiConfig: UISchemaField) => string;
|
|
43
|
+
/**
|
|
44
|
+
* Extract field placeholder from schema and UI config
|
|
45
|
+
*/
|
|
46
|
+
export declare const extractFieldPlaceholder: (fieldSchema: Record<string, unknown>, uiConfig: UISchemaField) => string | undefined;
|
|
47
|
+
/**
|
|
48
|
+
* Extract field help text from schema and UI config
|
|
49
|
+
*/
|
|
50
|
+
export declare const extractFieldHelp: (fieldSchema: Record<string, unknown>, uiConfig: UISchemaField) => string | undefined;
|
|
51
|
+
/**
|
|
52
|
+
* Generate component props from schema and UI config
|
|
53
|
+
* @description Combines schema-derived props with UI config props for component rendering
|
|
54
|
+
* @param fieldSchema JSON Schema field definition with constraints
|
|
55
|
+
* @param uiConfig UI Schema field configuration with ui:props
|
|
56
|
+
* @param detectedProps Props detected from component detection logic
|
|
57
|
+
* @returns Combined props object for component rendering
|
|
58
|
+
* @example
|
|
59
|
+
* ```tsx
|
|
60
|
+
* generateComponentProps(
|
|
61
|
+
* { type: 'string', format: 'email', minLength: 5 },
|
|
62
|
+
* { 'ui:props': { label: 'Email', size: 'large' } },
|
|
63
|
+
* { type: 'email' }
|
|
64
|
+
* )
|
|
65
|
+
* // returns { type: 'email', inputMode: 'email', minLength: 5, label: 'Email', size: 'large' }
|
|
66
|
+
* ```
|
|
67
|
+
*/
|
|
68
|
+
export declare const generateComponentProps: (fieldSchema: Record<string, unknown>, uiConfig: UISchemaField, detectedProps: Record<string, unknown>) => Record<string, unknown>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { JSONSchema7 } from 'json-schema';
|
|
2
|
+
import { FieldConfig, UISchema, UISchemaField } from '../FormBuilder.config';
|
|
3
|
+
/**
|
|
4
|
+
* Generate field configuration from JSON Schema field definition
|
|
5
|
+
* @description Creates complete FieldConfig by combining JSON Schema, UI Schema, and detected component info
|
|
6
|
+
* @param fieldName Name of the field in the schema
|
|
7
|
+
* @param fieldSchema JSON Schema field definition with validation and type info
|
|
8
|
+
* @param rootSchema Complete JSON Schema for required field detection (used for flat schemas)
|
|
9
|
+
* @param uiConfig UI Schema field configuration for layout and styling
|
|
10
|
+
* @param isRequiredOverride Optional override for required status (used for nested schemas)
|
|
11
|
+
* @returns Complete FieldConfig ready for rendering
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* generateFieldConfig(
|
|
15
|
+
* 'email',
|
|
16
|
+
* { type: 'string', format: 'email', minLength: 5 },
|
|
17
|
+
* { required: ['email'] },
|
|
18
|
+
* { 'ui:component': 'Input', 'ui:props': { label: 'Email Address' } }
|
|
19
|
+
* )
|
|
20
|
+
* // returns FieldConfig with component: Input, validation rules, required: true, etc.
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare const generateFieldConfig: (fieldName: string, fieldSchema: Record<string, unknown>, rootSchema: JSONSchema7, uiConfig?: UISchemaField, isRequiredOverride?: boolean) => FieldConfig;
|
|
24
|
+
/**
|
|
25
|
+
* Process children fields for GenericWrapper component
|
|
26
|
+
* @description Converts children object from UI Schema into FieldConfig array for wrapper components
|
|
27
|
+
* Supports BOTH flat dot notation and nested object notation in children
|
|
28
|
+
* @param children Children configuration from UI Schema ui:props.children
|
|
29
|
+
* @param schema Complete JSON Schema to extract field definitions and x-options
|
|
30
|
+
* @returns Record of FieldConfig objects for child fields
|
|
31
|
+
*/
|
|
32
|
+
export declare const processWrapperChildren: (children: Record<string, unknown>, schema: JSONSchema7) => Record<string, FieldConfig>;
|
|
33
|
+
/**
|
|
34
|
+
* Main function to generate field configurations from JSON Schema and UI Schema
|
|
35
|
+
* @description Transforms JSON Schema and UI Schema into array of FieldConfig objects for FormBuilder rendering
|
|
36
|
+
* @param schema JSONSchema7 with field definitions, validation rules, and required fields
|
|
37
|
+
* @param uiSchema UI Schema with layout, component, and styling configuration
|
|
38
|
+
* @param stepId Optional step identifier for multi-step forms (WizardBuilder integration)
|
|
39
|
+
* @returns Array of FieldConfig objects sorted by ui:order, ready for FormBuilder rendering
|
|
40
|
+
* @example
|
|
41
|
+
* ```tsx
|
|
42
|
+
* const fields = generateFieldsFromSchema(
|
|
43
|
+
* {
|
|
44
|
+
* type: 'object',
|
|
45
|
+
* properties: {
|
|
46
|
+
* name: { type: 'string', minLength: 2 },
|
|
47
|
+
* email: { type: 'string', format: 'email' }
|
|
48
|
+
* },
|
|
49
|
+
* required: ['name', 'email']
|
|
50
|
+
* },
|
|
51
|
+
* {
|
|
52
|
+
* contact: {
|
|
53
|
+
* 'ui:layout': 'grid',
|
|
54
|
+
* name: { 'ui:component': 'Input', 'ui:props': { label: 'Full Name' } },
|
|
55
|
+
* email: { 'ui:component': 'Input', 'ui:props': { label: 'Email' } }
|
|
56
|
+
* }
|
|
57
|
+
* },
|
|
58
|
+
* 'contact'
|
|
59
|
+
* );
|
|
60
|
+
* // returns [FieldConfig, FieldConfig] with detected components and validation
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
export declare const generateFieldsFromSchema: (schema: JSONSchema7, uiSchema?: UISchema, stepId?: string) => FieldConfig[];
|
|
64
|
+
export default generateFieldsFromSchema;
|
|
65
|
+
export { resolveUIConfig, flattenSchemaProperties, flattenUISchemaChildren, } from './schemaUtils';
|
|
66
|
+
export { detectFieldComponent, SCHEMA_COMPONENT_MAP, } from './componentDetection';
|
|
67
|
+
export { extractValidationRules, extractFieldOptions, extractFieldLabel, extractFieldPlaceholder, extractFieldHelp, generateComponentProps, } from './fieldExtractors';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Get a nested value from an object using dot notation
|
|
3
|
+
* @param obj The object to navigate
|
|
4
|
+
* @param path The dot notation path to the value
|
|
5
|
+
* @returns The value at the path
|
|
6
|
+
*/
|
|
7
|
+
export declare const getNestedValue: (obj: Record<string, unknown>, path: string) => unknown;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|