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

package/README.md

@@ -1,6 +1,6 @@
 # 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).
+A Storybook v9 and 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) 🌗
 
@@ -11,7 +11,11 @@ The project is supported and maintained by the [Vueless UI](https://github.com/v
 Install the following npm module:
 
 ```sh
+# for Storybook v10
 npm i -D @vueless/storybook-dark-mode
+
+# for Storybook v9
+npm i -D @vueless/storybook-dark-mode@^9
 ```
 
 Then, add following content to `.storybook/main.js`

package/dist/index.js

@@ -2,10 +2,6 @@ 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
@@ -28,6 +24,10 @@ var defaultParams = {
 var updateStore = (newStore) => {
   window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
 };
+var arrayify = (classes) => {
+  const arr = [];
+  return arr.concat(classes).map((item) => item);
+};
 var toggleDarkClass = (el, {
   current,
   darkClass = defaultParams.darkClass,
@@ -41,10 +41,6 @@ var toggleDarkClass = (el, {
     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) {

package/dist/manager.js

@@ -2,10 +2,10 @@ 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 { global } from '@storybook/global';
 import equal from 'fast-deep-equal';
 
 // src/preset/manager.tsx
@@ -13,8 +13,6 @@ import equal from 'fast-deep-equal';
 // 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)");
@@ -30,6 +28,10 @@ var defaultParams = {
 var updateStore = (newStore) => {
   window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
 };
+var arrayify = (classes) => {
+  const arr = [];
+  return arr.concat(classes).map((item) => item);
+};
 var toggleDarkClass = (el, {
   current,
   darkClass = defaultParams.darkClass,
@@ -43,10 +45,6 @@ var toggleDarkClass = (el, {
     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) {
@@ -85,6 +83,8 @@ var store = (userTheme = {}) => {
   return { ...defaultParams, ...userTheme };
 };
 updateManager(store());
+
+// src/Tool.tsx
 function DarkMode({ api }) {
   const [isDark, setDark] = React.useState(prefersDark.matches);
   const darkModeParams = useParameter("darkMode", {});
@@ -189,8 +189,8 @@ addons.setConfig({
     ...currentStore[currentTheme]
   }
 });
-addons.register("storybook/dark-mode", (api) => {
-  addons.add("storybook/dark-mode", {
+addons.register("@vueless/storybook-dark-mode", (api) => {
+  addons.add("@vueless/storybook-dark-mode", {
     title: "dark mode",
     type: Addon_TypesEnum.TOOL,
     match: ({ viewMode }) => viewMode === "story" || viewMode === "docs",

package/dist/preset.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook-dark-mode",
-  "version": "10.0.1-beta.1",
+  "version": "10.0.1",
   "description": "Toggle between light and dark mode in Storybook",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "repository": {
@@ -58,7 +58,7 @@
     "vite": "^7.1.11"
   },
   "peerDependencies": {
-    "storybook": "^9.0.0 || ^10.0.0"
+    "storybook": "^10.0.0"
   },
   "type": "module",
   "main": "dist/index.js",
@@ -83,13 +83,13 @@
   ],
   "bundler": {
     "managerEntries": [
-      "src/preset/manager.tsx"
+      "./src/preset/manager.tsx"
     ],
     "previewEntries": [
-      "src/index.tsx"
+      "./src/index.tsx"
     ],
     "nodeEntries": [
-      "src/preset.ts"
+      "./src/preset.ts"
     ]
   },
   "prettier": {

package/preset.js

@@ -1 +1,7 @@
-export * from "./dist/preset.js";
+import { fileURLToPath } from "url";
+
+function managerEntries(entry = []) {
+  return [...entry, fileURLToPath(import.meta.resolve("./dist/manager"))];
+}
+
+export { managerEntries };

package/src/Tool.tsx

@@ -1,138 +1,18 @@
 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 { SET_STORIES, DOCS_RENDERED, STORY_CHANGED } from "storybook/internal/core-events";
 import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from "./constants";
-
-const { document, window } = global as { document: Document; window: Window };
-
-type Mode = "light" | "dark";
-
-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());
+import {
+  store,
+  prefersDark,
+  updateStore,
+  updateManager,
+  updatePreview,
+  type DarkModeStore,
+  type Mode,
+} from "./store";
 
 interface DarkModeProps {
   /** The storybook API */

package/src/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { addons } from "storybook/preview-api";
 import { DARK_MODE_EVENT_NAME } from "./constants";
-import { store } from "./Tool";
+import { store } from "./store";
 
 /**
  * Returns the current state of storybook's dark-mode

package/src/preset/manager.tsx

@@ -3,7 +3,8 @@ import { Addon_TypesEnum } from "storybook/internal/types";
 import { themes } from "storybook/theming";
 import * as React from "react";
 
-import Tool, { prefersDark, store } from "../Tool";
+import Tool from "../Tool";
+import { prefersDark, store } from "../store";
 
 const currentStore = store();
 const currentTheme = currentStore.current || (prefersDark.matches && "dark") || "light";
@@ -15,8 +16,8 @@ addons.setConfig({
   },
 });
 
-addons.register("storybook/dark-mode", (api) => {
-  addons.add("storybook/dark-mode", {
+addons.register("@vueless/storybook-dark-mode", (api) => {
+  addons.add("@vueless/storybook-dark-mode", {
     title: "dark mode",
     type: Addon_TypesEnum.TOOL,
     match: ({ viewMode }) => viewMode === "story" || viewMode === "docs",

package/src/preset.ts

@@ -1,5 +1 @@
-import { fileURLToPath } from "node:url";
-
-export function managerEntries(entry: string[] = []) {
-  return [...entry, fileURLToPath(import.meta.resolve("./manager"))];
-}
+/* define addon preset here */

package/src/store.ts

@@ -0,0 +1,115 @@
+import { global } from "@storybook/global";
+import { themes, ThemeVars } from "storybook/theming";
+import equal from "fast-deep-equal";
+
+const { document, window } = global as { document: Document; window: Window };
+
+type Mode = "light" | "dark";
+
+interface DarkModeStore {
+  classTarget: string;
+  current: Mode;
+  dark: ThemeVars;
+  darkClass: string | string[];
+  light: ThemeVars;
+  lightClass: string | string[];
+  stylePreview: boolean;
+  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,
+};
+
+export const updateStore = (newStore: DarkModeStore) => {
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
+};
+
+const arrayify = (classes: string | string[]): string[] => {
+  const arr: string[] = [];
+
+  return arr.concat(classes).map((item) => item);
+};
+
+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));
+  }
+};
+
+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);
+};
+
+export const updateManager = (store: DarkModeStore) => {
+  const manager = document.querySelector(store.classTarget);
+
+  if (!manager) {
+    return;
+  }
+
+  toggleDarkClass(manager, store);
+};
+
+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;
+};
+
+updateManager(store());
+
+export { updatePreview };
+export type { DarkModeStore, Mode };