feat(ui): migrate to pnpm

- update all scripts
- update the frontend GH action
- remove yarn-related files
- update ignores

Yarn classic + storybook has some weird module resolution issue due to how it hoists dependencies.

See https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092

When I did the `package.json` solution in this thread, it broke vite. Next option is to upgrade to yarn 3 or pnpm. I chose pnpm.

.github/workflows/lint-frontend.yml

@@ -21,13 +21,13 @@ jobs:
     if: github.event.pull_request.draft == false
     runs-on: ubuntu-22.04
     steps:
-      - name: Setup Node 18
-        uses: actions/setup-node@v3
+      - name: Setup Node 20
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
-      - uses: actions/checkout@v3
-      - run: 'yarn install --frozen-lockfile'
-      - run: 'yarn run lint:tsc'
-      - run: 'yarn run lint:madge'
-      - run: 'yarn run lint:eslint'
-      - run: 'yarn run lint:prettier'
+          node-version: '20'
+      - uses: actions/checkout@v4
+      - run: 'pnpm install --prefer-frozen-lockfile'
+      - run: 'pnpm run lint:tsc'
+      - run: 'pnpm run lint:madge'
+      - run: 'pnpm run lint:eslint'
+      - run: 'pnpm run lint:prettier'

README.md

@@ -125,8 +125,8 @@ and go to http://localhost:9090.
 
 You must have Python 3.10 through 3.11 installed on your machine. Earlier or
 later versions are not supported.
-Node.js also needs to be installed along with yarn (can be installed with
-the command `npm install -g yarn` if needed)
+Node.js also needs to be installed along with `pnpm` (can be installed with
+the command `npm install -g pnpm` if needed)
 
 1. Open a command-line window on your machine. The PowerShell is recommended for Windows.
 2. Create a directory to install InvokeAI into. You'll need at least 15 GB of free space:

invokeai/frontend/web/.prettierignore

@@ -12,3 +12,4 @@ index.html
 src/services/api/schema.d.ts
 static/
 src/theme/css/overlayscrollbars.css
+pnpm-lock.yaml

invokeai/frontend/web/.yarnrc

@@ -1,5 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-yarn-path ".yarn/releases/yarn-1.22.19.cjs"

invokeai/frontend/web/.yarnrc.yml

@@ -1 +0,0 @@
-yarnPath: .yarn/releases/yarn-1.22.19.cjs

invokeai/frontend/web/docs/README.md

@@ -85,14 +85,14 @@ The server must be started and available at <http://127.0.0.1:9090>.
 # from the repo root, start the server
 python scripts/invokeai-web.py
 # from invokeai/frontend/web/, run the script
-yarn typegen
+pnpm typegen
 ```
 
 ## Package Scripts
 
 See `package.json` for all scripts.
 
-Run with `yarn <script name>`.
+Run with `pnpm <script name>`.
 
 - `dev`: run the frontend in dev mode, enabling hot reloading
 - `build`: run all checks (madge, eslint, prettier, tsc) and then build the frontend
@@ -112,13 +112,13 @@ We encourage you to ping @psychedelicious and @blessedcoolant on [discord] if yo
 
 ### Dev Environment
 
-Install [node] and [yarn classic].
+Install [node] and [pnpm].
 
-From `invokeai/frontend/web/` run `yarn install` to get everything set up.
+From `invokeai/frontend/web/` run `pnpm i` to get everything set up.
 
 Start everything in dev mode:
 
-1. Start the dev server: `yarn dev`
+1. Start the dev server: `pnpm dev`
 2. Start the InvokeAI Nodes backend: `python scripts/invokeai-web.py # run from the repo root`
 3. Point your browser to the dev server address e.g. <http://localhost:5173/>
 
@@ -134,10 +134,10 @@ For a number of technical and logistical reasons, we need to commit UI build art
 
 If you submit a PR, there is a good chance we will ask you to include a separate commit with a build of the app.
 
-To build for production, run `yarn build`.
+To build for production, run `pnpm build`.
 
 [node]: https://nodejs.org/en/download/
-[yarn classic]: https://classic.yarnpkg.com/lang/en/
+[pnpm]: https://github.com/pnpm/pnpm
 [discord]: https://discord.gg/ZmtBAhwWhy
 [Redux Toolkit]: https://github.com/reduxjs/redux-toolkit
 [redux-remember]: https://github.com/zewish/redux-remember

invokeai/frontend/web/package.json

@@ -19,21 +19,21 @@
     "dist"
   ],
   "scripts": {
-    "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"",
-    "dev:host": "concurrently \"vite dev --host\" \"yarn run theme:watch\"",
-    "build": "yarn run lint && vite build",
+    "dev": "concurrently \"vite dev\" \"pnpm run theme:watch\"",
+    "dev:host": "concurrently \"vite dev --host\" \"pnpm run theme:watch\"",
+    "build": "pnpm run lint && vite build",
     "typegen": "node scripts/typegen.js",
     "preview": "vite preview",
     "lint:madge": "madge --circular src/main.tsx",
     "lint:eslint": "eslint --max-warnings=0 .",
     "lint:prettier": "prettier --check .",
     "lint:tsc": "tsc --noEmit",
-    "lint": "concurrently -g -n eslint,prettier,tsc,madge -c cyan,green,magenta,yellow \"yarn run lint:eslint\" \"yarn run lint:prettier\" \"yarn run lint:tsc\" \"yarn run lint:madge\"",
+    "lint": "concurrently -g -n eslint,prettier,tsc,madge -c cyan,green,magenta,yellow \"pnpm run lint:eslint\" \"pnpm run lint:prettier\" \"pnpm run lint:tsc\" \"pnpm run lint:madge\"",
     "fix": "eslint --fix . && prettier --log-level warn --write .",
-    "postinstall": "patch-package && yarn run theme",
+    "preinstall": "npx only-allow pnpm",
+    "postinstall": "patch-package && pnpm run theme",
     "theme": "chakra-cli tokens src/theme/theme.ts",
-    "theme:watch": "chakra-cli tokens src/theme/theme.ts --watch",
-    "up": "yarn upgrade-interactive --latest"
+    "theme:watch": "chakra-cli tokens src/theme/theme.ts --watch"
   },
   "madge": {
     "detectiveOptions": {
@@ -48,6 +48,8 @@
   "dependencies": {
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/layout": "^2.3.1",
+    "@chakra-ui/portal": "^2.1.0",
     "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
@@ -63,6 +65,8 @@
     "@nanostores/react": "^0.7.1",
     "@reduxjs/toolkit": "^1.9.7",
     "@roarr/browser-log-writer": "^1.3.0",
+    "@storybook/manager-api": "^7.6.4",
+    "@storybook/theming": "^7.6.4",
     "compare-versions": "^6.1.0",
     "dateformat": "^5.0.3",
     "framer-motion": "^10.16.4",
@@ -140,7 +144,6 @@
     "vite-plugin-css-injected-by-js": "^3.3.0",
     "vite-plugin-dts": "^3.6.3",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.2.1",
-    "yarn": "^1.22.19"
+    "vite-tsconfig-paths": "^4.2.1"
   }
 }