Swap out yarn for pnpm

.github/workflows/codespell.yml

@@ -14,4 +14,4 @@ jobs:
           check_filenames: true
           ignore_words_list: MapPin
           # skip git, yarn, mocks, and i18n resources.
-          skip: ./.git,yarn.lock,*__mocks__/*,*__snapshots__/*,*i18n/*,otpSchema.json
+          skip: ./.git,pnpm-lock.yaml,*__mocks__/*,*__snapshots__/*,*i18n/*,otpSchema.json

.github/workflows/node-ci.yml

@@ -5,38 +5,42 @@ jobs:
       - uses: actions/checkout@v2
         with:
           persist-credentials: false
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9
       - name: Use Node.js 21.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: 21.x
-      - name: Install npm packages using cache
-        uses: bahmutov/npm-install@v1
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
       - name: Install Playwright
-        run: npx playwright install --with-deps
+        run: pnpm exec playwright install --with-deps
       - name: Lint code
-        run: yarn lint:js
+        run: pnpm run lint:js
       - name: Lint styles
-        run: yarn lint:styles
+        run: pnpm run lint:styles
       - name: i18n check (en-US, fr only)
-        run: yarn check:i18n-en-fr
+        run: pnpm run check:i18n-en-fr
       - name: Type check
-        run: yarn typescript
+        run: pnpm run typescript
       - name: Run unit tests
-        run: yarn unit
+        run: pnpm run unit
       - name: Build Storybook
-        run: yarn build-storybook --quiet
+        run: pnpm run build-storybook --quiet
       - name: Serve Storybook and run test runner
         # env: 
         #   ONLY_RUN: SNAPSHOTS
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
             "npx http-server storybook-static --port 5555 --silent" \
-            "npx wait-on tcp:5555 && yarn test-storybook --ci"
+            "npx wait-on tcp:5555 && pnpm run test-storybook --ci"
       - env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         name: Semantic Release
-        run: yarn semantic-release
+        run: pnpm run semantic-release
 name: Node.js CI
 "on":
   pull_request: null

.npmrc

@@ -0,0 +1,3 @@
+node-linker=hoisted
+shamefully-hoist=true
+strict-peer-dependencies=false

.storybook/main.js

@@ -65,6 +65,18 @@ module.exports = {
       }
     })
 
+    // Add fallback for querystring
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      querystring: require.resolve('querystring-es3')
+    };
+
+    // Configure module resolution for workspace packages
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@opentripplanner': path.resolve(__dirname, '../packages')
+    };
+
     // Return the altered config
     return config;
   },

README.md

@@ -24,18 +24,7 @@ See:
 
 You can chat with the main OTP-RR developers in our [Gitter chat](https://gitter.im/opentripplanner/otp-react-redux). Support is not guaranteed, but we may be able to answer questions and assist people wishing to make contributions.
 
-Some packages in otp-ui depend on sibling packages (e.g., `@opentripplanner/core-utils` is used by many of its siblings). In order to test a package with local changes you have made to its sibling, you can run the following find/replace operations to make sure you're depending on your latest work (and not the released version):
-
-1. In the `package.json` files for packages in which you want to test the sibling, find and replace (package-to-test being the package with local changes -- make sure these are committed to first to avoid the find/replace operations below polluting your work):
-
-   > "@opentripplanner/package-to-test": **"current-version"**
-
-   with
-
-   > "@opentripplanner/package-to-test": **"file:../package-to-test"**
-
-2. Run:
-   `yarn && yarn dev`
+Some packages in otp-ui depend on sibling packages (e.g., `@opentripplanner/core-utils` is used by many of its siblings). Internal dependencies are handled with the `workspace:*` version, which is a notation provided by pnpm. This allows us to always reference the current internal dependency version. Therefore, before the storybook can be run, it's necessary to run `pnpm prepublish` so that all internal packages are built.
 
 If the Storybook addon bar (a bar of controls at the bottom of the story) does not appear, you may need to clear localStorage by opening the browser console and typing `localStorage.clear()`.
 
@@ -48,7 +37,7 @@ This repo utilizes the [Storyshot](https://storybook.js.org/docs/react/workflows
 > A Monorepo with multiple packages and a shared build, test, and release process.
 
 - 🐉 [Lerna](https://lernajs.io/)  - The Monorepo manager
-- 📦 [Yarn Workspaces](https://yarnpkg.com/lang/en/docs/workspaces/)  -  Sane multi-package management
+- 📦 [PNPM Workspaces](https://pnpm.io/workspaces)  -  Sane multi-package management
 - 🚀 [React](https://reactjs.org/)  -  JavaScript library for user interfaces
 - 💅 [styled-components](https://www.styled-components.com/)  -  CSS in JS elegance
 - 🛠 [Babel](https://babeljs.io/)  -  Compiles next-gen JavaScript
@@ -57,11 +46,12 @@ This repo utilizes the [Storyshot](https://storybook.js.org/docs/react/workflows
 
 ## Usage
 
-- `yarn dev` - This starts Storybook for viewing all the components locally.
-- `yarn bootstrap` - This installs all of the packages and links dependent packages together.
-- `yarn preppublish` - This babelfies all of the packages and creates `/lib` folders for each one.
-- `yarn unit` - Run jest unit tests.
-- `yarn coverage` - Shows jest unit coverage.
+- `pnpm dev` - This starts Storybook for viewing all the components locally.
+- `pnpm install` - This installs all of the packages and links dependent packages together.
+- `pnpm preppublish` - This babelfies all of the packages and creates `/lib` and `/esm` folders for each one.
+- `pnpm unit` - Run jest unit tests.
+- `pnpm coverage` - Shows jest unit coverage.
+- `pnpm clean` - Deletes all files in the gitignore (note: this can delete local editor settings)
 - `npx lerna changed` - Show which packages have changed.
 - `npx lerna diff` - Show specifically what files have cause the packages to change.
 - `npx lerna create <packageName>` - Creates new package and walks through setting up package.json

babel.config.json

@@ -6,8 +6,8 @@
   },
   "plugins": [
     ["@babel/plugin-proposal-class-properties", { "loose": true }],
-    ["@babel/plugin-proposal-private-methods", { "loose": true }],
-    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+    ["@babel/plugin-transform-private-methods", { "loose": true }],
+    ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
     "babel-plugin-styled-components",
     "@babel/plugin-transform-runtime",
     "import-graphql",

jest.config.js

@@ -30,6 +30,8 @@ module.exports = {
   testPathIgnorePatterns: ["<rootDir>/packages/(?:.+?)/((esm)|(lib))/"],
   transform: {
     "\\.[jt]sx?$": "babel-jest",
-    "\\.ya?ml$": "yaml-jest"
-  }
+    "\\.ya?ml$": "yaml-jest",
+    "node_modules/chroma-js/.+\\.js$": "<rootDir>/transform-esm-modules.js"
+  },
+  transformIgnorePatterns: ["/node_modules/(?!(chroma-js)/)"]
 };

lerna.json

@@ -1,6 +1,5 @@
 {
   "packages": ["packages/*"],
-  "npmClient": "yarn",
-  "userWorkspaces": true,
+  "npmClient": "pnpm",
   "version": "independent"
 }

package.json

@@ -3,11 +3,10 @@
   "version": "0.0.1",
   "private": true,
   "engines": {
-    "node": ">=12"
+    "node": ">=12",
+    "pnpm": ">=8"
   },
-  "workspaces": [
-    "packages/*"
-  ],
+  "packageManager": "[email protected]",
   "resolutions": {
     "react": "18.2.0",
     "react-animate-height": "3.0.4"
@@ -17,7 +16,10 @@
     "@babel/core": "^7.10",
     "@babel/plugin-proposal-class-properties": "^7.10",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-private-property-in-object": "^7.14.0",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-private-methods": "^7.23.3",
+    "@babel/plugin-transform-private-property-in-object": "^7.23.4",
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.10",
     "@babel/preset-react": "^7.10",
@@ -39,7 +41,7 @@
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
     "@storybook/storybook-deployer": "^2.8.10",
-    "@storybook/test-runner": "^0.17.0",
+    "@storybook/test-runner": "^0.16.0",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.0.0",
     "@types/styled-components": "^5.1.9",
@@ -74,15 +76,16 @@
     "jest-styled-components": "^7.0.5",
     "js-yaml": "^4.1.0",
     "json-loader": "^0.5.7",
-    "lerna": "^3.18.4",
+    "lerna": "^8.1.9",
     "lint-staged": "^8.2.0",
     "msw": "^2.3.1",
     "nock": "^11.7.0",
     "prettier": "^1.19.1",
     "puppeteer": "^10.2.0",
+    "querystring-es3": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-intl": "^5.24.6",
+    "react-intl": "^6.8.4",
     "react-test-renderer": "^16.14.0",
     "semantic-release": "^17.1.1",
     "semantic-release-monorepo": "^7.0.2",
@@ -103,32 +106,33 @@
     "yaml-sort": "^2.0.0"
   },
   "scripts": {
-    "bootstrap": "lerna bootstrap --use-workspaces",
+    "bootstrap": "pnpm install",
     "build:cjs": "lerna exec --parallel -- babel --extensions '.js,.ts,.tsx,.snap' --ignore **/*.story.js,**/*.story.ts,**/*.story.d.ts,**/*.story.tsx,**/*.spec.js,**/*.spec.ts,**/*.test.js,**/*.test.ts,**/__tests__/**,**/__unpublished__/**,**/*.snap  --ignore **/__tests__/** -D --no-copy-ignored --root-mode upward --source-maps true src -d lib",
     "build:esm": "lerna exec --parallel -- cross-env BABEL_ENV=esm babel --extensions '.js,.ts,.tsx,.snap' --ignore **/*.story.js,**/*.story.ts,**/*.story.d.ts,**/*.story.tsx,**/*.spec.js,**/*.spec.ts,**/*.test.js,**/*.test.ts,**/__tests__/**,**/__unpublished__/**,**/*.snap --ignore **/__tests__/** -D --no-copy-ignored --root-mode upward --source-maps true src -d esm",
     "check:i18n-all": "node packages/scripts/lib/run-validate-i18n.js packages/**/src packages/**/i18n",
     "check:i18n-en-fr": "node packages/scripts/lib/run-validate-i18n.js packages/**/src packages/**/i18n/en-US.yml packages/**/i18n/fr.yml",
     "clean": "git clean -Xdf",
