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

package/dist/react/cjs/blocks/custom-code/component-info.d.ts

@@ -0,0 +1,31 @@
+export namespace componentInfo {
+    export const name: string;
+    const _static: boolean;
+    export { _static as static };
+    export const requiredPermissions: string[];
+    export const inputs: ({
+        name: string;
+        type: string;
+        required: boolean;
+        defaultValue: string;
+        code: boolean;
+        helperText?: undefined;
+        advanced?: undefined;
+    } | {
+        name: string;
+        type: string;
+        helperText: string;
+        advanced: boolean;
+        required?: undefined;
+        defaultValue?: undefined;
+        code?: undefined;
+    } | {
+        name: string;
+        type: string;
+        defaultValue: boolean;
+        helperText: string;
+        advanced: boolean;
+        required?: undefined;
+        code?: undefined;
+    })[];
+}

package/dist/react/cjs/blocks/custom-code/component-info.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Custom Code",
+    static: true,
+    requiredPermissions: ["editCode"],
+    inputs: [
+        {
+            name: "code",
+            type: "html",
+            required: true,
+            defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+            code: true
+        },
+        {
+            name: "replaceNodes",
+            type: "boolean",
+            helperText: "Preserve server rendered dom nodes",
+            advanced: true
+        },
+        {
+            name: "scriptsClientOnly",
+            type: "boolean",
+            defaultValue: false,
+            helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+            advanced: true
+        }
+    ]
+};
+exports.componentInfo = componentInfo;

package/dist/react/cjs/blocks/custom-code/custom-code.d.ts

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

package/dist/react/cjs/blocks/custom-code/custom-code.js

@@ -0,0 +1,53 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+function CustomCode(props) {
+    const elem = (0, react_1.useRef)(null);
+    const [scriptsInserted, setScriptsInserted] = (0, react_1.useState)(() => []);
+    const [scriptsRun, setScriptsRun] = (0, react_1.useState)(() => []);
+    function findAndRunScripts() {
+        // TODO: Move this function to standalone one in '@builder.io/utils'
+        if (elem.current &&
+            elem.current.getElementsByTagName &&
+            typeof window !== "undefined") {
+            const scripts = elem.current.getElementsByTagName("script");
+            for (let i = 0; i < scripts.length; i++) {
+                const script = scripts[i];
+                if (script.src) {
+                    if (scriptsInserted.includes(script.src)) {
+                        continue;
+                    }
+                    scriptsInserted.push(script.src);
+                    const newScript = document.createElement("script");
+                    newScript.async = true;
+                    newScript.src = script.src;
+                    document.head.appendChild(newScript);
+                }
+                else if (!script.type ||
+                    [
+                        "text/javascript",
+                        "application/javascript",
+                        "application/ecmascript",
+                    ].includes(script.type)) {
+                    if (scriptsRun.includes(script.innerText)) {
+                        continue;
+                    }
+                    try {
+                        scriptsRun.push(script.innerText);
+                        new Function(script.innerText)();
+                    }
+                    catch (error) {
+                        console.warn("`CustomCode`: Error running script:", error);
+                    }
+                }
+            }
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        findAndRunScripts();
+    }, []);
+    return (React.createElement("div", { ref: elem, className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""), dangerouslySetInnerHTML: { __html: props.code } }));
+}
+exports.default = CustomCode;

package/dist/react/cjs/blocks/embed/component-info.d.ts

@@ -0,0 +1,22 @@
+export namespace componentInfo {
+    export const name: string;
+    const _static: boolean;
+    export { _static as static };
+    export const inputs: ({
+        name: string;
+        type: string;
+        required: boolean;
+        defaultValue: string;
+        helperText: string;
+        onChange: string;
+        hideFromUI?: undefined;
+    } | {
+        name: string;
+        type: string;
+        defaultValue: string;
+        hideFromUI: boolean;
+        required?: undefined;
+        helperText?: undefined;
+        onChange?: undefined;
+    })[];
+}

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const util_js_1 = require("../util.js");
+const componentInfo = {
+    name: "Embed",
+    static: true,
+    inputs: [
+        {
+            name: "url",
+            type: "url",
+            required: true,
+            defaultValue: "",
+            helperText: "e.g. enter a youtube url, google map, etc",
+            onChange: (0, util_js_1.serializeFn)((options) => {
+                const url = options.get("url");
+                if (url) {
+                    options.set("content", "Loading...");
+                    const apiKey = "ae0e60e78201a3f2b0de4b";
+                    return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
+                        if (options.get("url") === url) {
+                            if (data.html) {
+                                options.set("content", data.html);
+                            }
+                            else {
+                                options.set("content", "Invalid url, please try another");
+                            }
+                        }
+                    }).catch((_err) => {
+                        options.set("content", "There was an error embedding this URL, please try again or another URL");
+                    });
+                }
+                else {
+                    options.delete("content");
+                }
+            })
+        },
+        {
+            name: "content",
+            type: "html",
+            defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+            hideFromUI: true
+        }
+    ]
+};
+exports.componentInfo = componentInfo;

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

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

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

