@builder.io/sdk-react-native 0.0.1-50 → 0.0.1-53

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

@@ -0,0 +1,263 @@
+import * as React from 'react';
+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"
+        }
+      }
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/form/form.js

@@ -0,0 +1,221 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import * as React from "react";
+import { View, StyleSheet, Text } from "react-native";
+import { useState, useRef } from "react";
+import RenderBlock from "../../components/render-block/render-block.js";
+import { isEditing } from "../../functions/is-editing.js";
+function FormComponent(props) {
+  var _a, _b;
+  const [formState, setFormState] = useState(() => "unsubmitted");
+  const [responseData, setResponseData] = useState(() => null);
+  const [formErrorMessage, setFormErrorMessage] = useState(() => "");
+  function submissionState() {
+    return isEditing() && props.previewState || formState;
+  }
+  function onSubmit(event) {
+    var _a2;
+    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);
+      const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea")).filter((el2) => !!el2.name).map((el2) => {
+        let value;
+        const key = el2.name;
+        if (el2 instanceof HTMLInputElement) {
+          if (el2.type === "radio") {
+            if (el2.checked) {
+              value = el2.name;
+              return {
+                key,
+                value
+              };
+            }
+          } else if (el2.type === "checkbox") {
+            value = el2.checked;
+          } else if (el2.type === "number" || el2.type === "range") {
+            const num = el2.valueAsNumber;
+            if (!isNaN(num)) {
+              value = num;
+            }
+          } else if (el2.type === "file") {
+            value = el2.files;
+          } else {
+            value = el2.value;
+          }
+        } else {
+          value = el2.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";
+        }
+      });
+      if (contentType !== "application/json") {
+        body = formData;
+      } else {
+        const json = {};
+        Array.from(formPairs).forEach(({ value, key }) => {
+          set(json, key, value);
+        });
+        body = JSON.stringify(json);
+      }
+      if (contentType && contentType !== "multipart/form-data") {
+        if (!(sendWithJs && ((_a2 = props.action) == null ? void 0 : _a2.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, { body, headers, method: props.method || "post" }).then((res) => __async(this, null, function* () {
+        let body2;
+        const contentType2 = res.headers.get("content-type");
+        if (contentType2 && contentType2.indexOf("application/json") !== -1) {
+          body2 = yield res.json();
+        } else {
+          body2 = yield res.text();
+        }
+        if (!res.ok && props.errorMessagePath) {
+          let message = get(body2, props.errorMessagePath);
+          if (message) {
+            if (typeof message !== "string") {
+              message = JSON.stringify(message);
+            }
+            setFormErrorMessage(message);
+          }
+        }
+        setResponseData(body2);
+        setFormState(res.ok ? "success" : "error");
+        if (res.ok) {
+          const submitSuccessEvent = new CustomEvent("submit:success", {
+            detail: { res, body: body2 }
+          });
+          if (formRef.current) {
+            formRef.current.dispatchEvent(submitSuccessEvent);
+            if (submitSuccessEvent.defaultPrevented) {
+              return;
+            }
+            if (props.resetFormOnSubmit !== false) {
+              formRef.current.reset();
+            }
+          }
+          if (props.successUrl) {
+            if (formRef.current) {
+              const event2 = new CustomEvent("route", {
+                detail: { url: props.successUrl }
+              });
+              formRef.current.dispatchEvent(event2);
+              if (!event2.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 formRef = useRef();
+  return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+    validate: props.validate,
+    ref: formRef,
+    action: !props.sendWithJs && props.action,
+    method: props.method,
+    name: props.name,
+    onSubmit: (event) => onSubmit(event)
+  }), " ", props.builderBlock && props.builderBlock.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    block
+  }))) : null, " ", submissionState() === "error" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
+    dataPath: "errorMessage",
+    blocks: props.errorMessage
+  })) : null, " ", submissionState() === "sending" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
+    dataPath: "sendingMessage",
+    blocks: props.sendingMessage
+  })) : null, " ", submissionState() === "error" && responseData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
+    style: styles.view1
+  }, " ", /* @__PURE__ */ React.createElement(Text, null, JSON.stringify(responseData, null, 2)), " ")) : null, " ", submissionState() === "success" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
+    dataPath: "successMessage",
+    blocks: props.successMessage
+  })) : null, " ");
+}
+const styles = StyleSheet.create({
+  view1: { padding: 10, color: "red", textAlign: "center" }
+});
+export {
+  FormComponent as default
+};

package/src/blocks/{form.lite.tsx → form/form.lite.tsx}

