swoop-common 1.0.43 → 2.0.1

package/dist/rendering/renderers/Image/ImageForm.js

@@ -0,0 +1,78 @@
+import React, { useMemo, useState } from 'react';
+import { Box, CircularProgress, debounce, Paper, TextField, Typography } from '@mui/material';
+import { useLocalErrors } from '../../hooks/errors';
+import { ComponentPool } from '../../registry/types';
+import { registerComponent } from '../../registry/components';
+const FormImage = ({ url, onChange, getError, enabled }) => {
+    if (!getError)
+        getError = () => undefined;
+    const [val, setVal] = useState(url);
+    const [imgError, setImgError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const onChangeDebounced = useMemo(() => debounce(onChange, 300), [onChange]);
+    const update = (value) => {
+        setVal(value);
+        setImgError(false);
+        setLoading(true);
+        onChangeDebounced(value);
+    };
+    const error = getError('image');
+    return (React.createElement(Paper, { component: "form", sx: { display: 'flex', flexDirection: 'column', gap: 1, p: 2, mb: 1 }, noValidate: true, autoComplete: "off" },
+        React.createElement(Typography, { variant: "h5" }, "Image"),
+        React.createElement(TextField, { label: "Image URL", value: val, onChange: (e) => update(e.target.value), required: true, error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, fullWidth: true, disabled: !enabled }),
+        (() => {
+            if (error)
+                return null;
+            if (imgError) {
+                return (React.createElement(Box, { sx: {
+                        width: '100%',
+                        bgcolor: 'background.paper',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        p: 1,
+                        minHeight: 48,
+                        borderRadius: 1,
+                    } },
+                    React.createElement(Typography, { color: "text.secondary", variant: "body2" }, "Image failed to load")));
+            }
+            return (React.createElement(Box, { sx: {
+                    position: 'relative',
+                    width: '100%',
+                    maxHeight: 400,
+                    bgcolor: 'background.paper',
+                    borderRadius: 1,
+                    overflow: 'hidden',
+                } },
+                React.createElement(Box, { component: "img", src: val, alt: "Preview", sx: {
+                        width: '100%',
+                        height: loading ? 48 : "",
+                        objectFit: 'contain',
+                        borderRadius: 1,
+                        opacity: loading ? 0 : 1,
+                        transition: 'opacity 0.3s ease',
+                        display: 'block',
+                    }, onLoad: () => setLoading(false), onError: () => {
+                        setImgError(true);
+                        setLoading(false);
+                    }, loading: "lazy" }),
+                loading && (React.createElement(Box, { sx: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        bgcolor: 'background.paper',
+                    } },
+                    React.createElement(CircularProgress, { size: 24 })))));
+        })()));
+};
+export default FormImage;
+const FormRendererImage = ({ data, handleChange, path, enabled }) => {
+    const getError = useLocalErrors(path);
+    return React.createElement(FormImage, { url: data, onChange: (addr) => handleChange(path, addr), getError: getError, enabled: enabled });
+};
+registerComponent("image", FormRendererImage, ComponentPool.FORM);

package/dist/rendering/renderers/Image/ImagePresentation.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    url: string;
+}
+declare const FormImage: React.FC<Props>;
+export default FormImage;

package/dist/rendering/renderers/Image/ImagePresentation.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Box, CircularProgress, Paper, Typography } from '@mui/material';
+import { ComponentPool } from '../../registry/types';
+import { registerComponent } from '../../registry/components';
+const FormImage = ({ url }) => {
+    const [imgError, setImgError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    return (React.createElement(Paper, { component: "form", sx: { display: 'flex', flexDirection: 'column', gap: 1, p: 2, mb: 1 }, noValidate: true, autoComplete: "off" },
+        React.createElement(Typography, { variant: "h5" }, "Image"),
+        (() => {
+            if (imgError) {
+                return (React.createElement(Box, { sx: {
+                        width: '100%',
+                        bgcolor: 'background.paper',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        p: 1,
+                        minHeight: 48,
+                        borderRadius: 1,
+                    } },
+                    React.createElement(Typography, { color: "text.secondary", variant: "body2" }, "Image failed to load")));
+            }
+            return (React.createElement(Box, { sx: {
+                    position: 'relative',
+                    width: '100%',
+                    maxHeight: 400,
+                    bgcolor: 'background.paper',
+                    borderRadius: 1,
+                    overflow: 'hidden',
+                } },
+                React.createElement(Box, { component: "img", src: url, alt: "Preview", sx: {
+                        width: '100%',
+                        height: loading ? 48 : "",
+                        objectFit: 'contain',
+                        borderRadius: 1,
+                        opacity: loading ? 0 : 1,
+                        transition: 'opacity 0.3s ease',
+                        display: 'block',
+                    }, onLoad: () => setLoading(false), onError: () => {
+                        setImgError(true);
+                        setLoading(false);
+                    }, loading: "lazy" }),
+                loading && (React.createElement(Box, { sx: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        bgcolor: 'background.paper',
+                    } },
+                    React.createElement(CircularProgress, { size: 24 })))));
+        })()));
+};
+export default FormImage;
+const FormRendererImage = ({ data, }) => {
+    return React.createElement(FormImage, { url: data });
+};
+registerComponent("image", FormRendererImage, ComponentPool.PRESENTATION);

