Remove yarn in favor of npm (#2443)

* Remove yarn in favor of npm

* Create tame-turkeys-laugh.md

* Check in package-lock

* Revert

* Use auto commit action instead

* Cache and run npm ci

* Change node version to 18

* config legacy-peer-deps

* Update node version

* Also legacy peer deps in docs

* Ignore yarn.lock

* no-audit no-fund

* I dont know

* re-yarn the docs folder

* Update pakage-lock.json

* package lock

* Removing yarn from docs again

* Remove docs preview

* don't depend on deploy

* put back

---------

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

.changeset/tame-turkeys-laugh.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Remove yarn in favor of npm

.github/workflows/axe.yml

@@ -30,14 +30,15 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true'
         uses: actions/setup-node@v3
         with:
-          node-version: 14
-      - run: yarn
+          node-version: 18
+          cache: 'npm'
+      - run: npm ci
         if: steps.changed-files.outputs.any_changed == 'true'
-      - run: yarn dist
+      - run: npm run dist
         if: steps.changed-files.outputs.any_changed == 'true'
-      - name: Run docs site	
+      - name: Run docs site
         if: steps.changed-files.outputs.any_changed == 'true'
-        run: |	
+        run: |
           npm run dev & npx wait-on http://localhost:8000
       - name: Run axe script
         if: steps.changed-files.outputs.any_changed == 'true'

.github/workflows/ci.yml

@@ -11,35 +11,23 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
-      - run: yarn
-      - run: yarn dist
+          node-version: 18
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run dist
       - name: Lint source files
-        run: yarn stylelint --fix
+        run: npx stylelint --fix
       - name: Look for unused stylelint:disable lines
-        run: yarn stylelint -- --report-needless-disables
+        run: npm run stylelint -- --report-needless-disables
       - name: Push up any fixes
         if: ${{ github.event_name == 'pull_request' }}
-        run: |
-          set +e
-          git status | grep modified
-          if [ $? -eq 0 ]
-          then
-              set -e
-              git stash
-              git remote update
-              git fetch
-              git checkout --track origin/$GITHUB_HEAD_REF
-              git config --local user.email "actions@github.com"
-              git config --local user.name "Actions Auto Build"
-              git stash pop
-              git add src
-              git commit -m "Stylelint auto-fixes"
-              git push
-          else
-              set -e
-              echo "No changes since last run"
-          fi
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Fixing stylelint issues
+          commit_user_name: GitHub Design Engineering Bot
+          commit_user_email: primer-css@users.noreply.github.com
+          commit_author: primer-css <primer-css@users.noreply.github.com>
+          file_pattern: src/**/*.scss
 
   eslint:
     runs-on: ubuntu-latest
@@ -47,10 +35,11 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
-      - run: yarn
+          node-version: 18
+          cache: 'npm'
+      - run: npm ci
       - name: Lint workflow files
-        run: yarn eslint
+        run: npm run eslint
 
   test:
     runs-on: ubuntu-latest
@@ -58,7 +47,8 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
-      - run: yarn
+          node-version: 18
+          cache: 'npm'
+      - run: npm ci
       - name: Jest
-        run: yarn test
+        run: npm test

.github/workflows/deploy_preview.yml

@@ -19,9 +19,9 @@ jobs:
     secrets:
       gh_token: ${{ secrets.GITHUB_TOKEN }}
     with:
-      node_version: 16
-      install: yarn && cd docs && yarn && cd ..
-      build: yarn build:docs:preview
+      node_version: 18
+      install: npm ci && cd docs && npm ci && cd ..
+      build: npm run build:docs:preview
       output_dir: docs/public
 
   deploy-storybook:

.github/workflows/deploy_production.yml

@@ -42,7 +42,7 @@ jobs:
     secrets:
       gh_token: ${{ secrets.GITHUB_TOKEN }}
     with:
-      node_version: 16
-      install: yarn && cd docs && yarn && cd ..
-      build: yarn build:docs
+      node_version: 18
+      install: npm ci && cd docs && npm ci && cd ..
+      build: npm run build:docs
       output_dir: docs/public

.github/workflows/release.yml

@@ -21,10 +21,11 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18.x
+          cache: 'npm'
 
       - name: Install dependencies
-        run: yarn
+        run: npm ci
 
       - name: Create release pull request or publish to npm
         id: changesets
@@ -32,7 +33,7 @@ jobs:
         with:
           title: Release Tracking
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
-          publish: yarn release
+          publish: npm run release
         env:
           GITHUB_TOKEN: ${{ secrets.GPR_AUTH_TOKEN_SHARED }}
           NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

.github/workflows/release_canary.yml

@@ -20,7 +20,7 @@ jobs:
     name: Canary
     uses: primer/.github/.github/workflows/release_canary.yml@main
     with:
-      install: yarn
+      install: npm ci
     secrets:
       gh_token: ${{ secrets.GITHUB_TOKEN }}
       npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

.github/workflows/release_candidate.yml

@@ -20,10 +20,11 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18.x
+          cache: 'npm'
 
       - name: Install dependencies
-        run: yarn
+        run: npm ci
 
       - name: Create .npmrc
         run: |
@@ -37,7 +38,7 @@ jobs:
         run: |
           version=$(jq -r .version package.json)
           echo "$( jq ".version = \"$(echo $version)-rc.$(git rev-parse --short HEAD)\"" package.json )" > package.json
