@vueless/storybook-dark-mode 9.0.7 → 9.0.9
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/dist/cjs/Tool.js +22 -27
- package/dist/cjs/constants.js +2 -4
- package/dist/cjs/index.js +8 -6
- package/dist/cjs/preset/manager.js +7 -8
- package/dist/esm/Tool.js +16 -16
- package/dist/esm/index.js +8 -6
- package/dist/esm/preset/manager.js +6 -6
- package/dist/ts/Tool.d.ts +2 -2
- package/package.json +26 -28
- package/src/index.tsx +1 -1
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,17 +21,19 @@ 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
|
*/
|
|
33
33
|
function useDarkMode() {
|
|
34
|
-
var _useState = (0, _previewApi.useState)(
|
|
34
|
+
var _useState = (0, _previewApi.useState)(function () {
|
|
35
|
+
return (0, _Tool.store)().current === 'dark';
|
|
36
|
+
}),
|
|
35
37
|
_useState2 = _slicedToArray(_useState, 2),
|
|
36
38
|
isDark = _useState2[0],
|
|
37
39
|
setIsDark = _useState2[1];
|
|
@@ -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';
|
|
@@ -12,7 +12,9 @@ import { store } from './Tool';
|
|
|
12
12
|
* Returns the current state of storybook's dark-mode
|
|
13
13
|
*/
|
|
14
14
|
export function useDarkMode() {
|
|
15
|
-
var _useState = useState(
|
|
15
|
+
var _useState = useState(function () {
|
|
16
|
+
return store().current === 'dark';
|
|
17
|
+
}),
|
|
16
18
|
_useState2 = _slicedToArray(_useState, 2),
|
|
17
19
|
isDark = _useState2[0],
|
|
18
20
|
setIsDark = _useState2[1];
|
|
@@ -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.9",
|
|
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
|
}
|
package/src/index.tsx
CHANGED
|
@@ -6,7 +6,7 @@ import { store } from './Tool';
|
|
|
6
6
|
* Returns the current state of storybook's dark-mode
|
|
7
7
|
*/
|
|
8
8
|
export function useDarkMode(): boolean {
|
|
9
|
-
const [isDark, setIsDark] = useState(store().current === 'dark');
|
|
9
|
+
const [isDark, setIsDark] = useState(() => store().current === 'dark');
|
|
10
10
|
|
|
11
11
|
useEffect(() => {
|
|
12
12
|
const chan = addons.getChannel();
|