@gravity-ui/page-constructor 6.3.2-alpha.6 → 6.3.2-alpha.9

package/build/cjs/form-generator/components/FieldCard/FieldCard.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldCard = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const ConfigRow_1 = require("../ConfigRow/ConfigRow.js");
+const FieldHeader_1 = require("../FieldHeader/FieldHeader.js");
+const ArrayFieldRenderer_1 = require("../ArrayFieldRenderer/ArrayFieldRenderer.js");
+const ObjectFieldRenderer_1 = require("../ObjectFieldRenderer/ObjectFieldRenderer.js");
+const OptionsRenderer_1 = require("../OptionsRenderer/OptionsRenderer.js");
+const SelectFieldRenderer_1 = require("../SelectFieldRenderer/SelectFieldRenderer.js");
+const FormContext_1 = require("../../hooks/FormContext.js");
+const b = (0, bem_cn_lite_1.default)('field-card');
+const FieldCard = ({ field, inputTypeMenuItems }) => {
+    const { removeField, updateField, removeObjectProperty, removeOptionProperty, updateObjectProperty, updateOptionProperty, } = (0, FormContext_1.useFormContext)();
+    const renderNestedField = (nestedField, index, parentId, optionIndex) => {
+        const isInOption = optionIndex !== undefined;
+        const handleRemove = () => {
+            if (isInOption) {
+                removeOptionProperty(parentId, optionIndex, index);
+            }
+            else {
+                removeObjectProperty(parentId, index);
+            }
+        };
+        const handleUpdate = (updates) => {
+            if (isInOption) {
+                updateOptionProperty(parentId, optionIndex, index, updates);
+            }
+            else {
+                updateObjectProperty(parentId, index, updates);
+            }
+        };
+        return ((0, jsx_runtime_1.jsxs)("div", { className: b('nested-field'), children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { title: nestedField.type.toUpperCase(), onRemove: handleRemove, variant: "subheader-3", buttonSize: "xs" }), (0, jsx_runtime_1.jsxs)("div", { className: b('config'), children: [(0, jsx_runtime_1.jsx)(ConfigRow_1.ConfigRow, { label: "Name", value: nestedField.name, onUpdate: (value) => handleUpdate({ name: value }) }), (0, jsx_runtime_1.jsx)(ConfigRow_1.ConfigRow, { label: "Title", value: nestedField.title, onUpdate: (value) => handleUpdate({ title: value }) }), renderFieldTypeSpecificContent(nestedField, parentId)] })] }, `${parentId}_${index}`));
+    };
+    const renderFieldTypeSpecificContent = (fieldConfig, parentId) => {
+        switch (fieldConfig.type) {
+            case 'object':
+                return ((0, jsx_runtime_1.jsx)(ObjectFieldRenderer_1.ObjectFieldRenderer, { field: fieldConfig, fieldName: parentId, inputTypeMenuItems: inputTypeMenuItems, renderNestedField: renderNestedField }));
+            case 'oneOf':
+                return ((0, jsx_runtime_1.jsx)(OptionsRenderer_1.OptionsRenderer, { field: fieldConfig, fieldName: parentId, inputTypeMenuItems: inputTypeMenuItems, renderNestedField: renderNestedField }));
+            case 'anyOf':
+                return ((0, jsx_runtime_1.jsx)(OptionsRenderer_1.OptionsRenderer, { field: fieldConfig, fieldName: parentId, inputTypeMenuItems: inputTypeMenuItems, renderNestedField: renderNestedField }));
+            case 'select':
+                return (0, jsx_runtime_1.jsx)(SelectFieldRenderer_1.SelectFieldRenderer, { field: fieldConfig });
+            case 'array':
+                return ((0, jsx_runtime_1.jsx)(ArrayFieldRenderer_1.ArrayFieldRenderer, { field: fieldConfig, fieldName: parentId, inputTypeMenuItems: inputTypeMenuItems, renderNestedField: renderNestedField }));
+            default:
+                return null;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(uikit_1.Card, { className: b(), children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { title: field.type.toUpperCase(), onRemove: () => removeField(field.id) }), (0, jsx_runtime_1.jsxs)("div", { className: b('config'), children: [(0, jsx_runtime_1.jsx)(ConfigRow_1.ConfigRow, { label: "Name", value: field.name, onUpdate: (value) => updateField(field.id, { name: value }) }), (0, jsx_runtime_1.jsx)(ConfigRow_1.ConfigRow, { label: "Title", value: field.title, onUpdate: (value) => updateField(field.id, { title: value }) }), renderFieldTypeSpecificContent(field, field.id)] })] }, field.id));
+};
+exports.FieldCard = FieldCard;
+//# sourceMappingURL=FieldCard.js.map

