@builder.io/sdk-react 0.2.2 → 0.2.3-1

package/dist/react/cjs/blocks/video/component-info.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Video",
+    canHaveChildren: true,
+    defaultStyles: {
+        minHeight: "20px",
+        minWidth: "20px"
+    },
+    image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
+    inputs: [
+        {
+            name: "video",
+            type: "file",
+            allowedFileTypes: ["mp4"],
+            bubble: true,
+            defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
+            required: true
+        },
+        {
+            name: "posterImage",
+            type: "file",
+            allowedFileTypes: ["jpeg", "png"],
+            helperText: "Image to show before the video plays"
+        },
+        {
+            name: "autoPlay",
+            type: "boolean",
+            defaultValue: true
+        },
+        {
+            name: "controls",
+            type: "boolean",
+            defaultValue: false
+        },
+        {
+            name: "muted",
+            type: "boolean",
+            defaultValue: true
+        },
+        {
+            name: "loop",
+            type: "boolean",
+            defaultValue: true
+        },
+        {
+            name: "playsInline",
+            type: "boolean",
+            defaultValue: true
+        },
+        {
+            name: "fit",
+            type: "text",
+            defaultValue: "cover",
+            enum: ["contain", "cover", "fill", "auto"]
+        },
+        {
+            name: "fitContent",
+            type: "boolean",
+            helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
+            defaultValue: true,
+            advanced: true
+        },
+        {
+            name: "position",
+            type: "text",
+            defaultValue: "center",
+            enum: [
+                "center",
+                "top",
+                "left",
+                "right",
+                "bottom",
+                "top left",
+                "top right",
+                "bottom left",
+                "bottom right"
+            ]
+        },
+        {
+            name: "height",
+            type: "number",
+            advanced: true
+        },
+        {
+            name: "width",
+            type: "number",
+            advanced: true
+        },
+        {
+            name: "aspectRatio",
+            type: "number",
+            advanced: true,
+            defaultValue: 0.7004048582995948
+        },
+        {
+            name: "lazyLoad",
+            type: "boolean",
+            helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+            defaultValue: true,
+            advanced: true
+        }
+    ]
+};
+exports.componentInfo = componentInfo;

package/dist/react/cjs/blocks/video/video.d.ts

@@ -0,0 +1,2 @@
+export default Video;
+declare function Video(props: any): JSX.Element;

package/dist/react/cjs/blocks/video/video.js

@@ -0,0 +1,52 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+function Video(props) {
+    function videoProps() {
+        return {
+            ...(props.autoPlay === true
+                ? {
+                    autoPlay: true,
+                }
+                : {}),
+            ...(props.muted === true
+                ? {
+                    muted: true,
+                }
+                : {}),
+            ...(props.controls === true
+                ? {
+                    controls: true,
+                }
+                : {}),
+            ...(props.loop === true
+                ? {
+                    loop: true,
+                }
+                : {}),
+            ...(props.playsInline === true
+                ? {
+                    playsInline: true,
+                }
+                : {}),
+        };
+    }
+    function spreadProps() {
+        return {
+            ...props.attributes,
+            ...videoProps(),
+        };
+    }
+    return (React.createElement("video", { ...spreadProps(), style: {
+            width: "100%",
+            height: "100%",
+            ...props.attributes?.style,
+            objectFit: props.fit,
+            objectPosition: props.position,
+            // Hack to get object fit to work as expected and
+            // not have the video overflow
+            borderRadius: 1,
+        }, src: props.video || "no-src", poster: props.posterImage }));
+}
+exports.default = Video;

package/dist/react/cjs/components/render-block/block-styles.d.ts

@@ -0,0 +1,2 @@
+export default BlockStyles;
+declare function BlockStyles(props: any): JSX.Element;

package/dist/react/cjs/components/render-block/block-styles.js

