diff --git a/.changeset/wicked-singers-float.md b/.changeset/wicked-singers-float.md new file mode 100644 index 0000000000..dd6db908d2 --- /dev/null +++ b/.changeset/wicked-singers-float.md @@ -0,0 +1,6 @@ +--- +'@shopify/ui-extensions': patch +--- + +Admin: Make s-popover component available +Admin: Expose picker and resource picker APIs in the standard API for rendering extensions diff --git a/packages/ui-extensions/src/surfaces/admin/api.ts b/packages/ui-extensions/src/surfaces/admin/api.ts index 7ebd12ab0e..831c944f71 100644 --- a/packages/ui-extensions/src/surfaces/admin/api.ts +++ b/packages/ui-extensions/src/surfaces/admin/api.ts @@ -1,5 +1,6 @@ export type {I18n, I18nTranslate} from '../../api'; export type {StandardApi, Intents} from './api/standard/standard'; +export type {StandardRenderingExtensionApi} from './api/standard/standard-rendering'; export type {Navigation} from './api/block/block'; export type { CustomerSegmentTemplateApi, diff --git a/packages/ui-extensions/src/surfaces/admin/api/action/action.ts b/packages/ui-extensions/src/surfaces/admin/api/action/action.ts index 12fae510fc..a7270ebd73 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/action/action.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/action/action.ts @@ -1,11 +1,9 @@ -import type {StandardApi} from '../standard/standard'; +import type {StandardRenderingExtensionApi} from '../standard/standard-rendering'; import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets'; import type {Data} from '../shared'; -import type {ResourcePickerApi} from '../resource-picker/resource-picker'; -import type {PickerApi} from '../picker/picker'; export interface ActionExtensionApi - extends StandardApi { + extends StandardRenderingExtensionApi { /** * Closes the extension. Calling this method is equivalent to the merchant clicking the "x" in the corner of the overlay. */ @@ -15,14 +13,4 @@ export interface ActionExtensionApi * Information about the currently viewed or selected items. */ data: Data; - - /** - * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. - */ - resourcePicker: ResourcePickerApi; - - /** - * Renders a custom [Picker](picker) dialog allowing users to select values from a list. - */ - picker: PickerApi; } diff --git a/packages/ui-extensions/src/surfaces/admin/api/block/block.ts b/packages/ui-extensions/src/surfaces/admin/api/block/block.ts index d7737a8858..d946a2a4dd 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/block/block.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/block/block.ts @@ -1,8 +1,6 @@ -import type {StandardApi} from '../standard/standard'; +import type {StandardRenderingExtensionApi} from '../standard/standard-rendering'; import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets'; import type {Data} from '../shared'; -import type {ResourcePickerApi} from '../resource-picker/resource-picker'; -import type {PickerApi} from '../picker/picker'; export interface Navigation { /** @@ -14,7 +12,7 @@ export interface Navigation { } export interface BlockExtensionApi - extends StandardApi { + extends StandardRenderingExtensionApi { /** * Information about the currently viewed or selected items. */ @@ -25,14 +23,4 @@ export interface BlockExtensionApi * For example, you can navigate from an admin block on the product details page (`admin.product-details.block.render`) to an admin action on the product details page (`admin.product-details.action.render`). */ navigation: Navigation; - - /** - * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. - */ - resourcePicker: ResourcePickerApi; - - /** - * Renders a custom [Picker](picker) dialog allowing users to select values from a list. - */ - picker: PickerApi; } diff --git a/packages/ui-extensions/src/surfaces/admin/api/checkout-rules/validation-settings.ts b/packages/ui-extensions/src/surfaces/admin/api/checkout-rules/validation-settings.ts index 112c51c429..41cd42d8b4 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/checkout-rules/validation-settings.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/checkout-rules/validation-settings.ts @@ -1,4 +1,4 @@ -import type {StandardApi} from '../standard/standard'; +import type {StandardRenderingExtensionApi} from '../standard/standard-rendering'; import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets'; import {ApplyMetafieldChange} from './metafields'; @@ -6,7 +6,7 @@ import {ValidationData} from './launch-options'; export interface ValidationSettingsApi< ExtensionTarget extends AnyExtensionTarget, -> extends StandardApi { +> extends StandardRenderingExtensionApi { /** * Applies a change to the validation settings. */ diff --git a/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts b/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts index d3ef37e0f8..5156b95c5d 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts @@ -1,11 +1,11 @@ -import type {StandardApi} from '../standard/standard'; +import type {StandardRenderingExtensionApi} from '../standard/standard-rendering'; import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets'; import {ApplyMetafieldsChange} from './metafields'; import {Data} from './data'; export interface OrderRoutingRuleApi - extends StandardApi { + extends StandardRenderingExtensionApi { applyMetafieldsChange: ApplyMetafieldsChange; data: Data; } diff --git a/packages/ui-extensions/src/surfaces/admin/api/picker/picker.doc.ts b/packages/ui-extensions/src/surfaces/admin/api/picker/picker.doc.ts index 615078173e..56d05187fa 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/picker/picker.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/picker/picker.doc.ts @@ -10,8 +10,6 @@ const data: ReferenceEntityTemplateSchema = { isVisualComponent: true, category: 'API', thumbnail: 'picker.png', - requires: - 'an Admin [block](/docs/api/admin-extensions/unstable/extension-targets#block-locations), [action](/docs/api/admin-extensions/unstable/extension-targets#action-locations), or [print](/docs/api/admin-extensions/unstable/extension-targets#print-locations) extension.', defaultExample: { image: 'picker.png', codeblock: { diff --git a/packages/ui-extensions/src/surfaces/admin/api/print-action/print-action.ts b/packages/ui-extensions/src/surfaces/admin/api/print-action/print-action.ts index c3f393afc8..c6d376977c 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/print-action/print-action.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/print-action/print-action.ts @@ -1,24 +1,12 @@ -import type {StandardApi} from '../standard/standard'; +import {StandardRenderingExtensionApi} from '../standard/standard-rendering'; import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets'; import type {Data} from '../shared'; -import type {ResourcePickerApi} from '../resource-picker/resource-picker'; -import type {PickerApi} from '../picker/picker'; export interface PrintActionExtensionApi< ExtensionTarget extends AnyExtensionTarget, -> extends StandardApi { +> extends StandardRenderingExtensionApi { /** * Information about the currently viewed or selected items. */ data: Data; - - /** - * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. - */ - resourcePicker: ResourcePickerApi; - - /** - * Renders a custom [Picker](picker) dialog allowing users to select values from a list. - */ - picker: PickerApi; } diff --git a/packages/ui-extensions/src/surfaces/admin/api/resource-picker/resource-picker.doc.ts b/packages/ui-extensions/src/surfaces/admin/api/resource-picker/resource-picker.doc.ts index b139be0620..98e3cd9c93 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/resource-picker/resource-picker.doc.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/resource-picker/resource-picker.doc.ts @@ -11,8 +11,6 @@ const data: ReferenceEntityTemplateSchema = { isVisualComponent: true, category: 'API', thumbnail: 'resource-picker.png', - requires: - 'an Admin [block](/docs/api/admin-extensions/unstable/extension-targets#block-locations), [action](/docs/api/admin-extensions/unstable/extension-targets#action-locations), or [print](/docs/api/admin-extensions/unstable/extension-targets#print-locations) extension.', defaultExample: { image: 'resource-picker.png', codeblock: { diff --git a/packages/ui-extensions/src/surfaces/admin/api/standard/standard-rendering.ts b/packages/ui-extensions/src/surfaces/admin/api/standard/standard-rendering.ts new file mode 100644 index 0000000000..c39e903f1b --- /dev/null +++ b/packages/ui-extensions/src/surfaces/admin/api/standard/standard-rendering.ts @@ -0,0 +1,18 @@ +import {PickerApi} from '../picker/picker'; +import {ResourcePickerApi} from '../resource-picker/resource-picker'; +import {StandardApi} from './standard'; +import {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets'; + +export interface StandardRenderingExtensionApi< + ExtensionTarget extends AnyExtensionTarget, +> extends StandardApi { + /** + * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. + */ + resourcePicker: ResourcePickerApi; + + /** + * Renders a custom [Picker](picker) dialog allowing users to select values from a list. + */ + picker: PickerApi; +} diff --git a/packages/ui-extensions/src/surfaces/admin/api/standard/standard.ts b/packages/ui-extensions/src/surfaces/admin/api/standard/standard.ts index 97534598e4..9db12708cd 100644 --- a/packages/ui-extensions/src/surfaces/admin/api/standard/standard.ts +++ b/packages/ui-extensions/src/surfaces/admin/api/standard/standard.ts @@ -3,6 +3,8 @@ import {ApiVersion} from '../../../../shared'; import type {Storage} from './storage'; import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets'; import type {Intents} from '../intents/intents'; +import {ResourcePickerApi} from '../resource-picker/resource-picker'; +import {PickerApi} from '../picker/picker'; export type {Intents} from '../intents/intents'; @@ -63,4 +65,14 @@ export interface StandardApi { query: string, options?: {variables?: Variables; version?: Omit}, ) => Promise<{data?: Data; errors?: GraphQLError[]}>; + + /** + * Renders the [Resource Picker](resource-picker), allowing users to select a resource for the extension to use as part of its flow. + */ + resourcePicker: ResourcePickerApi; + + /** + * Renders a custom [Picker](picker) dialog allowing users to select values from a list. + */ + picker: PickerApi; } diff --git a/packages/ui-extensions/src/surfaces/admin/components/Popover/Popover.ab.doc.ts b/packages/ui-extensions/src/surfaces/admin/components/Popover/Popover.doc.ts similarity index 100% rename from packages/ui-extensions/src/surfaces/admin/components/Popover/Popover.ab.doc.ts rename to packages/ui-extensions/src/surfaces/admin/components/Popover/Popover.doc.ts diff --git a/packages/ui-extensions/src/surfaces/admin/components/StandardComponents.ts b/packages/ui-extensions/src/surfaces/admin/components/StandardComponents.ts index c20a67230e..7ea2721b70 100644 --- a/packages/ui-extensions/src/surfaces/admin/components/StandardComponents.ts +++ b/packages/ui-extensions/src/surfaces/admin/components/StandardComponents.ts @@ -33,6 +33,7 @@ export type StandardComponents = | 'OrderedList' | 'Paragraph' | 'PasswordField' + | 'Popover' | 'QueryContainer' | 'SearchField' | 'Section'