@sit-onyx/storybook-utils 0.0.0 → 0.1.0-alpha.0

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "0.0.0",
+  "version": "0.1.0-alpha.0",
   "type": "module",
+  "author": "Schwarz IT KG",
+  "license": "Apache-2.0",
+  "files": [
+    "src"
+  ],
   "exports": {
     ".": {
       "default": "./src/index.ts"

package/src/actions.ts

@@ -5,8 +5,8 @@ import type { DefineStorybookActionsAndVModelsOptions, ExtractVueEventNames } fr
 
 /**
  * Utility to define Storybook meta for a given Vue component which will take care of defining argTypes for
- * the given events as well as implementing v-model handlers.
- * Should be preferred over manually defining argTypes for a *.stories.ts file.
+ * the given events as well as implementing v-model handlers so that the Storybook controls are updated when you interact with the component.
+ * Should be preferred over manually defining argTypes for *.stories.ts files.
  *
  * @example
  * ```ts
@@ -35,7 +35,6 @@ export const defineStorybookActionsAndVModels = <T>(
     decorators: [
       (story, context) => {
         // provide the `updateArgs` function so we can use it in the render() function below
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const [_, updateArgs] = useArgs();
         return story({ ...context, updateArgs });
       },
@@ -107,8 +106,7 @@ const defineRenderFunctionForVModels = <T>(
     }, {});
 
     return {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      components: { [componentName]: options.component } as Record<string, any>,
+      components: { [componentName]: options.component },
       setup: () => ({ args, ...eventHandlers }),
       /**
        * Add v-model event handlers to source code

package/src/preview.ts

@@ -4,12 +4,15 @@ import { themes, type ThemeVars } from "@storybook/theming";
 import { type Preview } from "@storybook/vue3";
 import { deepmerge } from "deepmerge-ts";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
+import { ONYX_BREAKPOINTS } 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
+ * - Support for setting the light/dark mode when Storybook is embedded as an iframe (via query parameter, e.g. `?theme=dark`)
+ * - Configure viewports / breakpoints as defined by Onyx
  *
  * @param overrides Custom preview / overrides, will be deep merged with the default preview.
  *
@@ -84,6 +87,9 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
         // backgrounds are not needed because we have configured the darkMode addon/toggle switch
         disable: true,
       },
+      viewport: {
+        viewports: ONYX_BREAKPOINTS,
+      },
     },
   } satisfies Preview;
 

package/src/theme.ts

@@ -0,0 +1,45 @@
+/** All available Storybook breakpoints / viewports supported by Onyx. */
+export const ONYX_BREAKPOINTS = {
+  xsmall2 : {
+    name: "2xsmall",
+    styles: {
+      width: "320px",
+      height: "100%",
+    },
+  },
+  xsmall: {
+    name: "xsmall",
+    styles: {
+      width: "576px",
+      height: "100%",
+    },
+  },
+  small: {
+    name: "small",
+    styles: {
+      width: "768px",
+      height: "100%",
+    },
+  },
+  medium: {
+    name: "medium",
+    styles: {
+      width: "992px",
+      height: "100%",
+    },
+  },
+  large: {
+    name: "large",
+    styles: {
+      width: "1440px",
+      height: "100%",
+    },
+  },
+  xlarge: {
+    name: "xlarge",
+    styles: {
+      width: "1920px",
+      height: "100%",
+    },
+  },
+} as const;

package/src/types.ts

@@ -15,7 +15,7 @@ export type ExtractVueEventNames<VueComponent> = Extract<
     // this generic type will extract ALL props and events from the given Vue component
     ComponentPropsAndSlots<VueComponent>,
     // emits are declared as functions, so we only take props/events that are functions and ignore the rest
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- We must use any here to match the type defined by Vue
     ((...args: any) => any) | undefined
   >,
   // filter out potential function properties by just picking events that start with "on"

package/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["src"],
-  "compilerOptions": {
-    "types": ["node"],
-    "rootDir": "./src",
-    "baseUrl": ".",
-    "lib": ["ES2021.String", "DOM"]
-  }
-}