Upgrade to storybook v8

jest.config.js

@@ -37,6 +37,9 @@ module.exports = {
   transformIgnorePatterns: [`node_modules/(?!.pnpm|${esModules})`],
   coverageReporters: ['text-summary', 'lcov'],
   testPathIgnorePatterns: ['e2e'],
+  testEnvironmentOptions: {
+    customExportConditions: [''],
+  },
   setupFilesAfterEnv: [
     '<rootDir>/web/packages/build/jest/setupTests.ts',
     '<rootDir>/web/packages/build/jest/customMatchers.ts',

package.json

@@ -11,8 +11,8 @@
     "build-term": "pnpm --filter=@gravitational/teleterm build",
     "start-term": "pnpm --filter=@gravitational/teleterm start",
     "package-term": "pnpm --filter=@gravitational/teleterm package",
-    "storybook": "start-storybook -p 9002 -c web/.storybook -s web/.storybook/public",
-    "storybook-smoke-test": "pnpm storybook --ci --smoke-test",
+    "storybook": "storybook dev -p 9002 -c web/.storybook --https --ssl-cert=web/certs/server.crt --ssl-key=web/certs/server.key",
+    "storybook-smoke-test": "storybook dev -p 9002 -c web/.storybook --ci --smoke-test",
     "test": "jest",
     "test-coverage": "jest --coverage && web/scripts/print-coverage-link.sh",
     "test-update-snapshot": "pnpm run test --updateSnapshot",
@@ -36,12 +36,16 @@
     }
   },
   "devDependencies": {
-    "@storybook/react": "^6.5.16",
+    "@gravitational/build": "workspace:*",
+    "@storybook/components": "^8.2.5",
+    "@storybook/addon-toolbars": "^8.2.5",
+    "@storybook/react": "^8.2.5",
+    "@storybook/react-vite": "^8.2.5",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.11",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-highlight": "^0.12.8",
@@ -50,9 +54,10 @@
     "@types/wicg-file-system-access": "^2023.10.5",
     "jest": "^29.7.0",
     "jsdom-testing-mocks": "^1.13.0",
-    "msw": "^0.47.4",
-    "msw-storybook-addon": "^1.8.0",
+    "msw": "^2.3.1",
+    "msw-storybook-addon": "^2.0.3",
     "prettier": "^3.3.2",
+    "storybook": "^8.2.5",
     "typescript": "^5.5.2",
     "vite": "^5.3.2"
   },
@@ -87,5 +92,10 @@
     "tslib": "^2.6.3",
     "whatwg-fetch": "^3.6.20"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "msw": {
+    "workerDirectory": [
+      "web/.storybook/public"
+    ]
+  }
 }

web/.storybook/main.ts

@@ -0,0 +1,49 @@
+/*
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const enterpriseTeleportExists = fs.existsSync(
+  path.join(__dirname, '/../../e/web')
+);
+
+function createStoriesPaths() {
+  const stories = ['../packages/**/*.story.@(ts|tsx|js|jsx)'];
+
+  // include enterprise stories if available (**/* pattern ignores dot dir names)
+  if (enterpriseTeleportExists) {
+    stories.unshift('../../e/web/**/*.story.@(ts|tsx|js|jsx)');
+  }
+
+  return stories;
+}
+
+const config: StorybookConfig = {
+  stories: createStoriesPaths(),
+  framework: {
+    name: '@storybook/react-vite',
+    options: { builder: { viteConfigPath: 'web/.storybook/vite.config.mts' } },
+  },
+  staticDirs: ['public'],
+  addons: ['@storybook/addon-toolbars'],
+};
+
+export default config;