@builder.io/sdk-react-native 0.7.1-1 → 0.7.2

package/lib/browser/commonjs/blocks/video/component-info.js.flow

@@ -1,83 +0,0 @@
-const componentInfo = {
-  name: "Video",
-  canHaveChildren: true,
-  defaultStyles: {
-    minHeight: "20px",
-    minWidth: "20px"
-  },
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
-  inputs: [{
-    name: "video",
-    type: "file",
-    allowedFileTypes: ["mp4"],
-    bubble: true,
-    defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
-    required: true
-  }, {
-    name: "posterImage",
-    type: "file",
-    allowedFileTypes: ["jpeg", "png"],
-    helperText: "Image to show before the video plays"
-  }, {
-    name: "autoPlay",
-    type: "boolean",
-    defaultValue: true
-  }, {
-    name: "controls",
-    type: "boolean",
-    defaultValue: false
-  }, {
-    name: "muted",
-    type: "boolean",
-    defaultValue: true
-  }, {
-    name: "loop",
-    type: "boolean",
-    defaultValue: true
-  }, {
-    name: "playsInline",
-    type: "boolean",
-    defaultValue: true
-  }, {
-    name: "fit",
-    type: "text",
-    defaultValue: "cover",
-    enum: ["contain", "cover", "fill", "auto"]
-  }, {
-    name: "preload",
-    type: "text",
-    defaultValue: "metadata",
-    enum: ["auto", "metadata", "none"]
-  }, {
-    name: "fitContent",
-    type: "boolean",
-    helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
-    defaultValue: true,
-    advanced: true
-  }, {
-    name: "position",
-    type: "text",
-    defaultValue: "center",
-    enum: ["center", "top", "left", "right", "bottom", "top left", "top right", "bottom left", "bottom right"]
-  }, {
-    name: "height",
-    type: "number",
-    advanced: true
-  }, {
-    name: "width",
-    type: "number",
-    advanced: true
-  }, {
-    name: "aspectRatio",
-    type: "number",
-    advanced: true,
-    defaultValue: 0.7004048582995948
-  }, {
-    name: "lazyLoad",
-    type: "boolean",
-    helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
-    defaultValue: true,
-    advanced: true
-  }]
-};
-export { componentInfo }

package/lib/browser/commonjs/blocks/video/video.js.flow

@@ -1,70 +0,0 @@
-// 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/lib/browser/commonjs/components/block/block.helpers.js.flow

@@ -1,99 +0,0 @@
-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/index.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-const EMPTY_HTML_ELEMENTS = ["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"];
-const isEmptyHtmlElement = tagName => {
-  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
-};
-const getComponent = ({
-  block,
-  context,
-  registeredComponents
-}) => {
-  var _a;
-  const componentName = (_a = getProcessedBlock({
-    block,
-    localState: context.localState,
-    rootState: context.rootState,
-    rootSetState: context.rootSetState,
-    context: context.context,
-    shouldEvaluateBindings: false
-  }).component) == null ? void 0 : _a.name;
-  if (!componentName) {
-    return null;
-  }
-  const ref = 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,
-    localState: context.localState,
-    rootState: context.rootState,
-    rootSetState: context.rootSetState,
-    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), {
-      localState: __spreadProps(__spreadValues({}, context.localState), {
-        $index: index,
-        $item: item,
-        [itemNameToUse]: item,
-        [`$${itemNameToUse}Index`]: index
-      })
-    }),
-    block: blockWithoutRepeat
-  }));
-  return repeatArray;
-};
-export { getComponent, getRepeatItemData, isEmptyHtmlElement }

package/lib/browser/commonjs/components/block/block.js.flow

