@builder.io/sdk-react-native 0.1.2 → 0.1.4

package/src/blocks/columns/{columns.js → columns.jsx}

@@ -1,40 +1,50 @@
 import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import RenderBlocks from "../../components/render-blocks.js";
+import { View, StyleSheet, Image, Text } from "react-native";
+import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import RenderInlinedStyles from "../../components/render-inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
-function Columns(props) {
-  var _a;
+
+export default function Columns(props) {
   function getGutterSize() {
     return typeof props.space === "number" ? props.space || 0 : 20;
   }
+
   function getColumns() {
     return props.columns || [];
   }
+
   function getWidth(index) {
-    var _a2;
     const columns = getColumns();
-    return ((_a2 = columns[index]) == null ? void 0 : _a2.width) || 100 / columns.length;
+    return columns[index]?.width || 100 / columns.length;
   }
+
   function getColumnCssWidth(index) {
     const columns = getColumns();
     const gutterSize = getGutterSize();
-    const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
     return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
   }
+
   function maybeApplyForTablet(prop) {
     const _stackColumnsAt = props.stackColumnsAt || "tablet";
     return _stackColumnsAt === "tablet" ? prop : "inherit";
   }
+
   function columnsCssVars() {
-    const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
+    const flexDir =
+      props.stackColumnsAt === "never"
+        ? "inherit"
+        : props.reverseColumnsWhenStacked
+        ? "column-reverse"
+        : "column";
     return {
       "--flex-dir": flexDir,
-      "--flex-dir-tablet": maybeApplyForTablet(flexDir)
+      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
     };
   }
+
   function columnCssVars() {
     const width = "100%";
     const marginLeft = "0";
@@ -42,37 +52,42 @@ function Columns(props) {
       "--column-width": width,
       "--column-margin-left": marginLeft,
       "--column-width-tablet": maybeApplyForTablet(width),
-      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft)
+      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
     };
   }
+
   function getWidthForBreakpointSize(size) {
-    const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+    const breakpointSizes = getSizesForBreakpoints(
+      props.customBreakpoints || {}
+    );
     return breakpointSizes[size].max;
   }
+
   function columnStyleObjects() {
     return {
       columns: {
         small: {
           flexDirection: "var(--flex-dir)",
-          alignItems: "stretch"
+          alignItems: "stretch",
         },
         medium: {
           flexDirection: "var(--flex-dir-tablet)",
-          alignItems: "stretch"
-        }
+          alignItems: "stretch",
+        },
       },
       column: {
         small: {
           width: "var(--column-width) !important",
-          marginLeft: "var(--column-margin-left) !important"
+          marginLeft: "var(--column-margin-left) !important",
         },
         medium: {
           width: "var(--column-width-tablet) !important",
-          marginLeft: "var(--column-margin-left-tablet) !important"
-        }
-      }
+          marginLeft: "var(--column-margin-left-tablet) !important",
+        },
+      },
     };
   }
+
   function columnsStyles() {
     return `
       @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
@@ -96,32 +111,40 @@ function Columns(props) {
       },
     `;
   }
+
   function reactNativeColumnsStyles() {
     return columnStyleObjects.columns.small;
   }
+
   function reactNativeColumnStyles() {
     return columnStyleObjects.column.small;
   }
-  return /* @__PURE__ */ React.createElement(View, {
-    style: styles.view1
-  }, TARGET !== "reactNative" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
-    styles: columnsStyles()
-  })) : null, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement(View, {
-    style: styles.view2,
-    key: index
-  }, /* @__PURE__ */ React.createElement(RenderBlocks, {
-    blocks: column.blocks,
-    path: `component.options.columns.${index}.blocks`,
-    parent: props.builderBlock.id,
-    styleProp: {
-      flexGrow: "1"
-    }
-  }))));
+
+  return (
+    <View style={styles.view1}>
+      {TARGET !== "reactNative" ? (
+        <>
+          <RenderInlinedStyles styles={columnsStyles()} />
+        </>
+      ) : null}
+
+      {props.columns?.map((column, index) => (
+        <View style={styles.view2} key={index}>
+          <RenderBlocks
+            blocks={column.blocks}
+            path={`component.options.columns.${index}.blocks`}
+            parent={props.builderBlock.id}
+            styleProp={{
+              flexGrow: "1",
+            }}
+          />
+        </View>
+      ))}
+    </View>
+  );
 }
+
 const styles = StyleSheet.create({
   view1: { display: "flex" },
-  view2: { display: "flex", flexDirection: "column", alignItems: "stretch" }
+  view2: { display: "flex", flexDirection: "column", alignItems: "stretch" },
 });
-export {
-  Columns as default
-};

