Add AdminPrintAction component

Add changeset

.changeset/tall-cows-explain.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': minor
+'@shopify/ui-extensions-react': minor
+---
+
+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/AdminAction/examples/basic-adminaction.example.tsx

@@ -1,16 +1,30 @@
 import React from 'react';
-import {reactExtension, AdminAction, Button} from '@shopify/ui-extensions-react/admin';
+import {
+  reactExtension,
+  AdminAction,
+  Button,
+  Text,
+} from '@shopify/ui-extensions-react/admin';
 
 function App() {
   return (
     <AdminAction
-        title="My App Action"
-        primaryAction={<Button onPress={() => {}}>Action</Button>}
-        secondaryAction={<Button onPress={() => {}}>Secondary</Button>}
+      title="My App Action"
+      primaryAction={
+        <Button onPress={() => {}}>Action</Button>
+      }
+      secondaryAction={
+        <Button onPress={() => {}}>
+          Secondary
+        </Button>
+      }
     >
-        Modal content
+      <Text>Modal content</Text>
     </AdminAction>
   );
 }
 
-export default reactExtension('Playground', () => <App />);
+export default reactExtension(
+  'Playground',
+  () => <App />,
+);

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,19 @@
+import React from 'react';
+import {
+  reactExtension,
+  AdminPrintAction,
+  Text,
+} from '@shopify/ui-extensions-react/admin';
+
+function App() {
+  return (
+    <AdminPrintAction src="https://example.com">
+      <Text>Modal content</Text>
+    </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 denote a URL to print. 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,14 @@
+import {extension, AdminPrintAction, Text} from '@shopify/ui-extensions/admin';
+
+export default extension('Playground', (root) => {
+  const adminPrintAction = root.createComponent(
+    AdminPrintAction,
+    {
+      src: 'https://example.com',
+    },
+    root.createComponent(Text, {fontWeight: 'bold'}, 'Modal content'),
+  );
+
+  root.append(adminPrintAction);
+  root.mount();
+});