@gravity-ui/page-constructor 8.4.2 → 8.5.0-alpha.0

package/build/esm/form-builder/components/OptionsRenderer/OptionsRenderer.css

@@ -0,0 +1,31 @@
+.pcformbuilder-options-renderer__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.pcformbuilder-options-renderer__option-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.pcformbuilder-options-renderer__add-option-button {
+  margin-left: 8px;
+}
+.pcformbuilder-options-renderer__remove-option-button {
+  margin-left: 8px;
+}
+.pcformbuilder-options-renderer__nested-fields {
+  margin-top: 12px;
+  margin-left: 16px;
+  padding-left: 12px;
+  border-left: 2px solid var(--g-color-line-generic);
+}
+.pcformbuilder-options-renderer__option {
+  margin-top: 12px;
+  padding: 12px;
+  background-color: var(--g-color-base-background);
+  border-radius: 6px;
+  border: 1px solid var(--g-color-line-generic);
+}

package/build/esm/form-builder/components/OptionsRenderer/OptionsRenderer.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ConfigInput } from "../../../form-generator/index.js";
+import { FormOptionsField, InputTypeMenuItem } from "../../types.js";
+import './OptionsRenderer.css';
+interface OptionsRendererProps {
+    field: FormOptionsField;
+    fieldName: string;
+    inputTypeMenuItems: InputTypeMenuItem[];
+    renderNestedField: (field: ConfigInput, index: number, parentId: string, optionIndex?: number) => React.ReactNode;
+}
+export declare const OptionsRenderer: React.FC<OptionsRendererProps>;
+export {};

package/build/esm/form-builder/components/OptionsRenderer/OptionsRenderer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@gravity-ui/uikit';
+import { useFormContext } from "../../hooks/FormContext.js";
+import { formBuilderCn } from "../../utils/cn.js";
+import { AddPropertyButton } from "../AddPropertyButton/AddPropertyButton.js";
+import { OptionHeader } from "../OptionHeader/OptionHeader.js";
+import { SectionHeader } from "../SectionHeader/SectionHeader.js";
+import './OptionsRenderer.css';
+const b = formBuilderCn('options-renderer');
+export const OptionsRenderer = ({ field, fieldName: _fieldName, inputTypeMenuItems, renderNestedField, }) => {
+    const { addOptionProperty, addOption, removeOption } = useFormContext();
+    return (_jsxs("div", { className: b('nested-fields'), children: [_jsxs("div", { className: b('header'), children: [_jsx(SectionHeader, { title: "Options:" }), _jsx(Button, { view: "normal", size: "s", onClick: () => {
+                            addOption(field.id);
+                        }, className: b('add-option-button'), children: "+ Add Option" })] }), field.options.map((option, optionIndex) => (_jsxs("div", { className: b('option'), children: [_jsxs("div", { className: b('option-header'), children: [_jsx(OptionHeader, { title: option.title }), field.options.length > 1 && (_jsx(Button, { view: "normal", size: "xs", onClick: () => {
+                                    removeOption(field.id, optionIndex);
+                                }, className: b('remove-option-button'), children: "Remove" }))] }), _jsxs("div", { className: b('nested-fields'), children: [_jsx(SectionHeader, { title: "Properties:", variant: "body-2" }), option.properties.map((property, propIndex) => renderNestedField(property, propIndex, field.id, optionIndex)), _jsx(AddPropertyButton, { inputTypeMenuItems: inputTypeMenuItems, onAdd: (type) => {
+                                    addOptionProperty(field.id, optionIndex, type);
+                                } })] })] }, `option_${optionIndex}`)))] }));
+};
+//# sourceMappingURL=OptionsRenderer.js.map