package/dist/rendering/renderers/StagedText.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/rendering/renderers/StagedText.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Paper, Typography, TextField } from '@mui/material';
+import { useLocalErrors } from '../hooks/errors';
+import { ComponentPool } from '../registry/types';
+import { registerComponent } from '../registry/components';
+const stages = ['website', 'quote', 'finalItinerary'];
+const FormStagedText = ({ data, onChange, enabled, label }) => {
+    return (React.createElement(Paper, { component: "form", sx: { display: 'flex', flexDirection: 'column', gap: 2, p: 2, mb: 1 }, noValidate: true, autoComplete: "off" },
+        React.createElement(Typography, { variant: "h6" }, label),
+        stages.map((stage) => (React.createElement(TextField, { key: stage, label: stage.replace(/([A-Z])/g, ' $1'), value: data[stage] || '', onChange: (e) => onChange(stage, e.target.value), multiline: true, rows: 3, disabled: !enabled })))));
+};
+const FormRendererStagedText = ({ data, handleChange, path, label, enabled }) => {
+    const safeData = data || { website: '', quote: '', finalItinerary: '' };
+    const getError = useLocalErrors(path);
+    const handleStageChange = (stage, value) => {
+        handleChange(`${path}.${stage}`, value);
+    };
+    return (React.createElement(FormStagedText, { data: safeData, onChange: handleStageChange, enabled: enabled, label: label, getError: getError }));
+};
+registerComponent("stagedText", FormRendererStagedText, ComponentPool.FORM);

package/dist/rendering/renderers/TemplatePicker.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/rendering/renderers/TemplatePicker.js

@@ -0,0 +1,47 @@
+'use client';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useEffect, useState } from 'react';
+import { Paper, Typography, Box, TextField, Chip, Autocomplete } from '@mui/material';
+import { useLocalErrors } from '../hooks/errors';
+import { registerComponent } from '../registry/components';
+import { ComponentPool } from '../registry/types';
+import { services } from '../../api/init';
+const FormTemplatePicker = ({ templates, selectedTemplates, onChange, label, enabled }) => {
+    const selectedValues = templates.filter(t => selectedTemplates.includes(t.id));
+    return (React.createElement(Paper, { component: "form", sx: { display: 'flex', flexDirection: 'column', gap: 2, p: 2, mb: 1 }, noValidate: true, autoComplete: "off" },
+        React.createElement(Typography, { variant: "h6" }, label),
+        React.createElement(Autocomplete, { multiple: true, options: templates, getOptionLabel: (option) => option.name, getOptionKey: o => o.id, value: selectedValues, onChange: (_, newValue) => {
+                onChange(newValue.map(template => template.id));
+            }, renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { variant: "outlined", placeholder: "Search and select templates", disabled: !enabled }))), renderTags: (value, getTagProps) => value.map((option, index) => (React.createElement(Chip, Object.assign({ label: option.name }, getTagProps({ index }), { key: option.id })))), renderOption: (props, option) => (React.createElement("li", Object.assign({}, props),
+                React.createElement(Box, null,
+                    React.createElement(Typography, { variant: "body1" }, option.name),
+                    React.createElement(Typography, { variant: "caption", color: "text.secondary" },
+                        "Version: v",
+                        option.revision)))), disabled: !enabled })));
+};
+const FormRendererTemplatePicker = ({ data, handleChange, path, label, enabled }) => {
+    const [templates, setTemplates] = useState([]);
+    const getError = useLocalErrors(path);
+    useEffect(() => {
+        const load = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const result = yield services.CoreService.templateList(1);
+                setTemplates(result.data);
+            }
+            catch (err) {
+                console.error('Error loading templates:', err);
+            }
+        });
+        load();
+    }, []);
+    return (React.createElement(FormTemplatePicker, { templates: templates, selectedTemplates: data || [], onChange: (ids) => handleChange(path, ids), getError: getError, label: label, enabled: enabled }));
+};
+registerComponent("componentOptions", FormRendererTemplatePicker, ComponentPool.FORM);

