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

• I have 🎩'd these changes
• I have updated relevant documentation

[MitchLillie]

🎩, added a few comments

[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.

[MitchLillie]

LGTM!