@sit-onyx/storybook-utils 1.0.0-alpha.83 → 1.0.0-alpha.85
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/package.json +2 -2
- package/src/preview.ts +3 -14
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sit-onyx/storybook-utils",
|
|
3
3
|
"description": "Storybook utilities for Vue",
|
|
4
|
-
"version": "1.0.0-alpha.
|
|
4
|
+
"version": "1.0.0-alpha.85",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Schwarz IT KG",
|
|
7
7
|
"license": "Apache-2.0",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@storybook/theming": ">= 8.0.0",
|
|
29
29
|
"@storybook/vue3": ">= 8.0.0",
|
|
30
30
|
"storybook-dark-mode": ">= 4",
|
|
31
|
-
"sit-onyx": "^1.0.0-alpha.
|
|
31
|
+
"sit-onyx": "^1.0.0-alpha.82"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"deepmerge-ts": "^5.1.0"
|
package/src/preview.ts
CHANGED
|
@@ -3,9 +3,10 @@ import { addons } from "@storybook/preview-api";
|
|
|
3
3
|
import { type ThemeVars } from "@storybook/theming";
|
|
4
4
|
import { type Preview } from "@storybook/vue3";
|
|
5
5
|
import { deepmerge } from "deepmerge-ts";
|
|
6
|
+
import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
|
|
6
7
|
|
|
7
|
-
import { ONYX_BREAKPOINTS, createTheme } from "./theme";
|
|
8
8
|
import { requiredGlobalType, withRequired } from "./required";
|
|
9
|
+
import { ONYX_BREAKPOINTS, createTheme } from "./theme";
|
|
9
10
|
|
|
10
11
|
const themes = {
|
|
11
12
|
light: createTheme(),
|
|
@@ -18,7 +19,6 @@ const themes = {
|
|
|
18
19
|
* - Improved Vue-specific code highlighting (e.g. using `@` instead of `v-on:`)
|
|
19
20
|
* - Setup for dark mode (including docs page). Requires addon `storybook-dark-mode` to be enabled in .storybook/main.ts file
|
|
20
21
|
* - Custom Storybook theme using onyx colors (light and dark mode)
|
|
21
|
-
* - Support for setting the light/dark mode when Storybook is embedded as an iframe (via query parameter, e.g. `?theme=dark`)
|
|
22
22
|
* - Configure viewports / breakpoints as defined by onyx
|
|
23
23
|
*
|
|
24
24
|
* @param overrides Custom preview / overrides, will be deep merged with the default preview.
|
|
@@ -57,13 +57,7 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
|
|
|
57
57
|
docs: {
|
|
58
58
|
// see: https://github.com/hipstersmoothie/storybook-dark-mode/issues/127#issuecomment-840701971
|
|
59
59
|
get theme(): ThemeVars {
|
|
60
|
-
|
|
61
|
-
const params = new URLSearchParams(window.location.search);
|
|
62
|
-
const themeParam = params.get("theme");
|
|
63
|
-
|
|
64
|
-
const isDark = themeParam
|
|
65
|
-
? themeParam === "dark"
|
|
66
|
-
: parent.document.body.classList.contains("dark");
|
|
60
|
+
const isDark = parent.document.body.classList.contains("dark");
|
|
67
61
|
|
|
68
62
|
if (isDark) {
|
|
69
63
|
document.body.classList.remove("light");
|
|
@@ -105,11 +99,6 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
|
|
|
105
99
|
|
|
106
100
|
const channel = addons.getChannel();
|
|
107
101
|
|
|
108
|
-
// TODO: import from storybook-dark-mode instead
|
|
109
|
-
// but this is currently leading to Storybook build errors with Storybook 8
|
|
110
|
-
// import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
|
|
111
|
-
const DARK_MODE_EVENT_NAME = "DARK_MODE";
|
|
112
|
-
|
|
113
102
|
// our "workaround" above for dynamically setting the docs theme needs a page-reload after
|
|
114
103
|
// the theme has changed to take effect:
|
|
115
104
|
channel.once(DOCS_RENDERED, () => {
|