Upgrade Storybook to v8.0.5 (#1179)

Author: kyleshike

.babelrc

@@ -1,7 +1,10 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react",
+    [
+      "@babel/preset-react",
+      { "runtime": "automatic" }
+    ],
     "@babel/preset-typescript"
   ],
   "plugins": [

.node-version

@@ -1 +1 @@
-16.20.0
+18.18.2

.storybook/main.js

@@ -1,39 +1,45 @@
 const config = {
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        jsxOptions: {
-          babelrc: true,
-          configFile: true
-        }
+  addons: [{
+    name: '@storybook/addon-docs',
+    options: {
+      jsxOptions: {
+        babelrc: true,
+        configFile: true
       }
-    },
-    '@storybook/addon-a11y',
-    '@storybook/addon-actions',
-    '@storybook/addon-backgrounds',
-    '@storybook/addon-controls',
-    '@storybook/addon-links',
-    '@storybook/addon-storysource',
-    '@storybook/addon-mdx-gfm'
-  ],
+    }
+  }, '@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-backgrounds', '@storybook/addon-controls', '@storybook/addon-links', '@storybook/addon-storysource', '@storybook/addon-mdx-gfm', '@storybook/addon-webpack5-compiler-babel', ({
+    name: "@storybook/addon-styling-webpack",
+
+    options: {
+      rules: [{
+    test: /\.css$/,
+    sideEffects: true,
+    use: [
+        require.resolve("style-loader"),
+        {
+            loader: require.resolve("css-loader"),
+            options: {
+                
+                
+            },
+        },
+    ],
+  },],
+    }
+  })],
   docs: {
     autodocs: true,
     defaultName: 'Docs',
   },
   stories: [
-    '../stories/Intro.stories.mdx',
+    '../stories/Intro.stories.jsx',
     '../src/**/*.stories.@(js|mdx)',
     '../src/**/*.stories.@(ts|mdx)',
     '../src/**/*.stories.js[x]',
     '../src/**/*.stories.ts[x]',
-    '../stories/**/*.stories.mdx',
     '../stories/**/*.stories.js[x]',
     '../stories/**/*.stories.ts[x]'
   ],
-  features: {
-    storyStoreV7: false,
-  },
   framework: {
     name: '@storybook/react-webpack5',
     options: { fastRefresh: true },

.storybook/preview.js

@@ -1,4 +1,6 @@
 import colors from '../src/Styles/colors/palette';
+import '../scss/global.scss';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const preview = {
   decorators: [

package.json

@@ -34,16 +34,16 @@
   },
   "scripts": {
     "build": "NODE_ENV=production babel src --out-dir lib --copy-files --extensions '.js,.jsx,.ts,.tsx' && tsc",
-    "build-storybook": "storybook build -s public",
-    "build-storybook-docs": "storybook build -s public --docs",
+    "build-storybook": "storybook build public",
+    "build-storybook-docs": "storybook build public --docs",
     "build-ts": "tsc",
     "chromatic": "npx chromatic",
     "lint": "tsc --noEmit && eslint . --ext .js,.jsx,.ts,.tsx",
     "prepublishOnly": "yarn build",
     "rs:link": "bin/link-rs",
     "rs:link:watch": "nodemon",
     "rs:unlink": "bin/unlink-rs",
-    "storybook": "storybook dev -p 9009 -s public",
+    "storybook": "storybook dev -p 9009 public",
     "test": "jest"
   },
   "eslintConfig": {
@@ -80,11 +80,13 @@
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.8.4",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.22.5",
     "@babel/runtime": "^7.12.5",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
@@ -93,19 +95,20 @@
     "@fortawesome/pro-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.5.3",
-    "@storybook/addon-a11y": "7.4.1",
-    "@storybook/addon-actions": "7.4.1",
-    "@storybook/addon-backgrounds": "7.4.1",
-    "@storybook/addon-controls": "^7.4.1",
-    "@storybook/addon-docs": "7.4.1",
-    "@storybook/addon-jest": "7.4.1",
-    "@storybook/addon-links": "7.4.1",
-    "@storybook/addon-mdx-gfm": "7.4.1",
-    "@storybook/addon-storyshots": "7.4.1",
-    "@storybook/addon-storysource": "7.4.1",
-    "@storybook/addons": "7.4.1",
-    "@storybook/react": "7.4.1",
-    "@storybook/react-webpack5": "7.4.1",
+    "@storybook/addon-a11y": "^8.0.5",
+    "@storybook/addon-actions": "^8.0.5",
+    "@storybook/addon-backgrounds": "^8.0.5",
+    "@storybook/addon-controls": "^8.0.5",
+    "@storybook/addon-docs": "^8.0.5",
+    "@storybook/addon-jest": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-mdx-gfm": "^8.0.5",
+    "@storybook/addon-storysource": "^8.0.5",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "^8.0.5",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^3.2.1",
@@ -147,7 +150,7 @@
     "react-test-renderer": "^18.0.2",
     "react-tracking": "8.1.0",
     "sass-loader": "^10.4.1",
-    "storybook": "7.4.1",
+    "storybook": "^8.0.5",
     "storybook-addon-designs": "6.3.1",
     "style-loader": "^1.1.3",
     "typescript": "^4.9.5",