@shopify/ui-extensions - npm Package Compare versions

Comparing version 0.0.0-unstable-20230719205723 to 0.0.0-unstable-20230719212936

build/ts/surfaces/admin/components/Divider/Divider.d.ts

@@ -6,4 +6,5 @@ export interface DividerProps {
      * @defaultValue 'inline'
+     * @defaultValue 'inline'
      */
-    direction?: 'block' | 'inline';
+    direction?: 'inline' | 'block';
 }
@@ -10,0 +11,0 @@ export declare const Divider: "Divider" & {

build/ts/surfaces/admin/components/Image/Image.d.ts

 import type { AccessibilityRole } from '../shared';
-export type ImageProps = (ImageAccessibilityLabelProp | ImageAltProp) & (ImageSourceProp | ImageSrcProp) & {
+export type ImageProps = (ImageAccessibilityLabelProp | ImageAltProp) & (ImageSourceProp | ImageSrcProp) & ImageBaseProps;
+interface ImageBaseProps {
     /**
@@ -36,3 +37,3 @@ * Sets the semantic meaning of the component’s content. When set,
     onError?(): void;
-};
+}
 interface ImageAccessibilityLabelProp {
@@ -39,0 +40,0 @@ /**

build/ts/surfaces/admin/extension-targets.d.ts

@@ -7,15 +7,57 @@ import type { RenderExtension } from '../../extension';
 export interface ExtensionTargets {
+    /**
+     * @private
+     */
     Playground: RenderExtension<StandardApi<'Playground'>, AnyComponent>;
+    /**
+     * @private
+     */
     'admin.customers.segmentation-templates.render': RenderExtension<CustomerSegmentationTemplateApi<'admin.customers.segmentation-templates.render'>, CustomerSegmentationTemplateComponent>;
+    /**
+     * Renders an Admin Block in the product details page.
+     */
     'admin.product-details.block.render': RenderExtension<StandardApi<'admin.product-details.block.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Block in the order details page.
+     */
     'admin.order-details.block.render': RenderExtension<StandardApi<'admin.order-details.block.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Block in the customer details page.
+     */
     'admin.customer-details.block.render': RenderExtension<StandardApi<'admin.customer-details.block.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Action in the product details page. Open this extension from the "More Actions" menu.
+     */
     'admin.product-details.action.render': RenderExtension<ActionExtensionApi<'admin.product-details.action.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Action in the order details page. Open this extension from the "More Actions" menu.
+     */
     'admin.order-details.action.render': RenderExtension<ActionExtensionApi<'admin.order-details.action.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Action in the customer details page. Open this extension from the "More Actions" menu.
+     */
     'admin.customer-details.action.render': RenderExtension<ActionExtensionApi<'admin.customer-details.action.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Action in the product index page. Open this extension from the "More Actions" menu.
+     */
     'admin.product-index.action.render': RenderExtension<ActionExtensionApi<'admin.product-index.action.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Action in the order index page. Open this extension from the "More Actions" menu.
+     */
     'admin.order-index.action.render': RenderExtension<ActionExtensionApi<'admin.order-index.action.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Action in the customer index page. Open this extension from the "More Actions" menu.
+     */
     'admin.customer-index.action.render': RenderExtension<ActionExtensionApi<'admin.customer-index.action.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Action in the product index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
+     */
     'admin.product-index.selection-action.render': RenderExtension<ActionExtensionApi<'admin.product-index.selection-action.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Action in the order index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
+     */
     'admin.order-index.selection-action.render': RenderExtension<ActionExtensionApi<'admin.order-index.selection-action.render'>, AnyComponent>;
+    /**
+     * Renders an Admin Action in the customer index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
+     */
     'admin.customer-index.selection-action.render': RenderExtension<ActionExtensionApi<'admin.customer-index.selection-action.render'>, AnyComponent>;
@@ -22,0 +64,0 @@ }

package.json

 {
   "name": "@shopify/ui-extensions",
-  "version": "0.0.0-unstable-20230719205723",
+  "version": "0.0.0-unstable-20230719212936",
   "scripts": {
@@ -5,0 +5,0 @@ "docs:admin": "sh ./docs/surfaces/admin/build-docs.sh \"admin\"",

src/surfaces/admin/api/action/action.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Action Extension API',
+  featureFlag: 'admin_extensibility',
   description: 'This API is available to all action extension types.',
@@ -7,0 +8,0 @@ isVisualComponent: false,

src/surfaces/admin/api/extension-targets/extension-targets.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Extension Targets',
+  featureFlag: 'admin_extensibility',
   description:
@@ -12,5 +13,5 @@ 'This is a list of all the available extension targets for Admin App Extensions.',
     {
-      title: 'ExtensionPoints',
+      title: 'ExtensionTargets',
       description: '',
-      type: 'ExtensionPoints',
+      type: 'ExtensionTargets',
     },
@@ -17,0 +18,0 @@ ],

src/surfaces/admin/api/standard/standard.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Standard API',
+  featureFlag: 'admin_extensibility',
   description: 'This API is available to all extension types.',
@@ -7,0 +8,0 @@ isVisualComponent: false,

src/surfaces/admin/components/AdminAction/AdminAction.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'AdminAction',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'AdminAction is a component used by Admin Action extensions to configure a primary and secondary action and title.',

src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'AdminBlock',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.',

src/surfaces/admin/components/BlockStack/BlockStack.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'BlockStack',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ "This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.",

src/surfaces/admin/components/Box/Box.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Box',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.',

src/surfaces/admin/components/Button/Button.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Button',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'Use this component when you want to provide users the ability to perform specific actions, like saving data.',

src/surfaces/admin/components/Checkbox/Checkbox.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Checkbox',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.',

src/surfaces/admin/components/Divider/Divider.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Divider',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'Use this to create a clear visual separation between different elements in your user interface.',

src/surfaces/admin/components/Divider/Divider.ts

@@ -8,4 +8,5 @@ import {createRemoteComponent} from '@remote-ui/core';
    * @defaultValue 'inline'
+   * @defaultValue 'inline'
    */
-  direction?: 'block' | 'inline';
+  direction?: 'inline' | 'block';
 }
@@ -12,0 +13,0 @@

src/surfaces/admin/components/EmailField/EmailField.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'EmailField',
+  featureFlag: 'admin_extensibility',
   description: 'Use this when you need users to provide their email addresses.',
@@ -7,0 +8,0 @@ requires: '',

src/surfaces/admin/components/Form/Form.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Form',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also handles form submission and reset actions.',

src/surfaces/admin/components/Heading/Heading.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Heading',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ "Use this to display a title. It's similar to the h1-h6 tags in HTML",

src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'HeadingGroup',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'This groups headings together, much like the hgroup element in HTML.',

src/surfaces/admin/components/Icon/Icon.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Icon',
+  featureFlag: 'admin_extensibility',
   description:
@@ -44,3 +45,18 @@ 'This component renders an icon from a predefined list. Choose the one that suits your needs.',
   },
-
+  subSections: [
+    {
+      type: 'Generic',
+      title: 'Available Icons',
+      anchorLink: 'availableIcons',
+      sectionContent:
+        'The available Icons are a 1:1 map of what Icons are available in Polaris. You can find the full list of Icons in the [Polaris Icons documentation](https://polaris.shopify.com/icons).',
+      sectionCard: [
+        {
+          type: 'information',
+          name: 'Polaris Icons',
+          url: 'https://polaris.shopify.com/icons',
+        },
+      ],
+    },
+  ],
   related: [
@@ -52,2 +68,7 @@ {
     },
+    {
+      type: 'component',
+      name: 'Image',
+      url: '/docs/api/admin-extensions/components/media/image',
+    },
   ],
@@ -54,0 +75,0 @@ };

