@builder.io/sdk-react 0.1.3 → 0.1.5

package/packages/_rsc/src/blocks/columns/component-info.js

@@ -1,242 +0,0 @@
-import { serializeFn } from "../util.js";
-const componentInfo = {
-  name: "Columns",
-  builtIn: true,
-  inputs: [
-    {
-      name: "columns",
-      type: "array",
-      broadcast: true,
-      subFields: [
-        {
-          name: "blocks",
-          type: "array",
-          hideFromUI: true,
-          defaultValue: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
-        },
-        {
-          name: "width",
-          type: "number",
-          hideFromUI: true,
-          helperText: "Width %, e.g. set to 50 to fill half of the space"
-        },
-        {
-          name: "link",
-          type: "url",
-          helperText: "Optionally set a url that clicking this column will link to"
-        }
-      ],
-      defaultValue: [
-        {
-          blocks: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
-        },
-        {
-          blocks: [
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto",
-                  minHeight: "20px",
-                  minWidth: "20px",
-                  overflow: "hidden"
-                }
-              },
-              component: {
-                name: "Image",
-                options: {
-                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-                  backgroundPosition: "center",
-                  backgroundSize: "cover",
-                  aspectRatio: 0.7004048582995948
-                }
-              }
-            },
-            {
-              "@type": "@builder.io/sdk:Element",
-              responsiveStyles: {
-                large: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                  flexShrink: "0",
-                  position: "relative",
-                  marginTop: "30px",
-                  textAlign: "center",
-                  lineHeight: "normal",
-                  height: "auto"
-                }
-              },
-              component: {
-                name: "Text",
-                options: {
-                  text: "<p>Enter some text...</p>"
-                }
-              }
-            }
-          ]
-        }
-      ],
-      onChange: serializeFn((options) => {
-        function clearWidths() {
-          columns.forEach((col) => {
-            col.delete("width");
-          });
-        }
-        const columns = options.get("columns");
-        if (Array.isArray(columns)) {
-          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
-          if (containsColumnWithWidth) {
-            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
-            if (containsColumnWithoutWidth) {
-              clearWidths();
-            } else {
-              const sumWidths = columns.reduce((memo, col) => {
-                return memo + col.get("width");
-              }, 0);
-              const widthsDontAddUp = sumWidths !== 100;
-              if (widthsDontAddUp) {
-                clearWidths();
-              }
-            }
-          }
-        }
-      })
-    },
-    {
-      name: "space",
-      type: "number",
-      defaultValue: 20,
-      helperText: "Size of gap between columns",
-      advanced: true
-    },
-    {
-      name: "stackColumnsAt",
-      type: "string",
-      defaultValue: "tablet",
-      helperText: "Convert horizontal columns to vertical at what device size",
-      enum: ["tablet", "mobile", "never"],
-      advanced: true
-    },
-    {
-      name: "reverseColumnsWhenStacked",
-      type: "boolean",
-      defaultValue: false,
-      helperText: "When stacking columns for mobile devices, reverse the ordering",
-      advanced: true
-    }
-  ]
-};
-export {
-  componentInfo
-};

package/packages/_rsc/src/blocks/custom-code/component-info.js

@@ -1,31 +0,0 @@
-const componentInfo = {
-  name: "Custom Code",
-  static: true,
-  builtIn: true,
-  requiredPermissions: ["editCode"],
-  inputs: [
-    {
-      name: "code",
-      type: "html",
-      required: true,
-      defaultValue: "<p>Hello there, I am custom HTML code!</p>",
-      code: true
-    },
-    {
-      name: "replaceNodes",
-      type: "boolean",
-      helperText: "Preserve server rendered dom nodes",
-      advanced: true
-    },
-    {
-      name: "scriptsClientOnly",
-      type: "boolean",
-      defaultValue: false,
-      helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
-      advanced: true
-    }
-  ]
-};
-export {
-  componentInfo
-};