-          yarn publish --tag next
+          npm publish --tag next
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/welcome.yml

@@ -13,7 +13,8 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18.x
+          cache: 'npm'
 
       - name: Get or Create Comment
         uses: actions/github-script@v6
@@ -45,9 +46,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
-      - run: yarn
-      - run: yarn pretest
+          node-version: 18
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run pretest
       - name: Reporting bundle sizes
         uses: primer/comment-token-update@main
         env:

.gitignore

@@ -13,5 +13,5 @@ docs/dist
 node_modules/
 public/
 searchIndex.js
-package-lock.json
 tmp
+yarn.lock

.npmrc

@@ -1,2 +1,4 @@
 git-tag-version=false
-package-lock=false
+legacy-peer-deps=true
+no-audit=true
+no-fund=true

docs/package.json

@@ -6,42 +6,12 @@
     "storybook": "NODE_ENV=test storybook dev -p 6006",
     "build:storybook": "script/build-storybook"
   },
-  "dependencies": {
-    "@babel/preset-env": "^7.22.7",
-    "@babel/preset-react": "^7.16.7",
-    "@csstools/postcss-sass": "5.0.1",
-    "@geometricpanda/storybook-addon-badges": "^2.0.0",
-    "@primer/octicons": "17.0.0",
-    "@primer/octicons-react": "17.0.0",
-    "@primer/primitives": "7.11.10",
-    "@primer/react": "^35.26.1",
-    "@primer/view-components": "^0.0.114",
-    "@svgr/webpack": "5.5.0",
-    "autoprefixer": "10.4.2",
-    "chroma-js": "^2.4.2",
-    "clsx": "^1.2.1",
-    "core-js": "^3.20.3",
-    "path": "0.12.7",
-    "postcss": "8.4.5",
-    "postcss-import": "14.1.0",
-    "postcss-load-config": "3.1.0",
-    "postcss-loader": "4.3.0",
-    "postcss-scss": "4.0.3",
-    "postcss-simple-vars": "6.0.3",
-    "prop-types": "^15.8.1",
-    "raw-loader": "^4.0.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-frame-component": "^5.2.1",
-    "sass-loader": "13.0.0",
-    "styled-components": "^4.3.2",
-    "title-case": "^3.0.3"
-  },
   "engines": {
-    "node": ">= 10.x"
+    "node": ">= 16.x"
   },
