@builder.io/sdk-qwik 0.0.16 → 0.0.17

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

@@ -1,262 +0,0 @@
-const componentInfo = {
-  name: "Form:Form",
-  builtIn: true,
-  defaults: {
-    responsiveStyles: {
-      large: {
-        marginTop: "15px",
-        paddingBottom: "15px"
-      }
-    }
-  },
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5",
-  inputs: [
-    {
-      name: "sendSubmissionsTo",
-      type: "string",
-      enum: [
-        {
-          label: "Send to email",
-          value: "email",
-          helperText: "Send form submissions to the email address of your choosing"
-        },
-        {
-          label: "Custom",
-          value: "custom",
-          helperText: "Handle where the form requests go manually with a little code, e.g. to your own custom backend"
-        }
-      ],
-      defaultValue: "email"
-    },
-    {
-      name: "sendSubmissionsToEmail",
-      type: "string",
-      required: true,
-      defaultValue: "your@email.com",
-      showIf: 'options.get("sendSubmissionsTo") === "email"'
-    },
-    {
-      name: "sendWithJs",
-      type: "boolean",
-      helperText: "Set to false to use basic html form action",
-      defaultValue: true,
-      showIf: 'options.get("sendSubmissionsTo") === "custom"'
-    },
-    {
-      name: "name",
-      type: "string",
-      defaultValue: "My form"
-    },
-    {
-      name: "action",
-      type: "string",
-      helperText: "URL to send the form data to",
-      showIf: 'options.get("sendSubmissionsTo") === "custom"'
-    },
-    {
-      name: "contentType",
-      type: "string",
-      defaultValue: "application/json",
-      advanced: true,
-      enum: [
-        "application/json",
-        "multipart/form-data",
-        "application/x-www-form-urlencoded"
-      ],
-      showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
-    },
-    {
-      name: "method",
-      type: "string",
-      showIf: 'options.get("sendSubmissionsTo") === "custom"',
-      defaultValue: "POST",
-      advanced: true
-    },
-    {
-      name: "previewState",
-      type: "string",
-      enum: ["unsubmitted", "sending", "success", "error"],
-      defaultValue: "unsubmitted",
-      helperText: 'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',
-      showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
-    },
-    {
-      name: "successUrl",
-      type: "url",
-      helperText: "Optional URL to redirect the user to on form submission success",
-      showIf: 'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'
-    },
-    {
-      name: "resetFormOnSubmit",
-      type: "boolean",
-      showIf: "options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",
-      advanced: true
-    },
-    {
-      name: "successMessage",
-      type: "uiBlocks",
-      hideFromUI: true,
-      defaultValue: [
-        {
-          "@type": "@builder.io/sdk:Element",
-          responsiveStyles: {
-            large: {
-              marginTop: "10px"
-            }
-          },
-          component: {
-            name: "Text",
-            options: {
-              text: "<span>Thanks!</span>"
-            }
-          }
-        }
-      ]
-    },
-    {
-      name: "validate",
-      type: "boolean",
-      defaultValue: true,
-      advanced: true
-    },
-    {
-      name: "errorMessagePath",
-      type: "text",
-      advanced: true,
-      helperText: 'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'
-    },
-    {
-      name: "errorMessage",
-      type: "uiBlocks",
-      hideFromUI: true,
-      defaultValue: [
-        {
-          "@type": "@builder.io/sdk:Element",
-          responsiveStyles: {
-            large: {
-              marginTop: "10px"
-            }
-          },
-          bindings: {
-            "component.options.text": "state.formErrorMessage || block.component.options.text"
-          },
-          component: {
-            name: "Text",
-            options: {
-              text: "<span>Form submission error :( Please check your answers and try again</span>"
-            }
-          }
-        }
-      ]
-    },
-    {
-      name: "sendingMessage",
-      type: "uiBlocks",
-      hideFromUI: true,
-      defaultValue: [
-        {
-          "@type": "@builder.io/sdk:Element",
-          responsiveStyles: {
-            large: {
-              marginTop: "10px"
-            }
-          },
-          component: {
-            name: "Text",
-            options: {
-              text: "<span>Sending...</span>"
-            }
-          }
-        }
-      ]
-    },
-    {
-      name: "customHeaders",
-      type: "map",
-      valueType: {
-        type: "string"
-      },
-      advanced: true,
-      showIf: 'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'
-    }
-  ],
-  noWrap: true,
-  canHaveChildren: true,
-  defaultChildren: [
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Text",
-        options: {
-          text: "<span>Enter your name</span>"
-        }
-      }
-    },
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Form:Input",
-        options: {
-          name: "name",
-          placeholder: "Jane Doe"
-        }
-      }
-    },
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Text",
-        options: {
-          text: "<span>Enter your email</span>"
-        }
-      }
-    },
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Form:Input",
-        options: {
-          name: "email",
-          placeholder: "jane@doe.com"
-        }
-      }
-    },
-    {
-      "@type": "@builder.io/sdk:Element",
-      responsiveStyles: {
-        large: {
-          marginTop: "10px"
-        }
-      },
-      component: {
-        name: "Form:SubmitButton",
-        options: {
-          text: "Submit"
-        }
-      }
-    }
-  ]
-};
-export {
-  componentInfo
-};

