@shopify/ui-extensions 2025.10.13 → 2025.10.15

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.';