@sit-onyx/storybook-utils 1.0.0-beta.95 → 1.0.0-beta.97

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.95",
+  "version": "1.0.0-beta.97",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
   "files": [
     "src"
   ],
@@ -27,18 +30,18 @@
     "@vueless/storybook-dark-mode": ">= 9.0.0",
     "storybook": ">= 9.0.0",
     "vue-component-type-helpers": ">= 2",
-    "@sit-onyx/icons": "^1.0.0-beta.20",
-    "@sit-onyx/shared": "^1.0.0-beta.3"
+    "@sit-onyx/icons": "^1.0.0-beta.21",
+    "@sit-onyx/shared": "^1.0.0-beta.4"
   },
   "dependencies": {
     "deepmerge-ts": "^7.1.5"
   },
   "devDependencies": {
-    "storybook": "^9.0.12",
-    "vue": "3.5.16",
-    "vue-component-type-helpers": "^2.2.10",
-    "@sit-onyx/icons": "^1.0.0-beta.20",
-    "@sit-onyx/shared": "^1.0.0-beta.3"
+    "storybook": "^9.0.17",
+    "vue": "3.5.17",
+    "vue-component-type-helpers": "^3.0.3",
+    "@sit-onyx/icons": "^1.0.0-beta.21",
+    "@sit-onyx/shared": "^1.0.0-beta.4"
   },
   "scripts": {
     "build": "tsc --noEmit",

package/src/actions.spec.ts

@@ -1,6 +1,6 @@
 import type { StoryContextForEnhancers } from "storybook/internal/types";
 import { expect, test } from "vitest";
-import { enhanceEventArgTypes } from "./actions";
+import { enhanceEventArgTypes } from "./actions.js";
 
 test("should enhance event arg types", () => {
   const argTypes = {

package/src/actions.ts

@@ -4,7 +4,7 @@ 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";
 import type { ComponentProps, ComponentSlots } from "vue-component-type-helpers";
-import { EVENT_DOC_MAP } from "./events";
+import { EVENT_DOC_MAP } from "./events.js";
 
 type ComponentEmits<Props extends ComponentProps<unknown>> = keyof {
   [Key in keyof Props as Key extends `on${string}` ? Key : never]: true;

package/src/index.ts

@@ -1,5 +1,5 @@
-export * from "./actions";
-export * from "./preview";
-export * from "./sbType";
-export * from "./theme";
-export * from "./types";
+export * from "./actions.js";
+export * from "./preview.js";
+export * from "./sbType.js";
+export * from "./theme.js";
+export * from "./types.js";

package/src/preview.spec.ts

@@ -2,7 +2,7 @@ import bellRing from "@sit-onyx/icons/bell-ring.svg?raw";
 import calendar from "@sit-onyx/icons/calendar.svg?raw";
 import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
 import { describe, expect, test } from "vitest";
-import { replaceAll, sourceCodeTransformer } from "./preview";
+import { replaceAll, sourceCodeTransformer } from "./preview.js";
 
 describe("preview.ts", () => {
   test("should transform source code and add icon/onyx imports", () => {

package/src/preview.ts

@@ -5,9 +5,9 @@ import { deepmerge } from "deepmerge-ts";
 import { DOCS_RENDERED } from "storybook/internal/core-events";
 import { addons } from "storybook/internal/preview-api";
 import type { ThemeVars } from "storybook/internal/theming";
-import { enhanceEventArgTypes } from "./actions";
-import { requiredGlobalType, withRequired } from "./required";
-import { ONYX_BREAKPOINTS, createTheme, type BrandDetails } from "./theme";
+import { enhanceEventArgTypes } from "./actions.js";
+import { requiredGlobalType, withRequired } from "./required.js";
+import { ONYX_BREAKPOINTS, createTheme, type BrandDetails } from "./theme.js";
 
 /**
  * Creates a default Storybook preview configuration for 'onyx' with the following features:
@@ -48,6 +48,7 @@ export const createPreview = <T extends Preview = Preview>(
     argTypesEnhancers: [enhanceEventArgTypes],
     initialGlobals: {
       ["requiredMode" satisfies keyof typeof requiredGlobalType]: "required",
+      backgrounds: { value: "currentTheme" },
     },
     globalTypes: {
       ...requiredGlobalType,
@@ -96,8 +97,9 @@ export const createPreview = <T extends Preview = Preview>(
         dark: themes.dark,
       },
       backgrounds: {
-        // backgrounds are not needed because we have configured the darkMode addon/toggle switch
-        disable: true,
+        options: {
+          currentTheme: { name: "Dynamic", value: "var(--onyx-color-base-background-tinted)" },
+        },
       },
       viewport: {
         options: ONYX_BREAKPOINTS,

package/src/required.ts

@@ -1,6 +1,6 @@
 import { type Decorator } from "@storybook/vue3";
 import { ref, watch } from "vue";
-import type { StorybookGlobalType } from "./types";
+import type { StorybookGlobalType } from "./types.js";
 
 type RequiredIndicator = "required" | "optional";
 

package/src/sbType.spec.ts

@@ -1,6 +1,6 @@
 import type { SBType } from "storybook/internal/types";
 import { describe, expect, test, vi } from "vitest";
-import { walkTree } from "./sbType";
+import { walkTree } from "./sbType.js";
 
 describe("walkTree", () => {
   test.each<{ input: SBType; expected: SBType["name"][] }>([