Migrate to pnpm

.github/workflows/pr.yml

@@ -13,44 +13,48 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+
       - uses: actions/setup-node@v6
         name: Setup Node
         with:
           node-version-file: .nvmrc
           registry-url: https://registry.npmjs.org/
-          cache: "yarn"
+          cache: pnpm
 
       - name: Install dependencies
-        run: yarn install --immutable --immutable-cache
+        run: pnpm install --frozen-lockfile
 
       - name: Restore ESLint Cache
         uses: actions/cache@v4
         with:
           path: .eslintcache
-          key: eslint-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-${{ github.sha }}
+          key: eslint-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ github.sha }}
           restore-keys: |
-            eslint-${{ runner.os }}-${{ hashFiles('yarn.lock') }}-
+            eslint-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-
             eslint-${{ runner.os }}-
 
       - name: Lint and Build
         # Running these in one job saves VM startup time
         run: |
-          yarn lint --cache --cache-location .eslintcache
-          yarn build
-          yarn build-lib
+          pnpm lint --cache --cache-location .eslintcache
+          pnpm build
+          pnpm build-lib
 
   test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v4
+
       - name: Setup Node
         uses: actions/setup-node@v6
         with:
           node-version-file: .nvmrc
-          cache: "yarn"
+          cache: pnpm
 
       - name: Install dependencies
-        run: yarn install --immutable --immutable-cache
+        run: pnpm install --frozen-lockfile
 
       - name: Run component tests
-        run: yarn test
+        run: pnpm test

.github/workflows/publish.yml

@@ -14,13 +14,16 @@ jobs:
 
     steps:
       - name: Check out code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v4
 
       - name: Setup .npmrc file to publish to npm
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v6
         with:
           node-version-file: .nvmrc
           registry-url: 'https://registry.npmjs.org'
+          cache: pnpm
 
       - name: Check if version has been updated
         id: check
@@ -30,11 +33,11 @@ jobs:
 
       - name: Install dependencies
         if: steps.check.outputs.changed == 'true'
-        run: yarn install
+        run: pnpm install --frozen-lockfile
 
       - name: Build Lib
         if: steps.check.outputs.changed == 'true'
-        run: yarn build-lib
+        run: pnpm build-lib
 
       - name: Create tag
         if: steps.check.outputs.changed == 'true'

.gitignore

@@ -20,8 +20,7 @@
 .env.production.local
 
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+pnpm-debug.log*
 
 .idea/
 .eslintcache

.npmrc

@@ -0,0 +1 @@
+ignore-scripts=true

.nvmrc

@@ -1 +1 @@
-v24.12.0
+22.13.1

Dockerfile

@@ -1,27 +1,28 @@
-FROM node:25.9.0-slim as build-deps
+FROM node:22.13.1-slim AS build-deps
 
 # The base node image sets a very verbose log level.
-ENV NPM_CONFIG_LOGLEVEL warn
+ENV NPM_CONFIG_LOGLEVEL=warn
 
 # FIXME: This should not be hardcoded
-ENV VITE_GRAND_CENTRAL_URL http://localhost:5050
+ENV VITE_GRAND_CENTRAL_URL=http://localhost:5050
 
 # Create the work dir
 ADD . /home/nodeuser/app
-ENV HOME /home/nodeuser
+ENV HOME=/home/nodeuser
 WORKDIR /home/nodeuser/app
 
 # We are creating a specific user to be able to build
 # the docker image on azure to avoid running npm tasks as root
 RUN useradd -ms /bin/bash nodeuser
 RUN chown -R nodeuser:nodeuser /home/nodeuser
+RUN npm install -g pnpm@11.1.1
 USER nodeuser
-COPY --chown=nodeuser:nodeuser package.json yarn.lock ./
+COPY --chown=nodeuser:nodeuser package.json pnpm-lock.yaml .npmrc ./
 
 ENV NODE_PATH=/home/nodeuser/app/node_modules
 ENV PATH=$PATH:/home/nodeuser/app/node_modules/.bin
 
-RUN yarn && yarn build && rm -r /home/nodeuser/app/node_modules
+RUN pnpm install --frozen-lockfile && pnpm run build && rm -r /home/nodeuser/app/node_modules
 
 # Serve the gc-admin build.
 FROM nginx:1.29.8

MIGRATE_TO_PNPM.md

