[Components content]: Default example descriptions for 2025-01

.changeset/silly-balloons-turn.md → .changeset/soft-clowns-turn.md

@@ -1,6 +1,6 @@
 ---
-'@shopify/ui-extensions': patch
 '@shopify/ui-extensions-react': patch
+'@shopify/ui-extensions': patch
 ---
 
-Add customer-account.order.page.render target
+update Screen.onReceiveParams description

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
 
       - id: typescript-cache
         name: Restore TypeScript cache
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: |
             packages/*/build/ts
@@ -31,7 +31,7 @@ jobs:
 
       - id: jest-cache
         name: Restore jest cache
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: .loom/cache/jest/
           key: ${{ runner.os }}-jest-v1-${{ github.sha }}
@@ -50,7 +50,7 @@ jobs:
 
       - id: eslint-cache
         name: Restore ESLint cache
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: .loom/cache/eslint
           key: ${{ runner.os }}-eslint-v1-${{ github.sha }}

packages/ui-extensions-react/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @shopify/ui-extensions-react
 
+## 2024.10.2
+
+### Patch Changes
+
+- [#2514](https://github.com/Shopify/ui-extensions/pull/2514) [`45f4980788fe94ba58ad9c44bbfb80294bb3ad20`](https://github.com/Shopify/ui-extensions/commit/45f4980788fe94ba58ad9c44bbfb80294bb3ad20) Thanks [@cpeddecord](https://github.com/cpeddecord)! - Releasing Chat into the wild, for real this time
+
+- Updated dependencies [[`45f4980788fe94ba58ad9c44bbfb80294bb3ad20`](https://github.com/Shopify/ui-extensions/commit/45f4980788fe94ba58ad9c44bbfb80294bb3ad20)]:
+  - @shopify/ui-extensions@2024.10.2
+
+## 2024.10.1
+
+### Patch Changes
+
+- [#2482](https://github.com/Shopify/ui-extensions/pull/2482) [`5e847761d9e0ce2d03fb2971e132810f9696c10f`](https://github.com/Shopify/ui-extensions/commit/5e847761d9e0ce2d03fb2971e132810f9696c10f) Thanks [@js-goupil](https://github.com/js-goupil)! - Added support for Host to unmount UI Extensions
+
+- Updated dependencies [[`5e847761d9e0ce2d03fb2971e132810f9696c10f`](https://github.com/Shopify/ui-extensions/commit/5e847761d9e0ce2d03fb2971e132810f9696c10f)]:
+  - @shopify/ui-extensions@2024.10.1
+
+## 2024.10.0
+
+### Minor Changes
+
+- [#2371](https://github.com/Shopify/ui-extensions/pull/2371) [`28edde440ceee584c71c5ac983252ca71a7f853a`](https://github.com/Shopify/ui-extensions/commit/28edde440ceee584c71c5ac983252ca71a7f853a) Thanks [@shopify-github-actions-access](https://github.com/apps/shopify-github-actions-access)! - Adds `type` property to `selectedPaymentOption`
+
+- [#2361](https://github.com/Shopify/ui-extensions/pull/2361) [`89438897001dce9058030e6ee1655747a66ec71a`](https://github.com/Shopify/ui-extensions/commit/89438897001dce9058030e6ee1655747a66ec71a) Thanks [@oliverigor](https://github.com/oliverigor)! - Add primary and secondary actions to Modal component
+
+- [#2297](https://github.com/Shopify/ui-extensions/pull/2297) [`7ab538090e8bcef052bfc782b31639efe89ff262`](https://github.com/Shopify/ui-extensions/commit/7ab538090e8bcef052bfc782b31639efe89ff262) Thanks [@shopify-github-actions-access](https://github.com/apps/shopify-github-actions-access)! - update generate-doc version, add attributes to Icon
+
+- [#2220](https://github.com/Shopify/ui-extensions/pull/2220) [`9e619fca6ea4f816148c90158b46bc1db5bfbad7`](https://github.com/Shopify/ui-extensions/commit/9e619fca6ea4f816148c90158b46bc1db5bfbad7) Thanks [@LucasLacerdaUX](https://github.com/LucasLacerdaUX)! - Add QRCode component
+
+### Patch Changes
+
+- [#2284](https://github.com/Shopify/ui-extensions/pull/2284) [`f84592931962537d345dfd68bf2a2f2396373740`](https://github.com/Shopify/ui-extensions/commit/f84592931962537d345dfd68bf2a2f2396373740) Thanks [@brianshen1990](https://github.com/brianshen1990)! - expose Switch component to customer account unstable surface
+
+- [#2356](https://github.com/Shopify/ui-extensions/pull/2356) [`a2d458be51a708aeac6a1879554051f98371f908`](https://github.com/Shopify/ui-extensions/commit/a2d458be51a708aeac6a1879554051f98371f908) Thanks [@brianshen1990](https://github.com/brianshen1990)! - add full page navigation api to order full page extension target
+
+- [#2347](https://github.com/Shopify/ui-extensions/pull/2347) [`dd8a861caba591c1087e8349e8a9bbfdc2681cb8`](https://github.com/Shopify/ui-extensions/commit/dd8a861caba591c1087e8349e8a9bbfdc2681cb8) Thanks [@brianshen1990](https://github.com/brianshen1990)! - Add customer-account.order.page.render target
+
+- [#2369](https://github.com/Shopify/ui-extensions/pull/2369) [`7ef1d9cdd37c42277e240eb660e08de54967461c`](https://github.com/Shopify/ui-extensions/commit/7ef1d9cdd37c42277e240eb660e08de54967461c) Thanks [@brianshen1990](https://github.com/brianshen1990)! - update error message for useNavigationCurrentEntry api
+
+- Updated dependencies [[`21234eea51b50dfc53d3fc4962512728b4a19446`](https://github.com/Shopify/ui-extensions/commit/21234eea51b50dfc53d3fc4962512728b4a19446), [`28edde440ceee584c71c5ac983252ca71a7f853a`](https://github.com/Shopify/ui-extensions/commit/28edde440ceee584c71c5ac983252ca71a7f853a), [`89438897001dce9058030e6ee1655747a66ec71a`](https://github.com/Shopify/ui-extensions/commit/89438897001dce9058030e6ee1655747a66ec71a), [`f84592931962537d345dfd68bf2a2f2396373740`](https://github.com/Shopify/ui-extensions/commit/f84592931962537d345dfd68bf2a2f2396373740), [`9347443b76210c2f9f3ce45bb488c38ec08efb6f`](https://github.com/Shopify/ui-extensions/commit/9347443b76210c2f9f3ce45bb488c38ec08efb6f), [`fd4ecf2aef0414e790a4a78ae6a9fa013acbafda`](https://github.com/Shopify/ui-extensions/commit/fd4ecf2aef0414e790a4a78ae6a9fa013acbafda), [`118654e61e393c2885198ab5dafddb4cf4d62669`](https://github.com/Shopify/ui-extensions/commit/118654e61e393c2885198ab5dafddb4cf4d62669), [`4dec3851bf53f6cf289ca8c265cd13f8c123ab06`](https://github.com/Shopify/ui-extensions/commit/4dec3851bf53f6cf289ca8c265cd13f8c123ab06), [`9fe9d56d190fee5ee444ed980a5ef60106dfda12`](https://github.com/Shopify/ui-extensions/commit/9fe9d56d190fee5ee444ed980a5ef60106dfda12), [`7ab538090e8bcef052bfc782b31639efe89ff262`](https://github.com/Shopify/ui-extensions/commit/7ab538090e8bcef052bfc782b31639efe89ff262), [`a2d458be51a708aeac6a1879554051f98371f908`](https://github.com/Shopify/ui-extensions/commit/a2d458be51a708aeac6a1879554051f98371f908), [`8bca1a1710431083b7e98966ec76f3fe17720d5c`](https://github.com/Shopify/ui-extensions/commit/8bca1a1710431083b7e98966ec76f3fe17720d5c), [`a8de80b0e252ebd0c529bfe88d02d2e35e2a0461`](https://github.com/Shopify/ui-extensions/commit/a8de80b0e252ebd0c529bfe88d02d2e35e2a0461), [`dd8a861caba591c1087e8349e8a9bbfdc2681cb8`](https://github.com/Shopify/ui-extensions/commit/dd8a861caba591c1087e8349e8a9bbfdc2681cb8), [`f81712b643430dd1cbdce54b3edf0c80bc0dafe5`](https://github.com/Shopify/ui-extensions/commit/f81712b643430dd1cbdce54b3edf0c80bc0dafe5), [`7ef1d9cdd37c42277e240eb660e08de54967461c`](https://github.com/Shopify/ui-extensions/commit/7ef1d9cdd37c42277e240eb660e08de54967461c), [`37620b9d47f38586c843a9c11a6de2e0461bc0dd`](https://github.com/Shopify/ui-extensions/commit/37620b9d47f38586c843a9c11a6de2e0461bc0dd), [`9e619fca6ea4f816148c90158b46bc1db5bfbad7`](https://github.com/Shopify/ui-extensions/commit/9e619fca6ea4f816148c90158b46bc1db5bfbad7), [`9f7ee640e434bb175b90248c29bb194f321e871a`](https://github.com/Shopify/ui-extensions/commit/9f7ee640e434bb175b90248c29bb194f321e871a), [`d6ac8d4e4180eef5242719bfaffe998441be1aa9`](https://github.com/Shopify/ui-extensions/commit/d6ac8d4e4180eef5242719bfaffe998441be1aa9)]:
+  - @shopify/ui-extensions@2024.10.0
+
 ## 2024.4.0
 
 ### Minor Changes

packages/ui-extensions-react/README.md

@@ -6,7 +6,7 @@ This package contains the public type definitions and utilities needed to create
 
 Currently, this package only contains the extension APIs for the [`checkout` surface](./src/surfaces/checkout), but other Shopify surfaces will be added here soon.
 
-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.
+All extensions, regardless of where they appear in Shopify, make use of 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.
 
 A checkout extension using React would be written as follows:
 

packages/ui-extensions-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/ui-extensions-react",
-  "version": "0.0.0-unstable",
+  "version": "2024.10.2",
   "description": "React bindings for @shopify/ui-extensions",
   "publishConfig": {
     "access": "public",
@@ -66,7 +66,7 @@
     "@types/react": ">=18.2.67"
   },
   "peerDependencies": {
-    "@shopify/ui-extensions": "0.0.0-unstable",
+    "@shopify/ui-extensions": "2024.10.2",
     "react": ">=18.0.0"
   },
   "peerDependenciesMeta": {
@@ -80,7 +80,7 @@
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
     "@quilted/react-testing": "^0.5.31",
-    "@shopify/ui-extensions": "0.0.0-unstable",
+    "@shopify/ui-extensions": "2024.10.2",
     "react": "^18.0.0",
     "react-reconciler": "0.29.0",
     "react-test-renderer": "^18.2.0"

packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/adminaction-form.example.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {reactExtension, useApi, AdminAction, Button, TextField, Select, BlockStack} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  const {data, close} = useApi('admin.product-details.action.render');
+  const productId = data.selected[0]?.id;
+
+  return (
+    <AdminAction
+      title="Assign warehouse location"
+      primaryAction={
+        <Button
+          onPress={async () => {
+            await fetch('/api/products/assign-warehouse', {
+              method: 'POST',
+              headers: {'Content-Type': 'application/json'},
+              body: JSON.stringify({productId}),
+            });
+            close();
+          }}
+        >
+          Assign to warehouse
+        </Button>
+      }
+      secondaryAction={
+        <Button onPress={() => close()}>Cancel</Button>
+      }
+    >
+      <BlockStack gap>
+        <TextField label="Warehouse SKU" name="warehouseSku" required />
+        <Select
+          label="Target warehouse"
+          name="warehouse"
+          options={[
+            {label: 'East Coast — New York', value: 'nyc'},
+            {label: 'West Coast — Los Angeles', value: 'lax'},
+            {label: 'Central — Chicago', value: 'chi'},
+          ]}
+        />
+      </BlockStack>
+    </AdminAction>
+  );
+}
+
+export default reactExtension(
+  'admin.product-details.action.render',
+  () => <App />,
+);

packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/adminaction-loading.example.tsx

@@ -0,0 +1,48 @@
+import React, {useState, useEffect} from 'react';
+import {reactExtension, useApi, AdminAction, Button, Text, ProgressIndicator, BlockStack} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  const {data, close, query} = useApi('admin.product-details.action.render');
+  const productId = data.selected[0]?.id;
+  const [product, setProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    query(
+      `query Product($id: ID!) {
+        product(id: $id) { title status totalInventory }
+      }`,
+      {variables: {id: productId}},
+    ).then((result) => {
+      setProduct(result?.data?.product);
+      setLoading(false);
+    });
+  }, [productId, query]);
+
+  return (
+    <AdminAction
+      title="Product details"
+      primaryAction={<Button onPress={() => close()}>Done</Button>}
+    >
+      <BlockStack gap>
+        {loading ? (
+          <ProgressIndicator
+            size="small-200"
+            accessibilityLabel="Loading product details"
+          />
+        ) : product ? (
+          <>
+            <Text fontWeight="bold">{product.title}</Text>
+            <Text>Status: {product.status}</Text>
+            <Text>Inventory: {product.totalInventory} units</Text>
+          </>
+        ) : null}
+      </BlockStack>
+    </AdminAction>
+  );
+}
+
+export default reactExtension(
+  'admin.product-details.action.render',
+  () => <App />,
+);

packages/ui-extensions-react/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.tsx

@@ -1,30 +1,41 @@
-import React from 'react';
-import {
-  reactExtension,
-  AdminAction,
-  Button,
-  Text,
-} from '@shopify/ui-extensions-react/admin';
+import {reactExtension, useApi, AdminAction, Button, Text, BlockStack} from '@shopify/ui-extensions-react/admin';
 
 function App() {
+  const {data, close} = useApi('admin.product-details.action.render');
+  const productId = data.selected[0]?.id;
+
   return (
     <AdminAction
-      title="My App Action"
+      title="Sync to warehouse"
       primaryAction={
-        <Button onPress={() => {}}>Action</Button>
+        <Button
+          onPress={async () => {
+            await fetch('/api/products/sync', {
+              method: 'POST',
+              headers: {'Content-Type': 'application/json'},
+              body: JSON.stringify({productId}),
+            });
+            close();
+          }}
+        >
+          Sync product
+        </Button>
       }
       secondaryAction={
-        <Button onPress={() => {}}>
-          Secondary
-        </Button>
+        <Button onPress={() => close()}>Cancel</Button>
       }
     >
-      <Text>Modal content</Text>
+      <BlockStack gap>
+        <Text>
+          Sync product {productId} to your warehouse management system. This
+          will update inventory counts, pricing, and metadata.
+        </Text>
+      </BlockStack>
     </AdminAction>
   );
 }
 
 export default reactExtension(
-  'Playground',
+  'admin.product-details.action.render',
   () => <App />,
 );