@builder.io/sdk-react 0.5.9 → 0.6.1

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

@@ -1,51 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useRef, useEffect } from "react";
-function CustomCode(props) {
-    const elem = useRef(null);
-    const [scriptsInserted, setScriptsInserted] = useState(() => []);
-    const [scriptsRun, setScriptsRun] = 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);
-                    }
-                }
-            }
-        }
-    }
-    useEffect(() => {
-        findAndRunScripts();
-    }, []);
-    return (React.createElement("div", { ref: elem, className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""), dangerouslySetInnerHTML: { __html: props.code } }));
-}
-export default CustomCode;

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

@@ -1,39 +0,0 @@
-export 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: (options) => {
-                const url = options.get('url');
-                if (url) {
-                    options.set('content', 'Loading...');
-                    // TODO: get this out of here!
-                    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
-        }]
-};

package/dist/blocks/embed/embed.js

@@ -1,42 +0,0 @@
-"use client";
-import * as React from "react";
-import { useState, useRef, useEffect } from "react";
-import { isJsScript } from "./helpers.js";
-function Embed(props) {
-    const elem = useRef(null);
-    const [scriptsInserted, setScriptsInserted] = useState(() => []);
-    const [scriptsRun, setScriptsRun] = useState(() => []);
-    const [ranInitFn, setRanInitFn] = 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 (isJsScript(script) && !scriptsRun.includes(script.innerText)) {
-                try {
-                    scriptsRun.push(script.innerText);
-                    new Function(script.innerText)();
-                }
-                catch (error) {
-                    console.warn("`Embed`: Error running script:", error);
-                }
-            }
-        }
-    }
-    useEffect(() => {
-        if (elem.current && !ranInitFn) {
-            setRanInitFn(true);
-            findAndRunScripts();
-        }
-    }, [elem.current, ranInitFn]);
-    return (React.createElement("div", { className: "builder-embed", ref: elem, dangerouslySetInnerHTML: { __html: props.content } }));
-}
-export default Embed;

package/dist/blocks/embed/helpers.js

@@ -1,2 +0,0 @@
-const SCRIPT_MIME_TYPES = ['text/javascript', 'application/javascript', 'application/ecmascript'];
-export const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);

package/dist/blocks/form/component-info.js

