Add AdminPrintAction component

[elanalynn]

Background

Closes https://github.com/Shopify/app-ui/issues/1178

Adds new admin component for the admin print action extension: AdminPrintAction

Solution

Add component type, docs, and examples for vanilla and react components.

🎩

• Run the print demo app
• In the this branch of ui-extensions run yarn build-consumer print-demo-app
• Confirm that you can import the AdminPrintAction component and run your extension

Sample extension code

import {
  reactExtension,
  useApi,
  AdminPrintAction,
  BlockStack,
  Checkbox,
  Text,
 } from '@shopify/ui-extensions-react/admin';
import { useEffect, useState } from 'react';

const TARGET = 'admin.order-details.print-action.render';

export default reactExtension(TARGET, () => <App />);

function App() {
  const {i18n, data} = useApi(TARGET);
  const [appUrl,setAppUrl] = useState(" ");
  const [src,setSrc] = useState("");
  const [printInvoice, setPrintInvoice] = useState(true);
  const [printPackingSlip, setPrintPackingSlip] = useState(false);
  const [printWarranty, setPrintWarranty] = useState(false);

  console.log({data})

  useEffect(()=>{ 
    const fetchData = async () => {
          const response = await fetch('/');
          const responseUrl = response.url;
          setAppUrl(responseUrl);
    };  
    fetchData();

  },[]);  

  useEffect(()=>{
    const printTypes = []
    if (printInvoice) {
      printTypes.push("Invoice");
    } ;
    if (printPackingSlip) {
      printTypes.push("Packing Slip");
    };
    if (printWarranty) {
      printTypes.push("Warranty");
    };

    const fullSrc = appUrl+'print?printType='+printTypes.join(",");
    setSrc(fullSrc);
  }, [appUrl, printInvoice, printPackingSlip, printWarranty]);

  return ( 
    <AdminPrintAction src={src}> 
      <BlockStack>
        <Text>{i18n.translate('choose')}</Text> 
        <Checkbox name="Invoice" checked={printInvoice} onChange={(value)=>{setPrintInvoice(value)}}>
          Invoice
        </Checkbox>
        <Checkbox name="Packing Slips" checked={printPackingSlip} onChange={(value)=>{setPrintPackingSlip(value)}}>
          Packing Slips
        </Checkbox>
        <Checkbox name="Warranty" checked={printWarranty} onChange={(value)=>setPrintWarranty(value)}>
          Warranty
        </Checkbox> 
      </BlockStack>
    </AdminPrintAction>
  ); 
}

Checklist

• [x] I have :tophat:'d these changes
• [x] I have updated relevant documentation

[github-actions[bot]]

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset directory. If the changes are user-facing and should cause a version bump, run yarn changeset to track your changes and include them in the next release CHANGELOG. If you are making simple updates to repo configuration, examples, or documentation, you do not need to add a changeset.

[MitchLillie]

Also one other note: We should probably wait to ship this PR. As soon as it is merged, the component will be available on unstable and we will need to document it.