package/dist/rendering/renderers/textfield/MultilineForm.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/rendering/renderers/textfield/MultilineForm.js

@@ -0,0 +1,21 @@
+import React, { useMemo, useState } from 'react';
+import { debounce, TextField } from '@mui/material';
+import { useLocalErrors } from '../../hooks/errors';
+import { ComponentPool } from '../../registry/types';
+import { registerComponent } from '../../registry/components';
+const FormTextfield = ({ text, onChange, getError, label, enabled }) => {
+    var _a;
+    const [val, setVal] = useState(text);
+    const error = getError ? (_a = getError("multiline")) === null || _a === void 0 ? void 0 : _a.message : undefined;
+    const onChangeDebounced = useMemo(() => debounce(onChange, 300), [onChange]);
+    const update = (value) => {
+        setVal(value);
+        onChangeDebounced(value);
+    };
+    return (React.createElement(TextField, { label: label, value: val, onChange: (e) => update(e.target.value), error: !!error, helperText: error, multiline: true, fullWidth: true, sx: { mb: 1 }, disabled: !enabled }));
+};
+const FormRendererExample = ({ data, handleChange, path, label, enabled }) => {
+    const getError = useLocalErrors(path);
+    return React.createElement(FormTextfield, { text: data, onChange: (addr) => handleChange(path, addr), getError: getError, label: label, enabled: enabled });
+};
+registerComponent("multiline", FormRendererExample, ComponentPool.FORM);

package/dist/rendering/renderers/textfield/MultilinePresentation.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/rendering/renderers/textfield/MultilinePresentation.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Paper, Typography } from '@mui/material';
+import { ComponentPool } from '../../registry/types';
+import { registerComponent } from '../../registry/components';
+const FormTextfield = ({ text, label }) => {
+    return (React.createElement(Paper, { component: "form", sx: { display: 'flex', flexDirection: 'column', gap: 1, p: 2, mb: 1 }, noValidate: true, autoComplete: "off" },
+        React.createElement(Typography, { variant: "subtitle2", color: "textSecondary", gutterBottom: true }, label),
+        React.createElement(Typography, { variant: "body1", sx: { whiteSpace: 'pre-wrap' } }, text)));
+};
+const FormRendererExample = ({ data, label }) => {
+    return React.createElement(FormTextfield, { text: data, label: label });
+};
+registerComponent("multiline", FormRendererExample, ComponentPool.PRESENTATION);

package/dist/rendering/schema/formBuilders/formBuilderJsonSchema.d.ts

@@ -0,0 +1,11 @@
+import { JsonSchema } from "@jsonforms/core";
+import { FormBuilderSchema } from "../template/type";
+import { JsonSchemaWithXType } from "../../types/jsonSchema";
+export interface TemplateField {
+    name: string;
+    options?: JsonSchema;
+    title: string;
+    optionsRequired: boolean;
+    schema: JsonSchemaWithXType;
+}
+export declare const FORM_BUILDER_JSON_SCHEMA: FormBuilderSchema;

package/dist/rendering/schema/formBuilders/formBuilderJsonSchema.js

