@vueless/storybook-dark-mode 10.0.1-beta.0 → 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

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

package/package.json

@@ -1,28 +1,7 @@
 {
   "name": "@vueless/storybook-dark-mode",
-  "version": "10.0.1-beta.0",
+  "version": "10.0.1",
   "description": "Toggle between light and dark mode in Storybook",
-  "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.ts"
-  ],
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "repository": {
     "type": "git",
@@ -36,8 +15,8 @@
     "prebuild": "npm run clean",
     "build": "tsup",
     "build:watch": "tsup --watch",
-    "lint": "eslint --no-fix src/",
-    "lint:fix": "eslint --fix src/",
+    "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",
@@ -81,15 +60,36 @@
   "peerDependencies": {
     "storybook": "^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"
+      "./src/preset/manager.tsx"
     ],
     "previewEntries": [
-      "src/index.tsx"
+      "./src/index.tsx"
     ],
     "nodeEntries": [
-      "src/preset.ts"
+      "./src/preset.ts"
     ]
   },
   "prettier": {
@@ -100,6 +100,10 @@
   },
   "keywords": [
     "storybook-addon",
-    "appearance"
+    "appearance",
+    "storybook",
+    "vueless",
+    "dark mode",
+    "color mode"
   ]
 }

package/preset.js

@@ -0,0 +1,7 @@
+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 { 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 * as React from "react";
+import { IconButton } from "storybook/internal/components";
+import { MoonIcon, SunIcon } from "@storybook/icons";
+import { API, useParameter } from "storybook/manager-api";
+import { SET_STORIES, DOCS_RENDERED, STORY_CHANGED } from "storybook/internal/core-events";
+import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from "./constants";
+import {
+  store,
+  prefersDark,
+  updateStore,
+  updateManager,
+  updatePreview,
+  type DarkModeStore,
+  type Mode,
+} from "./store";
 
 interface DarkModeProps {
   /** The storybook API */
@@ -142,7 +22,7 @@ interface DarkModeProps {
 /** 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 darkModeParams = useParameter<Partial<DarkModeStore>>("darkMode", {});
   const { current: defaultMode, stylePreview, ...params } = darkModeParams;
   const channel = api.getChannel();
   // Save custom themes on init
@@ -156,8 +36,8 @@ export function DarkMode({ api }: DarkModeProps) {
       const currentStore = store();
 
       api.setOptions({ theme: currentStore[mode] });
-      setDark(mode === 'dark');
-      api.getChannel().emit(DARK_MODE_EVENT_NAME, mode === 'dark');
+      setDark(mode === "dark");
+      api.getChannel().emit(DARK_MODE_EVENT_NAME, mode === "dark");
       updateManager(currentStore);
 
       if (stylePreview) {
@@ -171,7 +51,7 @@ export function DarkMode({ api }: DarkModeProps) {
   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);
@@ -185,12 +65,12 @@ export function DarkMode({ api }: DarkModeProps) {
       return;
     }
 
-    updateMode(event.matches ? 'dark' : 'light');
+    updateMode(event.matches ? "dark" : "light");
   }
 
   /** Render the current theme */
   const renderTheme = React.useCallback(() => {
-    const { current = 'light' } = store();
+    const { current = "light" } = store();
 
     setMode(current);
   }, [setMode]);
@@ -247,14 +127,14 @@ export function DarkMode({ api }: DarkModeProps) {
     if (defaultMode) {
       updateMode(defaultMode);
     } else if (prefersDark.matches) {
-      updateMode('dark');
+      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/constants.ts

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

package/src/index.tsx

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

package/src/preset/manager.tsx

@@ -1,12 +1,13 @@
-import { addons } from 'storybook/manager-api';
-import { Addon_TypesEnum } from 'storybook/internal/types';
-import { themes } from 'storybook/theming';
-import * as React from 'react';
+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';
+import Tool from "../Tool";
+import { prefersDark, store } from "../store";
 
 const currentStore = store();
-const currentTheme = currentStore.current || (prefersDark.matches && 'dark') || 'light';
+const currentTheme = currentStore.current || (prefersDark.matches && "dark") || "light";
 
 addons.setConfig({
   theme: {
@@ -15,11 +16,11 @@ addons.setConfig({
   },
 });
 
-addons.register('storybook/dark-mode', (api) => {
-  addons.add('storybook/dark-mode', {
-    title: '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',
+    match: ({ viewMode }) => viewMode === "story" || viewMode === "docs",
     render: () => <Tool api={api} />,
   });
 });

package/src/preset.ts

@@ -1,3 +1 @@
-export function managerEntries(entry: string[] = []) {
-  return [...entry, 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 };

package/preset.ts

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