-    "prepublish": "yarn typescript && yarn build:cjs && yarn build:esm",
+    "prepublish": "pnpm typescript && pnpm build:cjs && pnpm build:esm",
     "check-eslint-config": "eslint --print-config jestconfig.js | eslint-config-prettier-check",
     "coverage": "jest --coverage",
     "deploy-storybook": "storybook-to-ghpages",
     "dev": "storybook dev -p 5555",
-    "predev": "yarn",
+    "postinstall": "pnpm prepublish",
+    "predev": "pnpm install",
     "build-storybook": "storybook build",
     "lint:js": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern esm --ignore-pattern lib --ignore-pattern node_modules --ignore-pattern storybook-static --quiet",
     "lint:graphql": "eslint . --ext .graphql --ignore-pattern esm --ignore-pattern lib --ignore-pattern node_modules --ignore-pattern storybook-static",
     "lint:fixjs": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern esm --ignore-pattern lib --ignore-pattern node_modules --ignore-pattern storybook-static --fix",
     "lint:styles": "stylelint \"packages/**/!(*.d).{j,t}s{,x}\"",
-    "lint": "yarn lint:js && yarn lint:styles && yarn lint:graphql",
+    "lint": "pnpm lint:js && pnpm lint:styles && pnpm lint:graphql",
     "prettier": "prettier --write \"**/*.{json,md,yml}\"",
     "semantic-release": "lerna exec --concurrency 1 -- semantic-release -e semantic-release-monorepo",
