@builder.io/sdk-react-native 1.0.32 → 1.0.34

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;
+}

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

@@ -0,0 +1,219 @@
+import type { ComponentInfo } from '../../types/components';
+export const componentInfo: ComponentInfo = {
+  // TODO: ways to statically preprocess JSON for references, functions, etc
+  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: Map<string, any>) => {
+      function clearWidths() {
+        columns.forEach(col => {
+          col.delete('width');
+        });
+      }
+      const columns: Array<Map<string, any>> = 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
+  }]
+}

package/src/blocks/columns/helpers.ts

@@ -0,0 +1,3 @@
+export const getColumnsClass = (id?: string) => {
+  return `builder-columns ${id}-breakpoints`;
+}

package/src/blocks/columns/index.ts

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