@shopify/ui-extensions 2025.10.14 → 2025.10.15

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

@@ -1,13 +0,0 @@
-import {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;
-  };
-}

package/src/surfaces/checkout/helper.docs.ts

@@ -1,166 +0,0 @@
-import type {CodeTabType, ExampleType} from '@shopify/generate-docs';
-
-const examplePath = '../../../../../docs/surfaces/checkout/reference/examples';
-
-type NonEmptyArray<T> = [T, ...T[]];
-type ExtensionExampleLanguage = 'js' | 'jsx';
-type ExtensionCodeTabConfig = Record<
-  ExtensionExampleLanguage,
-  {
-    title: string;
-    fileExtension: 'ts' | 'tsx';
-  }
->;
-const codeExampleTabConfig: ExtensionCodeTabConfig = {
-  js: {
-    title: 'JavaScript',
-    fileExtension: 'ts',
-  },
-  jsx: {
-    title: 'React',
-    fileExtension: 'tsx',
-  },
-};
-
-/**
- * Returns all examples available, specified with a key for reference.
- */
-export function getExamples(
-  languages: NonEmptyArray<ExtensionExampleLanguage>,
-): Record<string, ExampleType> {
-  if (!languages || languages.length === 0) {
-    throw new HelperDocsError(
-      'You must define at least one extension code language context you wish to retrieve the example(s) for.',
-    );
-  }
-  /**
-   * Provides the code tab for the requested languages in "JavaScript" and "React".
-   */
-  function getExtensionCodeTabs(name: string): CodeTabType[] {
-    return languages.map((language) => {
-      return {
-        code: `${examplePath}/${name}.example.${codeExampleTabConfig[language].fileExtension}`,
-        language,
-        title: codeExampleTabConfig[language].title,
-      };
-    });
-  }
-
-  // Add new examples here that can be shared across multiples pages.
-  return {
-    'ui-components/clipboarditem-qrcode': {
-      description:
-        'When displaying a QR code, include an alternative way for the user to get the content',
-      image: 'clipboard-qrcode.png',
-      codeblock: {
-        title: "Copying content of a QR code to the user's clipboard",
-        tabs: getExtensionCodeTabs('ui-components/clipboarditem-qrcode'),
-      },
-    },
-    'ui-components/choicelist-survey': {
-      description: `The base variant’s flexibility allows for the creation of Likert scales using the ChoiceList component. By utilizing layout components, you can easily structure rows and columns for this purpose.`,
-      image: 'choicelist-survey.png',
-      codeblock: {
-        title: 'Custom survey using the base variant',
-        tabs: getExtensionCodeTabs('ui-components/choicelist-survey'),
-      },
-    },
-    'ui-components/choicelist-details': {
-      description: `The ChoiceList’s group variant, combined with the details property, allows for the conditional display of information when needed.`,
-      image: 'choicelist-details.png',
-      codeblock: {
-        title: 'Collecting additional information',
-        tabs: getExtensionCodeTabs('ui-components/choicelist-details'),
-      },
-    },
-    'ui-components/choicelist-time-picking': {
-      description: `The ChoiceList component is great for presenting a concise list of options, particularly when showcasing time ranges due to its ample horizontal space. However, if there’s more than 5 choices, use the [Select](/docs/api/checkout-ui-extensions/components/forms/select) component instead.`,
-      image: 'choicelist-time-picking.png',
-      codeblock: {
-        title: 'Displaying a short list of time choices',
-        tabs: getExtensionCodeTabs('ui-components/choicelist-time-picking'),
-      },
-    },
-    'ui-components/sheet-consent': {
-      description:
-        'The Sheet component can be used to display privacy consent preferences in the Checkout interface. Sheet can be defaulted to open for this use case.\n\n This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/latest/apis/customer-privacy) to be rendered.',
-      codeblock: {
-        title: 'Using Sheet to display consent preferences',
-        tabs: getExtensionCodeTabs('ui-components/sheet-consent'),
-      },
-    },
-    'ui-components/sheet-description-preferences': {
-      description:
-        'In order to save space in the action slot, secondary actions can be placed in the content area.',
-      image: 'sheet-description-preferences.png',
-      codeblock: {
-        title: 'Preferences button is in the description as a link',
-        tabs: getExtensionCodeTabs(
-          'ui-components/sheet-description-preferences',
-        ),
-      },
-    },
-    'ui-components/sheet-layout-content': {
-      description:
-        'The description can take in layout components to allow for different types of content to be structured in specific ways.',
-      image: 'sheet-layout-content.png',
-      codeblock: {
-        title: 'Using layout component in the description ',
-        tabs: getExtensionCodeTabs('ui-components/sheet-layout-content'),
-      },
-    },
-    'ui-components/sheet-icon-button-preferences': {
-      description:
-        'An icon button can be used in the secondary actions area to allow for more space for the primary actions.',
-      image: 'sheet-icon-button-preferences.png',
-      codeblock: {
-        title: 'Icon button used for preferences',
-        tabs: getExtensionCodeTabs(
-          'ui-components/sheet-icon-button-preferences',
-        ),
-      },
-    },
-    'ui-components/qrcode-image': {
-      description:
-        'The QRCode component can display an image in the center. Adding a logo can increase brand trust and set expectations for the action when scanning.',
-      image: 'qrcode-image.png',
-      codeblock: {
-        title: 'With logo',
-        tabs: getExtensionCodeTabs('ui-components/qrcode-image'),
-      },
-    },
-    'ui-components/qrcode-fill-size': {
-      description:
-        'In most cases the default size should work well. If you need a different size, use `fill` to make it grow to the size of its parent container.',
-      image: 'qrcode-fill-size.png',
-      codeblock: {
-        title: 'Fill size',
-        tabs: getExtensionCodeTabs('ui-components/qrcode-fill-size'),
-      },
-    },
-  };
-}
-
-/**
- * Returns a specific `Example` by name, as specified in `getExamples()`.
- * Specify whether you want to include both `js` and `jsx`examples or just one.
- */
-export function getExample(
-  name: string,
-  languages: NonEmptyArray<ExtensionExampleLanguage> = ['js'],
-): ExampleType {
-  const example = getExamples(languages)[name];
-  if (!example) {
-    throw new HelperDocsError(
-      `Could not find a matching example with the name "${name}". Does it exist within the file "docs/reference/helper.docs.ts" in getExamples()?`,
-    );
-  }
-  return example;
-}
-
-class HelperDocsError extends Error {
-  name = 'HelperDocsError';
-}
-
-export const REQUIRES_PROTECTED_CUSTOMER_DATA =
-  'access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) for some properties.';