Declare missing peers so pnpm global virtual store works (#67855)

* Declare missing peers so pnpm global virtual store works

* Add storybook/react-vite for storybook

* Pin to major versions

* Fix Storybook not working with pnpm virtual store

pnpm-lock.yaml

@@ -7,6 +7,8 @@ settings:
 overrides:
   yauzl: ^3.3.1
 
+packageExtensionsChecksum: sha256-wJryviKpT2yBHdvlJDdnwzUQ1C8SWN6MXUeQYXbrNIo=
+
 pnpmfileChecksum: sha256-TR6zTaL3sXZMyu+QoRdd27aSUTH6sH0gp+M2XjxgTUI=
 
 importers:
@@ -30,7 +32,7 @@ importers:
         version: 1.14.4
       '@hookform/resolvers':
         specifier: ^5.4.0
-        version: 5.4.0([email protected]([email protected]))
+        version: 5.4.0([email protected]([email protected]))([email protected])
       '@lezer/highlight':
         specifier: ^1.2.3
         version: 1.2.3
@@ -124,10 +126,10 @@ importers:
         version: link:web/packages/build
       '@storybook/addon-vitest':
         specifier: ^10.4.1
-        version: 10.4.1([email protected]([email protected]))([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))
+        version: 10.4.1([email protected]([email protected]))([email protected])([email protected])
       '@storybook/react-vite':
         specifier: ^10.4.1
-        version: 10.4.1(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected])([email protected]([email protected]))([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))
+        version: 10.4.1(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected])([email protected]([email protected]))([email protected])([email protected])([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))
       '@testing-library/jest-dom':
         specifier: ^6.9.1
         version: 6.9.1
@@ -172,7 +174,7 @@ importers:
         version: 5.5.0(@testing-library/[email protected])([email protected]([email protected]))
       eslint-plugin-storybook:
         specifier: ^10.4.1
-        version: 10.4.1([email protected]([email protected]))([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))([email protected])
+        version: 10.4.1([email protected]([email protected]))([email protected])([email protected])
       eslint-plugin-testing-library:
         specifier: 7.16.2
         version: 7.16.2([email protected]([email protected]))([email protected])
@@ -205,7 +207,7 @@ importers:
         version: 5.5.1
       storybook:
         specifier: ^10.4.1
-        version: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+        version: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@storybook/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
       svgo:
         specifier: ^4.0.1
         version: 4.0.1
@@ -404,7 +406,7 @@ importers:
         version: 6.0.0
       create-react-class:
         specifier: ^15.6.3
-        version: 15.7.0
+        version: 15.7.0([email protected])
       events:
         specifier: 3.3.0
         version: 3.3.0
@@ -2169,6 +2171,7 @@ packages:
     resolution: {integrity: sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==}
     peerDependencies:
       react-hook-form: ^7.55.0
+      zod: '*'
 
   '@humanfs/[email protected]':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
@@ -4503,6 +4506,8 @@ packages:
 
   [email protected]:
     resolution: {integrity: sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==}
+    peerDependencies:
+      react: '*'
 
   [email protected]:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
@@ -6741,6 +6746,7 @@ packages:
     resolution: {integrity: sha512-V1Zd2e+gBFufqAQVZ1JR8KLqALsEZ3JYSBnWwQbKa6zCfWWanR6AFMyuOkLt2gZOgGp3h2Riuz88pGNVTQSG0A==}
     hasBin: true
     peerDependencies:
+      '@storybook/react-vite': '*'
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       prettier: ^2 || ^3
       vite-plus: ^0.1.15
@@ -9076,10 +9082,11 @@ snapshots:
       protobufjs: 7.6.1
       yargs: 17.7.2
 
-  '@hookform/[email protected]([email protected]([email protected]))':
+  '@hookform/[email protected]([email protected]([email protected]))([email protected])':
     dependencies:
       '@standard-schema/utils': 0.3.0
       react-hook-form: 7.76.1([email protected])
