@shopify/ui-extensions 2.0.0-alpha.2 → 2022.10.1

package/src/surfaces/checkout/components.ts

@@ -1 +1,155 @@
-export * from '../../components';
+export {Banner} from './components/Banner/Banner';
+export type {BannerProps} from './components/Banner/Banner';
+
+export {BlockLayout} from './components/BlockLayout/BlockLayout';
+export type {BlockLayoutProps} from './components/BlockLayout/BlockLayout';
+
+export {BlockSpacer} from './components/BlockSpacer/BlockSpacer';
+export type {BlockSpacerProps} from './components/BlockSpacer/BlockSpacer';
+
+export {BlockStack} from './components/BlockStack/BlockStack';
+export type {BlockStackProps} from './components/BlockStack/BlockStack';
+
+export {Button} from './components/Button/Button';
+export type {ButtonProps} from './components/Button/Button';
+
+export {Checkbox} from './components/Checkbox/Checkbox';
+export type {CheckboxProps} from './components/Checkbox/Checkbox';
+
+export {Choice} from './components/Choice/Choice';
+export type {ChoiceProps} from './components/Choice/Choice';
+
+export {ChoiceList} from './components/ChoiceList/ChoiceList';
+export type {ChoiceListProps} from './components/ChoiceList/ChoiceList';
+
+export {Divider} from './components/Divider/Divider';
+export type {DividerProps} from './components/Divider/Divider';
+
+export {Form} from './components/Form/Form';
+export type {FormProps} from './components/Form/Form';
+
+export {Grid} from './components/Grid/Grid';
+export type {GridProps} from './components/Grid/Grid';
+
+export {GridItem} from './components/GridItem/GridItem';
+export type {GridItemProps} from './components/GridItem/GridItem';
+
+export {Heading} from './components/Heading/Heading';
+export type {HeadingProps} from './components/Heading/Heading';
+
+export {HeadingGroup} from './components/HeadingGroup/HeadingGroup';
+export type {HeadingGroupProps} from './components/HeadingGroup/HeadingGroup';
+
+export {Icon} from './components/Icon/Icon';
+export type {IconProps} from './components/Icon/Icon';
+
+export {Image} from './components/Image/Image';
+export type {ImageProps} from './components/Image/Image';
+
+export {InlineLayout} from './components/InlineLayout/InlineLayout';
+export type {InlineLayoutProps} from './components/InlineLayout/InlineLayout';
+
+export {InlineStack} from './components/InlineStack/InlineStack';
+export type {InlineStackProps} from './components/InlineStack/InlineStack';
+
+export {InlineSpacer} from './components/InlineSpacer/InlineSpacer';
+export type {InlineSpacerProps} from './components/InlineSpacer/InlineSpacer';
+
+export {Link} from './components/Link/Link';
+export type {LinkProps} from './components/Link/Link';
+
+export {List} from './components/List/List';
+export type {ListProps} from './components/List/List';
+
+export {ListItem} from './components/ListItem/ListItem';
+export type {ListItemProps} from './components/ListItem/ListItem';
+
+export {PhoneField} from './components/PhoneField/PhoneField';
+export type {PhoneFieldProps} from './components/PhoneField/PhoneField';
+
+export {Pressable} from './components/Pressable/Pressable';
+export type {PressableProps} from './components/Pressable/Pressable';
+
+export {ScrollView} from './components/ScrollView/ScrollView';
+export type {
+  ScrollViewProps,
+  ScrollViewEvent,
+} from './components/ScrollView/ScrollView';
+
+export {Select} from './components/Select/Select';
+export type {SelectProps} from './components/Select/Select';
+
+export {SkeletonImage} from './components/SkeletonImage/SkeletonImage';
+export type {SkeletonImageProps} from './components/SkeletonImage/SkeletonImage';
+
+export {SkeletonText} from './components/SkeletonText/SkeletonText';
+export type {SkeletonTextProps} from './components/SkeletonText/SkeletonText';
+
+export {SkeletonTextBlock} from './components/SkeletonTextBlock/SkeletonTextBlock';
+export type {SkeletonTextBlockProps} from './components/SkeletonTextBlock/SkeletonTextBlock';
+
+export {Spinner} from './components/Spinner/Spinner';
+export type {SpinnerProps} from './components/Spinner/Spinner';
+
+export {Stepper} from './components/Stepper/Stepper';
+export type {StepperProps} from './components/Stepper/Stepper';
+
+export {Tag} from './components/Tag/Tag';
+export type {TagProps} from './components/Tag/Tag';
+
+export {Text} from './components/Text/Text';
+export type {TextProps} from './components/Text/Text';
+
+export {TextBlock} from './components/TextBlock/TextBlock';
+export type {TextBlockProps} from './components/TextBlock/TextBlock';
+
+export {TextField} from './components/TextField/TextField';
+export type {TextFieldProps} from './components/TextField/TextField';
+
+export {Tooltip} from './components/Tooltip/Tooltip';
+export type {TooltipProps} from './components/Tooltip/Tooltip';
+
+export {View} from './components/View/View';
+export type {
+  ViewProps,
+  Coordinate as ViewCoordinate,
+  Position as ViewPosition,
+  PositionType as ViewPositionType,
+  Translate as ViewTranslate,
+} from './components/View/View';
+
+export type {
+  AccessibilityRole,
+  ViewLikeAccessibilityRole,
+  NonPresentationalAccessibilityRole,
+  Autocomplete,
+  AutocompleteField,
+  AutocompleteGroup,
+  Background,
+  BackgroundFit,
+  BackgroundPosition,
+  BackgroundRepeat,
+  BlockAlignment,
+  InlineAlignment,
+  BorderRadius,
+  BorderStyle,
+  BorderWidth,
+  Breakpoint,
+  ShorthandProperty,
+  MaybeShorthandProperty,
+  Fit,
+  Status,
+  Size,
+  Spacing,
+  Alignment,
+  Appearance,
+  GridItemSize,
+  Columns,
+  Rows,
+  BackgroundProps,
+  BorderProps,
+  SizingProps,
+  SpacingProps,
+  VisibilityProps,
+  OverlayActivatorProps,
+} from './components/shared';