package/packages/_rsc/src/blocks/custom-code/custom-code.jsx

@@ -1,55 +0,0 @@
-import * as React from "react";
-
-export default function CustomCode(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    scriptsInserted: [],
-    scriptsRun: [],
-    findAndRunScripts() {
-      // TODO: Move this function to standalone one in '@builder.io/utils'
-      if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
-        const scripts = elem.getElementsByTagName("script");
-        for (let i = 0; i < scripts.length; i++) {
-          const script = scripts[i];
-          if (script.src) {
-            if (state.scriptsInserted.includes(script.src)) {
-              continue;
-            }
-            state.scriptsInserted.push(script.src);
-            const newScript = document.createElement("script");
-            newScript.async = true;
-            newScript.src = script.src;
-            document.head.appendChild(newScript);
-          } else if (
-            !script.type ||
-            [
-              "text/javascript",
-              "application/javascript",
-              "application/ecmascript",
-            ].includes(script.type)
-          ) {
-            if (state.scriptsRun.includes(script.innerText)) {
-              continue;
-            }
-            try {
-              state.scriptsRun.push(script.innerText);
-              new Function(script.innerText)();
-            } catch (error) {
-              console.warn("`CustomCode`: Error running script:", error);
-            }
-          }
-        }
-      }
-    },
-  };
-
-  return (
-    <div
-      className={
-        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
-      }
-      dangerouslySetInnerHTML={{ __html: props.code }}
-    />
-  );
-}

package/packages/_rsc/src/blocks/embed/component-info.js

@@ -1,44 +0,0 @@
-import { serializeFn } from "../util.js";
-const componentInfo = {
-  name: "Embed",
-  static: true,
-  builtIn: true,
-  inputs: [
-    {
-      name: "url",
-      type: "url",
-      required: true,
-      defaultValue: "",
-      helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: serializeFn((options) => {
-        const url = options.get("url");
-        if (url) {
-          options.set("content", "Loading...");
-          const apiKey = "ae0e60e78201a3f2b0de4b";
-          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
-            if (options.get("url") === url) {
-              if (data.html) {
-                options.set("content", data.html);
-              } else {
-                options.set("content", "Invalid url, please try another");
-              }
-            }
-          }).catch((_err) => {
-            options.set("content", "There was an error embedding this URL, please try again or another URL");
-          });
-        } else {
-          options.delete("content");
-        }
-      })
-    },
-    {
-      name: "content",
-      type: "html",
-      defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-      hideFromUI: true
-    }
-  ]
-};
-export {
-  componentInfo
-};

package/packages/_rsc/src/blocks/embed/embed.jsx

@@ -1,43 +0,0 @@
-import * as React from "react";
-import { isJsScript } from "./helpers.js";
-
-export default function Embed(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    scriptsInserted: [],
-    scriptsRun: [],
-    ranInitFn: false,
-    findAndRunScripts() {
-      if (!elem || !elem.getElementsByTagName) return;
-      const scripts = elem.getElementsByTagName("script");
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-        if (script.src && !state.scriptsInserted.includes(script.src)) {
-          state.scriptsInserted.push(script.src);
-          const newScript = document.createElement("script");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          isJsScript(script) &&
-          !state.scriptsRun.includes(script.innerText)
-        ) {
-          try {
-            state.scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn("`Embed`: Error running script:", error);
-          }
-        }
-      }
-    },
-  };
-
-  return (
-    <div
-      className="builder-embed"
-      dangerouslySetInnerHTML={{ __html: props.content }}
-    />
-  );
-}

package/packages/_rsc/src/blocks/embed/helpers.js

@@ -1,9 +0,0 @@
-const SCRIPT_MIME_TYPES = [
-  "text/javascript",
-  "application/javascript",
-  "application/ecmascript"
-];
-const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
-export {
-  isJsScript
-};

package/packages/_rsc/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
-};