@builder.io/sdk-react 0.2.3-4 → 0.2.3

package/packages/react/src/constants/device-sizes.ts

@@ -1,65 +0,0 @@
-import { fastClone } from '../functions/fast-clone';
-export type SizeName = 'large' | 'medium' | 'small';
-
-interface Size {
-  min: number;
-  default: number;
-  max: number;
-}
-
-const SIZES: Record<SizeName, Size> = {
-  small: {
-    min: 320,
-    default: 321,
-    max: 640,
-  },
-  medium: {
-    min: 641,
-    default: 642,
-    max: 991,
-  },
-  large: {
-    min: 990,
-    default: 991,
-    max: 1200,
-  },
-};
-
-export const getMaxWidthQueryForSize = (size: SizeName, sizeValues = SIZES) =>
-  `@media (max-width: ${sizeValues[size].max}px)`;
-
-interface Breakpoints {
-  small?: number;
-  medium?: number;
-}
-
-export const getSizesForBreakpoints = ({ small, medium }: Breakpoints) => {
-  const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
-
-  if (!small || !medium) {
-    return newSizes;
-  }
-
-  const smallMin = Math.floor(small / 2);
-  newSizes.small = {
-    max: small,
-    min: smallMin,
-    default: smallMin + 1,
-  };
-
-  const mediumMin = newSizes.small.max + 1;
-  newSizes.medium = {
-    max: medium,
-    min: mediumMin,
-    default: mediumMin + 1,
-  };
-
-  const largeMin = newSizes.medium.max + 1;
-  newSizes.large = {
-    max: 2000, // TODO: decide upper limit
-    min: largeMin,
-    default: largeMin + 1,
-  };
-
-  return newSizes;
-};

package/packages/react/src/constants/target.ts

@@ -1,2 +0,0 @@
-/** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
-export const TARGET = 'react' as any;

package/packages/react/src/context/builder.context.ts

@@ -1,12 +0,0 @@
-import { createContext } from "react";
-
-export default createContext<any>({
-  content: null,
-  context: {},
-  state: {},
-  setState() {},
-  apiKey: null,
-  apiVersion: undefined,
-  registeredComponents: {},
-  inheritedStyles: {},
-});

package/packages/react/src/context/types.ts

@@ -1,26 +0,0 @@
-import type { BuilderContent } from '../types/builder-content.js';
-import type { ComponentInfo } from '../types/components.js';
-import type { Dictionary, Nullable } from '../types/typescript.js';
-import type { ApiVersion } from '../types/api-version.js';
-
-export type RegisteredComponent = ComponentInfo & {
-  component: any;
-};
-
-export type RegisteredComponents = Dictionary<RegisteredComponent>;
-
-export type BuilderRenderState = Record<string, unknown>;
-
-export type BuilderRenderContext = Record<string, unknown>;
-
-export interface BuilderContextInterface {
-  content: Nullable<BuilderContent>;
-  context: BuilderRenderContext;
-  state: BuilderRenderState;
-  setState?: (state: BuilderRenderState) => void;
-  apiKey: string | null;
-  apiVersion: ApiVersion | undefined;
-  registeredComponents: RegisteredComponents;
-  // Used to recursively store all CSS coming from a parent that would apply to a Text block
-  inheritedStyles: Record<string, unknown>;
-}

package/packages/react/src/functions/camel-to-kebab-case.ts

@@ -1,2 +0,0 @@
-export const camelToKebabCase = (string: string) =>
-  string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();

package/packages/react/src/functions/evaluate.ts

@@ -1,57 +0,0 @@
-import type { BuilderContextInterface } from '../context/types.js';
-import { isBrowser } from './is-browser.js';
-import { isEditing } from './is-editing.js';
-
-export function evaluate({
-  code,
-  context,
-  state,
-  event,
-  isExpression = true,
-}: {
-  code: string;
-  event?: Event;
-  isExpression?: boolean;
-} & Pick<BuilderContextInterface, 'state' | 'context'>): any {
-  if (code === '') {
-    console.warn('Skipping evaluation of empty code block.');
-    return;
-  }
-
-  const builder = {
-    isEditing: isEditing(),
-    isBrowser: isBrowser(),
-    isServer: !isBrowser(),
-  };
-
-  // Be able to handle simple expressions like "state.foo" or "1 + 1"
-  // as well as full blocks like "var foo = "bar"; return foo"
-  const useReturn =
-    // we disable this for cases where we definitely don't want a return
-    isExpression &&
-    !(
-      code.includes(';') ||
-      code.includes(' return ') ||
-      code.trim().startsWith('return ')
-    );
-
-  const useCode = useReturn ? `return (${code});` : code;
-
-  try {
-    return new Function(
-      'builder',
-      'Builder' /* <- legacy */,
-      'state',
-      'context',
-      'event',
-      useCode
-    )(builder, builder, state, context, event);
-  } catch (e) {
-    console.warn(
-      'Builder custom code error: \n While Evaluating: \n ',
-      useCode,
-      '\n',
-      e
-    );
-  }
-}