package/src/surfaces/checkout/extension-points.ts

@@ -4,18 +4,98 @@ import type {AnyComponent} from './shared';
 import type {StandardApi, CartLineDetailsRenderAfterApi} from './api';
 
 export interface ExtensionPoints {
+  /**
+   * A [dynamic extension point](https://shopify.dev/api/checkout-extensions/checkout#extension-points) that isn't tied to a specific checkout section or feature.
+   * Unlike static extension points, dynamic extension points render where the merchant
+   * sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).
+   *
+   * The [supported locations](https://shopify.dev/api/checkout-extensions/checkout#supported-locations) for dynamic extension points can be previewed during development
+   * by [using a URL parameter](https://shopify.dev/apps/checkout/test-ui-extensions#dynamic-extension-points).
+   */
   'Checkout::Dynamic::Render': RenderExtension<
     StandardApi<'Checkout::Dynamic::Render'>,
     AnyComponent
   >;
+
+  /**
+   * A static extension point that renders on every line item, inside the details
+   * under the line item properties element.
+   */
   'Checkout::CartLineDetails::RenderAfter': RenderExtension<
     CartLineDetailsRenderAfterApi,
     AnyComponent
   >;
+
+  /**
+   * A static extension point that is rendered after all line items.
+   */
+  'Checkout::CartLines::RenderAfter': RenderExtension<
+    StandardApi<'Checkout::CartLines::RenderAfter'>,
+    AnyComponent
+  >;
+
+  /**
+   * A static extension point that is rendered between the shipping address header
+   * and shipping address form elements.
+   */
+  'Checkout::DeliveryAddress::RenderBefore': RenderExtension<
+    StandardApi<'Checkout::DeliveryAddress::RenderBefore'>,
+    AnyComponent
+  >;
+
+  /**
+   * A static extension point that is rendered between the shipping method
+   * header and shipping method options.
+   */
+  'Checkout::ShippingMethods::RenderBefore': RenderExtension<
+    StandardApi<'Checkout::ShippingMethods::RenderBefore'>,
+    AnyComponent
+  >;
+
+  /**
+   * A static extension point that is rendered after the shipping method
+   * options.
+   */
+  'Checkout::ShippingMethods::RenderAfter': RenderExtension<
+    StandardApi<'Checkout::ShippingMethods::RenderAfter'>,
+    AnyComponent
+  >;
+
+  /**
+   * A static extension point that is rendered in the order summary, before the discount form element.
+   */
+  'Checkout::Reductions::RenderBefore': RenderExtension<
+    StandardApi<'Checkout::Reductions::RenderBefore'>,
+    AnyComponent
+  >;
+
+  /**
+   * A static extension point that is rendered in the order summary, after the discount form
+   * and discount tag elements.
+   */
+  'Checkout::Reductions::RenderAfter': RenderExtension<
+    StandardApi<'Checkout::Reductions::RenderAfter'>,
+    AnyComponent
+  >;
+
+  /**
+   * A static extension point that is rendered immediately before any actions within each step.
+   */
+  'Checkout::Actions::RenderBefore': RenderExtension<
+    StandardApi<'Checkout::Actions::RenderBefore'>,
+    AnyComponent
+  >;
+
+  /**
+   * A static extension point that is rendered immediately after the contact form element.
+   */
+  'Checkout::Contact::RenderAfter': RenderExtension<
+    StandardApi<'Checkout::Contact::RenderAfter'>,
+    AnyComponent
+  >;
 }
 
 export type ExtensionPoint = keyof ExtensionPoints;
 
