@vueless/storybook-dark-mode 9.0.6 → 9.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +90 -16
- package/dist/cjs/Tool.js +22 -27
- package/dist/cjs/constants.js +2 -4
- package/dist/cjs/index.js +5 -5
- package/dist/cjs/preset/manager.js +7 -8
- package/dist/esm/Tool.js +16 -16
- package/dist/esm/index.js +5 -5
- package/dist/esm/preset/manager.js +6 -6
- package/dist/ts/Tool.d.ts +2 -2
- package/package.json +26 -28
package/README.md
CHANGED
|
@@ -176,39 +176,113 @@ export const decorators = [knobDecorator];
|
|
|
176
176
|
|
|
177
177
|
You can also listen for the `DARK_MODE` event via the addons channel.
|
|
178
178
|
|
|
179
|
+
#### Listening for events
|
|
180
|
+
|
|
181
|
+
You can listen for events on the channel with React hooks:
|
|
182
|
+
|
|
179
183
|
```js
|
|
180
|
-
import { useEffect } from 'react';
|
|
184
|
+
import { useState, useEffect } from 'react';
|
|
181
185
|
import { addons } from 'storybook/preview-api';
|
|
182
186
|
import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
|
|
183
187
|
|
|
188
|
+
const channel = addons.getChannel()
|
|
189
|
+
|
|
190
|
+
/**
|
|
191
|
+
* Use this hook if you want to pass in your own callback, e.g. Mantine's `setColorScheme`
|
|
192
|
+
**/
|
|
193
|
+
export function useOnDarkModeEvent(callback) {
|
|
194
|
+
useEffect(function () {
|
|
195
|
+
channel.on(DARK_MODE_EVENT_NAME, callback)
|
|
196
|
+
return () => channel.off(DARK_MODE_EVENT_NAME, callback)
|
|
197
|
+
})
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/**
|
|
201
|
+
* Use this hook if you only need to know whether dark mode is toggled on
|
|
202
|
+
**/
|
|
203
|
+
export function useIsDarkMode() {
|
|
204
|
+
const [isDarkMode, setIsDarkMode] = useState()
|
|
205
|
+
useOnDarkModeEvent(setIsDarkMode)
|
|
206
|
+
return isDarkMode
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
You can then use these hooks to theme stories and docs (see below).
|
|
211
|
+
|
|
212
|
+
#### Theming stories
|
|
213
|
+
|
|
214
|
+
You can use the hooks above with your `ThemeContext`:
|
|
215
|
+
|
|
216
|
+
```js
|
|
217
|
+
import { useIsDarkMode } from './hooks'; // the hook we defined above
|
|
184
218
|
// your theme provider
|
|
185
219
|
import ThemeContext from './theme';
|
|
186
220
|
|
|
187
|
-
//
|
|
188
|
-
const channel = addons.getChannel();
|
|
189
|
-
|
|
190
|
-
// create a component that listens for the DARK_MODE event
|
|
221
|
+
// create a component that uses the dark mode hook
|
|
191
222
|
function ThemeWrapper(props) {
|
|
192
|
-
|
|
193
|
-
const [isDark, setDark] = useState(false);
|
|
194
|
-
|
|
195
|
-
useEffect(() => {
|
|
196
|
-
// listen to DARK_MODE event
|
|
197
|
-
channel.on(DARK_MODE_EVENT_NAME, setDark);
|
|
198
|
-
return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
|
|
199
|
-
}, [channel, setDark]);
|
|
223
|
+
const isDarkMode = useIsDarkMode();
|
|
200
224
|
|
|
201
225
|
// render your custom theme provider
|
|
202
226
|
return (
|
|
203
|
-
<ThemeContext.Provider value={
|
|
227
|
+
<ThemeContext.Provider value={isDarkMode ? darkTheme : defaultTheme}>
|
|
204
228
|
{props.children}
|
|
205
229
|
</ThemeContext.Provider>
|
|
206
230
|
);
|
|
207
231
|
}
|
|
208
232
|
|
|
209
|
-
export const decorators = [
|
|
233
|
+
export const decorators = [
|
|
234
|
+
(renderStory) => <ThemeWrapper>{renderStory()}</ThemeWrapper>,
|
|
235
|
+
];
|
|
210
236
|
```
|
|
211
237
|
|
|
238
|
+
Some UI libraries expose hooks for controlling the theme. E.g., if you are using Mantine, you can use this component:
|
|
239
|
+
|
|
240
|
+
```js
|
|
241
|
+
import { useOnDarkModeEvent } from './hooks'; // the hook we defined above
|
|
242
|
+
import { useMantineColorScheme } from '@mantine/core'
|
|
243
|
+
|
|
244
|
+
/**
|
|
245
|
+
* Custom story wrapper that handles Mantine's dark mode
|
|
246
|
+
**/
|
|
247
|
+
function ThemeWrapper({ children }: { children: React.ReactNode }) {
|
|
248
|
+
const { setColorScheme } = useMantineColorScheme()
|
|
249
|
+
const handleColorScheme = useCallback((value) => setColorScheme(value ? 'dark' : 'light'), [setColorScheme])
|
|
250
|
+
useOnDarkModeEvent(handleColorScheme)
|
|
251
|
+
|
|
252
|
+
return children
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
export const decorators = [
|
|
256
|
+
(renderStory) => <ThemeWrapper>{renderStory()}</ThemeWrapper>,
|
|
257
|
+
];
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
#### Theming docs
|
|
261
|
+
|
|
262
|
+
Docs have a dedicated container component which will _not_ be themed unless you explicitly configure it:
|
|
263
|
+
|
|
264
|
+
```js
|
|
265
|
+
import { useIsDarkMode } from './hooks'; // the hook we defined above
|
|
266
|
+
|
|
267
|
+
function ThemedDocsContainer(props) {
|
|
268
|
+
const isDarkMode = useIsDarkMode() // the hook we defined above
|
|
269
|
+
|
|
270
|
+
return (
|
|
271
|
+
<DocsContainer theme={isDarkMode ? themes.dark : themes.light} context={props.context}>
|
|
272
|
+
{props.children}
|
|
273
|
+
</DocsContainer>
|
|
274
|
+
)
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
export const parameters = {
|
|
278
|
+
docs: {
|
|
279
|
+
container: ThemedDocsContainer,
|
|
280
|
+
},
|
|
281
|
+
},
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
#### Emit event in docs mode
|
|
285
|
+
|
|
212
286
|
Since in docs mode, Storybook will not display its toolbar,
|
|
213
287
|
You can also trigger the `UPDATE_DARK_MODE` event via the addons channel if you want to control that option in docs mode,
|
|
214
288
|
By editing your `.storybook/preview.js`.
|
|
@@ -254,4 +328,4 @@ export const parameters = {
|
|
|
254
328
|
}
|
|
255
329
|
}
|
|
256
330
|
};
|
|
257
|
-
```
|
|
331
|
+
```
|
package/dist/cjs/Tool.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
@@ -17,33 +17,31 @@ var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
|
|
|
17
17
|
var _constants = require("./constants");
|
|
18
18
|
var _excluded = ["current", "stylePreview"];
|
|
19
19
|
var _window$matchMedia;
|
|
20
|
-
function _interopRequireDefault(
|
|
21
|
-
function
|
|
22
|
-
function
|
|
23
|
-
function
|
|
24
|
-
function
|
|
25
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
20
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
21
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
22
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
23
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
24
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
26
25
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
27
|
-
function _iterableToArrayLimit(
|
|
28
|
-
function _arrayWithHoles(
|
|
29
|
-
function ownKeys(
|
|
30
|
-
function _objectSpread(
|
|
31
|
-
function _defineProperty(
|
|
32
|
-
function _toPropertyKey(
|
|
33
|
-
function _toPrimitive(
|
|
34
|
-
function _toConsumableArray(
|
|
26
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
27
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
28
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
29
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
30
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
31
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
32
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
33
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
35
34
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
36
|
-
function _unsupportedIterableToArray(
|
|
37
|
-
function _iterableToArray(
|
|
38
|
-
function _arrayWithoutHoles(
|
|
39
|
-
function _arrayLikeToArray(
|
|
35
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
36
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
37
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
38
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
40
39
|
var _ref = _global.global,
|
|
41
40
|
document = _ref.document,
|
|
42
41
|
window = _ref.window;
|
|
43
42
|
var modes = ['light', 'dark'];
|
|
44
43
|
var STORAGE_KEY = 'sb-addon-themes-3';
|
|
45
|
-
var prefersDark = (_window$matchMedia = window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(window, '(prefers-color-scheme: dark)');
|
|
46
|
-
exports.prefersDark = prefersDark;
|
|
44
|
+
var prefersDark = exports.prefersDark = (_window$matchMedia = window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(window, '(prefers-color-scheme: dark)');
|
|
47
45
|
var defaultParams = {
|
|
48
46
|
classTarget: 'body',
|
|
49
47
|
dark: _theming.themes.dark,
|
|
@@ -55,12 +53,11 @@ var defaultParams = {
|
|
|
55
53
|
};
|
|
56
54
|
|
|
57
55
|
/** Persist the dark mode settings in localStorage */
|
|
58
|
-
var updateStore = function updateStore(newStore) {
|
|
56
|
+
var updateStore = exports.updateStore = function updateStore(newStore) {
|
|
59
57
|
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore));
|
|
60
58
|
};
|
|
61
59
|
|
|
62
60
|
/** Add the light/dark class to an element */
|
|
63
|
-
exports.updateStore = updateStore;
|
|
64
61
|
var toggleDarkClass = function toggleDarkClass(el, _ref2) {
|
|
65
62
|
var current = _ref2.current,
|
|
66
63
|
_ref2$darkClass = _ref2.darkClass,
|
|
@@ -111,7 +108,7 @@ var updateManager = function updateManager(store) {
|
|
|
111
108
|
};
|
|
112
109
|
|
|
113
110
|
/** Update changed dark mode settings and persist to localStorage */
|
|
114
|
-
var store = function store() {
|
|
111
|
+
var store = exports.store = function store() {
|
|
115
112
|
var userTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
116
113
|
var storedItem = window.localStorage.getItem(STORAGE_KEY);
|
|
117
114
|
if (typeof storedItem === 'string') {
|
|
@@ -134,7 +131,6 @@ var store = function store() {
|
|
|
134
131
|
// On initial load, set the dark mode class on the manager
|
|
135
132
|
// This is needed if you're using mostly CSS overrides to styles the storybook
|
|
136
133
|
// Otherwise the default theme is set in src/preset/manager.tsx
|
|
137
|
-
exports.store = store;
|
|
138
134
|
updateManager(store());
|
|
139
135
|
/** A toolbar icon to toggle between dark and light themes in storybook */
|
|
140
136
|
function DarkMode(_ref3) {
|
|
@@ -252,5 +248,4 @@ function DarkMode(_ref3) {
|
|
|
252
248
|
"aria-hidden": "true"
|
|
253
249
|
}));
|
|
254
250
|
}
|
|
255
|
-
var _default = DarkMode;
|
|
256
|
-
exports["default"] = _default;
|
|
251
|
+
var _default = exports["default"] = DarkMode;
|
package/dist/cjs/constants.js
CHANGED
|
@@ -4,7 +4,5 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.UPDATE_DARK_MODE_EVENT_NAME = exports.DARK_MODE_EVENT_NAME = void 0;
|
|
7
|
-
var DARK_MODE_EVENT_NAME = 'DARK_MODE';
|
|
8
|
-
exports.
|
|
9
|
-
var UPDATE_DARK_MODE_EVENT_NAME = 'UPDATE_DARK_MODE';
|
|
10
|
-
exports.UPDATE_DARK_MODE_EVENT_NAME = UPDATE_DARK_MODE_EVENT_NAME;
|
|
7
|
+
var DARK_MODE_EVENT_NAME = exports.DARK_MODE_EVENT_NAME = 'DARK_MODE';
|
|
8
|
+
var UPDATE_DARK_MODE_EVENT_NAME = exports.UPDATE_DARK_MODE_EVENT_NAME = 'UPDATE_DARK_MODE';
|
package/dist/cjs/index.js
CHANGED
|
@@ -21,12 +21,12 @@ Object.keys(_constants).forEach(function (key) {
|
|
|
21
21
|
});
|
|
22
22
|
});
|
|
23
23
|
var _Tool = require("./Tool");
|
|
24
|
-
function _slicedToArray(
|
|
24
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
25
25
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
26
|
-
function _unsupportedIterableToArray(
|
|
27
|
-
function _arrayLikeToArray(
|
|
28
|
-
function _iterableToArrayLimit(
|
|
29
|
-
function _arrayWithHoles(
|
|
26
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
27
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
28
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
29
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
30
30
|
/**
|
|
31
31
|
* Returns the current state of storybook's dark-mode
|
|
32
32
|
*/
|
|
@@ -5,14 +5,13 @@ var _types = require("storybook/internal/types");
|
|
|
5
5
|
var _theming = require("storybook/theming");
|
|
6
6
|
var React = _interopRequireWildcard(require("react"));
|
|
7
7
|
var _Tool = _interopRequireWildcard(require("../Tool"));
|
|
8
|
-
function
|
|
9
|
-
function
|
|
10
|
-
function
|
|
11
|
-
function
|
|
12
|
-
function
|
|
13
|
-
function
|
|
14
|
-
function
|
|
15
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
8
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
9
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
10
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
13
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
14
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
16
15
|
var currentStore = (0, _Tool.store)();
|
|
17
16
|
var currentTheme = currentStore.current || _Tool.prefersDark.matches && 'dark' || 'light';
|
|
18
17
|
_managerApi.addons.setConfig({
|
package/dist/esm/Tool.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
function _typeof(
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
2
|
var _excluded = ["current", "stylePreview"];
|
|
3
3
|
var _window$matchMedia;
|
|
4
|
-
function _objectWithoutProperties(
|
|
5
|
-
function _objectWithoutPropertiesLoose(
|
|
6
|
-
function _slicedToArray(
|
|
4
|
+
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
5
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
6
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
7
7
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
8
|
-
function _iterableToArrayLimit(
|
|
9
|
-
function _arrayWithHoles(
|
|
10
|
-
function ownKeys(
|
|
11
|
-
function _objectSpread(
|
|
12
|
-
function _defineProperty(
|
|
13
|
-
function _toPropertyKey(
|
|
14
|
-
function _toPrimitive(
|
|
15
|
-
function _toConsumableArray(
|
|
8
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
9
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
10
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
13
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
14
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
15
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
16
16
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
17
|
-
function _unsupportedIterableToArray(
|
|
18
|
-
function _iterableToArray(
|
|
19
|
-
function _arrayWithoutHoles(
|
|
20
|
-
function _arrayLikeToArray(
|
|
17
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
18
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
19
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
20
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
21
21
|
import * as React from 'react';
|
|
22
22
|
import { global } from '@storybook/global';
|
|
23
23
|
import { themes } from 'storybook/theming';
|
package/dist/esm/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
function _slicedToArray(
|
|
1
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
2
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
-
function _unsupportedIterableToArray(
|
|
4
|
-
function _arrayLikeToArray(
|
|
5
|
-
function _iterableToArrayLimit(
|
|
6
|
-
function _arrayWithHoles(
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
7
7
|
import { addons, useState, useEffect } from 'storybook/preview-api';
|
|
8
8
|
import { DARK_MODE_EVENT_NAME } from './constants';
|
|
9
9
|
import { store } from './Tool';
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
function _typeof(
|
|
2
|
-
function ownKeys(
|
|
3
|
-
function _objectSpread(
|
|
4
|
-
function _defineProperty(
|
|
5
|
-
function _toPropertyKey(
|
|
6
|
-
function _toPrimitive(
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
6
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
7
|
import { addons } from 'storybook/manager-api';
|
|
8
8
|
import { Addon_TypesEnum } from 'storybook/internal/types';
|
|
9
9
|
import { themes } from 'storybook/theming';
|
package/dist/ts/Tool.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
import { ThemeVars } from 'storybook/theming';
|
|
3
3
|
import { API } from 'storybook/manager-api';
|
|
4
4
|
declare const modes: readonly ["light", "dark"];
|
|
@@ -31,5 +31,5 @@ interface DarkModeProps {
|
|
|
31
31
|
api: API;
|
|
32
32
|
}
|
|
33
33
|
/** A toolbar icon to toggle between dark and light themes in storybook */
|
|
34
|
-
export declare function DarkMode({ api }: DarkModeProps): JSX.Element;
|
|
34
|
+
export declare function DarkMode({ api }: DarkModeProps): React.JSX.Element;
|
|
35
35
|
export default DarkMode;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vueless/storybook-dark-mode",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.8",
|
|
4
4
|
"description": "Toggle between light and dark mode in Storybook",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -11,10 +11,6 @@
|
|
|
11
11
|
"preset.js"
|
|
12
12
|
],
|
|
13
13
|
"author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
|
|
14
|
-
"keywords": [
|
|
15
|
-
"storybook-addons",
|
|
16
|
-
"appearance"
|
|
17
|
-
],
|
|
18
14
|
"repository": {
|
|
19
15
|
"type": "git",
|
|
20
16
|
"url": "https://github.com/vuelessjs/storybook-dark-mode"
|
|
@@ -24,39 +20,39 @@
|
|
|
24
20
|
},
|
|
25
21
|
"scripts": {
|
|
26
22
|
"clean": "rimraf ./dist",
|
|
27
|
-
"buildBabel": "concurrently \"
|
|
23
|
+
"buildBabel": "concurrently \"npm run buildBabel:cjs\" \"npm run buildBabel:esm\"",
|
|
28
24
|
"buildBabel:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"",
|
|
29
25
|
"buildBabel:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"",
|
|
30
26
|
"buildTsc": "tsc --declaration --emitDeclarationOnly --outDir ./dist/ts -p tsconfig.build.json",
|
|
31
|
-
"prebuild": "
|
|
32
|
-
"build": "concurrently \"
|
|
33
|
-
"build:watch": "concurrently \"
|
|
27
|
+
"prebuild": "npm run clean",
|
|
28
|
+
"build": "concurrently \"npm run buildBabel\" \"npm run buildTsc\"",
|
|
29
|
+
"build:watch": "concurrently \"npm run buildBabel:esm -- --watch\" \"npm run buildTsc -- --watch\"",
|
|
34
30
|
"lint": "eslint --ext .ts --ext .tsx src/**",
|
|
35
31
|
"release": "auto shipit"
|
|
36
32
|
},
|
|
37
33
|
"dependencies": {
|
|
38
34
|
"@storybook/global": "^5.0.0",
|
|
39
|
-
"@storybook/icons": "^1.
|
|
35
|
+
"@storybook/icons": "^1.4.0",
|
|
40
36
|
"fast-deep-equal": "^3.1.3",
|
|
41
37
|
"memoizerific": "^1.11.3"
|
|
42
38
|
},
|
|
43
39
|
"devDependencies": {
|
|
44
|
-
"@babel/cli": "^7.
|
|
45
|
-
"@babel/core": "^7.
|
|
46
|
-
"@babel/preset-env": "^7.
|
|
47
|
-
"@babel/preset-react": "^7.
|
|
48
|
-
"@babel/preset-typescript": "^7.
|
|
49
|
-
"@storybook/builder-vite": "^9.
|
|
50
|
-
"@storybook/react": "^9.
|
|
51
|
-
"@storybook/react-vite": "^9.
|
|
52
|
-
"@types/node": "^
|
|
40
|
+
"@babel/cli": "^7.28.3",
|
|
41
|
+
"@babel/core": "^7.28.3",
|
|
42
|
+
"@babel/preset-env": "^7.28.3",
|
|
43
|
+
"@babel/preset-react": "^7.27.1",
|
|
44
|
+
"@babel/preset-typescript": "^7.27.1",
|
|
45
|
+
"@storybook/builder-vite": "^9.1.3",
|
|
46
|
+
"@storybook/react": "^9.1.3",
|
|
47
|
+
"@storybook/react-vite": "^9.1.3",
|
|
48
|
+
"@types/node": "^24.3.0",
|
|
53
49
|
"@types/react": "^18.0.26",
|
|
54
50
|
"@typescript-eslint/eslint-plugin": "5.45.1",
|
|
55
51
|
"@typescript-eslint/parser": "5.45.1",
|
|
56
|
-
"all-contributors-cli": "^6.
|
|
57
|
-
"auto": "^11.
|
|
52
|
+
"all-contributors-cli": "^6.26.1",
|
|
53
|
+
"auto": "^11.3.0",
|
|
58
54
|
"auto-config-hipstersmoothie": "^4.0.0",
|
|
59
|
-
"babel-loader": "^
|
|
55
|
+
"babel-loader": "^10.0.0",
|
|
60
56
|
"concurrently": "^7.6.0",
|
|
61
57
|
"eslint": "8.29.0",
|
|
62
58
|
"eslint-config-prettier": "8.5.0",
|
|
@@ -68,10 +64,10 @@
|
|
|
68
64
|
"react": "^18.2.0",
|
|
69
65
|
"react-dom": "^18.2.0",
|
|
70
66
|
"rimraf": "^3.0.2",
|
|
71
|
-
"storybook": "^9.
|
|
72
|
-
"ts-node": "^10.9.
|
|
73
|
-
"typescript": "^
|
|
74
|
-
"vite": "^
|
|
67
|
+
"storybook": "^9.1.3",
|
|
68
|
+
"ts-node": "^10.9.2",
|
|
69
|
+
"typescript": "^5.9.2",
|
|
70
|
+
"vite": "^7.1.4"
|
|
75
71
|
},
|
|
76
72
|
"auto": {
|
|
77
73
|
"extends": "hipstersmoothie"
|
|
@@ -82,6 +78,8 @@
|
|
|
82
78
|
"engines": {
|
|
83
79
|
"node": ">=20"
|
|
84
80
|
},
|
|
85
|
-
"
|
|
86
|
-
|
|
81
|
+
"keywords": [
|
|
82
|
+
"storybook-addons",
|
|
83
|
+
"appearance"
|
|
84
|
+
]
|
|
87
85
|
}
|