-  "devDependencies": {
+  "dependencies": {
     "@babel/core": "^7.16.7",
+    "@geometricpanda/storybook-addon-badges": "^2.0.0",
     "@storybook/addon-essentials": "^7.0.26",
     "@storybook/addon-interactions": "^7.0.26",
     "@storybook/addon-links": "^7.0.26",
@@ -52,6 +22,7 @@
     "@storybook/react-webpack5": "^7.0.26",
     "@storybook/testing-library": "^0.0.14-next.2",
     "babel-loader": "^8.2.5",
+    "clsx": "^1.2.1",
     "eslint-plugin-storybook": "^0.6.12",
     "storybook": "^7.0.26",
     "storybook-addon-pseudo-states": "^2.1.0"

docs/script/build-storybook

@@ -7,9 +7,6 @@ else
   echo '<base href="/css/storybook/" />' >> .storybook/manager-head.html
 fi
 
-# Make Gatsby happy
-# yarn gatsby build
-
 # Build storybook inside docs
 npx storybook build -o public/storybook public/static
 

docs/stories/Contributing.mdx

@@ -28,7 +28,7 @@ It's usually better to open an issue before investing time in spiking out a new
 
 ## Storybook
 
-We use [Storybook](https://storybook.js.org/) to document and test our CSS. You can run Storybook locally by running `yarn storybook` and visiting the localhost server that is automatically started.
+We use [Storybook](https://storybook.js.org/) to document and test our CSS. You can run Storybook locally by running `npx storybook` and visiting the localhost server that is automatically started.
 
 Stories are written with React for better compatibility with Storybook. Each utility should have a story that demonstrates its use. Stories are located in the `stories` directory.
 

package.json

@@ -29,17 +29,17 @@
     "dist": "script/dist.js",
     "dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
     "stylelint": "stylelint --quiet --rd 'src/**/*.scss'",
-    "stylelint:fix": "yarn stylelint -- --fix",
+    "stylelint:fix": "npm run stylelint -- --fix",
     "stylelint:remove-disables": "script/stylelint-remove-disables.js 'src/**/*.scss'",
     "stylelint:add-disables": "script/stylelint-add-disables.js 'src/**/*.scss'",
     "eslint": "eslint deprecations.js __tests__ script",
     "prepublishOnly": "script/prepublish",
-    "start": "yarn dev",
-    "pretest": "yarn dist && script/pretest",
-    "test": "NODE_OPTIONS=--experimental-vm-modules yarn jest",
+    "start": "npm run dev",
+    "pretest": "npm run dist && script/pretest",
+    "test": "NODE_OPTIONS=--experimental-vm-modules npx jest",
     "release": "changeset publish",
-    "storybook": "cd docs && yarn && yarn storybook build",
-    "build:storybook": "cd docs && yarn && yarn build:storybook"
+    "storybook": "cd docs && npm i && npx storybook build",
+    "build:storybook": "cd docs && npm i && npm run build:storybook"
   },
   "dependencies": {
     "@primer/primitives": "^7.11.12",

script/build-docs

@@ -1,14 +1,14 @@
 #!/bin/bash -e
 
 # Build the base project so we can pull out the JSON data
-yarn dist
+npm run dist
 cp -rf dist docs
 
 # Now build the docs site using that data
 cd docs
 
 if [ -n "$1" ]; then
-  CI=true yarn build:storybook preview
+  CI=true npm run build:storybook preview
 else
-  CI=true yarn build:storybook
+  CI=true npm run build:storybook
 fi

script/prepublish

@@ -2,7 +2,7 @@
 set -e
 
 # generate the build directory
-yarn dist > /dev/null
+npm run dist > /dev/null
 
 files=$(git ls-files src | sed -e 's#^src/##' | sed -e 's#/.*$##' | sort -u)
 echo $files > publish-files.log

script/pretest

@@ -4,4 +4,4 @@ set -e
 mkdir -p tmp
 cd tmp
 echo "{\"package\":\"tmp\",\"version\":\"0.0.0\"}" > package.json
-yarn add --force @primer/css@latest
+npm i @primer/css@latest --force