Merge branch 'pnpm-workspaces' into alpha

# Conflicts:
#	yarn.lock

Author: miles-grant-ibigroup

.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

.gitignore

@@ -7,4 +7,5 @@ node_modules
 .idea
 storybook-static/
 *.tsbuildinfo
-.vscode/
+.vscode/
+*.tgz

.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

@@ -17,38 +17,28 @@ See:
 
 ```bash
  git checkout https://github.com/opentripplanner/otp-ui.git
- yarn dev # (installs packages, transpiles files, opens storybook to running component library on localhost:5555)
+ pnpm install
+ pnpm dev
 ```
 
 ## Development
 
 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()`.
 
 ### Storyshot testing
 
-This repo utilizes the [Storyshot](https://storybook.js.org/docs/react/workflows/snapshot-testing) Storybook addon to perform snapshot tests of every story in this monorepo. Whenever the script `yarn unit` is ran, the Storyshot addon will be included along with all the other tests. It will compare the initial output of every story to the saved snapshot of that story. This provides a quick way to make sure nothing drastic has changed and that every single story is able to initially render without an error. Storyshot doesn't snapshot all possible changes that can be done while interacting with story components. Often times these snapshots will need to be updated and that can be accomplished by running `yarn unit -u`.
+This repo utilizes the [Storyshot](https://storybook.js.org/docs/react/workflows/snapshot-testing) Storybook addon to perform snapshot tests of every story in this monorepo. Whenever the script `pnpm unit` is ran, the Storyshot addon will be included along with all the other tests. It will compare the initial output of every story to the saved snapshot of that story. This provides a quick way to make sure nothing drastic has changed and that every single story is able to initially render without an error. Storyshot doesn't snapshot all possible changes that can be done while interacting with story components. Often times these snapshots will need to be updated and that can be accomplished by running `pnpm update-snapshots`.
 
 ## Stack
 
 > 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 +47,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
@@ -70,7 +61,9 @@ This repo utilizes the [Storyshot](https://storybook.js.org/docs/react/workflows
 
 This project uses semantic-release to create releases to NPM. It is expect that contributors create [Conventional Commit](https://www.conventionalcommits.org/en/v1.0.0/) messages. These are then parsed by semantic-release which will automatically create an appropriate release for each package whenever a branch is merged to master.
 
-Sometimes when creating new releases, it will be necessary to update numerous packages within this repo at once to a newer internal package version. For this purpose there is the `update-internal-dependencies` script. This should be ran manually as needed. By default, `yarn update-internal-dependencies` will update all dependencies with the `@opentripplanner` scope in all packages within this project. To only update specific dependencies, it is possible to run something like `yarn update-internal-dependencies core-utils base-map`. This would update all dependencies on either the `@opentripplanner/base-map` or the `@opentripplanner/core-utils` in all packages in this project.
+Internal package dependencies are referenced using the `workspace` [protocol provided by pnpm](https://pnpm.io/workspaces). This allows us to depend on our internal packages without keeping versions up to date, but these versions must be replaced with the actual version numbers prior to release. pnpm handles this when publishing automatically. However, if you wish to rely on an otp-ui package in a local filesystem project using the `file` protocol, you need to use `pnpm pack` to create a tarball of the package, then reference that tarball in the other project's package.json.
+
+For example, to depend on core-utils locally, you can run `pnpm pack` from within the `packages/core-utils`. Next, in the other project, use a line like this to reference the resulting tarball. `"@opentripplanner/core-utils": "file:../otp-ui/packages/core-utils/opentripplanner-core-utils-12.0.2.tgz",`
 
 ## Raster Tile Versions
 

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,35 @@
     "yaml-sort": "^2.0.0"
   },
   "scripts": {
-    "bootstrap": "lerna bootstrap --use-workspaces",
+    "bootstrap": "pnpm install",
+    "preinstall": "npx only-allow pnpm",
     "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\"",
+    "pack-all": "lerna exec --no-private -- 'pnpm pack && echo \"Package tarball: $(pwd)/$(ls *.tgz)\"'"
   },
   "eslintConfig": {
     "env": {
@@ -255,7 +261,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 +276,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",