@@ -1,232 +0,0 @@
-export const componentInfo = {
-    name: 'Form:Form',
-    // editableTags: ['builder-form-error']
-    defaults: {
-        responsiveStyles: {
-            large: {
-                marginTop: '15px',
-                paddingBottom: '15px'
-            }
-        }
-    },
-    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',
-    inputs: [{
-            name: 'sendSubmissionsTo',
-            type: 'string',
-            // TODO: save to builder data and user can download as csv
-            // TODO: easy for mode too or computed add/remove fields form mode
-            // so you can edit details and high level mode at same time...
-            // Later - more integrations like mailchimp
-            // /api/v1/form-submit?to=mailchimp
-            enum: [{
-                    label: 'Send to email',
-                    value: 'email',
-                    helperText: 'Send form submissions to the email address of your choosing'
-                }, {
-                    label: 'Custom',
-                    value: 'custom',
-                    helperText: 'Handle where the form requests go manually with a little code, e.g. to your own custom backend'
-                }],
-            defaultValue: 'email'
-        }, {
-            name: 'sendSubmissionsToEmail',
-            type: 'string',
-            required: true,
-            // TODO: required: () => options.get("sendSubmissionsTo") === "email"
-            defaultValue: 'your@email.com',
-            showIf: 'options.get("sendSubmissionsTo") === "email"'
-        }, {
-            name: 'sendWithJs',
-            type: 'boolean',
-            helperText: 'Set to false to use basic html form action',
-            defaultValue: true,
-            showIf: 'options.get("sendSubmissionsTo") === "custom"'
-        }, {
-            name: 'name',
-            type: 'string',
-            defaultValue: 'My form'
-            // advanced: true
-        }, {
-            name: 'action',
-            type: 'string',
-            helperText: 'URL to send the form data to',
-            showIf: 'options.get("sendSubmissionsTo") === "custom"'
-        }, {
-            name: 'contentType',
-            type: 'string',
-            defaultValue: 'application/json',
-            advanced: true,
-            // TODO: do automatically if file input
-            enum: ['application/json', 'multipart/form-data', 'application/x-www-form-urlencoded'],
-            showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
-        }, {
-            name: 'method',
-            type: 'string',
-            showIf: 'options.get("sendSubmissionsTo") === "custom"',
-            defaultValue: 'POST',
-            advanced: true
-        }, {
-            name: 'previewState',
-            type: 'string',
-            // TODO: persist: false flag
-            enum: ['unsubmitted', 'sending', 'success', 'error'],
-            defaultValue: 'unsubmitted',
-            helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
-            showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
-        }, {
-            name: 'successUrl',
-            type: 'url',
-            helperText: 'Optional URL to redirect the user to on form submission success',
-            showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
-        }, {
-            name: 'resetFormOnSubmit',
-            type: 'boolean',
-            showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
-            advanced: true
-        }, {
-            name: 'successMessage',
-            type: 'uiBlocks',
-            hideFromUI: true,
-            defaultValue: [{
-                    '@type': '@builder.io/sdk:Element',
-                    responsiveStyles: {
-                        large: {
-                            marginTop: '10px'
-                        }
-                    },
-                    component: {
-                        name: 'Text',
-                        options: {
-                            text: '<span>Thanks!</span>'
-                        }
-                    }
-                }]
-        }, {
-            name: 'validate',
-            type: 'boolean',
-            defaultValue: true,
-            advanced: true
-        }, {
-            name: 'errorMessagePath',
-            type: 'text',
-            advanced: true,
-            helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
-        }, {
-            name: 'errorMessage',
-            type: 'uiBlocks',
-            hideFromUI: true,
-            defaultValue: [{
-                    '@type': '@builder.io/sdk:Element',
-                    responsiveStyles: {
-                        large: {
-                            marginTop: '10px'
-                        }
-                    },
-                    bindings: {
-                        'component.options.text': 'state.formErrorMessage || block.component.options.text'
-                    },
-                    component: {
-                        name: 'Text',
-                        options: {
-                            text: '<span>Form submission error :( Please check your answers and try again</span>'
-                        }
-                    }
-                }]
-        }, {
-            name: 'sendingMessage',
-            type: 'uiBlocks',
-            hideFromUI: true,
-            defaultValue: [{
-                    '@type': '@builder.io/sdk:Element',
-                    responsiveStyles: {
-                        large: {
-                            marginTop: '10px'
-                        }
-                    },
-                    component: {
-                        name: 'Text',
-                        options: {
-                            text: '<span>Sending...</span>'
-                        }
-                    }
-                }]
-        }, {
-            name: 'customHeaders',
-            type: 'map',
-            valueType: {
-                type: 'string'
-            },
-            advanced: true,
-            showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
-        }],
-    noWrap: true,
-    canHaveChildren: true,
-    defaultChildren: [{
-            '@type': '@builder.io/sdk:Element',
-            responsiveStyles: {
-                large: {
-                    marginTop: '10px'
-                }
-            },
-            component: {
-                name: 'Text',
-                options: {
-                    text: '<span>Enter your name</span>'
-                }
-            }
-        }, {
-            '@type': '@builder.io/sdk:Element',
-            responsiveStyles: {
-                large: {
-                    marginTop: '10px'
-                }
-            },
-            component: {
-                name: 'Form:Input',
-                options: {
-                    name: 'name',
-                    placeholder: 'Jane Doe'
-                }
-            }
-        }, {
-            '@type': '@builder.io/sdk:Element',
-            responsiveStyles: {
-                large: {
-                    marginTop: '10px'
-                }
-            },
-            component: {
-                name: 'Text',
-                options: {
-                    text: '<span>Enter your email</span>'
-                }
-            }
-        }, {
-            '@type': '@builder.io/sdk:Element',
-            responsiveStyles: {
-                large: {
-                    marginTop: '10px'
-                }
-            },
-            component: {
-                name: 'Form:Input',
-                options: {
-                    name: 'email',
-                    placeholder: 'jane@doe.com'
-                }
-            }
-        }, {
-            '@type': '@builder.io/sdk:Element',
-            responsiveStyles: {
-                large: {
-                    marginTop: '10px'
-                }
-            },
-            component: {
-                name: 'Form:SubmitButton',
-                options: {
-                    text: 'Submit'
-                }
-            }
-        }]
-};

