@sit-onyx/storybook-utils 1.0.0-beta.91 → 1.0.0-beta.92

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.91",
+  "version": "1.0.0-beta.92",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/preview.ts

@@ -100,7 +100,7 @@ export const createPreview = <T extends Preview = Preview>(
         disable: true,
       },
       viewport: {
-        viewports: ONYX_BREAKPOINTS,
+        options: ONYX_BREAKPOINTS,
       },
     },
   } satisfies Preview;

package/src/theme.ts

@@ -3,6 +3,7 @@ import {
   type OnyxBreakpoint,
 } from "@sit-onyx/shared/breakpoints";
 import { create, type ThemeVars } from "storybook/internal/theming";
+import type { Viewport } from "storybook/internal/viewport";
 
 export type BrandDetails = Pick<ThemeVars, "brandTitle" | "brandImage" | "brandUrl">;
 
@@ -100,20 +101,26 @@ const defineTheme = (colors: {
 export const ONYX_BREAKPOINTS = Object.entries(RAW_ONYX_BREAKPOINTS).reduce(
   (obj, [name, width]) => {
     const breakpoint = name as OnyxBreakpoint;
-    obj[breakpoint] = { name: breakpoint, styles: { width: `${width}px`, height: "100%" } };
+
+    const TYPES: Record<OnyxBreakpoint, Viewport["type"]> = {
+      "2xs": "mobile",
+      xs: "mobile",
+      sm: "tablet",
+      md: "tablet",
+      lg: "desktop",
+      xl: "desktop",
+    };
+
+    obj[breakpoint] = {
+      name: breakpoint,
+      styles: { width: `${width}px`, height: "100%" },
+      type: TYPES[breakpoint],
+    };
     return obj;
   },
-  {} as Record<OnyxBreakpoint, StorybookBreakpoint>,
+  {} as Record<OnyxBreakpoint, Viewport>,
 );
 
-export type StorybookBreakpoint = {
-  name: OnyxBreakpoint;
-  styles: {
-    width: string;
-    height: string;
-  };
-};
-
 /**
  * Converts a rem string into a numeric value with a rem base of 16.
  * @example "1rem" => 16