Replace Yarn with pnpm #5545

MikeKingdom · 2025-11-14T21:36:23Z

These changes replace yarn as the package manager with pnpm.

With these changes, many common dependencies can be managed in a "catalog" (defined in pnpm-workspace.yaml).

By default, pnpm is more strict and doesn't allow packages to be "hoisted" like yarn does. It's possible to configure pnpm to allow hoisting, but it's generally better to avoid it for cleaner dependencies.

One situation where hoisting is currently happening is how aries-core has a storybook whose stories refer to components in aries-site. This basically causes a circular dependency between aries-core and aries-site. Lint also currently fails on these stories with pnpm. The plan to fix this is move the examples from aries-site to aries-core so they can be exported within the workspace. aries-site will reference them from there. The storybook for them can then be moved out of aries-core to a standalone storybook in apps (where it can also reference those examples now from aries-core. This will likely be done in a follow on PR.

Deploy Preview

What does this PR do?

What are the relevant issues?

Where should the reviewer start?

How should this be manually tested?

Any background context you want to provide?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

… catalog

changeset-bot · 2025-11-14T21:36:26Z

⚠️ No Changeset found

Latest commit: a011de9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify · 2025-11-14T21:36:27Z

✅ Deploy Preview for hpe-theme-preview ready!

Name	Link
🔨 Latest commit	`a011de9`
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-theme-preview/deploys/6920f23036b08a0008a95c95
😎 Deploy Preview	https://deploy-preview-5545--hpe-theme-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-11-14T21:36:28Z

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Name	Link
🔨 Latest commit	`a011de9`
🔍 Latest deploy log	https://app.netlify.com/projects/unrivaled-bublanina-3a9bae/deploys/6920f2306eb72b000870e27c
😎 Deploy Preview	https://deploy-preview-5545--unrivaled-bublanina-3a9bae.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-11-14T21:37:33Z

❌ Deploy Preview for hpe-design-icons-grommet failed. Why did it fail? →

Name	Link
🔨 Latest commit	`a011de9`
🔍 Latest deploy log	https://app.netlify.com/projects/hpe-design-icons-grommet/deploys/6920f230952bad00085703c4

.github/workflows/codemod-test.yml

.github/workflows/sync-tokens-to-figma.yml

README.md

jcfilben · 2025-11-20T20:20:08Z

shared/hooks/src/__tests__/setup.ts

 })();

-global.sessionStorage = mockSessionStorage;
+globalThis.sessionStorage = mockSessionStorage;


Was curious about this change so looked it up, adding context for other reviewers:

jcfilben · 2025-11-20T20:23:56Z

sandbox/grommet-app/src/themes/theme.jsx

+          color: global.hpe.focusIndicator.boxShadow.color, // focusBoxShadowParts[global.hpe.focusIndicator.boxShadowParts.length - 1],
+          size: global.hpe.focusIndicator.boxShadow.spread, // focusBoxShadowParts[focusBoxShadowParts.length - 2],


Context for other reviewers grommet/grommet-theme-hpe#549

Thanks for the reference. This was failing and best I could tell it need to be removed

sandbox/grommet-app/src/pages/sticker-sheet/components/Compare.jsx

Sulaymon333

@MikeKingdom Thank you for putting this PR up. I left some few comments.

Sulaymon333 · 2025-11-21T18:08:16Z

aries-core/package.json

    "@types/react": "^19.1.10",
    "@types/react-dom": "^19.1.7",


Suggested change

"@types/react": "catalog:",

"@types/react-dom": "catalog:",

Should we consider using these packages from the workspace catalogue as well since they are pretty much the same versions.

Makes sense. There's more tuning of dependencies to do over time also.

Sulaymon333 · 2025-11-21T18:16:06Z

aries-site/src/pages/foundation/developer-guidance.mdx

 ### Applying the HPE theme

