feat: updated storybook and its dependencies (#86791wyem)

.storybook/main.js

@@ -1,29 +1,56 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../public'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    'storybook-addon-jsx',
+    '@storybook/addon-a11y',
+    '@whitespace/storybook-addon-html',
+    '@storybook/addon-styling-webpack',
     {
-      name: '@storybook/addon-postcss',
+      name: '@storybook/addon-styling-webpack',
+
       options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss')
-        }
+        rules: [
+          {
+            test: /\.css$/,
+            sideEffects: true,
+            use: [
+              require.resolve('style-loader'),
+              {
+                loader: require.resolve('css-loader'),
+                options: {
+                  importLoaders: 1
+                }
+              },
+              {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                  implementation: require.resolve('postcss')
+                }
+              }
+            ]
+          }
+        ]
       }
-    },
-    'storybook-addon-jsx',
-    '@storybook/addon-a11y',
-    '@whitespace/storybook-addon-html'
+    }
   ],
-  core: {
-    // builder: '@storybook/builder-vite'
-    builder: 'webpack5'
+
+  // babel: async (options) => ({
+  //   ...options,
+  //   // If updating the plugin list make sure you update .babelrc as well, and vice versa
+  //   // Macros is not needed here because styled components now includes it too
+  //   plugins: [...options.plugins, 'babel-plugin-styled-components']
+  // }),
+
+  framework: {
+    name: '@storybook/nextjs',
+    options: {}
   },
-  babel: async (options) => ({
-    ...options,
-    // If updating the plugin list make sure you update .babelrc as well, and vice versa
-    // Macros is not needed here because styled components now includes it too
-    plugins: [...options.plugins, 'babel-plugin-styled-components']
-  })
+
+  docs: {
+    autodocs: true
+  }
 };

.storybook/preview.js

@@ -1,9 +1,5 @@
-import { addDecorator } from '@storybook/react';
-import { jsxDecorator } from 'storybook-addon-jsx';
 import '../src/styles/globals.css';
 
-addDecorator(jsxDecorator);
-
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' }
 };

CHANGELOG.md

@@ -21,6 +21,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changes
 
+- Updated storybook libraries, and its dependencies
+- Updated ui lib code with breaking changes from new storybook version
+
 ### Added
 
 ### Fixed