@shopify/ui-extensions 2026.4.2 → 2026.4.4

package/src/docs/shared/components/ScrollBox.ts

@@ -1,12 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Scroll box',
-  description:
-    'Provides a scrollable container for long content that exceeds the available space. Use to display lists, order summaries, or other lengthy content while maintaining a constrained layout.',
-  category: 'Web components',
-  subCategory: 'Layout and structure',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/SearchField.ts

@@ -1,12 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Search field',
-  description:
-    'The search field component captures search terms for filtering and search functionality. Use it to enable inline search within specific sections or lists, like filtering products or searching customers. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).',
-  category: 'Web components',
-  subCategory: 'Forms',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Section.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Section',
-  description:
-    'The section component groups related content into clearly-defined thematic areas with consistent styling and structure. Use section to organize page content into logical blocks, each with its own heading and visual container.' +
-    '\n\nSections automatically adapt their styling based on nesting depth and adjust heading levels to maintain meaningful, accessible page hierarchies. For simple visual separation without headings, use [divider](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/divider).',
-  category: 'Web components',
-  subCategory: 'Layout and structure',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Select.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Select',
-  description:
-    'The select component allows users to choose one option from a dropdown menu. Use select when presenting four or more choices to keep interfaces uncluttered and scannable, or when space is limited.' +
-    '\n\nSelect components support option grouping, placeholder text, help text, and validation states to create clear selection interfaces. For more visual selection layouts with radio buttons or checkboxes, use [choice list](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/choice-list).',
-  category: 'Web components',
-  subCategory: 'Forms',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Sheet.ts

@@ -1,14 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Sheet',
-  description: `
-The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/latest/configuration#collect-buyer-consent) to be rendered.
-
-The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content.`,
-  category: 'Web components',
-  subCategory: 'Overlays',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/SkeletonParagraph.ts

@@ -1,12 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Skeleton paragraph',
-  description:
-    'Displays a placeholder representation of text content while it loads. Use to improve perceived performance by showing users where text will appear.',
-  category: 'Web components',
-  subCategory: 'Typography and content',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Spinner.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Spinner',
-  description:
-    'The spinner component displays an animated indicator showing users that content or actions are loading. Use spinner to communicate ongoing processes like fetching data, processing requests, or waiting for operations to complete.' +
-    '\n\nSpinners support multiple sizes and should be used for page or section loading states. For button loading states, use the `loading` property on the [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) component instead.',
-  category: 'Web components',
-  subCategory: 'Feedback and status indicators',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Stack.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Stack',
-  description:
-    'The stack component organizes elements horizontally or vertically along the block or inline axis. Use stack to structure layouts, group related components, control spacing between elements, or create flexible arrangements that adapt to content.' +
-    '\n\nStacks support gap spacing, alignment, wrapping, and distribution properties to create consistent, responsive layouts without custom CSS. For complex multi-column layouts with precise grid positioning, use [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid).',
-  category: 'Web components',
-  subCategory: 'Layout and structure',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Summary.ts

