@builder.io/sdk-react-native 0.0.1-50 → 0.0.1-53

package/src/blocks/{text.js → text/text.js}

@@ -16,7 +16,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import HTML from "react-native-render-html";
-import { registerComponent } from "../functions/register-component";
 function camelToKebabCase(string) {
   return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
 }
@@ -61,27 +60,6 @@ function Text(props) {
     }
   });
 }
-registerComponent(Text, {
-  name: "Text",
-  static: true,
-  builtIn: true,
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
-  inputs: [
-    {
-      name: "text",
-      type: "html",
-      required: true,
-      autoFocus: true,
-      bubble: true,
-      defaultValue: "Enter some text..."
-    }
-  ],
-  defaultStyles: {
-    lineHeight: "normal",
-    height: "auto",
-    textAlign: "center"
-  }
-});
 export {
   Text as default
 };

package/src/blocks/{text.lite.tsx → text/text.lite.tsx}

@@ -2,5 +2,5 @@ import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
 export default function Text(props) {
-  return <View dangerouslySetInnerHTML={{ __html: "props.text" }} />;
+  return <View dangerouslySetInnerHTML={{ __html: props.text }} />;
 }

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Form:TextArea",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
+  inputs: [
+    {
+      advanced: true,
+      name: "value",
+      type: "string"
+    },
+    {
+      name: "name",
+      type: "string",
+      required: true,
+      helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
+    },
+    {
+      name: "defaultValue",
+      type: "string"
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      defaultValue: "Hello there"
+    },
+    {
+      name: "required",
+      type: "boolean",
+      defaultValue: false
+    }
+  ],
+  defaultStyles: {
+    paddingTop: "10px",
+    paddingBottom: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    borderRadius: "3px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#ccc"
+  },
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/textarea/textarea.js

@@ -0,0 +1,32 @@
+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 } from "react-native";
+function Textarea(props) {
+  return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+    placeholder: props.placeholder,
+    name: props.name,
+    value: props.value,
+    defaultValue: props.defaultValue
+  }));
+}
+export {
+  Textarea as default
+};

package/src/blocks/{video.js → video/component-info.js}

@@ -1,46 +1,13 @@
 import * as React from 'react';