package/build/esm/form-builder/components/OptionsRenderer/OptionsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsRenderer.js","sourceRoot":"../../../../../src","sources":["form-builder/components/OptionsRenderer/OptionsRenderer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAGzC,OAAO,EAAC,cAAc,EAAC,mCAAgC;AAEvD,OAAO,EAAC,aAAa,EAAC,0BAAuB;AAC7C,OAAO,EAAC,iBAAiB,EAAC,kDAA+C;AACzE,OAAO,EAAC,YAAY,EAAC,wCAAqC;AAC1D,OAAO,EAAC,aAAa,EAAC,0CAAuC;AAE7D,OAAO,uBAAuB,CAAC;AAE/B,MAAM,CAAC,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAC;AAc5C,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC5D,KAAK,EACL,SAAS,EAAE,UAAU,EACrB,kBAAkB,EAClB,iBAAiB,GACpB,EAAE,EAAE;IACD,MAAM,EAAC,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAC,GAAG,cAAc,EAAE,CAAC;IAEtE,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,KAAC,aAAa,IAAC,KAAK,EAAC,UAAU,GAAG,EAClC,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,GAAG,EAAE;4BACV,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;wBACxB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC,6BAG5B,IACP,EAEL,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACxC,eAAmC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACrD,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,KAAC,YAAY,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,GAAI,EACpC,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;oCACV,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;gCACxC,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,uBAG/B,CACZ,IACC,EAEN,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,KAAC,aAAa,IAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,QAAQ,GAAG,EAErD,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,CAC3C,iBAAiB,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE,WAAW,CAAC,CAChE,EAED,KAAC,iBAAiB,IACd,kBAAkB,EAAE,kBAAkB,EACtC,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;oCACZ,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;gCACnD,CAAC,GACH,IACA,KA9BA,UAAU,WAAW,EAAE,CA+B3B,CACT,CAAC,IACA,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Button} from '@gravity-ui/uikit';\n\nimport {ConfigInput} from '../../../form-generator';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormOptionsField, InputTypeMenuItem} from '../../types';\nimport {formBuilderCn} from '../../utils/cn';\nimport {AddPropertyButton} from '../AddPropertyButton/AddPropertyButton';\nimport {OptionHeader} from '../OptionHeader/OptionHeader';\nimport {SectionHeader} from '../SectionHeader/SectionHeader';\n\nimport './OptionsRenderer.scss';\n\nconst b = formBuilderCn('options-renderer');\n\ninterface OptionsRendererProps {\n    field: FormOptionsField;\n    fieldName: string;\n    inputTypeMenuItems: InputTypeMenuItem[];\n    renderNestedField: (\n        field: ConfigInput,\n        index: number,\n        parentId: string,\n        optionIndex?: number,\n    ) => React.ReactNode;\n}\n\nexport const OptionsRenderer: React.FC<OptionsRendererProps> = ({\n    field,\n    fieldName: _fieldName,\n    inputTypeMenuItems,\n    renderNestedField,\n}) => {\n    const {addOptionProperty, addOption, removeOption} = useFormContext();\n\n    return (\n        <div className={b('nested-fields')}>\n            <div className={b('header')}>\n                <SectionHeader title=\"Options:\" />\n                <Button\n                    view=\"normal\"\n                    size=\"s\"\n                    onClick={() => {\n                        addOption(field.id);\n                    }}\n                    className={b('add-option-button')}\n                >\n                    + Add Option\n                </Button>\n            </div>\n\n            {field.options.map((option, optionIndex) => (\n                <div key={`option_${optionIndex}`} className={b('option')}>\n                    <div className={b('option-header')}>\n                        <OptionHeader title={option.title} />\n                        {field.options.length > 1 && (\n                            <Button\n                                view=\"normal\"\n                                size=\"xs\"\n                                onClick={() => {\n                                    removeOption(field.id, optionIndex);\n                                }}\n                                className={b('remove-option-button')}\n                            >\n                                Remove\n                            </Button>\n                        )}\n                    </div>\n\n                    <div className={b('nested-fields')}>\n                        <SectionHeader title=\"Properties:\" variant=\"body-2\" />\n\n                        {option.properties.map((property, propIndex) =>\n                            renderNestedField(property, propIndex, field.id, optionIndex),\n                        )}\n\n                        <AddPropertyButton\n                            inputTypeMenuItems={inputTypeMenuItems}\n                            onAdd={(type) => {\n                                addOptionProperty(field.id, optionIndex, type);\n                            }}\n                        />\n                    </div>\n                </div>\n            ))}\n        </div>\n    );\n};\n"]}

