IBX-11115: Updated storybook to version 10

.env

@@ -1 +1 @@
-TWIG_COMPONENTS_BASE_URL=http://localhost:8000
+STORYBOOK_TWIG_COMPONENTS_BASE_URL=http://localhost:8000

.storybook/main.js

@@ -1,9 +1,8 @@
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
-const path = require('path');
-const dotenv = require('dotenv');
+import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-dotenv.config({ path: '.env.local' });
-dotenv.config();
+const currDir = path.dirname(fileURLToPath(import.meta.url));
 
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
@@ -28,19 +27,12 @@ const config = {
                 rules: [
                     {
                         test: /\.scss$/,
-                        use: [
-                            'style-loader',
-                            'css-loader',
-                            {
-                                loader: 'sass-loader',
-                                options: { implementation: require.resolve('sass') },
-                            },
-                        ],
+                        use: ['style-loader', 'css-loader', 'sass-loader'],
                     },
                 ],
             },
         },
-        path.resolve(__dirname, '../src/storybook/addons/framework-selector/index.ts'),
+        path.resolve(currDir, '../src/storybook/addons/framework-selector/index.ts'),
         '@chromatic-com/storybook',
     ],
     framework: {
@@ -59,20 +51,21 @@ const config = {
 
         webpackConfig.resolve.alias = {
             ...webpackConfig.resolve.alias,
-            '@ids-components': path.resolve(__dirname, '../packages/components/src/components'),
-            '@ids-context': path.resolve(__dirname, '../packages/components/src/context'),
-            '@ids-hoc': path.resolve(__dirname, '../packages/components/src/hoc'),
-            '@ids-hooks': path.resolve(__dirname, '../packages/components/src/hooks'),
-            '@ids-partials': path.resolve(__dirname, '../packages/components/src/partials'),
-            '@ids-sb-decorators': path.resolve(__dirname, '../src/storybook/decorators'),
-            '@ids-sb-utils': path.resolve(__dirname, '../src/storybook/utils'),
-            '@ids-shared': path.resolve(__dirname, '../packages/components/src/shared'),
-            '@ids-core': path.resolve(__dirname, '../packages/core/src'),
+            '@ids-components': path.resolve(currDir, '../packages/components/src/components'),
+            '@ids-context': path.resolve(currDir, '../packages/components/src/context'),
+            '@ids-hoc': path.resolve(currDir, '../packages/components/src/hoc'),
+            '@ids-hooks': path.resolve(currDir, '../packages/components/src/hooks'),
+            '@ids-partials': path.resolve(currDir, '../packages/components/src/partials'),
+            '@ids-sb-decorators': path.resolve(currDir, '../src/storybook/decorators'),
+            '@ids-sb-utils': path.resolve(currDir, '../src/storybook/utils'),
+            '@ids-shared': path.resolve(currDir, '../packages/components/src/shared'),
+            '@ids-core': path.resolve(currDir, '../packages/core/src'),
         };
 
         webpackConfig.plugins.push(new NodePolyfillPlugin());
 
         return webpackConfig;
     },
 };
+
 export default config;

.storybook/test-runner-jest.config.js

@@ -1,4 +1,4 @@
-const { getJestConfig } = require('@storybook/test-runner');
+import { getJestConfig } from '@storybook/test-runner';
 
 // The default Jest configuration comes from @storybook/test-runner
 const testRunnerConfig = getJestConfig();
@@ -7,7 +7,7 @@ const testRunnerConfig = getJestConfig();
  * @type {import('@jest/types').Config.InitialOptions}
  */
 
