@builder.io/sdk-react-native 1.0.33 → 1.0.34

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

@@ -0,0 +1,233 @@
+import type { ComponentInfo } from '../../../types/components';
+export const componentInfo: 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,
+    // TODO: required: () => options.get("sendSubmissionsTo") === "email"
+    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/src/blocks/form/form/form.tsx

@@ -0,0 +1,324 @@
+import * as React from "react";
+import BaseText from "../../blocks/BaseText";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState, useRef } from "react";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */
+
+export type FormProps = BuilderDataProps &
+  BuilderComponentsProp &
+  BuilderLinkComponentProp & {
+    attributes?: any;
+    name?: string;
+    action?: string;
+    validate?: boolean;
+    method?: string;
+    sendSubmissionsTo?: string;
+    sendSubmissionsToEmail?: string;
+    sendWithJs?: boolean;
+    contentType?: string;
+    customHeaders?: {
+      [key: string]: string;
+    };
+    successUrl?: string;
+    previewState?: FormState;
+    successMessage?: BuilderBlock[];
+    errorMessage?: BuilderBlock[];
+    sendingMessage?: BuilderBlock[];
+    resetFormOnSubmit?: boolean;
+    errorMessagePath?: string;
+  };
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */
+
+export type FormState = "unsubmitted" | "sending" | "success" | "error";
+import Block from "../../../components/block/block";
+import Blocks from "../../../components/blocks/blocks";
+import { getEnv } from "../../../functions/get-env";
+import { get } from "../../../functions/get";
+import { isEditing } from "../../../functions/is-editing";
+import { set } from "../../../functions/set";
+import type { BuilderBlock } from "../../../types/builder-block";
+import type {
+  BuilderComponentsProp,
+  BuilderDataProps,
+  BuilderLinkComponentProp,
+} from "../../../types/builder-props";
+import type { Dictionary } from "../../../types/typescript";
+import { filterAttrs } from "../../helpers";
+import { setAttrs } from "../../helpers";
+
+function FormComponent(props: FormProps) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const [formState, setFormState] = useState(() => "unsubmitted");
+
+  const [responseData, setResponseData] = useState(() => null);
+
+  const [formErrorMessage, setFormErrorMessage] = useState(() => "");
+
+  function mergeNewRootState(newData: Dictionary<any>) {
+    const combinedState = {
+      ...props.builderContext.rootState,
+      ...newData,
+    };
+    if (props.builderContext.rootSetState) {
+      props.builderContext.rootSetState?.(combinedState);
+    } else {
+      props.builderContext.rootState = combinedState;
+    }
+  }
+
+  function submissionState() {
+    return (isEditing() && props.previewState) || formState;
+  }
+
+  function onSubmit(event: any) {
+    const sendWithJsProp =
+      props.sendWithJs || props.sendSubmissionsTo === "email";
+    if (props.sendSubmissionsTo === "zapier") {
+      event.preventDefault();
+    } else if (sendWithJsProp) {
+      if (!(props.action || props.sendSubmissionsTo === "email")) {
+        event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      const el = event.currentTarget || event.target;
+      const headers = props.customHeaders || {};
+      let body: any;
+      const formData = new FormData(el);
+
+      // TODO: maybe support null
+      const formPairs: {
+        key: string;
+        value: File | boolean | number | string | FileList;
+      }[] = Array.from(el.querySelectorAll("input,select,textarea"))
+        .filter((el) => !!(el as HTMLInputElement).name)
+        .map((el) => {
+          let value: any;
+          const key = (el as HTMLImageElement).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 as HTMLInputElement).value;
+          }
+          return {
+            key,
+            value,
+          };
+        });
+      let formContentType = props.contentType;
+      if (props.sendSubmissionsTo === "email") {
+        formContentType = "multipart/form-data";
+      }
+      Array.from(formPairs).forEach(({ value }) => {
+        if (
+          value instanceof File ||
+          (Array.isArray(value) && value[0] instanceof File) ||
+          value instanceof FileList
+        ) {
+          formContentType = "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 (formContentType !== "application/json") {
+        body = formData;
+      } else {
+        // Json
+        const json = {};
+        Array.from(formPairs).forEach(({ value, key }) => {
+          set(json, key, value);
+        });
+        body = JSON.stringify(json);
+      }
+      if (formContentType && formContentType !== "multipart/form-data") {
+        if (
+          /* Zapier doesn't allow content-type header to be sent from browsers */ !(
+            sendWithJsProp && props.action?.includes("zapier.com")
+          )
+        ) {
+          headers["content-type"] = formContentType;
+        }
+      }
+      const presubmitEvent = new CustomEvent("presubmit", { detail: { body } });
+      if (formRef.current) {
+        formRef.current.dispatchEvent(presubmitEvent);
+        if (presubmitEvent.defaultPrevented) {
+          return;
+        }
+      }
+      setFormState("sending");
+      const formUrl = `${
+        getEnv() === "dev" ? "http://localhost:5000" : "https://builder.io"
+      }/api/v1/form-submit?apiKey=${props.builderContext.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);
+              mergeNewRootState({ formErrorMessage: 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");
+        }
+      );
+    }
+  }
+  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, idx) => (
+            <Block
+              key={`form-block-${idx}`}
+              block={block}
+              context={props.builderContext}
+              registeredComponents={props.builderComponents}
+              linkComponent={props.builderLinkComponent}
+            />
+          ))}
+        </>
+      ) : null}
+      {submissionState() === "error" ? (
+        <Blocks
+          path="errorMessage"
+          blocks={props.errorMessage!}
+          context={props.builderContext}
+        />
+      ) : null}
+      {submissionState() === "sending" ? (
+        <Blocks
+          path="sendingMessage"
+          blocks={props.sendingMessage!}
+          context={props.builderContext}
+        />
+      ) : null}
+      {submissionState() === "error" && responseData ? (
+        <View style={styles.view1}>
+          <BaseText>{JSON.stringify(responseData, null, 2)}</BaseText>
+        </View>
+      ) : null}
+      {submissionState() === "success" ? (
+        <Blocks
+          path="successMessage"
+          blocks={props.successMessage!}
+          context={props.builderContext}
+        />
+      ) : null}
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  view1: { padding: 10, color: "red", textAlign: "center" },
+});
+export default FormComponent;

package/src/blocks/form/form/index.ts

@@ -0,0 +1 @@
+export { default } from './form'

package/src/blocks/form/input/component-info.ts

@@ -0,0 +1,47 @@
+import type { ComponentInfo } from '../../../types/components';
+export const componentInfo: 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'
+  },
+  // TODO: handle value vs default value automatically like ng-model
+  {
+    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'
+  }
+}

package/src/blocks/form/input/index.ts

@@ -0,0 +1 @@
+export { default } from './input'

package/src/blocks/form/input/input.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */
+
+export interface FormInputProps {
+  type?: string;
+  attributes?: any;
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  defaultValue?: string;
+  required?: boolean;
+}
+
+import { isEditing } from "../../../functions/is-editing";
+import { filterAttrs } from "../../helpers";
+import { setAttrs } from "../../helpers";
+
+function FormInputComponent(props: FormInputProps) {
+  return (
+    <TextInput
+      {...{}}
+      {...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}
+    />
+  );
+}
+
+export default FormInputComponent;

package/src/blocks/form/select/component-info.ts

@@ -0,0 +1,44 @@
+import type { ComponentInfo } from '../../../types/components';
+export const componentInfo: ComponentInfo = {
+  name: 'Form:Select',
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',
+  defaultStyles: {
+    alignSelf: 'flex-start'
+  },
+  inputs: [{
+    name: 'options',
+    type: 'list',
+    required: true,
+    subFields: [{
+      name: 'value',
+      type: 'text',
+      required: true
+    }, {
+      name: 'name',
+      type: 'text'
+    }],
+    defaultValue: [{
+      value: 'option 1'
+    }, {
+      value: 'option 2'
+    }]
+  }, {
+    name: 'name',
+    type: 'string',
+    required: true,
+    helperText: 'Every select in a form needs a unique name describing what it gets, e.g. "email"'
+  }, {
+    name: 'defaultValue',
+    type: 'string'
+  }, {
+    name: 'value',
+    type: 'string',
+    advanced: true
+  }, {
+    name: 'required',
+    type: 'boolean',
+    defaultValue: false
+  }],
+  static: true,
+  noWrap: true
+}