build: use Yarn v3 to manage the project / monorepo

- Install Yarn v3.
- Update repo for Yarn workspaces.
- Add Yarn workspace-tools plugin.
- Do not publish from dist/
  to work around lerna/lerna#2631.
- Use yarn commands on CI, instead of npm.
- Run prettier and commit the results.
  No idea why this was not happening with NPM.
- Fix up github actions workflows for yarn
- Do not test on Node 10, which Yarn does not seem to support.
- Move codecov dependency to packages/components
- Remove gitHead from package.json. lerna/lerna#1880 indicates that
  "gitHead" is not intended to be committed to the package.json, and should be removed by
  Lerna when packages are done being published.
- Add the interactive-tools plugin for Yarn
- Remove unnecessary npm package stuff
- Add script for running the plop component generator
- Move the plugin:prettier/recommended config to the end of the extensions, as
  recommended by https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

.eslintrc

@@ -6,10 +6,10 @@
   "parser": "@typescript-eslint/parser",
   "plugins": ["react-hooks", "testing-library"],
   "extends": [
+    "eslint:recommended",
     "plugin:react/recommended",
-    "plugin:prettier/recommended",
     "plugin:testing-library/react",
-    "eslint:recommended"
+    "plugin:prettier/recommended"
   ],
   "parserOptions": {
     "ecmaVersion": 2018,

.gitattributes

@@ -0,0 +1,8 @@
+# Ensure that all files have line feeds for line endings, so that they're consistent regardless of
+# which platform a change was developed on.
+* text=auto eol=lf
+
+# Identify Yarn 2 releases and plugins as binary content.
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

.github/workflows/docs.yml

@@ -16,17 +16,16 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
 
       - name: Install Dependencies ⬆️
-        run: |
-          npm ci --no-optional
-          npx lerna bootstrap
+        run: yarn install --immutable
 
       - name: Build Dist 🔧
-        run: npx lerna run build --stream
+        run: yarn workspaces foreach run build
 
       - name: Deploy Storybook Docs 🚀
         run: npx lerna run deploy:docs

.github/workflows/test.yml

@@ -8,25 +8,24 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [12.x, 14.x]
 
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
 
       - name: Install Dependencies ⬆️
-        run: |
-          npm ci --no-optional
-          npx lerna bootstrap
+        run: yarn install --immutable
 
       - name: Type check 📋
-        run: npm run types
+        run: yarn run types
 
       - name: Run CI Tests ✅
-        run: npx lerna run test:ci --stream
+        run: yarn workspaces foreach run test:ci
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
           CI: true
@@ -41,26 +40,25 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
 
       - name: Install Dependencies ⬆️
-        run: |
-          npm ci --no-optional
-          npx lerna bootstrap
+        run: yarn install --immutable
 
       - name: Build Dist 🔧
-        run: npx lerna run build --stream
+        run: yarn run build
 
       - name: Build Storybook 📚
-        run: npx lerna run build:storybook
+        run: yarn workspaces foreach run build:storybook
 
       - name: Run Accessibility Tests 💛
-        run: npx lerna run storybook:axeOnly
+        run: yarn workspaces foreach run storybook:axeOnly
 
       - name: Percy Snapshots 📸
-        run: npx lerna run snapshot
+        run: yarn workspaces foreach run snapshot
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 
@@ -75,19 +73,20 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0
+
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
 
       - name: Install Dependencies ⬆️
-        run: |
-          npm ci --no-optional
-          npx lerna bootstrap
+        run: yarn install --immutable
 
       - name: Lint Commit Messages 👕
         uses: wagoid/commitlint-github-action@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Lint Javascript + SCSS 👕
-        run: npm run lint
+        run: yarn run lint

.gitignore

@@ -75,3 +75,13 @@ typings/
 # dist folders (allowing built tokens)
 packages/components/dist/
 storybook-static/
+
+# Yarn 2 files
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

.yarnrc.yml

@@ -0,0 +1,9 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.0.0.cjs

README.md

@@ -9,25 +9,25 @@ The [Education Initiative](https://chanzuckerberg.com/education/)'s design syste
 ### Requirements
 
 - Node - if using [nodenv](https://github.com/nodenv/nodenv), you can install the right version with `nodenv install`
-- NPM - comes with Node
+- Yarn - install through either [npm](https://docs.npmjs.com/) (`npm install -g yarn`) or [homebrew](https://brew.sh/) (`brew install yarn`)
 
 ### Helpful commands
 
 | Description                           | Command                              |
 | ------------------------------------- | ------------------------------------ |
-| Install dependencies                  | `npm install && npx lerna bootstrap` |
-| Run linter                            | `npm run lint`                       |
-| Run linter and fix all fixable issues | `npm run lint:fix`                   |
-| Build packages                        | `npm run build`                      |
-| Run the component generator           | `npx plop`                           |
+| Install dependencies                  | `yarn install`                       |
+| Run linter                            | `yarn lint`                          |
+| Run linter and fix all fixable issues | `yarn lint:fix`                      |
+| Build packages                        | `yarn build`                         |
+| Run the component generator           | `yarn create-component`              |
 
 ### Publishing
 
 1. Confirm that all checks are green on CI.
 2. Run `git checkout main`
-3. Run `npm run create-releases` to bump the package versions, create new git tags, and create git commits. The packages are not published, yet.
+3. Run `yarn create-releases` to bump the package versions, create new git tags, and create git commits. The packages are not published, yet.
 4. Confirm that the git tags, git commits, and changelog updates look correct.
-5. Run `npm run publish-releases` to publish the packages to the NPM registry.
+5. Run `yarn publish-releases` to publish the packages to the NPM registry.
 6. Push commits and tags to the git remote with `git push origin main --follow-tags`
 
 ## Project Status

lerna.json

@@ -2,5 +2,7 @@
   "packages": [
     "packages/*"
   ],
+  "npmClient": "yarn",
+  "useWorkspaces": true,
   "version": "0.1.1"
 }