package/packages/react/src/functions/event-handler-name.ts

@@ -1,6 +0,0 @@
-function capitalizeFirstLetter(string: string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-export const getEventHandlerName = (key: string) =>
-  `on${capitalizeFirstLetter(key)}`;

package/packages/react/src/functions/extract-text-styles.ts

@@ -1,39 +0,0 @@
-const TEXT_STYLE_KEYS = [
-  'color',
-  'whiteSpace',
-  'direction',
-  'hyphens',
-  'overflowWrap',
-];
-
-/**
- * Check if the key represent a CSS style property that applies to text
- * See MDN docs for refrence of what properties apply to text.
- * https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#summary
- */
-const isTextStyle = (key: string) => {
-  return (
-    TEXT_STYLE_KEYS.includes(key) ||
-    key.startsWith('font') ||
-    key.startsWith('text') ||
-    key.startsWith('letter') ||
-    key.startsWith('line') ||
-    key.startsWith('word') ||
-    key.startsWith('writing')
-  );
-};
-
-/**
- * Extract styles that apply to text from a style object.
- */
-export const extractTextStyles = (styles: Partial<CSSStyleDeclaration>) => {
-  const textStyles: Partial<CSSStyleDeclaration> = {};
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Object.entries(styles).forEach(([key, value]: [any, any]) => {
-    if (isTextStyle(key)) {
-      textStyles[key] = value;
-    }
-  });
-
-  return textStyles;
-};

package/packages/react/src/functions/fast-clone.ts

@@ -1,5 +0,0 @@
-/**
- * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
- */
-export const fastClone = <T extends object>(obj: T): T =>
-  JSON.parse(JSON.stringify(obj));

package/packages/react/src/functions/get-block-actions-handler.ts

@@ -1,20 +0,0 @@
-import type { BuilderContextInterface } from '../context/types.js';
-import type { BuilderBlock } from '../types/builder-block.js';
-import { evaluate } from './evaluate.js';
-
-type Options = {
-  block: BuilderBlock;
-} & Pick<BuilderContextInterface, 'state' | 'context'>;
-
-type EventHandler = (event: Event) => any;
-
-export const createEventHandler =
-  (value: string, options: Options): EventHandler =>
-  (event) =>
-    evaluate({
-      code: value,
-      context: options.context,
-      state: options.state,
-      event,
-      isExpression: false,
-    });

package/packages/react/src/functions/get-block-actions.ts

@@ -1,25 +0,0 @@
-import type { BuilderContextInterface } from '../context/types.js';
-import type { BuilderBlock } from '../types/builder-block.js';
-import { getEventHandlerName } from './event-handler-name.js';
-import { createEventHandler } from './get-block-actions-handler.js';
-
-type Actions = { [index: string]: (event: Event) => any };
-
-export function getBlockActions(
-  options: {
-    block: BuilderBlock;
-  } & Pick<BuilderContextInterface, 'state' | 'context'>
-): Actions {
-  const obj: Actions = {};
-  const optionActions = options.block.actions ?? {};
-
-  for (const key in optionActions) {
-    // eslint-disable-next-line no-prototype-builtins
-    if (!optionActions.hasOwnProperty(key)) {
-      continue;
-    }
-    const value = optionActions[key];
-    obj[getEventHandlerName(key)] = createEventHandler(value, options);
-  }
-  return obj;
-}

package/packages/react/src/functions/get-block-component-options.ts

@@ -1,12 +0,0 @@
-import type { BuilderBlock } from '../types/builder-block.js';
-
-export function getBlockComponentOptions(block: BuilderBlock) {
-  return {
-    ...block.component?.options,
-    ...(block as any).options,
-    /**
-     * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
-     */
-    builderBlock: block,
-  };
-}

package/packages/react/src/functions/get-block-properties.ts

@@ -1,75 +0,0 @@
-import { TARGET } from '../constants/target.js';
-import { convertStyleMapToCSSArray } from '../helpers/css.js';
-import type { BuilderBlock } from '../types/builder-block.js';
-import { transformBlockProperties } from './transform-block-properties.js';
-
-const extractRelevantRootBlockProperties = (block: BuilderBlock) => {
-  // currently we are only spreading the `href` property
-  // TO-DO: potentially spread all properties from block, but only if they are not already defined by BuilderBlock
-
-  // const {
-  //   '@type': _type,
-  //   '@version': _version,
-  //   id: _id,
-  //   tagName: _tagName,
-  //   layerName: _layerName,
-  //   groupLocked: _groupLocked,
-  //   layerLocked: _layerLocked,
-  //   class: _class,
-  //   children: _children,
-  //   responsiveStyles: _responsiveStyles,
-  //   component: _component,
-  //   bindings: _bindings,
-  //   meta: _meta,
-  //   actions: _actions,
-  //   properties: _properties,
-  //   code: _code,
-  //   repeat: _repeat,
-  //   animations: _animations,
-  //   style: _style,
-  //   hide: _hide,
-  //   show: _show,
-  //   // anything set by dynamic bindings outside of predefined `BuilderBlock` properties
-  //   ...remainingBlockProperties
-  // } = block;
-
-  return { href: (block as any).href };
-};
-
-export function getBlockProperties(block: BuilderBlock) {
-  const properties = {
-    ...extractRelevantRootBlockProperties(block),
-    ...block.properties,
-    'builder-id': block.id,
-    style: getStyleAttribute(block.style),
-    class: [block.id, 'builder-block', block.class, block.properties?.class]
-      .filter(Boolean)
-      .join(' '),
-  };
-
-  return transformBlockProperties(properties);
-}
-/**
- * Svelte does not support style attribute as an object so we need to flatten it.
- *
- * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
- */
-function getStyleAttribute(
-  style: Partial<CSSStyleDeclaration> | undefined
-): string | Partial<CSSStyleDeclaration> | undefined {
-  if (!style) {
-    return undefined;
-  }
-
-  switch (TARGET) {
-    case 'svelte':
-    case 'vue2':
-    case 'vue3':
-    case 'solid':
-      return convertStyleMapToCSSArray(style).join(' ');
-    case 'qwik':
-    case 'reactNative':
-    case 'react':
-      return style;
-  }
-}

package/packages/react/src/functions/get-builder-search-params/fn.test.ts

@@ -1,19 +0,0 @@
-import { convertSearchParamsToQueryObject, getBuilderSearchParams } from '.';
-
-const querystring =
-  'someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017';
-
-const url = new URL(`localhost:3000/about-us?${querystring}`);
-
-describe('Get Builder SearchParams', () => {
-  test('correctly converts URLSearchParams to object', () => {
-    const output = convertSearchParamsToQueryObject(url.searchParams);
-    expect(output).toMatchSnapshot();
-  });
-  test('correctly extracts all builder params from a query object', () => {
-    const output = getBuilderSearchParams(
-      convertSearchParamsToQueryObject(url.searchParams)
-    );
-    expect(output).toMatchSnapshot();
-  });
-});

package/packages/react/src/functions/get-builder-search-params/index.ts

@@ -1,50 +0,0 @@
-import { isBrowser } from '../is-browser.js';
-
-const BUILDER_SEARCHPARAMS_PREFIX = 'builder.';
-const BUILDER_OPTIONS_PREFIX = 'options.';
-type QueryObject = Record<string, string | string[]>;
-
-export const convertSearchParamsToQueryObject = (
-  searchParams: URLSearchParams
-): QueryObject => {
-  const options: Record<string, string> = {};
-  searchParams.forEach((value, key) => {
-    options[key] = value;
-  });
-  return options;
-};
-
-export const getBuilderSearchParams = (
-  _options: QueryObject | URLSearchParams | undefined
-) => {
-  if (!_options) {
-    return {};
-  }
-  const options = normalizeSearchParams(_options);
-
-  const newOptions: QueryObject = {};
-  Object.keys(options).forEach((key) => {
-    if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-      const trimmedKey = key
-        .replace(BUILDER_SEARCHPARAMS_PREFIX, '')
-        .replace(BUILDER_OPTIONS_PREFIX, '');
-      newOptions[trimmedKey] = options[key];
-    }
-  });
-  return newOptions;
-};
-
-export const getBuilderSearchParamsFromWindow = () => {
-  if (!isBrowser()) {
-    return {};
-  }
-  const searchParams = new URLSearchParams(window.location.search);
-  return getBuilderSearchParams(searchParams);
-};
-
-export const normalizeSearchParams = (
-  searchParams: QueryObject | URLSearchParams
-): QueryObject =>
-  searchParams instanceof URLSearchParams
-    ? convertSearchParamsToQueryObject(searchParams)
-    : searchParams;

