@vueless/storybook 0.0.75-beta.10 → 0.0.75-beta.12

package/.storybook/addons/storybook-dark-mode/Tool.tsx

@@ -0,0 +1,270 @@
+import * as React from "react";
+import { global } from "@storybook/global";
+import { themes, ThemeVars } from "storybook/theming";
+import { IconButton } from "storybook/internal/components";
+import { MoonIcon, SunIcon } from "@storybook/icons";
+import {
+  STORY_CHANGED,
+  SET_STORIES,
+  DOCS_RENDERED,
+} from "storybook/internal/core-events";
+import { API, useParameter } from "storybook/manager-api";
+import equal from "fast-deep-equal";
+import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from "./constants";
+
+const { document, window } = global as { document: Document; window: Window };
+const modes = ["light", "dark"] as const;
+type Mode = (typeof modes)[number];
+
+interface DarkModeStore {
+  /** The class target in the preview iframe */
+  classTarget: string;
+  /** The current mode the storybook is set to */
+  current: Mode;
+  /** The dark theme for storybook */
+  dark: ThemeVars;
+  /** The dark class name for the preview iframe */
+  darkClass: string | string[];
+  /** The light theme for storybook */
+  light: ThemeVars;
+  /** The light class name for the preview iframe */
+  lightClass: string | string[];
+  /** Apply mode to iframe */
+  stylePreview: boolean;
+  /** Persist if the user has set the theme */
+  userHasExplicitlySetTheTheme: boolean;
+}
+
+const STORAGE_KEY = "sb-addon-themes-3";
+export const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)");
+
+const defaultParams: Required<Omit<DarkModeStore, "current">> = {
+  classTarget: "body",
+  dark: themes.dark,
+  darkClass: ["dark"],
+  light: themes.light,
+  lightClass: ["light"],
+  stylePreview: false,
+  userHasExplicitlySetTheTheme: false,
+};
+
+/** Persist the dark mode settings in localStorage */
+export const updateStore = (newStore: DarkModeStore) => {
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
+};
+
+/** Add the light/dark class to an element */
+const toggleDarkClass = (
+  el: Element,
+  {
+    current,
+    darkClass = defaultParams.darkClass,
+    lightClass = defaultParams.lightClass,
+  }: DarkModeStore,
+) => {
+  if (current === "dark") {
+    el.classList.remove(...arrayify(lightClass));
+    el.classList.add(...arrayify(darkClass));
+  } else {
+    el.classList.remove(...arrayify(darkClass));
+    el.classList.add(...arrayify(lightClass));
+  }
+};
+
+/** Coerce a string to a single item array, or return an array as-is */
+const arrayify = (classes: string | string[]): string[] => {
+  const arr: string[] = [];
+  return arr.concat(classes).map((item) => item);
+};
+
+/** Update the preview iframe class */
+const updatePreview = (store: DarkModeStore) => {
+  const iframe = document.getElementById(
+    "storybook-preview-iframe",
+  ) as HTMLIFrameElement;
+
+  if (!iframe) {
+    return;
+  }
+
+  const iframeDocument =
+    iframe.contentDocument || iframe.contentWindow?.document;
+  const target = iframeDocument?.querySelector<HTMLElement>(store.classTarget);
+
+  if (!target) {
+    return;
+  }
+
+  toggleDarkClass(target, store);
+};
+
+/** Update the manager iframe class */
+const updateManager = (store: DarkModeStore) => {
+  const manager = document.querySelector(store.classTarget);
+
+  if (!manager) {
+    return;
+  }
+
+  toggleDarkClass(manager, store);
+};
+
+/** Update changed dark mode settings and persist to localStorage  */
+export const store = (
+  userTheme: Partial<DarkModeStore> = {},
+): DarkModeStore => {
+  const storedItem = window.localStorage.getItem(STORAGE_KEY);
+
+  if (typeof storedItem === "string") {
+    const stored = JSON.parse(storedItem) as DarkModeStore;
+
+    if (userTheme) {
+      if (userTheme.dark && !equal(stored.dark, userTheme.dark)) {
+        stored.dark = userTheme.dark;
+        updateStore(stored);
+      }
+
+      if (userTheme.light && !equal(stored.light, userTheme.light)) {
+        stored.light = userTheme.light;
+        updateStore(stored);
+      }
+    }
+
+    return stored;
+  }
+
+  return { ...defaultParams, ...userTheme } as DarkModeStore;
+};
+
+// On initial load, set the dark mode class on the manager
+// This is needed if you're using mostly CSS overrides to styles the storybook
+// Otherwise the default theme is set in src/preset/manager.tsx
+updateManager(store());
+
+interface DarkModeProps {
+  /** The storybook API */
+  api: API;
+}
+
+/** A toolbar icon to toggle between dark and light themes in storybook */
+export function DarkMode({ api }: DarkModeProps) {
+  const [isDark, setDark] = React.useState(prefersDark.matches);
+  const darkModeParams = useParameter<Partial<DarkModeStore>>("darkMode", {});
+  const { current: defaultMode, stylePreview, ...params } = darkModeParams;
+  const channel = api.getChannel();
+  // Save custom themes on init
+  const userHasExplicitlySetTheTheme = React.useMemo(
+    () => store(params).userHasExplicitlySetTheTheme,
+    [params],
+  );
+  /** Set the theme in storybook, update the local state, and emit an event */
+  const setMode = React.useCallback(
+    (mode: Mode) => {
+      const currentStore = store();
+      api.setOptions({ theme: currentStore[mode] });
+      setDark(mode === "dark");
+      api.getChannel().emit(DARK_MODE_EVENT_NAME, mode === "dark");
+      updateManager(currentStore);
+      if (stylePreview) {
+        updatePreview(currentStore);
+      }
+    },
+    [api, stylePreview],
+  );
+
+  /** Update the theme settings in localStorage, react, and storybook */
+  const updateMode = React.useCallback(
+    (mode?: Mode) => {
+      const currentStore = store();
+      const current =
+        mode || (currentStore.current === "dark" ? "light" : "dark");
+      updateStore({ ...currentStore, current });
+      setMode(current);
+    },
+    [setMode],
+  );
+
+  /** Update the theme based on the color preference */
+  function prefersDarkUpdate(event: MediaQueryListEvent) {
+    if (userHasExplicitlySetTheTheme || defaultMode) {
+      return;
+    }
+
+    updateMode(event.matches ? "dark" : "light");
+  }
+
+  /** Render the current theme */
+  const renderTheme = React.useCallback(() => {
+    const { current = "light" } = store();
+    setMode(current);
+  }, [setMode]);
+
+  /** Handle the user event and side effects */
+  const handleIconClick = () => {
+    updateMode();
+    const currentStore = store();
+    updateStore({ ...currentStore, userHasExplicitlySetTheTheme: true });
+  };
+
+  /** When storybook params change update the stored themes */
+  React.useEffect(() => {
+    const currentStore = store();
+    // Ensure we use the stores `current` value first to persist
+    // themeing between page loads and story changes.
+    updateStore({
+      ...currentStore,
+      ...darkModeParams,
+      current: currentStore.current || darkModeParams.current,
+    });
+    renderTheme();
+  }, [darkModeParams, renderTheme]);
+  React.useEffect(() => {
+    channel.on(STORY_CHANGED, renderTheme);
+    channel.on(SET_STORIES, renderTheme);
+    channel.on(DOCS_RENDERED, renderTheme);
+    prefersDark.addListener(prefersDarkUpdate);
+    return () => {
+      channel.removeListener(STORY_CHANGED, renderTheme);
+      channel.removeListener(SET_STORIES, renderTheme);
+      channel.removeListener(DOCS_RENDERED, renderTheme);
+      prefersDark.removeListener(prefersDarkUpdate);
+    };
+  });
+  React.useEffect(() => {
+    channel.on(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
+    return () => {
+      channel.removeListener(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
+    };
+  });
+  // Storybook's first render doesn't have the global user params loaded so we
+  // need the effect to run whenever defaultMode is updated
+  React.useEffect(() => {
+    // If a users has set the mode this is respected
+    if (userHasExplicitlySetTheTheme) {
+      return;
+    }
+
+    if (defaultMode) {
+      updateMode(defaultMode);
+    } else if (prefersDark.matches) {
+      updateMode("dark");
+    }
+  }, [defaultMode, updateMode, userHasExplicitlySetTheTheme]);
+  return (
+    <IconButton
+      key="dark-mode"
+      title={
+        isDark ? "Change theme to light mode" : "Change theme to dark mode"
+      }
+      onClick={handleIconClick}
+    >
+      {isDark ? (
+        <SunIcon aria-hidden="true" />
+      ) : (
+        <MoonIcon aria-hidden="true" />
+      )}
+    </IconButton>
+  );
+}
+
+export default DarkMode;

package/.storybook/addons/storybook-dark-mode/constants.ts

@@ -0,0 +1,2 @@
+export const DARK_MODE_EVENT_NAME = "DARK_MODE";
+export const UPDATE_DARK_MODE_EVENT_NAME = "UPDATE_DARK_MODE";

package/.storybook/addons/storybook-dark-mode/index.tsx

@@ -0,0 +1,20 @@
+import { addons, useState, useEffect } from "storybook/preview-api";
+import { DARK_MODE_EVENT_NAME } from "./constants";
+import { store } from "./Tool";
+
+/**
+ * Returns the current state of storybook's dark-mode
+ */
+export function useDarkMode(): boolean {
+  const [isDark, setIsDark] = useState(store().current === "dark");
+
+  useEffect(() => {
+    const chan = addons.getChannel();
+    chan.on(DARK_MODE_EVENT_NAME, setIsDark);
+    return () => chan.off(DARK_MODE_EVENT_NAME, setIsDark);
+  }, []);
+
+  return isDark;
+}
+
+export * from "./constants";

package/.storybook/addons/storybook-dark-mode/preset/manager.tsx

@@ -0,0 +1,26 @@
+import { addons } from "storybook/manager-api";
+import { Addon_TypesEnum } from "storybook/internal/types";
+import { themes } from "storybook/theming";
+import * as React from "react";
+
+import Tool, { prefersDark, store } from "../Tool";
+
+const currentStore = store();
+const currentTheme =
+  currentStore.current || (prefersDark.matches && "dark") || "light";
+
+addons.setConfig({
+  theme: {
+    ...themes[currentTheme],
+    ...currentStore[currentTheme],
+  },
+});
+
+addons.register("storybook/dark-mode", (api) => {
+  addons.add("storybook/dark-mode", {
+    title: "dark mode",
+    type: Addon_TypesEnum.TOOL,
+    match: ({ viewMode }) => viewMode === "story" || viewMode === "docs",
+    render: () => <Tool api={api} />,
+  });
+});

package/.storybook/decorators/vue3SourceDecorator.js

@@ -1,4 +1,4 @@
-import { addons, makeDecorator, useArgs } from "@storybook/preview-api";
+import { addons, makeDecorator, useArgs } from "storybook/preview-api";
 import { h, onMounted, watch } from "vue";
 
 const params = new URLSearchParams(window.location.search);

package/.storybook/index.css

@@ -267,10 +267,12 @@ body {
 
 .dark .sb-anchor > p > a {
   color: #4ade80; /* text-green-400 */
+  text-decoration: underline dashed #4ade80;
 }
 
 .light .sb-anchor > p > a {
   color: #16a34a; /* text-green-600 */
+  text-decoration: underline dashed #16a34a;
 }
 
 .sb-bar,

package/.storybook/main.js

@@ -1,3 +1,5 @@
+import { resolve } from "node:path";
+
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
 export default {
   stories: [
@@ -8,10 +10,9 @@ export default {
     // "../src/**/docs.mdx",
   ],
   addons: [
+    "@storybook/addon-docs",
     "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "storybook-dark-mode",
+    resolve(__dirname, "./addons/storybook-dark-mode/preset/manager.tsx"),
     "@storybook/addon-themes",
   ],
   framework: {

package/.storybook/manager-head.html

@@ -23,183 +23,183 @@ Custom dark mode related vueless loader.
 </div>
 
 <style>
-  /* -------------------- Prevent showing users default storybook theme styles -------------------- */
-
-  html.dark {
-    background: #111827;
-  }
-
-  #root {
-    visibility: hidden;
-  }
-
-  #sb-vueless-loader {
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    background: inherit;
-    width: 100%;
-    height: 100%;
-    z-index: 999;
-  }
-
-  .light #sb-vueless-loader {
-    background: #f1f5f9;
-  }
-
-  .dark #sb-vueless-loader {
-    background: #111827;
-  }
-
-  .sb-vueless-loader-img-dark,
-  .sb-vueless-loader-img-light {
-    display: none;
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-  .light .sb-vueless-loader-img-light {
-    display: block;
-  }
-
-  .dark .sb-vueless-loader-img-dark {
-    display: block;
-  }
-
-  @keyframes pulse {
-    0%, 100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: .5;
-    }
-  }
-
-  /* -------------------- Storybook config tooltip -------------------- */
-
-  div[data-testid="tooltip"] {
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  div[data-testid="tooltip"] a[id]:hover,
-  div[data-testid="tooltip"] button[id]:hover {
-    background-color: rgb(17 24 39 / 5%) !important;
-  }
-
-  .dark div[data-testid="tooltip"] a[id]:hover,
-  .dark div[data-testid="tooltip"] button[id]:hover {
-    background-color: rgb(255 255 255 / 5%) !important;
-  }
-
-  /* -------------------- Storybook sidebar -------------------- */
-
-  .dark .sidebar-container {
-    background: #020713;
-  }
-
-  .sidebar-header img {
-   width: 150px;
-  }
-
-  .sidebar-header a:focus {
-    border: 1px solid transparent;
-  }
-
-  .sidebar-item {
-      border-radius: 6px !important;
-  }
-
-  .dark .sidebar-item:hover {
-      background: #101828 !important;
-  }
-
-  .dark .sidebar-item[data-selected="true"],
-  .dark .sidebar-item[data-selected="true"]:hover {
-      background: #1f2937 !important;
-  }
-
-  .search-field,
-  .search-result-item {
-      border-radius: 8px !important;
-  }
-
-  .sidebar-item,
-  .search-result-item {
-    text-transform: capitalize;
-  }
-
-  .light .sidebar-item svg[type="component"],
-  .light .search-result-item svg[type="component"],
-  .dark .search-result-item mark {
-      color: #10b981;
-      font-weight: 600;
-  }
-
-  .dark .sidebar-item svg[type="component"],
-  .dark .search-result-item svg[type="component"],
-  .light .search-result-item mark {
-      color: #059669;
-      font-weight: 600;
-  }
-
-  .light .sidebar-item svg[type="document"],
-  .light .sidebar-item svg[type="story"],
-  .light .search-result-item svg[type="document"],
-  .light .search-result-item svg[type="story"] {
-      color: #9ca3af;
-  }
-
-  .dark .sidebar-item svg[type="document"],
-  .dark .sidebar-item svg[type="story"],
-  .dark .search-result-item svg[type="document"],
-  .dark .search-result-item svg[type="story"] {
-      color: #4b5563;
-  }
-
-  .light .search-result-item--label {
-      color: #6b7280; /* text-gray-600 */
-  }
-
-  .dark .search-result-item--label {
-    color: #a8abb0; /* text-gray-400 */
-  }
-
-  #sidebar-bottom-wrapper {
-      display: none;
-  }
-
-  /* -------------------- Storybook args -------------------- */
-
-  .dark,
-  .dark #panel-tab-content div,
-  .dark .docblock-argstable-body > tr > td {
-    background: #030712 !important;
-  }
-
-  .light,
-  .light #panel-tab-content div,
-  .light .docblock-argstable-body > tr > td {
-    background: #f9fafb !important;
-  }
-
-  .dark .docblock-argstable-head > tr {
-    background: #1e293b !important;
-  }
-
-  .dark .docblock-argstable-body tr > td textarea,
-  .dark .docblock-argstable-body tr > td select,
-  .dark .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
-    background: #111827;
-    border: solid 1px #1f2937;
-    box-shadow: none;
-  }
-
-  .light .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
-    background: white;
-  }
+    /* -------------------- Prevent showing users default storybook theme styles -------------------- */
+
+    html.dark {
+        background: #111827;
+    }
+
+    #root {
+        visibility: hidden;
+    }
+
+    #sb-vueless-loader {
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        background: inherit;
+        width: 100%;
+        height: 100%;
+        z-index: 999;
+    }
+
+    .light #sb-vueless-loader {
+        background: #f1f5f9;
+    }
+
+    .dark #sb-vueless-loader {
+        background: #111827;
+    }
+
+    .sb-vueless-loader-img-dark,
+    .sb-vueless-loader-img-light {
+        display: none;
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+
+    .light .sb-vueless-loader-img-light {
+        display: block;
+    }
+
+    .dark .sb-vueless-loader-img-dark {
+        display: block;
+    }
+
+    @keyframes pulse {
+        0%, 100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: .5;
+        }
+    }
+
+    /* -------------------- Storybook config tooltip -------------------- */
+
+    div[data-testid="tooltip"] {
+        border-radius: 8px;
+        overflow: hidden;
+    }
+
+    div[data-testid="tooltip"] a[id]:hover,
+    div[data-testid="tooltip"] button[id]:hover {
+        background-color: rgb(17 24 39 / 5%) !important;
+    }
+
+    .dark div[data-testid="tooltip"] a[id]:hover,
+    .dark div[data-testid="tooltip"] button[id]:hover {
+        background-color: rgb(255 255 255 / 5%) !important;
+    }
+
+    /* -------------------- Storybook sidebar -------------------- */
+
+    .dark .sidebar-container {
+        background: #020713;
+    }
+
+    .sidebar-header img {
+        width: 150px;
+    }
+
+    .sidebar-header a:focus {
+        border: 1px solid transparent;
+    }
+
+    .sidebar-item {
+        border-radius: 6px !important;
+    }
+
+    .dark .sidebar-item:hover {
+        background: #101828 !important;
+    }
+
+    .dark .sidebar-item[data-selected="true"],
+    .dark .sidebar-item[data-selected="true"]:hover {
+        background: #1f2937 !important;
+    }
+
+    .search-field,
+    .search-result-item {
+        border-radius: 8px !important;
+    }
+
+    .sidebar-item,
+    .search-result-item {
+        text-transform: capitalize;
+    }
+
+    .light .sidebar-item svg[type="component"],
+    .light .search-result-item svg[type="component"],
+    .dark .search-result-item mark {
+        color: #10b981;
+        font-weight: 600;
+    }
+
+    .dark .sidebar-item svg[type="component"],
+    .dark .search-result-item svg[type="component"],
+    .light .search-result-item mark {
+        color: #059669;
+        font-weight: 600;
+    }
+
+    .light .sidebar-item svg[type="document"],
+    .light .sidebar-item svg[type="story"],
+    .light .search-result-item svg[type="document"],
+    .light .search-result-item svg[type="story"] {
+        color: #9ca3af;
+    }
+
+    .dark .sidebar-item svg[type="document"],
+    .dark .sidebar-item svg[type="story"],
+    .dark .search-result-item svg[type="document"],
+    .dark .search-result-item svg[type="story"] {
+        color: #4b5563;
+    }
+
+    .light .search-result-item--label {
+        color: #6b7280; /* text-gray-600 */
+    }
+
+    .dark .search-result-item--label {
+        color: #a8abb0; /* text-gray-400 */
+    }
+
+    #sidebar-bottom-wrapper {
+        display: none;
+    }
+
+    /* -------------------- Storybook args -------------------- */
+
+    .dark,
+    .dark #panel-tab-content div,
+    .dark .docblock-argstable-body > tr > td {
+        background: #030712 !important;
+    }
+
+    .light,
+    .light #panel-tab-content div,
+    .light .docblock-argstable-body > tr > td {
+        background: #f9fafb !important;
+    }
+
+    .dark .docblock-argstable-head > tr {
+        background: #1e293b !important;
+    }
+
+    .dark .docblock-argstable-body tr > td textarea,
+    .dark .docblock-argstable-body tr > td select,
+    .dark .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
+        background: #111827;
+        border: solid 1px #1f2937;
+        box-shadow: none;
+    }
+
+    .light .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
+        background: white;
+    }
 </style>
 
 <script>

