Shorten shared-components visual snapshot paths

Author: ZacksBot

packages/shared-components/.storybook/main.ts

@@ -9,8 +9,10 @@ import type { StorybookConfig } from "@storybook/react-vite";
 import fs from "node:fs";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import { mergeConfig } from "vite";
-import { dirname, join } from "node:path";
+import { basename, dirname, extname, join } from "node:path";
 import { fileURLToPath } from "node:url";
+import { defineStorybookVis } from "storybook-addon-vis/node";
+import { trimCommonFolder } from "storybook-addon-vis/vitest-plugin";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -28,12 +30,27 @@ for (const lang of languageFiles) {
     }
 }
 
-/**
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Yarn PnP or are set up within a monorepo.
- */
-function getAbsolutePath(value: string): any {
-    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+function resolveVisualSnapshotRootDir({ ci, platform }: { ci: boolean; platform: string }): string {
+    return `__vis__/${ci ? "linux" : platform}`;
+}
+
+function slugifySnapshotSegment(segment: string): string {
+    return segment
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+
+function resolveVisualSnapshotSubpath({ subpath }: { subpath: string }): string {
+    const normalizedSubpath = trimCommonFolder(subpath.startsWith("./") ? subpath.slice(2) : subpath).replaceAll(
+        "\\",
+        "/",
+    );
+    const topLevelDirectory = normalizedSubpath.split("/", 1)[0] ?? "shared-components";
+    const storyName = basename(normalizedSubpath, extname(normalizedSubpath)).replace(/\.stories$/, "");
+
+    return `${slugifySnapshotSegment(topLevelDirectory)}/${storyName}`;
 }
 
 const config: StorybookConfig = {
@@ -43,7 +60,14 @@ const config: StorybookConfig = {
         "@storybook/addon-designs",
         "@storybook/addon-a11y",
         "@storybook/addon-vitest",
-        getAbsolutePath("storybook-addon-vis"),
+        defineStorybookVis({
+            visProjects: [
+                {
+                    snapshotRootDir: resolveVisualSnapshotRootDir,
+                    snapshotSubpath: resolveVisualSnapshotSubpath,
+                },
+            ],
+        }),
     ],
     framework: "@storybook/react-vite",
     core: {