@@ -0,0 +1,178 @@
+import { CONSTRAINT_DEFINITIONS } from "../template/constraint";
+import { getAllTypes } from "../../registry/fields";
+const fields = getAllTypes();
+const fieldsToTypeDef = fields.map(f => ({
+    "x-type": f.name,
+    properties: Object.assign({ fieldType: { const: f.name }, [f.name + "Options"]: { type: "object" } }, f.optionsRequired && { required: [f.name + "Options"] }),
+}));
+const fieldsToConst = fields.map(f => ({ const: f.name, title: f.title }));
+const fieldsToOptionsRecord = fields.reduce((prev, curr) => {
+    if (!curr.options)
+        return prev;
+    prev[curr.name + "Options"] = Object.assign({}, curr.options);
+    return prev;
+}, {});
+export const FORM_BUILDER_JSON_SCHEMA = {
+    $schema: "http://json-schema.org/draft-07/schema#",
+    type: "object",
+    properties: {
+        name: {
+            type: "string",
+            minLength: 1,
+            description: "Name of your template",
+        },
+        formFields: {
+            type: "array",
+            items: { $ref: "#/$defs/fieldDefinition" },
+        },
+        ibFormFields: {
+            type: "array",
+            items: { $ref: "#/$defs/fieldDefinition" },
+        },
+        constraints: {
+            type: "array",
+            items: {
+                type: "object",
+                properties: {
+                    type: {
+                        type: "string",
+                        enum: Object.keys(CONSTRAINT_DEFINITIONS),
+                        title: "Constraint Type",
+                    },
+                    mustHaveOneOfOptions: {
+                        type: "object",
+                        title: "Must Have One Of Options",
+                        properties: {
+                            templateIds: {
+                                type: "array",
+                                title: "Select Templates",
+                                items: {
+                                    type: "string",
+                                },
+                                minItems: 1,
+                                options: {
+                                    custom: {
+                                        renderer: "template-picker",
+                                    },
+                                },
+                            },
+                        },
+                        required: ["templateIds"],
+                    },
+                    mustHaveAllOfOptions: {
+                        type: "object",
+                        title: "Must Have All Of Options",
+                        properties: {
+                            templateIds: {
+                                type: "array",
+                                title: "Select Templates",
+                                items: {
+                                    type: "string",
+                                },
+                                minItems: 1,
+                            },
+                        },
+                        required: ["templateIds"],
+                    },
+                    mustNotHaveOptions: {
+                        type: "object",
+                        title: "Must Not Have Options",
+                        properties: {
+                            templateIds: {
+                                type: "array",
+                                title: "Select Templates",
+                                items: {
+                                    type: "string",
+                                },
+                                minItems: 1,
+                            },
+                        },
+                        required: ["templateIds"],
+                    },
+                    customOptions: {
+                        type: "object",
+                        title: "Custom Options",
+                        properties: {
+                            name: {
+                                type: "string",
+                                title: "Constraint Name",
+                            },
+                            customParameters: {
+                                type: "object",
+                                title: "Custom Parameters",
+                                properties: {},
+                            },
+                        },
+                        required: ["name"],
+                    },
+                },
+                required: ["type"],
+                dependencies: {
+                    type: {
+                        oneOf: [
+                            {
+                                properties: {
+                                    type: { const: "MustHaveOneOf" },
+                                    mustHaveOneOfOptions: { type: "object" },
+                                },
+                                required: ["mustHaveOneOfOptions"],
+                            },
+                            {
+                                properties: {
+                                    type: { const: "MustHaveAllOf" },
+                                    mustHaveAllOfOptions: { type: "object" },
+                                },
+                                required: ["mustHaveAllOfOptions"],
+                            },
+                            {
+                                properties: {
+                                    type: { const: "MustNotHave" },
+                                    mustNotHaveOptions: { type: "object" },
+                                },
+                                required: ["mustNotHaveOptions"],
+                            },
+                            {
+                                properties: {
+                                    type: { const: "Custom" },
+                                    customOptions: { type: "object" },
+                                },
+                                required: ["customOptions"],
+                            },
+                        ],
+                    },
+                },
+            },
+        },
+    },
+    required: ["name", "formFields"],
+    $defs: {
+        fieldDefinition: {
+            type: "object",
+            properties: Object.assign({ fieldType: {
+                    oneOf: fieldsToConst
+                }, name: {
+                    type: "string",
+                    minLength: 1,
+                    description: "Field name (used for both label and ID generation)",
+                }, description: { type: "string" }, required: { type: "boolean", default: false } }, fieldsToOptionsRecord),
+            required: ["fieldType", "name"],
+            dependencies: {
+                fieldType: {
+                    oneOf: fieldsToTypeDef
+                },
+            },
+        },
+        arrayItemDefinition: {
+            type: "object",
+            properties: Object.assign({ fieldType: {
+                    oneOf: fieldsToConst
+                } }, fieldsToOptionsRecord),
+            required: ["fieldType"],
+            dependencies: {
+                fieldType: {
+                    oneOf: fieldsToTypeDef
+                },
+            },
+        },
+    }
+};

package/dist/rendering/schema/formBuilders/formBuilderUiSchema.d.ts

@@ -0,0 +1,2 @@
+import { Layout } from "@jsonforms/core";
+export declare const FORM_BUILDER_UI_SCHEMA: Layout;

package/dist/rendering/schema/formBuilders/formBuilderUiSchema.js

