chore(@sit-onyx/storybook-utils): use global event decorators to auto…

…matically log events (#1725)

- `defineStorybookActionsAndVModels` was deprecated: Replace by using
the `withVModelDecorator` as a global decorator and the
`enhanceEventArgTypes` global argTypesEnhancer.
- `withVModelDecorator` with event array arguments was deprecated: It is
not necessary anymore to define the events manually.

---------

Co-authored-by: Lars Rickert <lars.rickert@mail.schwarz>

.changeset/swift-plums-clap.md

@@ -0,0 +1,6 @@
+---
+"@sit-onyx/storybook-utils": major
+---
+
+- **BREAKING CHANGE**: `defineStorybookActionsAndVModels` and `defineActions` was removed: Replace by using the `withVModelDecorator` as a global decorator and the `enhanceEventArgTypes` global argTypesEnhancer.
+- **BREAKING CHANGE**: `withVModelDecorator`: the event array parameter was removed: It is not necessary anymore to define the events manually.

apps/docs/src/.vitepress/components/ColorPalette.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import ColorPalette from "./ColorPalette.vue";
 
 const meta: Meta<typeof ColorPalette> = {
   title: "colors/ColorPalette",
-  ...defineStorybookActionsAndVModels({
-    component: ColorPalette,
-    events: [],
-  }),
+  component: ColorPalette,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/ColorPaletteValue.stories.ts

@@ -1,19 +1,15 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import ColorPaletteValue from "./ColorPaletteValue.vue";
 
 const meta: Meta<typeof ColorPaletteValue> = {
   title: "colors/ColorPaletteValue",
-  ...defineStorybookActionsAndVModels({
-    component: ColorPaletteValue,
-    events: ["select"],
-    decorators: [
-      (story) => ({
-        components: { story },
-        template: `<div style="width: 12rem;"> <story /> </div>`,
-      }),
-    ],
-  }),
+  component: ColorPaletteValue,
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `<div style="width: 12rem;"> <story /> </div>`,
+    }),
+  ],
 };
 
 export default meta;

apps/docs/src/.vitepress/components/ColorStrip.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import ColorStrip from "./ColorStrip.vue";
 
 const meta: Meta<typeof ColorStrip> = {
   title: "colors/ColorStrip",
-  ...defineStorybookActionsAndVModels({
-    component: ColorStrip,
-    events: [],
-  }),
+  component: ColorStrip,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/ComponentCard.stories.ts

@@ -1,19 +1,15 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import ComponentCard from "./ComponentCard.vue";
 
 const meta: Meta<typeof ComponentCard> = {
   title: "roadmap/ComponentCard",
-  ...defineStorybookActionsAndVModels({
-    component: ComponentCard,
-    events: [],
-    decorators: [
-      (story) => ({
-        components: { story },
-        template: `<div style="width: 16rem;"> <story /> </div>`,
-      }),
-    ],
-  }),
+  component: ComponentCard,
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `<div style="width: 16rem;"> <story /> </div>`,
+    }),
+  ],
 };
 
 export default meta;

