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

package/dist/index.js

@@ -1,5 +1,5 @@
-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';

package/dist/preset.js

@@ -1,6 +1,8 @@
+import { fileURLToPath } from 'url';
+
 // src/preset.ts
 function managerEntries(entry = []) {
-  return [...entry, import.meta.resolve("./manager")];
+  return [...entry, fileURLToPath(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-beta.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",
@@ -79,8 +58,29 @@
     "vite": "^7.1.11"
   },
   "peerDependencies": {
-    "storybook": "^10.0.0"
+    "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"
@@ -100,6 +100,10 @@
   },
   "keywords": [
     "storybook-addon",
-    "appearance"
+    "appearance",
+    "storybook",
+    "vueless",
+    "dark mode",
+    "color mode"
   ]
 }

package/preset.js

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

package/src/Tool.tsx

@@ -1,16 +1,16 @@
-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';
+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';
+type Mode = "light" | "dark";
 
 interface DarkModeStore {
   /** The class target in the preview iframe */
@@ -31,16 +31,16 @@ interface DarkModeStore {
   userHasExplicitlySetTheTheme: boolean;
 }
 
-const STORAGE_KEY = 'sb-addon-themes-3';
+const STORAGE_KEY = "sb-addon-themes-3";
 
-export const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)');
+export const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)");
 
-const defaultParams: Required<Omit<DarkModeStore, 'current'>> = {
-  classTarget: 'body',
+const defaultParams: Required<Omit<DarkModeStore, "current">> = {
+  classTarget: "body",
   dark: themes.dark,
-  darkClass: ['dark'],
+  darkClass: ["dark"],
   light: themes.light,
-  lightClass: ['light'],
+  lightClass: ["light"],
   stylePreview: false,
   userHasExplicitlySetTheTheme: false,
 };
@@ -59,7 +59,7 @@ const toggleDarkClass = (
     lightClass = defaultParams.lightClass,
   }: DarkModeStore,
 ) => {
-  if (current === 'dark') {
+  if (current === "dark") {
     el.classList.remove(...arrayify(lightClass));
     el.classList.add(...arrayify(darkClass));
   } else {
@@ -77,7 +77,7 @@ const arrayify = (classes: string | string[]): string[] => {
 
 /** 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;
@@ -108,7 +108,7 @@ const updateManager = (store: DarkModeStore) => {
 export const store = (userTheme: Partial<DarkModeStore> = {}): DarkModeStore => {
   const storedItem = window.localStorage.getItem(STORAGE_KEY);
 
-  if (typeof storedItem === 'string') {
+  if (typeof storedItem === "string") {
     const stored = JSON.parse(storedItem) as DarkModeStore;
 
     if (userTheme) {
@@ -142,7 +142,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 +156,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 +171,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 +185,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 +247,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 "./Tool";
 
 /**
  * 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,12 @@
-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, { 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: {
@@ -15,11 +15,11 @@ addons.setConfig({
   },
 });
 
-addons.register('storybook/dark-mode', (api) => {
-  addons.add('storybook/dark-mode', {
-    title: 'dark mode',
+addons.register("storybook/dark-mode", (api) => {
+  addons.add("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,5 @@
+import { fileURLToPath } from "node:url";
+
 export function managerEntries(entry: string[] = []) {
-  return [...entry, import.meta.resolve('./manager')];
+  return [...entry, fileURLToPath(import.meta.resolve("./manager"))];
 }

package/preset.ts

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