@@ -1,17 +1,18 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useRef } from "react";
-import RenderBlock from "../components/render-block.lite";
+import RenderBlock from "../../components/render-block/render-block.lite";
+import { isEditing } from "../../functions/is-editing.js";
 
 export default function FormComponent(props) {
-  const [state, setState] = useState(() => "unsubmitted");
+  const [formState, setFormState] = useState(() => "unsubmitted");
 
   const [responseData, setResponseData] = useState(() => null);
 
   const [formErrorMessage, setFormErrorMessage] = useState(() => "");
 
   function submissionState() {
-    return (Builder.isEditing && props.previewState) || state;
+    return (isEditing() && props.previewState) || formState;
   }
 
   function onSubmit(event) {
@@ -116,7 +117,7 @@ export default function FormComponent(props) {
           return;
         }
       }
-      setState("sending");
+      setFormState("sending");
       const formUrl = `${
         builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"
       }/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(
@@ -148,7 +149,7 @@ export default function FormComponent(props) {
             }
           }
           setResponseData(body);
-          setState(res.ok ? "success" : "error");
+          setFormState(res.ok ? "success" : "error");
           if (res.ok) {
             const submitSuccessEvent = new CustomEvent("submit:success", {
               detail: { res, body },
@@ -192,7 +193,7 @@ export default function FormComponent(props) {
             }
           }
           setResponseData(err);
-          setState("error");
+          setFormState("error");
         }
       );
     }
@@ -211,7 +212,7 @@ export default function FormComponent(props) {
       {" "}
       {props.builderBlock && props.builderBlock.children ? (
         <>
-          {props.builderBlock?.children?.map((block, index) => (
+          {props.builderBlock?.children?.map((block) => (
             <RenderBlock block={block} />
           ))}
         </>

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Fragment",
+  static: true,
+  hidden: true,
+  builtIn: true,
+  canHaveChildren: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/fragment/fragment.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+function FragmentComponent(props) {
+  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, props.children));
+}
+export {
+  FragmentComponent as default
+};

package/src/blocks/{image.js → image/component-info.js}

@@ -1,43 +1,5 @@
 import * as React from 'react';
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-import { Image as ReactImage, View } from "react-native";
-import { registerComponent } from "../functions/register-component";
-function Image(props) {
-  return props.aspectRatio ? /* @__PURE__ */ React.createElement(View, {
-    style: { position: "relative" }
-  }, /* @__PURE__ */ React.createElement(ReactImage, {
-    resizeMode: props.backgroundSize || "contain",
-    style: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0 },
-    source: { uri: props.image }
-  }), /* @__PURE__ */ React.createElement(View, {
-    style: {
-      width: "100%",
-      paddingTop: props.aspectRatio * 100 + "%"
-    }
-  })) : /* @__PURE__ */ React.createElement(ReactImage, {
-    resizeMode: props.backgroundSize || "contain",
-    style: __spreadValues(__spreadValues({
-      position: "relative"
-    }, props.width ? { width: props.width } : {}), props.height ? { height: props.height } : {}),
-    source: { uri: props.image }
-  });
-}
-registerComponent(Image, {
+const componentInfo = {
   name: "Image",
   static: true,
   builtIn: true,
@@ -72,7 +34,7 @@ registerComponent(Image, {
         {
           label: "cover",
           value: "cover",
-          helperText: `The image should fill it's box, cropping when needed`
+          helperText: "The image should fill it's box, cropping when needed"
         }
       ]
     },
@@ -137,7 +99,7 @@ registerComponent(Image, {
       defaultValue: 0.7041
     }
   ]
-});
+};
 export {
-  Image as default
+  componentInfo
 };

package/src/blocks/image/image.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { Image as ReactImage, View } from "react-native";
+function Image(props) {
+  return props.aspectRatio ? /* @__PURE__ */ React.createElement(View, {
+    style: { position: "relative" }
+  }, /* @__PURE__ */ React.createElement(ReactImage, {
+    resizeMode: props.backgroundSize || "contain",
+    style: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0 },
+    source: { uri: props.image }
+  }), /* @__PURE__ */ React.createElement(View, {
+    style: {
+      width: "100%",
+      paddingTop: props.aspectRatio * 100 + "%"
+    }
+  })) : /* @__PURE__ */ React.createElement(ReactImage, {
+    resizeMode: props.backgroundSize || "contain",
+    style: __spreadValues(__spreadValues({
+      position: "relative"
+    }, props.width ? { width: props.width } : {}), props.height ? { height: props.height } : {}),
+    source: { uri: props.image }
+  });
+}
+export {
+  Image as default
+};

package/src/blocks/{image.lite.tsx → image/image.lite.tsx}

@@ -8,7 +8,7 @@ export default function Image(props) {
         <View
           loading="lazy"
           alt={props.altText}
-          aria-role={props.altText ? "presentation" : undefined}
+          role={props.altText ? "presentation" : undefined}
           style={styles.view2}
           src={props.image}
           srcset={props.srcset}