Add AdminPrintAction component

packages/ui-extensions-react/src/surfaces/admin/components.ts

@@ -1,5 +1,7 @@
 export {AdminAction} from './components/AdminAction/AdminAction';
 export type {AdminActionProps} from './components/AdminAction/AdminAction';
+export {AdminPrintAction} from './components/AdminPrintAction/AdminPrintAction';
+export type {AdminPrintActionProps} from './components/AdminPrintAction/AdminPrintAction';
 export {AdminBlock} from './components/AdminBlock/AdminBlock';
 export type {AdminBlockProps} from './components/AdminBlock/AdminBlock';
 export {Badge} from './components/Badge/Badge';

packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts

@@ -0,0 +1,12 @@
+import {AdminPrintAction as BaseAdminPrintAction} from '@shopify/ui-extensions/admin';
+import {
+  createRemoteReactComponent,
+  ReactPropsFromRemoteComponentType,
+} from '@remote-ui/react';
+
+export const AdminPrintAction =
+  createRemoteReactComponent(BaseAdminPrintAction);
+
+export type AdminPrintActionProps = ReactPropsFromRemoteComponentType<
+  typeof BaseAdminPrintAction
+>;

packages/ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  reactExtension,
+  AdminPrintAction,
+} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <AdminPrintAction src="https://example.com">
+      Modal content
+    </AdminPrintAction>
+  );
+}
+
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);

packages/ui-extensions/src/surfaces/admin/components.ts

@@ -1,5 +1,7 @@
 export {AdminAction} from './components/AdminAction/AdminAction';
 export type {AdminActionProps} from './components/AdminAction/AdminAction';
+export {AdminPrintAction} from './components/AdminPrintAction/AdminPrintAction';
+export type {AdminPrintActionProps} from './components/AdminPrintAction/AdminPrintAction';
 export {AdminBlock} from './components/AdminBlock/AdminBlock';
 export type {AdminBlockProps} from './components/AdminBlock/AdminBlock';
 export {Badge} from './components/Badge/Badge';

packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.doc.ts

@@ -0,0 +1,52 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'AdminPrintAction',
+  description:
+    'AdminPrintAction is a component used by Admin print action extensions to configure a src. Admin print action extensions require the use of this component.',
+  requires: '',
+  thumbnail: 'AdminPrintAction-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'AdminPrintActionProps',
+      description: '',
+      type: 'AdminPrintActionProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Other',
+  defaultExample: {
+    image: 'AdminPrintAction-default.png',
+    codeblock: {
+      title: 'Set the source URL of the print action extension.',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/AdminPrintAction/examples/basic-AdminPrintAction.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-AdminPrintAction.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  related: [
+    {
+      type: 'component',
+      name: 'AdminAction',
+      url: '/docs/api/admin-extensions/components/other/adminaction',
+    },
+    {
+      type: 'component',
+      name: 'AdminBlock',
+      url: '/docs/api/admin-extensions/components/other/adminblock',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ts

@@ -0,0 +1,17 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface AdminPrintActionProps {
+  /**
+   * Sets the src URL of the preview and the document to print.
+   * If not provided, the preview will show an empty state and the print button will be disabled.
+   */
+  src?: string;
+}
+
+/**
+ * AdminPrintAction is a component used by Admin Print Action extensions to configure a src document to preview and print.
+ */
+export const AdminPrintAction = createRemoteComponent<
+  'AdminPrintAction',
+  AdminPrintActionProps
+>('AdminPrintAction');

packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.ts

@@ -0,0 +1,10 @@
+import {extension, AdminPrintAction} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  const adminPrintAction = root.createComponent(AdminPrintAction, {
+    src: 'https://example.com',
+  }, 'Modal content');
+
+  root.appendChild(adminPrintAction);
+  root.mount();
+});