@shopify/ui-extensions 0.0.0-unstable-20230118190150

package/src/surfaces/checkout/components.ts

@@ -0,0 +1,157 @@
+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,
+  CornerRadius,
+  ShorthandProperty,
+  MaybeShorthandProperty,
+  Fit,
+  Status,
+  Size,
+  Spacing,
+  Alignment,
+  Appearance,
+  GridItemSize,
+  Columns,
+  Rows,
+  BackgroundProps,
+  BorderProps,
+  CornerProps,
+  SizingProps,
+  SpacingProps,
+  VisibilityProps,
+  OverlayActivatorProps,
+} from './components/shared';

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

@@ -0,0 +1,164 @@
+import type {RenderExtension} from '../../extension';
+
+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];
+
+/**
+ * For a given extension point, returns the value that is expected to be
+ * returned by that extension point’s callback type.
+ */
+export type ReturnTypeForExtension<ID extends keyof ExtensionPoints> =
+  ReturnType<ExtensionPoints[ID]>;
+
+/**
+ * For a given extension point, returns the tuple of arguments that would
+ * be provided to that extension point’s callback type.
+ */
+export type ArgumentsForExtension<ID extends keyof ExtensionPoints> =
+  Parameters<ExtensionPoints[ID]>;
+
+/**
+ * A union type containing all of the extension points that follow the pattern of
+ * accepting a [`@remote-ui/core` `RemoteRoot`](https://github.com/Shopify/remote-ui/tree/main/packages/core)
+ * and an additional `api` argument, and using those arguments to render
+ * UI.
+ */
+export type RenderExtensionPoint = {
+  [ID in keyof ExtensionPoints]: ExtensionPoints[ID] extends RenderExtension<
+    any,
+    any
+  >
+    ? ID
+    : never;
+}[keyof ExtensionPoints];
+
+/**
+ * A mapping of each “render extension” name to its callback type.
+ */
+export type RenderExtensions = {
+  [ID in RenderExtensionPoint]: ExtensionPoints[ID];
+};
+
+type ExtractedApiFromRenderExtension<T> = T extends RenderExtension<
+  infer Api,
+  any
+>
+  ? Api
+  : never;
+
+type ExtractedAllowedComponentsFromRenderExtension<T> =
+  T extends RenderExtension<any, infer Components> ? Components : never;
+
+/**
+ * For a given rendering extension point, returns the type of the API that the
+ * extension will receive at runtime. This API type is the second argument to
+ * the callback for that extension point. The first callback for all of the rendering
+ * extension points each receive a `RemoteRoot` object.
+ */
+export type ApiForRenderExtension<ID extends keyof RenderExtensions> =
+  ExtractedApiFromRenderExtension<RenderExtensions[ID]>;
+
+/**
+ * For a given rendering extension point, returns the UI components that the
+ * extension point supports.
+ */
+export type AllowedComponentsForRenderExtension<
+  ID extends keyof RenderExtensions,
+> = ExtractedAllowedComponentsFromRenderExtension<RenderExtensions[ID]>;

package/src/surfaces/checkout/extension.ts

@@ -0,0 +1,8 @@
+import {createExtensionRegistrationFunction} from '../../utilities/registration';
+
+import type {ExtensionPoints} from './extension-points';
+
+export * from '../../extension';
+
+export const extension = createExtensionRegistrationFunction<ExtensionPoints>();
+export const extend = extension;

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/shared.ts

@@ -0,0 +1,14 @@
+import type {RemoteComponentType} from '@remote-ui/core';
+
+type ComponentTypes = typeof import('./components');
+
+export type Components = {
+  [K in keyof ComponentTypes]: ComponentTypes[K] extends RemoteComponentType<
+    any,
+    any
+  >
+    ? ComponentTypes[K]
+    : never;
+};
+
+export type AnyComponent = Components[keyof Components];

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,177 @@
+/* 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) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      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};
+}