@@ -1,190 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { useState } from "react";
-import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./components/block-styles";
-import {
-  getComponent,
-  getRepeatItemData,
-  isEmptyHtmlElement,
-} from "./block.helpers.js";
-import RepeatedBlock from "./components/repeated-block";
-import { extractTextStyles } from "../../functions/extract-text-styles.js";
-import ComponentRef from "./components/component-ref/component-ref";
-import BlockWrapper from "./components/block-wrapper";
-
-function Block(props) {
-  function blockComponent() {
-    return getComponent({
-      block: props.block,
-      context: props.context,
-      registeredComponents: props.registeredComponents,
-    });
-  }
-
-  function repeatItem() {
-    return getRepeatItemData({
-      block: props.block,
-      context: props.context,
-    });
-  }
-
-  function processedBlock() {
-    return repeatItem()
-      ? props.block
-      : getProcessedBlock({
-          block: props.block,
-          localState: props.context.localState,
-          rootState: props.context.rootState,
-          rootSetState: props.context.rootSetState,
-          context: props.context.context,
-          shouldEvaluateBindings: true,
-        });
-  }
-
-  function Tag() {
-    return View;
-  }
-
-  function canShowBlock() {
-    if ("hide" in processedBlock()) {
-      return !processedBlock().hide;
-    }
-    if ("show" in processedBlock()) {
-      return processedBlock().show;
-    }
-    return true;
-  }
-
-  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 =
-      !blockComponent?.()?.component && !repeatItem();
-    return shouldRenderChildrenOutsideRef
-      ? processedBlock().children ?? []
-      : [];
-  }
-
-  function componentRefProps() {
-    return {
-      blockChildren: processedBlock().children ?? [],
-      componentRef: blockComponent?.()?.component,
-      componentOptions: {
-        ...getBlockComponentOptions(processedBlock()),
-        builderContext: props.context,
-        ...(blockComponent?.()?.name === "Symbol" ||
-        blockComponent?.()?.name === "Columns"
-          ? {
-              builderComponents: props.registeredComponents,
-            }
-          : {}),
-      },
-      context: childrenContext,
-      registeredComponents: props.registeredComponents,
-      builderBlock: processedBlock(),
-      includeBlockProps: blockComponent?.()?.noWrap === true,
-      isInteractive: !blockComponent?.()?.isRSC,
-    };
-  }
-
-  const [childrenContext, setChildrenContext] = useState(() => ({
-    apiKey: props.context.apiKey,
-    apiVersion: props.context.apiVersion,
-    localState: props.context.localState,
-    rootState: props.context.rootState,
-    rootSetState: props.context.rootSetState,
-    content: props.context.content,
-    context: props.context.context,
-    componentInfos: props.context.componentInfos,
-    inheritedStyles: extractTextStyles(
-      getBlockProperties({
-        block: processedBlock(),
-        context: props.context,
-      }).style || {}
-    ),
-  }));
-
-  return (
-    <>
-      {canShowBlock() ? (
-        <>
-          {!blockComponent?.()?.noWrap ? (
-            <>
-              {isEmptyHtmlElement(Tag()) ? (
-                <>
-                  <BlockWrapper
-                    Wrapper={Tag()}
-                    block={processedBlock()}
-                    context={props.context}
-                    hasChildren={false}
-                  />
-                </>
-              ) : null}
-              {!isEmptyHtmlElement(Tag()) && repeatItem() ? (
-                <>
-                  {repeatItem()?.map((data, index) => (
-                    <RepeatedBlock
-                      key={index}
-                      repeatContext={data.context}
-                      block={data.block}
-                      registeredComponents={props.registeredComponents}
-                    />
-                  ))}
-                </>
-              ) : null}
-              {!isEmptyHtmlElement(Tag()) && !repeatItem() ? (
-                <>
-                  <BlockWrapper
-                    Wrapper={Tag()}
-                    block={processedBlock()}
-                    context={props.context}
-                    hasChildren={true}
-                  >
-                    <ComponentRef {...componentRefProps()} />
-
-                    {childrenWithoutParentComponent()?.map((child) => (
-                      <Block
-                        key={"block-" + child.id}
-                        block={child}
-                        context={childrenContext}
-                        registeredComponents={props.registeredComponents}
-                      />
-                    ))}
-
-                    {childrenWithoutParentComponent()?.map((child) => (
-                      <BlockStyles
-                        key={"block-style-" + child.id}
-                        block={child}
-                        context={childrenContext}
-                      />
-                    ))}
-                  </BlockWrapper>
-                </>
-              ) : null}
-            </>
-          ) : (
-            <>
-              <ComponentRef {...componentRefProps()} />
-            </>
-          )}
-        </>
-      ) : null}
-    </>
-  );
-}
-
-export default Block;

