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

package/dist/rsc/blocks/form/form.js

@@ -1,205 +0,0 @@
-import * as React from "react";
-import RenderBlock from "../../components/render-block/render-block";
-import BuilderBlocks from "../../components/render-blocks";
-import { isEditing } from "../../functions/is-editing.js";
-function FormComponent(props) {
-    const _context = { ...props["_context"] };
-    const state = {
-        formState: "unsubmitted",
-        responseData: null,
-        formErrorMessage: "",
-        get submissionState() {
-            return (isEditing() && props.previewState) || state.formState;
-        },
-        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) {
-                    formRef.dispatchEvent(presubmitEvent);
-                    if (presubmitEvent.defaultPrevented) {
-                        return;
-                    }
-                }
-                state.formState = "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);
-                            }
-                            state.formErrorMessage = message;
-                        }
-                    }
-                    state.responseData = body;
-                    state.formState = res.ok ? "success" : "error";
-                    if (res.ok) {
-                        const submitSuccessEvent = new CustomEvent("submit:success", {
-                            detail: { res, body },
-                        });
-                        if (formRef) {
-                            formRef.dispatchEvent(submitSuccessEvent);
-                            if (submitSuccessEvent.defaultPrevented) {
-                                return;
-                            }
-                            /* TODO: option to turn this on/off? */ if (props.resetFormOnSubmit !== false) {
-                                formRef.reset();
-                            }
-                        }
-                        /* TODO: client side route event first that can be preventDefaulted */ if (props.successUrl) {
-                            if (formRef) {
-                                const event = new CustomEvent("route", {
-                                    detail: { url: props.successUrl },
-                                });
-                                formRef.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) {
-                        formRef.dispatchEvent(submitErrorEvent);
-                        if (submitErrorEvent.defaultPrevented) {
-                            return;
-                        }
-                    }
-                    state.responseData = err;
-                    state.formState = "error";
-                });
-            }
-        },
-    };
-    const builderContext = _context["BuilderContext"];
-    return (React.createElement(React.Fragment, null,
-        " ",
-        React.createElement("form", { validate: props.validate, action: !props.sendWithJs && props.action, method: props.method, name: props.name, ...props.attributes },
-            " ",
-            props.builderBlock && props.builderBlock.children ? (React.createElement(React.Fragment, null, props.builderBlock?.children?.map((block) => (React.createElement(RenderBlock, { block: block, context: builderContext, _context: _context }))))) : null,
-            " ",
-            state.submissionState === "error" ? (React.createElement(React.Fragment, null,
-                React.createElement(BuilderBlocks, { dataPath: "errorMessage", blocks: props.errorMessage, _context: _context }))) : null,
-            " ",
-            state.submissionState === "sending" ? (React.createElement(React.Fragment, null,
-                React.createElement(BuilderBlocks, { dataPath: "sendingMessage", blocks: props.sendingMessage, _context: _context }))) : null,
-            " ",
-            state.submissionState === "error" && state.responseData ? (React.createElement(React.Fragment, null,
-                React.createElement("pre", { className: "builder-form-error-text pre-1adaf299" },
-                    " ",
-                    JSON.stringify(state.responseData, null, 2),
-                    " "))) : null,
-            " ",
-            state.submissionState === "success" ? (React.createElement(React.Fragment, null,
-                React.createElement(BuilderBlocks, { dataPath: "successMessage", blocks: props.successMessage, _context: _context }))) : null,
-            " "),
-        " ",
-        React.createElement("style", null, `.pre-1adaf299 { padding: 10px; color: red; text-align: center; }`),
-        " "));
-}
-export default FormComponent;

package/dist/rsc/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/rsc/blocks/fragment/component-info.js

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

package/dist/rsc/blocks/fragment/fragment.d.ts

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

package/dist/rsc/blocks/fragment/fragment.js

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

package/dist/rsc/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/rsc/blocks/image/component-info.js

@@ -1,148 +0,0 @@
-import { serializeFn } from "../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: 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
-        }
-    ]
-};
-export { componentInfo };

package/dist/rsc/blocks/image/image.d.ts

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

package/dist/rsc/blocks/image/image.helpers.d.ts

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

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

@@ -1,46 +0,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;
-}
-export { getSrcSet };

package/dist/rsc/blocks/image/image.js

@@ -1,84 +0,0 @@
-import * as React from "react";
-import { getSrcSet } from "./image.helpers.js";
-function Image(props) {
-    const _context = { ...props["_context"] };
-    const state = {
-        get 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);
-        },
-        get webpSrcSet() {
-            if (state.srcSetToUse?.match(/builder\.io/) && !props.noWebp) {
-                return state.srcSetToUse.replace(/\?/g, "?format=webp&");
-            }
-            else {
-                return "";
-            }
-        },
-        get 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,
-                state.webpSrcSet ? (React.createElement(React.Fragment, null,
-                    React.createElement("source", { type: "image/webp", srcSet: state.webpSrcSet }))) : null,
-                React.createElement("img", { loading: "lazy", alt: props.altText, role: props.altText ? "presentation" : undefined, style: {
-                        objectPosition: props.backgroundPosition || "center",
-                        objectFit: props.backgroundSize || "cover",
-                        ...state.aspectRatioCss,
-                    }, className: "builder-image" +
-                        (props.className ? " " + props.className : "") +
-                        " img-2029f6ee", src: props.image, srcSet: state.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-2029f6ee", 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-2029f6ee-2" }, props.children))) : null),
-        React.createElement("style", null, `.img-2029f6ee {
-opacity: 1;
-transition: opacity 0.2s ease-in-out;
-}.div-2029f6ee {
-width: 100%;
-pointer-events: none;
-font-size: 0;
-}.div-2029f6ee-2 {
-display: flex;
-flex-direction: column;
-align-items: stretch;
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-}`)));
-}
-export default Image;

package/dist/rsc/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 };
-}

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

@@ -1,17 +0,0 @@
-const componentInfo = {
-    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"],
-            required: true
-        }
-    ],
-    noWrap: true,
-    static: true
-};
-export { componentInfo };

package/dist/rsc/blocks/img/img.d.ts

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