@vueless/storybook-dark-mode 9.0.10 → 10.0.1-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # Storybook Dark Mode
 
-A Storybook v9-optimized addon that enables users to toggle between dark and light modes. For support with earlier Storybook versions, see the [original addon](https://github.com/hipstersmoothie/storybook-dark-mode).
+A Storybook v10-optimized addon that enables users to toggle between dark and light modes. For support with earlier Storybook versions, see the [original addon](https://github.com/hipstersmoothie/storybook-dark-mode).
 
 The project is supported and maintained by the [Vueless UI](https://github.com/vuelessjs/vueless) core team. | [See the demo](https://ui.vueless.com) 🌗
 

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+declare const DARK_MODE_EVENT_NAME = "DARK_MODE";
+declare const UPDATE_DARK_MODE_EVENT_NAME = "UPDATE_DARK_MODE";
+
+/**
+ * Returns the current state of storybook's dark-mode
+ */
+declare function useDarkMode(): boolean;
+
+export { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME, useDarkMode };

package/dist/index.js

@@ -0,0 +1,86 @@
+import { useState, useEffect, addons } from 'storybook/preview-api';
+import 'react';
+import { global } from '@storybook/global';
+import { themes } from 'storybook/theming';
+import 'storybook/internal/components';
+import '@storybook/icons';
+import 'storybook/internal/core-events';
+import 'storybook/manager-api';
+import equal from 'fast-deep-equal';
+
+// src/index.tsx
+
+// src/constants.ts
+var DARK_MODE_EVENT_NAME = "DARK_MODE";
+var UPDATE_DARK_MODE_EVENT_NAME = "UPDATE_DARK_MODE";
+var { document, window } = global;
+var STORAGE_KEY = "sb-addon-themes-3";
+window.matchMedia?.("(prefers-color-scheme: dark)");
+var defaultParams = {
+  classTarget: "body",
+  dark: themes.dark,
+  darkClass: ["dark"],
+  light: themes.light,
+  lightClass: ["light"],
+  stylePreview: false,
+  userHasExplicitlySetTheTheme: false
+};
+var updateStore = (newStore) => {
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
+};
+var toggleDarkClass = (el, {
+  current,
+  darkClass = defaultParams.darkClass,
+  lightClass = defaultParams.lightClass
+}) => {
+  if (current === "dark") {
+    el.classList.remove(...arrayify(lightClass));
+    el.classList.add(...arrayify(darkClass));
+  } else {
+    el.classList.remove(...arrayify(darkClass));
+    el.classList.add(...arrayify(lightClass));
+  }
+};
+var arrayify = (classes) => {
+  const arr = [];
+  return arr.concat(classes).map((item) => item);
+};
+var updateManager = (store2) => {
+  const manager = document.querySelector(store2.classTarget);
+  if (!manager) {
+    return;
+  }
+  toggleDarkClass(manager, store2);
+};
+var store = (userTheme = {}) => {
+  const storedItem = window.localStorage.getItem(STORAGE_KEY);
+  if (typeof storedItem === "string") {
+    const stored = JSON.parse(storedItem);
+    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 };
+};
+updateManager(store());
+
+// src/index.tsx
+function useDarkMode() {
+  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 { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME, useDarkMode };

package/dist/manager.js

@@ -0,0 +1,199 @@
+import { addons, useParameter } from 'storybook/manager-api';
+import { Addon_TypesEnum } from 'storybook/internal/types';
+import { themes } from 'storybook/theming';
+import * as React from 'react';
+import { global } from '@storybook/global';
+import { IconButton } from 'storybook/internal/components';
+import { SunIcon, MoonIcon } from '@storybook/icons';
+import { STORY_CHANGED, SET_STORIES, DOCS_RENDERED } from 'storybook/internal/core-events';
+import equal from 'fast-deep-equal';
+
+// src/preset/manager.tsx
+
+// src/constants.ts
+var DARK_MODE_EVENT_NAME = "DARK_MODE";
+var UPDATE_DARK_MODE_EVENT_NAME = "UPDATE_DARK_MODE";
+
+// src/Tool.tsx
+var { document, window } = global;
+var STORAGE_KEY = "sb-addon-themes-3";
+var prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)");
+var defaultParams = {
+  classTarget: "body",
+  dark: themes.dark,
+  darkClass: ["dark"],
+  light: themes.light,
+  lightClass: ["light"],
+  stylePreview: false,
+  userHasExplicitlySetTheTheme: false
+};
+var updateStore = (newStore) => {
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
+};
+var toggleDarkClass = (el, {
+  current,
+  darkClass = defaultParams.darkClass,
+  lightClass = defaultParams.lightClass
+}) => {
+  if (current === "dark") {
+    el.classList.remove(...arrayify(lightClass));
+    el.classList.add(...arrayify(darkClass));
+  } else {
+    el.classList.remove(...arrayify(darkClass));
+    el.classList.add(...arrayify(lightClass));
+  }
+};
+var arrayify = (classes) => {
+  const arr = [];
+  return arr.concat(classes).map((item) => item);
+};
+var updatePreview = (store2) => {
+  const iframe = document.getElementById("storybook-preview-iframe");
+  if (!iframe) {
+    return;
+  }
+  const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
+  const target = iframeDocument?.querySelector(store2.classTarget);
+  if (!target) {
+    return;
+  }
+  toggleDarkClass(target, store2);
+};
+var updateManager = (store2) => {
+  const manager = document.querySelector(store2.classTarget);
+  if (!manager) {
+    return;
+  }
+  toggleDarkClass(manager, store2);
+};
+var store = (userTheme = {}) => {
+  const storedItem = window.localStorage.getItem(STORAGE_KEY);
+  if (typeof storedItem === "string") {
+    const stored = JSON.parse(storedItem);
+    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 };
+};
+updateManager(store());
+function DarkMode({ api }) {
+  const [isDark, setDark] = React.useState(prefersDark.matches);
+  const darkModeParams = useParameter("darkMode", {});
+  const { current: defaultMode, stylePreview, ...params } = darkModeParams;
+  const channel = api.getChannel();
+  const userHasExplicitlySetTheTheme = React.useMemo(
+    () => store(params).userHasExplicitlySetTheTheme,
+    [params]
+  );
+  const setMode = React.useCallback(
+    (mode) => {
+      const currentStore2 = store();
+      api.setOptions({ theme: currentStore2[mode] });
+      setDark(mode === "dark");
+      api.getChannel().emit(DARK_MODE_EVENT_NAME, mode === "dark");
+      updateManager(currentStore2);
+      if (stylePreview) {
+        updatePreview(currentStore2);
+      }
+    },
+    [api, stylePreview]
+  );
+  const updateMode = React.useCallback(
+    (mode) => {
+      const currentStore2 = store();
+      const current = mode || (currentStore2.current === "dark" ? "light" : "dark");
+      updateStore({ ...currentStore2, current });
+      setMode(current);
+    },
+    [setMode]
+  );
+  function prefersDarkUpdate(event) {
+    if (userHasExplicitlySetTheTheme || defaultMode) {
+      return;
+    }
+    updateMode(event.matches ? "dark" : "light");
+  }
+  const renderTheme = React.useCallback(() => {
+    const { current = "light" } = store();
+    setMode(current);
+  }, [setMode]);
+  const handleIconClick = () => {
+    updateMode();
+    const currentStore2 = store();
+    updateStore({ ...currentStore2, userHasExplicitlySetTheTheme: true });
+  };
+  React.useEffect(() => {
+    const currentStore2 = store();
+    updateStore({
+      ...currentStore2,
+      ...darkModeParams,
+      current: currentStore2.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);
+    };
+  });
+  React.useEffect(() => {
+    if (userHasExplicitlySetTheTheme) {
+      return;
+    }
+    if (defaultMode) {
+      updateMode(defaultMode);
+    } else if (prefersDark.matches) {
+      updateMode("dark");
+    }
+  }, [defaultMode, updateMode, userHasExplicitlySetTheTheme]);
+  return /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      key: "dark-mode",
+      title: isDark ? "Change theme to light mode" : "Change theme to dark mode",
+      onClick: handleIconClick
+    },
+    isDark ? /* @__PURE__ */ React.createElement(SunIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ React.createElement(MoonIcon, { "aria-hidden": "true" })
+  );
+}
+var Tool_default = DarkMode;
+
+// src/preset/manager.tsx
+var currentStore = store();
+var 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: () => /* @__PURE__ */ React.createElement(Tool_default, { api })
+  });
+});