package/build/cjs/form-generator/components/FieldCard/FieldCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldCard.js","sourceRoot":"../../../../../src","sources":["form-generator/components/FieldCard/FieldCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {Card} from '@gravity-ui/uikit';\nimport block from 'bem-cn-lite';\nimport {ConfigInput} from '../../../editor-v2';\nimport {ConfigRow} from '../ConfigRow/ConfigRow';\nimport {FieldHeader} from '../FieldHeader/FieldHeader';\nimport {ArrayFieldRenderer} from '../ArrayFieldRenderer/ArrayFieldRenderer';\nimport {ObjectFieldRenderer} from '../ObjectFieldRenderer/ObjectFieldRenderer';\nimport {OptionsRenderer} from '../OptionsRenderer/OptionsRenderer';\nimport {SelectFieldRenderer} from '../SelectFieldRenderer/SelectFieldRenderer';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {\n    FormAnyOfField,\n    FormArrayField,\n    FormField,\n    FormObjectField,\n    FormOneOfField,\n    InputTypeMenuItem,\n} from '../../hooks/types';\n\nimport './FieldCard.scss';\n\nconst b = block('field-card');\n\ninterface FieldCardProps {\n    field: FormField;\n    inputTypeMenuItems: InputTypeMenuItem[];\n}\n\nexport const FieldCard: React.FC<FieldCardProps> = ({field, inputTypeMenuItems}) => {\n    const {\n        removeField,\n        updateField,\n        removeObjectProperty,\n        removeOptionProperty,\n        updateObjectProperty,\n        updateOptionProperty,\n    } = useFormContext();\n\n    const renderNestedField = (\n        nestedField: ConfigInput,\n        index: number,\n        parentId: string,\n        optionIndex?: number,\n    ) => {\n        const isInOption = optionIndex !== undefined;\n\n        const handleRemove = () => {\n            if (isInOption) {\n                removeOptionProperty(parentId, optionIndex, index);\n            } else {\n                removeObjectProperty(parentId, index);\n            }\n        };\n\n        const handleUpdate = (updates: Partial<ConfigInput>) => {\n            if (isInOption) {\n                updateOptionProperty(parentId, optionIndex, index, updates);\n            } else {\n                updateObjectProperty(parentId, index, updates);\n            }\n        };\n\n        return (\n            <div key={`${parentId}_${index}`} className={b('nested-field')}>\n                <FieldHeader\n                    title={nestedField.type.toUpperCase()}\n                    onRemove={handleRemove}\n                    variant=\"subheader-3\"\n                    buttonSize=\"xs\"\n                />\n\n                <div className={b('config')}>\n                    <ConfigRow\n                        label=\"Name\"\n                        value={nestedField.name}\n                        onUpdate={(value) => handleUpdate({name: value})}\n                    />\n                    <ConfigRow\n                        label=\"Title\"\n                        value={nestedField.title}\n                        onUpdate={(value) => handleUpdate({title: value})}\n                    />\n\n                    {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n                    {renderFieldTypeSpecificContent(nestedField, parentId)}\n                </div>\n            </div>\n        );\n    };\n\n    const renderFieldTypeSpecificContent = (fieldConfig: ConfigInput, parentId: string) => {\n        switch (fieldConfig.type) {\n            case 'object':\n                return (\n                    <ObjectFieldRenderer\n                        field={fieldConfig as FormObjectField}\n                        fieldName={parentId}\n                        inputTypeMenuItems={inputTypeMenuItems}\n                        renderNestedField={renderNestedField}\n                    />\n                );\n\n            case 'oneOf':\n                return (\n                    <OptionsRenderer\n                        field={fieldConfig as FormOneOfField}\n                        fieldName={parentId}\n                        inputTypeMenuItems={inputTypeMenuItems}\n                        renderNestedField={renderNestedField}\n                    />\n                );\n\n            case 'anyOf':\n                return (\n                    <OptionsRenderer\n                        field={fieldConfig as FormAnyOfField}\n                        fieldName={parentId}\n                        inputTypeMenuItems={inputTypeMenuItems}\n                        renderNestedField={renderNestedField}\n                    />\n                );\n\n            case 'select':\n                return <SelectFieldRenderer field={fieldConfig as FormField} />;\n\n            case 'array':\n                return (\n                    <ArrayFieldRenderer\n                        field={fieldConfig as FormArrayField}\n                        fieldName={parentId}\n                        inputTypeMenuItems={inputTypeMenuItems}\n                        renderNestedField={renderNestedField}\n                    />\n                );\n\n            default:\n                return null;\n        }\n    };\n\n    return (\n        <Card key={field.id} className={b()}>\n            <FieldHeader title={field.type.toUpperCase()} onRemove={() => removeField(field.id)} />\n\n            <div className={b('config')}>\n                <ConfigRow\n                    label=\"Name\"\n                    value={field.name}\n                    onUpdate={(value) => updateField(field.id, {name: value})}\n                />\n                <ConfigRow\n                    label=\"Title\"\n                    value={field.title}\n                    onUpdate={(value) => updateField(field.id, {title: value})}\n                />\n\n                {/* Render type-specific configuration */}\n                {renderFieldTypeSpecificContent(field, field.id)}\n            </div>\n        </Card>\n    );\n};\n"]}

package/build/cjs/form-generator/components/FieldHeader/FieldHeader.css

@@ -0,0 +1,6 @@
+.field-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}