@@ -1,12 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Summary',
-  description:
-    'Provides a clickable label for collapsible Details content. Use to create clear, accessible disclosure controls that show or hide additional information.',
-  category: 'Web components',
-  subCategory: 'Typography and content',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Switch.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Switch',
-  description:
-    'The switch component provides a clear way for users to toggle options or settings on and off. Use switch for binary controls that take effect immediately, like enabling features, activating settings, or controlling visibility.' +
-    "\n\nSwitches provide instant visual feedback and are ideal for settings that don't require a save action to apply changes. For selections that require explicit submission, use [checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox) instead.",
-  category: 'Web components',
-  subCategory: 'Forms',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Table.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Table',
-  description:
-    'The table component displays data clearly in rows and columns, helping users view, analyze, and compare structured information. Use table to present datasets, product lists, order details, or any tabular content that benefits from organized rows and columns.' +
-    '\n\nTables automatically adapt to screen size, rendering as lists on small screens and tables on larger ones for optimal readability across devices.',
-  category: 'Web components',
-  subCategory: 'Layout and structure',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/TableBody.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Table body',
-  description:
-    'The table body component represents the main content area of a table, containing the data rows. Use table body as a child of table to structure your table data, with each table row within the body representing a single record or entry.' +
-    '\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.',
-  category: 'Web components',
-  subCategory: 'Structure',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/TableCell.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Table cell',
-  description:
-    'The table cell component represents a single data cell within a table row. Use table cell as a child of table row to display individual data values, with each cell corresponding to a column in the table.' +
-    '\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.',
-  category: 'Web components',
-  subCategory: 'Structure',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/TableHeader.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Table header',
-  description:
-    'The table header component represents a single column header within a table header row. Use table header as a child of table header row to define column headings and optionally enable column sorting.' +
-    '\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.',
-  category: 'Web components',
-  subCategory: 'Structure',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/TableHeaderRow.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Table header row',
-  description:
-    'The table header row component represents the header row of a table, containing column headings. Use table header row as the first child of table (before table body) to define the table structure and provide column labels.' +
-    '\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.',
-  category: 'Web components',
-  subCategory: 'Structure',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/TableRow.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Table row',
-  description:
-    'The table row component represents a single row of data within a table body. Use table row as a child of table body to structure individual records or entries in the table.' +
-    '\n\nTable row must contain table cell components, with each cell representing a data value for the corresponding column. The number of cells should match the number of headers in the table.',
-  category: 'Web components',
-  subCategory: 'Structure',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Text.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Text',
-  description:
-    'The text component displays inline text with specific visual styles or tones. Use text to emphasize or differentiate words or phrases within paragraphs or other block-level components, applying weight, color, or semantic styling.' +
-    '\n\nText supports multiple visual variants, alignment options, and line clamping for flexible inline typography control. For block-level text content, use [paragraph](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/paragraph).',
-  category: 'Web components',
-  subCategory: 'Typography and content',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/TextArea.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Text area',
-  description:
-    'The text area component captures multi-line text input. Use it to collect descriptions, notes, comments, or other extended text content.' +
-    '\n\nThe component supports configurable height, character limits, and validation. For single-line text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).',
-  category: 'Web components',
-  subCategory: 'Forms',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/TextField.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Text field',
-  description:
-    'The text field component captures single-line text input. Use it to collect short, free-form information like names, titles, or identifiers.' +
-    '\n\nThe component supports various input configurations including placeholders, character limits, and validation. For multi-line text entry, use [text area](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-area). For specialized input types, use [email field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/email-field), [URL field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/url-field), [password field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/password-field), or [search field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/search-field).',
-  category: 'Web components',
-  subCategory: 'Forms',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Thumbnail.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Thumbnail',
-  description:
-    'The thumbnail component displays small preview images representing content, products, or media items. Use thumbnail to provide visual identification in lists, tables, or cards where space is constrained and quick recognition is important.' +
-    '\n\nThumbnails support multiple sizes, alt text for accessibility, and fallback states for missing images. For full-size images, use [image](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/image). For user profile images, use [avatar](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/avatar).',
-  category: 'Web components',
-  subCategory: 'Media and visuals',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Time.ts

@@ -1,12 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Time',
-  description:
-    'Represents a specific point or duration in time. Use to display dates, times, or durations clearly and consistently. May include a machine-readable `datetime` attribute for improved accessibility and functionality.',
-  category: 'Web components',
-  subCategory: 'Typography and content',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/Tooltip.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Tooltip',
-  description:
-    'The tooltip component displays helpful information in a small overlay when users hover over or focus on an element. Use tooltip to provide additional context, explain functionality, or clarify terms without cluttering the interface with permanent text.' +
-    '\n\nTooltips support keyboard accessibility, positioning options, and activation on both hover and focus for inclusive interaction patterns.',
-  category: 'Web components',
-  subCategory: 'Overlays',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/URLField.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'URL field',
-  description:
-    'The URL field component collects URLs from users with built-in formatting and validation. Use URL field for website addresses, link destinations, or any URL input to provide URL-specific keyboard layouts and automatic validation.' +
-    '\n\nURL fields support protocol prefixing, validation, and help text to guide users toward entering properly formatted web addresses. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).',
-  category: 'Web components',
-  subCategory: 'Forms',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/UnorderedList.ts