package/src/blocks/form/form.jsx

@@ -1,303 +0,0 @@
-// GENERATED BY MITOSIS
-
-import RenderBlock from "../../components/render-block/render-block";
-import BuilderBlocks from "../../components/render-blocks";
-import { isEditing } from "../../functions/is-editing.js";
-import {
-  Fragment,
-  component$,
-  h,
-  useContext,
-  useRef,
-  useStore,
-  useStylesScoped$,
-} from "@builder.io/qwik";
-export const submissionState = function submissionState(
-  props,
-  state,
-  formRef,
-  builderContext
-) {
-  return (isEditing() && props.previewState) || state.formState;
-};
-export const onSubmit = function onSubmit(
-  props,
-  state,
-  formRef,
-  builderContext,
-  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";
-      }
-    );
-  }
-};
-export const FormComponent = component$((props) => {
-  useStylesScoped$(STYLES);
-  const builderContext = useContext(BuilderContext);
-  const formRef = useRef();
-  const state = useStore({
-    formState: "unsubmitted",
-    responseData: null,
-    formErrorMessage: "",
-  });
-  return (
-    <form
-      validate={props.validate}
-      ref={formRef}
-      action={(() => {
-        !props.sendWithJs && props.action;
-      })()}
-      method={props.method}
-      name={props.name}
-      onSubmit$={(event) =>
-        onSubmit(props, state, formRef, builderContext, event)
-      }
-      {...props.attributes}
-    >
-      {props.builderBlock && props.builderBlock.children
-        ? (props.builderBlock?.children || []).map((block) => {
-            return (
-              <RenderBlock block={block} context={builderContext}></RenderBlock>
-            );
-          })
-        : null}
-      {submissionState(props, state, formRef, builderContext) === "error" ? (
-        <BuilderBlocks
-          dataPath="errorMessage"
-          blocks={props.errorMessage}
-        ></BuilderBlocks>
-      ) : null}
-      {submissionState(props, state, formRef, builderContext) === "sending" ? (
-        <BuilderBlocks
-          dataPath="sendingMessage"
-          blocks={props.sendingMessage}
-        ></BuilderBlocks>
-      ) : null}
-      {submissionState(props, state, formRef, builderContext) === "error" &&
-      state.responseData ? (
-        <pre class="builder-form-error-text pre-FormComponent">
-          {JSON.stringify(state.responseData, null, 2)}
-        </pre>
-      ) : null}
-      {submissionState(props, state, formRef, builderContext) === "success" ? (
-        <BuilderBlocks
-          dataPath="successMessage"
-          blocks={props.successMessage}
-        ></BuilderBlocks>
-      ) : null}
-    </form>
-  );
-});
-export default FormComponent;
-export const STYLES = `.pre-FormComponent { 
-padding: 10px;
-color: red;
-text-align: center; }`;

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

@@ -1,11 +0,0 @@
-// GENERATED BY MITOSIS
-
-import { Fragment, Slot, component$, h } from "@builder.io/qwik";
-export const FragmentComponent = component$((props) => {
-  return (
-    <span>
-      <Slot></Slot>
-    </span>
-  );
-});
-export default FragmentComponent;