+      zod: 4.4.3
 
   '@humanfs/[email protected]': {}
 
@@ -10112,19 +10119,19 @@ snapshots:
 
   '@standard-schema/[email protected]': {}
 
-  '@storybook/[email protected]([email protected]([email protected]))([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))':
+  '@storybook/[email protected]([email protected]([email protected]))([email protected])([email protected])':
     dependencies:
       '@storybook/global': 5.0.0
       '@storybook/icons': 2.0.2([email protected]([email protected]))([email protected])
-      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@storybook/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
     transitivePeerDependencies:
       - react
       - react-dom
 
-  '@storybook/[email protected]([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))':
+  '@storybook/[email protected]([email protected])([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))':
     dependencies:
-      '@storybook/csf-plugin': 10.4.1([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))
-      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@storybook/csf-plugin': 10.4.1([email protected])([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))
+      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@storybook/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
       ts-dedent: 2.2.0
       vite: 8.0.16(@types/[email protected])([email protected])([email protected])([email protected])([email protected])
     transitivePeerDependencies:
@@ -10132,9 +10139,9 @@ snapshots:
       - rollup
       - webpack
 
-  '@storybook/[email protected]([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))':
+  '@storybook/[email protected]([email protected])([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))':
     dependencies:
-      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@storybook/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
       unplugin: 2.3.11
     optionalDependencies:
       esbuild: 0.28.0
@@ -10147,28 +10154,28 @@ snapshots:
       react: 19.2.6
       react-dom: 19.2.6([email protected])
 
-  '@storybook/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))':
+  '@storybook/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])([email protected])':
     dependencies:
       react: 19.2.6
       react-dom: 19.2.6([email protected])
-      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@storybook/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
     optionalDependencies:
       '@types/react': 19.2.15
       '@types/react-dom': 19.2.3(@types/[email protected])
 
-  '@storybook/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected])([email protected]([email protected]))([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))':
+  '@storybook/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected])([email protected]([email protected]))([email protected])([email protected])([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))':
     dependencies:
       '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))
       '@rollup/pluginutils': 5.3.0
-      '@storybook/builder-vite': 10.4.1([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))
-      '@storybook/react': 10.4.1(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))([email protected])
+      '@storybook/builder-vite': 10.4.1([email protected])([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))
+      '@storybook/react': 10.4.1(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])([email protected])([email protected])
       empathic: 2.0.1
       magic-string: 0.30.21
       react: 19.2.6
       react-docgen: 8.0.3
       react-dom: 19.2.6([email protected])
       resolve: 1.22.12
-      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@storybook/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
       tsconfig-paths: 4.2.0
       vite: 8.0.16(@types/[email protected])([email protected])([email protected])([email protected])([email protected])
     transitivePeerDependencies:
@@ -10180,15 +10187,15 @@ snapshots:
       - typescript
       - webpack
 
-  '@storybook/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))([email protected])':
+  '@storybook/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])([email protected])([email protected])':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 10.4.1(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))
+      '@storybook/react-dom-shim': 10.4.1(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])([email protected])
       react: 19.2.6
       react-docgen: 8.0.3
       react-docgen-typescript: 2.4.0([email protected])
       react-dom: 19.2.6([email protected])
-      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@storybook/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
     optionalDependencies:
       '@types/react': 19.2.15
       '@types/react-dom': 19.2.3(@types/[email protected])
@@ -11358,10 +11365,11 @@ snapshots:
       buffer: 5.7.1
     optional: true
 
-  [email protected]:
+  [email protected]([email protected]):
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
+      react: 19.2.6
 
   [email protected]: {}
 
@@ -11950,11 +11958,11 @@ snapshots:
     optionalDependencies:
       '@testing-library/dom': 10.1.0
 
-  [email protected]([email protected]([email protected]))([email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]))([email protected]):
+  [email protected]([email protected]([email protected]))([email protected])([email protected]):
     dependencies:
       '@typescript-eslint/utils': 8.60.0([email protected]([email protected]))([email protected])
       eslint: 10.4.1([email protected])
