@builder.io/sdk-react-native 1.0.30 → 1.0.31-0

package/lib/node/module/constants/sdk-version.js

@@ -1,2 +1,2 @@
-export const SDK_VERSION = "1.0.30";
+export const SDK_VERSION = "1.0.29";
 //# sourceMappingURL=sdk-version.js.map

package/lib/node/typescript/constants/sdk-version.d.ts

@@ -1,2 +1,2 @@
-export declare const SDK_VERSION = "1.0.30";
+export declare const SDK_VERSION = "1.0.29";
 //# sourceMappingURL=sdk-version.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "1.0.30",
+  "version": "1.0.31-0",
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/react-native",
   "repository": {
     "type": "git",
@@ -11,7 +11,8 @@
   "type": "module",
   "main": "lib/browser/commonjs/index.js",
   "module": "lib/browser/module/index.js",
-  "react-native": "lib/browser/commonjs/index.js",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
   "types": "lib/browser/typescript/index.d.ts",
   "exports": {
     ".": {
@@ -93,7 +94,8 @@
     }
   },
   "files": [
-    "lib/"
+    "lib",
+    "src"
   ],
   "scripts": {
     "release": "npm publish",
@@ -117,7 +119,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-native": ">=0.64.3",
-    "react-native-url-polyfill": "^2.0.0"
+    "react-native-url-polyfill": "^2.0.0",
+    "regenerator-runtime": "^0.14.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.10",
@@ -156,5 +159,6 @@
         ]
       }
     }
-  }
+  },
+  "stableVersion": "1.0.30"
 }

package/src/blocks/BaseText.tsx

@@ -0,0 +1,17 @@
+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/src/blocks/accordion/accordion.tsx

