@shopify/ui-extensions - npm Package Compare versions

Comparing version 2022.10.4 to 2022.10.5

build/cjs/surfaces/checkout/style/memoize.js

@@ -119,3 +119,4 @@ 'use strict';
     if (value === NOT_FOUND) {
-      // @ts-expect-error - we know that arguments is an array-like object
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       value = func.apply(null, arguments);
@@ -122,0 +123,0 @@ if (resultEqualityCheck) {

build/cjs/utilities/registration.js

@@ -14,3 +14,4 @@ 'use strict';
   const extensionWrapper = (target, implementation) => {
-    globalThis.shopify.extend(target, implementation);
+    var _shopify;
+    (_shopify = globalThis.shopify) === null || _shopify === void 0 ? void 0 : _shopify.extend(target, implementation);
     return implementation;
@@ -17,0 +18,0 @@ };

build/ts/surfaces/checkout/api.d.ts

 export type { CountryCode, CurrencyCode, Timezone } from './api/shared';
-export type { StandardApi, ExtensionInstance, ExtensionSettings, BuyerIdentity, Capability, CartCost, CartLineCost, Customer, Editor, Interceptor, InterceptorRequest, Storage, Version, Shop, NoteChange, NoteChangeResult, NoteChangeResultSuccess, NoteChangeResultError, MailingAddress, Metafield, MetafieldRemoveChange, MetafieldUpdateChange, MetafieldChange, MetafieldChangeResultError, MetafieldChangeResultSuccess, MetafieldChangeResult, AppMetafield, AppMetafieldEntryTarget, AppMetafieldEntry, Attribute, AttributeChange, AttributeChangeResult, Merchandise, ImageDetails, Product, ProductVariant, SelectedOption, Money, CartLine, CartLineChange, CartLineChangeResult, CartLineChangeResultError, CartLineChangeResultSuccess, CartLineAddChange, CartLineUpdateChange, CartLineRemoveChange, PresentmentCartLine, CartDiscountCode, I18n, I18nTranslate, Currency, Language, Localization, } from './api/standard/standard';
+export type { StandardApi, ExtensionInstance, ExtensionSettings, BuyerIdentity, Capability, CartCost, CartLineCost, Customer, Editor, Interceptor, InterceptorRequest, Storage, Version, Shop, NoteChange, NoteChangeResult, NoteChangeResultSuccess, NoteChangeResultError, MailingAddress, Metafield, MetafieldRemoveChange, MetafieldUpdateChange, MetafieldChange, MetafieldChangeResultError, MetafieldChangeResultSuccess, MetafieldChangeResult, AppMetafield, AppMetafieldEntryTarget, AppMetafieldEntry, Attribute, AttributeChange, AttributeChangeResult, Merchandise, ImageDetails, Product, ProductVariant, SelectedOption, Money, CartLine, CartLineChange, CartLineChangeResult, CartLineChangeResultError, CartLineChangeResultSuccess, CartLineAddChange, CartLineUpdateChange, CartLineRemoveChange, PresentmentCartLine, CartDiscountCode, CartDiscountAllocation, CartCodeDiscountAllocation, CartAutomaticDiscountAllocation, CartCustomDiscountAllocation, DiscountCodeAddChange, DiscountCodeRemoveChange, DiscountCodeChange, DiscountCodeChangeResult, DiscountCodeChangeResultError, DiscountCodeChangeResultSuccess, I18n, I18nTranslate, Currency, Language, Localization, } from './api/standard/standard';
 export type { CartLineDetailsRenderAfterApi } from './api/cart-line-details/render-after';
 //# sourceMappingURL=api.d.ts.map

build/ts/surfaces/checkout/api/standard/standard.d.ts

@@ -515,6 +515,10 @@ import type { StatefulRemoteSubscribable } from '@remote-ui/async-subscription';
     /**
-     * A list of discount codes currently applied to the checkout
+     * A list of discount codes currently applied to the checkout.
      */
     discountCodes: StatefulRemoteSubscribable<CartDiscountCode[]>;
     /**
+     * Discounts that have been applied to the entire cart.
+     */
+    discountAllocations: StatefulRemoteSubscribable<CartDiscountAllocation[]>;
+    /**
      * Performs an update on the discount codes.
@@ -688,3 +692,19 @@ * It resolves when the new discount codes have been negotiated and results in an update
     attributes: Attribute[];
+    /**
+     * Discounts applied to the cart line.
+     */
+    discountAllocations: CartDiscountAllocation[];
+    /** @private */
+    __lineComponents: CartLineComponentType[];
 }
+/** @private */
+type CartLineComponentType = CartBundleLineComponent;
+/** @private */
+export interface CartBundleLineComponent {
+    id: string;
+    merchandise: Merchandise;
+    quantity: number;
+    cost: CartLineCost;
+    attributes: Attribute[];
+}
 export interface CartLineCost {
@@ -727,2 +747,6 @@ /**
     /**
+     * The product variant's subtitle.
+     */
+    subtitle?: string;
+    /**
      * Image associated with the product variant. This field falls back to the product
@@ -907,3 +931,40 @@ * image if no image is available.
 }
-export type DiscountCodeChange = DiscountCodeAddChange;
+export type CartDiscountAllocation = CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation;
+export interface CartDiscountAllocationBase {
+    /**
+     * The money amount that has been discounted from the order
+     */
+    discountedAmount: Money;
+}
+export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
+    /**
+     * The code for the discount
+     */
+    code: string;
+    /**
+     * The type of the code discount
+     */
+    type: 'code';
+}
+export interface CartAutomaticDiscountAllocation extends CartDiscountAllocationBase {
+    /**
+     * The title of the automatic discount
+     */
+    title: string;
+    /**
+     * The type of the automatic discount
+     */
+    type: 'automatic';
+}
+export interface CartCustomDiscountAllocation extends CartDiscountAllocationBase {
+    /**
+     * The title of the custom discount
+     */
+    title: string;
+    /**
+     * The type of the custom discount
+     */
+    type: 'custom';
+}
+export type DiscountCodeChange = DiscountCodeAddChange | DiscountCodeRemoveChange;
 export type DiscountCodeChangeResult = DiscountCodeChangeResultSuccess | DiscountCodeChangeResultError;
