@builder.io/sdk-react-native 0.7.1-1 → 0.7.1

package/lib/node/typescript/index-helpers/blocks-exports.d.ts

@@ -1,10 +1,10 @@
-import { default as default6 } from "../blocks/button/button";
+import { default as default5 } from "../blocks/button/button";
 import { default as default2 } from "../blocks/columns/columns";
-import { default as default8 } from "../blocks/fragment/fragment";
+import { default as default6 } from "../blocks/fragment/fragment";
 import { default as default3 } from "../blocks/image/image";
 import { default as default9 } from "../components/content/content";
 import { default as default7 } from "../blocks/section/section";
-import { default as default5 } from "../blocks/symbol/symbol";
+import { default as default8 } from "../blocks/symbol/symbol";
 import { default as default4 } from "../blocks/text/text";
-export { default6 as Button, default2 as Columns, default8 as Fragment, default3 as Image, default9 as RenderContent, default7 as Section, default5 as Symbol, default4 as Text };
+export { default5 as Button, default2 as Columns, default6 as Fragment, default3 as Image, default9 as RenderContent, default7 as Section, default8 as Symbol, default4 as Text };
 //# sourceMappingURL=blocks-exports.d.ts.map

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.7.1-1",
+  "version": "0.7.1",
   "type": "module",
   "main": "lib/browser/commonjs/index.js",
   "module": "lib/browser/module/index.js",