package/build/cjs/form-generator/components/FieldHeader/FieldHeader.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface FieldHeaderProps {
+    title: string;
+    onRemove: () => void;
+    variant?: 'subheader-2' | 'subheader-3';
+    buttonSize?: 's' | 'xs';
+}
+export declare const FieldHeader: React.FC<FieldHeaderProps>;
+export {};

package/build/cjs/form-generator/components/FieldHeader/FieldHeader.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldHeader = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const b = (0, bem_cn_lite_1.default)('field-header');
+const FieldHeader = ({ title, onRemove, variant = 'subheader-2', buttonSize = 's', }) => ((0, jsx_runtime_1.jsxs)("div", { className: b(), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: variant, children: title }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-danger", size: buttonSize, onClick: onRemove, children: "Remove" })] }));
+exports.FieldHeader = FieldHeader;
+//# sourceMappingURL=FieldHeader.js.map

package/build/cjs/form-generator/components/FieldHeader/FieldHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHeader.js","sourceRoot":"../../../../../src","sources":["form-generator/components/FieldHeader/FieldHeader.tsx"],"names":[],"mappings":";;;;;AACA,6CAA+C;AAC/C,sEAAgC;AAIhC,MAAM,CAAC,GAAG,IAAA,qBAAK,EAAC,cAAc,CAAC,CAAC;AASzB,MAAM,WAAW,GAA+B,CAAC,EACpD,KAAK,EACL,QAAQ,EACR,OAAO,GAAG,aAAa,EACvB,UAAU,GAAG,GAAG,GACnB,EAAE,EAAE,CAAC,CACF,iCAAK,SAAS,EAAE,CAAC,EAAE,aACf,uBAAC,YAAI,IAAC,OAAO,EAAE,OAAO,YAAG,KAAK,GAAQ,EACtC,uBAAC,cAAM,IAAC,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,uBAErD,IACP,CACT,CAAC;AAZW,QAAA,WAAW,eAYtB","sourcesContent":["import * as React from 'react';\nimport {Button, Text} from '@gravity-ui/uikit';\nimport block from 'bem-cn-lite';\n\nimport './FieldHeader.scss';\n\nconst b = block('field-header');\n\ninterface FieldHeaderProps {\n    title: string;\n    onRemove: () => void;\n    variant?: 'subheader-2' | 'subheader-3';\n    buttonSize?: 's' | 'xs';\n}\n\nexport const FieldHeader: React.FC<FieldHeaderProps> = ({\n    title,\n    onRemove,\n    variant = 'subheader-2',\n    buttonSize = 's',\n}) => (\n    <div className={b()}>\n        <Text variant={variant}>{title}</Text>\n        <Button view=\"flat-danger\" size={buttonSize} onClick={onRemove}>\n            Remove\n        </Button>\n    </div>\n);\n"]}

package/build/cjs/form-generator/components/FormBuilder/FormBuilder.css

@@ -0,0 +1,93 @@
+.form-builder {
+  width: 100%;
+}
+.form-builder__field {
+  margin-top: 16px;
+}
+.form-builder__fields-list {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.form-builder__field-card {
+  padding: 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+.form-builder__field-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.form-builder__field-config {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.form-builder__config-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.form-builder__config-row > span {
+  min-width: 90px;
+  font-weight: 500;
+}
+.form-builder__config-row > div {
+  flex: 1;
+}
+.form-builder__nested-fields {
+  margin-top: 12px;
+  margin-left: 16px;
+  padding-left: 12px;
+  border-left: 2px solid #e5e7eb;
+}
+.form-builder__nested-field {
+  margin-top: 8px;
+  padding: 12px;
+  background-color: #f9fafb;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+}
+.form-builder__nested-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.form-builder__option {
+  margin-top: 12px;
+  padding: 12px;
+  background-color: #f9fafb;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+}
+.form-builder__option-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.form-builder__add-field-button {
+  margin-top: 8px;
+}
+.form-builder__enum-option {
+  margin-top: 8px;
+  padding: 12px;
+  background-color: #f3f4f6;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.form-builder__enum-option .forms__config-row {
+  margin-bottom: 4px;
+}
+.form-builder__enum-option button {
+  align-self: flex-end;
+  margin-top: 4px;
+}

package/build/cjs/form-generator/components/FormBuilder/FormBuilder.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormField } from "../../hooks/types.js";
+interface FormBuilderProps {
+    className?: string;
+    formFields: Array<FormField>;
+}
+export declare const FormBuilder: React.FC<FormBuilderProps>;
+export {};

package/build/cjs/form-generator/components/FormBuilder/FormBuilder.js

@@ -0,0 +1,64 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormBuilder = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const FieldCard_1 = require("../FieldCard/FieldCard.js");
+const FormContext_1 = require("../../hooks/FormContext.js");
+const b = (0, bem_cn_lite_1.default)('form-builder');
+const FormBuilder = ({ className, formFields }) => {
+    const { addField } = (0, FormContext_1.useFormContext)();
+    const inputTypeMenuItems = [
+        {
+            type: 'text',
+            action: () => addField('text'),
+            text: 'Text Input',
+        },
+        {
+            type: 'number',
+            action: () => addField('number'),
+            text: 'Number Input',
+        },
+        {
+            type: 'boolean',
+            action: () => addField('boolean'),
+            text: 'Boolean Input',
+        },
+        {
+            type: 'textarea',
+            action: () => addField('textarea'),
+            text: 'Textarea Input',
+        },
+        {
+            type: 'select',
+            action: () => addField('select'),
+            text: 'Select Input',
+        },
+        {
+            type: 'object',
+            action: () => addField('object'),
+            text: 'Object Input',
+        },
+        {
+            type: 'array',
+            action: () => addField('array'),
+            text: 'Array Input',
+        },
+        {
+            type: 'oneOf',
+            action: () => addField('oneOf'),
+            text: 'OneOf Input',
+        },
+        {
+            type: 'anyOf',
+            action: () => addField('anyOf'),
+            text: 'AnyOf Input',
+        },
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), children: [(0, jsx_runtime_1.jsx)("div", { className: b('fields-list'), children: formFields.map((field) => ((0, jsx_runtime_1.jsx)(FieldCard_1.FieldCard, { field: field, inputTypeMenuItems: inputTypeMenuItems }, field.id))) }), (0, jsx_runtime_1.jsx)("div", { className: b('field'), children: (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { items: inputTypeMenuItems, renderSwitcher: (props) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { ...props, view: "action", size: "l", children: "+ Add Field" })) }) })] }));
+};
+exports.FormBuilder = FormBuilder;
+//# sourceMappingURL=FormBuilder.js.map