@@ -920,2 +981,12 @@ export interface DiscountCodeAddChange {
 }
+export interface DiscountCodeRemoveChange {
+    /**
+     * The type of the `DiscountCodeChange` API.
+     */
+    type: 'removeDiscountCode';
+    /**
+     * The code for the discount
+     */
+    code: string;
+}
 export interface DiscountCodeChangeResultSuccess {
@@ -922,0 +993,0 @@ /**

build/ts/surfaces/checkout/components.d.ts

@@ -75,3 +75,3 @@ export { Banner } from './components/Banner/Banner';
 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';
+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';
 //# sourceMappingURL=components.d.ts.map

build/ts/surfaces/checkout/components/ScrollView/ScrollView.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { BorderProps, SizingProps, SpacingProps } from '../shared';
@@ -2,0 +3,0 @@ export interface ScrollViewEvent {

build/ts/surfaces/checkout/components/shared.d.ts

@@ -29,2 +29,3 @@ import { RemoteFragment } from '@remote-ui/core';
 export type BorderWidth = 'base' | 'medium';
+export type CornerRadius = 'base' | 'small' | 'large' | 'fullyRounded' | 'none';
 export interface BackgroundProps {
@@ -99,4 +100,22 @@ /**
      */
-    borderRadius?: MaybeResponsiveConditionalStyle<MaybeShorthandProperty<BorderRadius>>;
+    borderRadius?: MaybeConditionalStyle<MaybeShorthandProperty<BorderRadius>>;
 }
