@sit-onyx/storybook-utils 1.0.0-beta.34 → 1.0.0-beta.36

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.34",
+  "version": "1.0.0-beta.36",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -26,8 +26,8 @@
     "@storybook/vue3": ">= 8.2.0",
     "storybook": ">= 8.2.0",
     "storybook-dark-mode": ">= 4",
-    "@sit-onyx/icons": "^1.0.0-beta.0",
-    "sit-onyx": "^1.0.0-beta.33"
+    "@sit-onyx/icons": "^1.0.0-beta.1",
+    "sit-onyx": "^1.0.0-beta.35"
   },
   "dependencies": {
     "deepmerge-ts": "^7.1.0"

package/src/preview.ts

@@ -156,7 +156,10 @@ export const sourceCodeTransformer = (
     const escapedIconContent = `"${replaceAll(iconContent, '"', '\\"')}"`;
 
     if (code.includes(iconContent)) {
-      code = code.replace(new RegExp(` (\\S+)=['"]${iconContent}['"]`), ` :$1="${importName}"`);
+      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
@@ -206,3 +209,11 @@ ${code}`;
 export const replaceAll = (value: string, searchValue: string | RegExp, replaceValue: string) => {
   return value.replace(new RegExp(searchValue, "gi"), replaceValue);
 };
+
+/**
+ * Escapes the given string value to be used in `new RegExp()`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#escaping
+ */
+export const escapeRegExp = (string: string) => {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+};