package/build/cjs/form-generator/components/FormBuilder/FormBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilder.js","sourceRoot":"../../../../../src","sources":["form-generator/components/FormBuilder/FormBuilder.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AAGb,6CAAuD;AACvD,sEAAgC;AAChC,yDAAiD;AACjD,4DAAuD;AAKvD,MAAM,CAAC,GAAG,IAAA,qBAAK,EAAC,cAAc,CAAC,CAAC;AAOzB,MAAM,WAAW,GAA+B,CAAC,EAAC,SAAS,EAAE,UAAU,EAAC,EAAE,EAAE;IAC/E,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAA,4BAAc,GAAE,CAAC;IAEpC,MAAM,kBAAkB,GAAwB;QAC5C;YACI,IAAI,EAAE,MAAM;YACZ,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC9B,IAAI,EAAE,YAAY;SACrB;QACD;YACI,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,cAAc;SACvB;QACD;YACI,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC;YACjC,IAAI,EAAE,eAAe;SACxB;QACD;YACI,IAAI,EAAE,UAAU;YAChB,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC;YAClC,IAAI,EAAE,gBAAgB;SACzB;QACD;YACI,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,cAAc;SACvB;QACD;YACI,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,cAAc;SACvB;QACD;YACI,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC;YAC/B,IAAI,EAAE,aAAa;SACtB;QACD;YACI,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC;YAC/B,IAAI,EAAE,aAAa;SACtB;QACD;YACI,IAAI,EAAE,OAAO;YACb,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC;YAC/B,IAAI,EAAE,aAAa;SACtB;KACJ,CAAC;IAEF,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,gCAAK,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC,YAC3B,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACvB,uBAAC,qBAAS,IAEN,KAAK,EAAE,KAAK,EACZ,kBAAkB,EAAE,kBAAkB,IAFjC,KAAK,CAAC,EAAE,CAGf,CACL,CAAC,GACA,EAEN,gCAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACtB,uBAAC,oBAAY,IACT,KAAK,EAAE,kBAAkB,EACzB,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACvB,uBAAC,cAAM,OAAK,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,GAAG,4BAEhC,CACZ,GACH,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AA3EW,QAAA,WAAW,eA2EtB","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {Button, DropdownMenu} from '@gravity-ui/uikit';\nimport block from 'bem-cn-lite';\nimport {FieldCard} from '../FieldCard/FieldCard';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormField, InputTypeMenuItem} from '../../hooks/types';\n\nimport './FormBuilder.scss';\n\nconst b = block('form-builder');\n\ninterface FormBuilderProps {\n    className?: string;\n    formFields: Array<FormField>;\n}\n\nexport const FormBuilder: React.FC<FormBuilderProps> = ({className, formFields}) => {\n    const {addField} = useFormContext();\n\n    const inputTypeMenuItems: InputTypeMenuItem[] = [\n        {\n            type: 'text',\n            action: () => addField('text'),\n            text: 'Text Input',\n        },\n        {\n            type: 'number',\n            action: () => addField('number'),\n            text: 'Number Input',\n        },\n        {\n            type: 'boolean',\n            action: () => addField('boolean'),\n            text: 'Boolean Input',\n        },\n        {\n            type: 'textarea',\n            action: () => addField('textarea'),\n            text: 'Textarea Input',\n        },\n        {\n            type: 'select',\n            action: () => addField('select'),\n            text: 'Select Input',\n        },\n        {\n            type: 'object',\n            action: () => addField('object'),\n            text: 'Object Input',\n        },\n        {\n            type: 'array',\n            action: () => addField('array'),\n            text: 'Array Input',\n        },\n        {\n            type: 'oneOf',\n            action: () => addField('oneOf'),\n            text: 'OneOf Input',\n        },\n        {\n            type: 'anyOf',\n            action: () => addField('anyOf'),\n            text: 'AnyOf Input',\n        },\n    ];\n\n    return (\n        <div className={b(null, className)}>\n            <div className={b('fields-list')}>\n                {formFields.map((field) => (\n                    <FieldCard\n                        key={field.id}\n                        field={field}\n                        inputTypeMenuItems={inputTypeMenuItems}\n                    />\n                ))}\n            </div>\n\n            <div className={b('field')}>\n                <DropdownMenu\n                    items={inputTypeMenuItems}\n                    renderSwitcher={(props) => (\n                        <Button {...props} view=\"action\" size=\"l\">\n                            + Add Field\n                        </Button>\n                    )}\n                />\n            </div>\n        </div>\n    );\n};\n"]}

package/build/cjs/form-generator/components/ObjectFieldRenderer/ObjectFieldRenderer.css

@@ -0,0 +1,6 @@
+.object-field-renderer__nested-fields {
+  margin-top: 12px;
+  margin-left: 16px;
+  padding-left: 12px;
+  border-left: 2px solid var(--g-color-line-generic);
+}

package/build/cjs/form-generator/components/ObjectFieldRenderer/ObjectFieldRenderer.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ConfigInput } from "../../../editor-v2/index.js";
+import { FormObjectField, InputTypeMenuItem } from "../../hooks/types.js";
+interface ObjectFieldRendererProps {
+    field: FormObjectField;
+    fieldName: string;
+    inputTypeMenuItems: InputTypeMenuItem[];
+    renderNestedField: (field: ConfigInput, index: number, parentId: string, optionIndex?: number) => React.ReactNode;
+}
+export declare const ObjectFieldRenderer: React.FC<ObjectFieldRendererProps>;
+export {};

package/build/cjs/form-generator/components/ObjectFieldRenderer/ObjectFieldRenderer.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectFieldRenderer = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const AddPropertyButton_1 = require("../AddPropertyButton/AddPropertyButton.js");
+const SectionHeader_1 = require("../SectionHeader/SectionHeader.js");
+const FormContext_1 = require("../../hooks/FormContext.js");
+const b = (0, bem_cn_lite_1.default)('object-field-renderer');
+const ObjectFieldRenderer = ({ field, fieldName: _fieldName, inputTypeMenuItems, renderNestedField, }) => {
+    const { addObjectProperty } = (0, FormContext_1.useFormContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b('nested-fields'), children: [(0, jsx_runtime_1.jsx)(SectionHeader_1.SectionHeader, { title: "Properties:" }), field.properties.map((property, index) => renderNestedField(property, index, field.id)), (0, jsx_runtime_1.jsx)(AddPropertyButton_1.AddPropertyButton, { inputTypeMenuItems: inputTypeMenuItems, onAdd: (type) => addObjectProperty(field.id, type) })] }));
+};
+exports.ObjectFieldRenderer = ObjectFieldRenderer;
+//# sourceMappingURL=ObjectFieldRenderer.js.map