+export interface CornerProps {
+    /**
+     * Adjust the corner radius.
+     *
+     * To shorten the code, it is possible to specify all the corner radii in one property.
+     *
+     * For example:
+     *
+     * - `base` means all 4 corner radii are `base`
+     *
+     * - `['base', 'none']` means the StartStart and EndEnd corner radii are `base`, StartEnd and EndStart corner radii are `none`.
+     *    When the context’s language direction is left to right, StartStart and EndEnd corners are the top left and bottom right corners
+     *    while StartEnd and EndStart corners are the top right and bottom left corners.
+     *
+     * - `['base', 'none', 'small', 'base']` means StartStart corner radius is `base`, StartEnd corner radius is `none`, EndEnd corner radius is `small` and  EndStart corner radius is `base`
+     */
+    cornerRadius?: MaybeResponsiveConditionalStyle<MaybeShorthandProperty<CornerRadius>>;
+}
 export interface SizingProps {
@@ -103,0 +122,0 @@ /**

package.json

 {
   "name": "@shopify/ui-extensions",
-  "version": "2022.10.4",
+  "version": "2022.10.5",
   "main": "index.js",
@@ -5,0 +5,0 @@ "module": "index.mjs",

README.md

 # `@shopify/ui-extensions`
 
-This package contains the public type definitions and utilities needed to create a Shopify UI extension. This is a generalized package that is intended to be the long-term home of the surface-specific packages in this repository, like `@shopify/checkout-ui-extensions` and `@shopify/admin-ui-extensions`.
+This package contains the public type definitions and utilities needed to create a Shopify UI extension. This is a generalized package that is intended to be the long-term home of the surface-specific UI extension packages, like [`@shopify/checkout-ui-extensions`](https://github.com/Shopify/ui-extensions/tree/main/packages/checkout-ui-extensions) and [`@shopify/admin-ui-extensions`](https://github.com/Shopify/ui-extensions/tree/main/packages/admin-ui-extensions).
 
-Currently, this package contains the API for two [surfaces](https://github.com/Shopify/ui-extensions-private/discussions/1770#discussion-4324275):
+> **Is your extension currently using `@shopify/checkout-ui-extensions`?** You can learn what you need to do to upgrade to this API versioned package in the [migration guide](../../documentation/upgrade/checkout-ui-extension-api-versioning.md).
 
-- [`admin`](./src/surfaces/admin)
-- [`checkout`](./src/surfaces/checkout)
+Currently, this package only contains the extension APIs for the [`checkout` surface](./src/surfaces/checkout), but other Shopify surfaces will be added here soon.
 
-This surface-based grouping is mostly cosmetic; all extensions use the same underlying technology, and most of the same “core” components (e.g., `Layout`, `BlockStack`, etc) and capabilities (e.g., direct API access, session tokens). Separating APIs by surface makes it easier for a developer to see what is available to them in each context, and gives us a flexible system for introducing components and APIs available in only some surfaces.
+All extensions, regardless of where they appear in Shopify, make use the same [underlying technology](../../documentation/how-extensions-work.md), and most of the same “core” components (e.g., `BlockStack`, `Button`, `TextField`, etc) and capabilities (e.g., direct API access, session tokens). Separating APIs by surface makes it easier for a developer to see what is available to them in each context, and gives us a flexible system for introducing components and APIs available in only some areas of Shopify.
 
-An admin extension using “vanilla” JavaScript would be written as follows:
+A checkout extension using “vanilla” JavaScript would be written as follows:
 
 ```ts
-import {
-  extension,
-  TextField,
-  EditorSettings,
-} from '@shopify/ui-extensions/admin';
+import {extension, TextField} from '@shopify/ui-extensions/checkout';
 
 export default extension(
-  'Admin::CheckoutEditor::RenderSettings',
-  (root, {settings, applySettingChange}) => {
-    const editorSettings = root.createComponent(EditorSettings);
+  'Checkout::Dynamic::Render',
+  (root, {i18n, metafields, applyMetafieldChange}) => {
+    const metafield = metafields.current.find(
+      (metafield) =>
+        metafield.namespace === 'custom' && metafield.key === 'gift_note',
+    );
 
     const textfield = root.createComponent(TextField, {
-      label: 'Message',
-      helpText: 'The message to show to buyers when this extension is rendered',
-      value: settings.current.message,
+      label: i18n.translate('gift_note.label'),
+      value: metafield?.value ?? '',
       onChange(value) {
-        applySettingsChange({key: 'message', value});
+        textfield.updateProps({value});
+
+        applyMetafieldChange({
+          namespace: 'custom',
+          key: 'gift_note',
+          value,
+          valueType: 'string',
+        });
       },
     });
 
-    editorSettings.appendChild(textfield);
-    root.appendChild(editorSettings);
+    root.appendChild(textfield);
   },
 );
 ```
-
-## What is a “UI Extension”?
-
-A UI extension is a JavaScript-based module that can hook in to client-side behaviors on any of Shopify’s first party UI surface areas. No matter whether the developer is embedding into the admin or checkout, whether they are rendering UI or [registering listeners for client-side events](https://shopify.dev/apps/pixels); it’s all a UI extension.
-
-The most minimal definition of a UI extension has the following properties:
-
-- A **name** that is presented to merchants when interacting with the extension.
-- The **extension points** that the UI extension implements. These are represented with string identifiers that describe the surface and responsibility of the extension. For example, [`Checkout::CartLines::RenderAfter`](https://shopify.dev/api/checkout-extensions/checkout/extension-points/api) gives the UI Extension the ability to render UI after the cart lines in a checkout; [`WebPixel::Register`](https://shopify.dev/apps/pixels/pixel-extension) registers a Web Pixel to track client-side events. A UI Extension can register to support multiple extension points, and must map each to a JavaScript module in their application.
-
-The types in this package allow us to represent additional details about the extension points developers can implement. Each extension point can define what APIs it supports, including:
-
-- What **UI Components** are available to be rendered, and what properties those UI components accept
-- What **imperative APIs** are provided by the host, for reading and writing data relevant to the extension
-
-The available components and APIs can be different for each extension point. Additionally, Shopify can vary the components and APIs it provides based on many other factors at runtime, like:
-
-- Whether an extension is built by Shopify or a third party
-- Whether the API client that owns the extension has certain approval scopes,
-- Whether the shop or API client has particular beta flags enabled

src/surfaces/checkout/api.ts

@@ -51,2 +51,12 @@ export type {CountryCode, CurrencyCode, Timezone} from './api/shared';
   CartDiscountCode,
+  CartDiscountAllocation,
+  CartCodeDiscountAllocation,
+  CartAutomaticDiscountAllocation,
+  CartCustomDiscountAllocation,
+  DiscountCodeAddChange,
+  DiscountCodeRemoveChange,
+  DiscountCodeChange,
+  DiscountCodeChangeResult,
+  DiscountCodeChangeResultError,
+  DiscountCodeChangeResultSuccess,
   I18n,
@@ -53,0 +63,0 @@ I18nTranslate,

src/surfaces/checkout/api/standard/standard.ts

@@ -608,3 +608,3 @@ import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
   /**
-   * A list of discount codes currently applied to the checkout
+   * A list of discount codes currently applied to the checkout.
    */
@@ -614,2 +614,7 @@ discountCodes: StatefulRemoteSubscribable<CartDiscountCode[]>;
   /**
+   * Discounts that have been applied to the entire cart.
+   */
+  discountAllocations: StatefulRemoteSubscribable<CartDiscountAllocation[]>;
+
+  /**
    * Performs an update on the discount codes.
@@ -811,4 +816,24 @@ * It resolves when the new discount codes have been negotiated and results in an update
   attributes: Attribute[];
+
+  /**
+   * Discounts applied to the cart line.
+   */
+  discountAllocations: CartDiscountAllocation[];
+
+  /** @private */
+  __lineComponents: CartLineComponentType[];
 }
 
