@builder.io/sdk-react-native 0.7.1-1 → 0.7.1

package/lib/browser/commonjs/blocks/embed/embed.js.flow

@@ -1,55 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { useState, useRef, useEffect } from "react";
-import { isJsScript } from "./helpers.js";
-
-function Embed(props) {
-  const elem = useRef(null);
-  const [scriptsInserted, setScriptsInserted] = useState(() => []);
-
-  const [scriptsRun, setScriptsRun] = useState(() => []);
-
-  const [ranInitFn, setRanInitFn] = 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 (isJsScript(script) && !scriptsRun.includes(script.innerText)) {
-        try {
-          scriptsRun.push(script.innerText);
-          new Function(script.innerText)();
-        } catch (error) {
-          console.warn("`Embed`: Error running script:", error);
-        }
-      }
-    }
-  }
-
-  useEffect(() => {
-    if (elem.current && !ranInitFn) {
-      setRanInitFn(true);
-      findAndRunScripts();
-    }
-  }, [elem.current, ranInitFn]);
-
-  return (
-    <View ref={elem} dangerouslySetInnerHTML={{ __html: props.content }} />
-  );
-}
-
-export default Embed;

package/lib/browser/commonjs/blocks/embed/helpers.js.flow

@@ -1,3 +0,0 @@
-const SCRIPT_MIME_TYPES = ["text/javascript", "application/javascript", "application/ecmascript"];
-const isJsScript = script => SCRIPT_MIME_TYPES.includes(script.type);
-export { isJsScript }

package/lib/browser/commonjs/blocks/form/component-info.js.flow

@@ -1,223 +0,0 @@
-const componentInfo = {
-  name: "Form:Form",
-  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"
-      }
-    }
-  }]
-};
-export { componentInfo }

package/lib/browser/commonjs/blocks/form/form.js.flow

@@ -1,15 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-
-function FormComponent(props) {
-  return <></>;
-}
-
-export default FormComponent;

package/lib/browser/commonjs/blocks/fragment/component-info.js.flow

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

package/lib/browser/commonjs/blocks/fragment/fragment.js.flow

@@ -1,15 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-
-function FragmentComponent(props) {
-  return <View>{props.children}</View>;
-}
-
-export default FragmentComponent;

package/lib/browser/commonjs/blocks/helpers.js.flow

@@ -1,27 +0,0 @@
-function filterAttrs(attrs = {}, prefix, isEvent) {
-  const result = {};
-  for (const attr in attrs) {
-    if (!attrs[attr]) continue;
-    if (isEvent && !attr.startsWith(prefix)) continue;
-    const eventName = isEvent ? attr.replace(prefix, "") : attr;
-    result[eventName] = attrs[attr];
-  }
-  return result;
-}
-function setAttrs(node, attrs = {}) {
-  const attrKeys = Object.keys(attrs);
-  const setup = attr => node.addEventListener(attr, attrs[attr]);
-  const teardown = attr => node.removeEventListener(attr, attrs[attr]);
-  attrKeys.forEach(setup);
-  return {
-    update(attrs2 = {}) {
-      const attrKeys2 = Object.keys(attrs2);
-      attrKeys2.forEach(teardown);
-      attrKeys2.forEach(setup);
-    },
-    destroy() {
-      attrKeys.forEach(teardown);
-    }
-  };
-}
-export { filterAttrs, setAttrs }

package/lib/browser/commonjs/blocks/image/component-info.js.flow

@@ -1,122 +0,0 @@
-const componentInfo = {
-  name: "Image",
-  static: true,
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
-  defaultStyles: {
-    position: "relative",
-    minHeight: "20px",
-    minWidth: "20px",
-    overflow: "hidden"
-  },
-  canHaveChildren: true,
-  inputs: [{
-    name: "image",
-    type: "file",
-    bubble: true,
-    allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
-    required: true,
-    defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
-    onChange: options => {
-      const DEFAULT_ASPECT_RATIO = 0.7041;
-      options.delete("srcset");
-      options.delete("noWebp");
-      function loadImage(url, timeout = 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/lib/browser/commonjs/blocks/image/image.helpers.js.flow

@@ -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/lib/browser/commonjs/blocks/image/image.js.flow

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { Image as ReactImage, View } from 'react-native';
-
-// Subset of Image props, many are irrelevant for native (such as altText, etc)
-/**
- * @typedef {{
- *   image: string;
- *   backgroundSize?: 'cover' | 'contain';
- *   backgroundPosition?: string;
- *   aspectRatio?: number;
- *   width?: number;
- *   height?: number;
- *   children?: any;
- * }} ImageProps
- */
-
-// TODO: support children by wrapping in a View
-/**
- * @param {ImageProps} props
- */
-export default function Image(props) {
-  const shouldRenderUnwrappedChildren =
-    props.fitContent && props.builderBlock?.children?.length;
-
-  const imageStyle = props.aspectRatio
-    ? {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-      }
-    : {
-        position: 'relative',
-        ...(props.width ? { width: props.width } : {}),
-        ...(props.height ? { height: props.height } : {}),
-      };
-
-  return (
-    <>
-      <React.Fragment>
-        <ReactImage
-          resizeMode={props.backgroundSize || 'contain'}
-          style={imageStyle}
-          source={{ uri: props.image }}
-        />
-        {props.aspectRatio && !shouldRenderUnwrappedChildren ? (
-          <View
-            style={{
-              width: '100%',
-              paddingTop: props.aspectRatio * 100 + '%',
-            }}
-          />
-        ) : null}
-      </React.Fragment>
-
-      {shouldRenderUnwrappedChildren && props.children}
-
-      {!props.fitContent && props.children && (
-        // When `fitContent: false`, we wrap image children ssuch that they stretch across the entire image
-        <View
-          css={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            width: '100%',
-            height: '100%',
-          }}
-        >
-          {props.children}
-        </View>
-      )}
-    </>
-  );
-}

package/lib/browser/commonjs/blocks/img/component-info.js.flow

@@ -1,15 +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", "gif", "webp"],
-    required: true
-  }],
-  noWrap: true,
-  static: true
-};
-export { componentInfo }

package/lib/browser/commonjs/blocks/img/img.js.flow

@@ -1,29 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { isEditing } from "../../functions/is-editing.js";
-import { filterAttrs } from "../helpers.js";
-
-function ImgComponent(props) {
-  return (
-    <View
-      style={{
-        objectFit: props.backgroundSize || "cover",
-        objectPosition: props.backgroundPosition || "center",
-      }}
-      key={(isEditing() && props.imgSrc) || "default-key"}
-      alt={props.altText}
-      src={props.imgSrc || props.image}
-      {...{}}
-      {...props.attributes}
-    />
-  );
-}
-
-export default ImgComponent;

package/lib/browser/commonjs/blocks/input/component-info.js.flow

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