refactor(project): update structure to monorepo (#4136)

* refactor(project): update root package.json to workspaces

* refactor(project): move @primer/react to packages/react

* refactor(project): add examples to workspaces

* refactor(project): move eslint to top-level

* refactor(project): move markdownlint to top-level

* refactor(project): move prettier to top-level

* refactor(project): move jest to top-level, add support for projects

* chore(react): remove lint-staged config from packages/react

* refactor(project): update TypeScript to work across workspaces

* refactor(project): setup clean and build commands across workspaces

* refactor(project): add docs as workspace

* refactor(ci): update ci to use new project structure

* refactor(ci): add todo stubs for release step

* revert(ci): remove changes to ci

* refactor(ci): update ci to use new project structure

* chore(project): address eslint violations

* chore(react): add negation pattern for codemods/lib

* fix(ci): update scripts for deploy preview

* chore(npm): update build:storybook npm script to use local script

* refactor(project): move size-limit to top-level

* ci(consumer_test): update test to work with new structure

* refactor: move consumer-test into examples

* chore: update lockfile

* ci: update vrt to use new monorepo paths

* ci(consumer-test): update duplicate key

* ci: fix pack output location

* chore: remove prepare script for consumer_test workflow

* ci(release): restore release workflow behaviors

* chore: move legacy-theme into primer package

* ci(release): update canary workflow to work with monorepo structure

* ci(release): update canary release to adjust package.json structure

* ci(release): remove 0.0.0 version since snapshot will create new version

* chore: add private to workspaces

* chore(docs): pin and hoist dependencies to prevent conflicts

* chore(deps): update deps from latest

* chore: add optional dependency for ci

* chore(test): remove outdated snapshots

* chore(gitignore): update to include .tsbuildinfo files

* chore: update package versions for workspaces

---------

Co-authored-by: Josh Black <[email protected]>

Author: joshblack

.changeset/config.json

@@ -6,5 +6,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["docs", "example-*"]
 }

.eslintignore

@@ -0,0 +1,8 @@
+**/node_modules/**
+**/storybook-static/**
+**/.next/**
+**/lib/**
+**/lib-esm/**
+**/dist/**
+
+script/**/*.ts

.eslintrc.js

@@ -44,7 +44,7 @@ module.exports = {
     'contributor-docs/adrs/*',
     'examples/nextjs/**',
     // Note: this file is inlined from an external dependency
-    'src/utils/polymorphic.ts',
+    'packages/react/src/utils/polymorphic.ts',
     'storybook-static',
     'CHANGELOG.md',
   ],
