@builder.io/sdk-react-native 0.0.1-6 → 0.0.1-60

package/src/blocks/video/component-info.js

@@ -0,0 +1,107 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Video",
+  canHaveChildren: true,
+  builtIn: 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: "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/src/blocks/video/video.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { View } from "react-native";
+import ReactVideo from "react-native-video";
+function Video(props) {
+  return /* @__PURE__ */ React.createElement(View, {
+    style: { position: "relative" }
+  }, /* @__PURE__ */ React.createElement(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 }
+  }), /* @__PURE__ */ React.createElement(View, {
+    style: {
+      width: "100%",
+      paddingTop: `${props.aspectRatio * 100}%`
+    }
+  }));
+}
+export {
+  Video as default
+};

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { useContext } from "react";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import RenderInlinedStyles from "../render-inlined-styles.js";
+import { convertStyleMaptoCSS } from "../../helpers/css.js";
+import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+function BlockStyles(props) {
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: builderContext.state,
+      context: builderContext.context,
+      evaluateBindings: true
+    });
+  }
+  function css() {
+    const styles = useBlock().responsiveStyles;
+    const largeStyles = styles == null ? void 0 : styles.large;
+    const mediumStyles = styles == null ? void 0 : styles.medium;
+    const smallStyles = styles == null ? void 0 : styles.small;
+    return `
+      ${largeStyles ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}` : ""}
+      ${mediumStyles ? `${getMaxWidthQueryForSize("medium")} {
+            .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
+          }` : ""}
+      ${smallStyles ? `${getMaxWidthQueryForSize("small")} {
+            .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
+          }` : ""}
+    }`;
+  }
+  const builderContext = useContext(BuilderContext);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
+    styles: css()
+  })) : null);
+}
+export {
+  BlockStyles as default
+};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+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());
+};
+export {
+  isEmptyHtmlElement
+};

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

@@ -0,0 +1,171 @@
+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 * as React from "react";
+import { useContext } from "react";
+import BuilderContext from "../../context/builder.context";
+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 { getBlockStyles } from "../../functions/get-block-styles.js";
+import { getBlockTag } from "../../functions/get-block-tag.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import { evaluate } from "../../functions/evaluate.js";
+import BlockStyles from "./block-styles.js";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import RenderComponent from "./render-component.js";
+import RenderRepeatedBlock from "./render-repeated-block.js";
+function RenderBlock(props) {
+  var _a, _b, _c;
+  function component() {
+    var _a2;
+    const componentName = (_a2 = getProcessedBlock({
+      block: props.block,
+      state: builderContext.state,
+      context: builderContext.context,
+      evaluateBindings: false
+    }).component) == null ? void 0 : _a2.name;
+    if (!componentName) {
+      return null;
+    }
+    const ref = builderContext.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;
+    }
+  }
+  function componentInfo() {
+    if (component()) {
+      const _a2 = component(), { component: _ } = _a2, info = __objRest(_a2, ["component"]);
+      return info;
+    } else {
+      return void 0;
+    }
+  }
+  function componentRef() {
+    var _a2;
+    return (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component;
+  }
+  function tagName() {
+    return getBlockTag(useBlock());
+  }
+  function useBlock() {
+    return repeatItemData() ? props.block : getProcessedBlock({
+      block: props.block,
+      state: builderContext.state,
+      context: builderContext.context,
+      evaluateBindings: true
+    });
+  }
+  function attributes() {
+    return __spreadProps(__spreadValues(__spreadValues({}, getBlockProperties(useBlock())), getBlockActions({
+      block: useBlock(),
+      state: builderContext.state,
+      context: builderContext.context
+    })), {
+      style: getBlockStyles(useBlock())
+    });
+  }
+  function shouldWrap() {
+    var _a2;
+    return !((_a2 = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _a2.noWrap);
+  }
+  function componentOptions() {
+    return __spreadValues(__spreadValues({}, getBlockComponentOptions(useBlock())), shouldWrap() ? {} : {
+      attributes: attributes()
+    });
+  }
+  function renderComponentProps() {
+    return {
+      blockChildren: children(),
+      componentRef: componentRef(),
+      componentOptions: componentOptions()
+    };
+  }
+  function children() {
+    var _a2;
+    return (_a2 = useBlock().children) != null ? _a2 : [];
+  }
+  function childrenWithoutParentComponent() {
+    const shouldRenderChildrenOutsideRef = !componentRef() && !repeatItemData();
+    return shouldRenderChildrenOutsideRef ? children() : [];
+  }
+  function repeatItemData() {
+    const _a2 = props.block, { repeat } = _a2, blockWithoutRepeat = __objRest(_a2, ["repeat"]);
+    if (!(repeat == null ? void 0 : repeat.collection)) {
+      return void 0;
+    }
+    const { collection, itemName } = repeat;
+    const itemsArray = evaluate({
+      code: collection,
+      state: builderContext.state,
+      context: builderContext.context
+    });
+    if (Array.isArray(itemsArray)) {
+      const collectionName = collection.split(".").pop();
+      const itemNameToUse = itemName || (collectionName ? collectionName + "Item" : "item");
+      const repeatArray = itemsArray.map((item, index) => ({
+        context: __spreadProps(__spreadValues({}, builderContext), {
+          state: __spreadProps(__spreadValues({}, builderContext.state), {
+            $index: index,
+            $item: item,
+            [itemNameToUse]: item,
+            [`$${itemNameToUse}Index`]: index
+          })
+        }),
+        block: blockWithoutRepeat
+      }));
+      return repeatArray;
+    } else {
+      return void 0;
+    }
+  }
+  const builderContext = useContext(BuilderContext);
+  const TagNameRef = tagName();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldWrap() ? /* @__PURE__ */ React.createElement(React.Fragment, null, !isEmptyHtmlElement(tagName()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()), repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
+    key: index,
+    repeatContext: data.context,
+    block: data.block
+  }))) : /* @__PURE__ */ React.createElement(RenderComponent, __spreadValues({}, renderComponentProps())), (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: "render-block-" + child.id,
+    block: child
+  })), (_c = childrenWithoutParentComponent()) == null ? void 0 : _c.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
+    key: "block-style-" + child.id,
+    block: child
+  })))) : /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()))) : /* @__PURE__ */ React.createElement(RenderComponent, __spreadValues({}, renderComponentProps())));
+}
+export {
+  RenderBlock as default
+};

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

@@ -0,0 +1,33 @@
+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 * as React from "react";
+import BlockStyles from "./block-styles.js";
+import RenderBlock from "./render-block.js";
+function RenderComponent(props) {
+  var _a, _b;
+  const ComponentRefRef = props.componentRef;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.componentRef ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadValues({}, props.componentOptions), (_a = props.blockChildren) == null ? void 0 : _a.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: "render-block-" + child.id,
+    block: child
+  })), (_b = props.blockChildren) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(BlockStyles, {
+    key: "block-style-" + child.id,
+    block: child
+  })))) : null);
+}
+export {
+  RenderComponent as default
+};

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+import BuilderContext from "../../context/builder.context";
+import RenderBlock from "./render-block.js";
+function RenderRepeatedBlock(props) {
+  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
+    value: {
+      get content() {
+        return props.repeatContext.content;
+      },
+      get state() {
+        return props.repeatContext.state;
+      },
+      get context() {
+        return props.repeatContext.context;
+      },
+      get apiKey() {
+        return props.repeatContext.apiKey;
+      },
+      get registeredComponents() {
+        return props.repeatContext.registeredComponents;
+      }
+    }
+  }, /* @__PURE__ */ React.createElement(RenderBlock, {
+    block: props.block
+  }));
+}
+export {
+  RenderRepeatedBlock as default
+};

package/src/components/render-blocks.js

@@ -1,13 +1,18 @@
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
-import { isEditing } from "../functions/is-editing";
-import RenderBlock from "./render-block";
+import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles.js";
+import RenderBlock from "./render-block/render-block.js";
 function RenderBlocks(props) {
-  var _a;
+  var _a, _b;
+  function className() {
+    var _a2;
+    return "builder-blocks" + (!((_a2 = props.blocks) == null ? void 0 : _a2.length) ? " no-blocks" : "");
+  }
   function onClick() {
-    var _a2, _b;
+    var _a2, _b2;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b = window.parent) == null ? void 0 : _b.postMessage({
+      (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
         type: "builder.clickEmptyBlocks",
         data: {
           parentElementId: props.parent,
@@ -17,9 +22,9 @@ function RenderBlocks(props) {
     }
   }
   function onMouseEnter() {
-    var _a2, _b;
+    var _a2, _b2;
     if (isEditing() && !((_a2 = props.blocks) == null ? void 0 : _a2.length)) {
-      (_b = window.parent) == null ? void 0 : _b.postMessage({
+      (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
         type: "builder.hoverEmptyBlocks",
         data: {
           parentElementId: props.parent,
@@ -29,15 +34,21 @@ function RenderBlocks(props) {
     }
   }
   return /* @__PURE__ */ React.createElement(View, {
-    className: "builder-blocks" + (!((_a = props.blocks) == null ? void 0 : _a.length) ? " no-blocks" : ""),
     "builder-path": props.path,
     "builder-parent-id": props.parent,
-    onClick: (event) => onClick,
-    onMouseEnter: (event) => onMouseEnter,
+    dataSet: {
+      class: className()
+    },
+    onClick: (event) => onClick(),
+    onMouseEnter: (event) => onMouseEnter(),
     style: styles.view1
-  }, props.blocks.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = props.blocks) == null ? void 0 : _a.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: "render-block-" + block.id,
+    block
+  }))) : null, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = props.blocks) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(BlockStyles, {
+    key: "block-style-" + block.id,
     block
-  })));
+  }))) : null);
 }
 const styles = StyleSheet.create({
   view1: { display: "flex", flexDirection: "column", alignItems: "stretch" }

package/src/components/render-content/components/render-styles.js

@@ -0,0 +1,58 @@
+import * as React from "react";
+import RenderInlinedStyles from "../../render-inlined-styles.js";
+function RenderContentStyles(props) {
+  function getCssFromFont(font) {
+    var _a, _b;
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.regular;
+    let str = "";
+    if (url && family && name) {
+      str += `
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
+    }
+    if (font.files) {
+      for (const weight in font.files) {
+        const isNumber = String(Number(weight)) === weight;
+        if (!isNumber) {
+          continue;
+        }
+        const weightUrl = font.files[weight];
+        if (weightUrl && weightUrl !== url) {
+          str += `
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
+        }
+      }
+    }
+    return str;
+  }
+  function getFontCss({ customFonts }) {
+    var _a;
+    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+  }
+  function injectedStyles() {
+    return `
+${props.cssCode || ""}
+${getFontCss({
+      customFonts: props.customFonts
+    })}`;
+  }
+  return /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
+    styles: injectedStyles()
+  });
+}
+export {
+  RenderContentStyles as default
+};

package/src/components/render-content/index.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { default as default2 } from "./render-content.js";
+export {
+  default2 as default
+};