package/dist/preset.js

@@ -0,0 +1,6 @@
+// src/preset.ts
+function managerEntries(entry = []) {
+  return [...entry, import.meta.resolve("./manager")];
+}
+
+export { managerEntries };

package/package.json

@@ -1,14 +1,27 @@
 {
   "name": "@vueless/storybook-dark-mode",
-  "version": "9.0.10",
+  "version": "10.0.1-beta.0",
   "description": "Toggle between light and dark mode in Storybook",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/ts/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./preview": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./preset": "./dist/preset.js",
+    "./manager": "./dist/manager.js",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist",
-    "preset.js"
+    "preset.ts"
   ],
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "repository": {
@@ -20,57 +33,64 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "buildBabel": "concurrently \"npm run buildBabel:cjs\" \"npm run buildBabel:esm\"",
-    "buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
-    "buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
-    "buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts -p tsconfig.build.json",
     "prebuild": "npm run clean",
-    "build": "concurrently \"npm run buildBabel\" \"npm run buildTsc\"",
-    "build:watch": "concurrently \"npm run buildBabel:esm -- --watch\" \"npm run buildTsc -- --watch\"",
-    "lint": "eslint --ext .ts --ext .tsx src/**",
-    "release": "auto shipit"
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "lint": "eslint --no-fix src/",
+    "lint:fix": "eslint --fix src/",
+    "lint:ci": "eslint --no-fix src/ --max-warnings=0",
+    "release:beta": "release-it --increment=prerelease --preRelease=beta --ci --no-git.tag --no-github.release",
+    "release:patch": "release-it patch --ci",
+    "release:minor": "release-it minor --ci",
+    "release:major": "release-it major --ci"
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.4.0",
     "fast-deep-equal": "^3.1.3",
     "memoizerific": "^1.11.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.3",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@storybook/builder-vite": "^9.1.3",
-    "@storybook/react": "^9.1.3",
-    "@storybook/react-vite": "^9.1.3",
+    "@eslint/js": "^9.33.0",
+    "@release-it/bumper": "^7.0.5",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@storybook/builder-vite": "^10.0.0",
+    "@storybook/icons": "^1.4.0",
+    "@storybook/react": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
+    "@stylistic/eslint-plugin": "^5.2.3",
     "@types/node": "^24.3.0",
     "@types/react": "^18.0.26",
-    "@typescript-eslint/eslint-plugin": "5.45.1",
-    "@typescript-eslint/parser": "5.45.1",
-    "all-contributors-cli": "^6.26.1",
-    "auto": "^11.3.0",
-    "auto-config-hipstersmoothie": "^4.0.0",
-    "babel-loader": "^10.0.0",
-    "concurrently": "^7.6.0",
-    "eslint": "8.29.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-config-xo": "0.43.1",
-    "eslint-config-xo-react": "0.27.0",
-    "eslint-plugin-react": "7.31.11",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "prettier": "^2.8.0",
+    "eslint": "^9.33.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.14.0",
+    "prettier": "^3.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "release-it": "^19.0.4",
     "rimraf": "^3.0.2",
-    "storybook": "^9.1.3",
+    "storybook": "^10.0.0",
     "ts-node": "^10.9.2",
+    "tsup": "^8.0.0",
     "typescript": "^5.9.2",
+    "typescript-eslint": "^8.40.0",
     "vite": "^7.1.11"
   },
