@builder.io/sdk-react 0.2.3-3 → 0.2.3

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

@@ -1,103 +0,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
-        }
-    ]
-};
-export { componentInfo };

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

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

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

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

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

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

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

@@ -1,13 +0,0 @@
-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/esm/components/render-block/render-block.helpers.js

@@ -1,119 +0,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;
-};
-import { evaluate } from "../../functions/evaluate";
-import { getProcessedBlock } from "../../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());
-};
-const getComponent = ({ block, context }) => {
-    var _a;
-    const componentName = (_a = 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;
-    }
-};
-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 = 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;
-};
-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;
-};
-export { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement };

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

@@ -1,132 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } from "react";
-import { getBlockActions } from "../../functions/get-block-actions.js";
-import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./block-styles";
-import { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
-import RenderRepeatedBlock from "./render-repeated-block";
-import { TARGET } from "../../constants/target.js";
-import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import RenderComponent from "./render-component";
-import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-function RenderBlock(props) {
-    const [component, setComponent] = useState(() => getComponent({
-        block: props.block,
-        context: props.context,
-    }));
-    const [repeatItemData, setRepeatItemData] = useState(() => getRepeatItemData({
-        block: props.block,
-        context: props.context,
-    }));
-    function useBlock() {
-        return repeatItemData
-            ? props.block
-            : getProcessedBlock({
-                block: props.block,
-                state: props.context.state,
-                context: props.context.context,
-                shouldEvaluateBindings: true,
-            });
-    }
-    const [tag, setTag] = 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] = useState(() => getProxyState(props.context));
-    function actions() {
-        return getBlockActions({
-            block: useBlock(),
-            state: TARGET === "qwik" ? props.context.state : proxyState,
-            context: props.context.context,
-        });
-    }
-    function attributes() {
-        const blockProperties = getBlockProperties(useBlock());
-        return {
-            ...blockProperties,
-            ...(TARGET === "reactNative"
-                ? {
-                    style: 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 !== "reactNative") {
-                return {};
-            }
-            return extractTextStyles(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: {
-                ...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,
-        isEmptyHtmlElement(tag) ? (React.createElement(React.Fragment, null,
-            React.createElement(TagRef, { ...attributes(), ...actions() }))) : null,
-        !isEmptyHtmlElement(tag) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
-        !isEmptyHtmlElement(tag) && !repeatItemData ? (React.createElement(React.Fragment, null,
-            React.createElement(TagRef, { ...attributes(), ...actions() },
-                React.createElement(RenderComponent, { ...renderComponentProps() }),
-                childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))),
-                childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(RenderComponent, { ...renderComponentProps() })))) : null));
-}
-export default RenderBlock;

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

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

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

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

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

@@ -1,18 +0,0 @@
-"use client";
-import * as React from "react";
-import { useContext } from "react";
-import BuilderContext from "../../context/builder.context.js";
-import RenderBlock from "./render-block";
-function RenderRepeatedBlock(props) {
-    return (React.createElement(BuilderContext.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(RenderBlock, { block: props.block, context: props.repeatContext })));
-}
-export default RenderRepeatedBlock;

package/dist/react/esm/components/render-block/types.js

@@ -1 +0,0 @@
-"use strict";

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

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

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

@@ -1,47 +0,0 @@
-"use client";
-import * as React from "react";
-import { useContext } from "react";
-import BuilderContext from "../context/builder.context.js";
-import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles";
-import RenderBlock from "./render-block/render-block";
-function RenderBlocks(props) {
-    function className() {
-        return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
-    }
-    function onClick() {
-        if (isEditing() && !props.blocks?.length) {
-            window.parent?.postMessage({
-                type: "builder.clickEmptyBlocks",
-                data: {
-                    parentElementId: props.parent,
-                    dataPath: props.path,
-                },
-            }, "*");
-        }
-    }
-    function onMouseEnter() {
-        if (isEditing() && !props.blocks?.length) {
-            window.parent?.postMessage({
-                type: "builder.hoverEmptyBlocks",
-                data: {
-                    parentElementId: props.parent,
-                    dataPath: props.path,
-                },
-            }, "*");
-        }
-    }
-    const builderContext = useContext(BuilderContext);
-    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(RenderBlock, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
-            props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null),
-        React.createElement("style", null, `.div-1fdf6196 {
-display: flex;
-flex-direction: column;
-align-items: stretch;
-}`)));
-}
-export default RenderBlocks;

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

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

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

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

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

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

