@remotion/cli 4.0.0-alpha.4 → 4.0.0-alpha5

package/dist/editor/components/RenderModal/SchemaEditor/SchemaSaveButton.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaSaveButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InlineAction_1 = require("../../InlineAction");
+const icon = {
+    height: 14,
+    color: 'currentColor',
+};
+const SchemaSaveButton = ({ onClick, isSaving }) => {
+    const renderAction = (0, react_1.useCallback)((color) => {
+        return ((0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: isSaving ? 'grey' : color, d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V173.3c0-17-6.7-33.3-18.7-45.3L352 50.7C340 38.7 323.7 32 306.7 32H64zm0 96c0-17.7 14.3-32 32-32H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V128zM224 288a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" }) }));
+    }, [isSaving]);
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { renderAction: renderAction, onClick: onClick, disabled: isSaving }));
+};
+exports.SchemaSaveButton = SchemaSaveButton;

package/dist/editor/components/RenderModal/SchemaEditor/ZodArrayEditor.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+export declare const ZodArrayEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: unknown[];
+    defaultValue: unknown[];
+    setValue: React.Dispatch<React.SetStateAction<unknown[]>>;
+    onSave: (updater: (oldState: unknown[]) => unknown[]) => void;
+    compact: boolean;
+    showSaveButton: boolean;
+    onRemove: null | (() => void);
+    saving: boolean;
+}>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodArrayEditor.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodArrayEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../../../preview-server/error-overlay/remotion-overlay/Button");
+const colors_1 = require("../../../helpers/colors");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const layout_1 = require("../../layout");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_2 = require("../layout");
+const create_zod_values_1 = require("./create-zod-values");
+const SchemaLabel_1 = require("./SchemaLabel");
+const ZodArrayItemEditor_1 = require("./ZodArrayItemEditor");
+const container = {
+    width: '100%',
+};
+const fullWidth = {
+    width: '100%',
+};
+// TODO: Ability to revert a change (e.g entry deletion )
+const ZodArrayEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, }) => {
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+            revision: 0,
+        };
+    });
+    const def = schema._def;
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
+    const typeName = def.typeName;
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodArray) {
+        throw new Error('expected object');
+    }
+    const isRoot = jsonPath.length === 0;
+    const Element = isRoot ? 'div' : 'fieldset';
+    const { paddingTop } = layout_2.optionRow;
+    const fieldset = (0, react_1.useMemo)(() => {
+        return {
+            borderRadius: 4,
+            borderColor: localValue.zodValidation.success
+                ? colors_1.INPUT_BORDER_COLOR_UNHOVERED
+                : colors_1.FAIL_COLOR,
+        };
+    }, [localValue.zodValidation.success]);
+    const onChange = (0, react_1.useCallback)((updater, incrementRevision) => {
+        setLocalValue((oldLocalState) => {
+            const newValue = updater(oldLocalState.value);
+            const safeParse = schema.safeParse(newValue);
+            // TODO: This logs an error to the console
+            if (safeParse.success) {
+                updateValue(updater);
+            }
+            return {
+                revision: oldLocalState.revision + (incrementRevision ? 1 : 0),
+                value: newValue,
+                zodValidation: safeParse,
+            };
+        });
+    }, [schema, updateValue]);
+    const style = (0, react_1.useMemo)(() => {
+        if (isRoot) {
+            return undefined;
+        }
+        return { paddingTop };
+    }, [isRoot, paddingTop]);
+    const onAdd = (0, react_1.useCallback)(() => {
+        onChange((oldV) => {
+            return [...oldV, (0, create_zod_values_1.createZodValues)(def.type, z, zodTypes)];
+        }, true);
+    }, [def.type, onChange, z]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsxs)(Element, { style: fieldset, children: [isRoot ? null : ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaFieldsetLabel, { jsonPath: jsonPath, onRemove: onRemove })), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: localValue.value.map((child, i) => {
+                            var _a;
+                            return ((0, jsx_runtime_1.jsx)(ZodArrayItemEditor_1.ZodArrayItemEditor
+                            // eslint-disable-next-line react/no-array-index-key
+                            , { onChange: onChange, value: child, def: def, index: i, jsonPath: jsonPath, compact: compact, defaultValue: (_a = defaultValue[i]) !== null && _a !== void 0 ? _a : child, onSave: onSave, showSaveButton: showSaveButton, saving: saving }, `${i}${localValue.revision}`));
+                        }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onAdd, children: "+ Add item" })] }) }) }));
+};
+exports.ZodArrayEditor = ZodArrayEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodArrayItemEditor.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { JSONPath } from './zod-types';
+export declare const ZodArrayItemEditor: React.FC<{
+    jsonPath: JSONPath;
+    onChange: (updater: (oldV: unknown[]) => unknown[], incrementRevision: boolean) => void;
+    def: any;
+    index: number;
+    value: unknown;
+    compact: boolean;
+    defaultValue: unknown;
+    onSave: (updater: (oldState: unknown[]) => unknown[]) => void;
+    showSaveButton: boolean;
+    saving: boolean;
+}>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodArrayItemEditor.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodArrayItemEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ZodSwitch_1 = require("./ZodSwitch");
+const ZodArrayItemEditor = ({ def, onChange, jsonPath, index, value, compact, defaultValue, onSave: onSaveObject, showSaveButton, saving, }) => {
+    const onRemove = (0, react_1.useCallback)(() => {
+        onChange((oldV) => [...oldV.slice(0, index), ...oldV.slice(index + 1)], true);
+    }, [index, onChange]);
+    const setValue = (0, react_1.useCallback)((val) => {
+        onChange((oldV) => [
+            ...oldV.slice(0, index),
+            typeof val === 'function' ? val(oldV[index]) : val,
+            ...oldV.slice(index + 1),
+        ], false);
+    }, [index, onChange]);
+    const newJsonPath = (0, react_1.useMemo)(() => [...jsonPath, index], [index, jsonPath]);
+    const onSave = (0, react_1.useCallback)((updater) => {
+        onSaveObject((oldV) => [
+            ...oldV.slice(0, index),
+            updater(oldV[index]),
+            ...oldV.slice(index + 1),
+        ]);
+    }, [index, onSaveObject]);
+    return ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { jsonPath: newJsonPath, schema: def.type, value: value, setValue: setValue, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }));
+};
+exports.ZodArrayItemEditor = ZodArrayItemEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodBooleanEditor.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { JSONPath } from './zod-types';
+export declare const ZodBooleanEditor: React.FC<{
+    jsonPath: JSONPath;
+    value: boolean;
+    setValue: React.Dispatch<React.SetStateAction<boolean>>;
+    compact: boolean;
+    defaultValue: boolean;
+    onSave: (updater: (oldNum: unknown) => boolean) => void;
+    onRemove: null | (() => void);
+    showSaveButton: boolean;
+    saving: boolean;
+}>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodBooleanEditor.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodBooleanEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../../Checkbox");
+const layout_1 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const fullWidth = {
+    width: '100%',
+};
+const ZodBooleanEditor = ({ jsonPath, value, setValue, onSave, compact, defaultValue, onRemove, showSaveButton, saving, }) => {
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        setValue(newValue);
+    }, [setValue]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        onValueChange(e.target.checked);
+    }, [onValueChange]);
+    const reset = (0, react_1.useCallback)(() => {
+        onValueChange(defaultValue);
+    }, [defaultValue, onValueChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_1.narrowOption : layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, compact: compact, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: value, onChange: onChange, disabled: false }) })] }));
+};
+exports.ZodBooleanEditor = ZodBooleanEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodColorEditor.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+export declare const ZodColorEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: string;
+    defaultValue: string;
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+    onSave: (updater: (oldNum: unknown) => string) => void;
+    onRemove: null | (() => void);
+    compact: boolean;
+    showSaveButton: boolean;
+    saving: boolean;
+}>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodColorEditor.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodColorEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const color_math_1 = require("../../../../color-math");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const layout_1 = require("../../layout");
+const InputDragger_1 = require("../../NewComposition/InputDragger");
+const RemInput_1 = require("../../NewComposition/RemInput");
+const RemInputTypeColor_1 = require("../../NewComposition/RemInputTypeColor");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_2 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const fullWidth = {
+    width: '100%',
+};
+const ZodColorEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, saving, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
+    if (!zodTypes) {
+        throw new Error('expected zod color');
+    }
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+        };
+    });
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    const { a, b, g, r } = localValue.zodValidation.success
+        ? zodTypes.ZodZypesInternals.parseColor(localValue.value)
+        : { a: 1, b: 0, g: 0, r: 0 };
+    const onChange = (0, react_1.useCallback)((e) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(e.target.value, Math.round(a), zodTypes);
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: newColor,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [a, schema, setValue, zodTypes]);
+    const onTextChange = (0, react_1.useCallback)((e) => {
+        const newValue = e.target.value;
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    const reset = (0, react_1.useCallback)(() => {
+        onValueChange(defaultValue);
+    }, [defaultValue, onValueChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    const rgb = `#${r.toString(16).padStart(2, '0')}${g
+        .toString(16)
+        .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    const status = localValue.zodValidation.success ? 'ok' : 'error';
+    const colorPicker = (0, react_1.useMemo)(() => {
+        return {
+            height: 39,
+            width: 45,
+            display: 'inline-block',
+        };
+    }, []);
+    const onOpacityChange = (0, react_1.useCallback)((newValue) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255), zodTypes);
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: newColor,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [localValue.value, schema, setValue, zodTypes]);
+    const onOpacityValueChange = (0, react_1.useCallback)((newValue) => {
+        const newColor = (0, color_math_1.colorWithNewOpacity)(localValue.value, Math.round((Number(newValue) / 100) * 255), zodTypes);
+        const safeParse = schema.safeParse(newColor);
+        const newLocalState = {
+            value: String(newColor),
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newColor);
+        }
+    }, [localValue.value, schema, setValue, zodTypes]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: colorPicker, children: (0, jsx_runtime_1.jsx)(RemInputTypeColor_1.RemInputTypeColor, { type: "color", style: {
+                                        height: 39,
+                                    }, value: rgb, onChange: onChange, className: "__remotion_color_picker", status: status }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1, block: true }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: localValue.value, status: status, placeholder: jsonPath.join('.'), onChange: onTextChange, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { onTextChange: onOpacityChange, onValueChange: onOpacityValueChange, status: status, value: (a / 255) * 100, min: 0, max: 100, step: 1, formatter: (v) => `${Math.round(Number(v))}%`, rightAlign: false })] }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+};
+exports.ZodColorEditor = ZodColorEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodDateEditor.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+export declare const ZodDateEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: Date;
+    defaultValue: Date;
+    setValue: React.Dispatch<React.SetStateAction<Date>>;
+    onSave: (updater: (oldNum: unknown) => Date) => void;
+    onRemove: null | (() => void);
+    compact: boolean;
+    showSaveButton: boolean;
+    saving: boolean;
+}>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodDateEditor.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodDateEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
+const layout_1 = require("../../layout");
+const RemInput_1 = require("../../NewComposition/RemInput");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_2 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const fullWidth = {
+    width: '100%',
+};
+const explainer = {
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    color: colors_1.VERY_LIGHT_TEXT,
+    marginBottom: layout_1.SPACING_UNIT,
+};
+// This will do 2 things:
+// - Make the calendar icon white
+// Turn the input popup a dark mode input
+const inputStyle = {
+    colorScheme: 'dark',
+};
+const formatDate = (date) => {
+    // Get the year, month, day, hours, minutes, seconds, and milliseconds
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1; // Month is zero-indexed, so we add 1
+    const day = date.getDate();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const milliseconds = date.getMilliseconds();
+    // Format the date as a string
+    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day
+        .toString()
+        .padStart(2, '0')}T${hours.toString().padStart(2, '0')}:${minutes
+        .toString()
+        .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds
+        .toString()
+        .padStart(3, '0')}`;
+    return formattedDate;
+};
+const ZodDateEditor = ({ jsonPath, value, setValue, showSaveButton, defaultValue, schema, compact, onSave, onRemove, saving, }) => {
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+        };
+    });
+    const onValueChange = (0, react_1.useCallback)((newValue) => {
+        const safeParse = schema.safeParse(newValue);
+        const newLocalState = {
+            value: newValue,
+            zodValidation: safeParse,
+        };
+        setLocalValue(newLocalState);
+        if (safeParse.success) {
+            setValue(newValue);
+        }
+    }, [schema, setValue]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        // React does not support e.target.valueAsDate :(
+        onValueChange(new Date(e.target.value));
+    }, [onValueChange]);
+    const reset = (0, react_1.useCallback)(() => {
+        onValueChange(defaultValue);
+    }, [defaultValue, onValueChange]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { compact: compact, isDefaultValue: value.getTime() === defaultValue.getTime(), jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: formatDate(localValue.value), type: "datetime-local", status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onChange: onChange, style: inputStyle, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: explainer, children: "Date is in local format" }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] })] }));
+};
+exports.ZodDateEditor = ZodDateEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodEffectEditor.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+export declare const ZodEffectEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: unknown;
+    setValue: (value: unknown) => void;
+    compact: boolean;
+    defaultValue: unknown;
+    onSave: (updater: (oldState: unknown) => unknown) => void;
+    showSaveButton: boolean;
+    onRemove: null | (() => void);
+    saving: boolean;
+}>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodEffectEditor.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodEffectEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../../helpers/colors");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const ZodSwitch_1 = require("./ZodSwitch");
+const fullWidth = {
+    width: '100%',
+};
+const ZodEffectEditor = ({ schema, jsonPath, value, setValue: updateValue, compact, defaultValue, onSave, onRemove, showSaveButton, saving, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+        };
+    });
+    const def = schema._def;
+    const typeName = def.typeName;
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodEffects) {
+        throw new Error('expected effect');
+    }
+    const onChange = (0, react_1.useCallback)((newValue) => {
+        setLocalValue(() => {
+            const safeParse = schema.safeParse(newValue);
+            if (safeParse.success) {
+                updateValue(() => newValue);
+            }
+            return {
+                value: newValue,
+                zodValidation: safeParse,
+            };
+        });
+    }, [schema, updateValue]);
+    const container = (0, react_1.useMemo)(() => {
+        if (!localValue.zodValidation.success) {
+            return {
+                border: `1px solid ${colors_1.FAIL_COLOR}`,
+                borderRadius: 4,
+            };
+        }
+        return {
+            border: 'none',
+            padding: 0,
+        };
+    }, [localValue.zodValidation.success]);
+    return ((0, jsx_runtime_1.jsxs)("fieldset", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: fullWidth, children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: value, setValue: onChange, jsonPath: jsonPath, schema: def.schema, compact: compact, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsx)("legend", { children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" }) }))] }));
+};
+exports.ZodEffectEditor = ZodEffectEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodEnumEditor.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { z } from 'zod';
+import type { JSONPath } from './zod-types';
+export declare const ZodEnumEditor: React.FC<{
+    schema: z.ZodTypeAny;
+    jsonPath: JSONPath;
+    value: string;
+    defaultValue: string;
+    setValue: React.Dispatch<React.SetStateAction<string>>;
+    onSave: (updater: (oldState: string) => string) => void;
+    compact: boolean;
+    showSaveButton: boolean;
+    onRemove: null | (() => void);
+    saving: boolean;
+}>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodEnumEditor.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodEnumEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkmark_1 = require("../../../icons/Checkmark");
+const get_zod_if_possible_1 = require("../../get-zod-if-possible");
+const layout_1 = require("../../layout");
+const ComboBox_1 = require("../../NewComposition/ComboBox");
+const ValidationMessage_1 = require("../../NewComposition/ValidationMessage");
+const layout_2 = require("../layout");
+const SchemaLabel_1 = require("./SchemaLabel");
+const container = {
+    width: '100%',
+};
+const ZodEnumEditor = ({ schema, jsonPath, compact, setValue: updateValue, defaultValue, value, onSave, showSaveButton, onRemove, saving, }) => {
+    const z = (0, get_zod_if_possible_1.useZodIfPossible)();
+    if (!z) {
+        throw new Error('expected zod');
+    }
+    const [localValue, setLocalValue] = (0, react_1.useState)(() => {
+        return {
+            value,
+            zodValidation: schema.safeParse(value),
+            revision: 0,
+        };
+    });
+    const def = schema._def;
+    const typeName = def.typeName;
+    if (typeName !== z.ZodFirstPartyTypeKind.ZodEnum) {
+        throw new Error('expected enum');
+    }
+    const isRoot = jsonPath.length === 0;
+    const onChange = (0, react_1.useCallback)((updater) => {
+        setLocalValue((oldLocalState) => {
+            const newValue = updater(oldLocalState.value);
+            const safeParse = schema.safeParse(newValue);
+            if (safeParse.success) {
+                updateValue(updater);
+            }
+            return {
+                value: newValue,
+                zodValidation: safeParse,
+            };
+        });
+    }, [schema, updateValue]);
+    const reset = (0, react_1.useCallback)(() => {
+        onChange(() => defaultValue);
+    }, [defaultValue, onChange]);
+    const comboBoxValues = (0, react_1.useMemo)(() => {
+        return def.values.map((option) => {
+            return {
+                value: option,
+                label: option,
+                id: option,
+                keyHint: null,
+                leftItem: option === value ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                onClick: (id) => {
+                    onChange(() => id);
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+            };
+        });
+    }, [def.values, onChange, value]);
+    const save = (0, react_1.useCallback)(() => {
+        onSave(() => value);
+    }, [onSave, value]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: compact ? layout_2.narrowOption : layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { onSave: save, showSaveButton: showSaveButton, isDefaultValue: value === defaultValue, compact: compact, onReset: reset, jsonPath: jsonPath, onRemove: onRemove, saving: saving }), (0, jsx_runtime_1.jsx)("div", { style: isRoot ? undefined : container, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value }) }), !localValue.zodValidation.success && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: localValue.zodValidation.error.format()._errors[0], type: "error" })] }))] }));
+};
+exports.ZodEnumEditor = ZodEnumEditor;

