@builder.io/sdk-react-native 0.0.1-56 → 0.0.1-57

package/CHANGELOG.md

@@ -10,7 +10,7 @@ See [builder-registered-components.ts](/packages/sdks/src/constants/builder-regi
 
 ### 0.0.1-51
 
-⚠️ Deprecation notice: Registering components via `registerComponent(component, info)` is now deprecated. 
+⚠️ Deprecation notice: Registering components via `registerComponent(component, info)` is now deprecated.
 To register your custom components in Builder, you must now provide a `customComponents` array to the `RenderContent` component containing `[{ component, info }]`.
 See [builder-registered-components.ts](/packages/sdks/src/constants/builder-registered-components.ts) for examples of how to do so, or see the example provided for this SDK.
 

package/README.md

@@ -2,6 +2,10 @@
 
 This is the React-Native SDK. It is currently in beta.
 
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).
+
 ## Feature Support
 
 To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.1-56",
+  "version": "0.0.1-57",
   "main": "src/index.js",
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"

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

@@ -1,7 +1,14 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function Button(props) {
+export interface ButtonProps {
+  attributes?: any;
+  text?: string;
+  link?: string;
+  openLinkInNewTab?: boolean;
+}
+
+export default function Button(props: ButtonProps) {
   return (
     <>
       {props.link ? (

package/src/blocks/columns/columns.lite.tsx

@@ -1,8 +1,25 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+type Column = {
+  blocks: any; // TODO: Implement this when support for dynamic CSS lands
+
+  width?: number;
+};
+type StackColumnsAt = "tablet" | "mobile" | "never";
+export interface ColumnProps {
+  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands
+
+  space?: number; // TODO: Implement this when support for dynamic CSS lands
+
+  stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands
+
+  reverseColumnsWhenStacked?: boolean;
+}
+
 import RenderBlocks from "../../components/render-blocks.lite";
 
-export default function Columns(props) {
+export default function Columns(props: ColumnProps) {
   function getGutterSize() {
     return typeof props.space === "number" ? props.space || 0 : 20;
   }

package/src/blocks/custom-code/custom-code.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { View } from "react-native";
 import { useState, useRef, useEffect } from "react";
 function CustomCode(props) {
+  const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
   const [scriptsRun, setScriptsRun] = useState(() => []);
   function findAndRunScripts() {
@@ -36,7 +37,6 @@ function CustomCode(props) {
       }
     }
   }
-  const elem = useRef();
   useEffect(() => {
     findAndRunScripts();
   }, []);

package/src/blocks/custom-code/custom-code.lite.tsx

@@ -2,7 +2,13 @@ import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useRef, useEffect } from "react";
 
-export default function CustomCode(props) {
+export interface CustomCodeProps {
+  code: string;
+  replaceNodes?: boolean;
+}
+
+export default function CustomCode(props: CustomCodeProps) {
+  const elem = useRef<HTMLDivElement>(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
 
   const [scriptsRun, setScriptsRun] = useState(() => []);
@@ -10,7 +16,6 @@ export default function CustomCode(props) {
   function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'
     if (elem.current && typeof window !== "undefined") {
-      /** @type {HTMLScriptElement[]} */
       const scripts = elem.current.getElementsByTagName("script");
 
       for (let i = 0; i < scripts.length; i++) {
@@ -49,8 +54,6 @@ export default function CustomCode(props) {
     }
   }
 
-  const elem = useRef();
-
   useEffect(() => {
     findAndRunScripts();
   }, []);

package/src/blocks/embed/embed.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import { View } from "react-native";
 import { useState, useRef, useEffect } from "react";
 function Embed(props) {
+  const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
   const [scriptsRun, setScriptsRun] = useState(() => []);
   function findAndRunScripts() {
@@ -36,7 +37,6 @@ function Embed(props) {
       }
     }
   }
-  const elem = useRef();
   useEffect(() => {
     findAndRunScripts();
   }, []);

package/src/blocks/embed/embed.lite.tsx

@@ -2,7 +2,12 @@ import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useRef, useEffect } from "react";
 
-export default function Embed(props) {
+export interface EmbedProps {
+  content: string;
+}
+
+export default function Embed(props: EmbedProps) {
+  const elem = useRef<HTMLDivElement>(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
 
   const [scriptsRun, setScriptsRun] = useState(() => []);
@@ -10,7 +15,6 @@ export default function Embed(props) {
   function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'
     if (elem.current && typeof window !== "undefined") {
-      /** @type {HTMLScriptElement[]} */
       const scripts = elem.current.getElementsByTagName("script");
 
       for (let i = 0; i < scripts.length; i++) {
@@ -49,8 +53,6 @@ export default function Embed(props) {
     }
   }
 
-  const elem = useRef();
-
   useEffect(() => {
     findAndRunScripts();
   }, []);

package/src/blocks/form/form.js

@@ -44,6 +44,7 @@ import RenderBlock from "../../components/render-block/render-block.js";
 import { isEditing } from "../../functions/is-editing.js";
 function FormComponent(props) {
   var _a, _b;
+  const formRef = useRef(null);
   const [formState, setFormState] = useState(() => "unsubmitted");
   const [responseData, setResponseData] = useState(() => null);
   const [formErrorMessage, setFormErrorMessage] = useState(() => "");
@@ -190,7 +191,6 @@ function FormComponent(props) {
       });
     }
   }
-  const formRef = useRef();
   return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
     validate: props.validate,
     ref: formRef,

package/src/blocks/form/form.lite.tsx

@@ -1,10 +1,64 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useRef } from "react";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+/* eslint-disable */
+
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+export type FormState = "unsubmitted" | "sending" | "success" | "error";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+/* eslint-disable */
+
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+interface BuilderElement {}
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+/* eslint-disable */
+
+/**
+ * This component was copied over from the old SDKs and has a lot of code pointing to invalid functions/env vars. It needs
+ * to be cleaned up before the component can actually be usable.
+ */
+export interface FormProps {
+  attributes?: any;
+  name?: string;
+  action?: string;
+  validate?: boolean;
+  method?: string;
+  builderBlock?: BuilderElement;
+  sendSubmissionsTo?: string;
+  sendSubmissionsToEmail?: string;
+  sendWithJs?: boolean;
+  contentType?: string;
+  customHeaders?: {
+    [key: string]: string;
+  };
+  successUrl?: string;
+  previewState?: FormState;
+  successMessage?: BuilderElement[];
+  errorMessage?: BuilderElement[];
+  sendingMessage?: BuilderElement[];
+  resetFormOnSubmit?: boolean;
+  errorMessagePath?: string;
+}
+
 import RenderBlock from "../../components/render-block/render-block.lite";
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function FormComponent(props) {
+export default function FormComponent(props: FormProps) {
+  const formRef = useRef(null);
   const [formState, setFormState] = useState(() => "unsubmitted");
 
   const [responseData, setResponseData] = useState(() => null);
@@ -142,7 +196,7 @@ export default function FormComponent(props) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== "string") {
-                /* TODO: ideally convert json to yaml so it woul dbe like            error: - email has been taken */ message =
+                /* TODO: ideally convert json to yaml so it woul dbe like             error: - email has been taken */ message =
                   JSON.stringify(message);
               }
               setFormErrorMessage(message);
@@ -198,7 +252,6 @@ export default function FormComponent(props) {
       );
     }
   }
-  const formRef = useRef();
   return (
     <View
       {...props.attributes}

package/src/blocks/fragment/fragment.lite.tsx

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function FragmentComponent(props) {
+export interface FragmentProps {
+  maxWidth?: number;
+  attributes?: any;
+  children?: any;
+}
+
+export default function FragmentComponent(props: FragmentProps) {
   return (
     <View>
       <Text>{props.children}</Text>

package/src/blocks/image/image.lite.tsx

@@ -1,7 +1,24 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function Image(props) {
+export interface ImageProps {
+  className?: string;
+  image: string;
+  sizes?: string;
+  lazy?: boolean;
+  height?: number;
+  width?: number;
+  altText?: string;
+  backgroundSize?: string;
+  backgroundPosition?: string;
+  srcset?: string;
+  aspectRatio?: number;
+  children?: any;
+  fitContent?: boolean;
+  builderBlock?: any;
+}
+
+export default function Image(props: ImageProps) {
   return (
     <View style={styles.view1}>
       <View>
@@ -11,11 +28,11 @@ export default function Image(props) {
           role={props.altText ? "presentation" : undefined}
           style={styles.view2}
           src={props.image}
-          srcSet={props.srcset}
+          srcset={props.srcset}
           sizes={props.sizes}
         />
 
-        <View srcSet={props.srcset} />
+        <View srcset={props.srcset} />
       </View>
 
       {props.aspectRatio &&

package/src/blocks/img/img.lite.tsx

@@ -1,8 +1,26 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+export interface ImgProps {
+  attributes?: any;
+  imgSrc?: string;
+  altText?: string;
+  backgroundSize?: "cover" | "contain";
+  backgroundPosition?:
+    | "center"
+    | "top"
+    | "left"
+    | "right"
+    | "bottom"
+    | "top left"
+    | "top right"
+    | "bottom left"
+    | "bottom right";
+}
+
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function ImgComponent(props) {
+export default function ImgComponent(props: ImgProps) {
   return (
     <View
       {...props.attributes}

package/src/blocks/input/input.lite.tsx

@@ -1,8 +1,19 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+export interface FormInputProps {
+  type?: string;
+  attributes?: any;
+  name?: string;
+  value?: string;
+  placeholder?: string;
+  defaultValue?: string;
+  required?: boolean;
+}
+
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function FormInputComponent(props) {
+export default function FormInputComponent(props: FormInputProps) {
   return (
     <View
       {...props.attributes}

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

@@ -1,6 +1,11 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function RawText(props) {
+export interface RawTextProps {
+  attributes?: any;
+  text?: string; // builderBlock?: any;
+}
+
+export default function RawText(props: RawTextProps) {
   return <View dangerouslySetInnerHTML={{ __html: props.text || "" }} />;
 }

package/src/blocks/section/section.lite.tsx

@@ -1,7 +1,14 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function SectionComponent(props) {
+export interface SectionProps {
+  maxWidth?: number;
+  attributes?: any;
+  children?: any;
+  builderBlock?: any;
+}
+
+export default function SectionComponent(props: SectionProps) {
   return (
     <View
       {...props.attributes}

package/src/blocks/select/select.lite.tsx

@@ -1,8 +1,20 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+export interface FormSelectProps {
+  options?: {
+    name?: string;
+    value: string;
+  }[];
+  attributes?: any;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+}
+
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function SelectComponent(props) {
+export default function SelectComponent(props: FormSelectProps) {
   return (
     <View
       {...props.attributes}

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

@@ -1,7 +1,12 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function SubmitButton(props) {
+export interface ButtonProps {
+  attributes?: any;
+  text?: string;
+}
+
+export default function SubmitButton(props: ButtonProps) {
   return (
     <View {...props.attributes} type="submit">
       <Text>{props.text}</Text>

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

@@ -1,11 +1,30 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useContext, useEffect } from "react";
+
+export interface SymbolInfo {
+  model?: string;
+  entry?: string;
+  data?: any;
+  content?: any;
+  inline?: boolean;
+  dynamic?: boolean;
+}
+export interface SymbolProps {
+  symbol?: SymbolInfo;
+  dataOnly?: boolean;
+  dynamic?: boolean;
+  builderBlock?: any; // TODO: BuilderElement
+
+  attributes?: any;
+  inheritState?: boolean;
+}
+
 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) {
+export default function Symbol(props: SymbolProps) {
   const [className, setClassName] = useState(() => "builder-symbol");
 
   const [content, setContent] = useState(() => null);

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

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

package/src/blocks/textarea/textarea.lite.tsx

@@ -1,7 +1,15 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function Textarea(props) {
+export interface TextareaProps {
+  attributes?: any;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+}
+
+export default function Textarea(props: TextareaProps) {
   return (
     <View
       {...props.attributes}

package/src/blocks/video/video.lite.tsx

@@ -1,7 +1,33 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 
-export default function Video(props) {
+export interface VideoProps {
+  attributes?: any;
+  video?: string;
+  autoPlay?: boolean;
+  controls?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  playsInline?: boolean;
+  aspectRatio?: number;
+  width?: number;
+  height?: number;
+  fit?: "contain" | "cover" | "fill";
+  position?:
+    | "center"
+    | "top"
+    | "left"
+    | "right"
+    | "bottom"
+    | "top left"
+    | "top right"
+    | "bottom left"
+    | "bottom right";
+  posterImage?: string;
+  lazyLoad?: boolean;
+}
+
+export default function Video(props: VideoProps) {
   return (
     <View
       {...props.attributes}

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

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

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

@@ -1,12 +1,16 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useContext } from "react";
+
+export type BlockStylesProps = {
+  block: BuilderBlock;
+};
 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.lite";
 
-export default function BlockStyles(props) {
+export default function BlockStyles(props: BlockStylesProps) {
   function useBlock() {
     return getProcessedBlock({
       block: props.block,

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

@@ -1,6 +1,11 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useContext } from "react";
+
+export type RenderBlockProps = {
+  block: BuilderBlock;
+}; // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
+
 import BuilderContext from "../../context/builder.context";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
@@ -12,7 +17,7 @@ import BlockStyles from "./block-styles.lite";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
 import RenderComponent from "./render-component.lite";
 
-export default function RenderBlock(props) {
+export default function RenderBlock(props: RenderBlockProps) {
   function component() {
     const componentName = useBlock().component?.name;
 

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

@@ -1,9 +1,15 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+type Props = {
+  componentRef: any;
+  componentOptions: any;
+  blockChildren: BuilderBlock[];
+};
 import BlockStyles from "./block-styles.lite";
 import RenderBlock from "./render-block.lite";
 
-export default function RenderComponent(props) {
+export default function RenderComponent(props: Props) {
   const ComponentRefRef = props.componentRef;
 
   return (

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

@@ -1,10 +1,16 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+export type RenderBlockProps = {
+  blocks?: BuilderBlock[];
+  parent?: string;
+  path?: string;
+};
 import { isEditing } from "../functions/is-editing.js";
 import BlockStyles from "./render-block/block-styles.lite";
 import RenderBlock from "./render-block/render-block.lite";
 
-export default function RenderBlocks(props) {
+export default function RenderBlocks(props: RenderBlockProps) {
   function className() {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
   }

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

@@ -1,8 +1,22 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+interface CustomFont {
+  family?: string;
+  kind?: string;
+  fileUrl?: string;
+  files?: {
+    [key: string]: string;
+  };
+}
+interface Props {
+  cssCode?: string;
+  customFonts?: CustomFont[];
+}
+
 import RenderInlinedStyles from "../../render-inlined-styles.lite";
 
-export default function RenderContentStyles(props) {
+export default function RenderContentStyles(props: Props) {
   function getCssFromFont(font) {
     // TODO: compute what font sizes are used and only load those.......
     const family =

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

@@ -1,6 +1,33 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
 import { useState, useContext, useEffect } from "react";
+
+export type RenderContentProps = {
+  content?: BuilderContent;
+  model?: string;
+  data?: {
+    [key: string]: any;
+  };
+  context?: {
+    [key: string]: any;
+  };
+  apiKey: string;
+  customComponents?: RegisteredComponent[];
+};
+interface BuilderComponentStateChange {
+  state: {
+    [key: string]: any;
+  };
+  ref: {
+    name?: string;
+    props?: {
+      builderBlock?: {
+        id?: string;
+      };
+    };
+  };
+}
+
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
@@ -23,7 +50,7 @@ import { track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.lite";
 import RenderContentStyles from "./components/render-styles.lite";
 
-export default function RenderContent(props) {
+export default function RenderContent(props: RenderContentProps) {
   function useContent() {
     const mergedContent = {
       ...props.content,

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

@@ -1,8 +1,13 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+
+interface Props {
+  styles: string;
+}
+
 import { TARGET } from "../constants/target.js";
 
-export default function RenderInlinedStyles(props) {
+export default function RenderInlinedStyles(props: Props) {
   function injectedStyleScript() {
     return `<${tagName()}>${props.styles}</${tagName()}>`;
   }