package/dist/react/esm/components/render-content/components/render-styles.helpers.js

@@ -1,51 +0,0 @@
-const getCssFromFont = (font) => {
-    var _a, _b;
-    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-    const name = family.split(",")[0];
-    const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
-    let str = "";
-    if (url && family && name) {
-        str += `
-@font-face {
-font-family: "${family}";
-src: local("${name}"), url('${url}') format('woff2');
-font-display: fallback;
-font-weight: 400;
-}
-      `.trim();
-    }
-    if (font.files) {
-        for (const weight in font.files) {
-            const isNumber = String(Number(weight)) === weight;
-            if (!isNumber) {
-                continue;
-            }
-            const weightUrl = font.files[weight];
-            if (weightUrl && weightUrl !== url) {
-                str += `
-@font-face {
-font-family: "${family}";
-src: url('${weightUrl}') format('woff2');
-font-display: fallback;
-font-weight: ${weight};
-}
-        `.trim();
-            }
-        }
-    }
-    return str;
-};
-const getFontCss = ({ customFonts }) => {
-    var _a;
-    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
-};
-const getCss = ({ cssCode, contentId }) => {
-    if (!cssCode) {
-        return "";
-    }
-    if (!contentId) {
-        return cssCode;
-    }
-    return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
-};
-export { getCss, getFontCss };

package/dist/react/esm/components/render-content/components/render-styles.js

@@ -1,32 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState } from "react";
-import RenderInlinedStyles from "../../render-inlined-styles";
-import { getCss } from "./render-styles.helpers";
-import { getFontCss } from "./render-styles.helpers";
-function RenderContentStyles(props) {
-    const [injectedStyles, setInjectedStyles] = useState(() => `
-${getCss({
-        cssCode: props.cssCode,
-        contentId: props.contentId,
-    })}
-${getFontCss({
-        customFonts: props.customFonts,
-    })}
-
-.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-margin: 0;
-}
-.builder-text > p, .builder-text > .builder-paragraph {
-color: inherit;
-line-height: inherit;
-letter-spacing: inherit;
-font-weight: inherit;
-font-size: inherit;
-text-align: inherit;
-font-family: inherit;
-}
-`);
-    return React.createElement(RenderInlinedStyles, { styles: injectedStyles });
-}
-export default RenderContentStyles;

package/dist/react/esm/components/render-content/index.d.ts

@@ -1,2 +0,0 @@
-export { default2 as default };
-import { default as default2 } from "./render-content";

package/dist/react/esm/components/render-content/index.js

@@ -1,2 +0,0 @@
-import { default as default2 } from "./render-content";
-export { default2 as default };

package/dist/react/esm/components/render-content/render-content.d.ts

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

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

@@ -1,9 +0,0 @@
-export function getContentInitialValue({ content, data }: {
-    content: any;
-    data: any;
-}): any;
-export function getContextStateInitialValue({ content, data, locale }: {
-    content: any;
-    data: any;
-    locale: any;
-}): any;

package/dist/react/esm/components/render-content/render-content.helpers.js

@@ -1,38 +0,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));
-const getContextStateInitialValue = ({ content, data, locale }) => {
-    var _a, _b, _c;
-    const defaultValues = {};
-    (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
-        var _a2;
-        if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
-            defaultValues[input.name] = input.defaultValue;
-        }
-    });
-    const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
-    return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
-};
-const getContentInitialValue = ({ content, data }) => {
-    return !content ? void 0 : __spreadProps(__spreadValues({}, content), {
-        data: __spreadValues(__spreadValues({}, content == null ? void 0 : content.data), data),
-        meta: content == null ? void 0 : content.meta
-    });
-};
-export { getContentInitialValue, getContextStateInitialValue };