chore: update to storybook dependencies to v8

.storybook/main.js

@@ -4,6 +4,7 @@ module.exports = {
     '../src/**/*.stories.{js,tsx}',
     './stories/More.stories.js',
   ],
+
   addons: [
     {
       name: '@storybook/addon-essentials',
@@ -16,6 +17,8 @@ module.exports = {
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
     'storybook-source-link',
+    '@storybook/addon-webpack5-compiler-babel',
+    '@chromatic-com/storybook',
     {
       name: '@storybook/addon-storysource',
       options: {
@@ -32,5 +35,15 @@ module.exports = {
       },
     },
   ],
-  framework: '@storybook/react',
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { create } from '@storybook/theming/create';
 import pkg from '../package.json';
 

.storybook/preview.js

@@ -15,7 +15,7 @@ import allThemes from './themes';
 
 export const parameters = {
   sourceLinkPrefix: 'https://github.com/appfolio/react-gears/tree/master/src/components/',
-}
+};
 
 const changeTheme = (url) => {
   const link = document.getElementById('theme');
@@ -76,3 +76,4 @@ export const decorators = [
     </div>
   ),
 ];
+export const tags = ['autodocs'];

package.json

@@ -27,15 +27,16 @@
     "format:fix": "prettier --write src",
     "test": "jest --coverage",
     "test:watch": "jest --watch",
-    "start": "start-storybook -p 6006",
-    "docs": "build-storybook -o docs",
+    "start": "storybook dev -p 6006",
+    "docs": "storybook build -o docs",
     "version": "yarn docs && git add -A docs",
     "clean": "rm -rf esm lib",
     "dist:types": "tsc --project tsconfig.build.json",
     "dist:types:js": "scripts/copyDTSFiles.js",
     "dist:esm": "babel src --out-dir esm --config-file ./babel.esm.config.js --extensions '.js,.ts,.tsx'",
     "dist:lib": "babel src --out-dir lib --config-file ./babel.build.config.js --extensions '.js,.ts,.tsx'",
-    "dist": "yarn clean && concurrently \"yarn:dist:*\""
+    "dist": "yarn clean && concurrently \"yarn:dist:*\"",
+    "storybook:doctor": "npx storybook doctor"
   },
   "peerDependencies": {
     "react": ">= 16.8",
@@ -75,7 +76,7 @@
     "react-transition-group": "^2.9.0",
     "react-use": "^17.3.2",
     "reactstrap": "^9.2.2",
-    "storybook-source-link": "^2.0.8",
+    "storybook-source-link": "^4.0.1",
     "styled-jsx": "^5.1.1",
     "text-mask-addons": "^3.8.0",
     "tributejs": "^5.1.3",
@@ -90,16 +91,18 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@chromatic-com/storybook": "^1.5.0",
     "@jest/types": "^27.5.1",
-    "@storybook/addon-a11y": "^6.3.11",
-    "@storybook/addon-actions": "^6.3.11",
-    "@storybook/addon-essentials": "^6.3.11",
-    "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-links": "^6.3.11",
-    "@storybook/addon-storysource": "^6.3.11",
-    "@storybook/addon-viewport": "^6.3.11",
-    "@storybook/addons": "^6.3.11",
-    "@storybook/react": "^6.3.11",
+    "@storybook/addon-a11y": "^8.1.5",
+    "@storybook/addon-actions": "^8.1.5",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-knobs": "^8.0.0",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/addon-storysource": "^8.1.5",
+    "@storybook/addon-viewport": "^8.1.5",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-webpack5": "^8.1.5",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^11.2.6",
@@ -151,6 +154,7 @@
     "react-dom": "^16.14.0",
     "regenerator-runtime": "^0.13.7",
     "sinon": "^9.2.1",
+    "storybook": "^8.1.5",
     "ts-node": "^10.7.0",
     "typescript": "^4.6.3",
     "uncontrollable": "^4.1.0"