package/packages/react/src/functions/get-content/ab-testing.ts

@@ -1,132 +0,0 @@
-import type {
-  BuilderContent,
-  BuilderContentVariation,
-} from '../../types/builder-content.js';
-import {
-  getContentVariationCookie,
-  setContentVariationCookie,
-} from '../../helpers/ab-tests.js';
-import type { Overwrite } from '../../types/typescript.js';
-import type { CanTrack } from '../../types/can-track.js';
-import { checkIsDefined } from '../../helpers/nullable.js';
-
-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 this user and store it in cookies/storage
- */
-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;
-    }
-  }
-
-  // `item.variations` 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 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' : ''),
-    };
-  }
-};
-
-type TestFields = {
-  data?: BuilderContentVariation['data'];
-  testVariationId?: string;
-  testVariationName: string;
-};
-
-const getContentVariation = async ({
-  item,
-  canTrack,
-}: {
-  item: BuilderContentWithVariations;
-} & CanTrack): Promise<TestFields> => {
-  // try to find test variation in cookies/storage
-  const testGroupId = await getContentVariationCookie({
-    canTrack,
-    contentId: item.id,
-  });
-
-  const testFields = testGroupId
-    ? getTestFields({ item, testGroupId })
-    : undefined;
-
-  if (testFields) {
-    return testFields;
-  } else {
-    // if variation not found in storage, assign a random variation to this user
-    const randomVariationId = getRandomVariationId({
-      variations: item.variations,
-      id: item.id,
-    });
-
-    // store variation in cookies/storage
-    setContentVariationCookie({
-      contentId: item.id,
-      value: randomVariationId,
-      canTrack,
-    }).catch((err) => {
-      console.error('could not store A/B test variation: ', err);
-    });
-
-    return getTestFields({ item, testGroupId: randomVariationId });
-  }
-};
-
-export const handleABTesting = async ({
-  item,
-  canTrack,
-}: { item: BuilderContent } & CanTrack) => {
-  if (!checkIsBuilderContentWithVariations(item)) {
-    return;
-  }
-
-  const variationValue = await getContentVariation({ item, canTrack });
-  Object.assign(item, variationValue);
-};

