Storybook 8 (#338)

Upgrades:
- Yarn
- Storybook
- Sentry

To bring us up to date, and help resolve security vulnerabilities.
Next I'll release and then update all the examples to use the latest
version (which should remove all the Sentry
[vulnerabilties](https://github.com/duffelhq/duffel-components/security/dependabot)).

<img width="910" alt="Screenshot 2024-10-18 at 11 14 06"
src="https://github.com/user-attachments/assets/acbc3251-5a79-47ac-a3e8-93ad2e6b3c1f">

.storybook/main.ts

@@ -1,20 +1,24 @@
+import { dirname, join } from "path";
 import type { StorybookConfig } from "@storybook/react-webpack5";
 import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
 
 const config: StorybookConfig = {
   stories: ["../src/stories/*.stories.@(js|jsx|ts|tsx)"],
+
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+    "@chromatic-com/storybook",
   ],
+
   framework: {
-    name: "@storybook/react-webpack5",
+    name: getAbsolutePath("@storybook/react-webpack5"),
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+
+  docs: {},
 
   webpackFinal: (config) => {
     // Ensure that Storybook can handle aliased imports like '@lib'
@@ -29,5 +33,13 @@ const config: StorybookConfig = {
     };
     return config;
   },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 };
 export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/preview.tsx

@@ -12,7 +12,6 @@ const decorators: [Decorator] = [
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: pnp
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duffel/components",
-  "version": "3.7.22",
+  "version": "3.7.23",
   "description": "Component library to build your travel product with Duffel.",
   "keywords": [
     "Duffel",
@@ -69,15 +69,18 @@
     "@babel/preset-env": "7.25.8",
     "@babel/preset-react": "7.25.7",
     "@babel/preset-typescript": "7.25.7",
+    "@chromatic-com/storybook": "1.9.0",
     "@sentry/cli": "2.37.0",
     "@sentry/esbuild-plugin": "0.7.2",
-    "@storybook/addon-essentials": "7.0.2",
-    "@storybook/addon-interactions": "7.0.2",
-    "@storybook/addon-links": "7.0.2",
-    "@storybook/blocks": "7.0.2",
-    "@storybook/react": "7.0.2",
-    "@storybook/react-webpack5": "7.0.2",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/addon-essentials": "8.3.5",
+    "@storybook/addon-interactions": "8.3.5",
+    "@storybook/addon-links": "8.3.5",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
+    "@storybook/blocks": "8.3.5",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-webpack5": "8.3.5",
+    "@storybook/test": "8.3.5",
+    "@storybook/types": "8.3.5",
     "@testing-library/react": "14.3.1",
     "@types/jest": "29.5.13",
     "@types/lodash": "4.17.10",
@@ -98,7 +101,7 @@
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.15",
+    "eslint-plugin-storybook": "0.9.0",
     "http-server": "14.1.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -107,12 +110,12 @@
     "prompts": "2.4.2",
     "prop-types": "15.8.1",
     "puppeteer": "22.4.1",
-    "storybook": "7.0.2",
+    "storybook": "8.3.5",
     "ts-node": "10.9.2",
     "tsconfig-paths-webpack-plugin": "4.0.1",
     "typescript": "5.2.2"
   },
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.5.0",
   "engines": {
     "node": ">=18.*"
   }