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

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

@@ -0,0 +1,267 @@
+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,
+            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/sdk/blocks/form/form.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+interface BuilderElement {
+}
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+export interface FormProps {
+    attributes?: any;
+    name?: string;
+    action?: string;
+    validate?: boolean;
+    method?: string;
+    builderBlock?: BuilderElement;
+    sendSubmissionsTo?: string;
+    sendSubmissionsToEmail?: string;
+    sendWithJs?: boolean;
+    contentType?: string;
+    customHeaders?: {
+        [key: string]: string;
+    };
+    successUrl?: string;
+    previewState?: FormState;
+    successMessage?: BuilderElement[];
+    errorMessage?: BuilderElement[];
+    sendingMessage?: BuilderElement[];
+    resetFormOnSubmit?: boolean;
+    errorMessagePath?: string;
+}
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+export type FormState = "unsubmitted" | "sending" | "success" | "error";
+declare function FormComponent(props: FormProps): JSX.Element;
+export default FormComponent;

package/dist/sdk/blocks/form/form.js

@@ -0,0 +1,203 @@
+"use client";
+import * as React from "react";
+import { useState, useContext, useRef } 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 formRef = useRef(null);
+    const [formState, setFormState] = useState(() => "unsubmitted");
+    const [responseData, setResponseData] = useState(() => null);
+    const [formErrorMessage, setFormErrorMessage] = useState(() => "");
+    function submissionState() {
+        return (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 = 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(RenderBlock, { block: block, context: builderContext }))))) : null,
+            " ",
+            submissionState() === "error" ? (React.createElement(React.Fragment, null,
+                React.createElement(BuilderBlocks, { dataPath: "errorMessage", blocks: props.errorMessage }))) : null,
+            " ",
+            submissionState() === "sending" ? (React.createElement(React.Fragment, null,
+                React.createElement(BuilderBlocks, { dataPath: "sendingMessage", blocks: props.sendingMessage }))) : null,
+            " ",
+            submissionState() === "error" && responseData ? (React.createElement(React.Fragment, null,
+                React.createElement("pre", { className: "builder-form-error-text pre-0217077c" },
+                    " ",
+                    JSON.stringify(responseData, null, 2),
+                    " "))) : null,
+            " ",
+            submissionState() === "success" ? (React.createElement(React.Fragment, null,
+                React.createElement(BuilderBlocks, { dataPath: "successMessage", blocks: props.successMessage }))) : null,
+            " "),
+        " ",
+        React.createElement("style", null, `.pre-0217077c { padding: 10px; color: red; text-align: center; }`),
+        " "));
+}
+export default FormComponent;

package/dist/sdk/blocks/fragment/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;

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

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface FragmentProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+}
+declare function FragmentComponent(props: FragmentProps): JSX.Element;
+export default FragmentComponent;

package/dist/sdk/blocks/image/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components';
+export declare const componentInfo: ComponentInfo;

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

@@ -0,0 +1,152 @@
+import { serializeFn } from '../util.js';
+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: serializeFn((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,
+        },
+    ],
+};