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

package/src/blocks/slot/slot.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+export type DropzoneProps = BuilderDataProps & {
+  name: string;
+  attributes: any;
+};
+import Blocks from "../../components/blocks/blocks";
+import { deoptSignal } from "../../functions/deopt";
+import type { BuilderBlock } from "../../types/builder-block";
+import type { BuilderDataProps } from "../../types/builder-props";
+
+function Slot(props: DropzoneProps) {
+  return (
+    <View
+      style={{
+        pointerEvents: "auto",
+      }}
+      {...(!props.builderContext.context?.symbolId && {
+        "builder-slot": props.name,
+      })}
+    >
+      <Blocks
+        parent={props.builderContext.context?.symbolId as string}
+        path={`symbol.data.${props.name}`}
+        context={props.builderContext}
+        blocks={props.builderContext.rootState?.[props.name] as BuilderBlock[]}
+      />
+    </View>
+  );
+}
+
+export default Slot;

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

@@ -0,0 +1,35 @@
+import type { ComponentInfo } from '../../types/components';
+export const componentInfo: ComponentInfo = {
+  name: 'Symbol',
+  noWrap: true,
+  static: true,
+  isRSC: true,
+  inputs: [{
+    name: 'symbol',
+    type: 'uiSymbol'
+  }, {
+    name: 'dataOnly',
+    helperText: "Make this a data symbol that doesn't display any UI",
+    type: 'boolean',
+    defaultValue: false,
+    advanced: true,
+    hideFromUI: true
+  }, {
+    name: 'inheritState',
+    helperText: 'Inherit the parent component state and data',
+    type: 'boolean',
+    defaultValue: false,
+    advanced: true
+  }, {
+    name: 'renderToLiquid',
+    helperText: 'Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting',
+    type: 'boolean',
+    defaultValue: false,
+    advanced: true,
+    hideFromUI: true
+  }, {
+    name: 'useChildren',
+    hideFromUI: true,
+    type: 'boolean'
+  }]
+}

package/src/blocks/symbol/index.ts

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

package/src/blocks/symbol/symbol.helpers.ts

@@ -0,0 +1,47 @@
+import type { BuilderContextInterface } from '../../context/types';
+import { fetchOneEntry } from '../../functions/get-content/index';
+import { logger } from '../../helpers/logger';
+import type { BuilderContent } from '../../types/builder-content';
+export interface SymbolInfo {
+  model?: string;
+  entry?: string;
+  data?: any;
+  content?: BuilderContent;
+  inline?: boolean;
+  dynamic?: boolean;
+}
+export const fetchSymbolContent = async ({
+  builderContextValue,
+  symbol
+}: {
+  symbol: SymbolInfo | undefined;
+  builderContextValue: BuilderContextInterface;
+}) => {
+  /**
+   * If:
+   * - we have a symbol prop
+   * - yet it does not have any content
+   * - and we have not already stored content from before
+   * - and it has a model name
+   *
+   * then we want to re-fetch the symbol content.
+   */
+  if (symbol?.model &&
+  // This is a hack, we should not need to check for this, but it is needed for Svelte.
+  builderContextValue?.apiKey) {
+    return fetchOneEntry({
+      model: symbol.model,
+      apiKey: builderContextValue.apiKey,
+      apiVersion: builderContextValue.apiVersion,
+      ...(symbol?.entry && {
+        query: {
+          id: symbol.entry
+        }
+      })
+    }).catch(err => {
+      logger.error('Could not fetch symbol content: ', err);
+      return undefined;
+    });
+  }
+  return undefined;
+}

