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

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 } from 'react';
+import { addons } from 'storybook/preview-api';
+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,8 @@
+import { fileURLToPath } from 'url';
+
+// src/preset.ts
+function managerEntries(entry = []) {
+  return [...entry, fileURLToPath(import.meta.resolve("./manager"))];
+}
+
+export { managerEntries };

package/package.json

@@ -1,15 +1,7 @@
 {
   "name": "@vueless/storybook-dark-mode",
-  "version": "9.0.10",
+  "version": "10.0.1-beta.1",
   "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",
-  "files": [
-    "src",
-    "dist",
-    "preset.js"
-  ],
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "repository": {
     "type": "git",
@@ -20,57 +12,85 @@
   },
   "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 .",
+    "lint:fix": "eslint --fix .",
+    "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": "^9.0.0 || ^10.0.0"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "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"
+  },
+  "files": [
+    "src",
+    "dist",
+    "preset.js"
+  ],
+  "bundler": {
+    "managerEntries": [
+      "src/preset/manager.tsx"
+    ],
+    "previewEntries": [
+      "src/index.tsx"
+    ],
+    "nodeEntries": [
+      "src/preset.ts"
+    ]
   },
   "prettier": {
     "singleQuote": true
@@ -79,7 +99,11 @@
     "node": ">=20"
   },
   "keywords": [
-    "storybook-addons",
-    "appearance"
+    "storybook-addon",
+    "appearance",
+    "storybook",
+    "vueless",
+    "dark mode",
+    "color mode"
   ]
 }

package/preset.js

@@ -1,7 +1 @@
-function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/esm/preset/manager')];
-}
-
-module.exports = {
-  managerEntries
-};
+export * from "./dist/preset.js";