@@ -1,13 +0,0 @@
-import type {SharedReferenceEntityTemplateSchema} from '../docs-type';
-
-const data: SharedReferenceEntityTemplateSchema = {
-  name: 'Unordered list',
-  description:
-    "The unordered list component displays a bulleted list of related items where sequence isn't critical. Use unordered list to present collections of features, options, requirements, or any group of items where order doesn't affect meaning." +
-    '\n\nUnordered lists automatically add bullet points and support nested lists for hierarchical content organization. For sequential items where order is important, use [ordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/ordered-list).',
-  category: 'Web components',
-  subCategory: 'Typography and content',
-  related: [],
-};
-
-export default data;

package/src/docs/shared/components/index.ts

@@ -1,52 +0,0 @@
-export {default as Abbreviation} from './Abbreviation';
-export {default as Badge} from './Badge';
-export {default as Banner} from './Banner';
-export {default as Box} from './Box';
-export {default as Button} from './Button';
-export {default as Checkbox} from './Checkbox';
-export {default as Chip} from './Chip';
-export {default as ChoiceList} from './ChoiceList';
-export {default as Clickable} from './Clickable';
-export {default as ClickableChip} from './ClickableChip';
-export {default as ClipboardItem} from './ClipboardItem';
-export {default as ConsentCheckbox} from './ConsentCheckbox';
-export {default as ConsentPhoneField} from './ConsentPhoneField';
-export {default as DateField} from './DateField';
-export {default as DatePicker} from './DatePicker';
-export {default as Details} from './Details';
-export {default as Divider} from './Divider';
-export {default as DropZone} from './DropZone';
-export {default as EmailField} from './EmailField';
-export {default as Form} from './Form';
-export {default as Grid} from './Grid';
-export {default as Heading} from './Heading';
-export {default as Icon} from './Icon';
-export {default as Image} from './Image';
-export {default as Link} from './Link';
-export {default as ListItem} from './ListItem';
-export {default as MoneyField} from './MoneyField';
-export {default as NumberField} from './NumberField';
-export {default as OrderedList} from './OrderedList';
-export {default as Paragraph} from './Paragraph';
-export {default as PasswordField} from './PasswordField';
-export {default as PaymentIcon} from './PaymentIcon';
-export {default as Popover} from './Popover';
-export {default as PressButton} from './PressButton';
-export {default as Progress} from './Progress';
-export {default as QRCode} from './QRCode';
-export {default as ScrollBox} from './ScrollBox';
-export {default as SearchField} from './SearchField';
-export {default as Section} from './Section';
-export {default as Select} from './Select';
-export {default as SkeletonParagraph} from './SkeletonParagraph';
-export {default as Spinner} from './Spinner';
-export {default as Stack} from './Stack';
-export {default as Summary} from './Summary';
-export {default as Switch} from './Switch';
-export {default as Table} from './Table';
-export {default as Text} from './Text';
-export {default as TextArea} from './TextArea';
-export {default as Time} from './Time';
-export {default as Tooltip} from './Tooltip';
-export {default as UnorderedList} from './UnorderedList';
-export {default as URLField} from './URLField';

package/src/docs/shared/docs-type.ts

@@ -1,7 +0,0 @@
-import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-export interface SharedReferenceEntityTemplateSchema
-  extends Pick<
-    ReferenceEntityTemplateSchema,
-    'name' | 'description' | 'category' | 'subCategory' | 'related'
-  > {}

package/src/surfaces/admin/components/Icon/icon-data.json

@@ -1,9 +0,0 @@
-{
-  "iconPreviewData": {
-    "jsxFile": "./templates/icon-renderer/icon-preview.jsx",
-    "icons": "__AUTO_GENERATED_ICONS__",
-    "bodyContent": "<div id=\"app\"></div>",
-    "customStyles": "padding: 0px; margin: 0px; margin-top: 8px; max-width: 584px; overflow: hidden; background: #FFF, border: 1px solid #ccc; border-radius: 8px;",
-    "hashes": "__AUTO_GENERATED_HASHES__"
-  }
-}

package/src/surfaces/admin/components/patterns/index.ab.doc.ts