-module.exports = {
+export default {
     ...testRunnerConfig,
     testMatch: testRunnerConfig.testMatch.map((pattern) =>
         pattern.replace('**/*.stories.@(js|jsx|mjs|ts|tsx)', '**/*.test.stories.@(js|jsx|mjs|ts|tsx)'),

README.md

@@ -13,7 +13,7 @@ It also updates `ibexa.tsconfig.json` file with aliases to this repository.
 
 By default Storybook tests if there's running instance on `http://localhost:8000`. In order to change it, create file `.env.local` in main storybook directory.
 ```
-TWIG_COMPONENTS_BASE_URL=[url to your DXP instance]
+STORYBOOK_TWIG_COMPONENTS_BASE_URL=[url to your DXP instance]
 ```
 
 ## Preparing tag for release

package.json

@@ -28,20 +28,19 @@
     "@chromatic-com/storybook": "^4.1.1",
     "@ibexa/eslint-config": "https://github.com/ibexa/eslint-config-ibexa#~v2.0.0",
     "@ibexa/ts-config": "https://github.com/ibexa/ts-config-ibexa#~v1.1.0",
-    "@storybook/addon-a11y": "^9.0.4",
-    "@storybook/addon-coverage": "^1.0.5",
-    "@storybook/addon-docs": "^9.0.8",
-    "@storybook/addon-styling-webpack": "^2.0.0",
-    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react": "^9.0.4",
-    "@storybook/react-webpack5": "^9.0.4",
-    "@storybook/test-runner": "^0.22.0",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-coverage": "^3.0.0",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-styling-webpack": "^3.0.0",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "@storybook/react": "^10.1.10",
+    "@storybook/react-webpack5": "^10.1.10",
+    "@storybook/test-runner": "^0.24.2",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
-    "@vitest/coverage-v8": "^3.2.1",
+    "@vitest/coverage-v8": "^4.0.16",
     "babel-plugin-module-resolver": "^5.0.2",
-    "dotenv": "^17.2.3",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.3.0",
     "nodemon": "^3.1.10",
     "node-polyfill-webpack-plugin": "^4.1.0",
     "prop-types": "^15.8.1",
@@ -50,10 +49,10 @@
     "react-dom": "^19.1.0",
     "sass": "^1.89.1",
     "sass-loader": "^16.0.5",
-    "storybook": "^9.0.4",
-    "storybook-addon-pseudo-states": "^9.0.4",
+    "storybook": "^10.1.10",
+    "storybook-addon-pseudo-states": "^10.1.10",
     "typescript": "^5.8.3",
-    "webpack": "^5.99.9",
+    "webpack": "^5.104.0",
     "xliff": "^6.2.2"
   },
   "scripts": {

packages/assets/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "cross-env": "^7.0.3"
+    "cross-env": "^10.1.0"
   },
   "scripts": {
     "prettier:test": "yarn prettier \"./src/**/*.scss\" --check",

packages/components/package.json

@@ -5,7 +5,7 @@
     "license": "MIT",
     "dependencies": {
         "@popperjs/core": "^2.11.8",
-        "cross-env": "^7.0.3",
+        "cross-env": "^10.1.0",
         "react-popper": "^2.3.0"
     },
     "scripts": {

packages/components/src/components/Accordion/Accordion.types.ts

@@ -4,5 +4,5 @@ export interface AccordionProps {
     children: ReactNode;
     header: ReactNode;
     initiallyExpanded?: boolean;
-    onHandleExpand: (isExpanded: boolean) => void;
+    onHandleExpand?: (isExpanded: boolean) => void;
 }

packages/components/src/components/Autosave/Autosave.tsx

@@ -6,7 +6,7 @@ import { createCssClassNames } from '@ids-core';
 
 import { AutosaveProps, AutosaveStatus } from './Autosave.types';
 
-export const Autosave = ({ isDarkMode = false, isEnabled = true, status = AutosaveStatus.On, lastSavedTime }: AutosaveProps) => {
+export const Autosave = ({ isDarkMode = false, isEnabled, lastSavedTime, status = AutosaveStatus.On }: AutosaveProps) => {
     const Translator = useContext(TranslatorContext);
     const classes = createCssClassNames({
         'ids-autosave': true,

packages/components/src/components/InputText/InputTextInput/InputTextInput.tsx

@@ -18,7 +18,7 @@ export const InputTextInput = ({
     error = false,
     extraAria = {},
     className = '',
-    id = undefined,
+    id,
     placeholder = '',
     processActions = (actions): ComponentEntryDataType[] => actions,
     readOnly = false,

packages/components/src/partials/BaseChoiceInput/BaseChoiceInput.tsx

@@ -17,7 +17,7 @@ export const BaseChoiceInput = ({
     disabled = false,
     error = false,
     extraAria = {},
-    id = undefined,
+    id,
     inputClassName = '',
     ref,
     required = false,

packages/components/src/partials/BaseDropdown/BaseDropdown.tsx

@@ -13,15 +13,15 @@ const MAX_VISIBLE_ITEMS = 10;
 export const BaseDropdown = <T extends BaseDropdownItem>({
     children,
     isEmpty = true,
-    isItemSelected = () => false,
+    isItemSelected,
     items,
     disabled = false,
     error = false,
     filterFunction = (item, searchTerm) => item.label.toLowerCase().includes(searchTerm.toLowerCase()),
     getItemAttributes = () => ({}),
     getNextFocusableItem = () => null,
     maxVisibleItems = MAX_VISIBLE_ITEMS,
-    onDropdownItemClick = () => undefined,
+    onDropdownItemClick,
     renderEmptySelectionInfo,
     renderItem = (item) => item.label,
     renderSelectedItems = () => null,

packages/components/src/partials/BaseInput/BaseInput.tsx

@@ -11,7 +11,7 @@ export const BaseInput = ({
     error = false,
     className = '',
     extraInputAttrs = {},
-    id = undefined,
+    id,
     ref,
     required = false,
     size = 'medium',

packages/core/package.json

@@ -4,7 +4,7 @@
     "main": "index.js",
     "license": "MIT",
     "dependencies": {
-        "cross-env": "^7.0.3"
+        "cross-env": "^10.1.0"
     },
     "scripts": {
         "prettier:test": "yarn prettier \"./src/**/*.{js,ts}\" --check",

src/storybook/addons/framework-selector/FrameworkSelectorDecorator.tsx

@@ -21,10 +21,10 @@ const getStoryId = (kind: string) => {
     return storyId;
 };
 const getIframeSrc = (id: string, args: argsType, storyCustomParameters: Record<string, unknown>) => {
-    const baseUrl = process.env.TWIG_COMPONENTS_BASE_URL;
+    const baseUrl = process.env.STORYBOOK_TWIG_COMPONENTS_BASE_URL;
 
     if (baseUrl === undefined || baseUrl === '') {
-        throw new Error('TWIG_COMPONENTS_BASE_URL environment variable is not set.');
+        throw new Error('STORYBOOK_TWIG_COMPONENTS_BASE_URL environment variable is not set.');
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/storybook/addons/framework-selector/components/Tool.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
 
-import { useGlobals, useStorybookState } from 'storybook/internal/manager-api';
+import { useGlobals, useStorybookState } from 'storybook/manager-api';
 import { IconButton } from 'storybook/internal/components';
 import { type API_LeafEntry as LeafEntry } from 'storybook/internal/types';
 
@@ -24,8 +24,7 @@ export const Tool = memo(() => {
 
         const currentStory = allStories[currentStoryId];
 
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (currentStory?.type !== 'story' && currentStory?.type !== 'docs') {
+        if (currentStory.type !== 'story' && currentStory.type !== 'docs') {
             return '';
         }
 
@@ -71,7 +70,7 @@ export const Tool = memo(() => {
     const showFrameworkSelectorTools = twigEnabled && isTwigStoryAvailable();
 
     useEffect(() => {
-        const baseUrl = process.env.TWIG_COMPONENTS_BASE_URL;
+        const baseUrl = process.env.STORYBOOK_TWIG_COMPONENTS_BASE_URL;
 
         if (baseUrl === undefined || baseUrl === '') {
             return;

src/storybook/addons/framework-selector/index.ts

@@ -1,7 +1,9 @@
+import { fileURLToPath } from 'url';
+
 export const previewAnnotations = (entry = []) => {
-    return [...entry, require.resolve('./preview.ts')];
+    return [...entry, fileURLToPath(import.meta.resolve('./preview.ts'))];
 };
 
 export const managerEntries = (entry = []) => {
-    return [...entry, require.resolve('./manager.tsx')];
+    return [...entry, fileURLToPath(import.meta.resolve('./manager.tsx'))];
 };

src/storybook/addons/framework-selector/manager.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { addons, types } from 'storybook/internal/manager-api';
+import { addons, types } from 'storybook/manager-api';
 
 import { ADDON_ID, TOOL_ID } from './constants';
 import { Tool } from './components/Tool';

tsconfig.json

@@ -2,7 +2,9 @@
     "extends": "@ibexa/ts-config",
     "compilerOptions": {
         "target": "es2024",
-        "resolveJsonModule": true,
+        "noEmit": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
         "typeRoots": [
             "./types",
             "./node_modules/@types"