@@ -0,0 +1,208 @@
+import { getAllTypes } from "../../registry/fields";
+const fields = getAllTypes();
+// Object and array are semi hard coded, due to their recursive nature
+const generateFieldControlElements = (exclude = []) => {
+    return fields.reduce((prev, curr) => {
+        if (!curr.options || Object.keys(curr.options).length === 0 || exclude.includes(curr.name)) {
+            return prev;
+        }
+        prev.push({
+            type: "Control",
+            scope: `#/properties/${curr.name}Options`,
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: curr.name }
+                }
+            }
+        });
+        return prev;
+    }, []);
+};
+const fieldDetailLayout = {
+    type: "VerticalLayout",
+    elements: [
+        {
+            type: "Control",
+            scope: "#/properties/name",
+            label: "Field Name",
+        },
+        { type: "Control", scope: "#/properties/fieldType" },
+        { type: "Control", scope: "#/properties/description" },
+        { type: "Control", scope: "#/properties/required" },
+        ...generateFieldControlElements(["object", "array"]),
+        {
+            type: "Control",
+            scope: "#/properties/objectOptions/properties/properties",
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: "object" },
+                },
+            },
+            options: { detail: null },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/arrayOptions/properties/minItems",
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: "array" },
+                },
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/arrayOptions/properties/maxItems",
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: "array" },
+                },
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/arrayOptions/properties/uniqueItems",
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: "array" },
+                },
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/arrayOptions/properties/itemDefinition",
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: "array" },
+                },
+            },
+            options: { detail: null },
+        },
+    ],
+};
+const arrayItemDetailLayout = {
+    type: "VerticalLayout",
+    elements: [
+        { type: "Control", scope: "#/properties/fieldType" },
+        ...generateFieldControlElements(["object", "array"]),
+        {
+            type: "Control",
+            scope: "#/properties/objectOptions/properties/properties",
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: "object" },
+                },
+            },
+            options: { detail: null },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/arrayOptions/properties/minItems",
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: "array" },
+                },
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/arrayOptions/properties/maxItems",
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: "array" },
+                },
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/arrayOptions/properties/uniqueItems",
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: "array" },
+                },
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/arrayOptions/properties/itemDefinition",
+            rule: {
+                effect: "SHOW",
+                condition: {
+                    scope: "#/properties/fieldType",
+                    schema: { const: "array" },
+                },
+            },
+            options: { detail: null }
+        },
+    ],
+};
+const setupLayoutReferences = () => {
+    const objectField = fieldDetailLayout.elements.find((e) => e.scope === "#/properties/objectOptions/properties/properties");
+    if (objectField === null || objectField === void 0 ? void 0 : objectField.options) {
+        objectField.options.detail = fieldDetailLayout;
+    }
+    const arrayField = fieldDetailLayout.elements.find((e) => e.scope === "#/properties/arrayOptions/properties/itemDefinition");
+    if (arrayField === null || arrayField === void 0 ? void 0 : arrayField.options) {
+        arrayField.options.detail = arrayItemDetailLayout;
+    }
+    const arrayObjectField = arrayItemDetailLayout.elements.find((e) => e.scope === "#/properties/objectOptions/properties/properties");
+    if (arrayObjectField === null || arrayObjectField === void 0 ? void 0 : arrayObjectField.options) {
+        arrayObjectField.options.detail = fieldDetailLayout;
+    }
+    const nestedArrayField = arrayItemDetailLayout.elements.find((e) => e.scope === "#/properties/arrayOptions/properties/itemDefinition");
+    if (nestedArrayField === null || nestedArrayField === void 0 ? void 0 : nestedArrayField.options) {
+        nestedArrayField.options.detail = arrayItemDetailLayout;
+    }
+};
+setupLayoutReferences();
+export const FORM_BUILDER_UI_SCHEMA = {
+    type: "VerticalLayout",
+    elements: [
+        {
+            type: "Control",
+            scope: "#/properties/name",
+            label: "Template Name",
+        },
+        {
+            type: "Group",
+            label: "Component-Driven Fields",
+            elements: [
+                {
+                    type: "Control",
+                    scope: "#/properties/formFields",
+                    options: { detail: fieldDetailLayout },
+                },
+            ],
+        },
+        {
+            type: "Group",
+            label: "IB-Driven Fields",
+            elements: [
+                {
+                    type: "Control",
+                    scope: "#/properties/ibFormFields",
+                    options: { detail: fieldDetailLayout },
+                },
+            ],
+        },
+    ],
+};