@shopify/ui-extensions 2025.10.13 → 2025.10.14

package/src/surfaces/admin/api/intents/examples/create-product.js

@@ -1,9 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('create:shopify/Product');
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Product created:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/create-variant.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('create:shopify/ProductVariant', {
-  data: {productId: 'gid://shopify/Product/123456789'},
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Product variant created:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-article.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/Article', {
-  value: 'gid://shopify/Article/123456789',
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Article updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-catalog.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/Catalog', {
-  value: 'gid://shopify/Catalog/123456789',
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Catalog updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-collection.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/Collection', {
-  value: 'gid://shopify/Collection/987654321',
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Collection updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-customer.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/Customer', {
-  value: 'gid://shopify/Customer/456789123',
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Customer updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-discount.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/Discount', {
-  value: 'gid://shopify/Discount/123456789',
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Discount updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-market.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/Market', {
-  value: 'gid://shopify/Market/123456789',
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Market updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-menu.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/Menu', {
-  value: 'gid://shopify/Menu/123456789',
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Menu updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-metafield-definition.js

@@ -1,12 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/MetafieldDefinition', {
-  value: 'gid://shopify/MetafieldDefinition/123456789',
-  data: {ownerType: 'product'},
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Metafield definition updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-metaobject-definition.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/MetaobjectDefinition', {
-  data: {type: 'my_metaobject_definition_type'},
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Metaobject definition updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-metaobject.js

@@ -1,12 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/Metaobject', {
-  value: 'gid://shopify/Metaobject/123456789',
-  data: {type: 'shopify--color-pattern'},
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Metaobject updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-page.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/Page', {
-  value: 'gid://shopify/Page/123456789',
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Page updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-product.js

@@ -1,11 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/Product', {
-  value: 'gid://shopify/Product/123456789',
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Product updated:', response.data);
-}

package/src/surfaces/admin/api/intents/examples/edit-variant.js

@@ -1,12 +0,0 @@
-const {intents} = useApi(TARGET);
-
-const activity = await intents.invoke('edit:shopify/ProductVariant', {
-  value: 'gid://shopify/ProductVariant/123456789',
-  data: {productId: 'gid://shopify/Product/123456789'},
-});
-
-const response = await activity.complete;
-
-if (response.code === 'ok') {
-  console.log('Product variant updated:', response.data);
-}

package/src/surfaces/admin/api/picker/examples/direct-api.js

@@ -1,73 +0,0 @@
-const r = await fetch('shopify:admin/api/graphql.json', {
-  method: 'POST',
-  body: JSON.stringify({
-    query: `
-      query GetOrders($first: Int!) {
-        orders(first: $first) {
-          edges {
-            node {
-              id
-              name
-              customer {
-                displayName
-              }
-              originalTotalPriceSet {
-                shopMoney {
-                  amount
-                }
-              }
-              displayFulfillmentStatus
-              displayFinancialStatus
-              unpaid
-            }
-          }
-        }
-      }
-    `,
-    variables: {first: 10},
-  }),
-});
-const {data} = await r.json();
-const orderData = data.orders.edges;
-
-const selected = await picker({
-  heading: 'Select orders',
-  multiple: true,
-  headers: [
-    {title: 'Order'},
-    {title: 'Customer'},
-    {title: 'Total', type: 'number'},
-  ],
-  items: orderData.map((order) => {
-    const {
-      id,
-      name,
-      customer,
-      originalTotalPriceSet: {shopMoney},
-      displayFulfillmentStatus,
-      displayFinancialStatus,
-    } = order.node;
-
-    return {
-      id,
-      heading: name,
-      data: [customer.displayName, `$${shopMoney.amount}`],
-      badges: [
-        {
-          content: displayFulfillmentStatus,
-          tone: displayFulfillmentStatus === 'FULFILLED' ? '' : 'attention',
-          progress:
-            displayFulfillmentStatus === 'FULFILLED'
-              ? 'complete'
-              : 'incomplete',
-        },
-        {
-          content: displayFinancialStatus,
-          tone: displayFinancialStatus === 'PENDING' ? 'warning' : '',
-          progress:
-            displayFinancialStatus === 'PENDING' ? 'incomplete' : 'complete',
-        },
-      ],
-    };
-  }),
-});

package/src/surfaces/admin/api/picker/examples/disabled.js

@@ -1,16 +0,0 @@
-const pickerInstance = await picker({
-  heading: 'Disabled items',
-  items: [
-    {
-      id: '1',
-      heading: 'Item 1',
-      disabled: true,
-    },
-    {
-      id: '2',
-      heading: 'Item 2',
-    },
-  ],
-});
-
-const selected = await pickerInstance.selected;

package/src/surfaces/admin/api/picker/examples/minimal.js

@@ -1,16 +0,0 @@
-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 pickerInstance.selected;

package/src/surfaces/admin/api/picker/examples/multiple-limit.js

@@ -1,21 +0,0 @@
-const pickerInstance = await picker({
-  heading: 'Select items (up to 2)',
-  multiple: 2,
-  headers: [{title: 'Main heading'}],
-  items: [
-    {
-      id: '1',
-      heading: 'Item 1',
-    },
-    {
-      id: '2',
-      heading: 'Item 2',
-    },
-    {
-      id: '3',
-      heading: 'Item 3',
-    },
-  ],
-});
-
-const selected = await pickerInstance.selected;

package/src/surfaces/admin/api/picker/examples/multiple-true.js

@@ -1,21 +0,0 @@
-const pickerInstance = await picker({
-  heading: 'Select items',
-  multiple: true,
-  headers: [{title: 'Main heading'}],
-  items: [
-    {
-      id: '1',
-      heading: 'Item 1',
-    },
-    {
-      id: '2',
-      heading: 'Item 2',
-    },
-    {
-      id: '3',
-      heading: 'Item 3',
-    },
-  ],
-});
-
-const selected = await pickerInstance.selected;

package/src/surfaces/admin/api/picker/examples/preselected.js

@@ -1,16 +0,0 @@
-const pickerInstance = await picker({
-  heading: 'Preselected items',
-  items: [
-    {
-      id: '1',
-      heading: 'Item 1',
-      selected: true,
-    },
-    {
-      id: '2',
-      heading: 'Item 2',
-    },
-  ],
-});
-
-const selected = await pickerInstance.selected;

package/src/surfaces/admin/api/picker/examples/template-picker.js

@@ -1,37 +0,0 @@
-const {picker} = useApi(TARGET);
-
-const pickerInstance = await picker({
-  heading: 'Select a template',
-  multiple: false,
-  headers: [
-    {title: 'Templates'},
-    {title: 'Created by'},
-    {title: 'Times used', type: 'number'},
-  ],
-  items: [
-    {
-      id: '1',
-      heading: 'Full width, 1 column',
-      data: ['Karine Ruby', '0'],
-      badges: [{content: 'Draft', tone: 'info'}, {content: 'Marketing'}],
-    },
-    {
-      id: '2',
-      heading: 'Large graphic, 3 column',
-      data: ['Russell Winfield', '5'],
-      badges: [
-        {content: 'Published', tone: 'success'},
-        {content: 'New feature'},
-      ],
-      selected: true,
-    },
-    {
-      id: '3',
-      heading: 'Promo header, 2 column',
-      data: ['Russel Winfield', '10'],
-      badges: [{content: 'Published', tone: 'success'}],
-    },
-  ],
-});
-
-const selected = await pickerInstance.selected;

package/src/surfaces/admin/api/resource-picker/examples/action.js

@@ -1,4 +0,0 @@
-const selected = await resourcePicker({
-  type: 'product',
-  action: 'select',
-});

package/src/surfaces/admin/api/resource-picker/examples/collection-picker.js

@@ -1 +0,0 @@
-const selected = await resourcePicker({type: 'collection'});

package/src/surfaces/admin/api/resource-picker/examples/filter-query.js

@@ -1,6 +0,0 @@
-const selected = await resourcePicker({
-  type: 'product',
-  filter: {
-    query: 'Sweater',
-  },
-});

package/src/surfaces/admin/api/resource-picker/examples/filters.js

@@ -1,9 +0,0 @@
-const selected = await resourcePicker({
-  type: 'product',
-  filter: {
-    hidden: true,
-    variants: false,
-    draft: false,
-    archived: false,
-  },
-});

package/src/surfaces/admin/api/resource-picker/examples/multiple-limited.js

@@ -1,4 +0,0 @@
-const selected = await resourcePicker({
-  type: 'product',
-  multiple: 5,
-});

package/src/surfaces/admin/api/resource-picker/examples/multiple-unlimited.js

@@ -1,4 +0,0 @@
-const selected = await resourcePicker({
-  type: 'product',
-  multiple: true,
-});

package/src/surfaces/admin/api/resource-picker/examples/product-picker.js

@@ -1,3 +0,0 @@
-const {resourcePicker} = useApi(TARGET);
-
-const selected = await resourcePicker({type: 'product'});

package/src/surfaces/admin/api/resource-picker/examples/product-variant-picker.js

@@ -1 +0,0 @@
-const selected = await resourcePicker({type: 'variant'});

package/src/surfaces/admin/api/resource-picker/examples/query.js

@@ -1,4 +0,0 @@
-const selected = await resourcePicker({
-  type: 'product',
-  query: 'Sweater',
-});

package/src/surfaces/admin/api/resource-picker/examples/selection-ids.js

@@ -1,16 +0,0 @@
-const selected = await resourcePicker({
-  type: 'product',
-  selectionIds: [
-    {
-      id: 'gid://shopify/Product/12345',
-      variants: [
-        {
-          id: 'gid://shopify/ProductVariant/1',
-        },
-      ],
-    },
-    {
-      id: 'gid://shopify/Product/67890',
-    },
-  ],
-});

package/src/surfaces/admin/api/resource-picker/examples/selection.js

@@ -1,7 +0,0 @@
-const selected = await resourcePicker({type: 'product'});
-
-if (selected) {
-  console.log(selected);
-} else {
-  console.log('Picker was cancelled by the user');
-}

package/src/surfaces/admin/components/AdminAction/examples/default.tsx

@@ -1,15 +0,0 @@
-<s-admin-action title="My App Action">
-  Modal content
-  <s-button
-    slot="primary-action"
-    onClick={() => console.log('pressed primary action')}
-  >
-    Primary
-  </s-button>
-  <s-button
-    slot="secondary-actions"
-    onClick={() => console.log('pressed secondary action')}
-  >
-    Secondary
-  </s-button>
-</s-admin-action>;

package/src/surfaces/admin/components/AdminBlock/examples/default.tsx

@@ -1 +0,0 @@
-<s-admin-block title="My App Block">5 items active</s-admin-block>;

package/src/surfaces/admin/components/AdminPrintAction/examples/default.tsx

@@ -1,9 +0,0 @@
-import '@shopify/ui-extensions/preact';
-import {render} from 'preact';
-
-export default async () => {
-  render(
-    <s-admin-print-action src="https://example.com"></s-admin-print-action>,
-    document.body,
-  );
-}

package/src/surfaces/admin/components/Avatar/examples/basic-usage.jsx

@@ -1 +0,0 @@
-<s-avatar initials="SC" alt="Sarah Chen" />

package/src/surfaces/admin/components/Avatar/examples/color-consistency-demo.jsx

@@ -1,7 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-avatar initials="AB" alt="Apparel boutique" size="base" />
-  <s-avatar initials="CD" alt="Coffee direct" size="base" />
-  <s-avatar initials="EF" alt="Electronics franchise" size="base" />
-  <s-avatar initials="AB" alt="Art books store" size="base" />
-  {/* Note: Both AB avatars will have the same color */}
-</s-stack>

package/src/surfaces/admin/components/Avatar/examples/default-avatar-no-props.jsx

@@ -1 +0,0 @@
-<s-avatar alt="Customer" />

package/src/surfaces/admin/components/Avatar/examples/default.jsx

@@ -1 +0,0 @@
-<s-avatar alt="John Doe" initials="JD" />

package/src/surfaces/admin/components/Avatar/examples/error-handling-example.jsx

@@ -1,5 +0,0 @@
-<s-avatar
-  src="/invalid-customer-photo.jpg"
-  initials="CS"
-  alt="Customer support"
- />

package/src/surfaces/admin/components/Avatar/examples/fulfillment-partner-avatars.jsx

@@ -1,14 +0,0 @@
-<s-stack gap="small">
-  <s-stack direction="inline" gap="small">
-    <s-avatar initials="3P" alt="3PL partner" size="small" />
-    <s-text>Third-party logistics</s-text>
-  </s-stack>
-  <s-stack direction="inline" gap="small">
-    <s-avatar initials="DS" alt="Dropship supplier" size="small" />
-    <s-text>Dropship supplier</s-text>
-  </s-stack>
-  <s-stack direction="inline" gap="small">
-    <s-avatar initials="WH" alt="Warehouse hub" size="small" />
-    <s-text>Warehouse hub</s-text>
-  </s-stack>
-</s-stack>

package/src/surfaces/admin/components/Avatar/examples/in-customer-list-context.jsx

@@ -1,24 +0,0 @@
-<s-stack gap="base">
-  <s-stack direction="inline" gap="small">
-    <s-avatar
-      src="/customers/merchant-alice.jpg"
-      initials="AJ"
-      alt="Alice's jewelry store"
-      size="small"
-     />
-    <s-text>Alice's jewelry store</s-text>
-  </s-stack>
-  <s-stack direction="inline" gap="small">
-    <s-avatar initials="BP" alt="Bob's pet supplies" size="small" />
-    <s-text>Bob's pet supplies</s-text>
-  </s-stack>
-  <s-stack direction="inline" gap="small">
-    <s-avatar
-      src="/customers/charlie-cafe.jpg"
-      initials="CC"
-      alt="Charlie's coffee corner"
-      size="small"
-     />
-    <s-text>Charlie's coffee corner</s-text>
-  </s-stack>
-</s-stack>

package/src/surfaces/admin/components/Avatar/examples/long-initials-handling.jsx

@@ -1,5 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-avatar initials="TC" alt="Tech customer" size="base" />
-  <s-avatar initials="VIP" alt="VIP customer store" size="base" />
-  <s-avatar initials="SHOP" alt="Shopify partner store" size="base" />
-</s-stack>

package/src/surfaces/admin/components/Avatar/examples/size-variations.jsx

@@ -1,7 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-avatar initials="SC" alt="Store customer" size="small-200" />
-  <s-avatar initials="MR" alt="Merchant representative" size="small" />
-  <s-avatar initials="SM" alt="Store manager" size="base" />
-  <s-avatar initials="SF" alt="Staff member" size="large" />
-  <s-avatar initials="SO" alt="Store owner" size="large-200" />
-</s-stack>

package/src/surfaces/admin/components/Avatar/examples/staff-member-profiles.jsx

@@ -1,10 +0,0 @@
-<s-stack direction="inline" gap="large">
-  <s-avatar
-    src="/staff/manager-profile.jpg"
-    initials="SM"
-    alt="Store manager"
-    size="large"
-   />
-  <s-avatar initials="CS" alt="Customer service rep" size="base" />
-  <s-avatar initials="FT" alt="Fulfillment team lead" size="small" />
-</s-stack>

package/src/surfaces/admin/components/Avatar/examples/with-image-source-and-fallback.jsx

@@ -1,6 +0,0 @@
-<s-avatar
-  src="/customers/profile-123.jpg"
-  initials="MR"
-  alt="Maria Rodriguez"
-  size="base"
- />

package/src/surfaces/admin/components/Avatar/examples/with-section-component.jsx

@@ -1,17 +0,0 @@
-<s-section>
-  <s-stack gap="base">
-    <s-stack direction="inline" gap="small">
-      <s-avatar
-        src="/merchants/premium-store.jpg"
-        initials="PS"
-        alt="Premium store"
-        size="base"
-       />
-      <s-stack gap="small-400">
-        <s-heading>Premium store</s-heading>
-        <s-text color="subdued">Shopify Plus merchant</s-text>
-      </s-stack>
-    </s-stack>
-    <s-text>Monthly revenue: $45,000</s-text>
-  </s-stack>
-</s-section>

package/src/surfaces/admin/components/Badge/examples/default.jsx

@@ -1,8 +0,0 @@
-<>
-  <s-badge>Fulfilled</s-badge>
-  <s-badge tone="info">Draft</s-badge>
-  <s-badge tone="success">Active</s-badge>
-  <s-badge tone="caution">Open</s-badge>
-  <s-badge tone="warning">On hold</s-badge>
-  <s-badge tone="critical">Action required</s-badge>
-</>

package/src/surfaces/admin/components/Badge/examples/different-sizes-for-emphasis.jsx

@@ -1,4 +0,0 @@
-<s-stack direction="inline" gap="base">
-  <s-badge size="base">New</s-badge>
-  <s-badge size="large">Attention needed</s-badge>
-</s-stack>