-      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
+      storybook: 10.4.1(@emnapi/[email protected])(@emnapi/[email protected])(@storybook/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected])
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -14026,10 +14034,11 @@ snapshots:
 
   [email protected]: {}
 
-  [email protected](@emnapi/[email protected])(@emnapi/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]):
+  [email protected](@emnapi/[email protected])(@emnapi/[email protected])(@storybook/[email protected])(@testing-library/[email protected])(@types/[email protected])([email protected]([email protected]))([email protected]):
     dependencies:
       '@storybook/global': 5.0.0
       '@storybook/icons': 2.0.2([email protected]([email protected]))([email protected])
+      '@storybook/react-vite': 10.4.1(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected])([email protected]([email protected]))([email protected])([email protected])([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected]))
       '@testing-library/jest-dom': 6.9.1
       '@testing-library/user-event': 14.6.1(@testing-library/[email protected])
       '@vitest/expect': 3.2.4

pnpm-workspace.yaml

@@ -33,6 +33,18 @@ peerDependencyRules:
     # This dep is needed only when using Squirrel.Windows as an installer in electron-build which we
     # don't use. https://www.electron.build/squirrel-windows.html
     - electron-builder-squirrel-windows
+# create-react-class and @hookform/resolvers import react/zod without declaring them, which fails to
+# resolve under the global virtual store. Declare the peers so pnpm co-locates them.
+packageExtensions:
+  create-react-class@15:
+    peerDependencies:
+      react: '*'
+  '@hookform/resolvers@5':
+    peerDependencies:
+      zod: '*'
+  storybook@10:
+    peerDependencies:
+      '@storybook/react-vite': '*'
 # shellEmulator enables cross-platform scripting, allowing POSIX-style shell variables to work on Windows.
 shellEmulator: true
 # packageImportMethod avoids an issue building the web UI in docker on mac. It does not seem to

web/.storybook/main.mts

@@ -43,7 +43,7 @@ const config: StorybookConfig = {
     options: { builder: { viteConfigPath: 'web/.storybook/vite.config.mts' } },
   },
   staticDirs: ['public'],
-  addons: [],
+  addons: ['@storybook/addon-vitest'],
   viteFinal(config) {
     return {
       ...config,

web/.storybook/vite.config.mts

@@ -1,4 +1,7 @@
-import { defineConfig } from 'vite';
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
+
+import { defineConfig, type Plugin } from 'vite';
 
 import { reactPlugin } from '@gravitational/build/vite/react.mjs';
 
@@ -6,6 +9,44 @@ export default defineConfig(({ mode }) => ({
   resolve: {
     tsconfigPaths: true,
   },
-  plugins: [reactPlugin(mode)],
+  plugins: [reactPlugin(mode), serveStorybookMockerRuntime()],
   assetsInclude: ['**/shared/libs/ironrdp/**/*.wasm'],
 }));
+
+/**
+ * Storybook's mocker runtime is a small JavaScript file that Storybook injects into the
+ * preview iframe to enable its mocking features.
+ *
+ * When pnpm's virtual store is used, this file does not load (404), so we serve it ourselves.
+ */
+function serveStorybookMockerRuntime(): Plugin {
+  const ENTRY_PATH = '/vite-inject-mocker-entry.js';
+  const require = createRequire(import.meta.url);
+
+  let runtime: string | null = null;
+
+  return {
+    name: 'teleport:storybook-mocker-runtime-dev',
+    enforce: 'pre',
+    apply: 'serve',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        if (req.url === ENTRY_PATH) {
+          if (runtime === null) {
+            runtime = fs.readFileSync(
+              require.resolve('storybook/internal/mocking-utils/mocker-runtime'),
+              'utf-8'
+            );
+          }
+
+          res.setHeader('Content-Type', 'application/javascript');
+          res.end(runtime);
+
+          return;
+        }
+
+        next();
+      });
+    },
+  };
+}