package/.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from "@storybook/manager-api";
+import { addons } from "storybook/manager-api";
 import themeLight from "./themes/themeLight.js";
 import themeDark from "./themes/themeDark.js";
 

package/.storybook/preview.js

@@ -1,4 +1,4 @@
-import { setup } from "@storybook/vue3";
+import { setup } from "@storybook/vue3-vite";
 
 import { getRandomId } from "vueless";
 

package/.storybook/themes/themeDark.js

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming/create";
+import { create } from "storybook/theming/create";
 import { TAILWIND_COLORS } from "./tailwindColors.js";
 
 export default create({

package/.storybook/themes/themeLight.js

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming/create";
+import { create } from "storybook/theming/create";
 import { TAILWIND_COLORS } from "./tailwindColors.js";
 
 export default create({

package/.storybook/themes/themeLightDocs.js

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming/create";
+import { create } from "storybook/theming/create";
 import { TAILWIND_COLORS } from "./tailwindColors.js";
 
 export default create({

package/.storybook/vite.config.js

@@ -6,7 +6,7 @@ import { Vueless, TailwindCSS } from "vueless/plugin-vite";
 import { STORYBOOK_ENV } from "vueless/constants.js";
 
 export default defineConfig({
-  plugins: [Vue(), TailwindCSS(), Vueless({ env: STORYBOOK_ENV, debug: false })],
+  plugins: [Vue(), TailwindCSS(), Vueless({ env: STORYBOOK_ENV })],
   optimizeDeps: {
     include: [
       "cva",
@@ -14,10 +14,10 @@ export default defineConfig({
       "@tailwindcss/forms",
       "prettier2",
       "prettier2/parser-html",
-      "@storybook/blocks",
-      "@storybook/theming/create",
+      "@storybook/addon-docs/blocks",
+      "storybook/theming/create",
       "@storybook/addon-themes",
-      "@storybook/addon-interactions/preview",
+      "@storybook/vue3-vite",
     ],
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "0.0.75-beta.10",
+  "version": "0.0.75-beta.12",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
@@ -26,23 +26,16 @@
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release"
   },
   "dependencies": {
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
-    "@storybook/vue3": "^8.6.14",
-    "@storybook/vue3-vite": "^8.6.14",
+    "@storybook/addon-docs": "9.0.4",
+    "@storybook/addon-links": "9.0.4",
+    "@storybook/addon-themes": "9.0.4",
+    "@storybook/vue3-vite": "9.0.4",
     "chokidar": "^4.0.3",
     "esbuild": "^0.25.5",
     "globby": "^14.1.0",
     "mkdirp": "^3.0.1",
     "prettier2": "npm:prettier@2.8.8",
-    "storybook": "^8.6.14",
-    "storybook-dark-mode": "^4.0.2",
+    "storybook": "9.0.4",
     "vue-docgen-api": "^4.79.2"
   },
   "devDependencies": {
@@ -62,7 +55,8 @@
     "vue-docgen-api": {
       "vue": "latest",
       "vue-template-compiler": "latest"
-    }
+    },
+    "storybook": "$storybook"
   },
   "resolutions": {
     "jackspeak": "2.3.6"