@builder.io/sdk-react 0.2.3-4 → 0.3.1

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

@@ -1,261 +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/packages/rsc/src/blocks/form/form.jsx

@@ -1,260 +0,0 @@
-import * as React from "react";
-import RenderBlock from "../../components/render-block/render-block";
-import BuilderBlocks from "../../components/render-blocks";
-import { isEditing } from "../../functions/is-editing.js";
-
-function FormComponent(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    formState: "unsubmitted",
-    responseData: null,
-    formErrorMessage: "",
-    get submissionState() {
-      return (isEditing() && props.previewState) || state.formState;
-    },
-    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) {
-          formRef.dispatchEvent(presubmitEvent);
-          if (presubmitEvent.defaultPrevented) {
-            return;
-          }
-        }
-        state.formState = "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);
-                }
-                state.formErrorMessage = message;
-              }
-            }
-            state.responseData = body;
-            state.formState = res.ok ? "success" : "error";
-            if (res.ok) {
-              const submitSuccessEvent = new CustomEvent("submit:success", {
-                detail: { res, body },
-              });
-              if (formRef) {
-                formRef.dispatchEvent(submitSuccessEvent);
-                if (submitSuccessEvent.defaultPrevented) {
-                  return;
-                }
-                /* TODO: option to turn this on/off? */ if (
-                  props.resetFormOnSubmit !== false
-                ) {
-                  formRef.reset();
-                }
-              }
-              /* TODO: client side route event first that can be preventDefaulted */ if (
-                props.successUrl
-              ) {
-                if (formRef) {
-                  const event = new CustomEvent("route", {
-                    detail: { url: props.successUrl },
-                  });
-                  formRef.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) {
-              formRef.dispatchEvent(submitErrorEvent);
-              if (submitErrorEvent.defaultPrevented) {
-                return;
-              }
-            }
-            state.responseData = err;
-            state.formState = "error";
-          }
-        );
-      }
-    },
-  };
-  const builderContext = _context["BuilderContext"];
-  return (
-    <>
-      {" "}
-      <form
-        validate={props.validate}
-        action={!props.sendWithJs && props.action}
-        method={props.method}
-        name={props.name}
-        {...props.attributes}
-      >
-        {" "}
-        {props.builderBlock && props.builderBlock.children ? (
-          <>
-            {props.builderBlock?.children?.map((block) => (
-              <RenderBlock
-                block={block}
-                context={builderContext}
-                _context={_context}
-              />
-            ))}
-          </>
-        ) : null}{" "}
-        {state.submissionState === "error" ? (
-          <>
-            <BuilderBlocks
-              dataPath="errorMessage"
-              blocks={props.errorMessage}
-              _context={_context}
-            />
-          </>
-        ) : null}{" "}
-        {state.submissionState === "sending" ? (
-          <>
-            <BuilderBlocks
-              dataPath="sendingMessage"
-              blocks={props.sendingMessage}
-              _context={_context}
-            />
-          </>
-        ) : null}{" "}
-        {state.submissionState === "error" && state.responseData ? (
-          <>
-            <pre className="builder-form-error-text pre-1adaf299">
-              {" "}
-              {JSON.stringify(state.responseData, null, 2)}{" "}
-            </pre>
-          </>
-        ) : null}{" "}
-        {state.submissionState === "success" ? (
-          <>
-            <BuilderBlocks
-              dataPath="successMessage"
-              blocks={props.successMessage}
-              _context={_context}
-            />
-          </>
-        ) : null}{" "}
-      </form>{" "}
-      <style>{`.pre-1adaf299 { padding: 10px; color: red; text-align: center; }`}</style>{" "}
-    </>
-  );
-}
-export default FormComponent;

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

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

package/packages/rsc/src/blocks/fragment/fragment.jsx

@@ -1,9 +0,0 @@
-import * as React from "react";
-
-function FragmentComponent(props) {
-  const _context = { ...props["_context"] };
-
-  return <span>{props.children}</span>;
-}
-
-export default FragmentComponent;

package/packages/rsc/src/blocks/image/component-info.js

@@ -1,150 +0,0 @@
-import { serializeFn } from "../util.js";
-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: serializeFn((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
-};