src/surfaces/admin/components/Image/examples/basic-image.example.ts

@@ -5,4 +5,3 @@ import {extend, Image} from '@shopify/ui-extensions/admin';
   const image = root.createComponent(Image, {
-    source:
-      'https://shopify.dev/assets/api/ui-extensions/admin/components/image-example-code.png',
+    source: 'https://shopify.dev/assets/icons/64/pickaxe-1.png',
   });
@@ -9,0 +8,0 @@

src/surfaces/admin/components/Image/Image.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Image',
+  featureFlag: 'admin_extensibility',
   description: 'Use this when you want to display an image.',
@@ -7,0 +8,0 @@ requires: '',

src/surfaces/admin/components/Image/Image.ts

@@ -5,42 +5,45 @@ import {createRemoteComponent} from '@remote-ui/core';
 export type ImageProps = (ImageAccessibilityLabelProp | ImageAltProp) &
-  (ImageSourceProp | ImageSrcProp) & {
-    /**
-     * Sets the semantic meaning of the component’s content. When set,
-     * the role will be used by assistive technologies to help users
-     * navigate the page.
-     */
-    accessibilityRole?: Extract<AccessibilityRole, 'decorative'>;
+  (ImageSourceProp | ImageSrcProp) &
+  ImageBaseProps;
 
-    /**
-     * Defines a unique identifier which must be unique in the whole document.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-     */
-    id?: string;
+interface ImageBaseProps {
+  /**
+   * Sets the semantic meaning of the component’s content. When set,
+   * the role will be used by assistive technologies to help users
+   * navigate the page.
+   */
+  accessibilityRole?: Extract<AccessibilityRole, 'decorative'>;
 
-    /**
-     * Determines the loading behavior of the image:
-     * - `eager`: Immediately loads the image, irrespective of its position within the visible viewport.
-     * - `lazy`: Delays loading the image until it approaches a specified distance from the viewport.
-     *
-     * @defaultValue `eager`
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
-     */
-    loading?: 'eager' | 'lazy';
+  /**
+   * Defines a unique identifier which must be unique in the whole document.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id?: string;
 
-    /**
-     * Invoked when load completes successfully.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
-     */
-    onLoad?(): void;
+  /**
+   * Determines the loading behavior of the image:
+   * - `eager`: Immediately loads the image, irrespective of its position within the visible viewport.
+   * - `lazy`: Delays loading the image until it approaches a specified distance from the viewport.
+   *
+   * @defaultValue `eager`
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
+   */
+  loading?: 'eager' | 'lazy';
 
-    /**
-     * Invoked on load error.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
-     */
-    onError?(): void;
-  };
+  /**
+   * Invoked when load completes successfully.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+   */
+  onLoad?(): void;
 
+  /**
+   * Invoked on load error.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+   */
+  onError?(): void;
+}
+
 interface ImageAccessibilityLabelProp {
@@ -47,0 +50,0 @@ /**

src/surfaces/admin/components/InlineStack/InlineStack.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'InlineStack',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ "Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.",

src/surfaces/admin/components/Link/Link.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Link',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'This is an interactive component that directs users to a specified URL. It even supports custom protocols.',

src/surfaces/admin/components/NumberField/NumberField.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'NumberField',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'This component is specifically designed for numeric data entry.',

src/surfaces/admin/components/PasswordField/PasswordField.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'PasswordField',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'This component is for secure input, it obfuscates any text that users enter.',

src/surfaces/admin/components/Pressable/Pressable.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Pressable',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.',

src/surfaces/admin/components/Select/Select.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Select',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'Use this when you want to give users a predefined list of options to choose from.',

src/surfaces/admin/components/Text/Text.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'Text',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'This component renders text. Remember, you can also add your own styling.',

src/surfaces/admin/components/TextArea/TextArea.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'TextArea',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.',

src/surfaces/admin/components/TextField/TextField.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'TextField',
+  featureFlag: 'admin_extensibility',
   description:
@@ -7,0 +8,0 @@ 'This is your go-to component when you need to let users input textual information.',

src/surfaces/admin/components/URLField/URLField.doc.ts

@@ -5,2 +5,3 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
   name: 'URLField',
+  featureFlag: 'admin_extensibility',
   description: 'This is the right component for letting users enter a URL.',
@@ -7,0 +8,0 @@ requires: '',

src/surfaces/admin/extension-targets.ts

@@ -16,3 +16,10 @@ import type {RenderExtension} from '../../extension';
 export interface ExtensionTargets {
+  /**
+   * @private
+   */
   Playground: RenderExtension<StandardApi<'Playground'>, AnyComponent>;
+
+  /**
+   * @private
+   */
   'admin.customers.segmentation-templates.render': RenderExtension<
@@ -24,2 +31,5 @@ CustomerSegmentationTemplateApi<'admin.customers.segmentation-templates.render'>,
   // Blocks
+  /**
+   * Renders an Admin Block in the product details page.
+   */
   'admin.product-details.block.render': RenderExtension<
@@ -29,2 +39,6 @@ StandardApi<'admin.product-details.block.render'>,
   >;
+
+  /**
+   * Renders an Admin Block in the order details page.
+   */
   'admin.order-details.block.render': RenderExtension<
@@ -34,2 +48,6 @@ StandardApi<'admin.order-details.block.render'>,
   >;
+
+  /**
+   * Renders an Admin Block in the customer details page.
+   */
   'admin.customer-details.block.render': RenderExtension<
@@ -41,2 +59,5 @@ StandardApi<'admin.customer-details.block.render'>,
   // Actions
+  /**
+   * Renders an Admin Action in the product details page. Open this extension from the "More Actions" menu.
+   */
   'admin.product-details.action.render': RenderExtension<
@@ -46,2 +67,6 @@ ActionExtensionApi<'admin.product-details.action.render'>,
   >;
+
+  /**
+   * Renders an Admin Action in the order details page. Open this extension from the "More Actions" menu.
+   */
   'admin.order-details.action.render': RenderExtension<
@@ -51,2 +76,6 @@ ActionExtensionApi<'admin.order-details.action.render'>,
   >;
+
+  /**
+   * Renders an Admin Action in the customer details page. Open this extension from the "More Actions" menu.
+   */
   'admin.customer-details.action.render': RenderExtension<
@@ -56,2 +85,6 @@ ActionExtensionApi<'admin.customer-details.action.render'>,
   >;
+
+  /**
+   * Renders an Admin Action in the product index page. Open this extension from the "More Actions" menu.
+   */
   'admin.product-index.action.render': RenderExtension<
@@ -61,2 +94,6 @@ ActionExtensionApi<'admin.product-index.action.render'>,
   >;
+
+  /**
+   * Renders an Admin Action in the order index page. Open this extension from the "More Actions" menu.
+   */
   'admin.order-index.action.render': RenderExtension<
@@ -66,2 +103,6 @@ ActionExtensionApi<'admin.order-index.action.render'>,
   >;
+
+  /**
+   * Renders an Admin Action in the customer index page. Open this extension from the "More Actions" menu.
+   */
   'admin.customer-index.action.render': RenderExtension<
@@ -73,2 +114,6 @@ ActionExtensionApi<'admin.customer-index.action.render'>,
   // Bulk Actions
+
+  /**
+   * Renders an Admin Action in the product index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
+   */
   'admin.product-index.selection-action.render': RenderExtension<
@@ -78,2 +123,6 @@ ActionExtensionApi<'admin.product-index.selection-action.render'>,
   >;
+
+  /**
+   * Renders an Admin Action in the order index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
+   */
   'admin.order-index.selection-action.render': RenderExtension<
@@ -83,2 +132,6 @@ ActionExtensionApi<'admin.order-index.selection-action.render'>,
   >;
+
+  /**
+   * Renders an Admin Action in the customer index page when multiple resources are selected. Open this extension from the "More Actions"  menu of the resource list. The resource ids are available to this extension at runtime.
+   */
   'admin.customer-index.selection-action.render': RenderExtension<
@@ -85,0 +138,0 @@ ActionExtensionApi<'admin.customer-index.selection-action.render'>,

No alert changes

Improved metrics

Total package byte prevSize

1602375

increased by0.33%

Lines of code

23462

increased by0.58%

No dependency changes