@@ -0,0 +1,66 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const device_sizes_js_1 = require("../../constants/device-sizes.js");
+const target_js_1 = require("../../constants/target.js");
+const get_processed_block_js_1 = require("../../functions/get-processed-block.js");
+const css_js_1 = require("../../helpers/css.js");
+const nullable_js_1 = require("../../helpers/nullable.js");
+const render_inlined_styles_1 = require("../render-inlined-styles");
+function BlockStyles(props) {
+    function useBlock() {
+        return (0, get_processed_block_js_1.getProcessedBlock)({
+            block: props.block,
+            state: props.context.state,
+            context: props.context.context,
+            shouldEvaluateBindings: true,
+        });
+    }
+    function canShowBlock() {
+        // only render styles for blocks that are visible
+        if ((0, nullable_js_1.checkIsDefined)(useBlock().hide)) {
+            return !useBlock().hide;
+        }
+        if ((0, nullable_js_1.checkIsDefined)(useBlock().show)) {
+            return useBlock().show;
+        }
+        return true;
+    }
+    function css() {
+        const styles = useBlock().responsiveStyles;
+        const content = props.context.content;
+        const sizesWithUpdatedBreakpoints = (0, device_sizes_js_1.getSizesForBreakpoints)(content?.meta?.breakpoints || {});
+        const largeStyles = styles?.large;
+        const mediumStyles = styles?.medium;
+        const smallStyles = styles?.small;
+        const className = useBlock().id;
+        if (!className) {
+            return "";
+        }
+        const largeStylesClass = largeStyles
+            ? (0, css_js_1.createCssClass)({
+                className,
+                styles: largeStyles,
+            })
+            : "";
+        const mediumStylesClass = mediumStyles
+            ? (0, css_js_1.createCssClass)({
+                className,
+                styles: mediumStyles,
+                mediaQuery: (0, device_sizes_js_1.getMaxWidthQueryForSize)("medium", sizesWithUpdatedBreakpoints),
+            })
+            : "";
+        const smallStylesClass = smallStyles
+            ? (0, css_js_1.createCssClass)({
+                className,
+                styles: smallStyles,
+                mediaQuery: (0, device_sizes_js_1.getMaxWidthQueryForSize)("small", sizesWithUpdatedBreakpoints),
+            })
+            : "";
+        return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+    }
+    return (React.createElement(React.Fragment, null, target_js_1.TARGET !== "reactNative" && css() && canShowBlock() ? (React.createElement(React.Fragment, null,
+        React.createElement(render_inlined_styles_1.default, { styles: css() }))) : null));
+}
+exports.default = BlockStyles;

package/dist/react/cjs/components/render-block/render-block.d.ts

@@ -0,0 +1,2 @@
+export default RenderBlock;
+declare function RenderBlock(props: any): JSX.Element;

package/dist/react/cjs/components/render-block/render-block.helpers.d.ts

@@ -0,0 +1,13 @@
+export function getComponent({ block, context }: {
+    block: any;
+    context: any;
+}): any;
+export function getProxyState(context: any): any;
+export function getRepeatItemData({ block, context }: {
+    block: any;
+    context: any;
+}): {
+    context: any;
+    block: {};
+}[] | undefined;
+export function isEmptyHtmlElement(tagName: any): boolean;