@@ -0,0 +1,44 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const helpers_js_1 = require("./helpers.js");
+function Embed(props) {
+    const elem = (0, react_1.useRef)(null);
+    const [scriptsInserted, setScriptsInserted] = (0, react_1.useState)(() => []);
+    const [scriptsRun, setScriptsRun] = (0, react_1.useState)(() => []);
+    const [ranInitFn, setRanInitFn] = (0, react_1.useState)(() => false);
+    function findAndRunScripts() {
+        if (!elem.current || !elem.current.getElementsByTagName)
+            return;
+        const scripts = elem.current.getElementsByTagName("script");
+        for (let i = 0; i < scripts.length; i++) {
+            const script = scripts[i];
+            if (script.src && !scriptsInserted.includes(script.src)) {
+                scriptsInserted.push(script.src);
+                const newScript = document.createElement("script");
+                newScript.async = true;
+                newScript.src = script.src;
+                document.head.appendChild(newScript);
+            }
+            else if ((0, helpers_js_1.isJsScript)(script) && !scriptsRun.includes(script.innerText)) {
+                try {
+                    scriptsRun.push(script.innerText);
+                    new Function(script.innerText)();
+                }
+                catch (error) {
+                    console.warn("`Embed`: Error running script:", error);
+                }
+            }
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        if (elem.current && !ranInitFn) {
+            setRanInitFn(true);
+            findAndRunScripts();
+        }
+    }, [elem.current, ranInitFn]);
+    return (React.createElement("div", { className: "builder-embed", ref: elem, dangerouslySetInnerHTML: { __html: props.content } }));
+}
+exports.default = Embed;

package/dist/react/cjs/blocks/embed/helpers.d.ts

@@ -0,0 +1 @@
+export function isJsScript(script: any): boolean;

package/dist/react/cjs/blocks/embed/helpers.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isJsScript = void 0;
+const SCRIPT_MIME_TYPES = [
+    "text/javascript",
+    "application/javascript",
+    "application/ecmascript"
+];
+const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+exports.isJsScript = isJsScript;

package/dist/react/cjs/blocks/form/component-info.d.ts

@@ -0,0 +1,235 @@
+export namespace componentInfo {
+    const name: string;
+    namespace defaults {
+        namespace responsiveStyles {
+            namespace large {
+                const marginTop: string;
+                const paddingBottom: string;
+            }
+        }
+    }
+    const image: string;
+    const inputs: ({
+        name: string;
+        type: string;
+        enum: {
+            label: string;
+            value: string;
+            helperText: string;
+        }[];
+        defaultValue: string;
+        required?: undefined;
+        showIf?: undefined;
+        helperText?: undefined;
+        advanced?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        required: boolean;
+        defaultValue: string;
+        showIf: string;
+        enum?: undefined;
+        helperText?: undefined;
+        advanced?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        helperText: string;
+        defaultValue: boolean;
+        showIf: string;
+        enum?: undefined;
+        required?: undefined;
+        advanced?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        defaultValue: string;
+        enum?: undefined;
+        required?: undefined;
+        showIf?: undefined;
+        helperText?: undefined;
+        advanced?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        helperText: string;
+        showIf: string;
+        enum?: undefined;
+        defaultValue?: undefined;
+        required?: undefined;
+        advanced?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        defaultValue: string;
+        advanced: boolean;
+        enum: string[];
+        showIf: string;
+        required?: undefined;
+        helperText?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        showIf: string;
+        defaultValue: string;
+        advanced: boolean;
+        enum?: undefined;
+        required?: undefined;
+        helperText?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        enum: string[];
+        defaultValue: string;
+        helperText: string;
+        showIf: string;
+        required?: undefined;
+        advanced?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        showIf: string;
+        advanced: boolean;
+        enum?: undefined;
+        defaultValue?: undefined;
+        required?: undefined;
+        helperText?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        hideFromUI: boolean;
+        defaultValue: {
+            "@type": string;
+            responsiveStyles: {
+                large: {
+                    marginTop: string;
+                };
+            };
+            component: {
+                name: string;
+                options: {
+                    text: string;
+                };
+            };
+        }[];
+        enum?: undefined;
+        required?: undefined;
+        showIf?: undefined;
+        helperText?: undefined;
+        advanced?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        defaultValue: boolean;
+        advanced: boolean;
+        enum?: undefined;
+        required?: undefined;
+        showIf?: undefined;
+        helperText?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        advanced: boolean;
+        helperText: string;
+        enum?: undefined;
+        defaultValue?: undefined;
+        required?: undefined;
+        showIf?: undefined;
+        hideFromUI?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        hideFromUI: boolean;
+        defaultValue: {
+            "@type": string;
+            responsiveStyles: {
+                large: {
+                    marginTop: string;
+                };
+            };
+            bindings: {
+                "component.options.text": string;
+            };
+            component: {
+                name: string;
+                options: {
+                    text: string;
+                };
+            };
+        }[];
+        enum?: undefined;
+        required?: undefined;
+        showIf?: undefined;
+        helperText?: undefined;
+        advanced?: undefined;
+        valueType?: undefined;
+    } | {
+        name: string;
+        type: string;
+        valueType: {
+            type: string;
+        };
+        advanced: boolean;
+        showIf: string;
+        enum?: undefined;
+        defaultValue?: undefined;
+        required?: undefined;
+        helperText?: undefined;
+        hideFromUI?: undefined;
+    })[];
+    const noWrap: boolean;
+    const canHaveChildren: boolean;
+    const defaultChildren: ({
+        "@type": string;
+        responsiveStyles: {
+            large: {
+                marginTop: string;
+            };
+        };
+        component: {
+            name: string;
+            options: {
+                text: string;
+                name?: undefined;
+                placeholder?: undefined;
+            };
+        };
+    } | {
+        "@type": string;
+        responsiveStyles: {
+            large: {
+                marginTop: string;
+            };
+        };
+        component: {
+            name: string;
+            options: {
+                name: string;
+                placeholder: string;
+                text?: undefined;
+            };
+        };
+    })[];
+}