@builder.io/sdk-react-native 0.0.1-34 → 0.0.1-38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.1-34",
+  "version": "0.0.1-38",
   "main": "src/index.js",
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"

package/src/blocks/button.js

@@ -0,0 +1,86 @@
+import { registerComponent } from '../functions/register-component';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) =>
+  key in obj
+    ? __defProp(obj, key, {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value,
+      })
+    : (obj[key] = value);
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from 'react';
+import { View, Text } from 'react-native';
+function Button(props) {
+  return /* @__PURE__ */ React.createElement(
+    React.Fragment,
+    null,
+    props.link
+      ? /* @__PURE__ */ React.createElement(
+          React.Fragment,
+          null,
+          /* @__PURE__ */ React.createElement(
+            View,
+            __spreadProps(__spreadValues({}, props.attributes), {
+              role: 'button',
+              href: props.link,
+              target: props.openLinkInNewTab ? '_blank' : void 0,
+            }),
+            /* @__PURE__ */ React.createElement(Text, null, props.text)
+          )
+        )
+      : /* @__PURE__ */ React.createElement(
+          View,
+          __spreadValues({}, props.attributes),
+          /* @__PURE__ */ React.createElement(Text, null, props.text)
+        )
+  );
+}
+export { Button as default };
+
+registerComponent(Button, {
+  name: 'Core:Button',
+  builtIn: true,
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
+  defaultStyles: {
+    appearance: 'none',
+    paddingTop: '15px',
+    paddingBottom: '15px',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    backgroundColor: '#000000',
+    color: 'white',
+    borderRadius: '4px',
+    textAlign: 'center',
+    cursor: 'pointer',
+  },
+  inputs: [
+    { name: 'text', type: 'text', defaultValue: 'Click me!', bubble: true },
+    { name: 'link', type: 'url', bubble: true },
+    {
+      name: 'openLinkInNewTab',
+      type: 'boolean',
+      defaultValue: false,
+      friendlyName: 'Open link in new tab',
+    },
+  ],
+  static: true,
+  noWrap: true,
+});

package/src/blocks/button.lite.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+
+export default function Button(props) {
+  return (
+    <>
+      {props.link ? (
+        <>
+          <View
+            {...props.attributes}
+            role="button"
+            href={props.link}
+            target={props.openLinkInNewTab ? '_blank' : undefined}
+          >
+            <Text>{props.text}</Text>
+          </View>
+        </>
+      ) : (
+        <View {...props.attributes}>
+          <Text>{props.text}</Text>
+        </View>
+      )}
+    </>
+  );
+}

package/src/blocks/columns.js

@@ -0,0 +1,265 @@
+import { registerComponent } from '../functions/register-component';
+
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import RenderBlocks from '../components/render-blocks';
+function Columns(props) {
+  var _a;
+  function getGutterSize() {
+    return typeof props.space === 'number' ? props.space || 0 : 20;
+  }
+  function getColumns() {
+    return props.columns || [];
+  }
+  function getWidth(index) {
+    const columns = this.getColumns();
+    return (columns[index] && columns[index].width) || 100 / columns.length;
+  }
+  function getColumnCssWidth(index) {
+    const columns = this.getColumns();
+    const gutterSize = this.getGutterSize();
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+  }
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      className: 'builder-columns',
+      style: styles.view1,
+    },
+    (_a = props.columns) == null
+      ? void 0
+      : _a.map((column) =>
+          /* @__PURE__ */ React.createElement(
+            View,
+            {
+              className: 'builder-column',
+              style: styles.view2,
+            },
+            /* @__PURE__ */ React.createElement(RenderBlocks, {
+              blocks: column.blocks,
+            })
+          )
+        )
+  );
+}
+const styles = StyleSheet.create({
+  view1: { display: 'flex', alignItems: 'stretch' },
+  view2: { flexGrow: 1 },
+});
+export { Columns as default };
+
+registerComponent(Columns, {
+  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:
+        "        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        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.lite.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import RenderBlocks from '../components/render-blocks.lite';
+
+export default function Columns(props) {
+  function getGutterSize() {
+    return typeof props.space === 'number' ? props.space || 0 : 20;
+  }
+
+  function getColumns() {
+    return props.columns || [];
+  }
+
+  function getWidth(index) {
+    const columns = this.getColumns();
+    return (columns[index] && columns[index].width) || 100 / columns.length;
+  }
+
+  function getColumnCssWidth(index) {
+    const columns = this.getColumns();
+    const gutterSize = this.getGutterSize();
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+  }
+
+  return (
+    <View className="builder-columns" style={styles.view1}>
+      {props.columns?.map((column) => (
+        <View className="builder-column" style={styles.view2}>
+          <RenderBlocks blocks={column.blocks} />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  view1: { display: 'flex', alignItems: 'stretch' },
+  view2: { flexGrow: 1 },
+});

package/src/blocks/custom-code.js

@@ -0,0 +1,85 @@
+import { registerComponent } from '../functions/register-component';
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { useState, useRef, useEffect } from 'react';
+function CustomCode(props) {
+  const [scriptsInserted, setScriptsInserted] = useState(() => []);
+  const [scriptsRun, setScriptsRun] = useState(() => []);
+  function findAndRunScripts() {
+    if (elem.current && typeof window !== 'undefined') {
+      const scripts = elem.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);
+          }
+        }
+      }
+    }
+  }
+  const elem = useRef();
+  useEffect(() => {
+    findAndRunScripts();
+  }, []);
+  return /* @__PURE__ */ React.createElement(View, {
+    ref: elem,
+    className:
+      'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : ''),
+    dangerouslySetInnerHTML: { __html: 'props.code' },
+  });
+}
+export { CustomCode as default };
+
+registerComponent(CustomCode, {
+  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,
+    },
+  ],
+});

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useState, useRef, useEffect } from 'react';
+
+export default function CustomCode(props) {
+  const [scriptsInserted, setScriptsInserted] = useState(() => []);
+
+  const [scriptsRun, setScriptsRun] = useState(() => []);
+
+  function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem.current && typeof window !== 'undefined') {
+      /** @type {HTMLScriptElement[]} */
+      const scripts = elem.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);
+          }
+        }
+      }
+    }
+  }
+
+  const elem = useRef();
+
+  useEffect(() => {
+    findAndRunScripts();
+  }, []);
+
+  return (
+    <View
+      ref={elem}
+      className={
+        'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')
+      }
+      dangerouslySetInnerHTML={{ __html: 'props.code' }}
+    />
+  );
+}

package/src/blocks/embed.js

@@ -0,0 +1,78 @@
+import { registerComponent } from '../functions/register-component';
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { useState, useRef, useEffect } from 'react';
+function Embed(props) {
+  const [scriptsInserted, setScriptsInserted] = useState(() => []);
+  const [scriptsRun, setScriptsRun] = useState(() => []);
+  function findAndRunScripts() {
+    if (elem.current && typeof window !== 'undefined') {
+      const scripts = elem.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('`Embed`: Error running script:', error);
+          }
+        }
+      }
+    }
+  }
+  const elem = useRef();
+  useEffect(() => {
+    findAndRunScripts();
+  }, []);
+  return /* @__PURE__ */ React.createElement(View, {
+    className: 'builder-embed',
+    ref: elem,
+    dangerouslySetInnerHTML: { __html: 'props.content' },
+  });
+}
+export { Embed as default };
+
+registerComponent(Embed, {
+  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:
+        "        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,
+    },
+  ],
+});