@sit-onyx/storybook-utils 1.0.0-beta.103 → 1.0.0-beta.105

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.103",
+  "version": "1.0.0-beta.105",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -31,19 +31,18 @@
     "prettier": ">= 3.0.0",
     "storybook": ">= 9.0.0",
     "vue-component-type-helpers": ">= 2",
-    "@sit-onyx/flags": "^1.0.0-beta.7",
-    "@sit-onyx/icons": "^1.0.0-beta.25",
-    "@sit-onyx/shared": "^1.0.0-beta.4"
+    "@sit-onyx/icons": "^1.0.0-beta.26",
+    "@sit-onyx/flags": "^1.0.0-beta.7"
   },
   "dependencies": {
     "deepmerge-ts": "^7.1.5"
   },
   "devDependencies": {
-    "storybook": "^9.1.1",
-    "vue": "3.5.18",
-    "vue-component-type-helpers": "^3.0.5",
-    "@sit-onyx/icons": "^1.0.0-beta.25",
-    "@sit-onyx/shared": "^1.0.0-beta.4"
+    "storybook": "^9.1.5",
+    "vue": "3.5.21",
+    "vue-component-type-helpers": "^3.0.6",
+    "@sit-onyx/icons": "^1.0.0-beta.26",
+    "@sit-onyx/shared": "^1.0.0-beta.5"
   },
   "scripts": {
     "build": "tsc --noEmit",

package/src/breakpoints.ts

@@ -0,0 +1,17 @@
+/**
+ * All available onyx breakpoints / viewports.
+ * Key = breakpoint name, value = width in pixels.
+ */
+export const ONYX_BREAKPOINTS = {
+  "2xs": 320,
+  xs: 577,
+  sm: 769,
+  md: 993,
+  lg: 1441,
+  xl: 1921,
+} as const;
+
+// "string &" is needed to fix a current Vue issue where a warning is logged for invalid property types
+// when this types is used in a union, see:
+// https://github.com/SchwarzIT/onyx/issues/3290
+export type OnyxBreakpoint = string & keyof typeof ONYX_BREAKPOINTS;

package/src/events.ts

@@ -1,7 +1,7 @@
 import type { Events } from "vue";
 
 // prettier-ignore
-type EventName<T extends Event> = 
+type EventName<T extends Event> =
   T extends ClipboardEvent ? "ClipboardEvent"
 : T extends WheelEvent ? "WheelEvent"
 : T extends PointerEvent ? "PointerEvent"
@@ -311,8 +311,8 @@ export const EVENT_DOC_MAP: EventDocMap = {
   },
   onAuxclick: {
     constructor: {
-      name: "MouseEvent",
-      url: "https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent",
+      name: "PointerEvent",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent",
     },
     event: {
       name: "auxclick",
@@ -321,8 +321,8 @@ export const EVENT_DOC_MAP: EventDocMap = {
   },
   onClick: {
     constructor: {
-      name: "MouseEvent",
-      url: "https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent",
+      name: "PointerEvent",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent",
     },
     event: {
       name: "click",
@@ -331,8 +331,8 @@ export const EVENT_DOC_MAP: EventDocMap = {
   },
   onContextmenu: {
     constructor: {
-      name: "MouseEvent",
-      url: "https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent",
+      name: "PointerEvent",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent",
     },
     event: {
       name: "contextmenu",

package/src/preview.ts

@@ -144,7 +144,9 @@ export const sourceCodeTransformer = async (originalSourceCode: string): Promise
   // add imports for all used onyx components
   // Set is used here to only include unique components if they are used multiple times
   const usedOnyxComponents = new Set(
-    Array.from(code.matchAll(/<(Onyx\w+)(?:\s*\/?)/g)).map((match) => match[1]),
+    Array.from(code.matchAll(/<(Onyx\w+)(?:\s*\/?)/g))
+      .map((match) => match[1])
+      .filter((i) => i != undefined),
   );
   additionalImports.set("sit-onyx", usedOnyxComponents);
 

package/src/theme.ts

@@ -1,9 +1,6 @@
-import {
-  ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS,
-  type OnyxBreakpoint,
-} from "@sit-onyx/shared/breakpoints";
 import { create, type ThemeVars } from "storybook/internal/theming";
 import type { Viewport } from "storybook/internal/viewport";
+import { ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, type OnyxBreakpoint } from "./breakpoints.js";
 
 export type BrandDetails = Pick<ThemeVars, "brandTitle" | "brandImage" | "brandUrl">;