package/build/esm/form-builder/components/SectionHeader/SectionHeader.css

@@ -0,0 +1,3 @@
+.pcformbuilder-section-header {
+  margin-bottom: 8px;
+}

package/build/esm/form-builder/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import './SectionHeader.css';
+interface SectionHeaderProps {
+    title: string;
+    variant?: 'body-1' | 'body-2';
+}
+export declare const SectionHeader: React.FC<SectionHeaderProps>;
+export {};

package/build/esm/form-builder/components/SectionHeader/SectionHeader.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@gravity-ui/uikit';
+import { formBuilderCn } from "../../utils/cn.js";
+import './SectionHeader.css';
+const b = formBuilderCn('section-header');
+export const SectionHeader = ({ title, variant = 'body-1' }) => (_jsx("div", { className: b(), children: _jsx(Text, { variant: variant, children: title }) }));
+//# sourceMappingURL=SectionHeader.js.map

package/build/esm/form-builder/components/SectionHeader/SectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.js","sourceRoot":"../../../../../src","sources":["form-builder/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAC,aAAa,EAAC,0BAAuB;AAE7C,OAAO,qBAAqB,CAAC;AAE7B,MAAM,CAAC,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAO1C,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,EAAC,EAAE,EAAE,CAAC,CACxF,cAAK,SAAS,EAAE,CAAC,EAAE,YACf,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,YAAG,KAAK,GAAQ,GACpC,CACT,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Text} from '@gravity-ui/uikit';\n\nimport {formBuilderCn} from '../../utils/cn';\n\nimport './SectionHeader.scss';\n\nconst b = formBuilderCn('section-header');\n\ninterface SectionHeaderProps {\n    title: string;\n    variant?: 'body-1' | 'body-2';\n}\n\nexport const SectionHeader: React.FC<SectionHeaderProps> = ({title, variant = 'body-1'}) => (\n    <div className={b()}>\n        <Text variant={variant}>{title}</Text>\n    </div>\n);\n"]}

package/build/esm/form-builder/components/SelectFieldRenderer/SelectFieldRenderer.css

@@ -0,0 +1,36 @@
+.pcformbuilder-select-field-renderer__config-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pcformbuilder-select-field-renderer__config-row > span {
+  min-width: 90px;
+  font-weight: 500;
+}
+.pcformbuilder-select-field-renderer__config-row > div {
+  flex: 1;
+}
+.pcformbuilder-select-field-renderer__config-row_vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.pcformbuilder-select-field-renderer__options-title {
+  margin-bottom: 8px;
+}
+.pcformbuilder-select-field-renderer__enum-option {
+  margin-top: 8px;
+  padding: 12px;
+  background-color: var(--g-color-base-generic-ultralight);
+  border-radius: 6px;
+  border: 1px solid var(--g-color-line-generic);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.pcformbuilder-select-field-renderer__remove-button {
+  align-self: flex-end;
+  margin-top: 4px;
+}
+.pcformbuilder-select-field-renderer__add-button {
+  margin-top: 8px;
+}

package/build/esm/form-builder/components/SelectFieldRenderer/SelectFieldRenderer.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormField } from "../../types.js";
+import './SelectFieldRenderer.css';
+interface SelectFieldRendererProps {
+    field: FormField;
+}
+export declare const SelectFieldRenderer: React.FC<SelectFieldRendererProps>;
+export {};