-    "test": "yarn lint:js && yarn lint:styles && yarn check:i18n-en-fr && yarn typescript && yarn unit && yarn test-storybook && yarn a11y-test",
+    "test": "pnpm lint:js && pnpm lint:styles && pnpm check:i18n-en-fr && pnpm typescript && pnpm unit && pnpm test-storybook && pnpm a11y-test",
     "typescript": "lerna run tsc",
     "unit": "jest --testPathIgnorePatterns a11y .d.ts",
     "update-internal-dependencies": "node scripts/update-internal-dependencies.js",
     "test-storybook": "test-storybook --url http://localhost:5555",
-    "update-snapshots": "yarn build-storybook; npx concurrently -k -s first -n \"SB,TEST\" \"npx http-server storybook-static --port 5555 --silent\" \"npx wait-on tcp:5555 && yarn test-storybook --url http://localhost:5555 -u\""
+    "update-snapshots": "pnpm build-storybook; npx concurrently -k -s first -n \"SB,TEST\" \"npx http-server storybook-static --port 5555 --silent\" \"npx wait-on tcp:5555 && pnpm test-storybook --url http://localhost:5555 -u\""
   },
   "eslintConfig": {
     "env": {
@@ -255,7 +259,7 @@
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged",
-      "pre-push": "yarn check-eslint-config && yarn lint"
+      "pre-push": "pnpm check-eslint-config && pnpm lint"
     }
   },
   "lint-staged": {
@@ -270,7 +274,7 @@
     ],
     "*.graphql": [
       "prettier --write",
-      "yarn lint:graphql --fix",
+      "pnpm lint:graphql --fix",
       "git add"
     ],
     "!(.github/**).{yml,yaml}": [

packages/base-map/package.json

@@ -10,13 +10,13 @@
   "private": false,
   "dependencies": {
     "mapbox-gl": "npm:[email protected]",
-    "maplibre-gl": "^2.1.9",
     "react-map-gl": "^7.0.15",
-    "@opentripplanner/building-blocks": "^2.0.0"
+    "@opentripplanner/building-blocks": "workspace:*"
   },
   "peerDependencies": {
+    "maplibre-gl": "^2.1.9",
     "react": "^18.2.0",
-    "@opentripplanner/types": "^6.5.2",
+    "@opentripplanner/types": "workspace:*",
     "styled-components": "^5.3.0"
   },
   "repository": {

packages/base-map/src/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Map, MapProps } from "react-map-gl";
+import { Map, MapProps } from "react-map-gl/maplibre";
 import maplibregl, { Event } from "maplibre-gl";
 
 import { useIntl } from "react-intl";

packages/building-blocks/package.json

@@ -9,8 +9,8 @@
   "module": "esm/index.js",
   "private": false,
   "devDependencies": {
-    "@opentripplanner/types": "^6.5.2",
-    "@opentripplanner/core-utils": "^12.0.0"
+    "@opentripplanner/types": "workspace:*",
+    "@opentripplanner/core-utils": "workspace:*"
   },
   "peerDependencies": {
     "react": "^18.2.0",