-Once your project is set up with ReactJS and Grommet, make sure you have the latest [grommet-theme-hpe](https://github.com/grommet/grommet-theme-hpe) theme via `npm` or `yarn`. This will help ensure that your application is aligned with the HPE Design System colors, fonts, and default component styles.
+Once your project is set up with ReactJS and Grommet, make sure you have the latest [grommet-theme-hpe](https://github.com/grommet/grommet-theme-hpe) theme via `npm`, `pnpm` or `yarn`. This will help ensure that your application is aligned with the HPE Design System colors, fonts, and default component styles.


The instruction here seems unclear to me. Did we intend to say that

"make sure you have the latest HPE theme from grommet-theme-hpe theme via any of the following commands

pnpm install grommet-theme-hpe // or bun add grommet-theme-hpe // or yarn add grommet-theme-hpe // or npm install grommet-theme-hpe

"

Instead of

make sure you have the latest grommet-theme-hpe theme via npm, pnpm or yarn.

We can tune the guidance later. I'll consider that a little out of scope with this PR since it's mainly focused on our internal build

…rn-to-pnpm

MikeKingdom added 7 commits November 13, 2025 13:28

Replace yarn with pnpm

6b16a74

Fix up some test, lint and storybook issues

4195188

Add catalog dependencies for aries-core

ed96c59

change aries-site to use catalog deps

3688b0c

change root, design-tokens-manager and icons/grommet to use deps from…

ad07b87

… catalog

change sandbox deps to come from catalog

61609e4

change shared deps to come from catalog

b3cbcf7

MikeKingdom added 9 commits November 14, 2025 14:42

enable pnpm in codemod-test.yml workflow

5a1c1b1

enable pnpm in testcafe.yml workflow

46abff9

ignore stable integrity check

c0cba85

prefix most commands with npx

cc0c091

move tsx to root devDependencies

aff7c96

Adjust dependencies and build commands

d4bf4c1

fix workspace definitions for icons

05ab5c5

added back grommet at the root for icons storybook

b956e26

disabled aries-core lint in husky for now

f7f7ee2

MikeKingdom marked this pull request as ready for review November 19, 2025 19:54

MikeKingdom requested review from Sulaymon333, britt6612, halocline and jcfilben November 19, 2025 19:54

jcfilben reviewed Nov 20, 2025

View reviewed changes

Sulaymon333 reviewed Nov 21, 2025

View reviewed changes

MikeKingdom added 3 commits November 21, 2025 11:33

remove unneeded dir in codemod-test.yml

36f9a36

Merge branch 'master' of github.com:grommet/hpe-design-system into ya…

ad33420

…rn-to-pnpm

review feedback

850d7d4

MikeKingdom added 2 commits November 21, 2025 16:05

tweak testcafe ci

981a1ab

ignore version check for the stable packages

a011de9

		color: global.hpe.focusIndicator.boxShadow.color, // focusBoxShadowParts[global.hpe.focusIndicator.boxShadowParts.length - 1],
		size: global.hpe.focusIndicator.boxShadow.spread, // focusBoxShadowParts[focusBoxShadowParts.length - 2],

Replace Yarn with pnpm #5545

Are you sure you want to change the base?

Replace Yarn with pnpm #5545

Uh oh!

Conversation

MikeKingdom commented Nov 14, 2025

What does this PR do?

What are the relevant issues?

Where should the reviewer start?

How should this be manually tested?

Any background context you want to provide?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

Uh oh!

changeset-bot bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

netlify bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hpe-theme-preview ready!

Uh oh!

netlify bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!

Uh oh!

netlify bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for hpe-design-icons-grommet failed. Why did it fail? →

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jcfilben Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

jcfilben Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

MikeKingdom Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Sulaymon333 left a comment

Choose a reason for hiding this comment

Uh oh!

Sulaymon333 Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

MikeKingdom Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Sulaymon333 Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

MikeKingdom Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot bot commented Nov 14, 2025 •

edited

Loading

netlify bot commented Nov 14, 2025 •

edited

Loading

netlify bot commented Nov 14, 2025 •

edited

Loading

netlify bot commented Nov 14, 2025 •

edited

Loading