-import { View } from "react-native";
-import ReactVideo from "react-native-video";
-import { registerComponent } from "../functions/register-component";
-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}%`
-    }
-  }));
-}
-registerComponent(Video, {
+const componentInfo = {
   name: "Video",
-  static: true,
+  canHaveChildren: true,
   builtIn: true,
-  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
   defaultStyles: {
-    position: "relative",
     minHeight: "20px",
-    minWidth: "20px",
-    overflow: "hidden"
+    minWidth: "20px"
   },
-  canHaveChildren: true,
+  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",
@@ -76,20 +43,65 @@ registerComponent(Video, {
       type: "boolean",
       defaultValue: true
     },
+    {
+      name: "playsInline",
+      type: "boolean",
+      defaultValue: true
+    },
     {
       name: "fit",
       type: "text",
       defaultValue: "cover",
-      enum: ["contain", "cover", "stretch"]
+      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 {
-  Video as default
+  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,29 @@
+import * as React from "react";
+import RenderInlinedStyles from "../render-inlined-styles.js";
+function BlockStyles(props) {
+  function camelToKebabCase(string) {
+    return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  }
+  function css() {
+    var _a;
+    const styleObject = (_a = props.block.responsiveStyles) == null ? void 0 : _a.large;
+    if (!styleObject) {
+      return "";
+    }
+    let str = `.${props.block.id} {`;
+    for (const key in styleObject) {
+      const value = styleObject[key];
+      if (typeof value === "string") {
+        str += `${camelToKebabCase(key)}: ${value};`;
+      }
+    }
+    str += "}";
+    return str;
+  }
+  return /* @__PURE__ */ React.createElement(RenderInlinedStyles, {
+    styles: css()
+  });
+}
+export {
+  BlockStyles as default
+};

package/src/components/render-block/block-styles.lite.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import RenderInlinedStyles from "../render-inlined-styles.lite";
+
+export default function BlockStyles(props) {
+  function camelToKebabCase(string) {
+    return string
+      .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
+      .toLowerCase();
+  }
+
+  function css() {
+    // TODO: media queries
+    const styleObject = props.block.responsiveStyles?.large;
+
+    if (!styleObject) {
+      return "";
+    }
+
+    let str = `.${props.block.id} {`;
+
+    for (const key in styleObject) {
+      const value = styleObject[key];
+
+      if (typeof value === "string") {
+        str += `${camelToKebabCase(key)}: ${value};`;
+      }
+    }
+
+    str += "}";
+    return str;
+  }
+
+  return <RenderInlinedStyles styles={css()} />;
+}

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.js → render-block/render-block.js}

@@ -19,30 +19,33 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import { useContext } from "react";
-import { getBlockComponentOptions } from "../functions/get-block-component-options";
-import { getBlockProperties } from "../functions/get-block-properties";
-import { getBlockStyles } from "../functions/get-block-styles";
-import { getBlockTag } from "../functions/get-block-tag";
-import { components } from "../functions/register-component";
-import BuilderContext from "../context/builder.context";
-import { getBlockActions } from "../functions/get-block-actions";
-import { getProcessedBlock } from "../functions/get-processed-block";
-import BlockStyles from "./block-styles";
+import { TARGET } from "../../constants/target.js";
+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 BlockStyles from "./block-styles.js";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
 function RenderBlock(props) {
   var _a, _b, _c, _d;
   function component() {
-    var _a2, _b2;
+    var _a2;
     const componentName = (_a2 = useBlock().component) == null ? void 0 : _a2.name;
     if (!componentName) {
       return null;
     }
-    const ref = components[(_b2 = useBlock().component) == null ? void 0 : _b2.name];
-    if (componentName && !ref) {
+    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;
     }
-    return ref;
   }
   function componentInfo() {
     var _a2;
@@ -85,21 +88,26 @@ function RenderBlock(props) {
   const builderContext = useContext(BuilderContext);
   const ComponentRefRef = componentRef();
   const TagNameRef = tagName();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, !((_a = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _a.noWrap) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, propertiesAndActions()), {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !((_a = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _a.noWrap) ? /* @__PURE__ */ React.createElement(React.Fragment, null, !isEmptyHtmlElement(tagName()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, propertiesAndActions()), {
     style: css()
-  }), /* @__PURE__ */ React.createElement(BlockStyles, {
+  }), TARGET === "vue" || TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BlockStyles, {
     block: useBlock()
-  }), componentRef() ? /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
+  })) : null, componentRef() ? /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
     builderBlock: useBlock()
-  }), (_b = children()) == null ? void 0 : _b.map((child, index) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }), (_b = children()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: child.id,
     block: child
-  }))) : null, (_c = noCompRefChildren()) == null ? void 0 : _c.map((child, index) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }))) : null, (_c = noCompRefChildren()) == null ? void 0 : _c.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: child.id,
     block: child
-  })))) : /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
+  })))) : /* @__PURE__ */ React.createElement(TagNameRef, __spreadProps(__spreadValues({}, propertiesAndActions()), {
+    style: css()
+  }))) : /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
     attributes: propertiesAndActions(),
     builderBlock: useBlock(),
     style: css()
-  }), (_d = children()) == null ? void 0 : _d.map((child, index) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }), (_d = children()) == null ? void 0 : _d.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    key: child.id,
     block: child
   }))));
 }

package/src/components/{render-block.lite.tsx → render-block/render-block.lite.tsx}

@@ -1,15 +1,16 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useContext } from "react";
-import { getBlockComponentOptions } from "../functions/get-block-component-options";
-import { getBlockProperties } from "../functions/get-block-properties";
-import { getBlockStyles } from "../functions/get-block-styles";
-import { getBlockTag } from "../functions/get-block-tag";
-import { components } from "../functions/register-component";
-import BuilderContext from "../context/builder.context.lite";
-import { getBlockActions } from "../functions/get-block-actions";
-import { getProcessedBlock } from "../functions/get-processed-block";
+import { TARGET } from "../../constants/target.js";
+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 BlockStyles from "./block-styles.lite";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
 
 export default function RenderBlock(props) {
   function component() {
@@ -19,16 +20,17 @@ export default function RenderBlock(props) {
       return null;
     }
 
-    const ref = components[useBlock().component?.name];
+    const ref = builderContext.registeredComponents[componentName];
 
-    if (componentName && !ref) {
+    if (!ref) {
       // TODO: Public doc page with more info about this message
       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 undefined;
+    } else {
+      return ref;
     }
-
-    return ref;
   }
 
   function componentInfo() {
@@ -91,24 +93,34 @@ export default function RenderBlock(props) {
     <>
       {!componentInfo?.()?.noWrap ? (
         <>
-          <TagNameRef {...propertiesAndActions()} style={css()}>
-            <BlockStyles block={useBlock()} />
-
-            {componentRef() ? (
-              <ComponentRefRef
-                {...componentOptions()}
-                builderBlock={useBlock()}
-              >
-                {children()?.map((child, index) => (
-                  <RenderBlock block={child} />
+          {!isEmptyHtmlElement(tagName()) ? (
+            <>
+              <TagNameRef {...propertiesAndActions()} style={css()}>
+                {TARGET === "vue" || TARGET === "svelte" ? (
+                  <>
+                    <BlockStyles block={useBlock()} />
+                  </>
+                ) : null}
+
+                {componentRef() ? (
+                  <ComponentRefRef
+                    {...componentOptions()}
+                    builderBlock={useBlock()}
+                  >
+                    {children()?.map((child) => (
+                      <RenderBlock key={child.id} block={child} />
+                    ))}
+                  </ComponentRefRef>
+                ) : null}
+
+                {noCompRefChildren()?.map((child) => (
+                  <RenderBlock key={child.id} block={child} />
                 ))}
-              </ComponentRefRef>
-            ) : null}
-
-            {noCompRefChildren()?.map((child, index) => (
-              <RenderBlock block={child} />
-            ))}
-          </TagNameRef>
+              </TagNameRef>
+            </>
+          ) : (
+            <TagNameRef {...propertiesAndActions()} style={css()} />
+          )}
         </>
       ) : (
         <ComponentRefRef
@@ -117,8 +129,8 @@ export default function RenderBlock(props) {
           builderBlock={useBlock()}
           style={css()}
         >
-          {children()?.map((child, index) => (
-            <RenderBlock block={child} />
+          {children()?.map((child) => (
+            <RenderBlock key={child.id} block={child} />
           ))}
         </ComponentRefRef>
       )}

package/src/components/render-blocks.js

@@ -1,7 +1,7 @@
 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 RenderBlock from "./render-block/render-block.js";
 function RenderBlocks(props) {
   var _a;
   function className() {
@@ -41,7 +41,7 @@ function RenderBlocks(props) {
     onClick: (event) => onClick(),
     onMouseEnter: (event) => onMouseEnter(),
     style: styles.view1
-  }, props.blocks ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = props.blocks) == null ? void 0 : _a.map((block, index) => /* @__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: block.id,
     block
   }))) : null);

package/src/components/render-blocks.lite.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import { isEditing } from "../functions/is-editing";
-import RenderBlock from "./render-block.lite";
+import { isEditing } from "../functions/is-editing.js";
+import RenderBlock from "./render-block/render-block.lite";
 
 export default function RenderBlocks(props) {
   function className() {
@@ -51,7 +51,7 @@ export default function RenderBlocks(props) {
     >
       {props.blocks ? (
         <>
-          {props.blocks?.map((block, index) => (
+          {props.blocks?.map((block) => (
             <RenderBlock key={block.id} block={block} />
           ))}
         </>

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
+};