@builder.io/sdk-react 0.1.2 → 0.1.4

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

@@ -0,0 +1,259 @@
+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";
+
+export default 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-105231da">
+              {" "}
+              {JSON.stringify(state.responseData, null, 2)}{" "}
+            </pre>
+          </>
+        ) : null}{" "}
+        {state.submissionState === "success" ? (
+          <>
+            <BuilderBlocks
+              dataPath="successMessage"
+              blocks={props.successMessage}
+              _context={_context}
+            />
+          </>
+        ) : null}{" "}
+      </form>{" "}
+      <style>{`.pre-105231da { padding: 10px; color: red; text-align: center; }`}</style>{" "}
+    </>
+  );
+}

package/packages/rsc/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/rsc/src/blocks/fragment/fragment.jsx

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

package/packages/rsc/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/rsc/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/rsc/src/blocks/image/image.jsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { getSrcSet } from "./image.helpers.js";
+
+export default function Image(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    get 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);
+    },
+    get webpSrcSet() {
+      if (state.srcSetToUse?.match(/builder\.io/) && !props.noWebp) {
+        return state.srcSetToUse.replace(/\?/g, "?format=webp&");
+      } else {
+        return "";
+      }
+    },
+    get aspectRatioCss() {
+      const aspectRatioStyles = {
+        position: "absolute",
+        height: "100%",
+        width: "100%",
+        left: "0px",
+        top: "0px",
+      };
+      const out = props.aspectRatio ? aspectRatioStyles : undefined;
+      return out;
+    },
+  };
+
+  return (
+    <>
+      <>
+        <picture>
+          {state.webpSrcSet ? (
+            <>
+              <source type="image/webp" srcSet={state.webpSrcSet} />
+            </>
+          ) : null}
+
+          <img
+            loading="lazy"
+            alt={props.altText}
+            role={props.altText ? "presentation" : undefined}
+            style={{
+              objectPosition: props.backgroundPosition || "center",
+              objectFit: props.backgroundSize || "cover",
+              ...state.aspectRatioCss,
+            }}
+            className={
+              "builder-image" +
+              (props.className ? " " + props.className : "") +
+              " img-d6cf1f9c"
+            }
+            src={props.image}
+            srcSet={state.srcSetToUse}
+            sizes={props.sizes}
+          />
+        </picture>
+
+        {props.aspectRatio &&
+        !(props.builderBlock?.children?.length && props.fitContent) ? (
+          <>
+            <div
+              className="builder-image-sizer div-d6cf1f9c"
+              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-d6cf1f9c-2">{props.children}</div>
+          </>
+        ) : null}
+      </>
+      <style>{`.img-d6cf1f9c {
+opacity: 1;
+transition: opacity 0.2s ease-in-out;
+}.div-d6cf1f9c {
+width: 100%;
+pointer-events: none;
+font-size: 0;
+}.div-d6cf1f9c-2 {
+display: flex;
+flex-direction: column;
+align-items: stretch;
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+}`}</style>
+    </>
+  );
+}

package/packages/rsc/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/rsc/src/blocks/img/img.jsx

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