@builder.io/sdk-react-native 0.0.1-5 → 0.0.1-52

package/src/blocks/submit-button/component-info.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Form:SubmitButton",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
+  defaultStyles: {
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#3898EC",
+    color: "white",
+    borderRadius: "4px",
+    cursor: "pointer"
+  },
+  inputs: [
+    {
+      name: "text",
+      type: "text",
+      defaultValue: "Click me"
+    }
+  ],
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

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

@@ -0,0 +1,29 @@
+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, Text } from "react-native";
+function SubmitButton(props) {
+  return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+    type: "submit"
+  }), /* @__PURE__ */ React.createElement(Text, null, props.text));
+}
+export {
+  SubmitButton as default
+};

package/src/blocks/{submit-button.lite.tsx → submit-button/submit-button.lite.tsx}

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

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+const componentInfo = {
+  name: "Symbol",
+  noWrap: true,
+  static: true,
+  inputs: [
+    {
+      name: "symbol",
+      type: "uiSymbol"
+    },
+    {
+      name: "dataOnly",
+      helperText: "Make this a data symbol that doesn't display any UI",
+      type: "boolean",
+      defaultValue: false,
+      advanced: true,
+      hideFromUI: true
+    },
+    {
+      name: "inheritState",
+      helperText: "Inherit the parent component state and data",
+      type: "boolean",
+      defaultValue: false,
+      advanced: true
+    },
+    {
+      name: "renderToLiquid",
+      helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
+      type: "boolean",
+      defaultValue: false,
+      advanced: true,
+      hideFromUI: true
+    },
+    {
+      name: "useChildren",
+      hideFromUI: true,
+      type: "boolean"
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/symbol/symbol.js

@@ -0,0 +1,68 @@
+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";
+import { useState, useContext, useEffect } from "react";
+import RenderContent from "../../components/render-content/render-content.js";
+import BuilderContext from "../../context/builder.context";
+import { getContent } from "../../functions/get-content/index.js";
+function Symbol(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const [className, setClassName] = useState(() => "builder-symbol");
+  const [content, setContent] = useState(() => null);
+  const builderContext = useContext(BuilderContext);
+  useEffect(() => {
+    var _a2;
+    setContent((_a2 = props.symbol) == null ? void 0 : _a2.content);
+  }, []);
+  useEffect(() => {
+    const symbolToUse = props.symbol;
+    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext.apiKey,
+        options: {
+          entry: symbolToUse.entry
+        }
+      }).then((response) => {
+        setContent(response);
+      });
+    }
+  }, [
+    (_a = props.symbol) == null ? void 0 : _a.content,
+    (_b = props.symbol) == null ? void 0 : _b.model,
+    (_c = props.symbol) == null ? void 0 : _c.entry,
+    content
+  ]);
+  return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+    dataSet: {
+      class: className
+    }
+  }), /* @__PURE__ */ React.createElement(RenderContent, {
+    apiKey: builderContext.apiKey,
+    context: builderContext.context,
+    data: __spreadValues(__spreadValues(__spreadValues({}, (_d = props.symbol) == null ? void 0 : _d.data), builderContext.state), (_g = (_f = (_e = props.symbol) == null ? void 0 : _e.content) == null ? void 0 : _f.data) == null ? void 0 : _g.state),
+    model: (_h = props.symbol) == null ? void 0 : _h.model,
+    content
+  }));
+}
+export {
+  Symbol as default
+};

package/src/blocks/symbol/symbol.lite.tsx

@@ -0,0 +1,60 @@
+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.lite";
+import BuilderContext from "../../context/builder.context";
+import { getContent } from "../../functions/get-content/index.js";
+
+export default function Symbol(props) {
+  const [className, setClassName] = useState(() => "builder-symbol");
+
+  const [content, setContent] = useState(() => null);
+
+  const builderContext = useContext(BuilderContext);
+
+  useEffect(() => {
+    setContent(props.symbol?.content);
+  }, []);
+
+  useEffect(() => {
+    const symbolToUse = props.symbol;
+
+    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext.apiKey,
+        options: {
+          entry: symbolToUse.entry,
+        },
+      }).then((response) => {
+        setContent(response);
+      });
+    }
+  }, [
+    props.symbol?.content,
+    props.symbol?.model,
+    props.symbol?.entry,
+    content,
+  ]);
+
+  return (
+    <View
+      {...props.attributes}
+      dataSet={{
+        class: className,
+      }}
+    >
+      <RenderContent
+        apiKey={builderContext.apiKey}
+        context={builderContext.context}
+        data={{
+          ...props.symbol?.data,
+          ...builderContext.state,
+          ...props.symbol?.content?.data?.state,
+        }}
+        model={props.symbol?.model}
+        content={content}
+      />
+    </View>
+  );
+}

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

@@ -1,14 +1,8 @@
 import * as React from 'react';
-import HTML from "react-native-render-html";
-import { registerComponent } from "../functions/register-component";
-function Text(props) {
-  return /* @__PURE__ */ React.createElement(HTML, {
-    source: { html: props.text }
-  });
-}
-registerComponent(Text, {
+const componentInfo = {
   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: [
     {
@@ -25,7 +19,7 @@ registerComponent(Text, {
     height: "auto",
     textAlign: "center"
   }
-});
+};
 export {
-  Text as default
+  componentInfo
 };

package/src/blocks/text/text.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+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 HTML from "react-native-render-html";
+function camelToKebabCase(string) {
+  return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+}
+function pick(object, keys) {
+  return keys.reduce((obj, key) => {
+    if (object && object.hasOwnProperty(key)) {
+      obj[key] = object[key];
+    }
+    return obj;
+  }, {});
+}
+const PICK_STYLES = ["textAlign"];
+function getBlockStyles(block) {
+  var _a, _b, _c;
+  const styles = __spreadValues(__spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large), block.styles);
+  if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
+    Object.assign(styles, block.responsiveStyles.medium);
+  }
+  if ((_c = block.responsiveStyles) == null ? void 0 : _c.small) {
+    Object.assign(styles, block.responsiveStyles.small);
+  }
+  return styles;
+}
+function getCss(block) {
+  const styleObject = 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;
+}
+function Text(props) {
+  return /* @__PURE__ */ React.createElement(HTML, {
+    source: {
+      html: `<div style="${getCss(props.builderBlock)}">${props.text || ""}</div>`
+    }
+  });
+}
+export {
+  Text as default
+};

package/src/blocks/text/text.lite.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+
+export default function Text(props) {
+  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/{textarea.lite.tsx → textarea/textarea.lite.tsx}

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
 
 export default function Textarea(props) {
   return (

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/blocks/{video.lite.tsx → video/video.lite.tsx}

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
 
 export default function Video(props) {
   return (

package/src/components/error-boundary.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Text } from "react-native";
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("Error rendering Builder.io block", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ React.createElement(Text, {
+        style: { color: "gray" }
+      }, "Error rendering Builder.io block");
+    }
+    return this.props.children;
+  }
+}
+export {
+  ErrorBoundary as default
+};

package/src/components/error-boundary.lite.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+
+export default function ErrorBoundary(props) {
+  return <></>;
+}

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()} />;
+}