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

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'

package/src/blocks/columns/columns.tsx

@@ -0,0 +1,199 @@
+import BaseText from "../../blocks/BaseText";
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState } from "react";
+
+type CSSVal = string | number;
+import Blocks from "../../components/blocks/blocks";
+import DynamicDiv from "../../components/dynamic-div";
+import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer";
+import InlinedStyles from "../../components/inlined-styles";
+import type { SizeName } from "../../constants/device-sizes";
+import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import { TARGET } from "../../constants/target";
+import { deoptSignal } from "../../functions/deopt";
+import { getClassPropName } from "../../functions/get-class-prop-name";
+import { mapStyleObjToStrIfNeeded } from "../../functions/get-style";
+import type { Dictionary } from "../../types/typescript";
+import type { Column, ColumnProps } from "./columns.types";
+import { getColumnsClass } from "./helpers";
+
+function Columns(props: ColumnProps) {
+  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 getTagName(column: Column) {
+    return column.link ? props.builderLinkComponent || BaseText : View;
+  }
+
+  function getWidth(index: number) {
+    return cols[index]?.width || 100 / cols.length;
+  }
+
+  function getColumnCssWidth(index: number) {
+    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+  }
+
+  function getTabletStyle({
+    stackedStyle,
+    desktopStyle,
+  }: {
+    stackedStyle: CSSVal;
+    desktopStyle: CSSVal;
+  }) {
+    return stackAt === "tablet" ? stackedStyle : desktopStyle;
+  }
+
+  function getMobileStyle({
+    stackedStyle,
+    desktopStyle,
+  }: {
+    stackedStyle: CSSVal;
+    desktopStyle: CSSVal;
+  }) {
+    return stackAt === "never" ? desktopStyle : stackedStyle;
+  }
+
+  const [flexDir, setFlexDir] = useState(() =>
+    props.stackColumnsAt === "never"
+      ? "row"
+      : props.reverseColumnsWhenStacked
+      ? "column-reverse"
+      : "column"
+  );
+
+  function columnsCssVars() {
+    return {
+      flexDirection: flexDir as "row" | "column" | "column-reverse",
+    };
+  }
+
+  function columnCssVars(index: number) {
+    const gutter = index === 0 ? 0 : gutterSize;
+    const width = getColumnCssWidth(index);
+    const gutterPixels = `${gutter}px`;
+    const mobileWidth = "100%";
+    const mobileMarginLeft = 0;
+    const marginLeftKey = "margin-left";
+    const sharedStyles = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+    };
+    return {
+      ...sharedStyles,
+      marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
+    } as any as Dictionary<string>;
+  }
+
+  function getWidthForBreakpointSize(size: SizeName) {
+    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;
+          }
+        },
+      `;
+  }
+
+  function getAttributes(column: any, index: number) {
+    return {
+      ...{
+        dataSet: {
+          "builder-block-name": "builder-column",
+        },
+      },
+      ...(column.link
+        ? {
+            href: column.link,
+          }
+        : {}),
+      [getClassPropName()]: "builder-column",
+      style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
+    };
+  }
+
+  return (
+    <View
+      style={{
+        ...styles.view1,
+        ...columnsCssVars(),
+      }}
+      {...{
+        dataSet: {
+          "builder-block-name": "builder-columns",
+        },
+      }}
+    >
+      {TARGET !== "reactNative" ? (
+        <InlinedStyles id="builderio-columns" styles={columnsStyles()} />
+      ) : null}
+      {props.columns?.map((column, index) => (
+        <DynamicRenderer
+          key={index}
+          TagName={getTagName(column)}
+          actionAttributes={{}}
+          attributes={getAttributes(column, index)}
+        >
+          <Blocks
+            path={`component.options.columns.${index}.blocks`}
+            parent={props.builderBlock.id}
+            styleProp={{
+              flexGrow: 1,
+            }}
+            context={props.builderContext}
+            registeredComponents={props.builderComponents}
+            linkComponent={props.builderLinkComponent}
+            blocks={column.blocks}
+          />
+        </DynamicRenderer>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({ view1: { display: "flex" } });
+
+export default Columns;

package/src/blocks/columns/columns.types.ts

@@ -0,0 +1,14 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+export type Column = {
+  blocks: BuilderBlock[];
+  width?: number;
+  link?: string;
+};
+type StackColumnsAt = 'tablet' | 'mobile' | 'never';
+export interface ColumnProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
+  columns?: Column[];
+  space?: number;
+  stackColumnsAt?: StackColumnsAt;
+  reverseColumnsWhenStacked?: boolean;
+}