@remotion/studio
Version:
APIs for interacting with the Remotion Studio
62 lines (61 loc) • 6.4 kB
JavaScript
;
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");
const colors_1 = require("../../../helpers/colors");
const Button_1 = require("../../Button");
const styles_1 = require("../../Menu/styles");
const layout_1 = require("../../layout");
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 ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Install ", (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "zod" }), " as a dependency to interactively control the props of the composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
};
exports.ZodNotInstalled = ZodNotInstalled;
const NoSchemaDefined = () => {
return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Make the props of this composition interactively editable by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "schema" }), " prop to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " component."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn how" })] }));
};
exports.NoSchemaDefined = NoSchemaDefined;
const NoDefaultProps = () => {
return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " does not exist."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by adding a", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop to your composition."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn more" })] }));
};
exports.NoDefaultProps = NoDefaultProps;
const InvalidDefaultProps = ({ zodValidationResult }) => {
return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The schema can not be edited because the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " prop in the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: '<Composition>' }), " is not valid:"] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Fix the schema by changing the", ' ', (0, 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, reset }) => {
return ((0, jsx_runtime_1.jsxs)("div", { style: errorContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The data does not satisfy the schema:" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(ZodErrorMessages_1.ZodErrorMessages, { zodValidationResult: zodValidationResult, viewTab: "schema" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema using the JSON editor." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["Alternatively, reset the data to the", ' ', (0, jsx_runtime_1.jsx)("code", { style: styles_1.inlineCodeSnippet, children: "defaultProps" }), " that you have defined."] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: reset, children: "Reset props" })] }));
};
exports.InvalidSchema = InvalidSchema;
const TopLevelZodValue = ({ typeReceived }) => {
return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsxs)("div", { style: errorExplanation, children: ["The top-level type of the schema must be a pure", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "z.object" }), ". Instead got a schema of type", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: typeReceived })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "Fix the schema by changing the top-level Zod type to an object." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: openDocs, children: "Learn more" })] }));
};
exports.TopLevelZodValue = TopLevelZodValue;