feat: Upgrade storybook and react

.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.github/workflows/master.yml

@@ -12,28 +12,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/[email protected]
         with:
-          node-version: 18.x
-      - name: Cache node modules
-        id: cache-npm
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-node-modules
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-
-      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
-        name: List the state of node modules
-        continue-on-error: true
-        run: npm list
+          node-version: 20.x
+          cache: 'npm'
       - name: Install dependencies
         run: npm install
       - name: Prettier check
@@ -48,10 +31,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/[email protected]
         with:
-          node-version: 18.x
+          node-version: 20.x
       - name: Cache node modules
         id: cache-npm
         uses: actions/cache@v3

.github/workflows/pr.yml

@@ -11,28 +11,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/[email protected]
         with:
-          node-version: 18.x
-      - name: Cache node modules
-        id: cache-npm
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-node-modules
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-
-      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
-        name: List the state of node modules
-        continue-on-error: true
-        run: npm list
+          node-version: 20.x
+          cache: 'npm'
       - name: Install dependencies
         run: npm install
       - name: Prettier check

.storybook/main.ts

@@ -1,32 +1,54 @@
-const webpackConfig = require('../webpack.config.js');
-const cssRule = webpackConfig.module.rules[0]
-
 module.exports = {
   webpackFinal: async (config) => {
-    config.externals = ["react-dom/client"]
-    config.module.rules = [
+    // Remove conflicting externals that cause issues
+    delete config.externals
+
+    // Add custom rules for our project
+    config.module.rules.push(
       {
         test: [/\.stories\.(jsx?$|tsx?$)/],
-        enforce: "pre",
-        use:[{ loader: require.resolve('@storybook/source-loader')}]
-     },
-      // replace mini-css-extract-plugin with style-loader
-      {
-        test: /\.css$/,
-        use: ['style-loader', ...cssRule.use.slice(1)]
+        enforce: 'pre',
+        use: [{ loader: require.resolve('@storybook/source-loader') }]
       },
-      ...webpackConfig.module.rules.slice(1)
-    ]
-    return { ...config, module: { ...config.module, rules: config.module.rules } };
+      {
+        test: /\.tsx?$/,
+        use: ['ts-loader']
+      }
+    )
+
+    // Ensure webpack 5 compatibility
+    config.resolve = config.resolve || {}
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false,
+      path: false,
+      os: false
+    }
+
+    return config
   },
-  stories: [
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
+
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     '@storybook/addon-storysource',
     '@storybook/addon-a11y',
     '@storybook/addon-essentials'
   ],
-  framework: "@storybook/react"
-}
 
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: '@storybook/builder-webpack5'
+    }
+  },
+
+  features: {
+    buildStoriesJson: true,
+    storyStoreV7: false
+  },
+
+  typescript: {
+    reactDocgen: 'react-docgen'
+  }
+}