@@ -107,7 +107,7 @@ module.exports = {
     // rules which apply only to TS
     {
       parserOptions: {
-        project: 'tsconfig.json',
+        project: ['./tsconfig.json', './packages/**/tsconfig.json', './examples/**/tsconfig.json'],
       },
       files: ['**/*.{ts,tsx}'],
       extends: ['plugin:@typescript-eslint/recommended'],
@@ -159,7 +159,7 @@ module.exports = {
 
     // Tests
     {
-      files: ['src/**/*.test.{ts,tsx}'],
+      files: ['**/*.test.{ts,tsx}'],
       extends: ['plugin:jest/recommended', 'plugin:testing-library/react'],
       rules: {
         '@typescript-eslint/no-non-null-assertion': 'off',

.github/workflows/ci.yml

@@ -90,33 +90,22 @@ jobs:
         run: npm ci
 
       - name: Type check
-        run: npm run test:type-check
+        run: npm run type-check
 
   examples:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'npm'
-
       - name: Install dependencies
         run: npm ci
-
       - name: Build
-        run: npm run build
-
-      - name: Install examples dependencies
-        working-directory: examples/nextjs
-        run: npm ci
-
-      - name: Build examples
-        working-directory: examples/nextjs
-        run: npm run build
+        run: npm run build -ws --if-present
 
   vrt-runner:
     runs-on: ubuntu-latest-8-cores
@@ -135,8 +124,10 @@ jobs:
         run: npm ci
       - name: Build storybook
         run: npx storybook build
+        working-directory: packages/react
       - name: Run storybook
         id: storybook
+        working-directory: packages/react
         run: |
           npx serve -l 6006 storybook-static &
           pid=$!
@@ -203,8 +194,10 @@ jobs:
         run: npm ci
       - name: Build storybook
         run: npx storybook build
+        working-directory: packages/react
       - name: Run storybook
         id: storybook
+        working-directory: packages/react
         run: |
           npx serve -l 6006 storybook-static &
           pid=$!
@@ -284,4 +277,4 @@ jobs:
       - name: Build
         run: npm run build
       - name: Get export sizes
-        run: node script/get-export-sizes.js
+        run: node packages/react/script/get-export-sizes.js

.github/workflows/consumer_test.yml

@@ -16,22 +16,23 @@ jobs:
         with:
           node-version: 20
           cache: npm
+      - name: Remove "prepare" script
+        run: npm pkg delete scripts.prepare
       - name: Install dependencies
         run: npm ci
-      - name: Build
-        run: npm run build
+      - name: Build @primer/react
+        run: npm run build -w @primer/react
       # 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
+        run: npm pack --pack-destination ../../examples/consumer-test --json > ../../examples/consumer-test/pack.json
+        working-directory: packages/react
       - name: Clean package directory
-        run: |
-          npm run clean
-          rm -rf node_modules
+        run: npm run clean:all
       - name: Test
         id: test
-        working-directory: consumer-test
+        working-directory: examples/consumer-test
         run: |
           # Read the filename for the tarball from `pack.json`
           npm install $(jq -r '.[0].filename' pack.json)
@@ -40,4 +41,4 @@ jobs:
       - name: Add annotation
         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"
+          echo "::error file=tsconfig.build.json::Test package could not build. See https://github.com/primer/react/blob/main/examples/consumer-test"

.github/workflows/deploy_preview.yml

@@ -20,9 +20,6 @@ jobs:
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
-      - name: Install docs dependencies
-        run: npm ci --legacy-peer-deps
-        working-directory: docs
       - name: Build docs preview
         run: npm run build:docs:preview
       - uses: actions/upload-pages-artifact@v3

.github/workflows/deploy_production.yml

@@ -56,6 +56,6 @@ jobs:
       gh_token: ${{ secrets.GITHUB_TOKEN }}
     with:
       node_version: 18
-      install: npm ci && cd docs && npm ci --legacy-peer-deps && cd ..
+      install: npm ci
       build: npm run build:docs
       output_dir: docs/public

.github/workflows/release_canary.yml

@@ -9,7 +9,46 @@ on:
 jobs:
   release:
     concurrency: npm-canary
-    uses: primer/.github/.github/workflows/release_canary.yml@main
-    secrets:
-      gh_token: ${{ secrets.GITHUB_TOKEN }}
-      npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node_version: ${{ inputs.node_version }}
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build --if-present
+      - name: Create .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
+      - name: Publish canary release
+        run: |
+          echo -e "---\n$( jq .name packages/react/package.json ): patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
+          npx changeset version --snapshot
+          npx changeset publish --tag canary
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Output canary version
+        uses: actions/[email protected]
+        with:
+          script: |
+            const package = require(`${process.env.GITHUB_WORKSPACE}/packages/react/package.json`)
+            github.repos.createCommitStatus({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              sha: context.sha,
+              state: 'success',
+              context: `Published ${package.name}`,
+              description: package.version,
+              target_url: `https://unpkg.com/${package.name}@${package.version}/`
+            })

.github/workflows/vrt.yml

@@ -43,10 +43,11 @@ jobs:
         run: npm ci
       - name: Build storybook
         run: npx storybook build
+        working-directory: packages/react
       - name: Run storybook
         id: storybook
         run: |
-          npx serve -l 6006 storybook-static &
+          npx serve -l 6006 packages/react/storybook-static &
           pid=$!
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5

.gitignore

@@ -1,10 +1,9 @@
 # Build folders
 dist/
 lib/
-!codemods/lib/
+!packages/react/codemods/lib/
 lib-esm/
 css/
-/generated
 
 # Editor
 .DS_Store
@@ -35,3 +34,6 @@ coverage/
 # Playwright
 stats.html
 blob-report
+
+# TypeScript
+*.tsbuildinfo

.npmrc

@@ -2,3 +2,4 @@ save=true
 save-exact=true
 # we create our tags in Releases now
 git-tag-version=false
+legacy-peer-deps=true

docs/.eslintrc.js

@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = {}

docs/content/ActionList.mdx

@@ -7,7 +7,7 @@ storybook: '/react/storybook?path=/story/components-actionlist'
 description: An ActionList is a list of items that can be activated or selected. ActionList is the base component for many menu-type components, including ActionMenu and SelectPanel.
 ---
 
-import data from '../../src/ActionList/ActionList.docs.json'
+import data from '../../packages/react/src/ActionList/ActionList.docs.json'
 
 import {ActionList, Avatar} from '@primer/react'
 import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'

docs/content/ActionMenu.mdx

@@ -8,7 +8,7 @@ storybook: '/react/storybook?path=/story/components-actionmenu'
 description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.
 ---
 
-import data from '../../src/ActionMenu/ActionMenu.docs.json'
+import data from '../../packages/react/src/ActionMenu/ActionMenu.docs.json'
 
 import {Box, Avatar, ActionList, ActionMenu} from '@primer/react'
 import DeprecationBanner from '../components/DeprecationBanner'

docs/content/AnchoredOverlay.mdx

@@ -6,7 +6,7 @@ source: https://github.com/primer/react/blob/main/src/AnchoredOverlay/AnchoredOv
 storybook: '/react/storybook?path=/story/behaviors-anchoredoverlay--default-portal'
 ---
 
-import data from '../../src/AnchoredOverlay/AnchoredOverlay.docs.json'
+import data from '../../packages/react/src/AnchoredOverlay/AnchoredOverlay.docs.json'
 
 import DeprecationBanner from '../components/DeprecationBanner'
 

docs/content/Autocomplete.mdx

@@ -7,7 +7,7 @@ source: https://github.com/primer/react/tree/main/src/Autocomplete
 storybook: '/react/storybook?path=/story/components-autocomplete'
 ---
 
-import data from '../../src/Autocomplete/Autocomplete.docs.json'
+import data from '../../packages/react/src/Autocomplete/Autocomplete.docs.json'
 import {Autocomplete} from '@primer/react'
 import DeprecationBanner from '../components/DeprecationBanner'
 

docs/content/Avatar.mdx

@@ -5,7 +5,7 @@ componentId: avatar
 source: https://github.com/primer/react/blob/main/src/Avatar
 ---
 
-import data from '../../src/Avatar/Avatar.docs.json'
+import data from '../../packages/react/src/Avatar/Avatar.docs.json'
 import {Avatar, Box} from '@primer/react'
 import DeprecationBanner from '../components/DeprecationBanner'
 

docs/content/AvatarPair.mdx

@@ -5,7 +5,7 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/AvatarPair
 ---
 
-import data from '../../src/AvatarPair/AvatarPair.docs.json'
+import data from '../../packages/react/src/AvatarPair/AvatarPair.docs.json'
 import DeprecationBanner from '../components/DeprecationBanner'
 
 <DeprecationBanner replacementUrl={'/components/avatar-pair/react/latest'} />

docs/content/AvatarStack.mdx

@@ -7,7 +7,7 @@ source: https://github.com/primer/react/blob/main/src/AvatarStack
 storybook: '/react/storybook?path=/story/components-avatarstack--default'
 ---
 
-import data from '../../src/AvatarStack/AvatarStack.docs.json'
+import data from '../../packages/react/src/AvatarStack/AvatarStack.docs.json'
 import {AvatarStack} from '@primer/react'
 import DeprecationBanner from '../components/DeprecationBanner'
 

docs/content/Box.mdx

@@ -6,7 +6,7 @@ description: A low-level utility component that accepts styles to enable custom
 source: https://github.com/primer/react/blob/main/src/Box.tsx
 ---
 
-import data from '../../src/Box/Box.docs.json'
+import data from '../../packages/react/src/Box/Box.docs.json'
 import DeprecationBanner from '../components/DeprecationBanner'
 
 <DeprecationBanner replacementUrl={'/components/box/react/latest'} />

docs/content/BranchName.mdx

@@ -5,7 +5,7 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/BranchName/BranchName.tsx
 ---
 
-import data from '../../src/BranchName/BranchName.docs.json'
+import data from '../../packages/react/src/BranchName/BranchName.docs.json'
 import DeprecationBanner from '../components/DeprecationBanner'
 
 <DeprecationBanner replacementUrl={'/components/branch-name/react/latest'} />

docs/content/Breadcrumbs.mdx

@@ -6,7 +6,7 @@ description: Use breadcrumbs to show navigational context on pages that are many
 source: https://github.com/primer/react/blob/main/src/Breadcrumbs/Breadcrumbs.tsx
 ---
 
-import data from '../../src/Breadcrumbs/Breadcrumbs.docs.json'
+import data from '../../packages/react/src/Breadcrumbs/Breadcrumbs.docs.json'
 import DeprecationBanner from '../components/DeprecationBanner'
 
 <DeprecationBanner replacementUrl={'/components/breadcrumbs/react/latest'} />

docs/content/Button.mdx

@@ -7,7 +7,7 @@ storybook: '/react/storybook?path=/story/components-button--playground'
 description: Use button for the main actions on a page or form.
 ---
 
-import data from '../../src/Button/Button.docs.json'
+import data from '../../packages/react/src/Button/Button.docs.json'
 import DeprecationBanner from '../components/DeprecationBanner'
 
 <DeprecationBanner replacementUrl={'/components/button/react/latest'} />

docs/content/ButtonGroup.mdx

@@ -6,7 +6,7 @@ source: https://github.com/primer/react/tree/main/src/ButtonGroup
 storybook: '/react/storybook?path=/story/components-buttongroup--default'
 ---
 
-import data from '../../src/ButtonGroup/ButtonGroup.docs.json'
+import data from '../../packages/react/src/ButtonGroup/ButtonGroup.docs.json'
 import DeprecationBanner from '../components/DeprecationBanner'
 
 <DeprecationBanner replacementUrl={'/components/button-group/react/latest'} />

docs/content/Checkbox.mdx

@@ -7,7 +7,7 @@ storybook: '/react/storybook?path=/story/components-forms-checkbox'
 componentId: checkbox
 ---
 
-import data from '../../src/Checkbox/Checkbox.docs.json'
+import data from '../../packages/react/src/Checkbox/Checkbox.docs.json'
 import DeprecationBanner from '../components/DeprecationBanner'
 
 <DeprecationBanner replacementUrl={'/components/checkbox/react/latest'} />

docs/content/CheckboxGroup.mdx

@@ -7,7 +7,7 @@ source: https://github.com/primer/react/blob/main/src/CheckboxGroup/CheckboxGrou
 storybook: '/react/storybook/?path=/story/components-forms-checkboxgroup-examples'
 ---
 
-import data from '../../src/CheckboxGroup/CheckboxGroup.docs.json'
+import data from '../../packages/react/src/CheckboxGroup/CheckboxGroup.docs.json'
 
 import {CheckboxGroup, Checkbox, Box} from '@primer/components'
 import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'

docs/content/CircleBadge.mdx

@@ -5,7 +5,7 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/CircleBadge
 ---
 
-import data from '../../src/CircleBadge/CircleBadge.docs.json'
+import data from '../../packages/react/src/CircleBadge/CircleBadge.docs.json'
 import DeprecationBanner from '../components/DeprecationBanner'
 
 <DeprecationBanner replacementUrl={'/components/circle-badge/react/latest'} />

docs/content/CircleOcticon.mdx

@@ -5,7 +5,7 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/CircleOcticon
 ---
 
-import data from '../../src/CircleOcticon/CircleOcticon.docs.json'
+import data from '../../packages/react/src/CircleOcticon/CircleOcticon.docs.json'
 
 CircleOcticon renders any Octicon with a circle background. CircleOcticons are most commonly used to represent the status of a pull request in the comment timeline.