package/src/blocks/symbol/symbol.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+import { useState, useEffect } from "react";
+import ContentVariants from "../../components/content-variants/index";
+import type { BuilderContent } from "../../types/builder-content";
+import { filterAttrs } from "../helpers";
+import DynamicDiv from "../../components/dynamic-div";
+import { getClassPropName } from "../../functions/get-class-prop-name";
+import type { Nullable } from "../../types/typescript";
+import { setAttrs } from "../helpers";
+import { fetchSymbolContent } from "./symbol.helpers";
+import type { SymbolProps } from "./symbol.types";
+
+function Symbol(props: SymbolProps) {
+  function blocksWrapper() {
+    return View;
+  }
+
+  function contentWrapper() {
+    return View;
+  }
+
+  function className() {
+    return [
+      ...[],
+      "builder-symbol",
+      props.symbol?.inline ? "builder-inline-symbol" : undefined,
+      props.symbol?.dynamic || props.dynamic
+        ? "builder-dynamic-symbol"
+        : undefined,
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
+
+  const [contentToUse, setContentToUse] = useState(() => props.symbol?.content);
+
+  function setContent() {
+    if (contentToUse) return;
+    fetchSymbolContent({
+      symbol: props.symbol,
+      builderContextValue: props.builderContext,
+    }).then((newContent) => {
+      if (newContent) {
+        setContentToUse(newContent);
+      }
+    });
+  }
+
+  useEffect(() => {}, []);
+
+  useEffect(() => {
+    setContent();
+  }, [props.symbol]);
+
+  return (
+    <View
+      {...{}}
+      {...props.attributes}
+      {...{
+        dataSet: {
+          class: className(),
+        },
+      }}
+    >
+      <ContentVariants
+        isNestedRender
+        apiVersion={props.builderContext.apiVersion}
+        apiKey={props.builderContext.apiKey!}
+        context={{
+          ...props.builderContext.context,
+          symbolId: props.builderBlock?.id,
+        }}
+        customComponents={Object.values(props.builderComponents)}
+        data={{
+          ...props.symbol?.data,
+          ...props.builderContext.localState,
+          ...contentToUse?.data?.state,
+        }}
+        model={props.symbol?.model}
+        content={contentToUse}
+        linkComponent={props.builderLinkComponent}
+        blocksWrapper={blocksWrapper()}
+        contentWrapper={contentWrapper()}
+      />
+    </View>
+  );
+}
+
+export default Symbol;

package/src/blocks/symbol/symbol.types.ts

@@ -0,0 +1,17 @@
+import type { BuilderContent } from '../../types/builder-content';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+interface SymbolInfo {
+  model?: string;
+  entry?: string;
+  data?: any;
+  content?: BuilderContent;
+  inline?: boolean;
+  dynamic?: boolean;
+}
+export interface SymbolProps extends BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp {
+  symbol?: SymbolInfo;
+  dataOnly?: boolean;
+  dynamic?: boolean;
+  attributes?: any;
+  inheritState?: boolean;
+}

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

@@ -0,0 +1,139 @@
+import type { ComponentInfo } from '../../types/components';
+const defaultTab = {
+  '@type': '@builder.io/sdk:Element',
+  responsiveStyles: {
+    large: {
+      paddingLeft: '20px',
+      paddingRight: '20px',
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      minWidth: '100px',
+      textAlign: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      cursor: 'pointer',
+      userSelect: 'none'
+    }
+  },
+  component: {
+    name: 'Text',
+    options: {
+      text: 'New tab'
+    }
+  }
+};
+const defaultElement = {
+  '@type': '@builder.io/sdk:Element',
+  responsiveStyles: {
+    large: {
+      height: '200px',
+      display: 'flex',
+      marginTop: '20px',
+      flexDirection: 'column'
+    }
+  },
+  component: {
+    name: 'Text',
+    options: {
+      text: 'New tab content '
+    }
+  }
+};
+export const componentInfo: ComponentInfo = {
+  name: 'Builder: Tabs',
+  inputs: [{
+    name: 'tabs',
+    type: 'list',
+    broadcast: true,
+    subFields: [{
+      name: 'label',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [defaultTab]
+    }, {
+      name: 'content',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [defaultElement]
+    }],
+    defaultValue: [{
+      label: [{
+        ...defaultTab,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 1'
+          }
+        }
+      }],
+      content: [{
+        ...defaultElement,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 1 content'
+          }
+        }
+      }]
+    }, {
+      label: [{
+        ...defaultTab,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 2'
+          }
+        }
+      }],
+      content: [{
+        ...defaultElement,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 2 content'
+          }
+        }
+      }]
+    }]
+  }, {
+    name: 'activeTabStyle',
+    type: 'uiStyle',
+    helperText: 'CSS styles for the active tab',
+    defaultValue: {
+      backgroundColor: 'rgba(0, 0, 0, 0.1)'
+    }
+  }, {
+    name: 'defaultActiveTab',
+    type: 'number',
+    helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
+    defaultValue: 1,
+    advanced: true
+  }, {
+    name: 'collapsible',
+    type: 'boolean',
+    helperText: 'If on, clicking an open tab closes it so no tabs are active',
+    defaultValue: false,
+    advanced: true
+  }, {
+    name: 'tabHeaderLayout',
+    type: 'enum',
+    helperText: 'Change the layout of the tab headers (uses justify-content)',
+    defaultValue: 'flex-start',
+    enum: [{
+      label: 'Center',
+      value: 'center'
+    }, {
+      label: 'Space between',
+      value: 'space-between'
+    }, {
+      label: 'Space around',
+      value: 'space-around'
+    }, {
+      label: 'Left',
+      value: 'flex-start'
+    }, {
+      label: 'Right',
+      value: 'flex-end'
+    }]
+  }]
+}

