Replace yarn with pnpm (#5457)

Author: eikhr

.drone.yml

@@ -147,13 +147,16 @@ steps:
       - redis
       - api
     volumes:
-      - name: yarn_cache
-        path: /tmp/cache
+      - name: pnpm-store
+        path: /drone/src/.pnpm-store
     environment:
       CYPRESS_INSTALL_BINARY: 0
     commands:
       - apk --no-cache add curl
-      - yarn --frozen-lockfile --cache-folder /tmp/cache
+      - npm i -g corepack
+      - corepack enable
+      - pnpm config set store-dir .pnpm-store
+      - pnpm install --frozen-lockfile
 
   - name: build
     image: node:20-alpine
@@ -164,7 +167,9 @@ steps:
     depends_on:
       - setup
     commands:
-      - yarn build
+      - npm i -g corepack
+      - corepack enable
+      - pnpm build
 
   - name: test
     image: node:20-alpine
@@ -175,7 +180,9 @@ steps:
     depends_on:
       - setup
     commands:
-      - yarn test
+      - npm i -g corepack
+      - corepack enable
+      - pnpm test
 
   - name: lint
     image: node:20-alpine
@@ -186,7 +193,9 @@ steps:
     depends_on:
       - setup
     commands:
-      - yarn lint
+      - npm i -g corepack
+      - corepack enable
+      - pnpm lint
 
   - name: typescript
     image: node:20-slim
@@ -197,7 +206,9 @@ steps:
     depends_on:
       - setup
     commands:
-      - yarn types
+      - npm i -g corepack
+      - corepack enable
+      - pnpm types
     failure: ignore
 
   - name: install_cypress
@@ -211,7 +222,9 @@ steps:
     environment:
       CYPRESS_CACHE_FOLDER: /drone/src/.cypress_cache
     commands:
-      - yarn workspace lego-webapp cypress install
+      - npm i -g corepack
+      - corepack enable
+      - pnpm --filter lego-webapp exec cypress install
 
   - name: frontend
     image: node:20-alpine
@@ -228,7 +241,9 @@ steps:
       WS_URL: ws://api:8000
       ENVIRONMENT: ci
     commands:
-      - yarn workspace lego-webapp preview
+      - npm i -g corepack
+      - corepack enable
+      - pnpm --filter lego-webapp preview
 
   - name: cypress
     image: cypress/browsers:node-20.18.0-chrome-130.0.6723.69-1-ff-131.0.3-edge-130.0.2849.52-1
@@ -253,7 +268,9 @@ steps:
     commands:
       - ./wait-for-it.sh -t 180 frontend:3000
       - ./wait-for-it.sh -t 180 legocypresshelper:3030
-      - yarn workspace lego-webapp cypress run --record
+      - npm i -g corepack
+      - corepack enable
+      - pnpm --filter lego-webapp exec cypress run --record
 
   - name: docker
     image: plugins/docker
@@ -315,13 +332,13 @@ steps:
         - build
 
 volumes:
-  - name: yarn_cache
+  - name: pnpm-store
     host:
-      path: /tmp/drone-cache/yarn
+      path: /tmp/drone-cache/pnpm
 
 image_pull_secrets:
   - dockerconfigjson
 
 ---
 kind: signature
-hmac: 1f637c635932b8fe0fb1eb246ac53a05e18bd98a537d9f600aecb2701667773c
+hmac: a95a62f4328792b24179fb0d7e53961e15c410622f6cad6b359c0abe25bd9c1c

Dockerfile

@@ -1,12 +1,15 @@
 FROM node:20-alpine AS builder
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
 
 WORKDIR /app/
-COPY package.json yarn.lock ./
+COPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./
 COPY lego-webapp/package.json lego-webapp/package.json
 COPY packages packages
 
+RUN corepack enable
 RUN apk add curl # For Mazemap installation
-RUN yarn install
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 
 COPY . /app
 
@@ -24,7 +27,7 @@ ENV SENTRY_URL=${SENTRY_URL}
 ENV SENTRY_RELEASE=${RELEASE}
 ENV NODE_ENV=production
 
-RUN yarn build
+RUN pnpm build
 
 FROM node:20-alpine
 

README.md

@@ -17,12 +17,12 @@
 
 ## Quick Start
 
-> For all the alternative ways to run the project, you will need to run `yarn build` to compile [lego-bricks](#lego-bricks) the first time you run the project. After this, it will build automatically when changed.
+> For all the alternative ways to run the project, you will need to run `pnpm build` to compile [lego-bricks](#lego-bricks) the first time you run the project. After this, it will build automatically when changed.
 
 ```bash
-$ yarn # Install dependencies
-$ yarn build # Compile LEGO-BRICKS - only required the first time you run the project
-$ yarn dev:staging # Start webserver with development backend
+$ pnpm # Install dependencies
+$ pnpm build # Compile LEGO-BRICKS - only required the first time you run the project
+$ pnpm dev:staging # Start webserver with development backend
 ```
 
 Everything should be up and running on [localhost:3000](http://localhost:3000). The `:staging` suffix points the webserver at a hosted development backend.
@@ -32,16 +32,16 @@ Everything should be up and running on [localhost:3000](http://localhost:3000).
 First, you need to have the `django` backend running, see [webkom/lego](https://github.com/webkom/lego).
 
 ```bash
-$ yarn dev # Start webserver with local backend
+$ pnpm dev # Start webserver with local backend
 ```
 
 ### Server side rendering (Optional)
 
 In production (live) we use server side rendering. Due to bad hot reloading, we don't use it by default in dev. The server side renderer can be started by running:
 
 ```bash
-$ yarn build
-$ yarn preview # or yarn preview:staging
+$ pnpm build
+$ pnpm preview # or pnpm preview:staging
 ```
 
 ### Environment Variables
@@ -52,18 +52,18 @@ The `webserver` running the frontend can take many optional environment variable
 
 To facilitate using components from LEGO-WEBAPP in other projects, certain components have been split out to a separate package — LEGO-BRICKS. That package is stored within this repo, under `/packages/lego-bricks`.
 
-The current build structure requires that `lego-bricks` be compiled to run the project, which can be done either by running `yarn build` in the root directory, or by navigating to the package and running the same command there.
+The current build structure requires that `lego-bricks` be compiled to run the project, which can be done either by running `pnpm build` in the root directory, or by navigating to the package and running the same command there.
 
 ## Development
 
 We use some conventions and tools for our JavaScript/React development.
 
 - [prettier](https://github.com/prettier/prettier) for JS code formatter.
-  - `yarn prettier`
+  - `pnpm prettier`
 - [eslint](https://eslint.org/) for finding and fixing problems in your JavaScript code.
-  - `yarn lint`
+  - `pnpm lint`
 - [TypeScript](https://www.typescriptlang.org) for type checking.
-  - `yarn types`
+  - `pnpm types`
 
 We recommend getting plugins/extensions in `VSCode` or `Vim` so the code auto-formats, and automatically prompts you with errors. When you submit code to Github the CI server will automatically run all the commands above to check that your code is up to par.
 
@@ -74,16 +74,16 @@ We recommend getting plugins/extensions in `VSCode` or `Vim` so the code auto-fo
 Run all the tests and check for lint errors with the command:
 
 ```bash
-$ yarn test
+$ pnpm test
 ```
 
 For development you can run the tests continuously by using:
 
 ```bash
-$ yarn test:watch
+$ pnpm test:watch
 ```
 
-A coverage report can be generated by running `yarn test -- --coverage`.
+A coverage report can be generated by running `pnpm test -- --coverage`.
 
 </details>
 
@@ -118,26 +118,26 @@ docker compose restart lego_cypress_helper # Make sure the copy is of the clean
 Start up the node server
 
 ```bash
-$ yarn dev
+$ pnpm dev
 ```
 
 And start cypress in another terminal
 
 ```bash
-$ yarn cypress open
+$ pnpm cypress open
 ```
 
 **Alternative:** You can also run the node server with server side rendering enabled. This is how the tests are run on CI. To do this, you build and start the server
 
 ```bash
-$ yarn build
-$ yarn preview
+$ pnpm build
+$ pnpm preview
 ```
 
 And you run cypress headlessly (no visible browser) in another terminal
 
 ```bash
-yarn cypress run
+pnpm cypress run
 ```
 
 #### STRIPE
@@ -165,7 +165,7 @@ $ daphne lego.asgi:application -b 0.0.0.0 -p 8001
 Lastly, one has to run the frontend without captcha:
 
 ```bash
-$ SKIP_CAPTCHA=TRUE yarn dev
+$ SKIP_CAPTCHA=TRUE pnpm dev
 ```
 
 </details>

lego-webapp/package.json

@@ -7,16 +7,16 @@
   "license": "MIT",
   "scripts": {
     "dev": "vike dev",
-    "dev:staging": "API_URL=https://lego-staging.abakus.no/api/v1 BASE_URL=https://lego-staging.abakus.no WS_URL=wss://ws-staging.abakus.no CAPTCHA_KEY=1x00000000000000000000AA ENVIRONMENT=local_staging yarn dev",
-    "start": "echo '\\033[0;31mUse `yarn dev` instead' && yarn dev",
-    "start:staging": "echo '\\033[0;31mUse `yarn dev:staging` instead' && yarn dev:staging",
+    "dev:staging": "API_URL=https://lego-staging.abakus.no/api/v1 BASE_URL=https://lego-staging.abakus.no WS_URL=wss://ws-staging.abakus.no CAPTCHA_KEY=1x00000000000000000000AA ENVIRONMENT=local_staging pnpm dev",
+    "start": "echo '\\033[0;31mUse `pnpm dev` instead\\033[0m' && pnpm dev",
+    "start:staging": "echo '\\033[0;31mUse `pnpm dev:staging` instead\\033[0m' && pnpm dev:staging",
     "build": "vike build",
     "preview": "NODE_ENV=production node dist/server/index.mjs",
-    "preview:staging": "API_URL=https://lego-staging.abakus.no/api/v1 BASE_URL=https://lego-staging.abakus.no WS_URL=wss://ws-staging.abakus.no CAPTCHA_KEY=1x00000000000000000000AA ENVIRONMENT=local_staging yarn preview",
-    "ssr": "echo '\\033[0;31mUse `yarn preview` instead' && yarn preview",
-    "ssr:staging": "echo '\\033[0;31mUse `yarn preview:staging` instead' && yarn preview:staging",
+    "preview:staging": "API_URL=https://lego-staging.abakus.no/api/v1 BASE_URL=https://lego-staging.abakus.no WS_URL=wss://ws-staging.abakus.no CAPTCHA_KEY=1x00000000000000000000AA ENVIRONMENT=local_staging pnpm preview",
+    "ssr": "echo '\\033[0;31mUse `pnpm preview` instead\\033[0m' && pnpm preview",
+    "ssr:staging": "echo '\\033[0;31mUse `pnpm preview:staging` instead\\033[0m' && pnpm preview:staging",
     "test": "vitest run",
-    "lint": "yarn lint:js && yarn lint:prettier",
+    "lint": "pnpm lint:js && pnpm lint:prettier",
     "lint:js": "eslint .",
     "lint:prettier": "prettier '**/*.{ts,tsx,js,css,md,json}' --check",
     "types": "tsc --noEmit",
@@ -32,35 +32,46 @@
     "@stripe/react-stripe-js": "^3.1.1",
     "@stripe/stripe-js": "^5.7.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@webkom/lego-bricks": "^1.3.6",
-    "@webkom/lego-editor": "^2.6.2",
-    "@webkom/mazemap": "^2.2.1",
+    "@webkom/lego-bricks": "workspace:*",
+    "@webkom/lego-editor": "^2.6.3",
+    "@webkom/mazemap": "workspace:*",
     "@webkom/react-meter-bar": "^2.0.0",
     "@webkom/react-prepare": "^1.2.0",
+    "classnames": "^2.5.1",
     "cookie": "^1.0.2",
+    "cropperjs": "^1.6.2",
     "express": "^4.21.2",
     "file-saver": "^2.0.5",
     "final-form": "^4.20.10",
     "final-form-arrays": "^3.1.0",
     "fuzzy": "^0.1.3",
+    "immer": "^10.1.1",
     "isomorphic-fetch": "^3.0.0",
     "js-cookie": "^3.0.5",
     "jsdom": "^26.0.0",
     "jszip": "^3.10.1",
     "jwt-decode": "^4.0.0",
     "linkify-react": "^4.2.0",
     "linkifyjs": "^4.2.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "catalog:",
     "minireset.css": "^0.0.7",
+    "moment": "^2.30.1",
     "moment-timezone": "^0.5.47",
     "node-htmldiff": "^0.9.4",
     "normalizr": "^3.6.2",
-    "react": "^18.3.1",
+    "postcss-custom-media": "^11.0.3",
+    "qs": "^6.14.0",
+    "react": "catalog:",
+    "react-aria-components": "catalog:",
     "react-canvas-confetti": "^2.0.7",
     "react-cropper": "^2.3.3",
-    "react-dom": "^18.3.1",
+    "react-dom": "catalog:",
+    "react-dropzone": "^14.3.8",
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.4",
     "react-helmet-async": "^2.0.5",
+    "react-image-crop": "^11.0.7",
     "react-infinite-scroller": "^1.2.6",
     "react-overlays": "^5.2.1",
     "react-phone-number-input": "^3.4.12",
@@ -77,6 +88,7 @@
     "react-youtube": "^10.1.0",
     "recharts": "^2.15.1",
     "redux-logger": "^3.0.6",
+    "reselect": "^5.1.1",
     "slugify": "^1.6.6",
     "validator": "^13.12.0",
     "vaul": "^1.1.2",
@@ -90,30 +102,32 @@
     "@eslint/js": "^9.20.0",
     "@sentry/vite-plugin": "^3.1.2",
     "@types/cookie-parser": "^1.4.8",
+    "@types/express": "^5.0.0",
     "@types/isomorphic-fetch": "^0.0.39",
     "@types/js-cookie": "^3.0.6",
     "@types/jsdom": "^21.1.7",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "@types/redux-logger": "^3.0.13",
     "@types/validator": "^13.12.2",
+    "@typescript-eslint/parser": "^8.26.1",
     "cypress": "^14.1.0",
     "enzyme": "^3.11.0",
-    "eslint": "^9.20.1",
+    "eslint": "catalog:",
     "eslint-config-prettier": "^10.0.1",
     "eslint-import-resolver-typescript": "^3.8.2",
     "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-import-x": "^4.6.1",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.15.0",
-    "prettier": "^3.5.1",
-    "typescript": "^5.7.3",
+    "typescript": "catalog:",
     "typescript-eslint": "^8.24.0",
     "utility-types": "^3.11.0",
     "vike": "^0.4.223",
-    "vite": "^6.1.0",
-    "vite-css-modules": "^1.8.4"
+    "vite": "catalog:",
+    "vite-css-modules": "^1.8.4",
+    "vitest": "catalog:"
   },
   "prettier": {
     "singleQuote": true

lego-webapp/pages/lending/@lendableObjectId/request/new/+Page.tsx

@@ -9,7 +9,7 @@ import {
   LegoFinalForm,
   SubmitButton,
   TextInput,
-} from 'lego-webapp/components/Form';
+} from '~/components/Form';
 import HTTPError from '~/components/errors/HTTPError';
 import { createLendingRequest } from '~/redux/actions/LendingRequestActions';
 import { useAppDispatch } from '~/redux/hooks';