@builder.io/sdk-react 0.1.1 → 0.1.3

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.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/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/image.jsx

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

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { isEditing } from "../../functions/is-editing.js";
+
+export default function FormInputComponent(props) {
+  const _context = { ...props["_context"] };
+
+  return (
+    <input
+      {...props.attributes}
+      key={
+        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
+      }
+      placeholder={props.placeholder}
+      type={props.type}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+      required={props.required}
+    />
+  );
+}

package/packages/_rsc/src/blocks/raw-text/raw-text.jsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export default function RawText(props) {
+  const _context = { ...props["_context"] };
+
+  return (
+    <span
+      className={props.attributes?.class || props.attributes?.className}
+      dangerouslySetInnerHTML={{ __html: props.text || "" }}
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+export default function SectionComponent(props) {
+  const _context = { ...props["_context"] };
+
+  return (
+    <section
+      {...props.attributes}
+      style={{
+        width: "100%",
+        alignSelf: "stretch",
+        flexGrow: "1",
+        boxSizing: "border-box",
+        maxWidth: `${
+          props.maxWidth && typeof props.maxWidth === "number"
+            ? props.maxWidth
+            : 1200
+        }px`,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        marginLeft: "auto",
+        marginRight: "auto",
+      }}
+    >
+      {props.children}
+    </section>
+  );
+}

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { isEditing } from "../../functions/is-editing.js";
+
+export default function SelectComponent(props) {
+  const _context = { ...props["_context"] };
+
+  return (
+    <select
+      {...props.attributes}
+      value={props.value}
+      key={
+        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
+      }
+      defaultValue={props.defaultValue}
+      name={props.name}
+    >
+      {props.options?.map((option) => (
+        <option value={option.value}>{option.name || option.value}</option>
+      ))}
+    </select>
+  );
+}

package/packages/_rsc/src/blocks/submit-button/submit-button.jsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export default function SubmitButton(props) {
+  const _context = { ...props["_context"] };
+
+  return (
+    <button type="submit" {...props.attributes}>
+      {props.text}
+    </button>
+  );
+}

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

@@ -0,0 +1,56 @@
+import * as React from "react";
+import RenderContent from "../../components/render-content/render-content.js";
+import BuilderContext from "../../context/builder.context.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { TARGET } from "../../constants/target";
+
+export default function Symbol(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    get className() {
+      return [
+        ...(TARGET === "vue2" || TARGET === "vue3"
+          ? Object.keys(props.attributes.class)
+          : [props.attributes.class]),
+        "builder-symbol",
+        props.symbol?.inline ? "builder-inline-symbol" : undefined,
+        props.symbol?.dynamic || props.dynamic
+          ? "builder-dynamic-symbol"
+          : undefined,
+      ]
+        .filter(Boolean)
+        .join(" ");
+    },
+    fetchedContent: null,
+    get contentToUse() {
+      return props.symbol?.content || state.fetchedContent;
+    },
+  };
+
+  const builderContext = _context["BuilderContext"];
+
+  return (
+    <div
+      {...props.attributes}
+      dataSet={{
+        class: state.className,
+      }}
+      className={state.className}
+    >
+      <RenderContent
+        apiKey={builderContext.apiKey}
+        context={builderContext.context}
+        customComponents={Object.values(builderContext.registeredComponents)}
+        data={{
+          ...props.symbol?.data,
+          ...builderContext.state,
+          ...props.symbol?.content?.data?.state,
+        }}
+        model={props.symbol?.model}
+        content={state.contentToUse}
+        _context={_context}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export default function Text(props) {
+  const _context = { ...props["_context"] };
+
+  return (
+    <span
+      className="builder-text"
+      dangerouslySetInnerHTML={{ __html: props.text }}
+    />
+  );
+}

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export default function Textarea(props) {
+  const _context = { ...props["_context"] };
+
+  return (
+    <textarea
+      {...props.attributes}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+    />
+  );
+}

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

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+export default function Video(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    get videoProps() {
+      return {
+        ...(props.autoPlay === true
+          ? {
+              autoPlay: true,
+            }
+          : {}),
+        ...(props.muted === true
+          ? {
+              muted: true,
+            }
+          : {}),
+        ...(props.controls === true
+          ? {
+              controls: true,
+            }
+          : {}),
+        ...(props.loop === true
+          ? {
+              loop: true,
+            }
+          : {}),
+        ...(props.playsInline === true
+          ? {
+              playsInline: true,
+            }
+          : {}),
+      };
+    },
+    get spreadProps() {
+      return {
+        ...props.attributes,
+        ...state.videoProps,
+      };
+    },
+  };
+
+  return (
+    <video
+      {...state.spreadProps}
+      style={{
+        width: "100%",
+        height: "100%",
+        ...props.attributes?.style,
+        objectFit: props.fit,
+        objectPosition: props.position,
+        // Hack to get object fit to work as expected and
+        // not have the video overflow
+        borderRadius: 1,
+      }}
+      src={props.video || "no-src"}
+      poster={props.posterImage}
+    />
+  );
+}