+/** @private */
+type CartLineComponentType = CartBundleLineComponent;
+
+/** @private */
+export interface CartBundleLineComponent {
+  id: string;
+  merchandise: Merchandise;
+  quantity: number;
+  cost: CartLineCost;
+  attributes: Attribute[];
+}
+
 export interface CartLineCost {
@@ -858,2 +883,7 @@ /**
   /**
+   * The product variant's subtitle.
+   */
+  subtitle?: string;
+
+  /**
    * Image associated with the product variant. This field falls back to the product
@@ -1081,4 +1111,56 @@ * image if no image is available.
 
-export type DiscountCodeChange = DiscountCodeAddChange;
+export type CartDiscountAllocation =
+  | CartCodeDiscountAllocation
+  | CartAutomaticDiscountAllocation
+  | CartCustomDiscountAllocation;
 
+export interface CartDiscountAllocationBase {
+  /**
+   * The money amount that has been discounted from the order
+   */
+  discountedAmount: Money;
+}
+
+export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase {
+  /**
+   * The code for the discount
+   */
+  code: string;
+
+  /**
+   * The type of the code discount
+   */
+  type: 'code';
+}
+
+export interface CartAutomaticDiscountAllocation
+  extends CartDiscountAllocationBase {
+  /**
+   * The title of the automatic discount
+   */
+  title: string;
+
+  /**
+   * The type of the automatic discount
+   */
+  type: 'automatic';
+}
+
+export interface CartCustomDiscountAllocation
+  extends CartDiscountAllocationBase {
+  /**
+   * The title of the custom discount
+   */
+  title: string;
+
+  /**
+   * The type of the custom discount
+   */
+  type: 'custom';
+}
+
+export type DiscountCodeChange =
+  | DiscountCodeAddChange
+  | DiscountCodeRemoveChange;
+
 export type DiscountCodeChangeResult =
