chore(npm): add types packages as optional peer deps

.github/workflows/consumer_test.yml

@@ -11,41 +11,33 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
-
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
           cache: npm
-
-      # `prepare` is a special case in `npm` and likes to run all the time, even
-      # with `--ignore-scripts` and even when using `npm link @primer/react
-      # --ignore-scripts`. This just removes it entirely for the duration of
-      # this workflow.
-      - name: Remove "prepare" script
-        run: npm pkg delete scripts.prepare
-
       - name: Install dependencies
         run: npm ci
-
       - name: Build
         run: npm run build
-
-      - name: Install only production dependencies
-        run: npm ci --production
-
-      - name: Link
-        run: npm link
-
-      - name: Link and test
-        id: link-and-test
+      # Output the artifact as a tarball in `consumer-test`. Write the
+      # information for this package in `consumer-test/pack.json` so we can read
+      # from it later to install the package
+      - name: Create a tarball for the package
+        run: npm pack --pack-destination consumer-test --json > consumer-test/pack.json
+      - name: Clean package directory
+        run: |
+          npm run clean
+          rm -rf node_modules
+      - name: Test
+        id: test
         working-directory: consumer-test
         run: |
+          # Read the filename for the tarball from `pack.json`
+          npm install $(jq -r '.[0].filename' pack.json)
           npm install
-          npm link @primer/react
           npm run check
-
       - name: Add annotation
-        if: failure() && steps.link-and-test.conclusion == 'failure'
+        if: failure() && steps.test.conclusion == 'failure'
         run: |
           echo "::error file=tsconfig.build.json::Test package could not build. See https://github.com/primer/react/blob/main/consumer-test"

consumer-test/App.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import {Box} from '@primer/react'
 
 export default function App() {

consumer-test/package.json

@@ -3,7 +3,13 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/styled-components": "^5.1.11",
     "@primer/react": "*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "styled-components": "^5.3.11",
     "typescript": "~4.7.2"
   }
 }

package.json

@@ -258,12 +258,23 @@
     "yaml": "2.2.2"
   },
   "peerDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/styled-components": "^5.1.11",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "styled-components": "4.x || 5.x"
   },
-  "optionalPeerDependencies": {
-    "@types/styled-components": "^5.1.11"
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    },
+    "@types/styled-components": {
+      "optional": true
+    }
   },
   "prettier": "@github/prettier-config",
   "size-limit": [