@@ -0,0 +1,70 @@
+# Migrating From Yarn to pnpm
+
+This guide is for developers who already worked on the Yarn-based version of this repo.
+
+## What changed
+
+- Package manager: Yarn -> pnpm
+- Node version: standardized to `22.13.1`
+- Lockfile: `yarn.lock` -> `pnpm-lock.yaml`
+
+## One-time local migration
+
+From the repo root, run:
+
+```bash
+nvm install 22.13.1
+nvm use 22.13.1
+corepack enable
+corepack prepare pnpm@10.33.4 --activate
+pnpm --version
+rm -rf node_modules
+pnpm install --frozen-lockfile
+```
+
+If `pnpm` is not available after setup, run:
+
+```bash
+corepack prepare pnpm@10.33.4 --activate
+```
+
+## Daily commands (Yarn -> pnpm)
+
+- Install deps: `yarn install` -> `pnpm install`
+- Start dev server: `yarn start` -> `pnpm start`
+- Lint: `yarn lint` -> `pnpm lint`
+- Build app: `yarn build` -> `pnpm build`
+- Build library: `yarn build-lib` -> `pnpm build-lib`
+- Test: `yarn test` -> `pnpm test`
+
+## Important notes for this repo
+
+- Use Node `22.13.1` (see `.nvmrc`).
+- Do not run `yarn` in this repository after migration.
+- `pnpm-lock.yaml` is the source of truth for dependency resolution.
+- If install-script behavior was previously controlled by Yarn config, check `.npmrc` in this repo for the current script policy.
+
+## Validation checklist after switching
+
+Run the following and confirm all pass:
+
+```bash
+pnpm install --frozen-lockfile
+pnpm lint
+pnpm build
+pnpm build-lib
+pnpm test
+```
+
+## Troubleshooting
+
+- Wrong Node version:
+  - `node -v` should report `v22.13.1`.
+  - Run `nvm use 22.13.1`.
+- Lockfile mismatch errors:
+  - Make sure you are not using Yarn.
+  - Re-run `pnpm install --frozen-lockfile`.
+- Strange module/link behavior after migration:
+  - Remove `node_modules` and reinstall with pnpm.
+  - Re-check local linking workflow, since pnpm linking behavior differs from Yarn in some cases.
+

README.md

@@ -24,25 +24,28 @@ It is recommended to use Node Version Manager with Crate front-end projects.
 
 To install this library you have to run the following command:
 
-    yarn add @cratedb/crate-gc-admin
+    pnpm add @cratedb/crate-gc-admin
 
-Then, if you are using tailwind, edit your `tailwind.config` file and
-add the following:
+Then import the library component styles from your app entrypoint (for example
+`src/main.tsx` or `src/index.tsx`):
 
-    ...
-    content: [
-      ...
-      './node_modules/@cratedb/crate-gc-admin/**/*.{js,jsx,ts,tsx}'
-    ]
-    ...
+    import '@cratedb/crate-gc-admin/styles/components.css';
 
-and edit your index.css to import library style:
+If you want the package's global theme defaults (fonts, body and links), opt in:
+
+    import '@cratedb/crate-gc-admin/styles/theme.css';
+
+No Tailwind content scanning of `@cratedb/crate-gc-admin` is required when using
+these prebuilt CSS entrypoints.
+
+The legacy stylesheet import below still works for backwards compatibility, but
+is deprecated and will be removed in a future major release:
 
     @import '@cratedb/crate-gc-admin/style.css';
 
 ## Testing with the Cloud UI
 
-To test unpublished `crate-gc-admin` code in the Admin UI, use the `devtools/link_gc.sh` bash script within the Cloud UI repo. It is not a fast process, but it is the easiest way to code across the two repos.
+View the `DEVELOP.md` within the `cloud-ui` repo.
 
 ## Publish a new version
 

__mocks__/react-syntax-highlighter/index.tsx

@@ -1,13 +1,13 @@
-import { default as OriginalReactSyntaxHighlighter } from 'react-syntax-highlighter';
+import type React from 'react';
 
 /*
     This is used to mock all the Ace Editor components.
     This specific component is very difficult to test (set value, get value, ...).
 */
 
-type SyntaxHighlighterProps = React.ComponentProps<
-  typeof OriginalReactSyntaxHighlighter
->;
+type SyntaxHighlighterProps = {
+  children?: React.ReactNode;
+};
 
 const SyntaxHighlighter = ({ children }: SyntaxHighlighterProps) => {
   return <div>{children}</div>;

devtools/create_tag.sh

@@ -35,7 +35,7 @@ if [[ "$LOCAL_COMMIT" != "$ORIGIN_COMMIT" ]]; then
   exit 1
 fi
 
-VERSION="$(yarn version --non-interactive | grep 'info Current version' | rev | cut -d' ' -f 1 | rev)"
+VERSION="$(node -p "JSON.parse(require('fs').readFileSync('package.json', 'utf8')).version")"
 
 echo
 print_info "Do you want to tag version $VERSION now?"

jest.config.js

@@ -35,7 +35,7 @@ export default {
     customExportConditions: [''],
   },
   transform: {
-    'node_modules/until-async/.*\\.js$': [
+    '^.+/until-async/.*\\.js$': [
       'ts-jest',
       {
         tsconfig: {
@@ -45,7 +45,9 @@ export default {
       },
     ],
   },
-  transformIgnorePatterns: ['node_modules/(?!until-async)(?!pretty-bytes/.*)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!\\.pnpm/(until-async|pretty-bytes)@|until-async|pretty-bytes)',
+  ],
   setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
   globalSetup: './test/global-setup.ts',
 };