package/build/cjs/form-generator/components/ObjectFieldRenderer/ObjectFieldRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectFieldRenderer.js","sourceRoot":"../../../../../src","sources":["form-generator/components/ObjectFieldRenderer/ObjectFieldRenderer.tsx"],"names":[],"mappings":";;;;;AACA,sEAAgC;AAEhC,iFAAyE;AACzE,qEAA6D;AAC7D,4DAAuD;AAKvD,MAAM,CAAC,GAAG,IAAA,qBAAK,EAAC,uBAAuB,CAAC,CAAC;AAclC,MAAM,mBAAmB,GAAuC,CAAC,EACpE,KAAK,EACL,SAAS,EAAE,UAAU,EACrB,kBAAkB,EAClB,iBAAiB,GACpB,EAAE,EAAE;IACD,MAAM,EAAC,iBAAiB,EAAC,GAAG,IAAA,4BAAc,GAAE,CAAC;IAE7C,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,uBAAC,6BAAa,IAAC,KAAK,EAAC,aAAa,GAAG,EAEpC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CACtC,iBAAiB,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAC/C,EAED,uBAAC,qCAAiB,IACd,kBAAkB,EAAE,kBAAkB,EACtC,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,CAAC,GACpD,IACA,CACT,CAAC;AACN,CAAC,CAAC;AAtBW,QAAA,mBAAmB,uBAsB9B","sourcesContent":["import * as React from 'react';\nimport block from 'bem-cn-lite';\nimport {ConfigInput} from '../../../editor-v2';\nimport {AddPropertyButton} from '../AddPropertyButton/AddPropertyButton';\nimport {SectionHeader} from '../SectionHeader/SectionHeader';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormObjectField, InputTypeMenuItem} from '../../hooks/types';\n\nimport './ObjectFieldRenderer.scss';\n\nconst b = block('object-field-renderer');\n\ninterface ObjectFieldRendererProps {\n    field: FormObjectField;\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 ObjectFieldRenderer: React.FC<ObjectFieldRendererProps> = ({\n    field,\n    fieldName: _fieldName,\n    inputTypeMenuItems,\n    renderNestedField,\n}) => {\n    const {addObjectProperty} = useFormContext();\n\n    return (\n        <div className={b('nested-fields')}>\n            <SectionHeader title=\"Properties:\" />\n\n            {field.properties.map((property, index) =>\n                renderNestedField(property, index, field.id),\n            )}\n\n            <AddPropertyButton\n                inputTypeMenuItems={inputTypeMenuItems}\n                onAdd={(type) => addObjectProperty(field.id, type)}\n            />\n        </div>\n    );\n};\n"]}

package/build/cjs/form-generator/components/OptionHeader/OptionHeader.css

@@ -0,0 +1,6 @@
+.option-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}