package/src/blocks/custom-code/{custom-code.js → custom-code.jsx}

@@ -1,12 +1,20 @@
 import * as React from "react";
-import { View } from "react-native";
+import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useRef, useEffect } from "react";
-function CustomCode(props) {
+
+export default function CustomCode(props) {
   const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
+
   const [scriptsRun, setScriptsRun] = useState(() => []);
+
   function findAndRunScripts() {
-    if (elem.current && elem.current.getElementsByTagName && typeof window !== "undefined") {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (
+      elem.current &&
+      elem.current.getElementsByTagName &&
+      typeof window !== "undefined"
+    ) {
       const scripts = elem.current.getElementsByTagName("script");
       for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];
@@ -19,11 +27,14 @@ function CustomCode(props) {
           newScript.async = true;
           newScript.src = script.src;
           document.head.appendChild(newScript);
-        } else if (!script.type || [
-          "text/javascript",
-          "application/javascript",
-          "application/ecmascript"
-        ].includes(script.type)) {
+        } else if (
+          !script.type ||
+          [
+            "text/javascript",
+            "application/javascript",
+            "application/ecmascript",
+          ].includes(script.type)
+        ) {
           if (scriptsRun.includes(script.innerText)) {
             continue;
           }
@@ -37,14 +48,10 @@ function CustomCode(props) {
       }
     }
   }
+
   useEffect(() => {
     findAndRunScripts();
   }, []);
-  return /* @__PURE__ */ React.createElement(View, {
-    ref: elem,
-    dangerouslySetInnerHTML: { __html: props.code }
-  });
+
+  return <View ref={elem} dangerouslySetInnerHTML={{ __html: props.code }} />;
 }
-export {
-  CustomCode as default
-};

package/src/blocks/embed/{embed.js → embed.jsx}

@@ -1,15 +1,18 @@
 import * as React from "react";
-import { View } from "react-native";
+import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useRef, useEffect } from "react";
 import { isJsScript } from "./helpers.js";
-function Embed(props) {
+
+export default 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;
+    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];
@@ -29,17 +32,15 @@ function Embed(props) {
       }
     }
   }
+
   useEffect(() => {
     if (elem.current && !ranInitFn) {
       setRanInitFn(true);
       findAndRunScripts();
     }
   }, [elem.current, ranInitFn]);
-  return /* @__PURE__ */ React.createElement(View, {
-    ref: elem,
-    dangerouslySetInnerHTML: { __html: props.content }
-  });
+
+  return (
+    <View ref={elem} dangerouslySetInnerHTML={{ __html: props.content }} />
+  );
 }
-export {
-  Embed as default
-};

package/src/blocks/form/form.jsx

@@ -0,0 +1,251 @@
+import BaseText from "../BaseText";
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+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";
+
+export default 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 (
+    <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 ? (
+        <>
+          {props.builderBlock?.children?.map((block) => (
+            <RenderBlock block={block} context={builderContext} />
+          ))}
+        </>
+      ) : null}{" "}
+      {submissionState() === "error" ? (
+        <>
+          <BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage} />
+        </>
+      ) : null}{" "}
+      {submissionState() === "sending" ? (
+        <>
+          <BuilderBlocks
+            dataPath="sendingMessage"
+            blocks={props.sendingMessage}
+          />
+        </>
+      ) : null}{" "}
+      {submissionState() === "error" && responseData ? (
+        <>
+          <View style={styles.view1}>
+            {" "}
+            <BaseText>{JSON.stringify(responseData, null, 2)}</BaseText>{" "}
+          </View>
+        </>
+      ) : null}{" "}
+      {submissionState() === "success" ? (
+        <>
+          <BuilderBlocks
+            dataPath="successMessage"
+            blocks={props.successMessage}
+          />
+        </>
+      ) : null}{" "}
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  view1: { padding: 10, color: "red", textAlign: "center" },
+});

package/src/blocks/fragment/fragment.jsx

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

package/src/blocks/image/image.jsx

@@ -0,0 +1,78 @@
+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/src/blocks/img/img.jsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { isEditing } from "../../functions/is-editing.js";
+
+export default 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}
+    />
+  );
+}

package/src/blocks/input/input.jsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { isEditing } from "../../functions/is-editing.js";
+
+export default function FormInputComponent(props) {
+  return (
+    <View
+      {...props.attributes}
+      key={
+        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
+      }
+      placeholder={props.placeholder}
+      type={props.type}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+      required={props.required}
+    />
+  );
+}

package/src/blocks/raw-text/raw-text.jsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+
+export default function RawText(props) {
+  return <View dangerouslySetInnerHTML={{ __html: props.text || "" }} />;
+}