-  "auto": {
-    "extends": "hipstersmoothie"
+  "peerDependencies": {
+    "storybook": "^10.0.0"
+  },
+  "bundler": {
+    "managerEntries": [
+      "src/preset/manager.tsx"
+    ],
+    "previewEntries": [
+      "src/index.tsx"
+    ],
+    "nodeEntries": [
+      "src/preset.ts"
+    ]
   },
   "prettier": {
     "singleQuote": true
@@ -79,7 +99,7 @@
     "node": ">=20"
   },
   "keywords": [
-    "storybook-addons",
+    "storybook-addon",
     "appearance"
   ]
 }

package/preset.ts

@@ -0,0 +1,2 @@
+export * from './dist/preset.js';
+

package/src/Tool.tsx

@@ -3,18 +3,14 @@ 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 { 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];
+
+type Mode = 'light' | 'dark';
 
 interface DarkModeStore {
   /** The class target in the preview iframe */
@@ -36,6 +32,7 @@ interface DarkModeStore {
 }
 
 const STORAGE_KEY = 'sb-addon-themes-3';
+
 export const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)');
 
 const defaultParams: Required<Omit<DarkModeStore, 'current'>> = {
@@ -60,7 +57,7 @@ const toggleDarkClass = (
     current,
     darkClass = defaultParams.darkClass,
     lightClass = defaultParams.lightClass,
-  }: DarkModeStore
+  }: DarkModeStore,
 ) => {
   if (current === 'dark') {
     el.classList.remove(...arrayify(lightClass));
@@ -74,21 +71,19 @@ const toggleDarkClass = (
 /** 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;
+  const iframe = document.getElementById('storybook-preview-iframe') as HTMLIFrameElement;
 
   if (!iframe) {
     return;
   }
 
-  const iframeDocument =
-    iframe.contentDocument || iframe.contentWindow?.document;
+  const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
   const target = iframeDocument?.querySelector<HTMLElement>(store.classTarget);
 
   if (!target) {
@@ -110,9 +105,7 @@ const updateManager = (store: DarkModeStore) => {
 };
 
 /** Update changed dark mode settings and persist to localStorage  */
-export const store = (
-  userTheme: Partial<DarkModeStore> = {}
-): DarkModeStore => {
+export const store = (userTheme: Partial<DarkModeStore> = {}): DarkModeStore => {
   const storedItem = window.localStorage.getItem(STORAGE_KEY);
 
   if (typeof storedItem === 'string') {
@@ -155,33 +148,35 @@ export function DarkMode({ api }: DarkModeProps) {
   // Save custom themes on init
   const userHasExplicitlySetTheTheme = React.useMemo(
     () => store(params).userHasExplicitlySetTheTheme,
-    [params]
+    [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]
+    [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');
+      const current = mode || (currentStore.current === 'dark' ? 'light' : 'dark');
+
       updateStore({ ...currentStore, current });
       setMode(current);
     },
-    [setMode]
+    [setMode],
   );
 
   /** Update the theme based on the color preference */
@@ -196,6 +191,7 @@ export function DarkMode({ api }: DarkModeProps) {
   /** Render the current theme */
   const renderTheme = React.useCallback(() => {
     const { current = 'light' } = store();
+
     setMode(current);
   }, [setMode]);
 
@@ -203,12 +199,14 @@ export function DarkMode({ api }: DarkModeProps) {
   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({
@@ -223,6 +221,7 @@ export function DarkMode({ api }: DarkModeProps) {
     channel.on(SET_STORIES, renderTheme);
     channel.on(DOCS_RENDERED, renderTheme);
     prefersDark.addListener(prefersDarkUpdate);
+
     return () => {
       channel.removeListener(STORY_CHANGED, renderTheme);
       channel.removeListener(SET_STORIES, renderTheme);
@@ -232,6 +231,7 @@ export function DarkMode({ api }: DarkModeProps) {
   });
   React.useEffect(() => {
     channel.on(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
+
     return () => {
       channel.removeListener(UPDATE_DARK_MODE_EVENT_NAME, updateMode);
     };
@@ -250,12 +250,11 @@ export function DarkMode({ api }: DarkModeProps) {
       updateMode('dark');
     }
   }, [defaultMode, updateMode, userHasExplicitlySetTheTheme]);
+
   return (
     <IconButton
       key="dark-mode"
-      title={
-        isDark ? 'Change theme to light mode' : 'Change theme to 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" />}

package/src/index.tsx

@@ -10,7 +10,9 @@ export function useDarkMode(): boolean {
 
   useEffect(() => {
     const chan = addons.getChannel();
+
     chan.on(DARK_MODE_EVENT_NAME, setIsDark);
+
     return () => chan.off(DARK_MODE_EVENT_NAME, setIsDark);
   }, []);
 

package/src/preset/manager.tsx

@@ -6,8 +6,7 @@ import * as React from 'react';
 import Tool, { prefersDark, store } from '../Tool';
 
 const currentStore = store();
-const currentTheme =
-  currentStore.current || (prefersDark.matches && 'dark') || 'light';
+const currentTheme = currentStore.current || (prefersDark.matches && 'dark') || 'light';
 
 addons.setConfig({
   theme: {

package/src/preset.ts

@@ -0,0 +1,3 @@
+export function managerEntries(entry: string[] = []) {
+  return [...entry, import.meta.resolve('./manager')];
+}