Add generic picker API

[MitchLillie]

Background

Resolves https://github.com/Shopify/app-ui/issues/1575

Related https://github.com/Shopify/shopify-dev/pull/49753, https://github.com/Shopify/extensibility/pull/178

Adds the imperative picker() API to UI Extensions to open the generic picker.

The API is used like this:

const {picker} = useApi();

const pickerInstance = await picker({
  heading: 'Select an item',
  headers: [{title: 'Main heading'}],
  items: [
    {
      id: '1',
      heading: 'Item 1',
    },
    {
      id: '2',
      heading: 'Item 2',
    },
  ],
});

const selected = await picker.selected;

This matches the API provided to App Bridge in https://github.com/Shopify/extensibility/pull/178.

🎩

1. Setup a local extension following these instructions or by running shopify app generate extension
2. Update your extension's dependencies to the latest snapshots on this PR:

"@shopify/ui-extensions": "0.0.0-snapshot-20241112220206",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20241112220206"

3. In your extension code, add thw following example:

const {picker} = useApi();

const pickerInstance = await picker({
  heading: 'Select an item',
  headers: [{title: 'Main heading'}],
  items: [
    {
      id: '1',
      heading: 'Item 1',
    },
    {
      id: '2',
      heading: 'Item 2',
    },
  ],
});

const selected = await picker.selected;

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[MitchLillie]

/snapit

[shopify-github-actions-access]

🫰✨ Thanks @MitchLillie! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/ui-extensions": "0.0.0-snapshot-20240926213211",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20240926213211"

[MitchLillie]

/snapit

[shopify-github-actions-access]

🫰✨ Thanks @MitchLillie! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/ui-extensions": "0.0.0-snapshot-20241021162735",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20241021162735"

[MitchLillie]

/snapit

[shopify-github-actions-access]

🫰✨ Thanks @MitchLillie! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/ui-extensions": "0.0.0-snapshot-20241022151631",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20241022151631"

[charlesdobson]

/snapit

[shopify-github-actions-access]

🫰✨ Thanks @charlesdobson! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/data-extensions": "0.0.0-snapshot-20241112220206",
"@shopify/ui-extensions": "0.0.0-snapshot-20241112220206",
"@shopify/ui-extensions-react": "0.0.0-snapshot-20241112220206"

[github-actions]

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset directory. If the changes are user-facing and should cause a version bump, run yarn changeset to track your changes and include them in the next release CHANGELOG. If you are making simple updates to repo configuration, examples, or documentation, you do not need to add a changeset.