@builder.io/sdk-react 0.1.3 → 0.1.5

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

@@ -1,259 +0,0 @@
-import * as React 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 _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

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

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

@@ -1,7 +0,0 @@
-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

@@ -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/packages/_rsc/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/packages/_rsc/src/blocks/image/image.jsx

@@ -1,124 +0,0 @@
-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-03c4fd62"
-            }
-            src={props.image}
-            srcSet={state.srcSetToUse}
-            sizes={props.sizes}
-          />
-
-          <source srcSet={state.srcSetToUse} />
-        </picture>
-
-        {props.aspectRatio &&
-        !(props.builderBlock?.children?.length && props.fitContent) ? (
-          <>
-            <div
-              className="builder-image-sizer div-03c4fd62"
-              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-03c4fd62-2">{props.children}</div>
-          </>
-        ) : null}
-      </>
-      <style>{`.img-03c4fd62 {
-opacity: 1;
-transition: opacity 0.2s ease-in-out;
-}.div-03c4fd62 {
-width: 100%;
-pointer-events: none;
-font-size: 0;
-}.div-03c4fd62-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

@@ -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/packages/_rsc/src/blocks/img/img.jsx

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