chore(product-components): update the storybook to 8.5.4

packages/product-components/.storybook/main.js

@@ -9,22 +9,65 @@ function getAbsolutePath(value) {
 }
 
 module.exports = {
-    stories: ['../src/**/*.stories.*'],
+    stories: ['../src/**/*.@(mdx|stories.*)'],
     logLevel: 'debug',
+
     addons: [
         getAbsolutePath('@storybook/addon-links'),
         getAbsolutePath('@storybook/addon-controls'),
         getAbsolutePath('@storybook/addon-viewport'),
         getAbsolutePath('@storybook/addon-actions'),
     ],
+
     staticDirs: ['../public', { from: '../../suite-data/files', to: '/static' }],
+
     framework: {
-        name: getAbsolutePath('@storybook/react-webpack5'),
+        name: getAbsolutePath('@storybook/nextjs'),
         options: {},
     },
-    babel: options => {
-        options.presets.push('@babel/preset-typescript');
 
-        return options;
+    typescript: {
+        check: false, // Disable type checking
+        reactDocgen: 'react-docgen-typescript',
+        reactDocgenTypescriptOptions: {
+            shouldExtractLiteralValuesFromEnum: true,
+            propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+            skipChildrenPropWithoutDoc: false,
+        },
     },
+
+    webpackFinal: config => {
+        // Add TypeScript support
+        config.module.rules.push({
+            test: /\.tsx?$/,
+            use: [
+                {
+                    loader: require.resolve('babel-loader'),
+                    options: {
+                        presets: [
+                            '@babel/preset-env',
+                            ['@babel/preset-react', { runtime: 'automatic' }],
+                            '@babel/preset-typescript',
+                        ],
+                    },
+                },
+            ],
+        });
+
+        // NOTE: remove the previous loaders from handling the svgs
+        const imageRule = config.module.rules.find(rule => rule?.['test']?.test('.svg'));
+        if (imageRule) {
+            imageRule['exclude'] = /\.svg$/;
+        }
+
+        // Configure SVG files to match the main project's webpack config
+        config.module.rules.push({
+            test: /\.(gif|jpe?g|png|svg)$/,
+            type: 'asset/resource',
+        });
+
+        return config;
+    },
+
+    docs: {},
 };

packages/product-components/.storybook/preview.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { StoryWrapper } from '@trezor/components';
+
+export const decorators = [
+    (Story, context) => {
+        const story = () => React.createElement(Story, null);
+
+        return context?.parameters?.noWrapper
+            ? story()
+            : React.createElement(StoryWrapper, null, story());
+    },
+];
+
+export const parameters = {
+    options: {
+        showPanel: true,
+        showInfo: true,
+        panelPosition: 'right',
+    },
+    theme: {
+        base: 'light',
+    },
+};
+export const tags = ['autodocs'];

packages/product-components/package.json

@@ -36,18 +36,21 @@
         "zxcvbn": "^4.4.2"
     },
     "devDependencies": {
-        "@storybook/addon-actions": "^7.6.13",
-        "@storybook/addon-controls": "^7.6.13",
-        "@storybook/addon-links": "^7.6.13",
-        "@storybook/addon-viewport": "^7.6.13",
-        "@storybook/addons": "^7.6.13",
-        "@storybook/client-api": "^7.6.13",
-        "@storybook/react": "^7.6.13",
-        "@storybook/react-webpack5": "^7.6.13",
-        "@storybook/theming": "^7.6.13",
+        "@storybook/addon-actions": "^8.5.4",
+        "@storybook/addon-controls": "^8.5.4",
+        "@storybook/addon-links": "^8.5.4",
+        "@storybook/addon-viewport": "^8.5.4",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+        "@storybook/addons": "^7.6.17",
+        "@storybook/client-api": "^7.6.17",
+        "@storybook/nextjs": "^8.5.4",
+        "@storybook/react": "^8.5.4",
+        "@storybook/test": "^8.5.4",
+        "@storybook/theming": "^8.5.4",
         "@trezor/eslint": "workspace:*",
         "@types/react": "18.2.79",
-        "storybook": "^7.6.13",
+        "file-loader": "^6.2.0",
+        "storybook": "^8.5.4",
         "stylelint": "^16.2.1",
         "typescript-styled-plugin": "^0.18.3"
     }