package/lib/browser/commonjs/components/block/components/block-styles.js.flow

@@ -1,101 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  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 { checkIsDefined } from "../../../helpers/nullable.js";
-import InlinedStyles from "../../inlined-styles";
-
-function BlockStyles(props) {
-  function canShowBlock() {
-    const processedBlock = getProcessedBlock({
-      block: props.block,
-      localState: props.context.localState,
-      rootState: props.context.rootState,
-      rootSetState: props.context.rootSetState,
-      context: props.context.context,
-      shouldEvaluateBindings: true,
-    });
-    // only render styles for blocks that are visible
-    if (checkIsDefined(processedBlock.hide)) {
-      return !processedBlock.hide;
-    }
-    if (checkIsDefined(processedBlock.show)) {
-      return processedBlock.show;
-    }
-    return true;
-  }
-
-  function css() {
-    const processedBlock = getProcessedBlock({
-      block: props.block,
-      localState: props.context.localState,
-      rootState: props.context.rootState,
-      rootSetState: props.context.rootSetState,
-      context: props.context.context,
-      shouldEvaluateBindings: true,
-    });
-    const styles = processedBlock.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 = processedBlock.id;
-    if (!className) {
-      return "";
-    }
-    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() && canShowBlock() ? (
-        <>
-          <InlinedStyles styles={css()} />
-        </>
-      ) : null}
-    </>
-  );
-}
-
-export default BlockStyles;

package/lib/browser/commonjs/components/block/components/block-wrapper.js.flow

@@ -1,57 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { getBlockActions } from "../../../functions/get-block-actions.js";
-import { getBlockProperties } from "../../../functions/get-block-properties.js";
-
-function BlockWrapper(props) {
-  return (
-    <>
-      {props.hasChildren ? (
-        <>
-          <props.Wrapper
-            {...getBlockProperties({
-              block: props.block,
-              context: props.context,
-            })}
-            {...getBlockActions({
-              block: props.block,
-              rootState: props.context.rootState,
-              rootSetState: props.context.rootSetState,
-              localState: props.context.localState,
-              context: props.context.context,
-              stripPrefix: true,
-            })}
-          >
-            {props.children}
-          </props.Wrapper>
-        </>
-      ) : (
-        <>
-          <props.Wrapper
-            {...getBlockProperties({
-              block: props.block,
-              context: props.context,
-            })}
-            {...getBlockActions({
-              block: props.block,
-              rootState: props.context.rootState,
-              rootSetState: props.context.rootSetState,
-              localState: props.context.localState,
-              context: props.context.context,
-              stripPrefix: true,
-            })}
-          />
-        </>
-      )}
-    </>
-  );
-}
-
-export default BlockWrapper;

package/lib/browser/commonjs/components/block/components/component-ref/component-ref.helpers.js.flow

@@ -1,41 +0,0 @@
-var __defProp = Object.defineProperty;
-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;
-};
-import { getBlockProperties } from "../../../../functions/get-block-properties.js";
-const getWrapperProps = ({
-  componentOptions,
-  builderBlock,
-  context,
-  componentRef,
-  includeBlockProps,
-  isInteractive,
-  contextValue
-}) => {
-  const interactiveElementProps = {
-    Wrapper: componentRef,
-    block: builderBlock,
-    context,
-    wrapperProps: componentOptions
-  };
-  return isInteractive ? interactiveElementProps : __spreadValues(__spreadValues({}, componentOptions), includeBlockProps ? {
-    attributes: getBlockProperties({
-      block: builderBlock,
-      context: contextValue
-    })
-  } : {});
-};
-export { getWrapperProps }