package/build/cjs/form-generator/components/OptionHeader/OptionHeader.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface OptionHeaderProps {
+    title: string;
+}
+export declare const OptionHeader: React.FC<OptionHeaderProps>;
+export {};

package/build/cjs/form-generator/components/OptionHeader/OptionHeader.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionHeader = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const b = (0, bem_cn_lite_1.default)('option-header');
+const OptionHeader = ({ title }) => ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "subheader-3", children: title }) }));
+exports.OptionHeader = OptionHeader;
+//# sourceMappingURL=OptionHeader.js.map

package/build/cjs/form-generator/components/OptionHeader/OptionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionHeader.js","sourceRoot":"../../../../../src","sources":["form-generator/components/OptionHeader/OptionHeader.tsx"],"names":[],"mappings":";;;;;AACA,6CAAuC;AACvC,sEAAgC;AAIhC,MAAM,CAAC,GAAG,IAAA,qBAAK,EAAC,eAAe,CAAC,CAAC;AAM1B,MAAM,YAAY,GAAgC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAClE,gCAAK,SAAS,EAAE,CAAC,EAAE,YACf,uBAAC,YAAI,IAAC,OAAO,EAAC,aAAa,YAAE,KAAK,GAAQ,GACxC,CACT,CAAC;AAJW,QAAA,YAAY,gBAIvB","sourcesContent":["import * as React from 'react';\nimport {Text} from '@gravity-ui/uikit';\nimport block from 'bem-cn-lite';\n\nimport './OptionHeader.scss';\n\nconst b = block('option-header');\n\ninterface OptionHeaderProps {\n    title: string;\n}\n\nexport const OptionHeader: React.FC<OptionHeaderProps> = ({title}) => (\n    <div className={b()}>\n        <Text variant=\"subheader-3\">{title}</Text>\n    </div>\n);\n"]}

package/build/cjs/form-generator/components/OptionsRenderer/OptionsRenderer.css

