Merge branch 'main' into fix/1366-Adjust-selected-text-color

.changeset/pre.json

@@ -264,6 +264,7 @@
  "stupid-items-wave",
  "stupid-timers-destroy",
  "sweet-suns-hang",
+ "swift-plums-clap",
  "tall-hounds-count",
  "tall-keys-flow",
  "tall-tables-bow",

.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.