@builder.io/sdk-react 0.2.3-2 → 0.2.3-4

package/packages/react/src/blocks/embed/component-info.ts

@@ -0,0 +1,55 @@
+import type { ComponentInfo } from '../../types/components';
+import { serializeFn } from '../util.js';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Embed',
+  static: true,
+
+  inputs: [
+    {
+      name: 'url',
+      type: 'url',
+      required: true,
+      defaultValue: '',
+      helperText: 'e.g. enter a youtube url, google map, etc',
+      onChange: serializeFn(
+        (options: Map<string, any>): void | Promise<void> => {
+          const url = options.get('url');
+          if (url) {
+            options.set('content', 'Loading...');
+            // TODO: get this out of here!
+            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,
+    },
+  ],
+};

package/packages/react/src/blocks/embed/embed.tsx

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

package/packages/react/src/blocks/embed/helpers.ts

@@ -0,0 +1,8 @@
+const SCRIPT_MIME_TYPES = [
+  'text/javascript',
+  'application/javascript',
+  'application/ecmascript',
+];
+
+export const isJsScript = (script: HTMLScriptElement) =>
+  SCRIPT_MIME_TYPES.includes(script.type);

package/packages/react/src/blocks/form/component-info.ts

@@ -0,0 +1,282 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Form:Form',
+
+  // editableTags: ['builder-form-error']
+  defaults: {
+    responsiveStyles: {
+      large: {
+        marginTop: '15px',
+        paddingBottom: '15px',
+      },
+    },
+  },
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',
+  inputs: [
+    {
+      name: 'sendSubmissionsTo',
+      type: 'string',
+      // TODO: save to builder data and user can download as csv
+      // TODO: easy for mode too or computed add/remove fields form mode
+      // so you can edit details and high level mode at same time...
+      // Later - more integrations like mailchimp
+      // /api/v1/form-submit?to=mailchimp
+      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, // TODO: required: () => options.get("sendSubmissionsTo") === "email"
+      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',
+      // advanced: true
+    },
+    {
+      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,
+      // TODO: do automatically if file input
+      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',
+      // TODO: persist: false flag
+      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',
+        },
+      },
+    },
+  ],
+};