package/build/esm/form-builder/components/SelectFieldRenderer/SelectFieldRenderer.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button, DropdownMenu, Text, TextInput } from '@gravity-ui/uikit';
+import { useFormContext } from "../../hooks/FormContext.js";
+import { formBuilderCn } from "../../utils/cn.js";
+import './SelectFieldRenderer.css';
+const b = formBuilderCn('select-field-renderer');
+export const SelectFieldRenderer = ({ field }) => {
+    const { updateField } = useFormContext();
+    if (field.type !== 'select') {
+        return null;
+    }
+    const view = field.view;
+    const mode = field.mode;
+    const enumValues = (field.enum || []);
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('config-row'), children: [_jsx(Text, { variant: "body-2", children: "View:" }), _jsx(DropdownMenu, { items: [
+                            {
+                                action: () => updateField(field.id, { view: 'select' }),
+                                text: 'Select',
+                            },
+                            {
+                                action: () => updateField(field.id, { view: 'radiobutton' }),
+                                text: 'Radio Button',
+                            },
+                        ], renderSwitcher: (props) => (_jsx(Button, { ...props, view: "normal", size: "s", children: view === 'radiobutton' ? 'Radio Button' : 'Select' })) })] }), _jsxs("div", { className: b('config-row'), children: [_jsx(Text, { variant: "body-2", children: "Mode:" }), _jsx(DropdownMenu, { items: [
+                            {
+                                action: () => updateField(field.id, { mode: 'single' }),
+                                text: 'Single',
+                            },
+                            {
+                                action: () => updateField(field.id, { mode: 'multiple' }),
+                                text: 'Multiple',
+                            },
+                        ], renderSwitcher: (props) => (_jsx(Button, { ...props, view: "normal", size: "s", children: mode === 'multiple' ? 'Multiple' : 'Single' })) })] }), _jsxs("div", { className: b('config-row', { vertical: true }), children: [_jsx(Text, { variant: "body-2", className: b('options-title'), children: "Options:" }), enumValues.map((option, index) => (_jsxs("div", { className: b('enum-option'), children: [_jsxs("div", { className: b('config-row'), children: [_jsx(Text, { variant: "body-2", children: "Label:" }), _jsx(TextInput, { value: option.content, onUpdate: (value) => {
+                                            const newEnum = [...enumValues];
+                                            newEnum[index] = {
+                                                ...newEnum[index],
+                                                content: value,
+                                            };
+                                            updateField(field.id, { enum: newEnum });
+                                        }, size: "s" })] }), _jsxs("div", { className: b('config-row'), children: [_jsx(Text, { variant: "body-2", children: "Value:" }), _jsx(TextInput, { value: option.value, onUpdate: (value) => {
+                                            const newEnum = [...enumValues];
+                                            newEnum[index] = {
+                                                ...newEnum[index],
+                                                value,
+                                            };
+                                            updateField(field.id, { enum: newEnum });
+                                        }, size: "s" })] }), _jsx(Button, { view: "flat-danger", size: "xs", onClick: () => {
+                                    const newEnum = [...enumValues];
+                                    newEnum.splice(index, 1);
+                                    updateField(field.id, { enum: newEnum });
+                                }, className: b('remove-button'), children: "Remove" })] }, `enum_${index}`))), _jsx(Button, { view: "normal", size: "s", onClick: () => {
+                            const newEnum = [...(enumValues || [])];
+                            newEnum.push({
+                                content: `Option ${newEnum.length + 1}`,
+                                value: `option${newEnum.length + 1}`,
+                            });
+                            updateField(field.id, { enum: newEnum });
+                        }, className: b('add-button'), children: "+ Add Option" })] })] }));
+};
+//# sourceMappingURL=SelectFieldRenderer.js.map

