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

package/src/blocks/symbol/symbol.tsx

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

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

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

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

package/src/blocks/tabs/tabs.tsx

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

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

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

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

package/src/blocks/text/text.tsx

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

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

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

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

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

package/src/blocks/textarea/textarea.tsx

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

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

@@ -1,83 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export const componentInfo: ComponentInfo = {
-  name: 'Video',
-  canHaveChildren: true,
-  defaultStyles: {
-    minHeight: '20px',
-    minWidth: '20px'
-  },
-  image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',
-  inputs: [{
-    name: 'video',
-    type: 'file',
-    allowedFileTypes: ['mp4'],
-    bubble: true,
-    defaultValue: 'https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd27731a526464deba0016216f5f9e570%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=d27731a526464deba0016216f5f9e570&alt=media&optimized=true',
-    required: true
-  }, {
-    name: 'posterImage',
-    type: 'file',
-    allowedFileTypes: ['jpeg', 'png'],
-    helperText: 'Image to show before the video plays'
-  }, {
-    name: 'autoPlay',
-    type: 'boolean',
-    defaultValue: true
-  }, {
-    name: 'controls',
-    type: 'boolean',
-    defaultValue: false
-  }, {
-    name: 'muted',
-    type: 'boolean',
-    defaultValue: true
-  }, {
-    name: 'loop',
-    type: 'boolean',
-    defaultValue: true
-  }, {
-    name: 'playsInline',
-    type: 'boolean',
-    defaultValue: true
-  }, {
-    name: 'fit',
-    type: 'text',
-    defaultValue: 'cover',
-    enum: ['contain', 'cover', 'fill', 'auto']
-  }, {
-    name: 'preload',
-    type: 'text',
-    defaultValue: 'metadata',
-    enum: ['auto', 'metadata', 'none']
-  }, {
-    name: 'fitContent',
-    type: 'boolean',
-    helperText: 'When child blocks are provided, fit to them instead of using the aspect ratio',
-    defaultValue: true,
-    advanced: true
-  }, {
-    name: 'position',
-    type: 'text',
-    defaultValue: 'center',
-    enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
-  }, {
-    name: 'height',
-    type: 'number',
-    advanced: true
-  }, {
-    name: 'width',
-    type: 'number',
-    advanced: true
-  }, {
-    name: 'aspectRatio',
-    type: 'number',
-    advanced: true,
-    defaultValue: 0.7004048582995948
-  }, {
-    name: 'lazyLoad',
-    type: 'boolean',
-    helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
-    defaultValue: true,
-    advanced: true
-  }]
-}

package/src/blocks/video/index.ts

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