@builder.io/sdk-react 0.1.1 → 0.1.3

package/packages/react/src/blocks/form/form.jsx

@@ -0,0 +1,253 @@
+import * as React from "react";
+import { useState, useContext, useRef } from "react";
+import RenderBlock from "../../components/render-block/render-block.js";
+import BuilderBlocks from "../../components/render-blocks.js";
+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 (
+    <>
+      {" "}
+      <form
+        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 ? (
+          <>
+            <pre className="builder-form-error-text pre-4bdc7532">
+              {" "}
+              {JSON.stringify(responseData, null, 2)}{" "}
+            </pre>
+          </>
+        ) : null}{" "}
+        {submissionState() === "success" ? (
+          <>
+            <BuilderBlocks
+              dataPath="successMessage"
+              blocks={props.successMessage}
+            />
+          </>
+        ) : null}{" "}
+      </form>{" "}
+      <style>{`.pre-4bdc7532 { padding: 10px; color: red; text-align: center; }`}</style>{" "}
+    </>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,151 @@
+import { serializeFn } from "../util.js";
+const componentInfo = {
+  name: "Image",
+  static: true,
+  builtIn: 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%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+      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
+};

package/packages/react/src/blocks/image/image.helpers.js

@@ -0,0 +1,48 @@
+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/packages/react/src/blocks/image/image.jsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { getSrcSet } from "./image.helpers.js";
+
+export default function Image(props) {
+  function srcSetToUse() {
+    const imageToUse = props.image || props.src;
+    const url = imageToUse;
+    if (
+      !url ||
+      // We can auto add srcset for cdn.builder.io and shopify
+      // images, otherwise you can supply this prop manually
+      !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))
+    ) {
+      return props.srcset;
+    }
+    if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
+      if (!props.srcset.includes(props.image.split("?")[0])) {
+        console.debug("Removed given srcset");
+        return getSrcSet(url);
+      }
+    } else if (props.image && !props.srcset) {
+      return getSrcSet(url);
+    }
+    return getSrcSet(url);
+  }
+
+  function webpSrcSet() {
+    if (srcSetToUse?.()?.match(/builder\.io/) && !props.noWebp) {
+      return srcSetToUse().replace(/\?/g, "?format=webp&");
+    } else {
+      return "";
+    }
+  }
+
+  function aspectRatioCss() {
+    const aspectRatioStyles = {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      left: "0px",
+      top: "0px",
+    };
+    const out = props.aspectRatio ? aspectRatioStyles : undefined;
+    return out;
+  }
+
+  return (
+    <>
+      <>
+        <picture>
+          {webpSrcSet() ? (
+            <>
+              <source type="image/webp" srcSet={webpSrcSet()} />
+            </>
+          ) : null}
+
+          <img
+            loading="lazy"
+            alt={props.altText}
+            role={props.altText ? "presentation" : undefined}
+            style={{
+              objectPosition: props.backgroundPosition || "center",
+              objectFit: props.backgroundSize || "cover",
+              ...aspectRatioCss(),
+            }}
+            className={
+              "builder-image" +
+              (props.className ? " " + props.className : "") +
+              " img-72859b6f"
+            }
+            src={props.image}
+            srcSet={srcSetToUse()}
+            sizes={props.sizes}
+          />
+        </picture>
+
+        {props.aspectRatio &&
+        !(props.builderBlock?.children?.length && props.fitContent) ? (
+          <>
+            <div
+              className="builder-image-sizer div-72859b6f"
+              style={{
+                paddingTop:
+                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                  props.aspectRatio * 100 + "%",
+              }}
+            />
+          </>
+        ) : null}
+
+        {props.builderBlock?.children?.length && props.fitContent ? (
+          <>{props.children}</>
+        ) : null}
+
+        {!props.fitContent && props.children ? (
+          <>
+            <div className="div-72859b6f-2">{props.children}</div>
+          </>
+        ) : null}
+      </>
+      <style>{`.img-72859b6f {
+opacity: 1;
+transition: opacity 0.2s ease-in-out;
+}.div-72859b6f {
+width: 100%;
+pointer-events: none;
+font-size: 0;
+}.div-72859b6f-2 {
+display: flex;
+flex-direction: column;
+align-items: stretch;
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+}`}</style>
+    </>
+  );
+}

package/packages/react/src/blocks/img/component-info.js

@@ -0,0 +1,20 @@
+const componentInfo = {
+  name: "Raw:Img",
+  hideFromInsertMenu: true,
+  builtIn: 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"],
+      required: true
+    }
+  ],
+  noWrap: true,
+  static: true
+};
+export {
+  componentInfo
+};

package/packages/react/src/blocks/img/img.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { isEditing } from "../../functions/is-editing.js";
+
+export default function ImgComponent(props) {
+  return (
+    <img
+      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}
+    />
+  );
+}