@@ -0,0 +1,31 @@
+.options-renderer__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.options-renderer__option-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.options-renderer__add-option-button {
+  margin-left: 8px;
+}
+.options-renderer__remove-option-button {
+  margin-left: 8px;
+}
+.options-renderer__nested-fields {
+  margin-top: 12px;
+  margin-left: 16px;
+  padding-left: 12px;
+  border-left: 2px solid var(--g-color-line-generic);
+}
+.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/cjs/form-generator/components/OptionsRenderer/OptionsRenderer.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ConfigInput } from "../../../editor-v2/index.js";
+import { FormOptionsField, InputTypeMenuItem } from "../../hooks/types.js";
+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/cjs/form-generator/components/OptionsRenderer/OptionsRenderer.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsRenderer = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const uikit_1 = require("@gravity-ui/uikit");
+const AddPropertyButton_1 = require("../AddPropertyButton/AddPropertyButton.js");
+const OptionHeader_1 = require("../OptionHeader/OptionHeader.js");
+const SectionHeader_1 = require("../SectionHeader/SectionHeader.js");
+const FormContext_1 = require("../../hooks/FormContext.js");
+const b = (0, bem_cn_lite_1.default)('options-renderer');
+const OptionsRenderer = ({ field, fieldName: _fieldName, inputTypeMenuItems, renderNestedField, }) => {
+    const { addOptionProperty, addOption, removeOption } = (0, FormContext_1.useFormContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b('nested-fields'), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(SectionHeader_1.SectionHeader, { title: "Options:" }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "normal", size: "s", onClick: () => {
+                            addOption(field.id);
+                        }, className: b('add-option-button'), children: "+ Add Option" })] }), field.options.map((option, optionIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: b('option'), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('option-header'), children: [(0, jsx_runtime_1.jsx)(OptionHeader_1.OptionHeader, { title: option.title }), field.options.length > 1 && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "normal", size: "xs", onClick: () => {
+                                    removeOption(field.id, optionIndex);
+                                }, className: b('remove-option-button'), children: "Remove" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: b('nested-fields'), children: [(0, jsx_runtime_1.jsx)(SectionHeader_1.SectionHeader, { title: "Properties:", variant: "body-2" }), option.properties.map((property, propIndex) => renderNestedField(property, propIndex, field.id, optionIndex)), (0, jsx_runtime_1.jsx)(AddPropertyButton_1.AddPropertyButton, { inputTypeMenuItems: inputTypeMenuItems, onAdd: (type) => {
+                                    addOptionProperty(field.id, optionIndex, type);
+                                } })] })] }, `option_${optionIndex}`)))] }));
+};
+exports.OptionsRenderer = OptionsRenderer;
+//# sourceMappingURL=OptionsRenderer.js.map

package/build/cjs/form-generator/components/OptionsRenderer/OptionsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsRenderer.js","sourceRoot":"../../../../../src","sources":["form-generator/components/OptionsRenderer/OptionsRenderer.tsx"],"names":[],"mappings":";;;;;AACA,sEAAgC;AAChC,6CAAyC;AAEzC,iFAAyE;AACzE,kEAA0D;AAC1D,qEAA6D;AAC7D,4DAAuD;AAKvD,MAAM,CAAC,GAAG,IAAA,qBAAK,EAAC,kBAAkB,CAAC,CAAC;AAc7B,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,IAAA,4BAAc,GAAE,CAAC;IAEtE,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,iCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,uBAAC,6BAAa,IAAC,KAAK,EAAC,UAAU,GAAG,EAClC,uBAAC,cAAM,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,iCAAmC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACrD,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,uBAAC,2BAAY,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,GAAI,EACpC,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,uBAAC,cAAM,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,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,uBAAC,6BAAa,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,uBAAC,qCAAiB,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;AA5DW,QAAA,eAAe,mBA4D1B","sourcesContent":["import * as React from 'react';\nimport block from 'bem-cn-lite';\nimport {Button} from '@gravity-ui/uikit';\nimport {ConfigInput} from '../../../editor-v2';\nimport {AddPropertyButton} from '../AddPropertyButton/AddPropertyButton';\nimport {OptionHeader} from '../OptionHeader/OptionHeader';\nimport {SectionHeader} from '../SectionHeader/SectionHeader';\nimport {useFormContext} from '../../hooks/FormContext';\nimport {FormOptionsField, InputTypeMenuItem} from '../../hooks/types';\n\nimport './OptionsRenderer.scss';\n\nconst b = block('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/cjs/form-generator/components/SectionHeader/SectionHeader.css

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

package/build/cjs/form-generator/components/SectionHeader/SectionHeader.d.ts

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

package/build/cjs/form-generator/components/SectionHeader/SectionHeader.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionHeader = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const b = (0, bem_cn_lite_1.default)('section-header');
+const SectionHeader = ({ title, variant = 'body-1' }) => ((0, jsx_runtime_1.jsx)("div", { className: b(), children: (0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: variant, children: title }) }));
+exports.SectionHeader = SectionHeader;
+//# sourceMappingURL=SectionHeader.js.map

