build: switch to pnpm

.github/workflows/pull-request-ci.yml

@@ -13,18 +13,22 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.6
+
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: 'yarn'
+          cache: "pnpm"
 
-      - name: Monorepo init
-        run: yarn
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Build packages
-        run: yarn run lerna run build
+        run: pnpm build
 
-      - name: Continuous Integration for all packages
-        run: yarn run lerna run ci --stream
+      - name: Test packages
+        run: pnpm test
         env:
           CI: true

.github/workflows/release.yml

@@ -16,18 +16,24 @@ jobs:
         with:
           fetch-depth: 0
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.6
+
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: 'yarn'
+          cache: "pnpm"
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Create Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn install --frozen-lockfile
-          yarn run lerna run build
-          yarn run release
+          pnpm build
+          pnpm release

README.md

@@ -10,15 +10,3 @@ package | source
 [@cockroachlabs/design-tokens](https://www.npmjs.com/package/@cockroachlabs/design-tokens) | [`/packages/design-tokens`](https://github.com/cockroachdb/ui/tree/master/packages/design-tokens)
 [@cockroachlabs/icons](https://www.npmjs.com/package/@cockroachlabs/icons) | [`/packages/icons`](https://github.com/cockroachdb/ui/tree/master/packages/icons)
 [@cockroachlabs/ui-components](https://www.npmjs.com/package/@cockroachlabs/ui-components) | [`/packages/ui-components`](https://github.com/cockroachdb/ui/tree/master/packages/ui-components)
-
-## Development setup
-This repo is currently managed with [Lerna](https://lerna.js.org/) (version 5.x) which handles symlinking package dependencies for local developement. Each package has local npm scripts for management (`build`, `test`, etc). Before you begin working in the repo you should run `yarn init` from the root of the project.
-Other tasks can be found as npm scripts,
-
-```
----
-yarn init    - `yarn install && yarn lerna run build` -- Install dependencies and build all packages.
-yarn start   - `lerna run start --parallel` -- Start all packages in watch mode (this can be quite heavy)
-yarn release - `auto shipit` -- Used to publish new versions of packages. (Not required for local development)
----
-```

lerna.json

@@ -1,9 +1,5 @@
 {
-  "npmClient": "yarn",
-  "useWorkspaces": true,
-  "packages": [
-    "packages/*"
-  ],
+  "npmClient": "pnpm",
   "version": "independent",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,

package.json

@@ -2,18 +2,15 @@
   "name": "root",
   "private": true,
   "devDependencies": {
-    "auto": "10.43.0",
-    "lerna": "5.6.2"
+    "auto": "11.0.4",
+    "lerna": "^7.2.0"
   },
   "scripts": {
-    "init": "yarn install && yarn lerna run build",
-    "start": "lerna run start --parallel",
+    "start": "pnpm run --recursive --parallel start",
+    "test": "pnpm run --recursive test",
+    "build": "pnpm run --recursive build",
     "release": "auto shipit"
   },
-  "resolutions": {},
-  "workspaces": [
-    "packages/*"
-  ],
   "repository": "cockroachdb/ui",
   "author": "Cockroach Labs <[email protected]>",
   "auto": {
@@ -48,5 +45,11 @@
         "changelogTitle": "📝 Documentation"
       }
     ]
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react-lines-ellipsis>@types/react": "17",
+      "@types/recharts>@types/react": "17"
+    }
   }
 }

packages/design-tokens/README.md

@@ -5,13 +5,13 @@ Uses [style-dictionary](https://github.com/amzn/style-dictionary) to transform t
 ## Install dependencies
 
 ```
-yarn
+pnpm install
 ```
 
 ## Generate tokens from json
 
 ```
-npm run build
+pnpm run build
 ```
 
 ## Exported Tokens

packages/design-tokens/package.json

@@ -13,9 +13,7 @@
   "types": "dist/web/tokens.d.ts",
   "scripts": {
     "build": "style-dictionary build",
-    "clean": "style-dictionary clean",
-    "prepare": "npm run clean && npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "clean": "style-dictionary clean"
   },
   "license": "MIT",
   "devDependencies": {

packages/eslint-config/package.json

@@ -37,7 +37,7 @@
   },
   "scripts": {
     "snyk-protect": "snyk-protect",
-    "prepare": "yarn run snyk-protect"
+    "prepare": "snyk-protect"
   },
   "snyk": true,
   "gitHead": "f9e7778c841194fa776c5dc45d62fb9caf408f22"

packages/icons/CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 ## How do I add icons?
 
-Icons are added to this package by copying SVG files to the `/svg` folder. If the icon will have it's `fill` attribute changed via a prop, then copy your file into `/svg/customFill` directory. If the icon should not have its color changed, then copy your file into `/svg/preserveFill`. After copying your file into the appropriate directory, update the `/src/index.ts` file to include your generated icon component for export. You may want to run the build locally to resolve any issues (`yarn build`).
+Icons are added to this package by copying SVG files to the `/svg` folder. If the icon will have it's `fill` attribute changed via a prop, then copy your file into `/svg/customFill` directory. If the icon should not have its color changed, then copy your file into `/svg/preserveFill`. After copying your file into the appropriate directory, update the `/src/index.ts` file to include your generated icon component for export. You may want to run the build locally to resolve any issues (`pnpm build`).
 
 Some things to consider about the name of your SVG file:
 1. Your `.svg` file will need to have a **unique** name in this repo (that is it can't be named the same as any other `.svg` file in the `/svg` directory).
@@ -19,7 +19,7 @@ This package serves as a store for SVG icons that are converted and published as
 
 Since the components are generated from `.svg` files they are not committed in this repository. The only file that is kept under source control is the [index.ts](https://github.com/cockroachdb/ui/blob/master/packages/icons/src/index.ts). The components are generated to the directory `src/components` by the npm script [`build:generate:*`](https://github.com/cockroachdb/ui/blob/master/packages/icons/package.json). Once the components are generated, they are transpiled and TypeScript declarations are generated by the [TypeScript Compiler](https://www.typescriptlang.org/docs/handbook/compiler-options.html) (npm script [`build:typescript`](https://github.com/cockroachdb/ui/blob/master/packages/icons/package.json)).
 
-To generate the files locally run `npm run build` or `yarn run build`.
+To generate the files locally run pnpm run build`.
 
 ### Preserving or removing fill attributes
 

packages/icons/package.json

@@ -8,15 +8,14 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "npm run build:generate:stripfill && npm run build:generate:preserve && npm run build:typescript",
+    "build": "run-s build:generate:stripfill build:generate:preserve build:typescript",
     "build:typescript": "tsc",
     "build:generate:stripfill": "svgr --typescript --icon -d src/components svg/customFill",
     "build:generate:preserve": "svgr --typescript --icon --no-runtime-config -d src/components svg/preserveFill",
-    "build:watch": "tsc --watch",
+    "build:watch": "tsc --watch --preserveWatchOutput",
     "clean": "rimraf dist src/components",
-    "prepare": "npm run clean && npm run build",
     "test": "node notests.js",
-    "start": "npm run build:watch"
+    "start": "pnpm run build:watch"
   },
   "license": "MIT",
   "devDependencies": {

packages/storybook-ui-components/.storybook/main.js

@@ -5,6 +5,19 @@ module.exports = {
     name: "@storybook/react-webpack5",
     options: {},
   },
+  async webpackFinal(config, { configType }) {
+    if (configType === 'DEVELOPMENT') {
+      // Silence some of the typical webpack spew when running in watch mode,
+      // so that a top-level 'pnpm start' is still usable.
+      config.infrastructureLogging = {
+        ...config.infrastructureLogging,
+        level: "error",
+      };
+    }
+
+    return config;
+  },
+
   docs: {
     autodocs: "tag",
   },

packages/storybook-ui-components/package.json

@@ -18,8 +18,8 @@
   },
   "homepage": "https://github.com/cockroachdb/ui#readme",
   "dependencies": {
-    "@cockroachlabs/icons": "^0.7.6",
-    "@cockroachlabs/ui-components": "^0.7.7",
+    "@cockroachlabs/icons": "workspace:../icons",
+    "@cockroachlabs/ui-components": "workspace:../ui-components",
     "ts-loader": "9.4.2",
     "typescript": "4.8.4"
   },
@@ -42,8 +42,5 @@
     "storybook": "7.0.20",
     "ts-loader": "9.4.2",
     "webpack": "5.75.0"
-  },
-  "resolutions": {
-    "prismjs": "^1.21.0"
   }
 }

packages/ui-components/package.json

@@ -9,27 +9,27 @@
   "main": "dist/main.js",
   "types": "dist/types/index.d.ts",
   "scripts": {
-    "build": "npm run build:typescript && npm run build:bundle",
+    "build": "npm-run-all build:typescript build:bundle",
     "build:bundle": "webpack --mode production",
     "build:typescript": "tsc",
     "build:watch": "webpack --mode development --watch",
     "ci": "jest --ci -i",
     "clean": "rm -rf  ./dist/*",
     "lint": "eslint \"src/**/*.{tsx,ts,js}\"",
     "lint:fix": "eslint \"src/**/*.{tsx,ts,js}\" --fix",
-    "prepare": "npm run clean && npm run build",
-    "test": "jest --watch",
-    "test:version": "npm version prerelease --preid='alpha'",
-    "test:publish": "npm publish --tag testing",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:version": "pnpm version prerelease --preid='alpha'",
+    "test:publish": "pnpm publish --tag testing",
     "publish-test-version": "npm-run-all test:version test:publish",
-    "start": "npm run build:watch"
+    "start": "pnpm run build:watch"
   },
   "keywords": [],
   "license": "MIT",
   "dependencies": {
-    "@cockroachlabs/icons": "^0.7.6",
+    "@cockroachlabs/icons": "workspace:../icons",
     "@popperjs/core": "^2.9.2",
-    "@types/recharts": "^1.8.23",
+    "lodash": "^4.17.21",
     "react-lines-ellipsis": "^0.15.0",
     "react-popper": "^2.2.5",
     "recharts": "^2.1.12"
@@ -42,8 +42,8 @@
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.21.0",
-    "@cockroachlabs/design-tokens": "^0.4.12",
-    "@cockroachlabs/eslint-config": "^1.0.5",
+    "@cockroachlabs/design-tokens": "workspace:../design-tokens",
+    "@cockroachlabs/eslint-config": "workspace:../eslint-config",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "@types/classnames": "2.3.0",
@@ -52,6 +52,8 @@
     "@types/node": "16.18.14",
     "@types/react": "17.0.53",
     "@types/react-lines-ellipsis": "0.15.1",
+    "@types/recharts": "^1.8.23",
+    "@types/testing-library__jest-dom": "^5.14.6",
     "@typescript-eslint/eslint-plugin": "5.54.0",
     "@typescript-eslint/parser": "5.54.0",
     "babel-loader": "8.3.0",
@@ -68,6 +70,7 @@
     "jest-environment-jsdom": "29.4.3",
     "jest-runner-eslint": "1.1.0",
     "mini-css-extract-plugin": "^2.7.5",
+    "npm-run-all": "4.1.5",
     "prettier": "2.8.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -86,6 +89,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "resolutions": {},
   "gitHead": "a77405daccfaf2d38cc08ef7c322172ee93776fd"
 }

packages/ui-components/webpack.config.js

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* globals module, __dirname */
 const path = require("path");
-const WebpackBar = require("webpackbar");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
@@ -55,11 +54,6 @@ module.exports = {
 
   plugins: [
     new MiniCssExtractPlugin(),
-    new WebpackBar({
-      name: "ui-components",
-      color: "cyan",
-      profile: true,
-    }),
   ],
 
   // When importing a module whose path matches one of the following, just