@shopify/app-bridge-types 0.0.15 → 0.0.16

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.0.16
+
+### Patch Changes
+
+- [#195](https://github.com/Shopify/extensibility/pull/195) [`934d5c06c26f5b822a72be983c219c9f65fabcf2`](https://github.com/Shopify/extensibility/commit/934d5c06c26f5b822a72be983c219c9f65fabcf2) Thanks [@charlesdobson](https://github.com/charlesdobson)! - sync picker types with host and add types to package
+
 ## 0.0.15
 
 ### Patch Changes

package/dist/shopify.ts

@@ -133,6 +133,12 @@ export interface AugmentedElements {
     a: MenuItemProperties;
 }
 
+interface Badge {
+    content: string;
+    tone?: Tone;
+    progress?: Progress;
+}
+
 interface BaseElementAttributes {
     id?: string;
     name?: string;
@@ -271,6 +277,8 @@ interface CustomSale {
     taxable: boolean;
 }
 
+type DataPoint = string | number | undefined;
+
 interface DebugOptions {
     /**
      * Enables or disables the logging of web performance metrics (Web Vitals) in the browser's console.
@@ -370,6 +378,20 @@ enum FulfillmentServiceType {
     ThirdParty = "THIRD_PARTY"
 }
 
+interface Header {
+    /**
+     * The content to display in the table column header.
+     */
+    content?: string;
+    /**
+     * The type of data to display in the column. The type is used to format the data in the column.
+     * If the type is 'number', the data in the column will be right-aligned, this should be used when referencing currency or numeric values.
+     * If the type is 'string', the data in the column will be left-aligned.
+     * @defaultValue 'string'
+     */
+    type?: 'string' | 'number';
+}
+
 /**
  * Asynchronously returns an ID token.
  * @returns A Promise that resolves to an ID token.
@@ -535,6 +557,61 @@ interface _ModalApi {
 
 type Money = string;
 
+type PickerApi = (options: PickerOptions) => Promise<{
+    selected: Promise<string[] | undefined>;
+}>;
+
+interface PickerItem {
+    id: string;
+    /**
+     * The primary content to display in the first column of the row.
+     */
+    heading: string;
+    /**
+     * The additional content to display in the second and third columns of the row, if provided.
+     */
+    data?: DataPoint[];
+    /**
+     * Whether the item is disabled or not. If the item is disabled, it cannot be selected.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the item is selected or not when the picker is opened. The user may deselect the item if it is preselected.
+     */
+    selected?: boolean;
+    /**
+     * The badges to display in the first column of the row. These are used to display additional information about the item, such as progress of an action or tone indicating the status of that item.
+     */
+    badges?: Badge[];
+    /**
+     * The thumbnail to display at the start of the row. This is used to display an image or icon for the item.
+     */
+    thumbnail?: {
+        url: string;
+    };
+}
+
+interface PickerOptions {
+    /**
+     * The heading of the picker. This is displayed in the title of the picker modal.
+     */
+    heading: string;
+    /**
+     * Whether to allow selecting multiple items of a specific type or not. If a number is provided, then limit the selections to a maximum of that number of items.
+     * @defaultValue false
+     */
+    multiple?: boolean | number;
+    /**
+     * The data headers for the picker. These are used to display the table headers in the picker modal.
+     */
+    headers?: Header[];
+    /**
+     * The items to display in the picker. These are used to display the rows in the picker modal.
+     */
+    items: PickerItem[];
+}
+
 interface PosApi {
     cart: PosCart;
     close: PosClose;
@@ -749,6 +826,8 @@ enum ProductVariantInventoryPolicy {
     Continue = "CONTINUE"
 }
 
+type Progress = 'incomplete' | 'partiallyComplete' | 'complete';
+
 interface Resource {
     /** in GraphQL id format, ie 'gid://shopify/Product/1' */
     id: string;
@@ -835,6 +914,55 @@ interface ScannerPayload {
     data: string;
 }
 
+/**
+ * `Scope` represents an [access scope](https://shopify.dev/docs/api/usage/access-scopes) handle, like "`write_products`" or "`read_orders`"
+ */
+type Scope = string;
+
+/**
+ * The Scopes API enables embedded apps and extensions to request merchant consent for access scopes.
+ */
+interface Scopes {
+    /**
+     * Queries Shopify for the scopes for this app on this shop
+     */
+    query: () => Promise<ScopesDetail>;
+    /**
+     * Requests the merchant to grant the provided scopes for this app on this shop
+     *
+     * This will open a [permission grant modal](/docs/apps/build/authentication-authorization/app-installation/manage-access-scopes#request-access-scopes-using-the-app-bridge-api-for-embedded-apps) for the merchant to accept or decline the scopes.
+     */
+    request: (scopes: Scope[]) => Promise<ScopesRequestResponse>;
+    /**
+     * Revokes the provided scopes from this app on this shop
+     */
+    revoke: (scopes: Scope[]) => Promise<ScopesRevokeResponse>;
+}
+
+interface ScopesDetail {
+    /**
+     * The scopes that have been granted on the shop for this app
+     */
+    granted: Scope[];
+    /**
+     * The required scopes that the app has declared in its configuration
+     */
+    required: Scope[];
+    /**
+     * The optional scopes that the app has declared in its configuration
+     */
+    optional: Scope[];
+}
+
+interface ScopesRequestResponse {
+    result: UserResult;
+    detail: ScopesDetail;
+}
+
+interface ScopesRevokeResponse {
+    detail: ScopesDetail;
+}
+
 type SelectPayload<Type extends keyof ResourceTypes> = WithSelection<ResourceSelection<Type>[]>;
 
 export interface ShopifyGlobal {
@@ -852,8 +980,18 @@ export interface ShopifyGlobal {
     saveBar: SaveBarApi;
     pos: PosApi;
     intents: IntentsApi;
+    webVitals: WebVitalsApi;
+    support: SupportApi;
+    scopes: Scopes;
+    picker: PickerApi;
+}
+
+interface SupportApi {
+    registerHandler?: (callback: SupportCallback | null) => Promise<void>;
 }
 
+type SupportCallback = () => void | Promise<void>;
+
 /**
  * The Toast API provides methods to display Toast notifications in the Shopify admin.
  */
@@ -904,6 +1042,8 @@ interface ToastOptions {
 
 type ToastShow = (message: string, opts?: ToastOptions) => string;
 
+type Tone = 'info' | 'success' | 'warning' | 'critical';
+
 export interface UIModalAttributes extends _UIModalAttributes {
     children?: any;
 }
@@ -1140,8 +1280,28 @@ interface User extends PrivilegedAdminUser, AdminUser, POSUser {
 
 type UserApi = () => Promise<User>;
 
+/**
+ * `UserResult` represents the results of a user responding to a scopes request, i.e. a merchant user’s action taken when presented with a grant modal.
+ */
+type UserResult = 'granted-all' | 'declined-all';
+
 type Variant = 'small' | 'base' | 'large' | 'max';
 
+interface WebVitalsApi {
+    onReport?: (callback: WebVitalsCallback | null) => Promise<void>;
+}
+
+type WebVitalsCallback = (metrics: WebVitalsMetric) => void | Promise<void>;
+
+/**
+ * WebVitals API
+ */
+interface WebVitalsMetric {
+    id: string;
+    name: string;
+    value: number;
+}
+
 enum WeightUnit {
     Kilograms = "KILOGRAMS",
     Grams = "GRAMS",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/app-bridge-types",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Companion types library for the Shopify App Bridge script",
   "private": false,
   "publishConfig": {
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "cjyes": "^0.3.1",
-    "app-bridge-next": "0.0.1"
+    "app-bridge-next": "0.4.1"
   },
   "files": [
     "dist",