package/dist/react/cjs/components/render-block/render-block.helpers.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isEmptyHtmlElement = exports.getRepeatItemData = exports.getProxyState = exports.getComponent = void 0;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+        if (__hasOwnProp.call(b, prop))
+            __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+        for (var prop of __getOwnPropSymbols(b)) {
+            if (__propIsEnum.call(b, prop))
+                __defNormalProp(a, prop, b[prop]);
+        }
+    return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+        if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+            target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols)
+        for (var prop of __getOwnPropSymbols(source)) {
+            if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+                target[prop] = source[prop];
+        }
+    return target;
+};
+const evaluate_1 = require("../../functions/evaluate");
+const get_processed_block_1 = require("../../functions/get-processed-block");
+const EMPTY_HTML_ELEMENTS = [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "keygen",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+];
+const isEmptyHtmlElement = (tagName) => {
+    return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+exports.isEmptyHtmlElement = isEmptyHtmlElement;
+const getComponent = ({ block, context }) => {
+    var _a;
+    const componentName = (_a = (0, get_processed_block_1.getProcessedBlock)({
+        block,
+        state: context.state,
+        context: context.context,
+        shouldEvaluateBindings: false
+    }).component) == null ? void 0 : _a.name;
+    if (!componentName) {
+        return null;
+    }
+    const ref = context.registeredComponents[componentName];
+    if (!ref) {
+        console.warn(`
+      Could not find a registered component named "${componentName}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+        return void 0;
+    }
+    else {
+        return ref;
+    }
+};
+exports.getComponent = getComponent;
+const getRepeatItemData = ({ block, context }) => {
+    const _a = block, { repeat } = _a, blockWithoutRepeat = __objRest(_a, ["repeat"]);
+    if (!(repeat == null ? void 0 : repeat.collection)) {
+        return void 0;
+    }
+    const itemsArray = (0, evaluate_1.evaluate)({
+        code: repeat.collection,
+        state: context.state,
+        context: context.context
+    });
+    if (!Array.isArray(itemsArray)) {
+        return void 0;
+    }
+    const collectionName = repeat.collection.split(".").pop();
+    const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+    const repeatArray = itemsArray.map((item, index) => ({
+        context: __spreadProps(__spreadValues({}, context), {
+            state: __spreadProps(__spreadValues({}, context.state), {
+                $index: index,
+                $item: item,
+                [itemNameToUse]: item,
+                [`$${itemNameToUse}Index`]: index
+            })
+        }),
+        block: blockWithoutRepeat
+    }));
+    return repeatArray;
+};
+exports.getRepeatItemData = getRepeatItemData;
+const getProxyState = (context) => {
+    if (typeof Proxy === "undefined") {
+        console.error("no Proxy available in this environment, cannot proxy state.");
+        return context.state;
+    }
+    const useState = new Proxy(context.state, {
+        set: (obj, prop, value) => {
+            var _a;
+            obj[prop] = value;
+            (_a = context.setState) == null ? void 0 : _a.call(context, obj);
+            return true;
+        }
+    });
+    return useState;
+};
+exports.getProxyState = getProxyState;

package/dist/react/cjs/components/render-block/render-block.js

@@ -0,0 +1,134 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const get_block_actions_js_1 = require("../../functions/get-block-actions.js");
+const get_block_component_options_js_1 = require("../../functions/get-block-component-options.js");
+const get_block_properties_js_1 = require("../../functions/get-block-properties.js");
+const get_processed_block_js_1 = require("../../functions/get-processed-block.js");
+const block_styles_1 = require("./block-styles");
+const render_block_helpers_js_1 = require("./render-block.helpers.js");
+const render_repeated_block_1 = require("./render-repeated-block");
+const target_js_1 = require("../../constants/target.js");
+const extract_text_styles_js_1 = require("../../functions/extract-text-styles.js");
+const render_component_1 = require("./render-component");
+const get_react_native_block_styles_js_1 = require("../../functions/get-react-native-block-styles.js");
+function RenderBlock(props) {
+    const [component, setComponent] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getComponent)({
+        block: props.block,
+        context: props.context,
+    }));
+    const [repeatItemData, setRepeatItemData] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getRepeatItemData)({
+        block: props.block,
+        context: props.context,
+    }));
+    function useBlock() {
+        return repeatItemData
+            ? props.block
+            : (0, get_processed_block_js_1.getProcessedBlock)({
+                block: props.block,
+                state: props.context.state,
+                context: props.context.context,
+                shouldEvaluateBindings: true,
+            });
+    }
+    const [tag, setTag] = (0, react_1.useState)(() => props.block.tagName || "div");
+    function canShowBlock() {
+        if ("hide" in useBlock()) {
+            return !useBlock().hide;
+        }
+        if ("show" in useBlock()) {
+            return useBlock().show;
+        }
+        return true;
+    }
+    const [proxyState, setProxyState] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getProxyState)(props.context));
+    function actions() {
+        return (0, get_block_actions_js_1.getBlockActions)({
+            block: useBlock(),
+            state: target_js_1.TARGET === "qwik" ? props.context.state : proxyState,
+            context: props.context.context,
+        });
+    }
+    function attributes() {
+        const blockProperties = (0, get_block_properties_js_1.getBlockProperties)(useBlock());
+        return {
+            ...blockProperties,
+            ...(target_js_1.TARGET === "reactNative"
+                ? {
+                    style: (0, get_react_native_block_styles_js_1.getReactNativeBlockStyles)({
+                        block: useBlock(),
+                        context: props.context,
+                        blockStyles: blockProperties.style,
+                    }),
+                }
+                : {}),
+        };
+    }
+    function childrenWithoutParentComponent() {
+        /**
+         * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+         * we render them outside of `componentRef`.
+         * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+         * blocks, and the children will be repeated within those blocks.
+         */
+        const shouldRenderChildrenOutsideRef = !component?.component && !repeatItemData;
+        return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
+    }
+    function childrenContext() {
+        const getInheritedTextStyles = () => {
+            if (target_js_1.TARGET !== "reactNative") {
+                return {};
+            }
+            return (0, extract_text_styles_js_1.extractTextStyles)((0, get_react_native_block_styles_js_1.getReactNativeBlockStyles)({
+                block: useBlock(),
+                context: props.context,
+                blockStyles: attributes().style,
+            }));
+        };
+        return {
+            apiKey: props.context.apiKey,
+            apiVersion: props.context.apiVersion,
+            state: props.context.state,
+            content: props.context.content,
+            context: props.context.context,
+            setState: props.context.setState,
+            registeredComponents: props.context.registeredComponents,
+            inheritedStyles: getInheritedTextStyles(),
+        };
+    }
+    function renderComponentProps() {
+        return {
+            blockChildren: useBlock().children ?? [],
+            componentRef: component?.component,
+            componentOptions: {
+                ...(0, get_block_component_options_js_1.getBlockComponentOptions)(useBlock()),
+                /**
+                 * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+                 * they are provided to the component itself directly.
+                 */
+                ...(!component?.noWrap
+                    ? {}
+                    : {
+                        attributes: {
+                            ...attributes(),
+                            ...actions(),
+                        },
+                    }),
+            },
+            context: childrenContext(),
+        };
+    }
+    const TagRef = tag;
+    return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
+        (0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) ? (React.createElement(React.Fragment, null,
+            React.createElement(TagRef, { ...attributes(), ...actions() }))) : null,
+        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData?.map((data, index) => (React.createElement(render_repeated_block_1.default, { key: index, repeatContext: data.context, block: data.block }))))) : null,
+        !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag) && !repeatItemData ? (React.createElement(React.Fragment, null,
+            React.createElement(TagRef, { ...attributes(), ...actions() },
+                React.createElement(render_component_1.default, { ...renderComponentProps() }),
+                childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))),
+                childrenWithoutParentComponent()?.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(render_component_1.default, { ...renderComponentProps() })))) : null));
+}
+exports.default = RenderBlock;

package/dist/react/cjs/components/render-block/render-component.d.ts

@@ -0,0 +1,2 @@
+export default RenderComponent;
+declare function RenderComponent(props: any): JSX.Element;

package/dist/react/cjs/components/render-block/render-component.js

@@ -0,0 +1,14 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const block_styles_1 = require("./block-styles");
+const render_block_1 = require("./render-block");
+function RenderComponent(props) {
+    const ComponentRefRef = props.componentRef;
+    return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,
+        React.createElement(ComponentRefRef, { ...props.componentOptions },
+            props.blockChildren?.map((child) => (React.createElement(render_block_1.default, { key: "render-block-" + child.id, block: child, context: props.context }))),
+            props.blockChildren?.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: props.context })))))) : null));
+}
+exports.default = RenderComponent;

package/dist/react/cjs/components/render-block/render-repeated-block.d.ts

@@ -0,0 +1,2 @@
+export default RenderRepeatedBlock;
+declare function RenderRepeatedBlock(props: any): JSX.Element;

package/dist/react/cjs/components/render-block/render-repeated-block.js

@@ -0,0 +1,20 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const builder_context_js_1 = require("../../context/builder.context.js");
+const render_block_1 = require("./render-block");
+function RenderRepeatedBlock(props) {
+    return (React.createElement(builder_context_js_1.default.Provider, { value: {
+            content: props.repeatContext.content,
+            state: props.repeatContext.state,
+            setState: props.repeatContext.setState,
+            context: props.repeatContext.context,
+            apiKey: props.repeatContext.apiKey,
+            registeredComponents: props.repeatContext.registeredComponents,
+            inheritedStyles: props.repeatContext.inheritedStyles,
+        } },
+        React.createElement(render_block_1.default, { block: props.block, context: props.repeatContext })));
+}
+exports.default = RenderRepeatedBlock;

package/dist/react/cjs/components/render-blocks.d.ts

@@ -0,0 +1,2 @@
+export default RenderBlocks;
+declare function RenderBlocks(props: any): JSX.Element;

package/dist/react/cjs/components/render-blocks.js

@@ -0,0 +1,49 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const builder_context_js_1 = require("../context/builder.context.js");
+const is_editing_js_1 = require("../functions/is-editing.js");
+const block_styles_1 = require("./render-block/block-styles");
+const render_block_1 = require("./render-block/render-block");
+function RenderBlocks(props) {
+    function className() {
+        return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    }
+    function onClick() {
+        if ((0, is_editing_js_1.isEditing)() && !props.blocks?.length) {
+            window.parent?.postMessage({
+                type: "builder.clickEmptyBlocks",
+                data: {
+                    parentElementId: props.parent,
+                    dataPath: props.path,
+                },
+            }, "*");
+        }
+    }
+    function onMouseEnter() {
+        if ((0, is_editing_js_1.isEditing)() && !props.blocks?.length) {
+            window.parent?.postMessage({
+                type: "builder.hoverEmptyBlocks",
+                data: {
+                    parentElementId: props.parent,
+                    dataPath: props.path,
+                },
+            }, "*");
+        }
+    }
+    const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: className() + " div-1fdf6196", "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
+                class: className(),
+            }, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
+            props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(render_block_1.default, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
+            props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(block_styles_1.default, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null),
+        React.createElement("style", null, `.div-1fdf6196 {
+display: flex;
+flex-direction: column;
+align-items: stretch;
+}`)));
+}
+exports.default = RenderBlocks;

package/dist/react/cjs/components/render-content/builder-editing.d.ts

@@ -0,0 +1,2 @@
+export default BuilderEditing;
+declare function BuilderEditing(props: any): JSX.Element;

package/dist/react/cjs/components/render-content/builder-editing.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+function BuilderEditing(props) {
+    return React.createElement("div", null);
+}
+exports.default = BuilderEditing;

package/dist/react/cjs/components/render-content/components/render-styles.d.ts

@@ -0,0 +1,2 @@
+export default RenderContentStyles;
+declare function RenderContentStyles(props: any): JSX.Element;

package/dist/react/cjs/components/render-content/components/render-styles.helpers.d.ts

@@ -0,0 +1,7 @@
+export function getCss({ cssCode, contentId }: {
+    cssCode: any;
+    contentId: any;
+}): any;
+export function getFontCss({ customFonts }: {
+    customFonts: any;
+}): any;