@builder.io/sdk-solid 0.0.8-5 → 0.0.8-8

package/src/blocks/form/form.lite.tsx

@@ -0,0 +1,296 @@
+import { Show, For } from "solid-js";
+
+import { createMutable } from "solid-js/store";
+import { css } from "solid-styled-components";
+
+import RenderBlock from "../../components/render-block/render-block.lite";
+import { isEditing } from "../../functions/is-editing.js";
+
+function FormComponent(props) {
+  const state = createMutable({
+    formState: "unsubmitted",
+    responseData: null,
+    formErrorMessage: "",
+    get submissionState() {
+      return (isEditing() && props.previewState) || state.formState;
+    },
+    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) {
+          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 formRef = useRef();
+
+  return (
+    <form
+      {...props.attributes}
+      validate={props.validate}
+      ref={formRef}
+      action={!props.sendWithJs && props.action}
+      method={props.method}
+      name={props.name}
+      onSubmit={(event) => state.onSubmit(event)}
+    >
+      <Show when={props.builderBlock && props.builderBlock.children}>
+        <For each={props.builderBlock?.children}>
+          {(block, _index) => {
+            const index = _index();
+            return <RenderBlock block={block}></RenderBlock>;
+          }}
+        </For>
+      </Show>
+      <Show when={state.submissionState === "error"}>
+        <BuilderBlocks
+          dataPath="errorMessage"
+          blocks={props.errorMessage}
+        ></BuilderBlocks>
+      </Show>
+      <Show when={state.submissionState === "sending"}>
+        <BuilderBlocks
+          dataPath="sendingMessage"
+          blocks={props.sendingMessage}
+        ></BuilderBlocks>
+      </Show>
+      <Show when={state.submissionState === "error" && state.responseData}>
+        <pre
+          class={
+            "builder-form-error-text " +
+            css({
+              padding: "10px",
+              color: "red",
+              textAlign: "center",
+            })
+          }
+        >
+          {JSON.stringify(state.responseData, null, 2)}
+        </pre>
+      </Show>
+      <Show when={state.submissionState === "success"}>
+        <BuilderBlocks
+          dataPath="successMessage"
+          blocks={props.successMessage}
+        ></BuilderBlocks>
+      </Show>
+    </form>
+  );
+}
+
+export default FormComponent;

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

@@ -0,0 +1,5 @@
+function FragmentComponent(props) {
+  return <span>{props.children}</span>;
+}
+
+export default FragmentComponent;

package/src/blocks/fragment/fragment.lite.tsx

@@ -0,0 +1,5 @@
+function FragmentComponent(props) {
+  return <span>{props.children}</span>;
+}
+
+export default FragmentComponent;

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

@@ -0,0 +1,104 @@
+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: "        const DEFAULT_ASPECT_RATIO = 0.7041;        options.delete('srcset');        options.delete('noWebp');        function loadImage(url, timeout) {          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 * 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
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/image/image.jsx

@@ -0,0 +1,54 @@
+import { Show } from "solid-js";
+import { css } from "solid-styled-components";
+
+function Image(props) {
+  return <div class={css({
+    position: "relative"
+  })}>
+      <picture>
+        <img class={"builder-image" + (props.className ? " " + props.className : "") + " " + css({
+        opacity: "1",
+        transition: "opacity 0.2s ease-in-out",
+        position: "absolute",
+        height: "100%",
+        width: "100%",
+        top: "0px",
+        left: "0px"
+      })} loading="lazy" alt={props.altText} role={props.altText ? "presentation" : undefined} style={{
+        "object-position": props.backgroundSize || "center",
+        "object-fit": props.backgroundSize || "cover"
+      }} src={props.image} srcset={props.srcset} sizes={props.sizes} />
+        <source srcSet={props.srcset} />
+      </picture>
+      <Show when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}>
+        <div class={"builder-image-sizer " + css({
+        width: "100%",
+        pointerEvents: "none",
+        fontSize: "0"
+      })} style={{
+        "padding-top": props.aspectRatio * 100 + "%"
+      }}>
+          {" "}
+        </div>
+      </Show>
+      <Show when={props.builderBlock?.children?.length && props.fitContent}>
+        {props.children}
+      </Show>
+      <Show when={!props.fitContent}>
+        <div class={css({
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%"
+      })}>
+          {props.children}
+        </div>
+      </Show>
+    </div>;
+}
+
+export default Image;

package/src/blocks/image/image.lite.tsx

@@ -0,0 +1,86 @@
+import { Show } from "solid-js";
+
+import { css } from "solid-styled-components";
+
+function Image(props) {
+  return (
+    <div
+      class={css({
+        position: "relative",
+      })}
+    >
+      <picture>
+        <img
+          class={
+            "builder-image" +
+            (props.className ? " " + props.className : "") +
+            " " +
+            css({
+              opacity: "1",
+              transition: "opacity 0.2s ease-in-out",
+              position: "absolute",
+              height: "100%",
+              width: "100%",
+              top: "0px",
+              left: "0px",
+            })
+          }
+          loading="lazy"
+          alt={props.altText}
+          role={props.altText ? "presentation" : undefined}
+          style={{
+            "object-position": props.backgroundSize || "center",
+            "object-fit": props.backgroundSize || "cover",
+          }}
+          src={props.image}
+          srcset={props.srcset}
+          sizes={props.sizes}
+        />
+        <source srcSet={props.srcset} />
+      </picture>
+      <Show
+        when={
+          props.aspectRatio &&
+          !(props.fitContent && props.builderBlock?.children?.length)
+        }
+      >
+        <div
+          class={
+            "builder-image-sizer " +
+            css({
+              width: "100%",
+              pointerEvents: "none",
+              fontSize: "0",
+            })
+          }
+          style={{
+            "padding-top": props.aspectRatio * 100 + "%",
+          }}
+        >
+          {" "}
+        </div>
+      </Show>
+      <Show when={props.builderBlock?.children?.length && props.fitContent}>
+        {props.children}
+      </Show>
+      <Show when={!props.fitContent}>
+        <div
+          class={css({
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            position: "absolute",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+          })}
+        >
+          {props.children}
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+export default Image;

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

@@ -0,0 +1,10 @@
+import { isEditing } from "../../functions/is-editing.js";
+
+function ImgComponent(props) {
+  return <img {...props.attributes} style={{
+    "object-fit": props.backgroundSize || "cover",
+    "object-position": props.backgroundPosition || "center"
+  }} key={isEditing() && props.imgSrc || "default-key"} alt={props.altText} src={props.imgSrc} />;
+}
+
+export default ImgComponent;

package/src/blocks/img/img.lite.tsx

@@ -0,0 +1,18 @@
+import { isEditing } from "../../functions/is-editing.js";
+
+function ImgComponent(props) {
+  return (
+    <img
+      {...props.attributes}
+      style={{
+        "object-fit": props.backgroundSize || "cover",
+        "object-position": props.backgroundPosition || "center",
+      }}
+      key={(isEditing() && props.imgSrc) || "default-key"}
+      alt={props.altText}
+      src={props.imgSrc}
+    />
+  );
+}
+
+export default ImgComponent;

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

@@ -0,0 +1,74 @@
+const componentInfo = {
+  name: "Form:Input",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca",
+  inputs: [
+    {
+      name: "type",
+      type: "text",
+      enum: [
+        "text",
+        "number",
+        "email",
+        "url",
+        "checkbox",
+        "radio",
+        "range",
+        "date",
+        "datetime-local",
+        "search",
+        "tel",
+        "time",
+        "file",
+        "month",
+        "week",
+        "password",
+        "color",
+        "hidden"
+      ],
+      defaultValue: "text"
+    },
+    {
+      name: "name",
+      type: "string",
+      required: true,
+      helperText: 'Every input in a form needs a unique name describing what it takes, e.g. "email"'
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      defaultValue: "Hello there",
+      helperText: "Text to display when there is no value"
+    },
+    {
+      name: "defaultValue",
+      type: "string"
+    },
+    {
+      name: "value",
+      type: "string",
+      advanced: true
+    },
+    {
+      name: "required",
+      type: "boolean",
+      helperText: "Is this input required to be filled out to submit a form",
+      defaultValue: false
+    }
+  ],
+  noWrap: true,
+  static: true,
+  defaultStyles: {
+    paddingTop: "10px",
+    paddingBottom: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    borderRadius: "3px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#ccc"
+  }
+};
+export {
+  componentInfo
+};