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

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

@@ -0,0 +1,161 @@
+import {memoize} from './memoize';
+import {Conditions, ConditionalStyle, BaseConditions} from './types';
+import {isEqual} from './isEqual';
+
+const MAX_CACHE_SIZE = 50;
+
+const MEMOIZE_OPTIONS = {
+  equalityCheck: isEqual,
+  maxSize: MAX_CACHE_SIZE,
+};
+
+type Chainable<TConditionalStyle> = TConditionalStyle extends ConditionalStyle<
+  infer T,
+  infer TAcceptedConditions
+>
+  ? TConditionalStyle & {
+      when: <
+        U,
+        AcceptedConditions extends BaseConditions = TAcceptedConditions,
+      >(
+        this: TConditionalStyle,
+        conditions: AcceptedConditions,
+        value: U,
+      ) => Chainable<
+        TConditionalStyle extends {default: T}
+          ? Required<ConditionalStyle<U, AcceptedConditions>>
+          : ConditionalStyle<U, AcceptedConditions>
+      >;
+    }
+  : never;
+
+type WhenContext<T, AcceptedConditions extends BaseConditions = Conditions> =
+  | typeof Style
+  | ConditionalStyle<T, AcceptedConditions>
+  | Required<ConditionalStyle<T, AcceptedConditions>>;
+
+type WhenReturnType<
+  T,
+  TContext extends WhenContext<any, AcceptedConditions>,
+  AcceptedConditions extends BaseConditions = Conditions,
+> = Chainable<
+  TContext extends typeof Style
+    ? ConditionalStyle<T, AcceptedConditions>
+    : TContext extends {default: infer U}
+    ? Required<ConditionalStyle<T | U, AcceptedConditions>>
+    : TContext extends {default?: infer U}
+    ? ConditionalStyle<T | U, AcceptedConditions>
+    : ConditionalStyle<T, AcceptedConditions>
+>;
+
+interface WhenFunction {
+  <
+    T,
+    TContext extends WhenContext<any, AcceptedConditions>,
+    AcceptedConditions extends BaseConditions = Conditions,
+  >(
+    this: TContext,
+    conditions: AcceptedConditions,
+    value: T,
+  ): WhenReturnType<T, TContext, AcceptedConditions>;
+}
+
+// eslint-disable-next-line func-style
+const when: WhenFunction = function when<
+  T,
+  TContext extends WhenContext<any, AcceptedConditions>,
+  AcceptedConditions extends BaseConditions = Conditions,
+>(this: TContext, conditions: AcceptedConditions, value: T) {
+  const config = isConditionalStyle<T, AcceptedConditions>(this)
+    ? {
+        default: this.default,
+        conditionals: [...this.conditionals, {conditions, value}],
+      }
+    : {
+        conditionals: [{conditions, value}],
+      };
+
+  return createChainableConditionalStyle<T, AcceptedConditions>(
+    config,
+  ) as WhenReturnType<T, TContext, AcceptedConditions>;
+};
+
+/**
+ * Style is a helper for authoring conditional values for prop styles.
+ * Write complex conditional styles based on one or more conditions (viewport
+ * sizes and interactive states) in a concise and expressive way.
+ */
+export const Style = {
+  /**
+   * Sets an optional default value to use when no other condition is met.
+   *
+   * @param defaultValue The default value
+   * @returns The chainable condition style
+   */
+  default: memoize(
+    <T, AcceptedConditions extends BaseConditions = Conditions>(
+      defaultValue: T,
+    ) =>
+      createChainableConditionalStyle<
+        T,
+        AcceptedConditions,
+        Required<ConditionalStyle<T, AcceptedConditions>>
+      >({
+        default: defaultValue,
+        conditionals: [],
+      }),
+    MEMOIZE_OPTIONS,
+  ),
+  /**
+   * Adjusts the style based on different conditions. All conditions, expressed
+   * as a literal object, must be met for the associated value to be applied.
+   *
+   * The `when` method can be chained together to build more complex styles.
+   *
+   * @param conditions The condition(s)
+   * @param value The conditional value that can be applied if the conditions are met
+   * @returns The chainable condition style
+   */
+  when: memoize(when, MEMOIZE_OPTIONS),
+} as const;
+
+function createChainableConditionalStyle<
+  T,
+  AcceptedConditions extends BaseConditions = Conditions,
+  TConditionalStyle extends ConditionalStyle<
+    T,
+    AcceptedConditions
+  > = ConditionalStyle<T, AcceptedConditions>,
+>(conditionalStyle: TConditionalStyle): Chainable<TConditionalStyle> {
+  const proto = {} as {
+    when: WhenFunction;
+  };
+
+  const returnConditionalStyle = Object.create(
+    proto,
+  ) as Chainable<TConditionalStyle>;
+
+  Object.assign(returnConditionalStyle, conditionalStyle);
+
+  proto.when = memoize(when.bind(returnConditionalStyle), MEMOIZE_OPTIONS);
+
+  return returnConditionalStyle;
+}
+
+export function isConditionalStyle<
+  T,
+  AcceptedConditions extends BaseConditions = Conditions,
+>(value?: any): value is ConditionalStyle<T, AcceptedConditions> {
+  return value !== null && typeof value === 'object' && 'conditionals' in value;
+}
+
+export function isConditionalStyleWithDefault<
+  T,
+  AcceptedConditions extends BaseConditions = Conditions,
+>(value?: any): value is Required<ConditionalStyle<T, AcceptedConditions>> {
+  return (
+    isConditionalStyle(value) &&
+    'default' in value &&
+    value.default !== undefined
+  );
+}

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