-export type ExtensionForExtensionPoint<
-  T extends ExtensionPoint
-> = ExtensionPoints[T];
+export type ExtensionForExtensionPoint<T extends ExtensionPoint> =
+  ExtensionPoints[T];

package/src/surfaces/checkout/globals.ts

@@ -0,0 +1,15 @@
+import type {ExtensionPoints} from './extension-points';
+
+export interface ShopifyGlobal {
+  extend<ExtensionPoint extends keyof ExtensionPoints>(
+    extensionPoint: ExtensionPoint,
+    extend: ExtensionPoints[ExtensionPoint],
+  ): void;
+  reload(): void;
+}
+
+declare global {
+  interface WorkerGlobalScope {
+    readonly shopify: ShopifyGlobal;
+  }
+}

package/src/surfaces/checkout/index.ts

@@ -3,3 +3,5 @@ export * from './components';
 export * from './extension-points';
 export * from './extension';
 export * from './shared';
+export * from './style';
+export * from './globals';

package/src/surfaces/checkout/style/isEqual.test.ts

@@ -0,0 +1,67 @@
+import {isEqual} from './isEqual';
+
+describe('isEqual', () => {
+  it('returns true when two strings are equal', () => {
+    expect(isEqual('a', 'a')).toBe(true);
+  });
+
+  it('returns true when two numbers are equal', () => {
+    expect(isEqual(1, 1)).toBe(true);
+  });
+
+  it('returns true when two booleans are equal', () => {
+    expect(isEqual(true, true)).toBe(true);
+  });
+
+  it('returns true when two objects are equal', () => {
+    expect(
+      isEqual(
+        {
+          string: 'string',
+          number: 1,
+          boolean: true,
+        },
+        {
+          string: 'string',
+          number: 1,
+          boolean: true,
+        },
+      ),
+    ).toBe(true);
+  });
+
+  it('returns true when two nested objects are equal', () => {
+    expect(
+      isEqual(
+        {
+          string: 'string',
+          number: 1,
+          boolean: true,
+          object: {
+            foo: 'a',
+            bar: 'b',
+          },
+        },
+        {
+          object: {
+            foo: 'a',
+            bar: 'b',
+          },
+          number: 1,
+          string: 'string',
+          boolean: true,
+        },
+      ),
+    ).toBe(true);
+  });
+
+  it('returns true when two arrays are equal', () => {
+    expect(isEqual([1, 'a', true], [1, 'a', true])).toBe(true);
+  });
+
+  it('returns true when two nested arrays are equal', () => {
+    expect(
+      isEqual([1, [2, 'b', false], 'a', true], [1, [2, 'b', false], 'a', true]),
+    ).toBe(true);
+  });
+});

package/src/surfaces/checkout/style/isEqual.ts

@@ -0,0 +1,41 @@
+/**
+ * A simple isEqual function that can be used to compare two style objects that's
+ * good enough for our use case on the style builder.
+ */
+export function isEqual<
+  T =
+    | {[key: string]: any}
+    | any[]
+    | number
+    | boolean
+    | string
+    | null
+    | undefined,
+>(first: T, second: T): boolean {
+  if (Object.is(first, second)) {
+    return true;
+  }
+
+  if (typeof first === 'object' && typeof second === 'object') {
+    if (Array.isArray(first) && Array.isArray(second)) {
+      if (first.length === second.length) {
+        return first.every((value: any, index: number) =>
+          isEqual(value, second[index]),
+        );
+      }
+    } else {
+      const firstEntries = Object.entries(first!);
+      const secondEntries = Object.entries(second!);
+      if (firstEntries.length === secondEntries.length) {
+        return firstEntries.every(([key]) =>
+          isEqual(
+            (first as {[key: string]: any})[key],
+            (second as {[key: string]: any})[key],
+          ),
+        );
+      }
+    }
+  }
+
+  return false;
+}

package/src/surfaces/checkout/style/memoize.ts

