@sit-onyx/storybook-utils 1.0.0-beta.99 → 1.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.99",
+  "version": "1.0.0",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -28,20 +28,21 @@
   "peerDependencies": {
     "@storybook/vue3-vite": ">= 9.0.0",
     "@vueless/storybook-dark-mode": ">= 9.0.0",
+    "prettier": ">= 3.0.0",
     "storybook": ">= 9.0.0",
     "vue-component-type-helpers": ">= 2",
-    "@sit-onyx/icons": "^1.0.0-beta.22",
-    "@sit-onyx/shared": "^1.0.0-beta.4"
+    "@sit-onyx/flags": "^1.0.0",
+    "@sit-onyx/icons": "^1.0.0"
   },
   "dependencies": {
     "deepmerge-ts": "^7.1.5"
   },
   "devDependencies": {
-    "storybook": "^9.0.18",
-    "vue": "3.5.18",
-    "vue-component-type-helpers": "^3.0.3",
-    "@sit-onyx/icons": "^1.0.0-beta.22",
-    "@sit-onyx/shared": "^1.0.0-beta.4"
+    "storybook": "^9.1.5",
+    "vue": "3.5.21",
+    "vue-component-type-helpers": "^3.0.6",
+    "@sit-onyx/icons": "^1.0.0",
+    "@sit-onyx/shared": "^0.1.0"
   },
   "scripts": {
     "build": "tsc --noEmit",

package/src/breakpoints.ts

@@ -0,0 +1,17 @@
+/**
+ * All available onyx breakpoints / viewports.
+ * Key = breakpoint name, value = width in pixels.
+ */
+export const ONYX_BREAKPOINTS = {
+  "2xs": 320,
+  xs: 577,
+  sm: 769,
+  md: 993,
+  lg: 1441,
+  xl: 1921,
+} as const;
+
+// "string &" is needed to fix a current Vue issue where a warning is logged for invalid property types
+// when this types is used in a union, see:
+// https://github.com/SchwarzIT/onyx/issues/3290
+export type OnyxBreakpoint = string & keyof typeof ONYX_BREAKPOINTS;

package/src/events.ts

@@ -1,7 +1,7 @@
 import type { Events } from "vue";
 
 // prettier-ignore
-type EventName<T extends Event> = 
+type EventName<T extends Event> =
   T extends ClipboardEvent ? "ClipboardEvent"
 : T extends WheelEvent ? "WheelEvent"
 : T extends PointerEvent ? "PointerEvent"
@@ -311,8 +311,8 @@ export const EVENT_DOC_MAP: EventDocMap = {
   },
   onAuxclick: {
     constructor: {
-      name: "MouseEvent",
-      url: "https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent",
+      name: "PointerEvent",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent",
     },
     event: {
       name: "auxclick",
@@ -321,8 +321,8 @@ export const EVENT_DOC_MAP: EventDocMap = {
   },
   onClick: {
     constructor: {
-      name: "MouseEvent",
-      url: "https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent",
+      name: "PointerEvent",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent",
     },
     event: {
       name: "click",
@@ -331,8 +331,8 @@ export const EVENT_DOC_MAP: EventDocMap = {
   },
   onContextmenu: {
     constructor: {
-      name: "MouseEvent",
-      url: "https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent",
+      name: "PointerEvent",
+      url: "https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent",
     },
     event: {
       name: "contextmenu",

package/src/preview.spec.ts

@@ -1,14 +1,13 @@
-import bellRing from "@sit-onyx/icons/bell-ring.svg?raw";
-import calendar from "@sit-onyx/icons/calendar.svg?raw";
-import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
+import { flagDE } from "@sit-onyx/flags";
+import { iconBellRing, iconCalendar, iconPlaceholder } from "@sit-onyx/icons";
 import { describe, expect, test } from "vitest";
 import { replaceAll, sourceCodeTransformer } from "./preview.js";
 
 describe("preview.ts", () => {
-  test("should transform source code and add icon/onyx imports", () => {
+  test("should transform source code and add icon/onyx imports", async () => {
     // ACT
-    const sourceCode = sourceCodeTransformer(`<template>
-<OnyxTest icon='${placeholder}' test='${bellRing}' :obj="{foo:'${replaceAll(calendar, '"', "\\'")}'}" />
+    const sourceCode = await sourceCodeTransformer(`<template>
+<OnyxTest icon='${iconPlaceholder}' test='${iconBellRing}' :obj="{foo:'${replaceAll(iconCalendar, '"', "\\'")}'}" flag='${flagDE}' />
 <OnyxOtherComponent />
 <OnyxComp>Test</OnyxComp>
 </template>`);
@@ -16,15 +15,19 @@ describe("preview.ts", () => {
     // ASSERT
     expect(sourceCode).toBe(`<script lang="ts" setup>
 import { OnyxComp, OnyxOtherComponent, OnyxTest } from "sit-onyx";
-import bellRing from "@sit-onyx/icons/bell-ring.svg?raw";
-import calendar from "@sit-onyx/icons/calendar.svg?raw";
-import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
+import { iconBellRing, iconCalendar, iconPlaceholder } from "@sit-onyx/icons";
+import { flagDE } from "@sit-onyx/flags";
 </script>
 
 <template>
-<OnyxTest :icon="placeholder" :test="bellRing" :obj="{foo:calendar}" />
-<OnyxOtherComponent />
-<OnyxComp>Test</OnyxComp>
+  <OnyxTest
+    :icon="iconPlaceholder"
+    :test="iconBellRing"
+    :obj="{foo:iconCalendar}"
+    :flag="flagDE"
+  />
+  <OnyxOtherComponent />
+  <OnyxComp>Test</OnyxComp>
 </template>`);
   });
 });

package/src/preview.ts

@@ -1,4 +1,3 @@
-import { getIconImportName } from "@sit-onyx/icons/utils";
 import type { Preview } from "@storybook/vue3-vite";
 import { DARK_MODE_EVENT_NAME } from "@vueless/storybook-dark-mode";
 import { deepmerge } from "deepmerge-ts";
@@ -132,80 +131,116 @@ export const createPreview = <T extends Preview = Preview>(
  *
  * @see https://storybook.js.org/docs/react/api/doc-block-source
  */
-export const sourceCodeTransformer = (originalSourceCode: string): string => {
-  const RAW_ICONS = import.meta.glob("../node_modules/@sit-onyx/icons/src/assets/*.svg", {
-    query: "?raw",
-    import: "default",
-    eager: true,
-  });
-
+export const sourceCodeTransformer = async (originalSourceCode: string): Promise<string> => {
   let code = originalSourceCode;
 
   /**
-   * Mapping between icon SVG content (key) and icon name (value).
-   * Needed to display a labelled dropdown list of all available icons.
+   * A list of additional JavaScript imports to be added at the top of the source code.
+   *
+   * key = module/package name to import from, value: set of imports to import from the package
    */
-  const ALL_ICONS = Object.entries(RAW_ICONS).reduce<Record<string, string>>(
-    (obj, [filePath, content]) => {
-      obj[filePath.split("/").at(-1)!.replace(".svg", "")] = content as string;
-      return obj;
-    },
-    {},
-  );
-
-  const additionalImports: string[] = [];
-
-  // add icon imports to the source code for all used onyx icons
-  Object.entries(ALL_ICONS).forEach(([iconName, iconContent]) => {
-    const importName = getIconImportName(iconName);
-    const singleQuotedIconContent = `'${replaceAll(iconContent, '"', "\\'")}'`;
-    const escapedIconContent = `"${replaceAll(iconContent, '"', '\\"')}"`;
-
-    if (code.includes(iconContent)) {
-      code = code.replace(
-        new RegExp(` (\\S+)=['"]${escapeRegExp(iconContent)}['"]`),
-        ` :$1="${importName}"`,
-      );
-      additionalImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
-    } else if (code.includes(singleQuotedIconContent)) {
-      // support icons inside objects
-      code = code.replace(singleQuotedIconContent, importName);
-      additionalImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
-    } else if (code.includes(escapedIconContent)) {
-      // support icons inside objects
-      code = code.replace(escapedIconContent, importName);
-      additionalImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
-    }
-  });
+  const additionalImports = new Map<string, Set<string>>();
 
   // add imports for all used onyx components
   // Set is used here to only include unique components if they are used multiple times
-  const usedOnyxComponents = [
-    ...new Set(Array.from(code.matchAll(/<(Onyx\w+)(?:\s*\/?)/g)).map((match) => match[1])),
-  ].sort();
+  const usedOnyxComponents = new Set(
+    Array.from(code.matchAll(/<(Onyx\w+)(?:\s*\/?)/g))
+      .map((match) => match[1])
+      .filter((i) => i != undefined),
+  );
+  additionalImports.set("sit-onyx", usedOnyxComponents);
 
-  if (usedOnyxComponents.length > 0) {
-    additionalImports.unshift(`import { ${usedOnyxComponents.join(", ")} } from "sit-onyx";`);
-  }
+  /**
+   * List of npm packages to replace the source code with.
+   * The source code will be checked for any import of the package and (if its used), the code will be replaced by the corresponding import.
+   */
+  const packagesToReplace = [
+    { name: "@sit-onyx/icons", data: await import("@sit-onyx/icons") },
+    { name: "@sit-onyx/flags", data: await import("@sit-onyx/flags") },
+  ];
+
+  packagesToReplace.forEach((_package) => {
+    Object.entries(_package.data).forEach(([name, content]) => {
+      const singleQuotedContent = `'${replaceAll(content, '"', "\\'")}'`;
+      const escapedContent = `"${replaceAll(content, '"', '\\"')}"`;
 
-  if (additionalImports.length === 0) return code;
+      const imports = additionalImports.get(_package.name) ?? new Set<string>();
 
-  if (code.startsWith("<script")) {
-    const index = code.indexOf("\n");
-    const hasOtherImports = code.includes("import {");
-    return (
-      code.slice(0, index) +
-      additionalImports.join("\n") +
-      (!hasOtherImports ? "\n" : "") +
-      code.slice(index)
+      if (code.includes(content)) {
+        imports.add(name);
+
+        code = code.replace(
+          new RegExp(` (\\S+)=['"]${escapeRegExp(content)}['"]`),
+          ` :$1="${name}"`,
+        );
+      } else if (code.includes(singleQuotedContent)) {
+        // support values inside objects
+        imports.add(name);
+        code = code.replace(singleQuotedContent, name);
+      } else if (code.includes(escapedContent)) {
+        // support values inside objects
+        imports.add(name);
+        code = code.replace(escapedContent, name);
+      }
+
+      additionalImports.set(_package.name, imports);
+    });
+  });
+
+  // remove imports without any data so we don't add empty imports
+  additionalImports.forEach((value, key) => {
+    if (!value.size) additionalImports.delete(key);
+  });
+
+  // generate the source code for the additional imports and add them to the top of the code snippet
+  if (additionalImports.size > 0) {
+    const additionalImportsCode = Array.from(additionalImports.entries()).reduce(
+      (code, [packageName, imports]) => {
+        if (imports.size) {
+          code.push(
+            `import { ${Array.from(imports.values()).sort().join(", ")} } from "${packageName}";`,
+          );
+        }
+        return code;
+      },
+      [] as string[],
     );
-  }
 
-  return `<script lang="ts" setup>
-${additionalImports.join("\n")}
+    if (code.startsWith("<script")) {
+      const index = code.indexOf("\n");
+      const hasOtherImports = code.includes("import {");
+      code =
+        code.slice(0, index) +
+        additionalImportsCode.join("\n") +
+        (!hasOtherImports ? "\n" : "") +
+        code.slice(index);
+    } else {
+      code = `<script lang="ts" setup>
+${additionalImportsCode.join("\n")}
 </script>
 
 ${code}`;
+    }
+  }
+
+  try {
+    const { format } = await import("prettier/standalone");
+    const parserHtml = await import("prettier/parser-html");
+
+    code = await format(code, {
+      parser: "vue",
+      plugins: [parserHtml],
+      htmlWhitespaceSensitivity: "ignore",
+    });
+
+    // trim code to remove trailing newlines that are added by prettier
+    code = code.trim();
+  } catch (e) {
+    // eslint-disable-next-line no-console -- if the formatting fails, there is usually an issue with our code so we want to inform the user that the formatting failed
+    console.error("Error while formatting Storybook code snippet:", e);
+  }
+
+  return code;
 };
 
 /**

package/src/theme.ts

@@ -1,9 +1,6 @@
-import {
-  ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS,
-  type OnyxBreakpoint,
-} from "@sit-onyx/shared/breakpoints";
 import { create, type ThemeVars } from "storybook/internal/theming";
 import type { Viewport } from "storybook/internal/viewport";
+import { ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, type OnyxBreakpoint } from "./breakpoints.js";
 
 export type BrandDetails = Pick<ThemeVars, "brandTitle" | "brandImage" | "brandUrl">;