@vueless/storybook 1.1.3-beta.5 → 1.1.3-beta.6

package/.storybook/manager.js

@@ -5,11 +5,12 @@ import "./themes/manager.css";
 import themeDark from "./themes/themeDark.js";
 import themeLight from "./themes/themeLight.js";
 
+/* Set Storybook manager theme when system color mode changed. */
 const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
 
-function setSystemTheme(theme) {
+function setSystemTheme(colorMode) {
   addons.setConfig({
-    theme: theme ? themeDark : themeLight,
+    theme: colorMode === "dark" ? themeDark : themeLight,
     panelPosition: "right",
   });
 }
@@ -17,5 +18,9 @@ function setSystemTheme(theme) {
 setSystemTheme(prefersColorSchemeDark.matches);
 
 prefersColorSchemeDark.addEventListener("change", (event) => {
-  setSystemTheme(event.matches);
+  const sbAddonThemesConfig = localStorage.getItem("sb-addon-themes-3") || "{}";
+  const storybookColorMode = JSON.parse(sbAddonThemesConfig).current || "light";
+  const systemColorMode = event.matches ? "dark" : "light";
+
+  setSystemTheme(storybookColorMode || systemColorMode);
 });

package/.storybook/preview.js

@@ -8,9 +8,6 @@ import themeDark from "./themes/themeDark.js";
 import themeLight from "./themes/themeLight.js";
 import themeLightPreview from "./themes/themeLightPreview.js";
 
-/* Tailwind styles */
-import "./index.css";
-
 /* Vue plugins */
 import { createVueless } from "vueless";
 import { createRouter, createWebHistory } from "vue-router";
@@ -29,7 +26,7 @@ setup((app) => {
 });
 
 /* Set storybook decorators */
-export const decorators = [vue3SourceDecorator, storyDarkModeDecorator()];
+export const decorators = [vue3SourceDecorator, storyDarkModeDecorator];
 
 /* Set storybook tags */
 export const tags = ["autodocs"];

package/bin/index.js

@@ -7,7 +7,7 @@ import { styleText } from "node:util";
 import fs, { promises } from "node:fs";
 
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
-const source = path.join(__dirname, ".storybook");
+const source = path.join(__dirname, "..", ".storybook");
 const target = path.join(cwd(), ".storybook");
 
 copyStorybookPreset(source, target);

package/decorators/storyDarkModeDecorator.js

@@ -1,49 +1,37 @@
 import { DecoratorHelpers } from "@storybook/addon-themes";
+import { makeDecorator } from "storybook/preview-api";
 import { setTheme } from "vueless";
-import { COLOR_MODE_KEY } from "vueless/constants.js";
 
-const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
+/* Cache preview color mode. */
+let previewColorMode = "";
 
+/* Set Storybook color mode when system color mode changed. */
 const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
 
 prefersColorSchemeDark.addEventListener("change", (event) => {
-  setTheme({ colorMode: event.matches ? "dark" : "light" });
-});
-
-export const storyDarkModeDecorator = () => {
-  /* Set theme className to html tag before initialization (fix white blink issue). */
-  const sbAddonThemesConfig = localStorage.getItem("sb-addon-themes-3") || "{}";
-  const storybookTheme = JSON.parse(sbAddonThemesConfig).current || "light";
-
-  // this fixing first load
-  document.body.classList.add(storybookTheme);
+  const systemColorMode = event.matches ? "dark" : "light";
 
-  // this fixing white blink issue
-  if (window.location.toString().includes("viewMode=docs")) {
-    document.documentElement.classList.add(storybookTheme);
-
-    setTimeout(() => {
-      document.documentElement.classList.remove("light", "dark");
-    }, 4000);
-  }
+  setTheme({ colorMode: previewColorMode || systemColorMode });
+});
 
-  /* Initialize theme state. */
-  const colorMode = prefersColorSchemeDark.matches ? "dark" : "light";
-  const cachedColorMode = localStorage.getItem(COLOR_MODE_KEY) || colorMode;
+/* Define color mode decorator. */
+export const storyDarkModeDecorator = makeDecorator({
+  name: "storyDarkModeDecorator",
+  wrapper: (storyFn, context) => {
+    const sbAddonThemesConfig = localStorage.getItem("sb-addon-themes-3") || "{}";
+    const storybookColorMode = JSON.parse(sbAddonThemesConfig).current || "light";
+    const systemColorMode = prefersColorSchemeDark.matches ? "dark" : "light";
 
-  initializeThemeState(["light", "dark"], cachedColorMode);
+    DecoratorHelpers.initializeThemeState(["light", "dark"], storybookColorMode || systemColorMode);
 
-  return (story, context) => {
-    const theme = pluckThemeFromContext(context);
+    previewColorMode = DecoratorHelpers.pluckThemeFromContext(context);
 
-    setTheme({ colorMode: theme });
+    setTheme({ colorMode: previewColorMode || systemColorMode });
 
     return {
-      components: { story },
-      setup() {
-        return { theme };
-      },
+      components: { storyFn },
+      setup: () => ({ theme: previewColorMode }),
       template: `<story />`,
     };
-  };
-};
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "1.1.3-beta.5",
+  "version": "1.1.3-beta.6",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",