@remotion/studio
Version:
APIs for interacting with the Remotion Studio
89 lines (88 loc) • 6.28 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TopLevelZodValue = exports.InvalidSchema = exports.InvalidDefaultProps = exports.NoDefaultProps = exports.NoSchemaDefined = exports.ZodNotInstalled = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
// Schema error messages for studio editor
const colors_1 = require("../../../helpers/colors");
const Button_1 = require("../../Button");
const layout_1 = require("../../layout");
const styles_1 = require("../../Menu/styles");
const ZodErrorMessages_1 = require("./ZodErrorMessages");
const explainer = {
display: 'flex',
flex: 1,
flexDirection: 'column',
padding: '0 12px',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
background: colors_1.BACKGROUND,
};
const errorExplanation = {
fontSize: 14,
color: colors_1.LIGHT_TEXT,
fontFamily: 'sans-serif',
lineHeight: 1.5,
};
const codeSnippet = {
fontSize: 14,
color: colors_1.BLUE,
fontFamily: 'monospace',
};
const errorContainer = {
padding: '8px 12px',
overflowY: 'auto',
};
const openDocs = () => {
window.open('https://www.remotion.dev/docs/schemas');
};
const ZodNotInstalled = () => {
return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["Install ",
jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "zod" }),
" as a dependency to interactively control the props of the composition."] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx(Button_1.Button, { onClick: openDocs, children: "Learn how" })
] }));
};
exports.ZodNotInstalled = ZodNotInstalled;
const NoSchemaDefined = () => {
return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["Make the props of this composition interactively editable by adding a", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "schema" }),
" prop to the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }),
" component."] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx(Button_1.Button, { onClick: openDocs, children: "Learn how" })
] }));
};
exports.NoSchemaDefined = NoSchemaDefined;
const NoDefaultProps = () => {
return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }),
" prop in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }),
" does not exist."] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["Fix the schema by adding a", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }),
" prop to your composition."] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx(Button_1.Button, { onClick: openDocs, children: "Learn more" })
] }));
};
exports.NoDefaultProps = NoDefaultProps;
const InvalidDefaultProps = ({ zodValidationResult }) => {
return (jsx_runtime_1.jsxs("div", { style: errorContainer, children: [
jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }),
" prop in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }),
" is not valid:"] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }),
" prop in your composition so it does not give a type error."] })
] }));
};
exports.InvalidDefaultProps = InvalidDefaultProps;
const InvalidSchema = ({ zodValidationResult }) => {
return (jsx_runtime_1.jsxs("div", { style: errorContainer, children: [
jsx_runtime_1.jsx("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." })
] }));
};
exports.InvalidSchema = InvalidSchema;
const TopLevelZodValue = ({ typeReceived }) => {
return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
jsx_runtime_1.jsxs("div", { style: errorExplanation, children: ["The top-level type of the schema must be", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "z.object()" }),
" or", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "z.discriminatedUnion()" }),
". Instead got a schema of type ",
jsx_runtime_1.jsx("code", { style: codeSnippet, children: typeReceived })
] }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Fix the schema by changing the top-level Zod type to an object or discriminated union." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true }), jsx_runtime_1.jsx(Button_1.Button, { onClick: openDocs, children: "Learn more" })
] }));
};
exports.TopLevelZodValue = TopLevelZodValue;