Feature/upgrade sb deps (#614)

* feat: upgrade storybook

* feat: add babel

* feat: upgrade other libraries

* feat: upgrade sb

Author: daniele-zurico

.babelrc.json

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

.storybook/main.js

@@ -7,6 +7,7 @@ const config = {
     '@storybook/addon-docs',
     '@storybook/addon-controls',
     'storybook-css-modules-preset',
+    '@storybook/preview-api',
     '@storybook/addon-a11y',
     {
         name: "storybook-design-token",
@@ -17,12 +18,17 @@ const config = {
         autodocs: "tag",
       },
     },
-    '@storybook/addon-mdx-gfm'
+    '@storybook/addon-mdx-gfm',
+    '@storybook/addon-webpack5-compiler-babel'
   ],
   framework: {
     name: '@storybook/react-webpack5',
     options: {}
   },
+  docs: {
+    autodocs: true
+  },
+  staticDirs: ["../static"],
 };
 
 export default config;

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import camTheme from './capgeminiTheme';
 
 addons.setConfig({

example/package.json

@@ -3,26 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.4.2",
-    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@types/node": "20.5.7",
-    "react-router-dom": "6.15.0",
-    "react-scripts": "5.0.1",
-    "typescript": "5.2.2"
+    "react-router-dom": "6.22.3"
   },
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -36,16 +27,17 @@
     ]
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.4",
+    "@types/node": "20.11.30",
     "@types/react-router-dom": "5.3.3",
+    "@typescript-eslint/eslint-plugin": "7.4.0",
+    "@typescript-eslint/parser": "7.4.0",
+    "@vitejs/plugin-react": "4.2.1",
+    "eslint": "8.57.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.6",
     "node-sass": "9.0.0",
-    "web-vitals": "3.4.0"
+    "typescript": "5.4.3",
+    "vite": "5.2.6",
+    "web-vitals": "3.5.2"
   }
 }

example/src/index.tsx

@@ -1,4 +1,3 @@
-import 'react-app-polyfill/ie11';
 import reportWebVitals from './reportWebVitals';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';

example/src/package.json

@@ -73,7 +73,6 @@
     "@storybook/addon-essentials": "^6.3.8",
     "@storybook/addon-knobs": "^6.3.1",
     "@storybook/addon-links": "^6.3.8",
-    "@storybook/addons": "^6.3.8",
     "@storybook/preset-typescript": "^3.0.0",
     "@storybook/react": "^6.3.8",
     "@storybook/theming": "^6.3.8",

example/src/pages/HomePage.tsx

@@ -1,5 +1,3 @@
-import 'react-app-polyfill/ie11';
-import * as React from 'react';
 import { Link } from 'react-router-dom';
 
 export const Home = () => (