package/packages/react/src/functions/get-content/generate-content-url.test.ts

@@ -1,95 +0,0 @@
-import { generateContentUrl } from './generate-content-url';
-import type { GetContentOptions } from './types';
-
-const testKey = 'YJIGb4i01jvw0SRdL5Bt';
-const testModel = 'page';
-const testId = 'c1b81bab59704599b997574eb0736def';
-
-const options = {
-  cachebust: 'true',
-  noCache: 'true',
-  'overrides.037948e52eaf4743afed464f02c70da4':
-    '037948e52eaf4743afed464f02c70da4',
-  'overrides.page': '037948e52eaf4743afed464f02c70da4',
-  'overrides.page:/': '037948e52eaf4743afed464f02c70da4',
-  preview: 'page',
-};
-
-describe('Generate Content URL', () => {
-  test('generates the proper value for a simple query', () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-    });
-    expect(output).toMatchSnapshot();
-  });
-
-  test('Handles overrides correctly', () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-      options,
-    });
-    expect(output).toMatchSnapshot();
-  });
-
-  test('generate content url with apiVersion as default', () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-      options,
-    });
-    expect(output).toMatchSnapshot();
-  });
-
-  test('generate content url with apiVersion as v2', () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-      options,
-      apiVersion: 'v2',
-    });
-    expect(output).toMatchSnapshot();
-  });
-
-  test('generate content url with apiVersion as v3', () => {
-    const output = generateContentUrl({
-      apiKey: testKey,
-      model: testModel,
-      query: { id: testId },
-      options,
-      apiVersion: 'v3',
-    });
-    expect(output).toMatchSnapshot();
-  });
-
-  test('throw error when trying to generate content url with apiVersion as v1', () => {
-    expect(() => {
-      generateContentUrl({
-        apiKey: testKey,
-        model: testModel,
-        query: { id: testId },
-        options,
-        apiVersion: 'v1' as GetContentOptions['apiVersion'],
-      });
-    }).toThrow(`Invalid apiVersion: expected 'v2' or 'v3', received 'v1'`);
-  });
-
-  test('throw error when trying to generate content url with an invalid apiVersion value', () => {
-    expect(() => {
-      generateContentUrl({
-        apiKey: testKey,
-        model: testModel,
-        query: { id: testId },
-        options,
-        apiVersion: 'INVALID_API_VERSION' as GetContentOptions['apiVersion'],
-      });
-    }).toThrow(
-      `Invalid apiVersion: expected 'v2' or 'v3', received 'INVALID_API_VERSION'`
-    );
-  });
-});