Upgrade Storybook to v8 (#17522)

GitOrigin-RevId: 9cc61614ef0a5661549a8842b61bc2ead9537939

services/web/.storybook/main.ts

@@ -6,6 +6,10 @@ const rootDir = path.resolve(__dirname, '..')
 // NOTE: must be set before webpack config is imported
 process.env.OVERLEAF_CONFIG = path.join(rootDir, 'config/settings.webpack.js')
 
+function getAbsolutePath(value: string): any {
+  return path.dirname(require.resolve(path.join(value, 'package.json')))
+}
+
 const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
@@ -16,19 +20,20 @@ const config: StorybookConfig = {
     path.join(rootDir, 'modules/**/stories/**/*.stories.{js,jsx,ts,tsx}'),
   ],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
   ],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath('@storybook/react-webpack5'),
     options: {},
   },
   docs: {
     autodocs: 'tag',
   },
-  babel: options => {
+  babel: (options: Record<string, any>) => {
     return {
       ...options,
       plugins: [

services/web/.storybook/manager.ts

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/addons'
-import { create } from '@storybook/theming'
+import { addons } from '@storybook/manager-api'
+import { create } from '@storybook/theming/create'
 
 import './manager.css'
 

services/web/frontend/stories/clone-project-modal.stories.jsx

@@ -43,6 +43,14 @@ export default {
   component: CloneProjectModal,
   args: {
     show: true,
+    projectName: 'Project 1',
+    projectTags: [
+      {
+        _id: 'tag-1',
+        name: 'Category 1',
+        color: '#c0ffee',
+      },
+    ],
   },
   argTypes: {
     handleHide: { action: 'close modal' },

services/web/package.json

@@ -212,15 +212,14 @@
     "@replit/codemirror-indentation-markers": "overleaf/codemirror-indentation-markers#1b1f93c0bcd04293aea6986aa2275185b2c56803",
     "@replit/codemirror-vim": "overleaf/codemirror-vim#53ce7363f80fba133d51ee861ca5e9b49af8e96b",
     "@sentry/browser": "^7.8.1",
-    "@storybook/addon-a11y": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/addons": "^7.5.1",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/react": "^7.5.1",
-    "@storybook/react-webpack5": "^7.5.1",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-a11y": "^8.0.4",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-webpack5": "^8.0.4",
+    "@storybook/theming": "^8.0.4",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/dom": "^9.3.0",
     "@testing-library/react": "^12.1.5",
@@ -341,7 +340,7 @@
     "sinon-chai": "^3.7.0",
     "sinon-mongoose": "^2.3.0",
     "socket.io-mock": "^1.3.1",
-    "storybook": "^7.4.0",
+    "storybook": "^8.0.4",
     "terser-webpack-plugin": "^5.3.9",
     "thread-loader": "^4.0.2",
     "timekeeper": "^2.2.0",