package/build/cjs/form-generator/components/SectionHeader/SectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.js","sourceRoot":"../../../../../src","sources":["form-generator/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;;AACA,6CAAuC;AACvC,sEAAgC;AAIhC,MAAM,CAAC,GAAG,IAAA,qBAAK,EAAC,gBAAgB,CAAC,CAAC;AAO3B,MAAM,aAAa,GAAiC,CAAC,EAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,EAAC,EAAE,EAAE,CAAC,CACxF,gCAAK,SAAS,EAAE,CAAC,EAAE,YACf,uBAAC,YAAI,IAAC,OAAO,EAAE,OAAO,YAAG,KAAK,GAAQ,GACpC,CACT,CAAC;AAJW,QAAA,aAAa,iBAIxB","sourcesContent":["import * as React from 'react';\nimport {Text} from '@gravity-ui/uikit';\nimport block from 'bem-cn-lite';\n\nimport './SectionHeader.scss';\n\nconst b = block('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/cjs/form-generator/components/SelectFieldRenderer/SelectFieldRenderer.css

@@ -0,0 +1,36 @@
+.select-field-renderer__config-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.select-field-renderer__config-row > span {
+  min-width: 90px;
+  font-weight: 500;
+}
+.select-field-renderer__config-row > div {
+  flex: 1;
+}
+.select-field-renderer__config-row_vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.select-field-renderer__options-title {
+  margin-bottom: 8px;
+}
+.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;
+}
+.select-field-renderer__remove-button {
+  align-self: flex-end;
+  margin-top: 4px;
+}
+.select-field-renderer__add-button {
+  margin-top: 8px;
+}

package/build/cjs/form-generator/components/SelectFieldRenderer/SelectFieldRenderer.d.ts

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

package/build/cjs/form-generator/components/SelectFieldRenderer/SelectFieldRenderer.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectFieldRenderer = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const FormContext_1 = require("../../hooks/FormContext.js");
+const b = (0, bem_cn_lite_1.default)('select-field-renderer');
+const SelectFieldRenderer = ({ field }) => {
+    const { updateField } = (0, FormContext_1.useFormContext)();
+    if (field.type !== 'select') {
+        return null;
+    }
+    const view = field.view;
+    const mode = field.mode;
+    const enumValues = (field.enum || []);
+    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: b('config-row'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", children: "View:" }), (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { items: [
+                            {
+                                action: () => updateField(field.id, { view: 'select' }),
+                                text: 'Select',
+                            },
+                            {
+                                action: () => updateField(field.id, { view: 'radiobutton' }),
+                                text: 'Radio Button',
+                            },
+                        ], renderSwitcher: (props) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { ...props, view: "normal", size: "s", children: view === 'radiobutton' ? 'Radio Button' : 'Select' })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: b('config-row'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", children: "Mode:" }), (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { items: [
+                            {
+                                action: () => updateField(field.id, { mode: 'single' }),
+                                text: 'Single',
+                            },
+                            {
+                                action: () => updateField(field.id, { mode: 'multiple' }),
+                                text: 'Multiple',
+                            },
+                        ], renderSwitcher: (props) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { ...props, view: "normal", size: "s", children: mode === 'multiple' ? 'Multiple' : 'Single' })) })] }), (0, jsx_runtime_1.jsxs)("div", { className: b('config-row', { vertical: true }), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", className: b('options-title'), children: "Options:" }), enumValues.map((option, index) => ((0, jsx_runtime_1.jsxs)("div", { className: b('enum-option'), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('config-row'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", children: "Label:" }), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: option.content, onUpdate: (value) => {
+                                            const newEnum = [...enumValues];
+                                            newEnum[index] = {
+                                                ...newEnum[index],
+                                                content: value,
+                                            };
+                                            updateField(field.id, { enum: newEnum });
+                                        }, size: "s" })] }), (0, jsx_runtime_1.jsxs)("div", { className: b('config-row'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: "body-2", children: "Value:" }), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { value: option.value, onUpdate: (value) => {
+                                            const newEnum = [...enumValues];
+                                            newEnum[index] = {
+                                                ...newEnum[index],
+                                                value,
+                                            };
+                                            updateField(field.id, { enum: newEnum });
+                                        }, size: "s" })] }), (0, jsx_runtime_1.jsx)(uikit_1.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}`))), (0, jsx_runtime_1.jsx)(uikit_1.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" })] })] }));
+};
+exports.SelectFieldRenderer = SelectFieldRenderer;
+//# sourceMappingURL=SelectFieldRenderer.js.map