@sit-onyx/storybook-utils 1.0.0-alpha.9 → 1.0.0-alpha.91

package/README.md

@@ -11,3 +11,9 @@
 # onyx Storybook utils
 
 Storybook utilities for Vue created by [Schwarz IT](https://it.schwarz).
+
+<br />
+
+## Documentation
+
+You can find our documentation [here](https://onyx.schwarz/development/packages/storybook-utils.html).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0-alpha.91",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -13,18 +13,29 @@
     ".": "./src/index.ts",
     "./style.css": "./src/index.css"
   },
+  "homepage": "https://onyx.schwarz/development/packages/storybook-utils.html",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SchwarzIT/onyx",
+    "directory": "packages/storybook-utils"
+  },
+  "bugs": {
+    "url": "https://github.com/SchwarzIT/onyx/issues"
+  },
   "peerDependencies": {
-    "@storybook/core-events": ">= 7",
-    "@storybook/preview-api": ">= 7",
-    "@storybook/theming": ">= 7",
-    "@storybook/vue3": ">= 7",
-    "storybook-dark-mode": ">= 3",
-    "sit-onyx": "^0.1.0-alpha.8"
+    "@storybook/core-events": ">= 8.0.0",
+    "@storybook/preview-api": ">= 8.0.0",
+    "@storybook/theming": ">= 8.0.0",
+    "@storybook/vue3": ">= 8.0.0",
+    "storybook-dark-mode": ">= 4",
+    "sit-onyx": "^1.0.0-alpha.88"
   },
   "dependencies": {
     "deepmerge-ts": "^5.1.0"
   },
   "scripts": {
-    "build": "tsc --noEmit"
+    "build": "tsc --noEmit",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
 }

package/src/index.css

@@ -22,5 +22,5 @@
 /* the Storybook table of content headline is always black so we need to manually set it for the dark mode */
 #storybook-docs .sbdocs-wrapper > div:nth-child(2) {
   /* same as Storybook color "textMuted" inside ./theme.ts */
-  color: var(--onyx-color-text-neutral-medium);
+  color: var(--onyx-color-text-icons-neutral-medium);
 }

package/src/preview.spec.ts

@@ -0,0 +1,18 @@
+import { describe, expect, test } from "vitest";
+import { sourceCodeTransformer } from "./preview";
+
+describe("preview.ts", () => {
+  test("should transform source code", () => {
+    // ARRANGE
+    // mix double and single quotes to test that both are supported
+    const originalSourceCode = `<OnyxTest v-on:test="someFunction" @empty='()=>({})' v-bind="{}" :disabled='true' :readonly="false" test="true" />`;
+
+    const expectedOutput = `<OnyxTest @test="someFunction" disabled :readonly="false" test />`;
+
+    // ACT
+    const output = sourceCodeTransformer(originalSourceCode);
+
+    // ASSERT
+    expect(output).toBe(expectedOutput);
+  });
+});

package/src/preview.ts

@@ -4,6 +4,8 @@ import { 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 { requiredGlobalType, withRequired } from "./required";
 import { ONYX_BREAKPOINTS, createTheme } from "./theme";
 
 const themes = {
@@ -17,7 +19,6 @@ const themes = {
  * - 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
  * - Custom Storybook theme using onyx colors (light and dark mode)
- * - 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.
@@ -39,6 +40,10 @@ const themes = {
  */
 export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
   const defaultPreview = {
+    globalTypes: {
+      ...requiredGlobalType,
+    },
+    decorators: [withRequired],
     parameters: {
       controls: {
         matchers: {
@@ -52,20 +57,16 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
       docs: {
         // see: https://github.com/hipstersmoothie/storybook-dark-mode/issues/127#issuecomment-840701971
         get theme(): ThemeVars {
-          // support setting the theme via query parameters, useful if docs are embedded via an iframe
-          const params = new URLSearchParams(window.location.search);
-          const themeParam = params.get("theme");
-
-          const isDark = themeParam
-            ? themeParam === "dark"
-            : parent.document.body.classList.contains("dark");
+          const isDark = parent.document.body.classList.contains("dark");
 
           if (isDark) {
             document.body.classList.remove("light");
             document.body.classList.add("dark");
+            document.documentElement.style.colorScheme = "dark";
           } else {
             document.body.classList.remove("dark");
             document.body.classList.add("light");
+            document.documentElement.style.colorScheme = "light";
           }
 
           return isDark ? themes.dark : themes.light;
@@ -78,22 +79,7 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
            * we want it to look.
            * @see https://storybook.js.org/docs/react/api/doc-block-source
            */
-          transform: (sourceCode: string): string => {
-            const replacements = [
-              // replace event bindings with shortcut
-              { searchValue: "v-on:", replaceValue: "@" },
-              // remove empty event handlers, e.g. @click="()=>({})" will be removed
-              { searchValue: / @.*['"]\(\)=>\({}\)['"]/g, replaceValue: "" },
-              // remove empty v-binds, e.g. v-bind="{}" will be removed
-              { searchValue: / v-bind=['"]{}['"]/g, replaceValue: "" },
-              // replace boolean shortcuts for true, e.g. disabled="true" will be changed to just disabled
-              { searchValue: /:(.*)=['"]true['"]/g, replaceValue: "$1" },
-            ];
-
-            return replacements.reduce((code, replacement) => {
-              return replaceAll(code, replacement.searchValue, replacement.replaceValue);
-            }, sourceCode);
-          },
+          transform: sourceCodeTransformer,
         },
       },
       darkMode: {
@@ -129,6 +115,29 @@ export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
   return deepmerge<[T, typeof defaultPreview]>(overrides ?? ({} as T), defaultPreview);
 };
 
+/**
+ * Custom transformer for the story source code to better fit to our
+ * Vue.js code because storybook per default does not render it exactly how
+ * we want it to look.
+ * @see https://storybook.js.org/docs/react/api/doc-block-source
+ */
+export const sourceCodeTransformer = (sourceCode: string): string => {
+  const replacements = [
+    // replace event bindings with shortcut
+    { searchValue: "v-on:", replaceValue: "@" },
+    // remove empty event handlers, e.g. @click="()=>({})" will be removed
+    { searchValue: / @\S*['"]\(\)=>\({}\)['"]/g, replaceValue: "" },
+    // // remove empty v-binds, e.g. v-bind="{}" will be removed
+    { searchValue: / v-bind=['"]{}['"]/g, replaceValue: "" },
+    // // replace boolean shortcuts for true, e.g. disabled="true" will be changed to just disabled
+    { searchValue: /:?(\S*)=['"]true['"]/g, replaceValue: "$1" },
+  ];
+
+  return replacements.reduce((code, replacement) => {
+    return replaceAll(code, replacement.searchValue, replacement.replaceValue);
+  }, sourceCode);
+};
+
 /**
  * Custom String.replaceAll implementation using a RegExp
  * because String.replaceAll() is not available in our specified EcmaScript target in tsconfig.json

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 }[];
+  };
+};