package/dist/editor/components/RenderModal/SchemaEditor/ZodErrorMessages.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { z } from 'zod';
+export declare const ZodErrorMessages: React.FC<{
+    zodValidationResult: z.SafeParseReturnType<unknown, unknown>;
+}>;

package/dist/editor/components/RenderModal/SchemaEditor/ZodErrorMessages.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZodErrorMessages = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../../helpers/colors");
+const label = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+};
+const code = {
+    ...label,
+    fontFamily: 'monospace',
+};
+const ZodErrorMessages = ({ zodValidationResult }) => {
+    if (zodValidationResult.success) {
+        throw new Error('Expected error');
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { children: zodValidationResult.error.errors.map((error) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { style: label, children: ["-", ' ', (0, jsx_runtime_1.jsx)("code", { style: code, children: error.path.length === 0 ? 'Root' : error.path.join('.') }), ": ", error.message] }, error.path.join('.')));
+        }) }));
+};
+exports.ZodErrorMessages = ZodErrorMessages;

package/dist/editor/components/RenderModal/SchemaEditor/ZodNonEditableValue.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { JSONPath } from './zod-types';
+export declare const ZonNonEditableValue: React.FC<{
+    jsonPath: JSONPath;
+    label: string;
+    compact: boolean;
+    showSaveButton: boolean;
+    saving: boolean;
+}>;