@sit-onyx/storybook-utils 1.0.0-alpha.20 → 1.0.0-alpha.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-alpha.20",
+  "version": "1.0.0-alpha.21",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -23,17 +23,19 @@
     "url": "https://github.com/SchwarzIT/onyx/issues"
   },
   "peerDependencies": {
-    "@storybook/core-events": ">= 8.0.0-beta.3",
-    "@storybook/preview-api": ">= 8.0.0-beta.3",
-    "@storybook/theming": ">= 8.0.0-beta.3",
-    "@storybook/vue3": ">= 8.0.0-beta.3",
+    "@storybook/core-events": ">= 8.0.0-beta.5",
+    "@storybook/preview-api": ">= 8.0.0-beta.5",
+    "@storybook/theming": ">= 8.0.0-beta.5",
+    "@storybook/vue3": ">= 8.0.0-beta.5",
     "storybook-dark-mode": ">= 3",
-    "sit-onyx": "^1.0.0-alpha.19"
+    "sit-onyx": "^1.0.0-alpha.20"
   },
   "dependencies": {
     "deepmerge-ts": "^5.1.0"
   },
   "scripts": {
-    "build": "tsc --noEmit"
+    "build": "tsc --noEmit",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
 }

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

@@ -78,22 +78,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: {
@@ -134,6 +119,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