@builder.io/sdk-react-native 1.0.33 → 1.0.34

package/src/blocks/columns/columns.tsx

@@ -0,0 +1,199 @@
+import BaseText from "../../blocks/BaseText";
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState } from "react";
+
+type CSSVal = string | number;
+import Blocks from "../../components/blocks/blocks";
+import DynamicDiv from "../../components/dynamic-div";
+import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer";
+import InlinedStyles from "../../components/inlined-styles";
+import type { SizeName } from "../../constants/device-sizes";
+import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import { TARGET } from "../../constants/target";
+import { deoptSignal } from "../../functions/deopt";
+import { getClassPropName } from "../../functions/get-class-prop-name";
+import { mapStyleObjToStrIfNeeded } from "../../functions/get-style";
+import type { Dictionary } from "../../types/typescript";
+import type { Column, ColumnProps } from "./columns.types";
+import { getColumnsClass } from "./helpers";
+
+function Columns(props: ColumnProps) {
+  const [gutterSize, setGutterSize] = useState(() =>
+    typeof props.space === "number" ? props.space || 0 : 20
+  );
+
+  const [cols, setCols] = useState(() => props.columns || []);
+
+  const [stackAt, setStackAt] = useState(
+    () => props.stackColumnsAt || "tablet"
+  );
+
+  function getTagName(column: Column) {
+    return column.link ? props.builderLinkComponent || BaseText : View;
+  }
+
+  function getWidth(index: number) {
+    return cols[index]?.width || 100 / cols.length;
+  }
+
+  function getColumnCssWidth(index: number) {
+    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+  }
+
+  function getTabletStyle({
+    stackedStyle,
+    desktopStyle,
+  }: {
+    stackedStyle: CSSVal;
+    desktopStyle: CSSVal;
+  }) {
+    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+  }
+
+  function getMobileStyle({
+    stackedStyle,
+    desktopStyle,
+  }: {
+    stackedStyle: CSSVal;
+    desktopStyle: CSSVal;
+  }) {
+    return stackAt === "never" ? desktopStyle : stackedStyle;
+  }
+
+  const [flexDir, setFlexDir] = useState(() =>
+    props.stackColumnsAt === "never"
+      ? "row"
+      : props.reverseColumnsWhenStacked
+      ? "column-reverse"
+      : "column"
+  );
+
+  function columnsCssVars() {
+    return {
+      flexDirection: flexDir as "row" | "column" | "column-reverse",
+    };
+  }
+
+  function columnCssVars(index: number) {
+    const gutter = index === 0 ? 0 : gutterSize;
+    const width = getColumnCssWidth(index);
+    const gutterPixels = `${gutter}px`;
+    const mobileWidth = "100%";
+    const mobileMarginLeft = 0;
+    const marginLeftKey = "margin-left";
+    const sharedStyles = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+    };
+    return {
+      ...sharedStyles,
+      marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
+    } as any as Dictionary<string>;
+  }
+
+  function getWidthForBreakpointSize(size: SizeName) {
+    const breakpointSizes = getSizesForBreakpoints(
+      props.builderContext.content?.meta?.breakpoints || {}
+    );
+    return breakpointSizes[size].max;
+  }
+
+  function columnsStyles() {
+    return `
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
+
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
+        }
+
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${props.builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
+
+          .${props.builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
+  }
+
+  function getAttributes(column: any, index: number) {
+    return {
+      ...{
+        dataSet: {
+          "builder-block-name": "builder-column",
+        },
+      },
+      ...(column.link
+        ? {
+            href: column.link,
+          }
+        : {}),
+      [getClassPropName()]: "builder-column",
+      style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
+    };
+  }
+
+  return (
+    <View
+      style={{
+        ...styles.view1,
+        ...columnsCssVars(),
+      }}
+      {...{
+        dataSet: {
+          "builder-block-name": "builder-columns",
+        },
+      }}
+    >
+      {TARGET !== "reactNative" ? (
+        <InlinedStyles id="builderio-columns" styles={columnsStyles()} />
+      ) : null}
+      {props.columns?.map((column, index) => (
+        <DynamicRenderer
+          key={index}
+          TagName={getTagName(column)}
+          actionAttributes={{}}
+          attributes={getAttributes(column, index)}
+        >
+          <Blocks
+            path={`component.options.columns.${index}.blocks`}
+            parent={props.builderBlock.id}
+            styleProp={{
+              flexGrow: 1,
+            }}
+            context={props.builderContext}
+            registeredComponents={props.builderComponents}
+            linkComponent={props.builderLinkComponent}
+            blocks={column.blocks}
+          />
+        </DynamicRenderer>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({ view1: { display: "flex" } });
+
+export default Columns;

package/src/blocks/columns/columns.types.ts

@@ -0,0 +1,14 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+export type Column = {
+  blocks: BuilderBlock[];
+  width?: number;
+  link?: string;
+};
+type StackColumnsAt = 'tablet' | 'mobile' | 'never';
+export interface ColumnProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
+  columns?: Column[];
+  space?: number;
+  stackColumnsAt?: StackColumnsAt;
+  reverseColumnsWhenStacked?: boolean;
+}

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

@@ -0,0 +1,219 @@
+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

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

package/src/blocks/columns/index.ts

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

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,71 @@
+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

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

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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,2 @@
+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

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