package/src/blocks/tabs/index.ts

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

package/src/blocks/tabs/tabs.tsx

@@ -0,0 +1,79 @@
+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/blocks";
+import type { BuilderBlock } from "../../types/builder-block";
+import type { TabsProps } from "./tabs.types";
+
+function Tabs(props: TabsProps) {
+  const [activeTab, setActiveTab] = useState(() =>
+    props.defaultActiveTab ? props.defaultActiveTab - 1 : 0
+  );
+
+  function activeTabContent(active: number) {
+    return props.tabs && props.tabs[active].content;
+  }
+
+  function onClick(index: number) {
+    if (index === activeTab && props.collapsible) {
+      setActiveTab(-1);
+    } else {
+      setActiveTab(index);
+    }
+  }
+
+  return (
+    <View>
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "row" as "row" | "column" | "column-reverse",
+          justifyContent: props.tabHeaderLayout || "flex-start",
+          overflow: "scroll" as "scroll" | "visible" | "hidden",
+        }}
+      >
+        {props.tabs?.map((tab, index) => (
+          <Pressable
+            key={index}
+            style={{
+              ...(activeTab === index ? props.activeTabStyle : {}),
+            }}
+            onPress={(event) => onClick(index)}
+          >
+            <Blocks
+              parent={props.builderBlock.id}
+              path={`component.options.tabs.${index}.label`}
+              blocks={tab.label}
+              context={props.builderContext}
+              registeredComponents={props.builderComponents}
+              linkComponent={props.builderLinkComponent}
+            />
+          </Pressable>
+        ))}
+      </View>
+      {activeTabContent(activeTab) ? (
+        <View>
+          <Blocks
+            parent={props.builderBlock.id}
+            path={`component.options.tabs.${activeTab}.content`}
+            blocks={activeTabContent(activeTab)}
+            context={props.builderContext}
+            registeredComponents={props.builderComponents}
+            linkComponent={props.builderLinkComponent}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export default Tabs;

package/src/blocks/tabs/tabs.types.ts

@@ -0,0 +1,13 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+export interface TabsProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
+  tabs: {
+    label: BuilderBlock[];
+    content: BuilderBlock[];
+  }[];
+  builderBlock: BuilderBlock;
+  defaultActiveTab?: number;
+  collapsible?: boolean;
+  tabHeaderLayout?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+  activeTabStyle?: any;
+}

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

@@ -0,0 +1,20 @@
+import type { ComponentInfo } from '../../types/components';
+export const componentInfo: ComponentInfo = {
+  name: 'Text',
+  static: true,
+  isRSC: true,
+  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
+  inputs: [{
+    name: 'text',
+    type: 'html',
+    required: true,
+    autoFocus: true,
+    bubble: true,
+    defaultValue: 'Enter some text...'
+  }],
+  defaultStyles: {
+    lineHeight: 'normal',
+    height: 'auto',
+    textAlign: 'center'
+  }
+}

package/src/blocks/text/index.ts

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

package/src/blocks/text/text.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { useWindowDimensions } from 'react-native';
+import { RenderHTML } from 'react-native-render-html';
+import BuilderContext from '../../context/builder.context';
+import { checkIsDefined } from '../../helpers/nullable';
+/**
+ * @typedef {{}} BuilderBlock
+ */
+
+/**
+ *
+ * @param {string} string
+ * @returns {string}
+ */
+function camelToKebabCase(string) {
+  return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ *
+ * @param {object} object
+ * @param {string[]} keys
+ * @returns {object}
+ */
+function pick(object, keys) {
+  return keys.reduce((obj, key) => {
+    // eslint-disable-next-line no-prototype-builtins
+    if (object && object.hasOwnProperty(key)) {
+      obj[key] = object[key];
+    }
+    return obj;
+  }, {});
+}
+
+const PICK_STYLES = ['textAlign'];
+
+/**
+ * @param {BuilderBlock} block
+ * @returns
+ */
+function getBlockStyles(block) {
+  // TODO: responsive CSS using react native viewport width hooks
+  const styles = {
+    ...block.responsiveStyles?.large,
+    ...block.styles,
+  };
+
+  if (block.responsiveStyles?.medium) {
+    Object.assign(styles, block.responsiveStyles.medium);
+  }
+  if (block.responsiveStyles?.small) {
+    Object.assign(styles, block.responsiveStyles.small);
+  }
+
+  return styles;
+}
+
+/**
+ *
+ * @param {BuilderBlock} block
+ * @param {any} inheritedStyles
+ * @returns
+ */
+function getCss(block, inheritedStyles) {
+  const styleObject = {
+    ...inheritedStyles,
+    ...pick(getBlockStyles(block), PICK_STYLES),
+  };
+  if (!styleObject) {
+    return '';
+  }
+
+  let str = ``;
+
+  for (const key in styleObject) {
+    const value = styleObject[key];
+    if (typeof value === 'string') {
+      str += `${camelToKebabCase(key)}: ${value};`;
+    }
+  }
+
+  return str;
+}
+
+/**
+ *
+ * @param {{ text: string; builderBlock: BuilderBlock}} props
+ * @returns
+ */
+export default function Text(props) {
+  const { width } = useWindowDimensions();
+  const builderContext = React.useContext(BuilderContext);
+
+  return (
+    <RenderHTML
+      contentWidth={width}
+      source={{
+        html: `<div style="${getCss(
+          props.builderBlock,
+          builderContext.inheritedStyles
+        )}">${checkIsDefined(props.text) ? String(props.text) : ''}</div>`,
+      }}
+    />
+  );
+}

package/src/blocks/text/text.types.ts

@@ -0,0 +1,4 @@
+import type { BuilderDataProps } from '../../types/builder-props';
+export type TextProps = {
+  text?: string;
+} & BuilderDataProps

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

@@ -0,0 +1,38 @@
+import type { ComponentInfo } from '../../types/components';
+export const componentInfo: ComponentInfo = {
+  name: 'Form:TextArea',
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
+  inputs: [{
+    advanced: true,
+    name: 'value',
+    type: 'string'
+  }, {
+    name: 'name',
+    type: 'string',
+    required: true,
+    helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
+  }, {
+    name: 'defaultValue',
+    type: 'string'
+  }, {
+    name: 'placeholder',
+    type: 'string',
+    defaultValue: 'Hello there'
+  }, {
+    name: 'required',
+    type: 'boolean',
+    defaultValue: false
+  }],
+  defaultStyles: {
+    paddingTop: '10px',
+    paddingBottom: '10px',
+    paddingLeft: '10px',
+    paddingRight: '10px',
+    borderRadius: '3px',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: '#ccc'
+  },
+  static: true,
+  noWrap: true
+}

package/src/blocks/textarea/index.ts

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

package/src/blocks/textarea/textarea.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+} from "react-native";
+
+/**
+ * This import is used by the Svelte SDK. Do not remove.
+ */
+
+export interface TextareaProps {
+  attributes?: any;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+}
+
+import { filterAttrs } from "../helpers";
+import { setAttrs } from "../helpers";
+
+function Textarea(props: TextareaProps) {
+  return (
+    <View
+      {...{}}
+      {...props.attributes}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+    />
+  );
+}
+
+export default Textarea;