@becklyn/forms 2.0.4 → 3.0.1

package/README.md

@@ -1,90 +1,128 @@
 ## Table of Contents
 
-1. [Introduction](#introduction)
-2. [Getting Started](#getting-started)
+1. [Getting Started](#getting-started)
+
     1. [Install dependencies](#1-install-dependencies)
-    2. [Create a field component](#2-create-a-field-component)
-    3. [Create a form config](#3-create-a-form-config)
-    4. [Render the form](#4-render-the-form)
-3. [Typescript](#typescript)
-    1. [Providing your own types](#providing-your-own-types)
-        1. [Define the field config](#1-define-the-field-config)
-        2. [Build intermediate type](#2-build-intermediate-type)
-        3. [Patch form fields](#3-patch-form-fields)
-    2. [Infer form config](#infer-form-config)
-4. [Guides](#guides)
+    2. [Create your fields](#2-create-your-fields)
+    3. [Create a field component](#3-create-a-field-component)
+    4. [Define your initial state](#4-define-your-initial-state)
+    5. [Create a form config](#5-create-a-form-config)
+    6. [Render the form](#6-render-the-form)
+
+2. [Advanced usecases](#advanced-usecases)
+    1. [Conditional fields](#conditional-fields)
+3. [Guides](#guides)
     1. [Multistep](#multistep)
 
-## Introduction
+## Getting Started
+
+### 1. Install dependencies
+
+```
+npm i --save @becklyn/forms
+```
 
-This form lib is most likely overkill if your project requires a single static form with a few fields. If your project is build on highly dynamic forms it will help you to abstract most of the UI part and logic while keeping everything consistent.
+### 2. Create your fields
 
-It does so by following a config first approach. The idea is that after your first form, the following are created by writing a `FormConfig` only - something like this for a form with a single email input field:
+Start by building your form fields:
 
 ```typescript
-export const forgotPasswordFormConfig = createFormConfig([
-    {
-        type: "text",
-        name: "email",
-        validations: [
-            {
-                validation: validateEmail,
-            },
-        ],
-        fieldConfig: {
-            placeholder: "E-Mail Adresse",
-        },
-    },
-]);
-```
+interface BaseFieldConfig {
+    placeholder: string;
+    label?: string;
+    maxLength?: number;
+}
 
-## Getting Started
+type StringFieldConfig = FormFieldConfig<"string", BaseFieldConfig, string | null>;
+type NumberFieldConfig = FormFieldConfig<"number", BaseFieldConfig, number>;
+type AllConfigs = StringFieldConfig | NumberFieldConfig;
+
+interface TextProps {
+    id: string;
+    value?: string | null;
+    onBlur: () => void;
+    name: string;
+    onInput: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    fieldConfig: FormFieldConfigFunc<GlobalFormData, string | null, BaseFieldConfig>;
+}
 
-### 1. Install dependencies
+const Text = ({ id, value, onBlur, name, onInput, fieldConfig }: TextProps) => {
+    return (
+        <input
+            {...fieldConfig}
+            id={id}
+            value={value ?? ""}
+            onBlur={onBlur}
+            name={name}
+            type="text"
+            onChange={onInput}
+        />
+    );
+};
 
-```
-npm i --save @becklyn/forms
+interface NumberProps {
+    id: string;
+    value?: number;
+    onBlur: () => void;
+    name: string;
+    onInput: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    fieldConfig: FormFieldConfigFunc<GlobalFormData, number, BaseFieldConfig>;
+}
+
+const Number = ({ id, value, onBlur, name, onInput, fieldConfig }: NumberProps) => {
+    return (
+        <input
+            {...fieldConfig}
+            id={id}
+            value={value ?? ""}
+            onBlur={onBlur}
+            name={name}
+            type="number"
+            onChange={onInput}
+        />
+    );
+};
 ```
 
-### 2. Create a field component
+### 3. Create a field component
 
 Create a single component to handle rendering all of your different input components. It will be called by the `FormBuilder` including the respective field's props.
 
 ```tsx
-export const FieldComponent: React.FC<FormBuilderChildrenProps<FieldTypes>> = ({
+const FieldComponent: FC<FormBuilderChildrenProps<AllConfigs, GlobalFormData>> = ({
     value,
-    error,
     field,
-    onInput,
     onBlur,
+    onInput,
 }) => {
     const id = useId();
 
     switch (field.type) {
-        case "text": {
+        case "string": {
             const { name, fieldConfig } = field;
+
             return (
                 <Text
-                    {...fieldConfig}
                     id={id}
-                    name={name}
                     value={value}
-                    error={error}
-                    onValueChanged={onInput}
                     onBlur={onBlur}
+                    name={name}
+                    onInput={onInput}
+                    fieldConfig={fieldConfig}
                 />
             );
         }
-        case "select": {
+        case "number": {
             const { name, fieldConfig } = field;
+
             return (
-                <Select
-                    {...fieldConfig}
+                <Number
                     id={id}
                     value={value}
-                    error={error}
                     onBlur={onBlur}
-                    onSelect={onInput}
+                    name={name}
+                    onInput={onInput}
+                    fieldConfig={fieldConfig}
                 />
             );
         }
@@ -92,36 +130,85 @@ export const FieldComponent: React.FC<FormBuilderChildrenProps<FieldTypes>> = ({
 };
 ```
 
-### 3. Create a form config
+### 4. Define your initial state
+
+After defining all fields that your forms may use you can define the initial state of your specific form in a flat config (field name -> initial value):
 
 ```typescript
-export const forgotPasswordFormConfig = createFormConfig([
+const initialState = {
+    foo: generateInitialValue<StringFieldConfig>(""),
+    bar: generateInitialValue<NumberFieldConfig>(123),
+    f1: generateInitialValue<StringFieldConfig>(undefined),
+    f2: generateInitialValue<StringFieldConfig>(null),
+};
+```
+
+### 5. Create a form config
+
+Finally you can configure the structure of your form:
+
+```typescript
+const userFormConfig = [
     {
-        type: "text",
-        name: "email",
-        validations: [
+        type: "row",
+        content: [
             {
-                validation: validateEmail,
+                type: "string",
+                name: "Firstname",
+                fieldConfig: {
+                    placeholder: "Enter your firstname",
+                    label: "Firstname",
+                },
+            },
+            {
+                type: "string",
+                name: "Lastname",
+                valueFn: generateValueFn<FormData>(data => data.Lastname || "default value"),
+                onInput: generateOnInput<StringFieldConfig, FormData>(
+                    ({ field, value, previousData }) => {
+                        console.log("value", value);
+                        console.log("field", field);
+
+                        return { ...previousData };
+                    }
+                ),
+                fieldConfig: generateFormFieldConfigFn<StringFieldConfig, FormData>(
+                    ({ data, value }) => {
+                        console.log("data", data);
+                        console.log("value", value);
+
+                        return {
+                            placeholder: "Enter your lastname",
+                            label: "Lastname",
+                        };
+                    }
+                ),
             },
         ],
+    },
+    {
+        type: "number",
+        name: "Age",
         fieldConfig: {
-            placeholder: "E-Mail Adresse",
+            placeholder: "Enter your age",
+            label: "Age",
         },
     },
-]);
+] as const satisfies FormConfig<AllConfigs, FormData>;
 ```
 
-### 4. Render the form
+### 6. Render the form
 
-To render your form config the FormBuilder needs to be a descendant of `FormProvider` (or a component using `withForm`). An implementation could look something like this where the majority can easily be abstracted.
+To render your form config the FormBuilder needs to be a descendant of `FormProvider`. An implementation could look something like this where the majority can easily be abstracted.
 
 ```tsx
-// the form renderer can be reused to render all kinds of forms
 export const FormRenderer: React.FC = () => {
-    return <FormBuilder>{props => <FieldComponent {...props} />}</FormBuilder>;
+    return (
+        <FormBuilder<AllConfigs, FormData>>{props => <FieldComponent {...props} />}</FormBuilder>
+    );
 };
 
-export const LoginFormHandler = withForm(() => {
+export const UserFormHandler = () => {
     const { validateForm } = useForm();
 
     const handleSubmit = (e: React.FormEvent) => {
@@ -139,115 +226,66 @@ export const LoginFormHandler = withForm(() => {
             <button type="submit">Submit</button>
         </form>
     );
-});
-
-export const SomeComponent: React.FC = () => {
-    return <LoginFormHandler config={forgotPasswordFormConfig} />;
 };
-```
-
-## Typescript
-
-### Providing your own types
-
-Each field comes with default props (e.g `id`, `value`, `onValueChanged`), however it is also possible to pass additional props via `fieldConfig` that are relevant based on the type of the field (e.g `maxLength` for a text input).
-
-#### 1. Define the field config
-
-Your fields should export a config interface that includes all the specific props for that field:
-
-```typescript
-export interface TextFieldConfig {
-    placeholder: string;
-    label?: string;
-    maxLength?: number;
-}
-```
-
-#### 2. Build intermediate type
-
-Create an intermediate type that forms can consume:
-
-```typescript
-export type FormFieldText = FormFieldConfig<"text", TextFieldConfig, string>;
-```
-
-The first parameter specifies to which field the fieldConfig will be applied. Here `"text"` means that in your config, if you add `type: "text"`, the `fieldConfig` will expect props specified in `TextFieldConfig`.
-
-The third generic parameter in `FormFieldConfig` is the type of allowed values this field can handle.
-
-Its useful to build a type that unifies all your fields:
-
-```typescript
-export type FormFieldText = FormFieldConfig<"text", TextFieldConfig, string>;
-export type FormFieldNumber = FormFieldConfig<"number", NumberFieldConfig, number>;
-export type FormFieldSelect = FormFieldConfig<
-    "select",
-    SelectFieldConfig,
-    { id: string; value: string }
->;
-export type FormField = FormFieldText | FormFieldNumber | FormFieldSelect;
-```
-
-### Infer form config
 
-To be able to infer a form config's type <ins>it must be readonly</ins>. You can use the following helper to infer your config:
-
-```typescript
-type ForgotPasswordConfig = FormInfer<typeof forgotPasswordFormConfig>;
+export const Component = () => {
+    return (
+        <FormProvider<AllConfigs, typeof initialState>
+            config={userFormConfig}
+            initialData={initialState}>
+            <UserFormHandler />
+        </FormProvider>
+    );
+};
 ```
 
-<b>In case your types are not inferred correctly, immutability should be checked first:</b>
+## Advanced usecases
 
-- Make sure you do not assert a type
-- Object literals must be readonly
-- Array literals must be readonly tuples
+### Conditional fields
 
-While this is true using `createFormConfig`, parts of your config that are rendered conditionally or created with a custom util function such as `createArray` might not be caught if not done properly. For custom functions make sure you are using generic type assertion with `const`. To help out with conditional rendering, a function called `eitherOr` is provided.
+To help out with conditional rendering, a function called `eitherOr` is provided.
 
 ```typescript
-useMemo(() => {
-    return createFormConfig<FormField>([
-        // Render a or b
-        eitherOr(
-            someCondition,
-            {
-                type: "text",
-                name: "email",
-                fieldConfig: {
-                    placeholder: "E-Mail Adresse",
-                },
-            },
-            {
-                type: "text",
-                name: "phone",
-                fieldConfig: {
-                    placeholder: "Telefonnummer",
-                },
-            }
-        ),
-        // Render a conditionally
-        eitherOr(
-            someCondition && {
-                type: "text",
-                name: "phone",
-                fieldConfig: {
-                    placeholder: "Telefonnummer",
-                },
-            }
-        ),
-    ]);
+const form = useMemo(() => {
+    return [
+        {
+            type: "row",
+            content: [
+                eitherOr(
+                    someCondition,
+                    {
+                        type: "string",
+                        name: "email",
+                        fieldConfig: {
+                            placeholder: "Email address",
+                            label: "Email",
+                        },
+                    },
+                    {
+                        type: "string",
+                        name: "phone",
+                        fieldConfig: {
+                            placeholder: "Phone number",
+                            label: "Phone",
+                        },
+                    }
+                ),
+                eitherOr(
+                    someCondition && {
+                        type: "string",
+                        name: "phone",
+                        fieldConfig: {
+                            placeholder: "Phone number",
+                            label: "Phone",
+                        },
+                    }
+                ),
+            ],
+        },
+    ] as const satisfies FormConfig<AllConfigs, FormData>;
 }, [someCondition]);
 ```
 
-The `FormBuilder` is generic, too:
-
-```typescript
-export const FormRenderer: React.FC = () => {
-    return <FormBuilder<FieldTypes>>{props => <FieldComponent {...props} />}</FormBuilder>;
-};
-```
-
 ## Guides
 
 ### Multistep
@@ -256,7 +294,7 @@ Multistep can be achieved easily and abstracted into a custom component. The con
 While this lib handles the data, validations etc., you must still handle the multistep logic yourself.
 
 ```tsx
-const Step = withForm<FormField>(() => {
+const Step = () => {
     const { validateForm } = useForm<FormField>();
 
     const handleSubmit = (e: React.FormEvent) => {
@@ -275,19 +313,36 @@ const Step = withForm<FormField>(() => {
             <FormRenderer />
         </form>
     );
-});
+};
 
-const MultiStep = withForm<FormField>(() => {
+const MultiStep = () => {
     // your custom hook
     const { step } = useMultiStep();
 
+    let config, initialData;
+
     switch (step) {
         case 1:
-            return <Step config={firstStepConfig} inheritData />;
+            config = firstStepConfig;
+            initialData = initialFirstStepState;
+            break;
         case 2:
-            return <Step config={secondStepConfig} inheritData />;
+            config = secondStepConfig;
+            initialData = initialSecondStepState;
+            break;
         case 3:
-            return <Step config={thirdStepConfig} inheritData />;
+            config = thirdStepConfig;
+            initialData = initialThirdStepState;
+            break;
     }
-});
+
+    return (
+        <FormProvider<AllConfigs, typeof initialData>
+            config={config}
+            initialData={initialData}
+            inheritData>
+            <Step />
+        </FormProvider>
+    );
+};
 ```

package/dist/cjs/components/FormBuilder.d.ts

@@ -1,3 +1,3 @@
 import { FormBuilderProps, FormFieldConfig } from "../type";
-export declare const FormBuilder: <T extends FormFieldConfig<string, any, any>>({ Components, children, }: FormBuilderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormBuilder: <T extends FormFieldConfig<string, any, any, GlobalFormData>, GlobalFormData extends Record<string, any>>({ Components, children, }: FormBuilderProps<T, GlobalFormData>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FormBuilder.d.ts.map

package/dist/cjs/components/FormBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormBuilder.d.ts","sourceRoot":"","sources":["../../../components/FormBuilder.tsx"],"names":[],"mappings":"AASA,OAAO,EAAyB,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAWnF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,6BAGpE,gBAAgB,CAAC,CAAC,CAAC,4CAErB,CAAC"}
+{"version":3,"file":"FormBuilder.d.ts","sourceRoot":"","sources":["../../../components/FormBuilder.tsx"],"names":[],"mappings":"AASA,OAAO,EAAyB,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAUnF,eAAO,MAAM,WAAW,GAEpB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAE3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,6BAI3C,gBAAgB,CAAC,CAAC,EAAE,cAAc,CAAC,4CAErC,CAAC"}

package/dist/cjs/components/FormBuilder.js

@@ -13,7 +13,6 @@ const DefaultComponents = {
     RowWrapper: style_1.DefaultRowWrapper,
     FieldWrapper: style_1.DefaultFieldWrapper,
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormBuilder = ({ Components = DefaultComponents, children, }) => {
     return (0, jsx_runtime_1.jsx)(FormBuilderComponent, { Components: Components, children: children });
 };

package/dist/cjs/components/FormCustom.d.ts

@@ -1,9 +1,9 @@
 import { FormBuilderComponents, FormBuilderProps, FormCustomConfig, FormFieldConfig } from "../type";
-interface FormCustomProps<T extends FormFieldConfig<string, any, any>> {
+interface FormCustomProps<T extends FormFieldConfig<string, any, any, GlobalFormData>, GlobalFormData extends Record<string, any>> {
     Components: FormBuilderComponents;
-    custom: FormCustomConfig<T>;
-    children: FormBuilderProps<T>["children"];
+    custom: FormCustomConfig<T, GlobalFormData>;
+    children: FormBuilderProps<T, GlobalFormData>["children"];
 }
-export declare const FormCustom: <T extends FormFieldConfig<string, any, any>>({ Components, custom, children, }: FormCustomProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormCustom: <T extends FormFieldConfig<string, any, any, GlobalFormData>, GlobalFormData extends Record<string, any>>({ Components, custom, children, }: FormCustomProps<T, GlobalFormData>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FormCustom.d.ts.map

package/dist/cjs/components/FormCustom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormCustom.d.ts","sourceRoot":"","sources":["../../../components/FormCustom.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EAClB,MAAM,SAAS,CAAC;AAIjB,UAAU,eAAe,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;IACjE,UAAU,EAAE,qBAAqB,CAAC;IAClC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7C;AAGD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,qCAInE,eAAe,CAAC,CAAC,CAAC,4CAYpB,CAAC"}
+{"version":3,"file":"FormCustom.d.ts","sourceRoot":"","sources":["../../../components/FormCustom.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EAClB,MAAM,SAAS,CAAC;AAGjB,UAAU,eAAe,CAErB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAE3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAE1C,UAAU,EAAE,qBAAqB,CAAC;IAClC,MAAM,EAAE,gBAAgB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,gBAAgB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,UAAU,GAEnB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAE3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,qCAK3C,eAAe,CAAC,CAAC,EAAE,cAAc,CAAC,4CAYpC,CAAC"}

package/dist/cjs/components/FormCustom.js

@@ -7,7 +7,6 @@ exports.FormCustom = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const FormEntry_1 = require("./FormEntry");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormCustom = ({ Components, custom, children, }) => {
     return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: custom.wrapper(custom.content.map((entry, index) => ((0, jsx_runtime_1.jsx)(FormEntry_1.FormEntry, { entry: entry, Components: Components, children: children }, index)))) }));
 };

package/dist/cjs/components/FormEntry.d.ts

@@ -1,9 +1,9 @@
 import { FormBuilderComponents, FormBuilderProps, FormEntryConfig, FormFieldConfig } from "../type";
-interface FormEntryProps<T extends FormFieldConfig<string, any, any>> {
+interface FormEntryProps<T extends FormFieldConfig<string, any, any, GlobalFormData>, GlobalFormData extends Record<string, any>> {
     Components: FormBuilderComponents;
-    entry: FormEntryConfig<T>;
-    children: FormBuilderProps<T>["children"];
+    entry: FormEntryConfig<T, GlobalFormData>;
+    children: FormBuilderProps<T, GlobalFormData>["children"];
 }
-export declare const FormEntry: <T extends FormFieldConfig<string, any, any>>({ Components, entry, children, }: FormEntryProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FormEntry: <T extends FormFieldConfig<string, any, any, GlobalFormData>, GlobalFormData extends Record<string, any>>({ Components, entry, children, }: FormEntryProps<T, GlobalFormData>) => import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=FormEntry.d.ts.map

package/dist/cjs/components/FormEntry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormEntry.d.ts","sourceRoot":"","sources":["../../../components/FormEntry.tsx"],"names":[],"mappings":"AAIA,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAEhB,eAAe,EACf,eAAe,EAClB,MAAM,SAAS,CAAC;AAQjB,UAAU,cAAc,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;IAChE,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC1B,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7C;AAGD,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,oCAIlE,cAAc,CAAC,CAAC,CAAC,mDA2DnB,CAAC"}
+{"version":3,"file":"FormEntry.d.ts","sourceRoot":"","sources":["../../../components/FormEntry.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAOpG,UAAU,cAAc,CAEpB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAE3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAE1C,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,EAAE,eAAe,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;IAC1C,QAAQ,EAAE,gBAAgB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,SAAS,GAElB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAE3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,oCAK3C,cAAc,CAAC,CAAC,EAAE,cAAc,CAAC,mDA2DnC,CAAC"}

package/dist/cjs/components/FormEntry.js

@@ -11,7 +11,6 @@ const FormCustom_1 = require("./FormCustom");
 const FormField_1 = require("./FormField");
 const FormRow_1 = require("./FormRow");
 const FormSection_1 = require("./FormSection");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormEntry = ({ Components, entry, children, }) => {
     const { data, fieldConfigs } = (0, context_1.useForm)();
     const getHasChildren = (0, react_1.useCallback)((formData) => {

package/dist/cjs/components/FormField.d.ts

@@ -1,9 +1,9 @@
 import { FormBuilderComponents, FormBuilderProps, FormFieldConfig } from "../type";
-interface FormFieldProps<T extends FormFieldConfig<string, any, any>> {
+interface FormFieldProps<T extends FormFieldConfig<string, any, any, GlobalFormData>, GlobalFormData extends Record<string, any>> {
     Components: FormBuilderComponents;
     field: T;
-    children: FormBuilderProps<T>["children"];
+    children: FormBuilderProps<T, GlobalFormData>["children"];
 }
-export declare const FormField: <T extends FormFieldConfig<string, any, any>>({ Components, field, children, }: FormFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormField: <T extends FormFieldConfig<string, any, any, GlobalFormData>, GlobalFormData extends Record<string, any>>({ Components, field, children, }: FormFieldProps<T, GlobalFormData>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FormField.d.ts.map

package/dist/cjs/components/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../components/FormField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEH,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EAClB,MAAM,SAAS,CAAC;AAGjB,UAAU,cAAc,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;IAChE,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7C;AAGD,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,oCAIlE,cAAc,CAAC,CAAC,CAAC,4CA4GnB,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../components/FormField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEH,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EAClB,MAAM,SAAS,CAAC;AAEjB,UAAU,cAAc,CAEpB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAE3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAE1C,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,gBAAgB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,SAAS,GAElB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,CAAC,EAE3D,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,oCAK3C,cAAc,CAAC,CAAC,EAAE,cAAc,CAAC,4CA4GnC,CAAC"}

package/dist/cjs/components/FormField.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const context_1 = require("../context");
 const useFormData_1 = require("../hook/useFormData");
 const useFormErrors_1 = require("../hook/useFormErrors");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormField = ({ Components, field, children, }) => {
     const { editData, validationStrategy: contextValidationStrategy, validateField, onInput, } = (0, context_1.useForm)();
     const { name, columns, conditions, validations, valueFn, validationStrategy: fieldValidationStrategy, onInput: onFieldInput, fieldConfig: fieldConfigFunc, } = field;

package/dist/cjs/components/FormRow.d.ts

@@ -1,9 +1,9 @@
 import { FormBuilderComponents, FormBuilderProps, FormFieldConfig, FormRowConfig } from "../type";
-interface FormRowProps<T extends FormFieldConfig<string, any, any>> {
+interface FormRowProps<T extends FormFieldConfig<string, any, any>, GlobalFormData extends Record<string, any>> {
     Components: FormBuilderComponents;
-    row: FormRowConfig<T>;
-    children: FormBuilderProps<T>["children"];
+    row: FormRowConfig<T, GlobalFormData>;
+    children: FormBuilderProps<T, GlobalFormData>["children"];
 }
-export declare const FormRow: <T extends FormFieldConfig<string, any, any>>({ Components, row, children, }: FormRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormRow: <T extends FormFieldConfig<string, any, any>, GlobalFormData extends Record<string, any>>({ Components, row, children, }: FormRowProps<T, GlobalFormData>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FormRow.d.ts.map

package/dist/cjs/components/FormRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormRow.d.ts","sourceRoot":"","sources":["../../../components/FormRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIlG,UAAU,YAAY,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC;IAC9D,UAAU,EAAE,qBAAqB,CAAC;IAClC,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7C;AAGD,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,kCAIhE,YAAY,CAAC,CAAC,CAAC,4CAgBjB,CAAC"}
+{"version":3,"file":"FormRow.d.ts","sourceRoot":"","sources":["../../../components/FormRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGlG,UAAU,YAAY,CAElB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,EAE3C,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAE1C,UAAU,EAAE,qBAAqB,CAAC;IAClC,GAAG,EAAE,aAAa,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;IACtC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,OAAO,GAEhB,CAAC,SAAS,eAAe,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,EAE3C,cAAc,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,kCAK3C,YAAY,CAAC,CAAC,EAAE,cAAc,CAAC,4CAgBjC,CAAC"}

package/dist/cjs/components/FormRow.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FormEntry_1 = require("./FormEntry");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const FormRow = ({ Components, row, children, }) => {
     const { RowWrapper } = Components;
     if (!RowWrapper) {

package/dist/cjs/components/FormSection.d.ts

@@ -1,9 +1,9 @@
 import { FormBuilderComponents, FormBuilderProps, FormFieldConfig, FormSectionConfig } from "../type";
-interface FormSectionProps<T extends FormFieldConfig<string, any, any>> {
+interface FormSectionProps<T extends FormFieldConfig<string, any, any>, GlobalFormData extends Record<string, any>> {
     Components: FormBuilderComponents;
-    section: FormSectionConfig<T>;
-    children: FormBuilderProps<T>["children"];
+    section: FormSectionConfig<T, GlobalFormData>;
+    children: FormBuilderProps<T, GlobalFormData>["children"];
 }
-export declare const FormSection: <T extends FormFieldConfig<string, any, any>>({ Components, section, children, }: FormSectionProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormSection: <T extends FormFieldConfig<string, any, any>, GlobalFormData extends Record<string, any>>({ Components, section, children, }: FormSectionProps<T, GlobalFormData>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FormSection.d.ts.map