@builder.io/sdk-react 0.2.3-3 → 0.2.3-4

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

@@ -0,0 +1,320 @@
+"use client";
+import * as React from "react";
+import { useState, useContext, useRef } from "react";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+/* eslint-disable */
+
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+interface BuilderElement {}
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+/* eslint-disable */
+
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+export interface FormProps {
+  attributes?: any;
+  name?: string;
+  action?: string;
+  validate?: boolean;
+  method?: string;
+  builderBlock?: BuilderElement;
+  sendSubmissionsTo?: string;
+  sendSubmissionsToEmail?: string;
+  sendWithJs?: boolean;
+  contentType?: string;
+  customHeaders?: {
+    [key: string]: string;
+  };
+  successUrl?: string;
+  previewState?: FormState;
+  successMessage?: BuilderElement[];
+  errorMessage?: BuilderElement[];
+  sendingMessage?: BuilderElement[];
+  resetFormOnSubmit?: boolean;
+  errorMessagePath?: string;
+}
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+/* eslint-disable */
+
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+export type FormState = "unsubmitted" | "sending" | "success" | "error";
+import RenderBlock from "../../components/render-block/render-block";
+import BuilderBlocks from "../../components/render-blocks";
+import { isEditing } from "../../functions/is-editing.js";
+
+function FormComponent(props: FormProps) {
+  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: Event & {
+      currentTarget: HTMLFormElement;
+    }
+  ) {
+    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: any;
+      const formData = new FormData(el); // TODO: maybe support null
+
+      const formPairs: {
+        key: string;
+        value: File | boolean | number | string | FileList;
+      }[] = Array.from(
+        event.currentTarget.querySelectorAll("input,select,textarea")
+      )
+        .filter((el) => !!(el as HTMLInputElement).name)
+        .map((el) => {
+          let value: any;
+          const key = (el as HTMLImageElement).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 as HTMLInputElement).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-56c64f58">
+              {" "}
+              {JSON.stringify(responseData, null, 2)}{" "}
+            </pre>
+          </>
+        ) : null}{" "}
+        {submissionState() === "success" ? (
+          <>
+            <BuilderBlocks
+              dataPath="successMessage"
+              blocks={props.successMessage!}
+            />
+          </>
+        ) : null}{" "}
+      </form>{" "}
+      <style>{`.pre-56c64f58 {   padding: 10px;   color: red;   text-align: center; }`}</style>{" "}
+    </>
+  );
+}
+export default FormComponent;

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

@@ -0,0 +1,10 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Fragment',
+  static: true,
+  hidden: true,
+
+  canHaveChildren: true,
+  noWrap: true,
+};

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

@@ -0,0 +1,14 @@
+"use client";
+import * as React from "react";
+
+export interface FragmentProps {
+  maxWidth?: number;
+  attributes?: any;
+  children?: any;
+}
+
+function FragmentComponent(props: FragmentProps) {
+  return <span>{props.children}</span>;
+}
+
+export default FragmentComponent;

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

@@ -0,0 +1,172 @@
+import type { ComponentInfo } from '../../types/components';
+import { serializeFn } from '../util.js';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Image',
+  static: 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%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
+      onChange: serializeFn(
+        (options: Map<string, any>): void | Promise<void> => {
+          const DEFAULT_ASPECT_RATIO = 0.7041;
+          options.delete('srcset');
+          options.delete('noWebp');
+          function loadImage(
+            url: string,
+            timeout = 60000
+          ): Promise<HTMLImageElement> {
+            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: number) {
+            return Math.round(num * 1000) / 1000;
+          }
+
+          const value = options.get('image');
+          const aspectRatio = options.get('aspectRatio');
+
+          // For SVG images - don't render as webp, keep them as SVG
+          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,
+    },
+  ],
+};

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

@@ -0,0 +1,75 @@
+// Taken from (and modified) the shopify theme script repo
+// https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
+function removeProtocol(path: string) {
+  return path.replace(/http(s)?:/, '');
+}
+
+function updateQueryParam(
+  uri = '',
+  key: string,
+  value: string | number | boolean
+): string {
+  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: string, size: string): string | null {
+  if (!src || !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;
+}
+
+export function getSrcSet(url: string): string {
+  if (!url) {
+    return url;
+  }
+
+  const sizes = [100, 200, 400, 800, 1200, 1600, 2000];
+
+  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;
+}