@builder.io/sdk-react-native 0.1.1 → 0.1.3

package/dist/blocks/embed/embed.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_1 = require("react");
+const helpers_js_1 = require("./helpers.js");
+function Embed(props) {
+    const elem = (0, react_1.useRef)(null);
+    const [scriptsInserted, setScriptsInserted] = (0, react_1.useState)(() => []);
+    const [scriptsRun, setScriptsRun] = (0, react_1.useState)(() => []);
+    const [ranInitFn, setRanInitFn] = (0, react_1.useState)(() => false);
+    function findAndRunScripts() {
+        if (!elem.current || !elem.current.getElementsByTagName)
+            return;
+        const scripts = elem.current.getElementsByTagName("script");
+        for (let i = 0; i < scripts.length; i++) {
+            const script = scripts[i];
+            if (script.src && !scriptsInserted.includes(script.src)) {
+                scriptsInserted.push(script.src);
+                const newScript = document.createElement("script");
+                newScript.async = true;
+                newScript.src = script.src;
+                document.head.appendChild(newScript);
+            }
+            else if ((0, helpers_js_1.isJsScript)(script) && !scriptsRun.includes(script.innerText)) {
+                try {
+                    scriptsRun.push(script.innerText);
+                    new Function(script.innerText)();
+                }
+                catch (error) {
+                    console.warn("`Embed`: Error running script:", error);
+                }
+            }
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        if (elem.current && !ranInitFn) {
+            setRanInitFn(true);
+            findAndRunScripts();
+        }
+    }, [elem.current, ranInitFn]);
+    return (React.createElement(react_native_1.View, { ref: elem, dangerouslySetInnerHTML: { __html: props.content } }));
+}
+exports.default = Embed;

package/dist/blocks/embed/helpers.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isJsScript = void 0;
+const SCRIPT_MIME_TYPES = [
+    "text/javascript",
+    "application/javascript",
+    "application/ecmascript"
+];
+const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+exports.isJsScript = isJsScript;

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

@@ -0,0 +1,263 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Form:Form",
+    builtIn: true,
+    defaults: {
+        responsiveStyles: {
+            large: {
+                marginTop: "15px",
+                paddingBottom: "15px"
+            }
+        }
+    },
+    image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5",
+    inputs: [
+        {
+            name: "sendSubmissionsTo",
+            type: "string",
+            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"
+        },
+        {
+            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,
+            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",
+            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"
+                }
+            }
+        }
+    ]
+};
+exports.componentInfo = componentInfo;

package/dist/blocks/form/form.js

@@ -0,0 +1,232 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseText_1 = __importDefault(require("../BaseText"));
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_1 = require("react");
+const render_block_js_1 = __importDefault(require("../../components/render-block/render-block.js"));
+const render_blocks_js_1 = __importDefault(require("../../components/render-blocks.js"));
+const is_editing_js_1 = require("../../functions/is-editing.js");
+function FormComponent(props) {
+    var _a, _b;
+    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) {
+        var _a;
+        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 && ((_a = props.action) === null || _a === void 0 ? void 0 : _a.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_native_1.View, { 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, (_b = (_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.map((block) => (React.createElement(render_block_js_1.default, { block: block, context: builderContext }))))) : null,
+        " ",
+        submissionState() === "error" ? (React.createElement(React.Fragment, null,
+            React.createElement(render_blocks_js_1.default, { dataPath: "errorMessage", blocks: props.errorMessage }))) : null,
+        " ",
+        submissionState() === "sending" ? (React.createElement(React.Fragment, null,
+            React.createElement(render_blocks_js_1.default, { dataPath: "sendingMessage", blocks: props.sendingMessage }))) : null,
+        " ",
+        submissionState() === "error" && responseData ? (React.createElement(React.Fragment, null,
+            React.createElement(react_native_1.View, { style: styles.view1 },
+                " ",
+                React.createElement(BaseText_1.default, null, JSON.stringify(responseData, null, 2)),
+                " "))) : null,
+        " ",
+        submissionState() === "success" ? (React.createElement(React.Fragment, null,
+            React.createElement(render_blocks_js_1.default, { dataPath: "successMessage", blocks: props.successMessage }))) : null,
+        " "));
+}
+exports.default = FormComponent;
+const styles = react_native_1.StyleSheet.create({
+    view1: { padding: 10, color: "red", textAlign: "center" },
+});

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

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

package/dist/blocks/fragment/fragment.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseText_1 = __importDefault(require("../BaseText"));
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+function FragmentComponent(props) {
+    return (React.createElement(react_native_1.View, null,
+        React.createElement(BaseText_1.default, null, props.children)));
+}
+exports.default = FragmentComponent;