@sit-onyx/storybook-utils 1.0.0-alpha.133 → 1.0.0-alpha.134

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-alpha.133",
+  "version": "1.0.0-alpha.134",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/preview.spec.ts

@@ -6,11 +6,12 @@ import { replaceAll, sourceCodeTransformer } from "./preview";
 import * as sourceCodeGenerator from "./source-code-generator";
 
 describe("preview.ts", () => {
-  test("should transform source code and add icon imports", () => {
+  test("should transform source code and add icon/onyx imports", () => {
     // ARRANGE
     const generatorSpy = vi.spyOn(sourceCodeGenerator, "generateSourceCode")
       .mockReturnValue(`<template>
 <OnyxTest icon='${placeholder}' test='${bellRing}' :obj="{foo:'${replaceAll(calendar, '"', "\\'")}'}" />
+<OnyxOtherComponent />
 </template>`);
 
     // ACT
@@ -19,6 +20,7 @@ describe("preview.ts", () => {
     // ASSERT
     expect(generatorSpy).toHaveBeenCalledOnce();
     expect(sourceCode).toBe(`<script lang="ts" setup>
+import { 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";
@@ -26,6 +28,7 @@ import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
 
 <template>
 <OnyxTest :icon="placeholder" :test="bellRing" :obj="{foo:calendar}" />
+<OnyxOtherComponent />
 </template>`);
   });
 });

package/src/preview.ts

@@ -148,7 +148,7 @@ export const sourceCodeTransformer = (
 
   let code = generateSourceCode(ctx);
 
-  const iconImports: string[] = [];
+  const additionalImports: string[] = [];
 
   // add icon imports to the source code for all used onyx icons
   Object.entries(ALL_ICONS).forEach(([iconName, iconContent]) => {
@@ -158,27 +158,37 @@ export const sourceCodeTransformer = (
 
     if (code.includes(iconContent)) {
       code = code.replace(new RegExp(` (\\S+)=['"]${iconContent}['"]`), ` :$1="${importName}"`);
-      iconImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
+      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);
-      iconImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
+      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);
-      iconImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
+      additionalImports.push(`import ${importName} from "@sit-onyx/icons/${iconName}.svg?raw";`);
     }
   });
 
-  if (iconImports.length === 0) return code;
+  // 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\S+/g)).map((match) => match[0].replace("<", ""))),
+  ].sort();
+
+  if (usedOnyxComponents.length > 0) {
+    additionalImports.unshift(`import { ${usedOnyxComponents.join(", ")} } from "sit-onyx";`);
+  }
+
+  if (additionalImports.length === 0) return code;
 
   if (code.startsWith("<script")) {
     const index = code.indexOf("\n");
-    return code.slice(0, index) + iconImports.join("\n") + "\n" + code.slice(index);
+    return code.slice(0, index) + additionalImports.join("\n") + "\n" + code.slice(index);
   }
 
   return `<script lang="ts" setup>
-${iconImports.join("\n")}
+${additionalImports.join("\n")}
 </script>
 
 ${code}`;