@@ -1100,2 +1182,14 @@ | DiscountCodeChangeResultSuccess
 
+export interface DiscountCodeRemoveChange {
+  /**
+   * The type of the `DiscountCodeChange` API.
+   */
+  type: 'removeDiscountCode';
+
+  /**
+   * The code for the discount
+   */
+  code: string;
+}
+
 export interface DiscountCodeChangeResultSuccess {
@@ -1102,0 +1196,0 @@ /**

src/surfaces/checkout/components.ts

@@ -138,2 +138,3 @@ export {Banner} from './components/Banner/Banner';
   Breakpoint,
+  CornerRadius,
   ShorthandProperty,
@@ -152,2 +153,3 @@ MaybeShorthandProperty,
   BorderProps,
+  CornerProps,
   SizingProps,
@@ -154,0 +156,0 @@ SpacingProps,

src/surfaces/checkout/components/Banner/examples/basic-banner.example.ts

@@ -1,2 +0,2 @@
-import {extend, Banner} from '@shopify/checkout-ui-extensions';
+import {extend, Banner} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/BlockLayout/examples/basic-blockLayout.example.ts

@@ -1,2 +0,2 @@
-import {extend, BlockLayout, View} from '@shopify/checkout-ui-extensions';
+import {extend, BlockLayout, View} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/BlockSpacer/examples/basic-blockspacer.example.ts

@@ -1,2 +0,2 @@
-import {extend, BlockSpacer, View} from '@shopify/checkout-ui-extensions';
+import {extend, BlockSpacer, View} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/BlockStack/examples/basic-blockstack.example.ts

@@ -1,2 +0,2 @@
-import {extend, BlockStack, View} from '@shopify/checkout-ui-extensions';
+import {extend, BlockStack, View} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Button/examples/basic-button.example.ts

@@ -1,2 +0,2 @@
-import {extend, Button} from '@shopify/checkout-ui-extensions';
+import {extend, Button} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Checkbox/examples/basic-checkbox.example.ts

@@ -1,2 +0,2 @@
-import {extend, Checkbox} from '@shopify/checkout-ui-extensions';
+import {extend, Checkbox} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Choice/examples/basic-choice.example.ts

@@ -7,3 +7,3 @@ import {
   InlineStack,
-} from '@shopify/checkout-ui-extensions';
+} from '@shopify/ui-extensions/checkout';
 
@@ -10,0 +10,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/ChoiceList/examples/basic-choicelist.example.ts

@@ -7,3 +7,3 @@ import {
   InlineStack,
-} from '@shopify/checkout-ui-extensions';
+} from '@shopify/ui-extensions/checkout';
 
@@ -10,0 +10,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Divider/examples/basic-divider.example.ts

@@ -1,2 +0,2 @@
-import {extend, Divider} from '@shopify/checkout-ui-extensions';
+import {extend, Divider} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Form/examples/basic-form.example.ts

@@ -10,3 +10,3 @@ import {
   View,
-} from '@shopify/checkout-ui-extensions';
+} from '@shopify/ui-extensions/checkout';
 
@@ -13,0 +13,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Grid/examples/basic-grid.example.ts

@@ -1,2 +0,2 @@
-import {extend, Grid, View} from '@shopify/checkout-ui-extensions';
+import {extend, Grid, View} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/GridItem/examples/basic-griditem.example.ts

@@ -1,2 +0,2 @@
-import {extend, Grid, GridItem, View} from '@shopify/checkout-ui-extensions';
+import {extend, Grid, GridItem, View} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Heading/examples/basic-heading.example.ts

@@ -1,2 +0,2 @@
-import {extend, Heading} from '@shopify/checkout-ui-extensions';
+import {extend, Heading} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/HeadingGroup/examples/basic-headinggroup.example.ts

@@ -6,3 +6,3 @@ import {
   View,
-} from '@shopify/checkout-ui-extensions';
+} from '@shopify/ui-extensions/checkout';
 
@@ -9,0 +9,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Icon/examples/basic-icon.example.ts

@@ -1,2 +0,2 @@
-import {extend, Icon} from '@shopify/checkout-ui-extensions';
+import {extend, Icon} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Image/examples/basic-image.example.ts

@@ -1,2 +0,2 @@
-import {extend, Image} from '@shopify/checkout-ui-extensions';
+import {extend, Image} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/InlineLayout/examples/basic-inlineLayout.example.ts

@@ -1,2 +0,2 @@
-import {extend, InlineLayout, View} from '@shopify/checkout-ui-extensions';
+import {extend, InlineLayout, View} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/InlineSpacer/examples/basic-inlinespacer.example.ts

@@ -6,3 +6,3 @@ import {
   View,
-} from '@shopify/checkout-ui-extensions';
+} from '@shopify/ui-extensions/checkout';
 
@@ -14,2 +14,6 @@ extend('Checkout::Dynamic::Render', (root) => {
     root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+    root.createComponent(InlineSpacer, {spacing: 'tight'}),
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
+    root.createComponent(InlineSpacer, {spacing: 'base'}),
+    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
   ]);
@@ -16,0 +20,0 @@

src/surfaces/checkout/components/InlineStack/examples/basic-inlinestack.example.ts

@@ -1,2 +0,2 @@
-import {extend, InlineStack, View} from '@shopify/checkout-ui-extensions';
+import {extend, InlineStack, View} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Link/examples/basic-link.example.ts

@@ -1,2 +0,2 @@
-import {extend, Link} from '@shopify/checkout-ui-extensions';
+import {extend, Link} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/List/examples/basic-list.example.ts

@@ -1,2 +0,2 @@
-import {extend, List, ListItem} from '@shopify/checkout-ui-extensions';
+import {extend, List, ListItem} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/ListItem/examples/basic-listitem.example.ts

@@ -1,2 +0,2 @@
-import {extend, List, ListItem} from '@shopify/checkout-ui-extensions';
+import {extend, List, ListItem} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/PhoneField/examples/basic-phonefield.example.ts

@@ -1,2 +0,2 @@
-import {extend, PhoneField} from '@shopify/checkout-ui-extensions';
+import {extend, PhoneField} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Pressable/examples/basic-pressable.example.ts

@@ -7,3 +7,3 @@ import {
   Text,
-} from '@shopify/checkout-ui-extensions';
+} from '@shopify/ui-extensions/checkout';
 
@@ -10,0 +10,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/ScrollView/examples/basic-scrollview.example.ts

@@ -1,2 +0,2 @@
-import {extend, ScrollView, View} from '@shopify/checkout-ui-extensions';
+import {extend, ScrollView, View} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Select/examples/basic-select.example.ts

@@ -1,2 +0,2 @@
-import {extend, Select} from '@shopify/checkout-ui-extensions';
+import {extend, Select} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/shared.ts

@@ -143,2 +143,4 @@ import {RemoteFragment} from '@remote-ui/core';
 
+export type CornerRadius = 'base' | 'small' | 'large' | 'fullyRounded' | 'none';
+
 export interface BackgroundProps {
@@ -221,4 +223,23 @@ /**
    */
-  borderRadius?: MaybeResponsiveConditionalStyle<
-    MaybeShorthandProperty<BorderRadius>
+  borderRadius?: MaybeConditionalStyle<MaybeShorthandProperty<BorderRadius>>;
+}
+
+export interface CornerProps {
+  /**
+   * Adjust the corner radius.
+   *
+   * To shorten the code, it is possible to specify all the corner radii in one property.
+   *
+   * For example:
+   *
+   * - `base` means all 4 corner radii are `base`
+   *
+   * - `['base', 'none']` means the StartStart and EndEnd corner radii are `base`, StartEnd and EndStart corner radii are `none`.
+   *    When the context’s language direction is left to right, StartStart and EndEnd corners are the top left and bottom right corners
+   *    while StartEnd and EndStart corners are the top right and bottom left corners.
+   *
+   * - `['base', 'none', 'small', 'base']` means StartStart corner radius is `base`, StartEnd corner radius is `none`, EndEnd corner radius is `small` and  EndStart corner radius is `base`
+   */
+  cornerRadius?: MaybeResponsiveConditionalStyle<
+    MaybeShorthandProperty<CornerRadius>
   >;
@@ -225,0 +246,0 @@ }