package/dist/blocks/form/form.js

@@ -1,6 +0,0 @@
-"use client";
-import * as React from "react";
-function FormComponent(props) {
-    return React.createElement(React.Fragment, null);
-}
-export default FormComponent;

package/dist/blocks/fragment/component-info.js

@@ -1,7 +0,0 @@
-export const componentInfo = {
-    name: 'Fragment',
-    static: true,
-    hidden: true,
-    canHaveChildren: true,
-    noWrap: true
-};

package/dist/blocks/fragment/fragment.js

@@ -1,6 +0,0 @@
-"use client";
-import * as React from "react";
-function FragmentComponent(props) {
-    return React.createElement("span", null, props.children);
-}
-export default FragmentComponent;

package/dist/blocks/helpers.js

@@ -1,40 +0,0 @@
-export function filterAttrs(attrs = {}, prefix, isEvent) {
-    const result = {};
-    for (const attr in attrs) {
-        if (!attrs[attr])
-            continue;
-        if (isEvent && !attr.startsWith(prefix))
-            continue;
-        const eventName = isEvent ? attr.replace(prefix, '') : attr;
-        result[eventName] = attrs[attr];
-    }
-    return result;
-}
-/**
- * Svelte SDK: workaround to dynamically provide event handlers to components/elements.
- * https://svelte.dev/repl/1246699e266f41218a8eeb45b9b58b54?version=3.24.1
- */
-export function setAttrs(node, attrs = {}) {
-    const attrKeys = Object.keys(attrs);
-    /**
-     *
-     * @param {string} attr
-     */
-    const setup = (attr) => node.addEventListener(attr, attrs[attr]);
-    /**
-     *
-     * @param {string} attr
-     */
-    const teardown = (attr) => node.removeEventListener(attr, attrs[attr]);
-    attrKeys.forEach(setup);
-    return {
-        update(attrs = {}) {
-            const attrKeys = Object.keys(attrs);
-            attrKeys.forEach(teardown);
-            attrKeys.forEach(setup);
-        },
-        destroy() {
-            attrKeys.forEach(teardown);
-        }
-    };
-}

package/dist/blocks/image/component-info.js