@@ -0,0 +1,181 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState } from "react";
+import Blocks from "../../components/blocks/index";
+import { camelToKebabCase } from "../../functions/camel-to-kebab-case";
+import type { Dictionary } from "../../types/typescript";
+import type { AccordionProps } from "./accordion.types";
+import { convertOrderNumberToString } from "./helpers";
+
+function Accordion(props: AccordionProps) {
+  const [open, setOpen] = useState(() => []);
+
+  function onlyOneAtATime() {
+    return Boolean(props.grid || props.oneAtATime);
+  }
+
+  function accordionStyles() {
+    const styles = {
+      display: "flex" as "flex" | "none",
+      alignItems: "stretch" as
+        | "stretch"
+        | "flex-start"
+        | "flex-end"
+        | "center"
+        | "baseline",
+      flexDirection: "column" as
+        | "column"
+        | "row"
+        | "column-reverse"
+        | "row-reverse",
+      ...(props.grid && {
+        flexDirection: "row" as
+          | "column"
+          | "row"
+          | "column-reverse"
+          | "row-reverse",
+        alignItems: "flex-start" as
+          | "stretch"
+          | "flex-start"
+          | "flex-end"
+          | "center"
+          | "baseline",
+        flexWrap: "wrap" as "nowrap" | "wrap",
+      }),
+    };
+    return styles;
+  }
+
+  function accordionTitleStyles() {
+    const shared = {
+      display: "flex",
+      flexDirection: "column",
+    };
+    const styles = shared;
+    return Object.fromEntries(
+      Object.entries(styles).filter(([_, value]) => value !== undefined)
+    ) as Dictionary<string>;
+  }
+
+  function getAccordionTitleClassName(index: number) {
+    return `builder-accordion-title builder-accordion-title-${
+      open.includes(index) ? "open" : "closed"
+    }`;
+  }
+
+  function getAccordionDetailClassName(index: number) {
+    return `builder-accordion-detail builder-accordion-detail-${
+      open.includes(index) ? "open" : "closed"
+    }`;
+  }
+
+  function openGridItemOrder() {
+    let itemOrder: number | null = null;
+    const getOpenGridItemPosition = props.grid && open.length;
+    if (getOpenGridItemPosition && document) {
+      const openItemIndex = open[0];
+      const openItem = document.querySelector(
+        `.builder-accordion-title[data-index="${openItemIndex}"]`
+      );
+      let subjectItem = openItem;
+      itemOrder = openItemIndex;
+      if (subjectItem) {
+        let prevItemRect = subjectItem.getBoundingClientRect();
+        while ((subjectItem = subjectItem && subjectItem.nextElementSibling)) {
+          if (subjectItem) {
+            if (subjectItem.classList.contains("builder-accordion-detail")) {
+              continue;
+            }
+            const subjectItemRect = subjectItem.getBoundingClientRect();
+            if (subjectItemRect.left > prevItemRect.left) {
+              const index = parseInt(
+                subjectItem.getAttribute("data-index") || "",
+                10
+              );
+              if (!isNaN(index)) {
+                prevItemRect = subjectItemRect;
+                itemOrder = index;
+              }
+            } else {
+              break;
+            }
+          }
+        }
+      }
+    }
+    if (typeof itemOrder === "number") {
+      itemOrder = itemOrder + 1;
+    }
+    return itemOrder;
+  }
+
+  function accordionDetailStyles() {
+    const styles = {
+      ...{},
+      ...(props.grid && {
+        width: "100%",
+      }),
+    };
+    return Object.fromEntries(
+      Object.entries(styles).filter(([_, value]) => value !== undefined)
+    ) as Dictionary<string>;
+  }
+
+  function onClick(index: number) {
+    if (open.includes(index)) {
+      setOpen(onlyOneAtATime() ? [] : open.filter((item) => item !== index));
+    } else {
+      setOpen(onlyOneAtATime() ? [index] : open.concat(index));
+    }
+  }
+
+  return (
+    <View style={accordionStyles()}>
+      {props.items?.map((item, index) => (
+        <>
+          <Pressable
+            style={{
+              ...accordionTitleStyles(),
+              width: props.grid ? props.gridRowWidth : undefined,
+              ...({} as any),
+            }}
+            data-index={index}
+            onPress={(event) => onClick(index)}
+          >
+            <Blocks
+              blocks={item.title}
+              path={`items.${index}.title`}
+              parent={props.builderBlock.id}
+              context={props.builderContext}
+              registeredComponents={props.builderComponents}
+              linkComponent={props.builderLinkComponent}
+            />
+          </Pressable>
+          {open.includes(index) ? (
+            <View style={accordionDetailStyles()}>
+              <Blocks
+                blocks={item.detail}
+                path={`items.${index}.detail`}
+                parent={props.builderBlock.id}
+                context={props.builderContext}
+                registeredComponents={props.builderComponents}
+                linkComponent={props.builderLinkComponent}
+              />
+            </View>
+          ) : null}
+        </>
+      ))}
+    </View>
+  );
+}
+
+export default Accordion;

package/src/blocks/accordion/accordion.types.ts

@@ -0,0 +1,12 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+export interface AccordionProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
+  items: {
+    title: BuilderBlock[];
+    detail: BuilderBlock[];
+  }[];
+  oneAtATime?: boolean;
+  grid?: boolean;
+  gridRowWidth?: string;
+  useChildrenForItems?: boolean;
+}

package/src/blocks/accordion/component-info.ts

