Merge pull request #439 from code0-tech/renovate/major-storybook-monorepo

Update storybook monorepo to v10 (major)

Author: nicosammito

.storybook/manager.js

@@ -1,6 +1,6 @@
 // .storybook/manager.js
 
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import theme from './theme';
 
 addons.setConfig({

.storybook/theme.js

@@ -1,6 +1,6 @@
 // .storybook/YourTheme.js
 
-import { create } from '@storybook/theming/create';
+import { create } from 'storybook/theming';
 
 export default create({
     base: 'dark',

.storybook/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "types": [
+      "node",
+      "vite/client",
+      "@storybook/react",
+      "@storybook/react-vite"
+    ]
+  },
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/**/*.mdx"
+  ]
+}

package-lock.json

@@ -37,21 +37,17 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.3",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-onboarding": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/builder-vite": "^8.6.14",
-    "@storybook/cli": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test-runner": "^0.23.0",
+    "@storybook/addon-a11y": "^10.0.4",
+    "@storybook/addon-links": "^10.0.4",
+    "@storybook/addon-onboarding": "^10.0.4",
+    "@storybook/builder-vite": "^10.0.4",
+    "@storybook/cli": "^10.0.4",
+    "@storybook/react": "^10.0.4",
+    "@storybook/react-vite": "^10.0.4",
+    "@storybook/test-runner": "^0.24.1",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.6.14",
     "@tabler/icons-react": "3.35.0",
+    "@types/jest-image-snapshot": "^6.4.0",
     "@types/react": "^19.2.2",
     "@vitejs/plugin-react": "^5.0.4",
     "@xyflow/react": "^12.9.0",
@@ -75,7 +71,7 @@
     "rimraf": "^6.0.1",
     "sass": "^1.89.2",
     "sass-loader": "^16.0.6",
-    "storybook": "^8.6.14",
+    "storybook": "^10.0.4",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.4.0",
     "ts-node": "^10.9.2",
@@ -88,6 +84,10 @@
   "files": [
     "dist"
   ],
+  "overrides": {
+    "storybook": "^10.0.4",
+    "@storybook/*": "^10.0.4"
+  },
   "types": "dist/index.d.ts",
   "peerDependencies": {
     "@ariakit/react": "^0.4.5",

package.json

@@ -22,8 +22,8 @@ export const ExampleFileTabs = () => {
 
     React.useEffect(() => {
         const parent = document.querySelector("[data-id=" + '"' + id + '"' + "]") as HTMLDivElement
-        const tabList = parent.querySelector(".file-tabs__list-content") as HTMLDivElement
-        const trigger = tabList.querySelector("[data-value=" + '"' + service.getActiveTab()?.id + '"' + "]") as HTMLDivElement
+        const tabList = parent?.querySelector(".file-tabs__list-content") as HTMLDivElement
+        const trigger = tabList?.querySelector("[data-value=" + '"' + service.getActiveTab()?.id + '"' + "]") as HTMLDivElement
 
 
         if (tabList && trigger) {

src/components/file-tabs/FileTabs.stories.tsx

@@ -102,6 +102,7 @@ export const InputSuggestionMenuContentItems: React.FC<InputSuggestionMenuConten
 
     React.useImperativeHandle(ref, () => ({
         focusFirstItem: () => itemRefs.current[0]?.focus(),
+        // @ts-ignore
         focusLastItem: () => itemRefs.current.at(-1)?.focus(),
     }), [])
 

src/components/form/InputSuggestion.tsx

@@ -11,7 +11,7 @@
     ],
     "sourceMap": true,
     "jsx": "react",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "rootDir": "src",
     "noImplicitReturns": true,
     "noImplicitThis": true,