chore: upgrade storybook to v8 and fix warnings

.github/workflows/sanity-checks.yml

@@ -9,7 +9,7 @@ on:
       - main
 
 jobs:
-  build:
+  'sanity-checks':
     runs-on: ubuntu-latest
 
     steps:
@@ -23,6 +23,9 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Typecheck
+        run: yarn typecheck
+
       - name: Lint Codebase
         run: yarn lint
 

.storybook/main.ts

@@ -5,18 +5,24 @@ const config: StorybookConfig = {
     "../app/**/*.mdx",
     "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
+    "@chromatic-com/storybook"
   ],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
 };
 export default config;

.storybook/preview.ts

@@ -1,9 +1,8 @@
 import '../app/tailwind.css';
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,

package.json

@@ -26,14 +26,15 @@
   },
   "devDependencies": {
     "@react-router/dev": "^7.0.0",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/blocks": "^7.6.12",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-vite": "^7.6.12",
-    "@storybook/test": "^7.6.12",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-onboarding": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.1",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
@@ -49,10 +50,11 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.11.1",
     "happy-dom": "^13.3.8",
     "hygen": "^6.2.11",
-    "storybook": "^7.6.12",
+    "postcss": "^8.4.49",
+    "storybook": "^8.4.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",

vite.config.ts

@@ -17,19 +17,7 @@ export default defineConfig({
         },
       },
     }),
-    !isStorybook &&
-      reactRouter({
-        ignoredRouteFiles: ['**/.*'],
-        future: {
-          unstable_optimizeDeps: true,
-          v3_fetcherPersist: true,
-          v3_relativeSplatPath: true,
-          v3_throwAbortReason: true,
-          v3_lazyRouteDiscovery: true,
-          v3_singleFetch: true,
-          v3_routeConfig: true,
-        },
-      }),
+    !isStorybook && reactRouter(),
     tsconfigPaths(),
   ],
 });