@@ -0,0 +1,124 @@
+import type { ComponentInfo } from '../../types/components';
+const defaultTitle = {
+  '@type': '@builder.io/sdk:Element',
+  layerName: 'Accordion item title',
+  responsiveStyles: {
+    large: {
+      marginTop: '10px',
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'stretch',
+      flexDirection: 'column',
+      paddingBottom: '10px'
+    }
+  },
+  children: [{
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+      large: {
+        textAlign: 'left',
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    },
+    component: {
+      name: 'Text',
+      options: {
+        text: 'I am an accordion title. Click me!'
+      }
+    }
+  }]
+};
+const defaultDetail = {
+  '@type': '@builder.io/sdk:Element',
+  layerName: 'Accordion item detail',
+  responsiveStyles: {
+    large: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'stretch',
+      flexDirection: 'column',
+      marginTop: '10px',
+      paddingBottom: '10px'
+    }
+  },
+  children: [{
+    '@type': '@builder.io/sdk:Element',
+    responsiveStyles: {
+      large: {
+        paddingTop: '50px',
+        textAlign: 'left',
+        display: 'flex',
+        flexDirection: 'column',
+        paddingBottom: '50px'
+      }
+    },
+    component: {
+      name: 'Text',
+      options: {
+        text: 'I am an accordion detail, hello!'
+      }
+    }
+  }]
+};
+export const componentInfo: ComponentInfo = {
+  name: 'Builder:Accordion',
+  canHaveChildren: true,
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Ffab6c1fd3fe542408cbdec078bca7f35',
+  defaultStyles: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch'
+  },
+  inputs: [{
+    name: 'items',
+    type: 'list',
+    broadcast: true,
+    subFields: [{
+      name: 'title',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [defaultTitle]
+    }, {
+      name: 'detail',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [defaultDetail]
+    }],
+    defaultValue: [{
+      title: [defaultTitle],
+      detail: [defaultDetail]
+    }, {
+      title: [defaultTitle],
+      detail: [defaultDetail]
+    }],
+    showIf: (options: Map<string, any>) => !options.get('useChildrenForItems')
+  }, {
+    name: 'oneAtATime',
+    helperText: 'Only allow opening one at a time (collapse all others when new item openned)',
+    type: 'boolean',
+    defaultValue: false
+  }, {
+    name: 'grid',
+    helperText: 'Display as a grid',
+    type: 'boolean',
+    defaultValue: false
+  }, {
+    name: 'gridRowWidth',
+    helperText: 'Display as a grid',
+    type: 'string',
+    showIf: (options: Map<string, any>) => options.get('grid'),
+    defaultValue: '25%'
+  }, {
+    name: 'useChildrenForItems',
+    type: 'boolean',
+    helperText: 'Use child elements for each slide, instead of the array. Useful for dynamically repeating items',
+    advanced: true,
+    defaultValue: false,
+    onChange: (options: Map<string, any>) => {
+      if (options.get('useChildrenForItems') === true) {
+        options.set('items', []);
+      }
+    }
+  }]
+}

package/src/blocks/accordion/helpers.ts

@@ -0,0 +1,3 @@
+export const convertOrderNumberToString = (order: number) => {
+  return order.toString();
+}

package/src/blocks/accordion/index.ts

@@ -0,0 +1 @@
+export { default } from './accordion'

package/src/blocks/button/button.tsx

@@ -0,0 +1,56 @@
+import BaseText from "../../blocks/BaseText";
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer";
+import { getClassPropName } from "../../functions/get-class-prop-name";
+import { filterAttrs } from "../helpers";
+import type { ButtonProps } from "./button.types";
+
+function Button(props: ButtonProps) {
+  function attrs() {
+    return {
+      ...props.attributes,
+      [getClassPropName()]: `${props.link ? "" : "builder-button"} ${
+        props.attributes[getClassPropName()] || ""
+      }`,
+      ...(props.link
+        ? {
+            href: props.link,
+            target: props.openLinkInNewTab ? "_blank" : undefined,
+            role: "link",
+          }
+        : {
+            role: "button",
+          }),
+    };
+  }
+
+  return (
+    <DynamicRenderer
+      attributes={attrs()}
+      TagName={
+        props.link
+          ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            props.builderLinkComponent || BaseText
+          : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            BaseText
+      }
+      actionAttributes={{}}
+    >
+      <Text>{props.text}</Text>
+    </DynamicRenderer>
+  );
+}
+
+export default Button;

package/src/blocks/button/button.types.ts

@@ -0,0 +1,7 @@
+import type { BuilderLinkComponentProp } from '../../types/builder-props';
+export interface ButtonProps extends BuilderLinkComponentProp {
+  attributes?: any;
+  text?: string;
+  link?: string;
+  openLinkInNewTab?: boolean;
+}

package/src/blocks/button/component-info.ts

@@ -0,0 +1,35 @@
+import type { ComponentInfo } from '../../types/components';
+export const componentInfo: ComponentInfo = {
+  name: 'Core:Button',
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
+  defaultStyles: {
+    // TODO: make min width more intuitive and set one
+    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
+}

package/src/blocks/button/index.ts

@@ -0,0 +1 @@
+export { default } from './button'