@builder.io/sdk-react 0.5.9 → 0.6.0

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;
-}

package/dist/blocks/image/image.js

@@ -1,82 +0,0 @@
-"use client";
-import * as React from "react";
-import { getSrcSet } from "./image.helpers.js";
-function Image(props) {
-    function srcSetToUse() {
-        const imageToUse = props.image || props.src;
-        const url = imageToUse;
-        if (!url ||
-            // We can auto add srcset for cdn.builder.io and shopify
-            // images, otherwise you can supply this prop manually
-            !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
-            return props.srcset;
-        }
-        if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
-            if (!props.srcset.includes(props.image.split("?")[0])) {
-                console.debug("Removed given srcset");
-                return getSrcSet(url);
-            }
-        }
-        else if (props.image && !props.srcset) {
-            return getSrcSet(url);
-        }
-        return getSrcSet(url);
-    }
-    function webpSrcSet() {
-        if (srcSetToUse?.()?.match(/builder\.io/) && !props.noWebp) {
-            return srcSetToUse().replace(/\?/g, "?format=webp&");
-        }
-        else {
-            return "";
-        }
-    }
-    function aspectRatioCss() {
-        const aspectRatioStyles = {
-            position: "absolute",
-            height: "100%",
-            width: "100%",
-            left: "0px",
-            top: "0px",
-        };
-        const out = props.aspectRatio ? aspectRatioStyles : undefined;
-        return out;
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(React.Fragment, null,
-            React.createElement("picture", null,
-                webpSrcSet() ? (React.createElement(React.Fragment, null,
-                    React.createElement("source", { type: "image/webp", srcSet: webpSrcSet() }))) : null,
-                React.createElement("img", { loading: "lazy", alt: props.altText, role: props.altText ? "presentation" : undefined, style: {
-                        objectPosition: props.backgroundPosition || "center",
-                        objectFit: props.backgroundSize || "cover",
-                        ...aspectRatioCss(),
-                    }, className: "builder-image" +
-                        (props.className ? " " + props.className : "") +
-                        " img-ef11a6be", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
-            props.aspectRatio &&
-                !(props.builderBlock?.children?.length && props.fitContent) ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "builder-image-sizer div-ef11a6be", style: {
-                        paddingTop: props.aspectRatio * 100 + "%",
-                    } }))) : null,
-            props.builderBlock?.children?.length && props.fitContent ? (React.createElement(React.Fragment, null, props.children)) : null,
-            !props.fitContent && props.children ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "div-ef11a6be-2" }, props.children))) : null),
-        React.createElement("style", null, `.img-ef11a6be {
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out;
-}.div-ef11a6be {
-  width: 100%;
-  pointer-events: none;
-  font-size: 0;
-}.div-ef11a6be-2 {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}`)));
-}
-export default Image;

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

@@ -1,15 +0,0 @@
-export const componentInfo = {
-    // friendlyName?
-    name: 'Raw:Img',
-    hideFromInsertMenu: 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',
-    inputs: [{
-            name: 'image',
-            bubble: true,
-            type: 'file',
-            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
-            required: true
-        }],
-    noWrap: true,
-    static: true
-};

package/dist/blocks/img/img.js

@@ -1,10 +0,0 @@
-"use client";
-import * as React from "react";
-import { isEditing } from "../../functions/is-editing.js";
-function ImgComponent(props) {
-    return (React.createElement("img", { style: {
-            objectFit: props.backgroundSize || "cover",
-            objectPosition: props.backgroundPosition || "center",
-        }, key: (isEditing() && props.imgSrc) || "default-key", alt: props.altText, src: props.imgSrc || props.image, ...{}, ...props.attributes }));
-}
-export default ImgComponent;

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

@@ -1,46 +0,0 @@
-export const componentInfo = {
-    name: 'Form:Input',
-    image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',
-    inputs: [{
-            name: 'type',
-            type: 'text',
-            enum: ['text', 'number', 'email', 'url', 'checkbox', 'radio', 'range', 'date', 'datetime-local', 'search', 'tel', 'time', 'file', 'month', 'week', 'password', 'color', 'hidden'],
-            defaultValue: 'text'
-        }, {
-            name: 'name',
-            type: 'string',
-            required: true,
-            helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"'
-        }, {
-            name: 'placeholder',
-            type: 'string',
-            defaultValue: 'Hello there',
-            helperText: 'Text to display when there is no value'
-        },
-        // TODO: handle value vs default value automatically like ng-model
-        {
-            name: 'defaultValue',
-            type: 'string'
-        }, {
-            name: 'value',
-            type: 'string',
-            advanced: true
-        }, {
-            name: 'required',
-            type: 'boolean',
-            helperText: 'Is this input required to be filled out to submit a form',
-            defaultValue: false
-        }],
-    noWrap: true,
-    static: true,
-    defaultStyles: {
-        paddingTop: '10px',
-        paddingBottom: '10px',
-        paddingLeft: '10px',
-        paddingRight: '10px',
-        borderRadius: '3px',
-        borderWidth: '1px',
-        borderStyle: 'solid',
-        borderColor: '#ccc'
-    }
-};

package/dist/blocks/input/input.js

@@ -1,7 +0,0 @@
-"use client";
-import * as React from "react";
-import { isEditing } from "../../functions/is-editing.js";
-function FormInputComponent(props) {
-    return (React.createElement("input", { ...{}, ...props.attributes, key: isEditing() && props.defaultValue ? props.defaultValue : "default-key", placeholder: props.placeholder, type: props.type, name: props.name, value: props.value, defaultValue: props.defaultValue, required: props.required }));
-}
-export default FormInputComponent;

package/dist/blocks/raw-text/component-info.js

@@ -1,10 +0,0 @@
-export const componentInfo = {
-    name: 'Builder:RawText',
-    hideFromInsertMenu: true,
-    inputs: [{
-            name: 'text',
-            bubble: true,
-            type: 'longText',
-            required: true
-        }]
-};

package/dist/blocks/raw-text/raw-text.js

@@ -1,6 +0,0 @@
-"use client";
-import * as React from "react";
-function RawText(props) {
-    return (React.createElement("span", { dangerouslySetInnerHTML: { __html: props.text?.toString() || "" }, className: props.attributes.className }));
-}
-export default RawText;