@sit-onyx/storybook-utils 1.0.0-beta.86 → 1.0.0-beta.88

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.86",
+  "version": "1.0.0-beta.88",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -23,23 +23,21 @@
     "url": "https://github.com/SchwarzIT/onyx/issues"
   },
   "peerDependencies": {
-    "@storybook/addon-actions": ">= 8.3.0",
-    "@storybook/vue3": ">= 8.3.0",
-    "storybook": ">= 8.3.0",
-    "storybook-dark-mode": ">= 4",
+    "@storybook/vue3": ">= 9.0.0",
+    "@vueless/storybook-dark-mode": ">= 9.0.0",
+    "storybook": ">= 9.0.0",
     "vue-component-type-helpers": ">= 2",
-    "@sit-onyx/icons": "^1.0.0-beta.16",
+    "@sit-onyx/icons": "^1.0.0-beta.17",
     "@sit-onyx/shared": "^1.0.0-beta.3"
   },
   "dependencies": {
     "deepmerge-ts": "^7.1.5"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^8.6.12",
-    "storybook": "^8.6.12",
-    "vue": "3.5.13",
-    "vue-component-type-helpers": "^2.2.8",
-    "@sit-onyx/icons": "^1.0.0-beta.16",
+    "storybook": "^9.0.10",
+    "vue": "3.5.16",
+    "vue-component-type-helpers": "^2.2.10",
+    "@sit-onyx/icons": "^1.0.0-beta.17",
     "@sit-onyx/shared": "^1.0.0-beta.3"
   },
   "scripts": {

package/src/actions.ts

@@ -1,5 +1,5 @@
-import { action } from "@storybook/addon-actions";
 import type { Decorator } from "@storybook/vue3";
+import { action } from "storybook/actions";
 import { useArgs } from "storybook/internal/preview-api";
 import type { ArgTypes, ArgTypesEnhancer, StrictInputType } from "storybook/internal/types";
 import { h, isReactive, reactive, watch, type Component, type Events } from "vue";

package/src/preview.ts

@@ -1,7 +1,7 @@
 import { getIconImportName } from "@sit-onyx/icons";
 import type { Preview } from "@storybook/vue3";
+import { DARK_MODE_EVENT_NAME } from "@vueless/storybook-dark-mode";
 import { deepmerge } from "deepmerge-ts";
-import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
 import { DOCS_RENDERED } from "storybook/internal/core-events";
 import { addons } from "storybook/internal/preview-api";
 import type { ThemeVars } from "storybook/internal/theming";
@@ -13,7 +13,7 @@ import { ONYX_BREAKPOINTS, createTheme, type BrandDetails } from "./theme";
  * Creates a default Storybook preview configuration for 'onyx' with the following features:
  * - Improved controls (sorting and expanded controls so descriptions etc. are also shown in a single story)
  * - Improved Vue-specific code highlighting (e.g. using `@` instead of `v-on:`)
- * - Setup for dark mode (including docs page). Requires addon `storybook-dark-mode` to be enabled in .storybook/main.ts file
+ * - Setup for dark mode (including docs page). Requires addon `@vueless/storybook-dark-mode` to be enabled in .storybook/main.ts file
  * - Custom Storybook theme using onyx colors (light and dark mode)
  * - Configure viewports / breakpoints as defined by onyx
  * - Logs Vue emits as Storybook events
@@ -46,6 +46,9 @@ export const createPreview = <T extends Preview = Preview>(
 
   const defaultPreview = {
     argTypesEnhancers: [enhanceEventArgTypes],
+    initialGlobals: {
+      ["requiredMode" satisfies keyof typeof requiredGlobalType]: "required",
+    },
     globalTypes: {
       ...requiredGlobalType,
     },

package/src/required.ts

@@ -8,7 +8,6 @@ export const requiredGlobalType = {
   requiredMode: {
     name: "Required mode",
     description: "Switch between 'required' and 'optional' indicator",
-    defaultValue: "required",
     toolbar: {
       icon: "flag",
       items: [

package/src/style.css

@@ -18,7 +18,7 @@
 }
 
 /* the Storybook table of content headline is always black so we need to manually set it for the dark mode */
-#storybook-docs .sbdocs-wrapper > div:nth-child(2) {
+#storybook-docs .sbdocs-wrapper > aside > nav > h2 {
   /* same as Storybook color "textMuted" inside ./theme.ts */
   color: var(--onyx-color-text-icons-neutral-medium);
 }
@@ -34,7 +34,7 @@
   display: none;
 }
 
-/* 
+/*
   Copy of ../sit-onyx/src/styles/variables/themes/onyx.css
   TODO: Find a way to automate this
  */