@builder.io/sdk-react-native 0.0.1-34 → 0.0.1-35

package/src/blocks/section.lite.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+
+export default function SectionComponent(props) {
+  return (
+    <View
+      {...props.attributes}
+      style={
+        props.maxWidth && typeof props.maxWidth === "number"
+          ? {
+              maxWidth: props.maxWidth,
+            }
+          : undefined
+      }
+    >
+      <Text>{props.children}</Text>
+    </View>
+  );
+}

package/src/blocks/select.js

@@ -0,0 +1,41 @@
+import { registerComponent } from '../functions/register-component';
+
+        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";
+import { isEditing } from "../functions/is-editing";
+function SelectComponent(props) {
+var _a;
+return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+  value: props.value,
+  key: isEditing() && props.defaultValue ? props.defaultValue : "default-key",
+  defaultValue: props.defaultValue,
+  name: props.name
+}), (_a = props.options) == null ? void 0 : _a.map((option) => /* @__PURE__ */ React.createElement(View, {
+  value: option.value
+}, /* @__PURE__ */ React.createElement(Text, null, option.name || option.value))));
+}
+export {
+SelectComponent as default
+};
+
+
+        registerComponent(SelectComponent, {name:'Form:Select',builtIn:true,image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',defaultStyles:{alignSelf:'flex-start'},inputs:[{name:'options',type:'list',required:true,subFields:[{name:'value',type:'text',required:true},{name:'name',type:'text'}],defaultValue:[{value:'option 1'},{value:'option 2'}]},{name:'name',type:'string',required:true,helperText:'Every select in a form needs a unique name describing what it gets, e.g. "email"'},{name:'defaultValue',type:'string'},{name:'value',type:'string',advanced:true},{name:'required',type:'boolean',defaultValue:false}],static:true,noWrap:true});

package/src/blocks/select.lite.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+import { isEditing } from "../functions/is-editing";
+
+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}>
+          <Text>{option.name || option.value}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/blocks/submit-button.js

@@ -0,0 +1,34 @@
+import { registerComponent } from '../functions/register-component';
+
+        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
+};
+
+
+        registerComponent(SubmitButton, {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});

package/src/blocks/submit-button.lite.tsx

@@ -0,0 +1,11 @@
+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">
+      <Text>{props.text}</Text>
+    </View>
+  );
+}

package/src/blocks/symbol.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { View } from "react-native";
+import { useContext } from "react";
+import RenderContent from "../components/render-content";
+import BuilderContext from "../context/builder.context";
+function Symbol(props) {
+  var _a, _b, _c;
+  const builderContext = useContext(BuilderContext);
+  return /* @__PURE__ */ React.createElement(View, {
+    className: "builder-symbol"
+  }, /* @__PURE__ */ React.createElement(RenderContent, {
+    context: builderContext.context,
+    data: (_a = props.symbol) == null ? void 0 : _a.data,
+    model: (_b = props.symbol) == null ? void 0 : _b.model,
+    content: (_c = props.symbol) == null ? void 0 : _c.content
+  }));
+}
+export {
+  Symbol as default
+};

package/src/blocks/symbol.lite.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+import RenderContent from "../components/render-content.lite";
+import BuilderContext from "../context/builder.context.lite";
+
+export default function Symbol(props) {
+  const builderContext = useContext(BuilderContext);
+
+  return (
+    <View className="builder-symbol">
+      <RenderContent
+        context={builderContext.context}
+        data={props.symbol?.data}
+        model={props.symbol?.model}
+        content={props.symbol?.content}
+      />
+    </View>
+  );
+}

package/src/blocks/text.js

@@ -0,0 +1,85 @@
+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";
+import { registerComponent } from "../functions/register-component";
+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>` }
+  });
+}
+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

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

package/src/blocks/textarea.js

@@ -0,0 +1,37 @@
+import { registerComponent } from '../functions/register-component';
+
+        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
+};
+
+
+        registerComponent(Textarea, {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});

package/src/blocks/textarea.lite.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+
+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.js

@@ -0,0 +1,88 @@
+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, {
+  name: "Video",
+  static: 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"
+  },
+  canHaveChildren: true,
+  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: "fit",
+      type: "text",
+      defaultValue: "cover",
+      enum: ["contain", "cover", "stretch"]
+    },
+    {
+      name: "aspectRatio",
+      type: "number",
+      advanced: true,
+      defaultValue: 0.7004048582995948
+    }
+  ]
+});
+export {
+  Video as default
+};

package/src/blocks/video.lite.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
+
+export default function Video(props) {
+  return (
+    <View
+      {...props.attributes}
+      preload="none"
+      style={{
+        width: "100%",
+        height: "100%",
+        ...props.attributes?.style,
+        objectFit: props.fit,
+        objectPosition: props.position,
+        // Hack to get object fit to work as expected and
+        // not have the video overflow
+        borderRadius: 1,
+      }}
+      key={props.video || "no-src"}
+      poster={props.posterImage}
+      autoPlay={props.autoPlay}
+      muted={props.muted}
+      controls={props.controls}
+      loop={props.loop}
+    />
+  );
+}

package/src/components/block-styles.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+function BlockStyles(props) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+}
+export {
+  BlockStyles as default
+};

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

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

package/src/components/render-block.js

@@ -0,0 +1,105 @@
+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 { 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 RenderBlocks from "./render-blocks";
+function RenderBlock(props) {
+  var _a, _b, _c;
+  function component() {
+    var _a2, _b2;
+    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) {
+      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 ref;
+  }
+  function componentInfo() {
+    var _a2;
+    return (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.info;
+  }
+  function componentRef() {
+    var _a2;
+    return (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component;
+  }
+  function tagName() {
+    return getBlockTag(useBlock());
+  }
+  function properties() {
+    return getBlockProperties(useBlock());
+  }
+  function useBlock() {
+    return getProcessedBlock({
+      block: props.block,
+      state: builderContext.state,
+      context: builderContext.context
+    });
+  }
+  function actions() {
+    return getBlockActions({
+      block: useBlock(),
+      state: builderContext.state,
+      context: builderContext.context
+    });
+  }
+  function css() {
+    return getBlockStyles(useBlock());
+  }
+  function componentOptions() {
+    return getBlockComponentOptions(useBlock());
+  }
+  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({}, properties()), {
+    style: css()
+  }), /* @__PURE__ */ React.createElement(BlockStyles, {
+    block: useBlock()
+  }), componentRef() ? /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, componentOptions()), {
+    builderBlock: useBlock()
+  }), useBlock().children ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RenderBlocks, {
+    path: "children",
+    blocks: useBlock().children
+  })) : null) : null, !componentRef() && useBlock().children && useBlock().children.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = useBlock().children) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+    block: child
+  }))) : null)) : /* @__PURE__ */ React.createElement(ComponentRefRef, __spreadProps(__spreadValues({}, (_c = componentInfo == null ? void 0 : componentInfo()) == null ? void 0 : _c.options), {
+    attributes: properties(),
+    builderBlock: useBlock(),
+    style: css(),
+    children: useBlock().children
+  })));
+}
+export {
+  RenderBlock as default
+};