@builder.io/sdk-solid 0.0.8-10 → 0.0.8-13

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

@@ -1,296 +0,0 @@
-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/fragment.lite.tsx

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

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

@@ -1,86 +0,0 @@
-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/img.lite.tsx

@@ -1,18 +0,0 @@
-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/input.lite.tsx

@@ -1,20 +0,0 @@
-import { isEditing } from "../../functions/is-editing.js";
-
-function FormInputComponent(props) {
-  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}
-    />
-  );
-}
-
-export default FormInputComponent;

package/src/blocks/raw-text/raw-text.lite.tsx

@@ -1,10 +0,0 @@
-function RawText(props) {
-  return (
-    <span
-      class={props.attributes?.class || props.attributes?.className}
-      innerHTML={props.text || ""}
-    ></span>
-  );
-}
-
-export default RawText;

package/src/blocks/section/section.lite.tsx

@@ -1,18 +0,0 @@
-function SectionComponent(props) {
-  return (
-    <section
-      {...props.attributes}
-      style={
-        props.maxWidth && typeof props.maxWidth === "number"
-          ? {
-              "max-width": props.maxWidth,
-            }
-          : undefined
-      }
-    >
-      {props.children}
-    </section>
-  );
-}
-
-export default SectionComponent;

package/src/blocks/select/select.lite.tsx

@@ -1,28 +0,0 @@
-import { For } from "solid-js";
-
-import { isEditing } from "../../functions/is-editing.js";
-
-function SelectComponent(props) {
-  return (
-    <select
-      {...props.attributes}
-      value={props.value}
-      key={
-        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
-      }
-      defaultValue={props.defaultValue}
-      name={props.name}
-    >
-      <For each={props.options}>
-        {(option, _index) => {
-          const index = _index();
-          return (
-            <option value={option.value}>{option.name || option.value}</option>
-          );
-        }}
-      </For>
-    </select>
-  );
-}
-
-export default SelectComponent;

package/src/blocks/submit-button/submit-button.lite.tsx

@@ -1,9 +0,0 @@
-function SubmitButton(props) {
-  return (
-    <button {...props.attributes} type="submit">
-      {props.text}
-    </button>
-  );
-}
-
-export default SubmitButton;

package/src/blocks/symbol/symbol.lite.tsx

@@ -1,41 +0,0 @@
-import { useContext, onMount } from "solid-js";
-
-import { createMutable } from "solid-js/store";
-
-import RenderContent from "../../components/render-content/render-content.lite";
-import BuilderContext from "../../context/builder.context";
-import { getContent } from "../../functions/get-content/index.js";
-
-function Symbol(props) {
-  const state = createMutable({ className: "builder-symbol", content: null });
-
-  const builderContext = useContext(BuilderContext);
-
-  onMount(() => {
-    state.content = props.symbol?.content;
-  });
-
-  return (
-    <div
-      class={state.className}
-      {...props.attributes}
-      dataSet={{
-        class: state.className,
-      }}
-    >
-      <RenderContent
-        apiKey={builderContext.apiKey}
-        context={builderContext.context}
-        data={{
-          ...props.symbol?.data,
-          ...builderContext.state,
-          ...props.symbol?.content?.data?.state,
-        }}
-        model={props.symbol?.model}
-        content={state.content}
-      ></RenderContent>
-    </div>
-  );
-}
-
-export default Symbol;

package/src/blocks/text/text.lite.tsx

@@ -1,5 +0,0 @@
-function Text(props) {
-  return <div class="builder-text" innerHTML={props.text}></div>;
-}
-
-export default Text;

package/src/blocks/textarea/textarea.lite.tsx

@@ -1,13 +0,0 @@
-function Textarea(props) {
-  return (
-    <textarea
-      {...props.attributes}
-      placeholder={props.placeholder}
-      name={props.name}
-      value={props.value}
-      defaultValue={props.defaultValue}
-    ></textarea>
-  );
-}
-
-export default Textarea;

package/src/blocks/video/video.lite.tsx

@@ -1,26 +0,0 @@
-function Video(props) {
-  return (
-    <video
-      {...props.attributes}
-      preload="none"
-      style={{
-        width: "100%",
-        height: "100%",
-        ...props.attributes?.style,
-        "object-fit": props.fit,
-        "object-position": props.position,
-        // Hack to get object fit to work as expected and
-        // not have the video overflow
-        "border-radius": 1,
-      }}
-      key={props.video || "no-src"}
-      poster={props.posterImage}
-      autoPlay={props.autoPlay}
-      muted={props.muted}
-      controls={props.controls}
-      loop={props.loop}
-    ></video>
-  );
-}
-
-export default Video;

package/src/components/error-boundary.lite.tsx

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

package/src/components/render-block/block-styles.lite.tsx

@@ -1,38 +0,0 @@
-import { createMutable } from "solid-js/store";
-
-import RenderInlinedStyles from "../render-inlined-styles.lite";
-
-function BlockStyles(props) {
-  const state = createMutable({
-    camelToKebabCase(string: string) {
-      return string
-        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
-        .toLowerCase();
-    },
-    get css() {
-      // TODO: media queries
-      const styleObject = props.block.responsiveStyles?.large;
-
-      if (!styleObject) {
-        return "";
-      }
-
-      let str = `.${props.block.id} {`;
-
-      for (const key in styleObject) {
-        const value = styleObject[key];
-
-        if (typeof value === "string") {
-          str += `${state.camelToKebabCase(key)}: ${value};`;
-        }
-      }
-
-      str += "}";
-      return str;
-    },
-  });
-
-  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
-}
-
-export default BlockStyles;