ethereum · pettinarip · Jun 3, 2025 · May 30, 2025 · May 30, 2025 · May 30, 2025
@@ -12,6 +12,7 @@
 "dependencies 📦":
   - package.json
   - yarn.lock
+  - pnpm-lock.yaml
 
 "config ⚙️":
   - i18n.config.json

@@ -31,9 +31,18 @@ jobs:
         uses: actions/checkout@v2
         with:
           fetch-depth: 0 # 👈 Required to retrieve git history
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'pnpm'
       - name: Install deps
         # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
-        run: yarn
+        run: pnpm install
       - name: Publish to Chromatic
         # 👇 Adds Chromatic as a step in the workflow
         uses: chromaui/action@v1

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.pnpm-store/
 
 # testing
 /coverage
@@ -23,6 +24,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log
+
+pnpm-lock.yaml.bak
 
 # local env files
 .env*.local
@@ -60,4 +64,3 @@ src/data/crowdin/bucketsAwaitingReviewReport.csv
 # Storybook
 build-storybook.log
 storybook-static
-
@@ -4,3 +4,4 @@ yarn.lock
 package-lock.json
 public
 build
+pnpm-lock.yaml
@@ -4,17 +4,10 @@ import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
 import type { StorybookConfig } from "@storybook/nextjs"
 
 /**
- * Note regarding package.json settings related to Storybook:
- *
- * There is a resolutions option set for the package `jackspeak`. This is related to a
- * workaround provided to make sure storybook ( as of v7.5.2) works correctly with
- * Yarn v1
- *
- * Reference: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092
- *
- * The primary recommendation is to upgrade to Yarn 3 if possible
+ * Storybook configuration for the ethereum.org website
+ * This loads our components as stories and configures the necessary
+ * webpack settings for proper rendering
  */
-
 const config: StorybookConfig = {
   stories: [
     "../src/components/**/*.stories.{ts,tsx}",

@@ -1,4 +1,4 @@
-import pickBy from "lodash/pickBy"
+import { pickBy } from "lodash"
 
 import { baseLocales } from "./next-intl"
 import { breakpointSet } from "./preview"

@@ -70,14 +70,52 @@ git fetch upstream
 git merge upstream/dev
 ```
 
-2. Install dependencies
+2. Prepare package manager
 
-We recommend using a node manager to use multiple node versions in your system. We use [Volta](https://volta.sh/). In case you don't use a manager or you use `nvm`, you can check the currently supported versions under the `"volta"` section on our `package.json` file.
+We've upgraded to pnpm to speed up development experience and improve dependency management.
+
+We recommend using a [node manager such as nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#intro) to use multiple node versions in your system. We have a `.nvmrc` file that declares the canonical Node.js version for this project. If you use `nvm`, you can run `nvm use` to automatically switch to the correct version.
+
+**Use current node version (recommended)**
+
+```sh
+nvm use
+```
+
+Corepack is a tool that allows you to use package managers like pnpm, yarn, and npm without needing to install them globally. It ensures that the correct version of the package manager is used for your project.
+
+**Enable corepack (recommended):**
+
+```sh
+corepack enable
+```
+
+3. Install dependencies
+
+```sh
+pnpm install
+```
+
+#### Migrating from yarn to pnpm
+
+If you previously used `yarn` to install dependencies, you can safely migrate to `pnpm` by running the following commands:
 
 ```sh
-yarn
+# Remove yarn.lock file
+rm yarn.lock
+
+# Remove node_modules directory
+rm -rf node_modules
+
+# Clean yarn cache (optional)
+yarn cache clean
+
+# Install dependencies with pnpm
+pnpm install
 ```
 
+This will cleanly switch the project working directory from yarn to pnpm without leaving any residual yarn configuration.
+
 ### 4. Make awesome changes!
 
 1. Create new branch for your changes
@@ -89,7 +127,7 @@ git checkout -b new_branch_name
 2. Start developing!
 
 ```sh
-yarn dev
+pnpm dev
 ```
 
 - Open this directory in your favorite text editor / IDE, and see your changes live by visiting `localhost:3000` from your browser

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import { notFound } from "next/navigation"
 import { getMessages, setRequestLocale } from "next-intl/server"
 

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,7 +1,7 @@
 "use client"
 
 import { BaseHTMLAttributes } from "react"
-import shuffle from "lodash/shuffle"
+import { shuffle } from "lodash"
 
 import { LearningTool } from "@/lib/types"
 

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,5 +1,5 @@
 import { Suspense } from "react"
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import { IBM_Plex_Mono, Inter } from "next/font/google"
 import { notFound } from "next/navigation"
 import { getMessages, setRequestLocale } from "next-intl/server"

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import { getTranslations } from "next-intl/server"
 
 import { Lang } from "@/lib/types"

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import { getMessages, setRequestLocale } from "next-intl/server"
 
 import { Lang } from "@/lib/types"

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -1,4 +1,4 @@
-import pick from "lodash.pick"
+import { pick } from "lodash"
 import {
   getMessages,
   getTranslations,

@@ -14,7 +14,7 @@ Check out [Intro to Storybook](https://storybook.js.org/tutorials/intro-to-story
 
 ## Spinning up the Storybook server
 
-It's as easy as running `yarn storybook` to boot up a dedicated localhost to see all the components that have stories.
+It's as easy as running `pnpm storybook` to boot up a dedicated localhost to see all the components that have stories.
 
 ## Setting up a component's stories
 

@@ -1,6 +1,6 @@
 # Locales generation process
 
-Every time `yarn build` or `yarn start` is executed, the following process is
+Every time `pnpm build` or `pnpm start` is executed, the following process is
 going to be triggered as well:
 
 <img src="./locales.png">

@@ -1,7 +1,7 @@
 # The ethereum.org website stack
 
 - [Node.js](https://nodejs.org/)
-- [Yarn package manager](https://yarnpkg.com/cli/install)
+- [pnpm](https://pnpm.io/) - Fast, disk space efficient package manager
 - [NextJS](https://nextjs.org/)
   - React framework that provides some goodies out of the box (pages router, SSG, SSR, i18n support, Image component, etc)
   - Configurable in `next.config.js`

@@ -7,7 +7,7 @@
   publish = ".next"
 
   # Default build command.
-  command = "yarn build"
+  command = "pnpm build"
 
 [build.environment]
   NEXT_FORCE_EDGE_IMAGES="true"
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,3 +4,4 @@ yarn.lock @@
     package-lock.json
     public
     build
+    pnpm-lock.yaml