@@ -0,0 +1,67 @@
+type Resolution = 1 | 1.3 | 1.5 | 2 | 2.6 | 3 | 3.5 | 4;
+
+export interface InteractiveConditions {
+  hover: true;
+  focus: true;
+}
+
+export interface ResolutionCondition {
+  resolution: Resolution;
+}
+
+type ViewportInlineSize = 'small' | 'medium' | 'large';
+
+export interface ViewportSizeCondition {
+  viewportInlineSize: {min: ViewportInlineSize};
+}
+
+export type AtLeastOne<T, U = {[K in keyof T]: Pick<T, K>}> = Partial<T> &
+  U[keyof U];
+
+type DefaultConditions = InteractiveConditions & ViewportSizeCondition;
+
+export type Conditions = AtLeastOne<DefaultConditions>;
+
+export type BaseConditions = AtLeastOne<
+  DefaultConditions & ResolutionCondition
+>;
+
+export interface ConditionalValue<
+  T,
+  AcceptedConditions extends BaseConditions = Conditions,
+> {
+  /**
+   * The conditions that must be met for the value to be applied. At least one
+   * condition must be specified.
+   */
+  conditions: AcceptedConditions;
+  /**
+   * The value that will be applied if the conditions are met.
+   */
+  value: T;
+}
+
+export interface ConditionalStyle<
+  T,
+  AcceptedConditions extends BaseConditions = Conditions,
+> {
+  /**
+   * The default value applied when none of the conditional values
+   * specified in `conditionals` are met.
+   */
+  default?: T;
+  /**
+   * An array of conditional values.
+   */
+  conditionals: ConditionalValue<T, AcceptedConditions>[];
+}
+
+export type MaybeConditionalStyle<
+  T,
+  AcceptedConditions extends BaseConditions = Conditions,
+> = T | ConditionalStyle<T, AcceptedConditions>;
+
+export type MaybeResponsiveConditionalStyle<T> = MaybeConditionalStyle<
+  T,
+  ViewportSizeCondition
+>;

package/src/surfaces/checkout/style.ts

@@ -0,0 +1,16 @@
+export {
+  Style,
+  isConditionalStyle,
+  isConditionalStyleWithDefault,
+} from './style/style';
+export type {
+  AtLeastOne,
+  Conditions,
+  ConditionalStyle,
+  ConditionalValue,
+  InteractiveConditions,
+  MaybeConditionalStyle,
+  MaybeResponsiveConditionalStyle,
+  ResolutionCondition,
+  ViewportSizeCondition,
+} from './style/types';

package/src/utilities/registration.ts

