@sit-onyx/storybook-utils 1.0.0-beta.40 → 1.0.0-beta.41

package/package.json

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

package/src/actions.ts

@@ -1,85 +1,61 @@
-import type { ArgTypes, Decorator, Meta } from "@storybook/vue3";
-import { deepmerge } from "deepmerge-ts";
+import type { Decorator } from "@storybook/vue3";
 import { useArgs } from "storybook/internal/preview-api";
+import type { ArgTypesEnhancer, StrictInputType } from "storybook/internal/types";
 import { isReactive, reactive, watch } from "vue";
-import type { DefineStorybookActionsAndVModelsOptions, ExtractVueEventNames } from ".";
 
 /**
- * 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 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
- * // Input.stories.ts
- * import { defineStorybookActionsAndVModels } from '@sit-onyx/storybook-utils';
- * import type { Meta } from '@storybook/vue3';
- * import Input from './Input.vue';
- *
- * const meta: Meta<typeof Input> = {
- *   title: 'components/Input',
- *   ...defineStorybookActionsAndVModels({
- *     component: Input,
- *     events: ['update:modelValue', 'change'],
- *   }),
- * };
- * ```
+ * Adds actions for all argTypes of the 'event' category, so that they are logged via the actions plugin.
  */
-export const defineStorybookActionsAndVModels = <T>(
-  options: DefineStorybookActionsAndVModelsOptions<T>,
-): Meta => {
-  const defaultMeta = {
-    argTypes: {
-      ...defineActions(options.events),
-      ...{}, // this is needed to fix a type issue
-    },
-    decorators: [withVModelDecorator(options.events)],
-  } satisfies Meta;
-
-  return deepmerge(options, defaultMeta);
+export const enhanceEventArgTypes: ArgTypesEnhancer = ({ argTypes }) => {
+  Object.values(argTypes)
+    .filter(({ table }) => table?.category === "events")
+    .forEach(({ name }) => {
+      const eventName = `on${capitalizeFirstLetter(name)}`;
+      if (eventName in argTypes) {
+        return;
+      }
+      argTypes[eventName] = {
+        name: eventName,
+        table: { disable: true },
+        action: eventName,
+      };
+    });
+  return argTypes;
 };
 
-/**
- * Defines Storybook actions ("argTypes") for the given events.
- * Reason for this wrapper function is that Storybook expects event names to be prefixed
- * with "on", e.g. "onClick".
- *
- * However in Vue, the event names are plain like "click" instead of "onClick" because
- * otherwise we would use it like "@on-click="..."" which is redundant.
- *
- * So this utility will remove the on[eventName] entry from the Storybook panel/table
- * and register the correct eventName as action so it is logged in the "Actions" tab.
- *
- * @example defineActions(["click", "input"])
- */
-export const defineActions = <T>(events: ExtractVueEventNames<T>[]): ArgTypes => {
-  return events.reduce<ArgTypes>((argTypes, eventName) => {
-    argTypes[`on${capitalizeFirstLetter(eventName)}`] = {
-      table: { disable: true },
-      action: eventName,
-    };
-
-    argTypes[eventName] = { control: false };
-    return argTypes;
-  }, {});
+export type WithVModelDecoratorOptions = {
+  /**
+   * The matcher for the v-model events.
+   * @default /^update:/
+   */
+  filter: (argType: StrictInputType) => boolean;
 };
 
 /**
- * Defines a custom decorator that will implement event handlers for all v-models
- * so that the Storybook controls are updated live when the user interacts with the component
+ * Defines a custom decorator that will implement event handlers for all v-models,
+ * so that the Storybook controls are updated live when the user interacts with the component.
+ * This ensures that the story and component props stay in sync.
  *
  * @example
  * ```ts
- * import Input from './Input.vue';
+ * // .storybook/preview.ts
  *
  * {
- *   decorators: [withVModelDecorator<typeof Input>(["update:modelValue"])]
+ *   decorators: [withVModelDecorator()]
  * }
  * ```
  */
-export const withVModelDecorator = <T>(events: ExtractVueEventNames<T>[]): Decorator => {
+
+export const withVModelDecorator = (options?: WithVModelDecoratorOptions): Decorator => {
   return (story, ctx) => {
-    const vModelEvents = events.filter((event) => event.startsWith("update:"));
+    const vModelFilter =
+      options?.filter ||
+      (({ table, name }) => table?.category === "events" && name.startsWith("update:"));
+
+    const vModelEvents = Object.values(ctx.argTypes)
+      .filter(vModelFilter)
+      .map(({ name }) => name);
+
     if (!vModelEvents.length) return story();
 
     const [args, updateArgs] = useArgs();

package/src/preview.ts

@@ -5,6 +5,7 @@ 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";
+import { enhanceEventArgTypes } from "./actions";
 import { requiredGlobalType, withRequired } from "./required";
 import { generateSourceCode } from "./source-code-generator";
 import { ONYX_BREAKPOINTS, createTheme } from "./theme";
@@ -21,6 +22,7 @@ const themes = {
  * - Setup for dark mode (including docs page). Requires addon `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
  *
  * @param overrides Custom preview / overrides, will be deep merged with the default preview.
  *
@@ -41,6 +43,7 @@ const themes = {
  */
 export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
   const defaultPreview = {
+    argTypesEnhancers: [enhanceEventArgTypes],
     globalTypes: {
       ...requiredGlobalType,
     },

package/src/types.ts

@@ -1,52 +1,3 @@
-import type { ComponentPropsAndSlots, Meta } from "@storybook/vue3";
-
-/**
- * Extracts all event names defined by e.g. `defineEmits()` from the given Vue component.
- *
- * @example
- * ```ts
- * import Input from "./Input.vue";
- * type InputEvents = ExtractVueEventNames<typeof Input>; // e.g. "input" | "change"
- * ```
- */
-export type ExtractVueEventNames<VueComponent> =
-  Extract<
-    // extract all props/events of the vue component that are functions
-    ExtractKeysByValueType<
-      // 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 -- 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"
-    `on${string}`
-  > extends `on${infer EventName}`
-    ? // until now the extracted event names still start with "on" but we want to have the plain event name
-      // so we will remove the "on" prefix and uncapitalized the first letter so e.g. "onClick" becomes "click"
-      Uncapitalize<EventName>
-    : never;
-
-/**
- * Extracts only the keys from T whose value type satisfies U.
- *
- * @example
- * ```ts
- * type Test = ExtractKeysByValueType<{ a: boolean, b: number, c: boolean }, boolean>
- * // result: "a" | "c"
- * ```
- */
-export type ExtractKeysByValueType<T, U> = { [P in keyof T]: T[P] extends U ? P : never }[keyof T] &
-  keyof T;
-
-/**
- * Options for defining Storybook actions and v-models.
- */
-export type DefineStorybookActionsAndVModelsOptions<T> = Meta<T> & {
-  component: NonNullable<T>;
-  events: ExtractVueEventNames<T>[];
-};
-
 export type StorybookGlobalType<TValue> = {
   name: string;
   description: string;