package/build/esm/form-builder/components/SelectFieldRenderer/SelectFieldRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFieldRenderer.js","sourceRoot":"../../../../../src","sources":["form-builder/components/SelectFieldRenderer/SelectFieldRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Button, DropdownMenu, Text, TextInput} from '@gravity-ui/uikit';\n\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormField} from '../../types';\nimport {formBuilderCn} from '../../utils/cn';\n\nimport './SelectFieldRenderer.scss';\n\nconst b = formBuilderCn('select-field-renderer');\n\ninterface SelectFieldRendererProps {\n    field: FormField;\n}\n\ninterface SelectFieldOption {\n    content: string;\n    value: string;\n}\n\nexport const SelectFieldRenderer: React.FC<SelectFieldRendererProps> = ({field}) => {\n    const {updateField} = useFormContext();\n\n    if (field.type !== 'select') {\n        return null;\n    }\n\n    const view = field.view as 'select' | 'radiobutton';\n    const mode = field.mode as 'single' | 'multiple';\n    const enumValues = (field.enum || []) as SelectFieldOption[];\n\n    return (\n        <React.Fragment>\n            <div className={b('config-row')}>\n                <Text variant=\"body-2\">View:</Text>\n                <DropdownMenu\n                    items={[\n                        {\n                            action: () => updateField(field.id, {view: 'select'}),\n                            text: 'Select',\n                        },\n                        {\n                            action: () => updateField(field.id, {view: 'radiobutton'}),\n                            text: 'Radio Button',\n                        },\n                    ]}\n                    renderSwitcher={(props) => (\n                        <Button {...props} view=\"normal\" size=\"s\">\n                            {view === 'radiobutton' ? 'Radio Button' : 'Select'}\n                        </Button>\n                    )}\n                />\n            </div>\n\n            <div className={b('config-row')}>\n                <Text variant=\"body-2\">Mode:</Text>\n                <DropdownMenu\n                    items={[\n                        {\n                            action: () => updateField(field.id, {mode: 'single'}),\n                            text: 'Single',\n                        },\n                        {\n                            action: () => updateField(field.id, {mode: 'multiple'}),\n                            text: 'Multiple',\n                        },\n                    ]}\n                    renderSwitcher={(props) => (\n                        <Button {...props} view=\"normal\" size=\"s\">\n                            {mode === 'multiple' ? 'Multiple' : 'Single'}\n                        </Button>\n                    )}\n                />\n            </div>\n\n            <div className={b('config-row', {vertical: true})}>\n                <Text variant=\"body-2\" className={b('options-title')}>\n                    Options:\n                </Text>\n                {enumValues.map((option, index) => (\n                    <div key={`enum_${index}`} className={b('enum-option')}>\n                        <div className={b('config-row')}>\n                            <Text variant=\"body-2\">Label:</Text>\n                            <TextInput\n                                value={option.content}\n                                onUpdate={(value) => {\n                                    const newEnum = [...enumValues];\n                                    newEnum[index] = {\n                                        ...newEnum[index],\n                                        content: value,\n                                    };\n                                    updateField(field.id, {enum: newEnum});\n                                }}\n                                size=\"s\"\n                            />\n                        </div>\n                        <div className={b('config-row')}>\n                            <Text variant=\"body-2\">Value:</Text>\n                            <TextInput\n                                value={option.value}\n                                onUpdate={(value) => {\n                                    const newEnum = [...enumValues];\n                                    newEnum[index] = {\n                                        ...newEnum[index],\n                                        value,\n                                    };\n                                    updateField(field.id, {enum: newEnum});\n                                }}\n                                size=\"s\"\n                            />\n                        </div>\n                        <Button\n                            view=\"flat-danger\"\n                            size=\"xs\"\n                            onClick={() => {\n                                const newEnum = [...enumValues];\n                                newEnum.splice(index, 1);\n                                updateField(field.id, {enum: newEnum});\n                            }}\n                            className={b('remove-button')}\n                        >\n                            Remove\n                        </Button>\n                    </div>\n                ))}\n                <Button\n                    view=\"normal\"\n                    size=\"s\"\n                    onClick={() => {\n                        const newEnum = [...(enumValues || [])];\n                        newEnum.push({\n                            content: `Option ${newEnum.length + 1}`,\n                            value: `option${newEnum.length + 1}`,\n                        });\n                        updateField(field.id, {enum: newEnum});\n                    }}\n                    className={b('add-button')}\n                >\n                    + Add Option\n                </Button>\n            </div>\n        </React.Fragment>\n    );\n};\n"]}