@@ -1,19 +1,8 @@
-import {createRemoteRoot} from '@remote-ui/core';
-import type {
-  RenderExtension,
-  RenderExtensionWithRemoteRoot,
-} from '../extension';
-
 export interface ExtensionRegistrationFunction<ExtensionPoints> {
-  <Point extends keyof ExtensionPoints>(
-    _extensionPoint: Point,
-    extensionWithRemoteRoot: ExtensionPoints[Point] extends RenderExtension<
-      infer Api,
-      infer AllowedComponents
-    >
-      ? RenderExtensionWithRemoteRoot<Api, AllowedComponents>
-      : ExtensionPoints[Point],
-  ): ExtensionPoints[Point];
+  <Target extends keyof ExtensionPoints>(
+    target: Target,
+    implementation: ExtensionPoints[Target],
+  ): ExtensionPoints[Target];
 }
 
 /**
@@ -24,36 +13,14 @@ export interface ExtensionRegistrationFunction<ExtensionPoints> {
  * provided by a version of `@remote-ui/core` that the extension controls.
  */
 export function createExtensionRegistrationFunction<
-  ExtensionPoints
+  ExtensionPoints,
 >(): ExtensionRegistrationFunction<ExtensionPoints> {
   const extensionWrapper: ExtensionRegistrationFunction<ExtensionPoints> = (
-    _extensionPoint,
-    extensionWithRemoteRoot,
+    target,
+    implementation,
   ) => {
-    async function extension(...args: any[]) {
-      // This handles extensions that do not take a `RemoteChannel` as their first argument.
-      // This is true for ”non-rendering” extension points, like `Checkout::PostPurchase::ShouldRender`.
-      if (
-        args.length === 1 ||
-        typeof args[0] !== 'object' ||
-        args[0] == null ||
-        !('channel' in args[0])
-      ) {
-        const result = await (extensionWithRemoteRoot as any)(...args);
-        return result;
-      }
-
-      const [{channel, components}, ...rest] = args;
-
-      const root = createRemoteRoot(channel, {components, strict: true});
-
-      const result = await (extensionWithRemoteRoot as any)(root, ...rest);
-      await root.mount();
-
-      return result;
-    }
-
-    return extension as any;
+    globalThis.shopify.extend(target, implementation);
+    return implementation;
   };
 
   return extensionWrapper;

package/LICENSE.md

@@ -1,7 +0,0 @@
-Copyright 2020-present, Shopify Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/admin.d.ts

@@ -1 +0,0 @@
-export * from "./build/ts/surfaces/admin/index";

package/admin.esnext

@@ -1 +0,0 @@
-export * from "./build/esnext/surfaces/admin/index";

package/admin.js

@@ -1 +0,0 @@
-module.exports = require("./build/node/surfaces/admin/index");

package/admin.mjs

@@ -1 +0,0 @@
-export * from "./build/esm/surfaces/admin/index";

package/build/cjs/api.js

@@ -1 +0,0 @@
-"use strict";

package/build/cjs/components/BlockStack/BlockStack.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BlockStack = void 0;
-
-var _core = require("@remote-ui/core");
-
-var BlockStack = (0, _core.createRemoteComponent)('BlockStack');
-exports.BlockStack = BlockStack;

package/build/cjs/components/BlockStack/README.md

@@ -1 +0,0 @@
-# BlockStack

package/build/cjs/components/Button/Button.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Button = void 0;
-
-var _core = require("@remote-ui/core");
-
-var Button = (0, _core.createRemoteComponent)('Button');
-exports.Button = Button;

package/build/cjs/components/Button/README.md

@@ -1 +0,0 @@
-# Button

package/build/cjs/components/Checkbox/Checkbox.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Checkbox = void 0;
-
-var _core = require("@remote-ui/core");
-
-/**
- * Use checkboxes to give users a single binary option, such as signing up for marketing, or agreeing to terms and conditions.
- */
-var Checkbox = (0, _core.createRemoteComponent)('Checkbox');
-exports.Checkbox = Checkbox;

package/build/cjs/components/Checkbox/README.md

@@ -1 +0,0 @@
-# Checkbox

package/build/cjs/components/Text/README.md

@@ -1 +0,0 @@
-# Text

package/build/cjs/components/Text/Text.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Text = void 0;
-
-var _core = require("@remote-ui/core");
-
-var Text = (0, _core.createRemoteComponent)('Text');
-exports.Text = Text;

package/build/cjs/components/TextField/README.md

@@ -1 +0,0 @@
-# TextField

package/build/cjs/components/TextField/TextField.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextField = void 0;
-
-var _core = require("@remote-ui/core");
-
-var TextField = (0, _core.createRemoteComponent)('TextField');
-exports.TextField = TextField;

package/build/cjs/components/View/README.md

@@ -1 +0,0 @@
-# View

package/build/cjs/components/View/View.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.View = void 0;
-
-var _core = require("@remote-ui/core");
-
-var View = (0, _core.createRemoteComponent)('View');
-exports.View = View;

package/build/cjs/components.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BlockStack", {
-  enumerable: true,
-  get: function get() {
-    return _BlockStack.BlockStack;
-  }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function get() {
-    return _Button.Button;
-  }
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function get() {
-    return _Checkbox.Checkbox;
-  }
-});
-Object.defineProperty(exports, "Text", {
-  enumerable: true,
-  get: function get() {
-    return _Text.Text;
-  }
-});
-Object.defineProperty(exports, "TextField", {
-  enumerable: true,
-  get: function get() {
-    return _TextField.TextField;
-  }
-});
-Object.defineProperty(exports, "View", {
-  enumerable: true,
-  get: function get() {
-    return _View.View;
-  }
-});
-
-var _BlockStack = require("./components/BlockStack/BlockStack");
-
-var _Button = require("./components/Button/Button");
-
-var _Checkbox = require("./components/Checkbox/Checkbox");
-
-var _Text = require("./components/Text/Text");
-
-var _TextField = require("./components/TextField/TextField");
-
-var _View = require("./components/View/View");

