@builder.io/sdk-solid 0.0.6 → 0.0.9

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

@@ -0,0 +1,262 @@
+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.jsx → form/form.jsx}

@@ -1,16 +1,17 @@
 import { Show, For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
-import RenderBlock from "../components/render-block";
+import RenderBlock from "../../components/render-block/render-block";
+import { isEditing } from "../../functions/is-editing";
 
 function FormComponent(props) {
   const state = createMutable({
-    state: "unsubmitted",
+    formState: "unsubmitted",
     responseData: null,
     formErrorMessage: "",
 
     get submissionState() {
-      return Builder.isEditing && props.previewState || state.state;
+      return isEditing() && props.previewState || state.formState;
     },
 
     onSubmit(event) {
@@ -118,7 +119,7 @@ function FormComponent(props) {
           }
         }
 
-        state.state = "sending";
+        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 */
@@ -152,7 +153,7 @@ function FormComponent(props) {
           }
 
           state.responseData = body;
-          state.state = res.ok ? "success" : "error";
+          state.formState = res.ok ? "success" : "error";
 
           if (res.ok) {
             const submitSuccessEvent = new CustomEvent("submit:success", {
@@ -211,7 +212,7 @@ function FormComponent(props) {
           }
 
           state.responseData = err;
-          state.state = "error";
+          state.formState = "error";
         });
       }
     }
@@ -249,5 +250,4 @@ function FormComponent(props) {
     </form>;
 }
 
-export default FormComponent;import { registerComponent } from '../functions/register-component';
-registerComponent(FormComponent, {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 default FormComponent;

package/src/blocks/{form.lite.tsx → form/form.lite.tsx}

@@ -3,15 +3,16 @@ import { Show, For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 
-import RenderBlock from "../components/render-block.lite";
+import RenderBlock from "../../components/render-block/render-block.lite";
+import { isEditing } from "../../functions/is-editing";
 
 function FormComponent(props) {
   const state = createMutable({
-    state: "unsubmitted",
+    formState: "unsubmitted",
     responseData: null,
     formErrorMessage: "",
     get submissionState() {
-      return (Builder.isEditing && props.previewState) || state.state;
+      return (isEditing() && props.previewState) || state.formState;
     },
     onSubmit(
       event: Event & {
@@ -130,7 +131,7 @@ function FormComponent(props) {
           }
         }
 
-        state.state = "sending";
+        state.formState = "sending";
         const formUrl = `${
           builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"
         }/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(
@@ -171,7 +172,7 @@ function FormComponent(props) {
             }
 
             state.responseData = body;
-            state.state = res.ok ? "success" : "error";
+            state.formState = res.ok ? "success" : "error";
 
             if (res.ok) {
               const submitSuccessEvent = new CustomEvent("submit:success", {
@@ -229,7 +230,7 @@ function FormComponent(props) {
             }
 
             state.responseData = err;
-            state.state = "error";
+            state.formState = "error";
           }
         );
       }

package/src/blocks/form/index.js

@@ -0,0 +1,7 @@
+import { registerComponent } from "../../functions/register-component";
+import { componentInfo } from "./component-info";
+import component from "./form";
+var stdin_default = registerComponent(component, componentInfo);
+export {
+  stdin_default as default
+};

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/index.js

@@ -0,0 +1,7 @@
+import { registerComponent } from "../../functions/register-component";
+import { componentInfo } from "./component-info";
+import component from "./fragment";
+var stdin_default = registerComponent(component, componentInfo);
+export {
+  stdin_default as default
+};

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} aria-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={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,83 @@
+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}
+          aria-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={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/index.js

@@ -0,0 +1,7 @@
+import { registerComponent } from "../../functions/register-component";
+import { componentInfo } from "./component-info";
+import component from "./image";
+var stdin_default = registerComponent(component, componentInfo);
+export {
+  stdin_default as default
+};

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
+};