@@ -0,0 +1,176 @@
+/* eslint-disable prefer-rest-params */
+/* eslint-disable prefer-spread */
+
+// This memoize function is heavily inspired by reselect's defaultMemoize
+// https://github.com/reduxjs/reselect
+
+type EqualityFn = (a: any, b: any) => boolean;
+
+// Cache implementation based on Erik Rasmussen's `lru-memoize`:
+// https://github.com/erikras/lru-memoize
+
+const NOT_FOUND = 'NOT_FOUND';
+type NOT_FOUND_TYPE = typeof NOT_FOUND;
+
+interface Entry {
+  key: unknown;
+  value: unknown;
+}
+
+interface Cache {
+  get(key: unknown): unknown | NOT_FOUND_TYPE;
+  put(key: unknown, value: unknown): void;
+  getEntries(): Entry[];
+  clear(): void;
+}
+
+function createSingletonCache(equals: EqualityFn): Cache {
+  let entry: Entry | undefined;
+  return {
+    get(key: unknown) {
+      if (entry && equals(entry.key, key)) {
+        return entry.value;
+      }
+
+      return NOT_FOUND;
+    },
+
+    put(key: unknown, value: unknown) {
+      entry = {key, value};
+    },
+
+    getEntries() {
+      return entry ? [entry] : [];
+    },
+
+    clear() {
+      entry = undefined;
+    },
+  };
+}
+
+function createLruCache(maxSize: number, equals: EqualityFn): Cache {
+  let entries: Entry[] = [];
+
+  function get(key: unknown) {
+    const cacheIndex = entries.findIndex((entry) => equals(key, entry.key));
+
+    // We found a cached entry
+    if (cacheIndex > -1) {
+      const entry = entries[cacheIndex];
+
+      // Cached entry not at top of cache, move it to the top
+      if (cacheIndex > 0) {
+        entries.splice(cacheIndex, 1);
+        entries.unshift(entry);
+      }
+
+      return entry.value;
+    }
+
+    // No entry found in cache, return sentinel
+    return NOT_FOUND;
+  }
+
+  function put(key: unknown, value: unknown) {
+    if (get(key) === NOT_FOUND) {
+      entries.unshift({key, value});
+      if (entries.length > maxSize) {
+        entries.pop();
+      }
+    }
+  }
+
+  function getEntries() {
+    return entries;
+  }
+
+  function clear() {
+    entries = [];
+  }
+
+  return {get, put, getEntries, clear};
+}
+
+export const defaultEqualityCheck: EqualityFn = (first, second): boolean => {
+  return first === second;
+};
+
+export function createCacheKeyComparator(equalityCheck: EqualityFn) {
+  return function areArgumentsShallowlyEqual(
+    prev: unknown[] | IArguments | null,
+    next: unknown[] | IArguments | null,
+  ): boolean {
+    if (prev === null || next === null || prev.length !== next.length) {
+      return false;
+    }
+
+    // Do this in a for loop (and not a `forEach` or an `every`) so we can determine equality as fast as possible.
+    const length = prev.length;
+    for (let i = 0; i < length; i++) {
+      if (!equalityCheck(prev[i], next[i])) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+}
+
+export interface DefaultMemoizeOptions {
+  equalityCheck?: EqualityFn;
+  resultEqualityCheck?: EqualityFn;
+  maxSize?: number;
+}
+
+// defaultMemoize now supports a configurable cache size with LRU behavior,
+// and optional comparison of the result value with existing values
+export function memoize<F extends (...args: any[]) => any>(
+  func: F,
+  equalityCheckOrOptions?: EqualityFn | DefaultMemoizeOptions,
+) {
+  const providedOptions =
+    typeof equalityCheckOrOptions === 'object'
+      ? equalityCheckOrOptions
+      : {equalityCheck: equalityCheckOrOptions};
+
+  const {
+    equalityCheck = defaultEqualityCheck,
+    maxSize = 1,
+    resultEqualityCheck,
+  } = providedOptions;
+
+  const comparator = createCacheKeyComparator(equalityCheck);
+
+  const cache =
+    maxSize === 1
+      ? createSingletonCache(comparator)
+      : createLruCache(maxSize, comparator);
+
+  // we reference arguments instead of spreading them for performance reasons
+  function memoized() {
+    let value = cache.get(arguments);
+    if (value === NOT_FOUND) {
+      // @ts-expect-error - we know that arguments is an array-like object
+      value = func.apply(null, arguments);
+
+      if (resultEqualityCheck) {
+        const entries = cache.getEntries();
+        const matchingEntry = entries.find((entry) =>
+          resultEqualityCheck(entry.value, value),
+        );
+
+        if (matchingEntry) {
+          value = matchingEntry.value;
+        }
+      }
+
+      cache.put(arguments, value);
+    }
+    return value;
+  }
+
+  memoized.clearCache = () => cache.clear();
+
+  return memoized as F & {clearCache: () => void};
+}

package/src/surfaces/checkout/style/style.test.ts

@@ -0,0 +1,131 @@
+import {Style} from './style';
+
+describe('Style', () => {
+  describe('default()', () => {
+    it('returns a conditional value with a default', () => {
+      const defaultValue = Style.default('default');
+
+      expect(defaultValue).toStrictEqual({
+        default: 'default',
+        conditionals: [],
+      });
+    });
+
+    it('returns a conditional value with a default and a condition when chained with when()', () => {
+      const defaultValue = Style.default('default');
+
+      expect(defaultValue.when({hover: true}, 'value')).toStrictEqual({
+        default: 'default',
+        conditionals: [{value: 'value', conditions: {hover: true}}],
+      });
+    });
+
+    it('returns a memoized value', () => {
+      expect(Style.default('default')).toBe(Style.default('default'));
+    });
+
+    it('returns a new value when passed value is different', () => {
+      expect(Style.default('default1')).not.toBe(Style.default('default2'));
+    });
+  });
+
+  describe('when()', () => {
+    it('returns a conditional value with no default', () => {
+      const conditionalValue = Style.when({hover: true}, 'value');
+
+      expect(conditionalValue).toStrictEqual({
+        conditionals: [{value: 'value', conditions: {hover: true}}],
+      });
+    });
+
+    it('returns a conditional value with a composed condition', () => {
+      const conditionalValue = Style.default('default').when(
+        {hover: true, viewportInlineSize: {min: 'small'}},
+        'value1',
+      );
+
+      expect(conditionalValue).toStrictEqual({
+        default: 'default',
+        conditionals: [
+          {
+            value: 'value1',
+            conditions: {hover: true, viewportInlineSize: {min: 'small'}},
+          },
+        ],
+      });
+    });
+
+    it('returns a memoized value', () => {
+      expect(Style.when({hover: true}, 'value')).toBe(
+        Style.when({hover: true}, 'value'),
+      );
+    });
+
+    it('returns a new value when passed value is different', () => {
+      expect(Style.when({hover: true}, 'value1')).not.toBe(
+        Style.when({hover: true}, 'value2'),
+      );
+    });
+  });
+
+  describe('when().when()', () => {
+    it('returns a conditional value with default and two conditions', () => {
+      const conditionalValue = Style.default('default')
+        .when({hover: true}, 'value1')
+        .when({viewportInlineSize: {min: 'small'}}, 'value2');
+
+      expect(conditionalValue).toStrictEqual({
+        default: 'default',
+        conditionals: [
+          {value: 'value1', conditions: {hover: true}},
+          {value: 'value2', conditions: {viewportInlineSize: {min: 'small'}}},
+        ],
+      });
+    });
+
+    it('returns a memoized value', () => {
+      expect(
+        Style.when({hover: true}, 'value 1')
+          .when({focus: true}, 'value 2')
+          .when({viewportInlineSize: {min: 'small'}}, 'value 3'),
+      ).toBe(
+        Style.when({hover: true}, 'value 1')
+          .when({focus: true}, 'value 2')
+          .when({viewportInlineSize: {min: 'small'}}, 'value 3'),
+      );
+    });
+
+    it('returns a memoized value after calling with a different value once', () => {
+      const firstValue = Style.when({hover: true}, 'value1').when(
+        {focus: true},
+        'value2',
+      );
+
+      Style.when({hover: true}, 'value1').when({focus: true}, 'value3');
+
+      const thirdValue = Style.when({hover: true}, 'value1').when(
+        {focus: true},
+        'value2',
+      );
+
+      expect(firstValue).toBe(thirdValue);
+    });
+  });
+
+  describe('prototype chain', () => {
+    it('returns a different when method on the prototype chain for each instance', () => {
+      const style1 = Style.when({hover: true}, 'value 1').when(
+        {viewportInlineSize: {min: 'small'}},
+        'value 2',
+      );
+      const style2 = Style.when({focus: true}, 'value 3').when(
+        {viewportInlineSize: {min: 'small'}},
+        'value 4',
+      );
+
+      expect(Object.getPrototypeOf(style1)).not.toBe(
+        Object.getPrototypeOf(style2),
+      );
+    });
+  });
+});