@becklyn/forms 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Becklyn Studios
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,281 @@
+## Table of Contents
+
+1. [Introduction](#introduction)
+2. [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)
+    1. [Multistep](#multistep)
+
+## Introduction
+
+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.
+
+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:
+
+```typescript
+export const forgotPasswordFormConfig = createFormConfig([
+    {
+        type: "text",
+        name: "email",
+        validations: [
+            {
+                validation: validateEmail,
+            },
+        ],
+        fieldConfig: {
+            placeholder: "E-Mail Adresse",
+        },
+    },
+]);
+```
+
+## Getting Started
+
+### 1. Install dependencies
+
+```
+npm i --save @becklyn/forms
+```
+
+### 2. 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> = ({
+    value,
+    error,
+    field,
+    onInput,
+    onBlur,
+}) => {
+    const id = useId();
+
+    switch (field.type) {
+        case "text": {
+            const { name, fieldConfig } = field;
+            return (
+                <Text
+                    {...fieldConfig}
+                    id={id}
+                    name={name}
+                    value={value}
+                    error={error}
+                    onValueChanged={onInput}
+                    onBlur={onBlur}
+                />
+            );
+        }
+        case "select": {
+            const { name, fieldConfig } = field;
+            return (
+                <Select
+                    {...fieldConfig}
+                    id={id}
+                    value={value}
+                    error={error}
+                    onBlur={onBlur}
+                    onSelect={onInput}
+                />
+            );
+        }
+    }
+};
+```
+
+### 3. Create a form config
+
+```typescript
+export const forgotPasswordFormConfig = createFormConfig([
+    {
+        type: "text",
+        name: "email",
+        validations: [
+            {
+                validation: validateEmail,
+            },
+        ],
+        fieldConfig: {
+            placeholder: "E-Mail Adresse",
+        },
+    },
+]);
+```
+
+### 4. 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.
+
+```tsx
+export const FormRenderer: React.FC = () => {
+    return <FormBuilder>{props => <WizardField {...props} />}</FormBuilder>;
+};
+
+export const LoginFormHandler = withForm(() => {
+    const { validateForm } = useForm();
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        const formErrors = validateForm();
+
+        if (formErrors) {
+            return;
+        }
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <FormRenderer />
+            <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 = FormFieldBasicConfig<"text", TextFieldConfig>;
+```
+
+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`.
+
+#### 3. Patch form fields
+
+To overwrite the `FormFieldConfig` you can patch the interface using module augmentation:
+
+```typescript
+declare module "@becklyn/forms" {
+    interface CustomFormFieldConfig {
+        fields: FormFieldText | FormFieldNumber;
+    }
+}
+```
+
+### 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>;
+```
+
+<b>In case your types are not inferred correctly, immutability should be checked first:</b>
+
+- Make sure you do not assert a type
+- Object literals must be readonly
+- Array literals must be readonly tuples
+
+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.
+
+```typescript
+useMemo(() => {
+    return createFormConfig([
+        // 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",
+                },
+            }
+        ),
+    ]);
+}, [someCondition]);
+```
+
+## Guides
+
+### Multistep
+
+Multistep can be achieved easily and abstracted into a custom component. The concept is simple: there's one parent provider handling all data and a child provider per step reporting to the parent.
+While this lib handles the data, validations etc., you must still handle the multistep logic yourself.
+
+```tsx
+const Step = withForm(() => {
+    const { validateForm } = useForm();
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        const formErrors = validateForm();
+
+        if (formErrors) {
+            return;
+        }
+
+        // go to next step or submit form
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <FormRenderer />
+        </form>
+    );
+});
+
+const MultiStep = withForm(() => {
+    // your custom hook
+    const { step } = useMultiStep();
+
+    switch (step) {
+        case 1:
+            return <Step config={firstStepConfig} inheritData />;
+        case 2:
+            return <Step config={secondStepConfig} inheritData />;
+        case 3:
+            return <Step config={thirdStepConfig} inheritData />;
+    }
+});
+```

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

@@ -0,0 +1,3 @@
+import { FormBuilderProps } from "../type";
+export declare const FormBuilder: import("react").NamedExoticComponent<FormBuilderProps>;
+//# sourceMappingURL=FormBuilder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilder.d.ts","sourceRoot":"","sources":["../../../components/FormBuilder.tsx"],"names":[],"mappings":"AASA,OAAO,EAAyB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAUlE,eAAO,MAAM,WAAW,wDAoBvB,CAAC"}

package/dist/cjs/components/FormBuilder.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormBuilder = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("../context/data/context");
+const guard_1 = require("../guard");
+const style_1 = require("../style");
+const FormEntry_1 = require("./FormEntry");
+const DefaultComponents = {
+    BuilderWrapper: style_1.DefaultBuilderWrapper,
+    SectionWrapper: style_1.DefaultSectionWrapper,
+    RowWrapper: style_1.DefaultRowWrapper,
+    FieldWrapper: style_1.DefaultFieldWrapper,
+};
+exports.FormBuilder = (0, react_1.memo)(({ Components = DefaultComponents, children }) => {
+    const { BuilderWrapper } = Components;
+    const { config } = (0, react_1.useContext)(context_1.FormConfigContext);
+    const Wrapper = BuilderWrapper !== null && BuilderWrapper !== void 0 ? BuilderWrapper : style_1.DefaultBuilderWrapper;
+    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: config.map((entry, index) => ((0, jsx_runtime_1.jsx)(FormEntry_1.FormEntry, { entry: entry, Components: Object.assign(Object.assign({}, DefaultComponents), Components), children: children }, index + ((0, guard_1.entryIsField)(entry) ? entry.name : "")))) }));
+});
+exports.FormBuilder.displayName = "FormBuilder";

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { FormBuilderComponents, FormBuilderProps, FormCustomConfig } from "../type";
+interface FormCustomProps {
+    Components: FormBuilderComponents;
+    custom: FormCustomConfig;
+    children: FormBuilderProps["children"];
+}
+export declare const FormCustom: React.FC<FormCustomProps>;
+export {};
+//# sourceMappingURL=FormCustom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormCustom.d.ts","sourceRoot":"","sources":["../../../components/FormCustom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGpF,UAAU,eAAe;IACrB,UAAU,EAAE,qBAAqB,CAAC;IAClC,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAYhD,CAAC"}

package/dist/cjs/components/FormCustom.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormCustom = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const FormEntry_1 = require("./FormEntry");
+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)))) }));
+};
+exports.FormCustom = FormCustom;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { FormBuilderComponents, FormBuilderProps, FormEntryConfig } from "../type";
+interface FormEntryProps {
+    Components: FormBuilderComponents;
+    entry: FormEntryConfig;
+    children: FormBuilderProps["children"];
+}
+export declare const FormEntry: React.FC<FormEntryProps>;
+export {};
+//# sourceMappingURL=FormEntry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormEntry.d.ts","sourceRoot":"","sources":["../../../components/FormEntry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAY,eAAe,EAAE,MAAM,SAAS,CAAC;AAO7F,UAAU,cAAc;IACpB,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2D9C,CAAC"}

package/dist/cjs/components/FormEntry.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormEntry = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const condition_1 = require("../condition");
+const context_1 = require("../context");
+const util_1 = require("../util");
+const FormCustom_1 = require("./FormCustom");
+const FormField_1 = require("./FormField");
+const FormRow_1 = require("./FormRow");
+const FormSection_1 = require("./FormSection");
+const FormEntry = ({ Components, entry, children }) => {
+    const { data, fieldConfigs } = (0, context_1.useForm)();
+    const getHasChildren = (0, react_1.useCallback)((formData) => {
+        switch (entry.type) {
+            case "custom":
+            case "section":
+            case "row":
+                return (0, util_1.someFieldConfigs)([entry], field => (0, condition_1.fieldFulfillsConditions)(field, fieldConfigs, formData));
+            default:
+                return (0, condition_1.fieldFulfillsConditions)(entry, fieldConfigs, formData);
+        }
+    }, [entry, fieldConfigs]);
+    const [hasChildren, setHasChildren] = (0, react_1.useState)(getHasChildren(data.get()));
+    (0, react_1.useEffect)(() => {
+        const remove = data.subscribe(() => {
+            setHasChildren(getHasChildren(data.get()));
+        });
+        return () => remove();
+    }, [getHasChildren, data]);
+    if (!hasChildren) {
+        return null;
+    }
+    switch (entry.type) {
+        case "custom":
+            return ((0, jsx_runtime_1.jsx)(FormCustom_1.FormCustom, { custom: entry, Components: Components, children: children }));
+        case "section":
+            return ((0, jsx_runtime_1.jsx)(FormSection_1.FormSection, { section: entry, Components: Components, children: children }));
+        case "row":
+            return ((0, jsx_runtime_1.jsx)(FormRow_1.FormRow, { row: entry, Components: Components, children: children }));
+        default:
+            return ((0, jsx_runtime_1.jsx)(FormField_1.FormField, { field: entry, Components: Components, children: children }));
+    }
+};
+exports.FormEntry = FormEntry;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { FormBuilderComponents, FormBuilderProps, FormFieldConfig } from "../type";
+interface FormFieldProps {
+    Components: FormBuilderComponents;
+    field: FormFieldConfig;
+    children: FormBuilderProps["children"];
+}
+export declare const FormField: React.FC<FormFieldProps>;
+export {};
+//# sourceMappingURL=FormField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../components/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAIpD,OAAO,EAEH,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EAClB,MAAM,SAAS,CAAC;AAEjB,UAAU,cAAc;IACpB,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4G9C,CAAC"}

package/dist/cjs/components/FormField.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("../context");
+const useFormData_1 = require("../hook/useFormData");
+const useFormErrors_1 = require("../hook/useFormErrors");
+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;
+    const validationStrategy = (0, react_1.useMemo)(() => [fieldValidationStrategy, contextValidationStrategy], [fieldValidationStrategy, contextValidationStrategy]);
+    const hasValueFn = !!valueFn;
+    const hasConditions = !!conditions && Object.keys(conditions).length > 0;
+    const hasFieldConfigFunc = typeof fieldConfigFunc === "function";
+    const hasValidationFunc = !!validations && validations.some(({ validation }) => typeof validation === "function");
+    const rerenderWithData = hasValueFn || hasConditions || hasFieldConfigFunc || hasValidationFunc;
+    const [data, setStore, getStore] = (0, useFormData_1.useFormData)(rerenderWithData ? store => store : store => store[name]);
+    const [fieldError] = (0, useFormErrors_1.useFormErrors)(store => store[name]);
+    const value = rerenderWithData ? data[name] : data;
+    const normalizedValue = valueFn ? valueFn(data) : value;
+    const fieldConfig = hasFieldConfigFunc
+        ? fieldConfigFunc({ value: normalizedValue, data })
+        : fieldConfigFunc;
+    const handleInput = (0, react_1.useCallback)(value => {
+        let normalizedValue;
+        if (onFieldInput) {
+            normalizedValue = onFieldInput({
+                value,
+                field,
+                previousData: getStore(),
+            });
+        }
+        else if (onInput) {
+            normalizedValue = onInput({
+                value,
+                field,
+                previousData: getStore(),
+            });
+        }
+        else {
+            normalizedValue = { [field.name]: value };
+        }
+        editData.set(normalizedValue);
+        setStore(normalizedValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [field, setStore, getStore, onFieldInput, onInput]);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        if (!validations || !validationStrategy.includes("blur")) {
+            return;
+        }
+        validateField(field);
+    }, [field, validations, validationStrategy, validateField]);
+    const fieldInputError = (() => {
+        var _a;
+        if (!validations || !validationStrategy.includes("input")) {
+            return;
+        }
+        const editValue = editData.get()[field.name];
+        if (editValue === undefined) {
+            return;
+        }
+        return (_a = validateField(field)) !== null && _a !== void 0 ? _a : undefined;
+    })();
+    const childrenProps = {
+        value: normalizedValue,
+        error: fieldError || fieldInputError,
+        onInput: handleInput,
+        onBlur: handleBlur,
+        field: Object.assign(Object.assign({}, field), { fieldConfig }),
+    };
+    const { FieldWrapper } = Components;
+    if (!FieldWrapper) {
+        throw new Error("No field component found");
+    }
+    return (0, jsx_runtime_1.jsx)(FieldWrapper, { columns: columns, children: children(childrenProps) });
+};
+exports.FormField = FormField;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { FormBuilderComponents, FormBuilderProps, FormRowConfig } from "../type";
+interface FormRowProps {
+    Components: FormBuilderComponents;
+    row: FormRowConfig;
+    children: FormBuilderProps["children"];
+}
+export declare const FormRow: React.FC<FormRowProps>;
+export {};
+//# sourceMappingURL=FormRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormRow.d.ts","sourceRoot":"","sources":["../../../components/FormRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGjF,UAAU,YAAY;IAClB,UAAU,EAAE,qBAAqB,CAAC;IAClC,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgB1C,CAAC"}

package/dist/cjs/components/FormRow.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FormEntry_1 = require("./FormEntry");
+const FormRow = ({ Components, row, children }) => {
+    const { RowWrapper } = Components;
+    if (!RowWrapper) {
+        throw new Error(`No row component found.`);
+    }
+    return ((0, jsx_runtime_1.jsx)(RowWrapper, { children: row.content.map((entry, index) => ((0, jsx_runtime_1.jsx)(FormEntry_1.FormEntry, { entry: entry, Components: Components, children: children }, index))) }));
+};
+exports.FormRow = FormRow;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { FormBuilderComponents, FormBuilderProps, FormSectionConfig } from "../type";
+interface FormSectionProps {
+    Components: FormBuilderComponents;
+    section: FormSectionConfig;
+    children: FormBuilderProps["children"];
+}
+export declare const FormSection: React.FC<FormSectionProps>;
+export {};
+//# sourceMappingURL=FormSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.d.ts","sourceRoot":"","sources":["../../../components/FormSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGrF,UAAU,gBAAgB;IACtB,UAAU,EAAE,qBAAqB,CAAC;IAClC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgBlD,CAAC"}

package/dist/cjs/components/FormSection.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FormEntry_1 = require("./FormEntry");
+const FormSection = ({ Components, section, children }) => {
+    const { SectionWrapper } = Components;
+    if (!SectionWrapper) {
+        throw new Error(`No section component found.`);
+    }
+    return ((0, jsx_runtime_1.jsx)(SectionWrapper, { children: section.content.map((entry, index) => ((0, jsx_runtime_1.jsx)(FormEntry_1.FormEntry, { entry: entry, Components: Components, children: children }, index))) }));
+};
+exports.FormSection = FormSection;

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

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+interface WatchFormValueProps {
+    name?: string;
+    children: (value: any) => ReactNode;
+}
+export declare const FormWatch: React.FC<WatchFormValueProps>;
+export {};
+//# sourceMappingURL=FormWatch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormWatch.d.ts","sourceRoot":"","sources":["../../../components/FormWatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,UAAU,mBAAmB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAInD,CAAC"}

package/dist/cjs/components/FormWatch.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormWatch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const useFormData_1 = require("../hook/useFormData");
+const FormWatch = ({ name, children }) => {
+    const [value] = (0, useFormData_1.useFormData)(store => (name ? store[name] : store));
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: children(value) });
+};
+exports.FormWatch = FormWatch;

package/dist/cjs/condition/index.d.ts

@@ -0,0 +1,3 @@
+import { FormData, FormFieldConfig } from "../type";
+export declare const fieldFulfillsConditions: ({ conditions }: Pick<FormFieldConfig, "conditions">, fieldConfigs: Record<string, FormFieldConfig>, data: FormData) => boolean;
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/condition/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../condition/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,QAAQ,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEpE,eAAO,MAAM,uBAAuB,mBAChB,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,gBACrC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,QACvC,QAAQ,KACf,OAUF,CAAC"}

package/dist/cjs/condition/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fieldFulfillsConditions = void 0;
+const fieldFulfillsConditions = ({ conditions }, fieldConfigs, data) => {
+    if (!conditions) {
+        return true;
+    }
+    return conditions.every(condition => {
+        return condition instanceof Array
+            ? condition.some(c => fulfillsConditions(c, fieldConfigs, data))
+            : fulfillsConditions(condition, fieldConfigs, data);
+    });
+};
+exports.fieldFulfillsConditions = fieldFulfillsConditions;
+const fulfillsConditions = (conditions, fieldConfigs, data) => {
+    return Object.entries(conditions).every(([key, condition]) => {
+        var _a;
+        const { valueFn } = (_a = fieldConfigs[key]) !== null && _a !== void 0 ? _a : {};
+        const value = valueFn ? valueFn(data) : data[key];
+        switch (typeof condition) {
+            case "function":
+                return condition(value);
+            case "string":
+                return value === condition;
+            default:
+                return !!value === condition;
+        }
+    });
+};

package/dist/cjs/context/FormProvider.d.ts

@@ -0,0 +1,7 @@
+export declare const FormProvider: {
+    (props: import("./data").FormProviderProps & {
+        children?: import("react").ReactNode | undefined;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=FormProvider.d.ts.map

package/dist/cjs/context/FormProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormProvider.d.ts","sourceRoot":"","sources":["../../../context/FormProvider.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,YAAY;;;;;CA2BxB,CAAC"}