src/surfaces/checkout/components/SkeletonImage/examples/basic-skeletonimage.example.ts

@@ -1,2 +0,2 @@
-import {extend, SkeletonImage} from '@shopify/checkout-ui-extensions';
+import {extend, SkeletonImage} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/SkeletonImage/SkeletonImage.ts

@@ -9,4 +9,4 @@ import {createRemoteComponent} from '@remote-ui/core';
    */
+  blockSize?: MaybeResponsiveConditionalStyle<number | `${number}%` | 'fill'>;
 
-  blockSize?: MaybeResponsiveConditionalStyle<number | `${number}%` | 'fill'>;
   /**
@@ -16,2 +16,3 @@ * Adjust the inline size of the skeleton.
   inlineSize?: MaybeResponsiveConditionalStyle<number | `${number}%` | 'fill'>;
+
   /**
@@ -18,0 +19,0 @@ * Displays the skeleton at the specified aspect ratio (fills the width of the

src/surfaces/checkout/components/SkeletonText/examples/basic-skeletontext.example.ts

@@ -1,2 +0,2 @@
-import {extend, SkeletonText} from '@shopify/checkout-ui-extensions';
+import {extend, SkeletonText} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/SkeletonTextBlock/examples/basic-skeletontextblock.example.ts

@@ -1,2 +0,2 @@
-import {extend, SkeletonTextBlock} from '@shopify/checkout-ui-extensions';
+import {extend, SkeletonTextBlock} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Spinner/examples/basic-spinner.example.ts

@@ -1,2 +0,2 @@
-import {extend, Spinner} from '@shopify/checkout-ui-extensions';
+import {extend, Spinner} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Stepper/examples/basic-stepper.example.ts

@@ -1,2 +0,2 @@
-import {extend, Stepper} from '@shopify/checkout-ui-extensions';
+import {extend, Stepper} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Tag/examples/basic-tag.example.ts

@@ -1,2 +0,2 @@
-import {extend, Tag} from '@shopify/checkout-ui-extensions';
+import {extend, Tag} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Text/examples/basic-text.example.ts

@@ -1,2 +0,2 @@
-import {extend, Text, BlockStack} from '@shopify/checkout-ui-extensions';
+import {extend, Text, BlockStack} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/TextBlock/examples/basic-textblock.example.ts

@@ -1,2 +0,2 @@
-import {extend, TextBlock, BlockStack} from '@shopify/checkout-ui-extensions';
+import {extend, TextBlock, BlockStack} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/TextField/examples/basic-textfield.example.ts

@@ -1,2 +0,2 @@
-import {extend, TextField} from '@shopify/checkout-ui-extensions';
+import {extend, TextField} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/Tooltip/examples/basic-tooltip.example.ts

@@ -6,3 +6,3 @@ import {
   Tooltip,
-} from '@shopify/checkout-ui-extensions';
+} from '@shopify/ui-extensions/checkout';
 
@@ -9,0 +9,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/components/View/examples/basic-view.example.ts

@@ -1,2 +0,2 @@
-import {extend, View} from '@shopify/checkout-ui-extensions';
+import {extend, View} from '@shopify/ui-extensions/checkout';
 
@@ -3,0 +3,0 @@ extend('Checkout::Dynamic::Render', (root) => {

src/surfaces/checkout/style/memoize.ts

@@ -154,3 +154,4 @@ /* eslint-disable prefer-rest-params */
     if (value === NOT_FOUND) {
-      // @ts-expect-error - we know that arguments is an array-like object
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       value = func.apply(null, arguments);
@@ -157,0 +158,0 @@

src/utilities/registration.ts

@@ -22,3 +22,3 @@ export interface ExtensionRegistrationFunction<ExtensionPoints> {
   ) => {
-    globalThis.shopify.extend(target, implementation);
+    (globalThis as any).shopify?.extend(target, implementation);
     return implementation;
@@ -25,0 +25,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1011178

increased by4.06%

Lines of code

11003

increased by1.61%

Worsened metrics

Number of package files

412

decreased by-15.05%

Number of lines in readme file

43

decreased by-28.33%

No dependency changes