@@ -1,122 +0,0 @@
-export const componentInfo = {
-    name: 'Image',
-    static: true,
-    image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
-    defaultStyles: {
-        position: 'relative',
-        minHeight: '20px',
-        minWidth: '20px',
-        overflow: 'hidden'
-    },
-    canHaveChildren: true,
-    inputs: [{
-            name: 'image',
-            type: 'file',
-            bubble: true,
-            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
-            required: true,
-            defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
-            onChange: (options) => {
-                const DEFAULT_ASPECT_RATIO = 0.7041;
-                options.delete('srcset');
-                options.delete('noWebp');
-                function loadImage(url, timeout = 60000) {
-                    return new Promise((resolve, reject) => {
-                        const img = document.createElement('img');
-                        let loaded = false;
-                        img.onload = () => {
-                            loaded = true;
-                            resolve(img);
-                        };
-                        img.addEventListener('error', event => {
-                            console.warn('Image load failed', event.error);
-                            reject(event.error);
-                        });
-                        img.src = url;
-                        setTimeout(() => {
-                            if (!loaded) {
-                                reject(new Error('Image load timed out'));
-                            }
-                        }, timeout);
-                    });
-                }
-                function round(num) {
-                    return Math.round(num * 1000) / 1000;
-                }
-                const value = options.get('image');
-                const aspectRatio = options.get('aspectRatio');
-                // For SVG images - don't render as webp, keep them as SVG
-                fetch(value).then(res => res.blob()).then(blob => {
-                    if (blob.type.includes('svg')) {
-                        options.set('noWebp', true);
-                    }
-                });
-                if (value && (!aspectRatio || aspectRatio === DEFAULT_ASPECT_RATIO)) {
-                    return loadImage(value).then(img => {
-                        const possiblyUpdatedAspectRatio = options.get('aspectRatio');
-                        if (options.get('image') === value && (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === DEFAULT_ASPECT_RATIO)) {
-                            if (img.width && img.height) {
-                                options.set('aspectRatio', round(img.height / img.width));
-                                options.set('height', img.height);
-                                options.set('width', img.width);
-                            }
-                        }
-                    });
-                }
-            }
-        }, {
-            name: 'backgroundSize',
-            type: 'text',
-            defaultValue: 'cover',
-            enum: [{
-                    label: 'contain',
-                    value: 'contain',
-                    helperText: 'The image should never get cropped'
-                }, {
-                    label: 'cover',
-                    value: 'cover',
-                    helperText: "The image should fill it's box, cropping when needed"
-                }]
-        }, {
-            name: 'backgroundPosition',
-            type: 'text',
-            defaultValue: 'center',
-            enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
-        }, {
-            name: 'altText',
-            type: 'string',
-            helperText: 'Text to display when the user has images off'
-        }, {
-            name: 'height',
-            type: 'number',
-            hideFromUI: true
-        }, {
-            name: 'width',
-            type: 'number',
-            hideFromUI: true
-        }, {
-            name: 'sizes',
-            type: 'string',
-            hideFromUI: true
-        }, {
-            name: 'srcset',
-            type: 'string',
-            hideFromUI: true
-        }, {
-            name: 'lazy',
-            type: 'boolean',
-            defaultValue: true,
-            hideFromUI: true
-        }, {
-            name: 'fitContent',
-            type: 'boolean',
-            helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
-            defaultValue: true
-        }, {
-            name: 'aspectRatio',
-            type: 'number',
-            helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
-            advanced: true,
-            defaultValue: 0.7041
-        }]
-};

package/dist/blocks/image/image.helpers.js

@@ -1,47 +0,0 @@
-// Taken from (and modified) the shopify theme script repo
-// https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
-function removeProtocol(path) {
-    return path.replace(/http(s)?:/, '');
-}
-function updateQueryParam(uri = '', key, value) {
-    const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
-    const separator = uri.indexOf('?') !== -1 ? '&' : '?';
-    if (uri.match(re)) {
-        return uri.replace(re, '$1' + key + '=' + encodeURIComponent(value) + '$2');
-    }
-    return uri + separator + key + '=' + encodeURIComponent(value);
-}
-function getShopifyImageUrl(src, size) {
-    if (!src || !src?.match(/cdn\.shopify\.com/) || !size) {
-        return src;
-    }
-    if (size === 'master') {
-        return removeProtocol(src);
-    }
-    const match = src.match(/(_\d+x(\d+)?)?(\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?)/i);
-    if (match) {
-        const prefix = src.split(match[0]);
-        const suffix = match[3];
-        const useSize = size.match('x') ? size : `${size}x`;
-        return removeProtocol(`${prefix[0]}_${useSize}${suffix}`);
-    }
-    return null;
-}
-export function getSrcSet(url) {
-    if (!url) {
-        return url;
-    }
-    const sizes = [100, 200, 400, 800, 1200, 1600, 2000];
-    if (url.match(/builder\.io/)) {
-        let srcUrl = url;
-        const widthInSrc = Number(url.split('?width=')[1]);
-        if (!isNaN(widthInSrc)) {
-            srcUrl = `${srcUrl} ${widthInSrc}w`;
-        }
-        return sizes.filter(size => size !== widthInSrc).map(size => `${updateQueryParam(url, 'width', size)} ${size}w`).concat([srcUrl]).join(', ');
-    }
-    if (url.match(/cdn\.shopify\.com/)) {
-        return sizes.map(size => [getShopifyImageUrl(url, `${size}x${size}`), size]).filter(([sizeUrl]) => !!sizeUrl).map(([sizeUrl, size]) => `${sizeUrl} ${size}w`).concat([url]).join(', ');
-    }
-    return url;
-}