refactor: migrate to storybook 9 beta

Author: lishaduck

apps/petal-notes/.storybook/main.ts

@@ -5,16 +5,14 @@ const config = {
 
   addons: [
     "@storybook/addon-svelte-csf",
-    "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-designs",
     "@storybook/addon-a11y",
-    "@storybook/experimental-addon-test",
+    "@storybook/addon-docs",
+    "@storybook/addon-vitest",
   ],
   features: {
-    backgroundsStoryGlobals: true,
     developmentModeForBuild: true,
-    viewportStoryGlobals: true,
   },
   framework: {
     name: "@storybook/sveltekit",

apps/petal-notes/.storybook/preview.ts

@@ -1,4 +1,10 @@
-import type { Preview } from "@storybook/svelte";
+import type { Preview } from "@storybook/sveltekit";
+
+export const parameters = {
+  docs: {
+    codePanel: true,
+  },
+};
 
 const preview = {
   parameters: {

apps/petal-notes/package.json

@@ -46,13 +46,10 @@
     "@psdtools/tsconfig": "workspace:^",
     "@storybook/addon-a11y": "catalog:",
     "@storybook/addon-designs": "catalog:",
-    "@storybook/addon-essentials": "catalog:",
+    "@storybook/addon-docs": "catalog:",
     "@storybook/addon-svelte-csf": "catalog:",
-    "@storybook/blocks": "catalog:",
-    "@storybook/experimental-addon-test": "catalog:",
-    "@storybook/svelte": "catalog:",
+    "@storybook/addon-vitest": "catalog:",
     "@storybook/sveltekit": "catalog:",
-    "@storybook/test": "catalog:",
     "@sveltejs/adapter-static": "catalog:",
     "@sveltejs/kit": "catalog:",
     "@sveltejs/vite-plugin-svelte": "catalog:",
@@ -61,6 +58,7 @@
     "@tailwindcss/vite": "catalog:",
     "@total-typescript/ts-reset": "catalog:",
     "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "@vitest/browser": "catalog:",
     "@vitest/coverage-v8": "catalog:",
     "browserslist": "catalog:",
@@ -71,6 +69,8 @@
     "jiti": "catalog:",
     "lightningcss": "catalog:",
     "playwright": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "storybook": "catalog:",
     "svelte": "catalog:",
     "svelte-check": "catalog:",

apps/petal-notes/src/stories/Button.stories.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
-  import { fn } from "@storybook/test";
+  import { fn } from "storybook/test";
 
   import Button from "./Button.svelte";
 

apps/petal-notes/src/stories/Header.stories.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
-  import { fn } from "@storybook/test";
+  import { fn } from "storybook/test";
 
   import Header from "./Header.svelte";
 

apps/petal-notes/src/stories/Page.stories.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
-  import { expect, userEvent, waitFor, within } from "@storybook/test";
+  import { expect, userEvent, waitFor, within } from "storybook/test";
 
   import Page from "./Page.svelte";
 

apps/petal-notes/vite.config.ts

@@ -1,4 +1,4 @@
-import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import { sveltekit } from "@sveltejs/kit/vite";
 import tailwindcss from "@tailwindcss/vite";
 import browserslist from "browserslist";