chore: Bump storybook.

.storybook/main.mts

@@ -0,0 +1,34 @@
+import { StorybookConfig } from "@storybook/react-vite";
+import path from "path";
+import { mergeConfig } from "vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.tsx"],
+
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+
+  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
+  typescript: { check: false },
+
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      esbuild: {
+        // ignoring console warns of "Top-level "this" will be replaced with undefined since this file is an ECMAScript module"
+        // See https://github.com/vitejs/vite/issues/8644#issuecomment-1159308803
+        logOverride: { "this-is-undefined-in-esm": "silent" },
+      },
+      // Add aliasing to resolve absolute paths for imports
+      resolve: { alias: { src: path.resolve(__dirname, "../src") } },
+      optimizeDeps: ["@emotion/react/jsx-dev-runtime"],
+    });
+  },
+
+  staticDirs: ["../storybookAssets"],
+
+  framework: {
+    name: "@storybook/react-vite",
+    options: { strictMode: false },
+  },
+};
+
+export default config;

.storybook/preview.tsx

@@ -37,6 +37,7 @@ const preview: Preview = {
     },
     docs: { theme: beamTheme },
   },
+
   decorators: [
     (Story) => {
       return (
@@ -47,6 +48,8 @@ const preview: Preview = {
       );
     },
   ],
+
+  tags: ["autodocs"]
 };
 
 export default preview;

package.json

@@ -71,8 +71,6 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@emotion/babel-preset-css-prop": "^11.10.0",
     "@emotion/jest": "^11.10.5",
     "@emotion/react": "^11.10.6",
     "@homebound/eslint-config": "^1.10.2",
@@ -82,17 +80,16 @@
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-docs": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/addon-mdx-gfm": "^7.6.10",
-    "@storybook/addons": "^7.6.10",
-    "@storybook/manager-api": "^7.6.10",
-    "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/react": "^7.6.10",
-    "@storybook/react-vite": "^7.6.10",
-    "@storybook/testing-library": "^0.2.1",
+    "@storybook/addon-docs": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/manager-api": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@storybook/theming": "^8.3.5",
+    "@storybook/types": "^8.3.5",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
     "@tsconfig/recommended": "^1.0.2",
@@ -102,14 +99,12 @@
     "@types/react-beautiful-dnd": "^13.1.3",
     "@types/react-dom": "^18.0.11",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.3.2",
     "array-move": "^4.0.0",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "chromatic": "^10.3.1",
+    "chromatic": "^11.12.6",
     "conventional-changelog-conventionalcommits": "^5.0.0",
     "eslint": "^8.52.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.9.0",
     "husky": "^5.1.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.4.3",
@@ -123,16 +118,15 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "semantic-release": "^20.1.0",
-    "storybook": "^7.6.10",
-    "storybook-addon-designs": "beta",
+    "storybook": "^8.3.5",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
     "tslib": "^2.1.0",
     "ttypescript": "^1.5.15",
     "typescript": "^4.9.5",
-    "typescript-transform-paths": "^3.4.6",
-    "vite": "^4.1.4",
-    "vite-plugin-turbosnap": "^1.0.1",
+    "typescript-transform-paths": "^3.5.1",
+    "vite": "^5.4.9",
+    "vite-tsconfig-paths": "^5.0.1",
     "watch": "^1.0.2"
   },
   "resolutions": {

src/inputs/Autocomplete.stories.tsx

@@ -1,6 +1,6 @@
 import { action } from "@storybook/addon-actions";
 import { Meta, StoryFn } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { within } from "@storybook/test";
 import { useState } from "react";
 import { useFilter } from "react-aria";
 import { Css } from "src/Css";

src/inputs/SelectField.stories.tsx

@@ -1,6 +1,6 @@
 import { action } from "@storybook/addon-actions";
 import { Meta } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { within } from "@storybook/test";
 import { useState } from "react";
 import { GridColumn, GridTable, Icon, IconKey, simpleHeader, SimpleHeaderAndData } from "src/components";
 import { Css } from "src/Css";

src/inputs/TreeSelectField/TreeSelectField.stories.tsx

@@ -1,6 +1,6 @@
 import { action } from "@storybook/addon-actions";
 import { Meta } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { within } from "@storybook/test";
 import { useState } from "react";
 import { Button } from "src/components";
 import { Css } from "src/Css";

src/utils/sb.tsx

@@ -1,10 +1,10 @@
-import { DecoratorFn } from "@storybook/react";
+import { Decorator } from "@storybook/react";
 import { ReactNode } from "react";
 import { BeamProvider } from "src/components";
 import { Css, Properties } from "src/Css";
 import { withRouter as rtlWithRouter } from "src/utils/rtl";
 
-export function withRouter(url?: string, path?: string): DecoratorFn {
+export function withRouter(url?: string, path?: string): Decorator {
   return (Story: () => JSX.Element) => rtlWithRouter(url, path).wrap(<Story />);
 }
 
@@ -16,7 +16,7 @@ export function newStory(
   storyFn: Function,
   opts: {
     parameters?: StoryParameters;
-    decorators?: DecoratorFn[];
+    decorators?: Decorator[];
   },
 ): Function {
   Object.assign(storyFn, opts);

vite.config.mts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [tsconfigPaths()],
+});