@sit-onyx/storybook-utils 1.0.0-alpha.28 → 1.0.0-alpha.29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-alpha.28",
+  "version": "1.0.0-alpha.29",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -28,7 +28,7 @@
     "@storybook/theming": ">= 8.0.0-rc.0",
     "@storybook/vue3": ">= 8.0.0-rc.0",
     "storybook-dark-mode": ">= 3",
-    "sit-onyx": "^1.0.0-alpha.26"
+    "sit-onyx": "^1.0.0-alpha.27"
   },
   "dependencies": {
     "deepmerge-ts": "^5.1.0"

package/src/preview.ts

@@ -5,6 +5,7 @@ import { type Preview } from "@storybook/vue3";
 import { deepmerge } from "deepmerge-ts";
 
 import { ONYX_BREAKPOINTS, createTheme } from "./theme";
+import { requiredGlobalType, withRequired } from "./required";
 
 const themes = {
   light: createTheme(),
@@ -39,6 +40,10 @@ const themes = {
  */
 export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
   const defaultPreview = {
+    globalTypes: {
+      ...requiredGlobalType,
+    },
+    decorators: [withRequired],
     parameters: {
       controls: {
         matchers: {

package/src/required.ts

@@ -0,0 +1,36 @@
+import { type Decorator } from "@storybook/vue3";
+import { ref, watch } from "vue";
+import type { StorybookGlobalType } from "./types";
+
+type RequiredIndicator = "required" | "optional";
+
+export const requiredGlobalType = {
+  requiredMode: {
+    name: "Required mode",
+    description: "Switch between 'required' and 'optional' indicator",
+    defaultValue: "required",
+    toolbar: {
+      icon: "flag",
+      items: [
+        { value: "required", right: "*", title: "Required indicator" },
+        { value: "optional", right: "(optional)", title: "Optional indicator" },
+      ],
+    },
+  } satisfies StorybookGlobalType<RequiredIndicator>,
+};
+
+const requiredMode = ref<RequiredIndicator>("required");
+
+export const withRequired: Decorator = (Story, context) => {
+  watch(
+    () => context.globals.requiredMode as RequiredIndicator,
+    (newRequiredMode) => (requiredMode.value = newRequiredMode),
+    { immediate: true },
+  );
+
+  return {
+    components: { Story },
+    setup: () => ({ requiredMode }),
+    template: `<div :class="{ ['onyx-use-optional']: requiredMode === 'optional' }"> <story /> </div>`,
+  };
+};

package/src/types.ts

@@ -46,3 +46,13 @@ export type DefineStorybookActionsAndVModelsOptions<T> = Meta<T> & {
   component: NonNullable<T>;
   events: ExtractVueEventNames<T>[];
 };
+
+export type StorybookGlobalType<TValue> = {
+  name: string;
+  description: string;
+  defaultValue: TValue;
+  toolbar: {
+    icon: string;
+    items: { value: TValue; right: string; title: string }[];
+  };
+};