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

package/src/blocks/BaseText.tsx

@@ -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/src/blocks/accordion/accordion.tsx

@@ -1,181 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

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

package/src/blocks/accordion/index.ts

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

package/src/blocks/button/button.tsx

@@ -1,56 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

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

package/src/blocks/columns/columns.tsx

@@ -1,199 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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;
-}