-  "react-native": "src/index.js",
+  "react-native": "lib/browser/commonjs/index.js",
   "types": "lib/browser/typescript/index.d.ts",
   "exports": {
     ".": {
@@ -87,8 +87,7 @@
     }
   },
   "files": [
-    "lib/",
-    "src/"
+    "lib/"
   ],
   "scripts": {
     "release": "npm publish",
@@ -110,7 +109,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-native": ">=0.64.3",
-    "react-native-url-polyfill": "^1.3.0"
+    "react-native-url-polyfill": "^2.0.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.10",
@@ -124,7 +123,7 @@
     "nx": "^16.6.0",
     "nx-cloud": "^16.2.0",
     "react-native-builder-bob": "^0.21.3",
-    "react-native-url-polyfill": "^1.3.0",
+    "react-native-url-polyfill": "^2.0.0",
     "rimraf": "^3.0.2",
     "tsup": "^7.2.0",
     "typescript": "^4.9.4"

package/lib/browser/commonjs/blocks/BaseText.js.flow

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { Text } from 'react-native';
-import BuilderContext from '../context/builder.context';
-
-/**
- * Implements CSS-like inheritance for `Text` by replacing all calls to `Text` with a custom `BaseText` component that
- * applies the `inheritedStyles` context styles, which contain all styles from all parents that might apply to a `Text`.
- */
-export default function BaseText(props) {
-  const builderContext = React.useContext(BuilderContext);
-  return (
-    <Text
-      {...props}
-      style={{ ...builderContext.inheritedStyles, ...props.style }}
-    />
-  );
-}

package/lib/browser/commonjs/blocks/button/button.js.flow

@@ -1,48 +0,0 @@
-import * as React from "react";
-import BaseText from "../BaseText";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { filterAttrs } from "../helpers.js";
-
-function Button(props) {
-  return (
-    <>
-      {props.link ? (
-        <>
-          <View
-            role="button"
-            {...{}}
-            {...props.attributes}
-            href={props.link}
-            target={props.openLinkInNewTab ? "_blank" : undefined}
-          >
-            <BaseText>{props.text}</BaseText>
-          </View>
-        </>
-      ) : (
-        <>
-          <View
-            {...{}}
-            {...props.attributes}
-            style={{
-              ...styles.view1,
-              ...props.attributes.style,
-            }}
-          >
-            <BaseText>{props.text}</BaseText>
-          </View>
-        </>
-      )}
-    </>
-  );
-}
-
-const styles = StyleSheet.create({ view1: { all: "unset" } });
-
-export default Button;

package/lib/browser/commonjs/blocks/button/component-info.js.flow

@@ -1,34 +0,0 @@
-const componentInfo = {
-  name: "Core:Button",
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
-  defaultStyles: {
-    appearance: "none",
-    paddingTop: "15px",
-    paddingBottom: "15px",
-    paddingLeft: "25px",
-    paddingRight: "25px",
-    backgroundColor: "#000000",
-    color: "white",
-    borderRadius: "4px",
-    textAlign: "center",
-    cursor: "pointer"
-  },
-  inputs: [{
-    name: "text",
-    type: "text",
-    defaultValue: "Click me!",
-    bubble: true
-  }, {
-    name: "link",
-    type: "url",
-    bubble: true
-  }, {
-    name: "openLinkInNewTab",
-    type: "boolean",
-    defaultValue: false,
-    friendlyName: "Open link in new tab"
-  }],
-  static: true,
-  noWrap: true
-};
-export { componentInfo }

package/lib/browser/commonjs/blocks/columns/columns.js.flow

@@ -1,158 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { useState } from "react";
-import Blocks from "../../components/blocks/blocks";
-import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
-import InlinedStyles from "../../components/inlined-styles";
-import { TARGET } from "../../constants/target.js";
-import { deoptSignal } from "../../functions/deopt.js";
-
-function Columns(props) {
-  const [gutterSize, setGutterSize] = useState(() =>
-    typeof props.space === "number" ? props.space || 0 : 20
-  );
-
-  const [cols, setCols] = useState(() => props.columns || []);
-
-  const [stackAt, setStackAt] = useState(
-    () => props.stackColumnsAt || "tablet"
-  );
-
-  function getWidth(index) {
-    return cols[index]?.width || 100 / cols.length;
-  }
-
-  function getColumnCssWidth(index) {
-    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
-    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-  }
-
-  function getTabletStyle({ stackedStyle, desktopStyle }) {
-    return stackAt === "tablet" ? stackedStyle : desktopStyle;
-  }
-
-  function getMobileStyle({ stackedStyle, desktopStyle }) {
-    return stackAt === "never" ? desktopStyle : stackedStyle;
-  }
-
-  const [flexDir, setFlexDir] = useState(() =>
-    props.stackColumnsAt === "never"
-      ? "row"
-      : props.reverseColumnsWhenStacked
-      ? "column-reverse"
-      : "column"
-  );
-
-  function columnsCssVars() {
-    return {
-      flexDirection: flexDir,
-    };
-  }
-
-  function columnCssVars(index) {
-    const gutter = index === 0 ? 0 : gutterSize;
-    const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutter}px`;
-    const mobileWidth = "100%";
-    const mobileMarginLeft = 0;
-    const marginLeftKey = "margin-left";
-    return {
-      marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
-    };
-  }
-
-  function getWidthForBreakpointSize(size) {
-    const breakpointSizes = getSizesForBreakpoints(
-      props.builderContext.content?.meta?.breakpoints || {}
-    );
-    return breakpointSizes[size].max;
-  }
-
-  function columnsStyles() {
-    return `
-        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-          .${props.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir-tablet);
-            align-items: stretch;
-          }
-
-          .${props.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-tablet) !important;
-            margin-left: var(--column-margin-left-tablet) !important;
-          }
-        }
-
-        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-          .${props.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir);
-            align-items: stretch;
-          }
-
-          .${props.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-mobile) !important;
-            margin-left: var(--column-margin-left-mobile) !important;
-          }
-        },
-      `;
-  }
-
-  return (
-    <View
-      style={{
-        ...styles.view1,
-        ...columnsCssVars(),
-      }}
-      {...{
-        dataSet: {
-          "builder-block-name": "builder-columns",
-        },
-      }}
-    >
-      {TARGET !== "reactNative" ? (
-        <>
-          <InlinedStyles styles={columnsStyles()} />
-        </>
-      ) : null}
-
-      {props.columns?.map((column, index) => (
-        <View
-          style={{
-            ...styles.view2,
-            ...columnCssVars(index),
-          }}
-          {...{
-            dataSet: {
-              "builder-block-name": "builder-column",
-            },
-          }}
-          key={index}
-        >
-          <Blocks
-            path={`component.options.columns.${index}.blocks`}
-            parent={props.builderBlock.id}
-            styleProp={{
-              flexGrow: "1",
-            }}
-            context={props.builderContext}
-            registeredComponents={props.builderComponents}
-            blocks={column.blocks}
-          />
-        </View>
-      ))}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  view1: { display: "flex" },
-  view2: { display: "flex", flexDirection: "column", alignItems: "stretch" },
-});
-
-export default Columns;

package/lib/browser/commonjs/blocks/columns/component-info.js.flow

@@ -1,218 +0,0 @@
-const componentInfo = {
-  name: "Columns",
-  isRSC: true,
-  inputs: [{
-    name: "columns",
-    type: "array",
-    broadcast: true,
-    subFields: [{
-      name: "blocks",
-      type: "array",
-      hideFromUI: true,
-      defaultValue: [{
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto",
-            minHeight: "20px",
-            minWidth: "20px",
-            overflow: "hidden"
-          }
-        },
-        component: {
-          name: "Image",
-          options: {
-            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-            backgroundPosition: "center",
-            backgroundSize: "cover",
-            aspectRatio: 0.7004048582995948
-          }
-        }
-      }, {
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto"
-          }
-        },
-        component: {
-          name: "Text",
-          options: {
-            text: "<p>Enter some text...</p>"
-          }
-        }
-      }]
-    }, {
-      name: "width",
-      type: "number",
-      hideFromUI: true,
-      helperText: "Width %, e.g. set to 50 to fill half of the space"
-    }, {
-      name: "link",
-      type: "url",
-      helperText: "Optionally set a url that clicking this column will link to"
-    }],
-    defaultValue: [{
-      blocks: [{
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto",
-            minHeight: "20px",
-            minWidth: "20px",
-            overflow: "hidden"
-          }
-        },
-        component: {
-          name: "Image",
-          options: {
-            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-            backgroundPosition: "center",
-            backgroundSize: "cover",
-            aspectRatio: 0.7004048582995948
-          }
-        }
-      }, {
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto"
-          }
-        },
-        component: {
-          name: "Text",
-          options: {
-            text: "<p>Enter some text...</p>"
-          }
-        }
-      }]
-    }, {
-      blocks: [{
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto",
-            minHeight: "20px",
-            minWidth: "20px",
-            overflow: "hidden"
-          }
-        },
-        component: {
-          name: "Image",
-          options: {
-            image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-            backgroundPosition: "center",
-            backgroundSize: "cover",
-            aspectRatio: 0.7004048582995948
-          }
-        }
-      }, {
-        "@type": "@builder.io/sdk:Element",
-        responsiveStyles: {
-          large: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "stretch",
-            flexShrink: "0",
-            position: "relative",
-            marginTop: "30px",
-            textAlign: "center",
-            lineHeight: "normal",
-            height: "auto"
-          }
-        },
-        component: {
-          name: "Text",
-          options: {
-            text: "<p>Enter some text...</p>"
-          }
-        }
-      }]
-    }],
-    onChange: options => {
-      function clearWidths() {
-        columns.forEach(col => {
-          col.delete("width");
-        });
-      }
-      const columns = options.get("columns");
-      if (Array.isArray(columns)) {
-        const containsColumnWithWidth = !!columns.find(col => col.get("width"));
-        if (containsColumnWithWidth) {
-          const containsColumnWithoutWidth = !!columns.find(col => !col.get("width"));
-          if (containsColumnWithoutWidth) {
-            clearWidths();
-          } else {
-            const sumWidths = columns.reduce((memo, col) => {
-              return memo + col.get("width");
-            }, 0);
-            const widthsDontAddUp = sumWidths !== 100;
-            if (widthsDontAddUp) {
-              clearWidths();
-            }
-          }
-        }
-      }
-    }
-  }, {
-    name: "space",
-    type: "number",
-    defaultValue: 20,
-    helperText: "Size of gap between columns",
-    advanced: true
-  }, {
-    name: "stackColumnsAt",
-    type: "string",
-    defaultValue: "tablet",
-    helperText: "Convert horizontal columns to vertical at what device size",
-    enum: ["tablet", "mobile", "never"],
-    advanced: true
-  }, {
-    name: "reverseColumnsWhenStacked",
-    type: "boolean",
-    defaultValue: false,
-    helperText: "When stacking columns for mobile devices, reverse the ordering",
-    advanced: true
-  }]
-};
-export { componentInfo }

package/lib/browser/commonjs/blocks/custom-code/component-info.js.flow

@@ -1,24 +0,0 @@
-const componentInfo = {
-  name: "Custom Code",
-  static: true,
-  requiredPermissions: ["editCode"],
-  inputs: [{
-    name: "code",
-    type: "html",
-    required: true,
-    defaultValue: "<p>Hello there, I am custom HTML code!</p>",
-    code: true
-  }, {
-    name: "replaceNodes",
-    type: "boolean",
-    helperText: "Preserve server rendered dom nodes",
-    advanced: true
-  }, {
-    name: "scriptsClientOnly",
-    type: "boolean",
-    defaultValue: false,
-    helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
-    advanced: true
-  }]
-};
-export { componentInfo }

package/lib/browser/commonjs/blocks/custom-code/custom-code.js.flow

@@ -1,64 +0,0 @@
-import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-} from "react-native";
-import { useState, useRef, useEffect } from "react";
-
-function CustomCode(props) {
-  const elementRef = useRef(null);
-  const [scriptsInserted, setScriptsInserted] = useState(() => []);
-
-  const [scriptsRun, setScriptsRun] = useState(() => []);
-
-  useEffect(() => {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (
-      !elementRef.current?.getElementsByTagName ||
-      typeof window === "undefined"
-    ) {
-      return;
-    }
-    const scripts = elementRef.current.getElementsByTagName("script");
-    for (let i = 0; i < scripts.length; i++) {
-      const script = scripts[i];
-      if (script.src) {
-        if (scriptsInserted.includes(script.src)) {
-          continue;
-        }
-        scriptsInserted.push(script.src);
-        const newScript = document.createElement("script");
-        newScript.async = true;
-        newScript.src = script.src;
-        document.head.appendChild(newScript);
-      } else if (
-        !script.type ||
-        [
-          "text/javascript",
-          "application/javascript",
-          "application/ecmascript",
-        ].includes(script.type)
-      ) {
-        if (scriptsRun.includes(script.innerText)) {
-          continue;
-        }
-        try {
-          scriptsRun.push(script.innerText);
-          new Function(script.innerText)();
-        } catch (error) {
-          console.warn("`CustomCode`: Error running script:", error);
-        }
-      }
-    }
-  }, []);
-
-  return (
-    <View ref={elementRef} dangerouslySetInnerHTML={{ __html: props.code }} />
-  );
-}
-
-export default CustomCode;

package/lib/browser/commonjs/blocks/embed/component-info.js.flow

@@ -1,37 +0,0 @@
-const componentInfo = {
-  name: "Embed",
-  static: true,
-  inputs: [{
-    name: "url",
-    type: "url",
-    required: true,
-    defaultValue: "",
-    helperText: "e.g. enter a youtube url, google map, etc",
-    onChange: options => {
-      const url = options.get("url");
-      if (url) {
-        options.set("content", "Loading...");
-        const apiKey = "ae0e60e78201a3f2b0de4b";
-        return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
-          if (options.get("url") === url) {
-            if (data.html) {
-              options.set("content", data.html);
-            } else {
-              options.set("content", "Invalid url, please try another");
-            }
-          }
-        }).catch(_err => {
-          options.set("content", "There was an error embedding this URL, please try again or another URL");
-        });
-      } else {
-        options.delete("content");
-      }
-    }
-  }, {
-    name: "content",
-    type: "html",
-    defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-    hideFromUI: true
-  }]
-};
-export { componentInfo }