@builder.io/sdk-react-native 0.1.1 → 0.1.3

package/src/blocks/section/section.jsx

@@ -0,0 +1,29 @@
+import BaseText from "../BaseText";
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+
+export default function SectionComponent(props) {
+  return (
+    <View
+      {...props.attributes}
+      style={{
+        width: "100%",
+        alignSelf: "stretch",
+        flexGrow: "1",
+        boxSizing: "border-box",
+        maxWidth: `${
+          props.maxWidth && typeof props.maxWidth === "number"
+            ? props.maxWidth
+            : 1200
+        }px`,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        marginLeft: "auto",
+        marginRight: "auto",
+      }}
+    >
+      <BaseText>{props.children}</BaseText>
+    </View>
+  );
+}

package/src/blocks/select/select.jsx

@@ -0,0 +1,24 @@
+import BaseText from "../BaseText";
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { isEditing } from "../../functions/is-editing.js";
+
+export default function SelectComponent(props) {
+  return (
+    <View
+      {...props.attributes}
+      value={props.value}
+      key={
+        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
+      }
+      defaultValue={props.defaultValue}
+      name={props.name}
+    >
+      {props.options?.map((option) => (
+        <View value={option.value}>
+          <BaseText>{option.name || option.value}</BaseText>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/blocks/submit-button/submit-button.jsx

@@ -0,0 +1,11 @@
+import BaseText from "../BaseText";
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+
+export default function SubmitButton(props) {
+  return (
+    <View type="submit" {...props.attributes}>
+      <BaseText>{props.text}</BaseText>
+    </View>
+  );
+}

package/src/blocks/symbol/symbol.jsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useState, useContext, useEffect } from "react";
+import RenderContent from "../../components/render-content/render-content.js";
+import BuilderContext from "../../context/builder.context.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { TARGET } from "../../constants/target";
+
+export default function Symbol(props) {
+  function className() {
+    return [
+      ...(TARGET === "vue2" || TARGET === "vue3"
+        ? Object.keys(props.attributes.class)
+        : [props.attributes.class]),
+      "builder-symbol",
+      props.symbol?.inline ? "builder-inline-symbol" : undefined,
+      props.symbol?.dynamic || props.dynamic
+        ? "builder-dynamic-symbol"
+        : undefined,
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
+
+  const [fetchedContent, setFetchedContent] = useState(() => null);
+
+  function contentToUse() {
+    return props.symbol?.content || fetchedContent;
+  }
+
+  const builderContext = useContext(BuilderContext);
+
+  useEffect(() => {
+    const symbolToUse = props.symbol;
+
+    /**
+     * If:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */
+    if (
+      symbolToUse &&
+      !symbolToUse.content &&
+      !fetchedContent &&
+      symbolToUse.model &&
+      // This is a hack, we should not need to check for this, but it is needed for Svelte.
+      builderContext?.apiKey
+    ) {
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext.apiKey,
+        query: {
+          id: symbolToUse.entry,
+        },
+      }).then((response) => {
+        setFetchedContent(response);
+      });
+    }
+  }, [props.symbol, fetchedContent]);
+
+  return (
+    <View
+      {...props.attributes}
+      dataSet={{
+        class: className(),
+      }}
+    >
+      <RenderContent
+        apiKey={builderContext.apiKey}
+        context={builderContext.context}
+        customComponents={Object.values(builderContext.registeredComponents)}
+        data={{
+          ...props.symbol?.data,
+          ...builderContext.state,
+          ...props.symbol?.content?.data?.state,
+        }}
+        model={props.symbol?.model}
+        content={contentToUse()}
+      />
+    </View>
+  );
+}

package/src/blocks/text/text.jsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import HTML from 'react-native-render-html';
+import BuilderContext from '../../context/builder.context';
+
+/**
+ * @typedef {{}} BuilderBlock
+ */
+
+/**
+ * 
+ * @param {string} string 
+ * @returns {string}
+ */
+function camelToKebabCase(string) {
+  return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * 
+ * @param {object} object 
+ * @param {string[]} keys 
+ * @returns {object}
+ */
+function pick(object, keys) {
+  return keys.reduce((obj, key) => {
+    // eslint-disable-next-line no-prototype-builtins
+    if (object && object.hasOwnProperty(key)) {
+      obj[key] = object[key];
+    }
+    return obj;
+  }, {});
+}
+
+const PICK_STYLES = ['textAlign'];
+
+/**
+ * @param {BuilderBlock} block 
+ * @returns 
+ */
+function getBlockStyles(block) {
+  // TODO: responsive CSS using react native viewport width hooks
+  const styles = {
+    ...block.responsiveStyles?.large,
+    ...(block).styles,
+  };
+
+  if (block.responsiveStyles?.medium) {
+    Object.assign(styles, block.responsiveStyles.medium);
+  }
+  if (block.responsiveStyles?.small) {
+    Object.assign(styles, block.responsiveStyles.small);
+  }
+
+  return styles;
+}
+
+/**
+ * 
+ * @param {BuilderBlock} block 
+ * @param {any} inheritedStyles 
+ * @returns 
+ */
+function getCss(block, inheritedStyles) {
+  const styleObject = {
+    ...inheritedStyles,
+    ...pick(getBlockStyles(block), PICK_STYLES)
+  };
+  if (!styleObject) {
+    return '';
+  }
+
+  let str = ``;
+
+  for (const key in styleObject) {
+    const value = styleObject[key];
+    if (typeof value === 'string') {
+      str += `${camelToKebabCase(key)}: ${value};`;
+    }
+  }
+
+  return str;
+}
+
+/**
+ * 
+ * @param {{ text: string; builderBlock: BuilderBlock}} props 
+ * @returns 
+ */
+export default function Text(props) {
+  const builderContext = React.useContext(BuilderContext);
+  return (
+    <HTML
+      source={{
+        html: `<div style="${getCss(props.builderBlock, builderContext.inheritedStyles)}">${
+          props.text || ''
+        }</div>`,
+      }}
+    />
+  );
+}

package/src/blocks/textarea/textarea.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+
+export default function Textarea(props) {
+  return (
+    <View
+      {...props.attributes}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+    />
+  );
+}

package/src/blocks/video/video.jsx

@@ -0,0 +1,70 @@
+// TO-DO: This file breaks due to this issue:
+// https://github.com/expo/web-examples/issues/73
+// For now, we do not import it elsewhere to avoid crashing Expo servers on web when importing the SDK.
+import * as React from 'react';
+import { View } from 'react-native';
+import ReactVideo from 'react-native-video';
+
+// Subset of Image props, many are irrelevant for native (such as altText, etc)
+/**
+ * 
+ * @typedef {{
+ *   attributes?: any;
+ *   video?: string;
+ *   autoPlay?: boolean;
+ *   controls?: boolean;
+ *   muted?: boolean;
+ *   loop?: boolean;
+ *   playsInline?: boolean;
+ *   aspectRatio?: number;
+ *   fit?: 'contain' | 'cover' | 'stretch';
+ *   position?:
+ *     | 'center'
+ *     | 'top'
+ *     | 'left'
+ *     | 'right'
+ *     | 'bottom'
+ *     | 'top left'
+ *     | 'top right'
+ *     | 'bottom left'
+ *     | 'bottom right';
+ *   posterImage?: string;
+ *   children?: any;
+ * }} VideoProps
+ */
+
+// TODO: support children by wrapping in a View
+
+/**
+ * @param {VideoProps} props
+ */
+export default function Video(props) {
+  return (
+    <View style={{ position: 'relative' }}>
+      <ReactVideo
+        paused={!props.autoPlay}
+        controls={props.controls}
+        muted={props.muted}
+        repeat={props.loop}
+        poster={props.posterImage}
+        posterResizeMode={props.fit || 'contain'}
+        resizeMode={props.fit || ('contain')}
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1,
+        }}
+        source={{ uri: props.video }}
+      />
+      <View
+        style={{
+          width: '100%',
+          paddingTop: `${props.aspectRatio * 100}%`,
+        }}
+      />
+    </View>
+  );
+}

package/src/components/render-block/block-styles.jsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints,
+} from "../../constants/device-sizes.js";
+import { TARGET } from "../../constants/target.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import { createCssClass } from "../../helpers/css.js";
+import RenderInlinedStyles from "../render-inlined-styles.js";
+
+export default function BlockStyles(props) {
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: props.context.state,
+      context: props.context.context,
+      shouldEvaluateBindings: true,
+    });
+  }
+
+  function css() {
+    const styles = useBlock().responsiveStyles;
+    const content = props.context.content;
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
+      content?.meta?.breakpoints || {}
+    );
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    const className = useBlock().id;
+    const largeStylesClass = largeStyles
+      ? createCssClass({
+          className,
+          styles: largeStyles,
+        })
+      : "";
+    const mediumStylesClass = mediumStyles
+      ? createCssClass({
+          className,
+          styles: mediumStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "medium",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const smallStylesClass = smallStyles
+      ? createCssClass({
+          className,
+          styles: smallStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "small",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+  }
+
+  return (
+    <>
+      {TARGET !== "reactNative" && css() ? (
+        <>
+          <RenderInlinedStyles styles={css()} />
+        </>
+      ) : null}
+    </>
+  );
+}

package/src/components/render-block/render-block.helpers.js

@@ -1,3 +1,36 @@
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { evaluate } from "../../functions/evaluate";
+import { getProcessedBlock } from "../../functions/get-processed-block";
 const EMPTY_HTML_ELEMENTS = [
   "area",
   "base",
@@ -18,6 +51,63 @@ const EMPTY_HTML_ELEMENTS = [
 const isEmptyHtmlElement = (tagName) => {
   return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
 };
+const getComponent = ({
+  block,
+  context
+}) => {
+  var _a;
+  const componentName = (_a = getProcessedBlock({
+    block,
+    state: context.state,
+    context: context.context,
+    shouldEvaluateBindings: false
+  }).component) == null ? void 0 : _a.name;
+  if (!componentName) {
+    return null;
+  }
+  const ref = context.registeredComponents[componentName];
+  if (!ref) {
+    console.warn(`
+      Could not find a registered component named "${componentName}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+    return void 0;
+  } else {
+    return ref;
+  }
+};
+const getRepeatItemData = ({
+  block,
+  context
+}) => {
+  const _a = block, { repeat } = _a, blockWithoutRepeat = __objRest(_a, ["repeat"]);
+  if (!(repeat == null ? void 0 : repeat.collection)) {
+    return void 0;
+  }
+  const itemsArray = evaluate({
+    code: repeat.collection,
+    state: context.state,
+    context: context.context
+  });
+  if (!Array.isArray(itemsArray)) {
+    return void 0;
+  }
+  const collectionName = repeat.collection.split(".").pop();
+  const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+  const repeatArray = itemsArray.map((item, index) => ({
+    context: __spreadProps(__spreadValues({}, context), {
+      state: __spreadProps(__spreadValues({}, context.state), {
+        $index: index,
+        $item: item,
+        [itemNameToUse]: item,
+        [`$${itemNameToUse}Index`]: index
+      })
+    }),
+    block: blockWithoutRepeat
+  }));
+  return repeatArray;
+};
 export {
+  getComponent,
+  getRepeatItemData,
   isEmptyHtmlElement
 };

package/src/components/render-block/render-block.jsx

@@ -0,0 +1,183 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useState } from "react";
+import { getBlockActions } from "../../functions/get-block-actions.js";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+import { getBlockProperties } from "../../functions/get-block-properties.js";
+import { getBlockTag } from "../../functions/get-block-tag.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import BlockStyles from "./block-styles.js";
+import {
+  getComponent,
+  getRepeatItemData,
+  isEmptyHtmlElement,
+} from "./render-block.helpers.js";
+import RenderRepeatedBlock from "./render-repeated-block.js";
+import { TARGET } from "../../constants/target.js";
+import { extractTextStyles } from "../../functions/extract-text-styles.js";
+import RenderComponent from "./render-component.js";
+import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+
+export default function RenderBlock(props) {
+  const [component, setComponent] = useState(() =>
+    getComponent({
+      block: props.block,
+      context: props.context,
+    })
+  );
+
+  function tag() {
+    return getBlockTag(useBlock());
+  }
+
+  function useBlock() {
+    return repeatItemData
+      ? props.block
+      : getProcessedBlock({
+          block: props.block,
+          state: props.context.state,
+          context: props.context.context,
+          shouldEvaluateBindings: true,
+        });
+  }
+
+  function actions() {
+    return getBlockActions({
+      block: useBlock(),
+      state: props.context.state,
+      context: props.context.context,
+    });
+  }
+
+  function attributes() {
+    const blockProperties = getBlockProperties(useBlock());
+    return {
+      ...blockProperties,
+      ...(TARGET === "reactNative"
+        ? {
+            style: getReactNativeBlockStyles({
+              block: useBlock(),
+              context: props.context,
+              blockStyles: blockProperties.style,
+            }),
+          }
+        : {}),
+    };
+  }
+
+  function renderComponentProps() {
+    return {
+      blockChildren: useBlock().children ?? [],
+      componentRef: component?.component,
+      componentOptions: {
+        ...getBlockComponentOptions(useBlock()),
+        /**
+         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+         * they are provided to the component itself directly.
+         */
+        ...(!component?.noWrap
+          ? {}
+          : {
+              attributes: {
+                ...attributes(),
+                ...actions(),
+              },
+            }),
+        customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
+      },
+      context: childrenContext(),
+    };
+  }
+
+  function childrenWithoutParentComponent() {
+    /**
+     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+     * we render them outside of `componentRef`.
+     * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+     * blocks, and the children will be repeated within those blocks.
+     */
+    const shouldRenderChildrenOutsideRef =
+      !component?.component && !repeatItemData;
+    return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
+  }
+
+  const [repeatItemData, setRepeatItemData] = useState(() =>
+    getRepeatItemData({
+      block: props.block,
+      context: props.context,
+    })
+  );
+
+  function childrenContext() {
+    const getInheritedTextStyles = () => {
+      if (TARGET !== "reactNative") {
+        return {};
+      }
+      return extractTextStyles(
+        getReactNativeBlockStyles({
+          block: useBlock(),
+          context: props.context,
+          blockStyles: attributes().style,
+        })
+      );
+    };
+    return {
+      apiKey: props.context.apiKey,
+      state: props.context.state,
+      content: props.context.content,
+      context: props.context.context,
+      registeredComponents: props.context.registeredComponents,
+      inheritedStyles: getInheritedTextStyles(),
+    };
+  }
+
+  return (
+    <>
+      {!component?.noWrap ? (
+        <>
+          {isEmptyHtmlElement(tag()) ? (
+            <>
+              <View {...attributes()} {...actions()} />
+            </>
+          ) : null}
+          {!isEmptyHtmlElement(tag()) && repeatItemData ? (
+            <>
+              {repeatItemData?.map((data, index) => (
+                <RenderRepeatedBlock
+                  key={index}
+                  repeatContext={data.context}
+                  block={data.block}
+                />
+              ))}
+            </>
+          ) : null}
+          {!isEmptyHtmlElement(tag()) && !repeatItemData ? (
+            <>
+              <View {...attributes()} {...actions()}>
+                <RenderComponent {...renderComponentProps()} />
+
+                {childrenWithoutParentComponent()?.map((child) => (
+                  <RenderBlock
+                    key={"render-block-" + child.id}
+                    block={child}
+                    context={childrenContext()}
+                  />
+                ))}
+
+                {childrenWithoutParentComponent()?.map((child) => (
+                  <BlockStyles
+                    key={"block-style-" + child.id}
+                    block={child}
+                    context={childrenContext()}
+                  />
+                ))}
+              </View>
+            </>
+          ) : null}
+        </>
+      ) : (
+        <RenderComponent {...renderComponentProps()} />
+      )}
+    </>
+  );
+}