apps/docs/src/.vitepress/components/ComponentRoadmap.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import ComponentRoadmap from "./ComponentRoadmap.vue";
 
 const meta: Meta<typeof ComponentRoadmap> = {
   title: "roadmap/ComponentRoadmap",
-  ...defineStorybookActionsAndVModels({
-    component: ComponentRoadmap,
-    events: [],
-  }),
+  component: ComponentRoadmap,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/ComponentStatusBadge.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import ComponentStatusBadge from "./ComponentStatusBadge.vue";
 
 const meta: Meta<typeof ComponentStatusBadge> = {
   title: "roadmap/ComponentStatusBadge",
-  ...defineStorybookActionsAndVModels({
-    component: ComponentStatusBadge,
-    events: [],
-  }),
+  component: ComponentStatusBadge,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/DesignToken.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import DesignToken from "./DesignToken.vue";
 
 const meta: Meta<typeof DesignToken> = {
   title: "tokens/DesignToken",
-  ...defineStorybookActionsAndVModels({
-    component: DesignToken,
-    events: ["copy"],
-  }),
+  component: DesignToken,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/DesignTokenCard.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import DesignTokenCard from "./DesignTokenCard.vue";
 
 const meta: Meta<typeof DesignTokenCard> = {
   title: "tokens/DesignTokenCard",
-  ...defineStorybookActionsAndVModels({
-    component: DesignTokenCard,
-    events: [],
-  }),
+  component: DesignTokenCard,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/DesignTokenHeader.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import DesignTokenHeader from "./DesignTokenHeader.vue";
 
 const meta: Meta<typeof DesignTokenHeader> = {
   title: "tokens/DesignTokenHeader",
-  ...defineStorybookActionsAndVModels({
-    component: DesignTokenHeader,
-    events: ["update:modelValue"],
-  }),
+  component: DesignTokenHeader,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/HorizontalColorStripCard.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import HorizontalColorStripCard from "./HorizontalColorStripCard.vue";
 
 const meta: Meta<typeof HorizontalColorStripCard> = {
   title: "colors/HorizontalColorStripCard",
-  ...defineStorybookActionsAndVModels({
-    component: HorizontalColorStripCard,
-    events: [],
-  }),
+  component: HorizontalColorStripCard,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/IconLibraryItem.stories.ts

@@ -1,14 +1,10 @@
 import emojiHappy2 from "@sit-onyx/icons/emoji-happy-2.svg?raw";
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import IconLibraryItem from "./IconLibraryItem.vue";
 
 const meta: Meta<typeof IconLibraryItem> = {
   title: "Icon library/IconLibraryItem",
-  ...defineStorybookActionsAndVModels({
-    component: IconLibraryItem,
-    events: [],
-  }),
+  component: IconLibraryItem,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/OnyxBorderRadiusTokens.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import OnyxBorderRadiusTokens from "./OnyxBorderRadiusTokens.vue";
 
 const meta: Meta<typeof OnyxBorderRadiusTokens> = {
   title: "tokens/OnyxBorderRadiusTokens",
-  ...defineStorybookActionsAndVModels({
-    component: OnyxBorderRadiusTokens,
-    events: [],
-  }),
+  component: OnyxBorderRadiusTokens,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/OnyxHomePage.stories.ts

@@ -1,4 +1,3 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import { Default as ComponentRoadmapStory } from "./ComponentRoadmap.stories";
 import OnyxHomePage from "./OnyxHomePage.vue";
@@ -10,10 +9,7 @@ import OnyxHomePage from "./OnyxHomePage.vue";
  */
 const meta: Meta<typeof OnyxHomePage> = {
   title: "roadmap/OnyxHomePage",
-  ...defineStorybookActionsAndVModels({
-    component: OnyxHomePage,
-    events: [],
-  }),
+  component: OnyxHomePage,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/OnyxIconLibrary.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import OnyxIconLibrary from "./OnyxIconLibrary.vue";
 
 const meta: Meta<typeof OnyxIconLibrary> = {
   title: "Icon library/OnyxIconLibrary",
-  ...defineStorybookActionsAndVModels({
-    component: OnyxIconLibrary,
-    events: [],
-  }),
+  component: OnyxIconLibrary,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/OnyxShadowTokens.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import OnyxShadowTokens from "./OnyxShadowTokens.vue";
 
 const meta: Meta<typeof OnyxShadowTokens> = {
   title: "tokens/OnyxShadowTokens",
-  ...defineStorybookActionsAndVModels({
-    component: OnyxShadowTokens,
-    events: [],
-  }),
+  component: OnyxShadowTokens,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/OnyxSpacingTokens.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import OnyxSpacingTokens from "./OnyxSpacingTokens.vue";
 
 const meta: Meta<typeof OnyxSpacingTokens> = {
   title: "tokens/OnyxSpacingTokens",
-  ...defineStorybookActionsAndVModels({
-    component: OnyxSpacingTokens,
-    events: [],
-  }),
+  component: OnyxSpacingTokens,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/OnyxTypography.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import OnyxTypography, { type TypographyToken } from "./OnyxTypography.vue";
 
 const meta: Meta<typeof OnyxTypography> = {
   title: "OnyxTypography",
-  ...defineStorybookActionsAndVModels({
-    component: OnyxTypography,
-    events: [],
-  }),
+  component: OnyxTypography,
 };
 
 export default meta;

apps/docs/src/.vitepress/components/RoadmapCard.stories.ts

@@ -1,19 +1,15 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import RoadmapCard from "./RoadmapCard.vue";
 
 const meta: Meta<typeof RoadmapCard> = {
   title: "roadmap/RoadmapCard",
-  ...defineStorybookActionsAndVModels({
-    component: RoadmapCard,
-    events: [],
-    decorators: [
-      (story) => ({
-        components: { story },
-        template: `<div style="width: 16rem;"> <story /> </div>`,
-      }),
-    ],
-  }),
+  component: RoadmapCard,
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `<div style="width: 16rem;"> <story /> </div>`,
+    }),
+  ],
 };
 
 export default meta;

apps/docs/src/.vitepress/components/TopicOverviewCard.stories.ts

@@ -1,13 +1,9 @@
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import TopicOverviewCard from "./TopicOverviewCard.vue";
 
 const meta: Meta<typeof TopicOverviewCard> = {
   title: "TopicOverviewCard",
-  ...defineStorybookActionsAndVModels({
-    component: TopicOverviewCard,
-    events: [],
-  }),
+  component: TopicOverviewCard,
 };
 
 export default meta;

apps/docs/src/development/packages/storybook-utils.md

@@ -51,6 +51,7 @@ Creates a default Storybook preview configuration for a project that uses `onyx`
 - Setup for dark mode (including docs page). Requires addon [`storybook-dark-mode`](https://storybook.js.org/addons/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 actions
 
 ::: code-group
 
@@ -82,36 +83,19 @@ export default config;
 
 :::
 
-### defineStorybookActionsAndVModels
+### withVModelDecorator
 
-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.
+Defines a custom decorator that will implement event handlers for all v-models.
+So the Storybook controls are updated live when the user interacts with the component.
 
-Supports auto-completion for event names. Should be preferred over manually defining argTypes for `*.stories.ts` files.
-
-::: code-group
+```ts [.storybook/preview.ts]
+import { withVModelDecorator } from "@sit-onyx/storybook-utils";
 
-```ts [MyComponent.stories.ts]
-import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
-import type { Meta, StoryObj } from "@storybook/vue3";
-import MyComponent from "./MyComponent.vue";
-
-/**
- * The input component can be used to...
- */
-const meta: Meta<typeof MyComponent> = {
-  title: "components/MyComponent",
-  ...defineStorybookActionsAndVModels({
-    component: MyComponent,
-    events: ["update:modelValue", "change"],
-  }),
+export default {
+  decorators: [withVModelDecorator()],
 };
-
-export default meta;
-type Story = StoryObj<typeof MyComponent>;
 ```
 
-:::
-
 ### createTheme
 
 Creates a custom theme for Storybook that uses onyx colors.