@builder.io/sdk-react 0.2.3-2 → 0.2.3-4

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

@@ -1,205 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const react_1 = require("react");
-const render_block_1 = require("../../components/render-block/render-block");
-const render_blocks_1 = require("../../components/render-blocks");
-const is_editing_js_1 = require("../../functions/is-editing.js");
-function FormComponent(props) {
-    const formRef = (0, react_1.useRef)(null);
-    const [formState, setFormState] = (0, react_1.useState)(() => "unsubmitted");
-    const [responseData, setResponseData] = (0, react_1.useState)(() => null);
-    const [formErrorMessage, setFormErrorMessage] = (0, react_1.useState)(() => "");
-    function submissionState() {
-        return ((0, is_editing_js_1.isEditing)() && props.previewState) || formState;
-    }
-    function onSubmit(event) {
-        const sendWithJs = props.sendWithJs || props.sendSubmissionsTo === "email";
-        if (props.sendSubmissionsTo === "zapier") {
-            event.preventDefault();
-        }
-        else if (sendWithJs) {
-            if (!(props.action || props.sendSubmissionsTo === "email")) {
-                event.preventDefault();
-                return;
-            }
-            event.preventDefault();
-            const el = event.currentTarget;
-            const headers = props.customHeaders || {};
-            let body;
-            const formData = new FormData(el);
-            // TODO: maybe support null
-            const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea"))
-                .filter((el) => !!el.name)
-                .map((el) => {
-                let value;
-                const key = el.name;
-                if (el instanceof HTMLInputElement) {
-                    if (el.type === "radio") {
-                        if (el.checked) {
-                            value = el.name;
-                            return {
-                                key,
-                                value,
-                            };
-                        }
-                    }
-                    else if (el.type === "checkbox") {
-                        value = el.checked;
-                    }
-                    else if (el.type === "number" || el.type === "range") {
-                        const num = el.valueAsNumber;
-                        if (!isNaN(num)) {
-                            value = num;
-                        }
-                    }
-                    else if (el.type === "file") {
-                        // TODO: one vs multiple files
-                        value = el.files;
-                    }
-                    else {
-                        value = el.value;
-                    }
-                }
-                else {
-                    value = el.value;
-                }
-                return {
-                    key,
-                    value,
-                };
-            });
-            let contentType = props.contentType;
-            if (props.sendSubmissionsTo === "email") {
-                contentType = "multipart/form-data";
-            }
-            Array.from(formPairs).forEach(({ value }) => {
-                if (value instanceof File ||
-                    (Array.isArray(value) && value[0] instanceof File) ||
-                    value instanceof FileList) {
-                    contentType = "multipart/form-data";
-                }
-            });
-            // TODO: send as urlEncoded or multipart by default
-            // because of ease of use and reliability in browser API
-            // for encoding the form?
-            if (contentType !== "application/json") {
-                body = formData;
-            }
-            else {
-                // Json
-                const json = {};
-                Array.from(formPairs).forEach(({ value, key }) => {
-                    set(json, key, value);
-                });
-                body = JSON.stringify(json);
-            }
-            if (contentType && contentType !== "multipart/form-data") {
-                if (
-                /* Zapier doesn't allow content-type header to be sent from browsers */ !(sendWithJs && props.action?.includes("zapier.com"))) {
-                    headers["content-type"] = contentType;
-                }
-            }
-            const presubmitEvent = new CustomEvent("presubmit", { detail: { body } });
-            if (formRef.current) {
-                formRef.current.dispatchEvent(presubmitEvent);
-                if (presubmitEvent.defaultPrevented) {
-                    return;
-                }
-            }
-            setFormState("sending");
-            const formUrl = `${builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
-            fetch(props.sendSubmissionsTo === "email"
-                ? formUrl
-                : props.action /* TODO: throw error if no action URL */, { body, headers, method: props.method || "post" }).then(async (res) => {
-                let body;
-                const contentType = res.headers.get("content-type");
-                if (contentType && contentType.indexOf("application/json") !== -1) {
-                    body = await res.json();
-                }
-                else {
-                    body = await res.text();
-                }
-                if (!res.ok && props.errorMessagePath) {
-                    /* TODO: allow supplying an error formatter function */ let message = get(body, props.errorMessagePath);
-                    if (message) {
-                        if (typeof message !== "string") {
-                            /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                                JSON.stringify(message);
-                        }
-                        setFormErrorMessage(message);
-                    }
-                }
-                setResponseData(body);
-                setFormState(res.ok ? "success" : "error");
-                if (res.ok) {
-                    const submitSuccessEvent = new CustomEvent("submit:success", {
-                        detail: { res, body },
-                    });
-                    if (formRef.current) {
-                        formRef.current.dispatchEvent(submitSuccessEvent);
-                        if (submitSuccessEvent.defaultPrevented) {
-                            return;
-                        }
-                        /* TODO: option to turn this on/off? */ if (props.resetFormOnSubmit !== false) {
-                            formRef.current.reset();
-                        }
-                    }
-                    /* TODO: client side route event first that can be preventDefaulted */ if (props.successUrl) {
-                        if (formRef.current) {
-                            const event = new CustomEvent("route", {
-                                detail: { url: props.successUrl },
-                            });
-                            formRef.current.dispatchEvent(event);
-                            if (!event.defaultPrevented) {
-                                location.href = props.successUrl;
-                            }
-                        }
-                        else {
-                            location.href = props.successUrl;
-                        }
-                    }
-                }
-            }, (err) => {
-                const submitErrorEvent = new CustomEvent("submit:error", {
-                    detail: { error: err },
-                });
-                if (formRef.current) {
-                    formRef.current.dispatchEvent(submitErrorEvent);
-                    if (submitErrorEvent.defaultPrevented) {
-                        return;
-                    }
-                }
-                setResponseData(err);
-                setFormState("error");
-            });
-        }
-    }
-    const builderContext = (0, react_1.useContext)(BuilderContext);
-    return (React.createElement(React.Fragment, null,
-        " ",
-        React.createElement("form", { validate: props.validate, ref: formRef, action: !props.sendWithJs && props.action, method: props.method, name: props.name, onSubmit: (event) => onSubmit(event), ...props.attributes },
-            " ",
-            props.builderBlock && props.builderBlock.children ? (React.createElement(React.Fragment, null, props.builderBlock?.children?.map((block) => (React.createElement(render_block_1.default, { block: block, context: builderContext }))))) : null,
-            " ",
-            submissionState() === "error" ? (React.createElement(React.Fragment, null,
-                React.createElement(render_blocks_1.default, { dataPath: "errorMessage", blocks: props.errorMessage }))) : null,
-            " ",
-            submissionState() === "sending" ? (React.createElement(React.Fragment, null,
-                React.createElement(render_blocks_1.default, { dataPath: "sendingMessage", blocks: props.sendingMessage }))) : null,
-            " ",
-            submissionState() === "error" && responseData ? (React.createElement(React.Fragment, null,
-                React.createElement("pre", { className: "builder-form-error-text pre-8b05da54" },
-                    " ",
-                    JSON.stringify(responseData, null, 2),
-                    " "))) : null,
-            " ",
-            submissionState() === "success" ? (React.createElement(React.Fragment, null,
-                React.createElement(render_blocks_1.default, { dataPath: "successMessage", blocks: props.successMessage }))) : null,
-            " "),
-        " ",
-        React.createElement("style", null, `.pre-8b05da54 { padding: 10px; color: red; text-align: center; }`),
-        " "));
-}
-exports.default = FormComponent;

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

@@ -1,8 +0,0 @@
-export namespace componentInfo {
-    export const name: string;
-    const _static: boolean;
-    export { _static as static };
-    export const hidden: boolean;
-    export const canHaveChildren: boolean;
-    export const noWrap: boolean;
-}

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentInfo = void 0;
-const componentInfo = {
-    name: "Fragment",
-    static: true,
-    hidden: true,
-    canHaveChildren: true,
-    noWrap: true
-};
-exports.componentInfo = componentInfo;

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

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

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

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

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

@@ -1,114 +0,0 @@
-export namespace componentInfo {
-    export const name: string;
-    const _static: boolean;
-    export { _static as static };
-    export const image: string;
-    export namespace defaultStyles {
-        const position: string;
-        const minHeight: string;
-        const minWidth: string;
-        const overflow: string;
-    }
-    export const canHaveChildren: boolean;
-    export const inputs: ({
-        name: string;
-        type: string;
-        bubble: boolean;
-        allowedFileTypes: string[];
-        required: boolean;
-        defaultValue: string;
-        onChange: string;
-        enum?: undefined;
-        helperText?: undefined;
-        hideFromUI?: undefined;
-        advanced?: undefined;
-    } | {
-        name: string;
-        type: string;
-        defaultValue: string;
-        enum: {
-            label: string;
-            value: string;
-            helperText: string;
-        }[];
-        bubble?: undefined;
-        allowedFileTypes?: undefined;
-        required?: undefined;
-        onChange?: undefined;
-        helperText?: undefined;
-        hideFromUI?: undefined;
-        advanced?: undefined;
-    } | {
-        name: string;
-        type: string;
-        defaultValue: string;
-        enum: string[];
-        bubble?: undefined;
-        allowedFileTypes?: undefined;
-        required?: undefined;
-        onChange?: undefined;
-        helperText?: undefined;
-        hideFromUI?: undefined;
-        advanced?: undefined;
-    } | {
-        name: string;
-        type: string;
-        helperText: string;
-        bubble?: undefined;
-        allowedFileTypes?: undefined;
-        required?: undefined;
-        defaultValue?: undefined;
-        onChange?: undefined;
-        enum?: undefined;
-        hideFromUI?: undefined;
-        advanced?: undefined;
-    } | {
-        name: string;
-        type: string;
-        hideFromUI: boolean;
-        bubble?: undefined;
-        allowedFileTypes?: undefined;
-        required?: undefined;
-        defaultValue?: undefined;
-        onChange?: undefined;
-        enum?: undefined;
-        helperText?: undefined;
-        advanced?: undefined;
-    } | {
-        name: string;
-        type: string;
-        defaultValue: boolean;
-        hideFromUI: boolean;
-        bubble?: undefined;
-        allowedFileTypes?: undefined;
-        required?: undefined;
-        onChange?: undefined;
-        enum?: undefined;
-        helperText?: undefined;
-        advanced?: undefined;
-    } | {
-        name: string;
-        type: string;
-        helperText: string;
-        defaultValue: boolean;
-        bubble?: undefined;
-        allowedFileTypes?: undefined;
-        required?: undefined;
-        onChange?: undefined;
-        enum?: undefined;
-        hideFromUI?: undefined;
-        advanced?: undefined;
-    } | {
-        name: string;
-        type: string;
-        helperText: string;
-        advanced: boolean;
-        defaultValue: number;
-        bubble?: undefined;
-        allowedFileTypes?: undefined;
-        required?: undefined;
-        onChange?: undefined;
-        enum?: undefined;
-        hideFromUI?: undefined;
-    })[];
-}

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

@@ -1,151 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentInfo = void 0;
-const util_js_1 = require("../util.js");
-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: (0, util_js_1.serializeFn)((options) => {
-                const DEFAULT_ASPECT_RATIO = 0.7041;
-                options.delete("srcset");
-                options.delete("noWebp");
-                function loadImage(url, timeout = 6e4) {
-                    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 * 1e3) / 1e3;
-                }
-                const value = options.get("image");
-                const aspectRatio = options.get("aspectRatio");
-                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
-        }
-    ]
-};
-exports.componentInfo = componentInfo;

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

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

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

@@ -1 +0,0 @@
-export function getSrcSet(url: any): any;

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

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSrcSet = void 0;
-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 == null ? void 0 : 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;
-}
-function getSrcSet(url) {
-    if (!url) {
-        return url;
-    }
-    const sizes = [100, 200, 400, 800, 1200, 1600, 2e3];
-    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;
-}
-exports.getSrcSet = getSrcSet;

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

@@ -1,84 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const image_helpers_js_1 = require("./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 (0, image_helpers_js_1.getSrcSet)(url);
-            }
-        }
-        else if (props.image && !props.srcset) {
-            return (0, image_helpers_js_1.getSrcSet)(url);
-        }
-        return (0, image_helpers_js_1.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-23384452", 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-23384452", 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-23384452-2" }, props.children))) : null),
-        React.createElement("style", null, `.img-23384452 {
-opacity: 1;
-transition: opacity 0.2s ease-in-out;
-}.div-23384452 {
-width: 100%;
-pointer-events: none;
-font-size: 0;
-}.div-23384452-2 {
-display: flex;
-flex-direction: column;
-align-items: stretch;
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-}`)));
-}
-exports.default = Image;

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

@@ -1,15 +0,0 @@
-export namespace componentInfo {
-    export const name: string;
-    export const hideFromInsertMenu: boolean;
-    export const image: string;
-    export const inputs: {
-        name: string;
-        bubble: boolean;
-        type: string;
-        allowedFileTypes: string[];
-        required: boolean;
-    }[];
-    export const noWrap: boolean;
-    const _static: boolean;
-    export { _static as static };
-}