chore: fix storybook config / migrate to storybook 8 (#1348)

* chore: move to storybook 8

* chore: replace storybook-tailwind-dark-mode with @storybook/addon-themes

* chore: use react-docgen-typescript instead of react-docgen

https://storybook.js.org/blog/storybook-8/#improved-react-and-vue-control-autogeneration
https://storybook.js.org/docs/api/main-config-typescript#reactdocgen
storybookjs/storybook#26496

* chore: upgrade eslint-plugin-storybook

libs/shared/ui/.storybook/main.ts

@@ -2,7 +2,9 @@ import type { StorybookConfig } from '@storybook/react-webpack5'
 
 const config: StorybookConfig = {
   stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: ['@storybook/addon-essentials', 'storybook-tailwind-dark-mode', '@nx/react/plugins/storybook'],
+  // '@nx/react/plugins/storybook' is provided by NX
+  // eslint-disable-next-line storybook/no-uninstalled-addons
+  addons: ['@storybook/addon-essentials', '@storybook/addon-themes', '@nx/react/plugins/storybook'],
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
@@ -11,6 +13,12 @@ const config: StorybookConfig = {
     '../src/lib',
     { from: '../../../../node_modules/@awesome.me/kit-c4457d1be4/icons/webfonts', to: '/assets/fonts/font-awesome' },
   ],
+  typescript: {
+    // https://storybook.js.org/blog/storybook-8/#improved-react-and-vue-control-autogeneration
+    // https://storybook.js.org/docs/api/main-config-typescript#reactdocgen
+    // https://github.com/storybookjs/storybook/issues/26496
+    reactDocgen: 'react-docgen-typescript',
+  },
 }
 
 export default config

libs/shared/ui/.storybook/preview.tsx

@@ -1,4 +1,5 @@
 import { TooltipProvider } from '@radix-ui/react-tooltip'
+import { withThemeByDataAttribute } from '@storybook/addon-themes'
 import { type Preview } from '@storybook/react'
 import { MemoryRouter } from 'react-router-dom'
 import '../src/lib/styles/main.scss'
@@ -10,6 +11,14 @@ const preview: Preview = {
     },
   },
   decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-mode',
+    }),
     (Story) => (
       <MemoryRouter initialEntries={['/']}>
         <TooltipProvider>

package.json

@@ -83,12 +83,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-private-methods": "^7.16.11",
-    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
-    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.12.13",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@juggle/resize-observer": "^3.4.0",
     "@nx/cypress": "18.3.0",
@@ -104,9 +99,10 @@
     "@nx/workspace": "18.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@semantic-release/github": "^8.0.6",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/core-server": "7.6.17",
-    "@storybook/react-webpack5": "7.6.17",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-themes": "^8.0.10",
+    "@storybook/core-server": "^8.0.10",
+    "@storybook/react-webpack5": "^8.0.10",
     "@svgr/webpack": "8.0.1",
     "@swc-node/register": "1.8.0",
     "@swc/cli": "~0.1.62",
@@ -144,7 +140,7 @@
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^8.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.4.3",
@@ -158,11 +154,12 @@
     "prettier": "^2.8.2",
     "pretty-quick": "^3.1.3",
     "qovery-ws-typescript-axios": "^0.1.148",
+    "react-docgen-typescript-plugin": "^1.0.6",
     "react-flat-providers": "^2.2.0",
     "react-refresh": "^0.14.0",
     "react-select-event": "^5.5.1",
     "semantic-release": "^19.0.5",
-    "storybook-tailwind-dark-mode": "^1.0.22",
+    "storybook": "^8.0.10",
     "style-loader": "^3.3.0",
     "stylus": "0.59.0",
     "stylus-loader": "^7.1.0",

tailwind-workspace-preset.js

@@ -88,7 +88,7 @@ const easingFunctions = {
 
 // tailwind-workspace-preset.js
 module.exports = {
-  darkMode: 'class',
+  darkMode: ['class', '[data-mode="dark"]'],
   theme: {
     extend: {
       transitionProperty: {