@@ -1,80 +0,0 @@
-import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
-
-const data: ReferenceEntityTemplateSchema = {
-  name: 'Index',
-  overviewPreviewDescription:
-    'Manage objects efficiently with dynamic table actions.',
-  description: `The index layout lets merchants view and manage all their objects at once in a table format. They can filter, sort and do quick actions on their objects. To prevent tables from becoming visually cluttered, reveal actions only when the row is hovered over or selected
-
-  | Used to | Examples |
-  | --- | --- |
-  | View all objects at once | Products, orders, customers, discounts |
-  | Perform bulk actions | Delete products, pause/activate campaigns |
-
-  ![Preview of the index pattern](/assets/templated-apis-screenshots/admin/patterns/index-example.png)
-
-  This pattern uses \`Badge\`, \`Box\`, \`Button\`, \`Clickable\`, \`Grid\`, \`Heading\`, \`Image\`, \`Link\`, \`Paragraph\`, \`Section\`, \`Stack\`, and \`Table\` components.
-
-  ---
-
-  ## Design guidelines
-  Design your index page so users can organize and take action on resource objects.
-
-  ### Navigation
-
-  * Users must be able to return to the previous page without using the browser button. To achieve this, your app can provide breadcrumbs or a Back button on the page.
-  * Offer users clear and predictable action labels.
-
-  ---
-
-  ### Layout
-
-  * Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms.
-  * For resource index pages, use a full-width page. This is helpful when users are dealing with lists of data that have many columns.
-
-  ---
-
-  <style>
-          div[class*="CodeBlock-module-CodeBlock_"] {
-        max-height: calc(100vh - 400px) !important;
-    }
-    div[class*="Tabs-module-TabsContent_"] {
-      overflow: auto !important;
-    }
-    div[class*="Screenshot-module-Screenshot_"] {
-      display: none !important;
-    }
-  </style>`,
-  isVisualComponent: true,
-  category: 'Patterns',
-  subCategory: 'Templates',
-  thumbnail: '/assets/templated-apis-screenshots/admin/patterns/index.png',
-  defaultExample: {
-    codeblock: {
-      title: 'Index',
-      tabs: [
-        {
-          title: 'html',
-          code: './examples/index.html',
-          language: 'html',
-        },
-        {
-          title: 'jsx',
-          code: './examples/index.jsx',
-          language: 'preview-jsx',
-        },
-      ],
-    },
-  },
-
-  related: [
-    {
-      name: 'Built for Shopify',
-      subtitle: 'Requirements',
-      url: '/docs/apps/launch/built-for-shopify/requirements',
-      type: 'component',
-    },
-  ],
-};
-
-export default data;

package/src/surfaces/admin/docs-types.ts

@@ -1,45 +0,0 @@
-import type {CSSProperties} from 'react';
-import {
-  ReferenceEntityTemplateSchema,
-  CodeTabType,
-  ExampleType,
-  ExampleSectionSchema,
-  ExampleGroupType,
-} from '@shopify/generate-docs';
-
-// Don't allow all CSS properties to be used in the customStyles property
-type AllowedCSSProperties = Pick<CSSProperties, 'minHeight' | 'minBlockSize'>;
-
-type AdminCodeTabType = CodeTabType & {
-  layout?: string;
-  customStyles?: AllowedCSSProperties;
-};
-
-interface CodeLinkType {
-  name: string;
-  url: string;
-  icon: string;
-}
-
-interface AdminCodeblockType {
-  title: string;
-  tabs: AdminCodeTabType[];
-  links?: CodeLinkType[];
-}
-
-type AdminExampleType = Omit<ExampleType, 'codeblock'> & {
-  codeblock: AdminCodeblockType | AdminCodeblockType[];
-};
-
-type AdminExampleGroupType = Omit<ExampleGroupType, 'examples'> & {
-  examples: AdminExampleType[];
-};
-
-export interface AdminReferenceEntityTemplateSchema
-  extends Omit<ReferenceEntityTemplateSchema, 'defaultExample' | 'examples'> {
-  defaultExample?: AdminExampleType;
-  examples?: Omit<ExampleSectionSchema, 'exampleGroups' | 'examples'> & {
-    exampleGroups?: AdminExampleGroupType[] | null;
-    examples?: AdminExampleType[] | null;
-  };
-}