@builder.io/sdk-react 0.2.1 → 0.2.2

package/src/blocks/form/form.jsx

@@ -1,253 +0,0 @@
-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/src/blocks/fragment/component-info.js

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

package/src/blocks/fragment/fragment.jsx

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

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

@@ -1,151 +0,0 @@
-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/src/blocks/image/image.helpers.js

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

@@ -1,122 +0,0 @@
-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-35d6dc22"
-            }
-            src={props.image}
-            srcSet={srcSetToUse()}
-            sizes={props.sizes}
-          />
-
-          <source srcSet={srcSetToUse()} />
-        </picture>
-
-        {props.aspectRatio &&
-        !(props.builderBlock?.children?.length && props.fitContent) ? (
-          <>
-            <div
-              className="builder-image-sizer div-35d6dc22"
-              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-35d6dc22-2">{props.children}</div>
-          </>
-        ) : null}
-      </>
-      <style>{`.img-35d6dc22 {
-opacity: 1;
-transition: opacity 0.2s ease-in-out;
-}.div-35d6dc22 {
-width: 100%;
-pointer-events: none;
-font-size: 0;
-}.div-35d6dc22-2 {
-display: flex;
-flex-direction: column;
-align-items: stretch;
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%;
-}`}</style>
-    </>
-  );
-}

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

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

@@ -1,17 +0,0 @@
-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}
-    />
-  );
-}