package/build/cjs/extension.js

@@ -1 +0,0 @@
-"use strict";

package/build/cjs/index.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _api = require("./api");
-
-Object.keys(_api).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _api[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _api[key];
-    }
-  });
-});
-
-var _components = require("./components");
-
-Object.keys(_components).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _components[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _components[key];
-    }
-  });
-});
-
-var _extension = require("./extension");
-
-Object.keys(_extension).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _extension[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _extension[key];
-    }
-  });
-});

package/build/cjs/surfaces/admin/api/checkout-editor/README.md

@@ -1 +0,0 @@
-# Checkout editor API

package/build/cjs/surfaces/admin/api/checkout-editor/render-settings.js

@@ -1 +0,0 @@
-"use strict";

package/build/cjs/surfaces/admin/api/standard/README.md

@@ -1 +0,0 @@
-# Standard admin API

package/build/cjs/surfaces/admin/api/standard/standard.js

@@ -1 +0,0 @@
-"use strict";

package/build/cjs/surfaces/admin/api.js

@@ -1 +0,0 @@
-"use strict";

package/build/cjs/surfaces/admin/components/TextField/TextField.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextField = void 0;
-
-var _core = require("@remote-ui/core");
-
-var TextField = (0, _core.createRemoteComponent)('TextField');
-exports.TextField = TextField;

package/build/cjs/surfaces/admin/components.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  TextField: true
-};
-Object.defineProperty(exports, "TextField", {
-  enumerable: true,
-  get: function get() {
-    return _TextField.TextField;
-  }
-});
-
-var _components = require("../../components");
-
-Object.keys(_components).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _components[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _components[key];
-    }
-  });
-});
-
-var _TextField = require("./components/TextField/TextField");

package/build/cjs/surfaces/admin/extension-points.js

@@ -1 +0,0 @@
-"use strict";

package/build/cjs/surfaces/admin/extension.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  extension: true
-};
-exports.extension = void 0;
-
-var _registration = require("../../utilities/registration");
-
-var _extension = require("../../extension");
-
-Object.keys(_extension).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _extension[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _extension[key];
-    }
-  });
-});
-var extension = (0, _registration.createExtensionRegistrationFunction)();
-exports.extension = extension;