@builder.io/sdk-react-native 1.0.31-2 → 1.0.32

package/src/functions/transform-style-property.ts

@@ -1,296 +0,0 @@
-import cssToStyleSheet from 'css-to-react-native';
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import type { BuilderContextInterface } from '../context/types';
-import type { BuilderBlock } from '../types/builder-block';
-import type { Dictionary } from '../types/typescript';
-
-const cssToReactNative: typeof cssToStyleSheet = (cssToStyleSheet as any)
-  .default
-  ? (cssToStyleSheet as any).default
-  : cssToStyleSheet;
-
-type StyleSheetProperties = ImageStyle & TextStyle & ViewStyle;
-
-/**
- * @description List of allowed css properties.
- * We use this to filter out web CSS from Builder.io that would crash RN.
- */
-const ALLOWED_CSS_PROPERTIES: Array<keyof StyleSheetProperties> = [
-  // img props
-  'backfaceVisibility',
-  'backgroundColor',
-  'borderBottomLeftRadius',
-  'borderBottomRightRadius',
-  'borderColor',
-  'borderRadius',
-  'borderTopLeftRadius',
-  'borderTopRightRadius',
-  'borderWidth',
-  'opacity',
-  'overflow',
-  'overlayColor',
-  'resizeMode',
-  'objectFit',
-  'tintColor',
-  // layout props
-  'alignContent',
-  'alignItems',
-  'alignSelf',
-  'aspectRatio',
-  'borderBottomWidth',
-  'borderEndWidth',
-  'borderLeftWidth',
-  'borderRightWidth',
-  'borderStartWidth',
-  'borderTopWidth',
-  'borderWidth',
-  'bottom',
-  'columnGap',
-  'direction',
-  'display',
-  'end',
-  'flex',
-  'flexBasis',
-  'flexDirection',
-  'flexGrow',
-  'flexShrink',
-  'flexWrap',
-  'gap',
-  'height',
-  'width',
-  'justifyContent',
-  'left',
-  'margin',
-  'marginBottom',
-  'marginEnd',
-  'marginHorizontal',
-  'marginLeft',
-  'marginRight',
-  'marginStart',
-  'marginTop',
-  'marginVertical',
-  'maxHeight',
-  'maxWidth',
-  'minHeight',
-  'minWidth',
-  'overflow',
-  'padding',
-  'paddingBottom',
-  'paddingEnd',
-  'paddingHorizontal',
-  'paddingLeft',
-  'paddingRight',
-  'paddingStart',
-  'paddingTop',
-  'paddingVertical',
-  'position',
-  'right',
-  'rowGap',
-  'start',
-  'top',
-  // shadow
-  'shadowColor',
-  'shadowOffset',
-  'shadowOpacity',
-  'shadowRadius',
-  // text props
-  'color',
-  'fontFamily',
-  'fontSize',
-  'fontStyle',
-  'fontWeight',
-  'includeFontPadding',
-  'fontVariant',
-  'letterSpacing',
-  'lineHeight',
-  'textAlign',
-  'textAlignVertical',
-  'textDecorationColor',
-  'textDecorationLine',
-  'textDecorationStyle',
-  'textShadowColor',
-  'textShadowOffset',
-  'textShadowRadius',
-  'textTransform',
-  'verticalAlign',
-  'writingDirection',
-  // TO-DO: type is missing until v73.2: https://github.com/facebook/react-native/issues/39015
-  'userSelect' as any,
-  // view style props
-  'backfaceVisibility',
-  'backgroundColor',
-  'borderBottomColor',
-  'borderBottomEndRadius',
-  'borderBottomLeftRadius',
-  'borderBottomRightRadius',
-  'borderBottomStartRadius',
-  'borderStartEndRadius',
-  'borderStartStartRadius',
-  'borderEndEndRadius',
-  'borderEndStartRadius',
-  'borderBottomWidth',
-  'borderColor',
-  'borderCurve',
-  'borderEndColor',
-  'borderLeftColor',
-  'borderLeftWidth',
-  'borderRadius',
-  'borderRightColor',
-  'borderRightWidth',
-  'borderStartColor',
-  'borderStyle',
-  'borderTopColor',
-  'borderTopEndRadius',
-  'borderTopLeftRadius',
-  'borderTopRightRadius',
-  'borderTopStartRadius',
-  'borderTopWidth',
-  'borderWidth',
-  'elevation',
-  'opacity',
-  'pointerEvents',
-];
-
-const DISPLAY_VALUES = ['flex', 'none'];
-
-const BORDERSTYLE_VALUES = ['solid', 'dotted', 'dashed'];
-
-function omit<T extends object>(obj: T, ...values: (keyof T)[]): Partial<T> {
-  const newObject = Object.assign({}, obj);
-  for (const key of values) {
-    delete (newObject as any)[key];
-  }
-  return newObject;
-}
-
-const inRange = (value: number, min: number, max: number) =>
-  value >= min && value <= max;
-
-const processValue = (
-  styles: { [key: string]: string },
-  [key, value]: [string, unknown]
-): string | undefined => {
-  if (typeof value !== 'string' || value === '') return undefined;
-  if (!ALLOWED_CSS_PROPERTIES.includes(key as any)) return undefined;
-  if (value.includes('calc')) return undefined;
-  if (value.includes('inherit')) return undefined;
-  if (value === 'px') return undefined;
-  if (key === 'display' && !DISPLAY_VALUES.includes(value)) return undefined;
-
-  if (key === 'borderStyle' && !BORDERSTYLE_VALUES.includes(value))
-    return undefined;
-
-  if (key === 'maxWidth' && value === 'none') {
-    return '100%';
-  }
-
-  if (key === 'lineHeight' && !value.includes('px')) {
-    const fontSize = parseFloat(styles.fontSize);
-    const lineHeight = parseFloat(styles.lineHeight);
-
-    if (!isNaN(fontSize) && !isNaN(lineHeight) && inRange(lineHeight, 1, 2)) {
-      return `${Math.round(fontSize * lineHeight)}px`;
-    }
-
-    return undefined;
-  }
-
-  if (key === 'fontFamily') {
-    return value.replace(/["]/g, '').split(',')[0];
-  }
-
-  const numericValue = parseFloat(value);
-  const isNumeric = !isNaN(numericValue);
-
-  if (isNumeric) {
-    const processSuffix = (numAsStr: string) => {
-      if (numAsStr.includes('em')) {
-        if (key === 'letterSpacing') return numAsStr.replace('em', 'px');
-
-        return numAsStr.replace('em', '');
-      }
-
-      if (numAsStr.includes('pt')) return numAsStr.replace('pt', '');
-      if (numAsStr.includes('vw')) return numAsStr.replace('vw', '%');
-      if (numAsStr.includes('vh')) return numAsStr.replace('vh', '%');
-
-      return numAsStr;
-    };
-
-    return processSuffix(value);
-  }
-
-  return value;
-};
-
-/**
- * @description Cleans styles that RN can't handle and css-to-react-native doesn't fix
- */
-const cleanCssStyleProps = (styles: {
-  [key: string]: string;
-}): { [key: string]: string } =>
-  Object.entries(styles).reduce((acc, [key, value]) => {
-    const processedValue = processValue(styles, [key, value]);
-    if (processedValue === undefined) return acc;
-    return { ...acc, [key]: processedValue };
-  }, {});
-
-/**
- * We ignore any `display: none` coming from med/large styles, as that would
- * inadvertedly hide our content on mobile.
- */
-const removeDisplayNone = (styles: Dictionary<any>) =>
-  styles.display === 'none' ? omit(styles, 'display') : styles;
-
-function getReactNativeBlockStyles({
-  block,
-  context,
-  blockStyles,
-}: {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-  blockStyles: any;
-}): CSSStyleDeclaration | Record<string, string | undefined> {
-  const responsiveStyles = block.responsiveStyles;
-  if (!responsiveStyles) {
-    return {};
-  }
-
-  const largeAndMediumStyles = removeDisplayNone({
-    ...(responsiveStyles.large || {}),
-    ...(responsiveStyles.medium || {}),
-  });
-
-  const styles = {
-    // recursively apply inherited styles so that they can be passed down to children `Text` blocks
-    ...context.inheritedStyles,
-    ...largeAndMediumStyles,
-    ...(responsiveStyles.small || {}),
-    ...blockStyles,
-  } as Record<string, string | number>;
-
-  const cleanedCSS = cleanCssStyleProps(styles as any);
-
-  const newStyles = cssToReactNative(
-    Object.entries(cleanedCSS)
-  ) as any as CSSStyleDeclaration;
-
-  return newStyles;
-}
-
-export function transformStyleProperty({
-  block,
-  context,
-  style,
-}: {
-  block: BuilderBlock;
-  context: BuilderContextInterface;
-  style: any;
-}) {
-  const newStyles = getReactNativeBlockStyles({
-    block,
-    context,
-    blockStyles: style,
-  });
-  return newStyles;
-}

package/src/helpers/ab-tests.ts

@@ -1,166 +0,0 @@
-import { TARGET } from '../constants/target';
-import { checkIsDefined } from '../helpers/nullable';
-import type { BuilderContent, BuilderContentVariation } from '../types/builder-content';
-import type { CanTrack } from '../types/can-track';
-import type { Nullable, Overwrite } from '../types/typescript';
-import { getCookie, getCookieSync, setCookie } from './cookie';
-import { logger } from './logger';
-const BUILDER_STORE_PREFIX = 'builder.tests';
-const getContentTestKey = (id: string) => `${BUILDER_STORE_PREFIX}.${id}`;
-const getContentVariationCookie = ({
-  contentId
-}: {
-  contentId: string;
-}) => getCookie({
-  name: getContentTestKey(contentId),
-  canTrack: true
-});
-const getContentVariationCookieSync = ({
-  contentId
-}: {
-  contentId: string;
-}) => getCookieSync({
-  name: getContentTestKey(contentId),
-  canTrack: true
-});
-const setContentVariationCookie = ({
-  contentId,
-  value
-}: {
-  contentId: string;
-  value: string;
-}) => setCookie({
-  name: getContentTestKey(contentId),
-  value,
-  canTrack: true
-});
-type BuilderContentWithVariations = Overwrite<BuilderContent, Required<Pick<BuilderContent, 'variations' | 'id'>>>;
-const checkIsBuilderContentWithVariations = (item: BuilderContent): item is BuilderContentWithVariations => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
-
-/**
- * Randomly assign a variation to a user
- */
-const getRandomVariationId = ({
-  id,
-  variations
-}: BuilderContentWithVariations) => {
-  let n = 0;
-  const random = Math.random();
-
-  // loop over variations test ratios, incrementing a counter,
-  // until we find the variation that this user should be assigned to
-  for (const id in variations) {
-    const testRatio = variations[id]?.testRatio;
-    n += testRatio!;
-    if (random < n) {
-      return id;
-    }
-  }
-
-  // the variations array does not include the default variation.
-  // if we arrive here, then it means that the random number fits in the default variation bucket.
-  return id;
-};
-const getAndSetVariantId = (args: BuilderContentWithVariations) => {
-  // if variation not found in storage, assign a random variation to this user
-  const randomVariationId = getRandomVariationId(args);
-
-  // store variation in cookies/storage
-  setContentVariationCookie({
-    contentId: args.id,
-    value: randomVariationId
-  }).catch(err => {
-    logger.error('could not store A/B test variation: ', err);
-  });
-  return randomVariationId;
-};
-type TestFields = {
-  data?: BuilderContentVariation['data'];
-  testVariationId?: string;
-  testVariationName: string;
-};
-const getTestFields = ({
-  item,
-  testGroupId
-}: {
-  item: BuilderContentWithVariations;
-  testGroupId: string;
-}): TestFields => {
-  const variationValue = item.variations[testGroupId];
-  if (testGroupId === item.id ||
-  // handle edge-case where `testGroupId` points to non-existing variation
-  !variationValue) {
-    return {
-      testVariationId: item.id,
-      testVariationName: 'Default'
-    };
-  } else {
-    return {
-      data: variationValue.data,
-      testVariationId: variationValue.id,
-      testVariationName: variationValue.name || (variationValue.id === item.id ? 'Default' : '')
-    };
-  }
-};
-export const handleABTestingSync = ({
-  item,
-  canTrack
-}: {
-  item: Nullable<BuilderContent>;
-} & CanTrack): Nullable<BuilderContent> => {
-  /**
-   * We cannot SSR in React-Native.
-   */
-  if (TARGET === 'reactNative') return item;
-  if (!canTrack) {
-    return item;
-  }
-  if (!item) {
-    return undefined;
-  }
-  if (!checkIsBuilderContentWithVariations(item)) {
-    return item;
-  }
-  const testGroupId = getContentVariationCookieSync({
-    contentId: item.id
-  }) || getAndSetVariantId({
-    variations: item.variations,
-    id: item.id
-  });
-  const variationValue = getTestFields({
-    item,
-    testGroupId
-  });
-  return {
-    ...item,
-    ...variationValue
-  };
-};
-export const handleABTesting = async ({
-  item,
-  canTrack
-}: {
-  item: BuilderContent;
-} & CanTrack): Promise<BuilderContent> => {
-  if (!canTrack) {
-    return item;
-  }
-  if (!checkIsBuilderContentWithVariations(item)) {
-    return item;
-  }
-  const cookieValue = await getContentVariationCookie({
-    contentId: item.id
-  });
-  const testGroupId = cookieValue || getAndSetVariantId({
-    variations: item.variations,
-    id: item.id
-  });
-  const variationValue = getTestFields({
-    item,
-    testGroupId
-  });
-  return {
-    ...item,
-    ...variationValue
-  };
-}

package/src/helpers/canTrack.ts

@@ -1,2 +0,0 @@
-import { checkIsDefined } from './nullable';
-export const getDefaultCanTrack = (canTrack?: boolean) => checkIsDefined(canTrack) ? canTrack : true

package/src/helpers/cookie.ts

@@ -1,109 +0,0 @@
-// polyfill `regenerator-runtime` for `react-native-storage`
-import 'regenerator-runtime/runtime';
-
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { Platform } from 'react-native';
-import Storage from 'react-native-storage';
-import { isBrowser } from '../functions/is-browser';
-import type { CanTrack } from '../types/can-track';
-import { logger } from './logger';
-
-const ONE_DAY = 1000 * 60 * 60 * 24;
-
-const initStorage = () => {
-  const backend =
-    Platform.OS === 'web'
-      ? isBrowser()
-        ? // web
-          window?.localStorage
-        : // static rendering/SSR in expo 50+
-          undefined
-      : // non-web (iOS/Android)
-        AsyncStorage;
-
-  const storage = new Storage({
-    // maximum capacity, default 1000 key-ids
-    size: 1000,
-
-    // Use AsyncStorage for RN apps, or window.localStorage for web apps.
-    // If storageBackend is not set, data will be lost after reload.
-    storageBackend: backend,
-
-    // expire time, default: 1 day (1000 * 3600 * 24 milliseconds).
-    // can be null, which means never expire.
-    defaultExpires: ONE_DAY * 30,
-
-    // cache data in the memory. default is true.
-    enableCache: true,
-  });
-
-  return storage;
-};
-
-const storage = initStorage();
-
-const getStorageName = (name: string) => `builderio.${name}`;
-
-// stub, never called, but needed to fix bundling.
-export const getCookieSync = (
-  _: {
-    name: string;
-  } & CanTrack
-): any => {};
-
-export const getCookie = async ({
-  name,
-  canTrack,
-}: {
-  name: string;
-} & CanTrack) => {
-  try {
-    if (!canTrack) {
-      return undefined;
-    }
-
-    // react-native does not support underscores in names
-    const parsedName = name.replace(/_/g, '.');
-
-    const data = await storage.load({ key: getStorageName(parsedName) });
-
-    return data.value;
-  } catch (err) {
-    if (err?.name !== 'NotFoundError') {
-      logger.warn('[COOKIE] GET error: ', err?.message || err);
-    }
-    return undefined;
-  }
-};
-
-export const setCookie = async ({
-  name,
-  value,
-  expires,
-  canTrack,
-}: {
-  name: string;
-  value: string;
-  expires?: Date;
-} & CanTrack) => {
-  try {
-    if (!canTrack) {
-      return undefined;
-    }
-    // convert `expires` date to number representing milliseconds from now until the date
-    const expiresAsNumber = expires
-      ? expires.getTime() - Date.now()
-      : undefined;
-
-    await storage.save({
-      key: getStorageName(name),
-      data: { value },
-      expires: expiresAsNumber,
-    });
-  } catch (err) {
-    if (err?.name !== 'NotFoundError') {
-      logger.warn('[COOKIE] SET error: ', err?.message || err);
-    }
-    return undefined;
-  }
-};

package/src/helpers/css.ts

@@ -1,33 +0,0 @@
-import { camelToKebabCase } from '../functions/camel-to-kebab-case';
-import { checkIsDefined } from './nullable';
-export const convertStyleMapToCSSArray = (style: Partial<CSSStyleDeclaration>): string[] => {
-  const cssProps = Object.entries(style).map(([key, value]) => {
-    if (typeof value === 'string') {
-      return `${camelToKebabCase(key)}: ${value};`;
-    } else {
-      return undefined;
-    }
-  });
-  return cssProps.filter(checkIsDefined);
-};
-export const convertStyleMapToCSS = (style: Partial<CSSStyleDeclaration>): string => convertStyleMapToCSSArray(style).join('\n');
-export const createCssClass = ({
-  mediaQuery,
-  className,
-  styles
-}: {
-  mediaQuery?: string;
-  className: string;
-  styles: Partial<CSSStyleDeclaration>;
-}) => {
-  const cssClass = `.${className} {
-    ${convertStyleMapToCSS(styles)}
-  }`;
-  if (mediaQuery) {
-    return `${mediaQuery} {
-      ${cssClass}
-    }`;
-  } else {
-    return cssClass;
-  }
-}

package/src/helpers/flatten.ts

@@ -1,41 +0,0 @@
-/**
- * Convert deep object to a flat object with dots
- *
- * { foo: { bar: 'baz' }} -> { 'foo.bar': 'baz' }
- */
-export function flatten<T extends Record<string, any>>(object: T, path: string | null = null, separator = '.'): T {
-  return Object.keys(object).reduce((acc: T, key: string): T => {
-    const value = object[key];
-    const newPath = [path, key].filter(Boolean).join(separator);
-    const isObject = [typeof value === 'object', value !== null, !(Array.isArray(value) && value.length === 0)].every(Boolean);
-    return isObject ? {
-      ...acc,
-      ...flatten(value, newPath, separator)
-    } : {
-      ...acc,
-      [newPath]: value
-    };
-  }, ({} as T));
-}
-
-/**
- * Flatten a nested MongoDB query object into a flat object with dot-separated keys.
- * $ keys are not flattened and are left as is.
- *
- * { foo: { bar: { $gt: 5 }}} -> { 'foo.bar': { '$gt': 5 }}
- * { foo: {'bar.id': { $elemMatch: { 'baz.id': { $in: ['abc', 'bcd'] }}}}} -> { 'foo.bar.id': { '$elemMatch': { 'baz.id': { '$in': ['abc', 'bcd'] }}}}
- */
-export function flattenMongoQuery(obj: any, _current?: any, _res: any = {}): {
-  [key: string]: string;
-} {
-  for (const key in obj) {
-    const value = obj[key];
-    const newKey = _current ? _current + '.' + key : key;
-    if (value && typeof value === 'object' && !Array.isArray(value) && !Object.keys(value).find(item => item.startsWith('$'))) {
-      flattenMongoQuery(value, newKey, _res);
-    } else {
-      _res[newKey] = value;
-    }
-  }
-  return _res;
-}

package/src/helpers/localStorage.ts

@@ -1,36 +0,0 @@
-import { isBrowser } from '../functions/is-browser';
-import type { CanTrack } from '../types/can-track';
-import type { Nullable } from './nullable';
-const getLocalStorage = () => isBrowser() && typeof localStorage !== 'undefined' ? localStorage : undefined;
-export const getLocalStorageItem = ({
-  key,
-  canTrack
-}: {
-  key: string;
-} & CanTrack): Nullable<string> => {
-  try {
-    if (canTrack) {
-      return getLocalStorage()?.getItem(key);
-    }
-    return undefined;
-  } catch (err) {
-    console.debug('[LocalStorage] GET error: ', err);
-    return undefined;
-  }
-};
-export const setLocalStorageItem = ({
-  key,
-  canTrack,
-  value
-}: {
-  key: string;
-  value: string;
-} & CanTrack) => {
-  try {
-    if (canTrack) {
-      getLocalStorage()?.setItem(key, value);
-    }
-  } catch (err) {
-    console.debug('[LocalStorage] SET error: ', err);
-  }
-}

package/src/helpers/logger.ts

@@ -1,7 +0,0 @@
-export const MSG_PREFIX = '[Builder.io]: ';
-export const logger = {
-  log: (...message: any[]) => console.log(MSG_PREFIX, ...message),
-  error: (...message: any[]) => console.error(MSG_PREFIX, ...message),
-  warn: (...message: any[]) => console.warn(MSG_PREFIX, ...message),
-  debug: (...message: any[]) => console.debug(MSG_PREFIX, ...message)
-}

package/src/helpers/nullable.ts

@@ -1,2 +0,0 @@
-export type Nullable<T> = T | null | undefined;
-export const checkIsDefined = <T,>(maybeT: Nullable<T>): maybeT is T => maybeT !== null && maybeT !== undefined

package/src/helpers/omit.ts

@@ -1,7 +0,0 @@
-export function omit<T extends object>(obj: T, ...values: (keyof T)[]): Partial<T> {
-  const newObject = Object.assign({}, obj);
-  for (const key of values) {
-    delete (newObject as any)[key];
-  }
-  return newObject;
-}