@builder.io/sdk-react-native 1.0.31-0 → 1.0.31

package/src/blocks/columns/component-info.ts

@@ -1,219 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export const componentInfo: ComponentInfo = {
-  // TODO: ways to statically preprocess JSON for references, functions, etc
-  name: 'Columns',
-  isRSC: 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: (options: Map<string, any>) => {
-      function clearWidths() {
-        columns.forEach(col => {
-          col.delete('width');
-        });
-      }
-      const columns: Array<Map<string, any>> = 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
-  }]
-}

package/src/blocks/columns/helpers.ts

@@ -1,3 +0,0 @@
-export const getColumnsClass = (id?: string) => {
-  return `builder-columns ${id}-breakpoints`;
-}

package/src/blocks/columns/index.ts

@@ -1 +0,0 @@
-export { default } from './columns'

package/src/blocks/custom-code/component-info.ts

@@ -1,24 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export const componentInfo: ComponentInfo = {
-  name: 'Custom Code',
-  static: 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
-  }]
-}

package/src/blocks/custom-code/custom-code.tsx

@@ -1,71 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-} from "react-native";
-import { useState, useRef, useEffect } from "react";
-
-export interface CustomCodeProps {
-  code: string;
-  replaceNodes?: boolean;
-}
-
-function CustomCode(props: CustomCodeProps) {
-  const elementRef = useRef<any>(null);
-  const [scriptsInserted, setScriptsInserted] = useState(() => []);
-
-  const [scriptsRun, setScriptsRun] = useState(() => []);
-
-  useEffect(() => {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (
-      !elementRef.current?.getElementsByTagName ||
-      typeof window === "undefined"
-    ) {
-      return;
-    }
-    const scripts = elementRef.current.getElementsByTagName("script");
-    for (let i = 0; i < scripts.length; i++) {
-      const script = scripts[i];
-      if (script.src) {
-        if (scriptsInserted.includes(script.src)) {
-          continue;
-        }
-        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 (scriptsRun.includes(script.innerText)) {
-          continue;
-        }
-        try {
-          scriptsRun.push(script.innerText);
-          new Function(script.innerText)();
-        } catch (error) {
-          console.warn("`CustomCode`: Error running script:", error);
-        }
-      }
-    }
-  }, []);
-
-  return (
-    <View ref={elementRef} dangerouslySetInnerHTML={{ __html: props.code }} />
-  );
-}
-
-export default CustomCode;

package/src/blocks/custom-code/index.ts

@@ -1 +0,0 @@
-export { default } from './custom-code'

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

@@ -1,38 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-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: (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/src/blocks/embed/embed.tsx

@@ -1,62 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-} from "react-native";
-import { useState, useRef, useEffect } from "react";
-
-export interface EmbedProps {
-  content: string;
-}
-
-import { isJsScript } from "./helpers";
-
-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 (
-    <View ref={elem} dangerouslySetInnerHTML={{ __html: props.content }} />
-  );
-}
-
-export default Embed;

package/src/blocks/embed/helpers.ts

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

package/src/blocks/embed/index.ts

@@ -1 +0,0 @@
-export { default } from './embed'

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

@@ -1,233 +0,0 @@
-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'
-      }
-    }
-  }]
-}