package/build/esm/form-builder/hooks/FormContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { FormContextType, FormField } from "../types.js";
+export declare const FormContext: React.Context<FormContextType>;
+interface FormProviderProps {
+    children: React.ReactNode;
+    formFields: FormField[];
+    onChange?: (fields: FormField[]) => void;
+}
+export declare const FormProvider: React.FC<FormProviderProps>;
+export declare const useFormContext: () => FormContextType;
+export {};

package/build/esm/form-builder/hooks/FormContext.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useFormFields } from "./useFormFields.js";
+export const FormContext = React.createContext({});
+export const FormProvider = ({ children, formFields, onChange }) => {
+    const formFieldsData = useFormFields({ initialFields: formFields, onChange });
+    return _jsx(FormContext.Provider, { value: formFieldsData, children: children });
+};
+export const useFormContext = () => {
+    const context = React.useContext(FormContext);
+    if (!context) {
+        throw new Error('useFormContext must be used within a FormProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=FormContext.js.map

package/build/esm/form-builder/hooks/FormContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormContext.js","sourceRoot":"../../../../src","sources":["form-builder/hooks/FormContext.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,aAAa,EAAC,2BAAwB;AAE9C,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAkB,EAAqB,CAAC,CAAC;AAQvF,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAC,EAAE,EAAE;IAC1F,MAAM,cAAc,GAAG,aAAa,CAAC,EAAC,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAC,CAAC,CAAC;IAC5E,OAAO,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,YAAG,QAAQ,GAAwB,CAAC;AAC1F,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IAC/B,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAE9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;IACzE,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {FormContextType, FormField} from '../types';\n\nimport {useFormFields} from './useFormFields';\n\nexport const FormContext = React.createContext<FormContextType>({} as FormContextType);\n\ninterface FormProviderProps {\n    children: React.ReactNode;\n    formFields: FormField[];\n    onChange?: (fields: FormField[]) => void;\n}\n\nexport const FormProvider: React.FC<FormProviderProps> = ({children, formFields, onChange}) => {\n    const formFieldsData = useFormFields({initialFields: formFields, onChange});\n    return <FormContext.Provider value={formFieldsData}>{children}</FormContext.Provider>;\n};\n\nexport const useFormContext = () => {\n    const context = React.useContext(FormContext);\n\n    if (!context) {\n        throw new Error('useFormContext must be used within a FormProvider');\n    }\n\n    return context;\n};\n"]}

package/build/esm/form-builder/hooks/useFormFields.d.ts

@@ -0,0 +1,23 @@
+import { ConfigInput } from "../../form-generator/index.js";
+import { FormField } from "../types.js";
+interface UseFormFieldsProps {
+    initialFields: FormField[];
+    onChange?: (fields: FormField[]) => void;
+}
+export declare const useFormFields: ({ initialFields, onChange }: UseFormFieldsProps) => {
+    formFields: FormField[];
+    createField: (type: ConfigInput["type"], name?: string) => FormField;
+    addField: (type: ConfigInput["type"]) => void;
+    removeField: (fieldId: string) => void;
+    updateField: (fieldId: string, updates: Partial<ConfigInput>) => void;
+    addObjectProperty: (objectId: string, type?: ConfigInput["type"]) => void;
+    addOptionProperty: (fieldId: string, optionIndex: number, type?: ConfigInput["type"]) => void;
+    removeObjectProperty: (fieldId: string, propertyIndex: number) => void;
+    removeOptionProperty: (fieldId: string, optionIndex: number, propertyIndex: number) => void;
+    updateObjectProperty: (fieldId: string, propertyIndex: number, updates: Partial<ConfigInput>) => void;
+    updateOptionProperty: (fieldId: string, optionIndex: number, propertyIndex: number, updates: Partial<ConfigInput>) => void;
+    addOption: (fieldId: string) => void;
+    removeOption: (fieldId: string, optionIndex: number) => void;
+    resetForm: () => void;
+};
+export {};