storybook-addon-dependency-previews 0.1.0

package/README.md

@@ -0,0 +1,192 @@
+# Storybook Add On - Dependency Previews
+
+![Dependency Previews logo](./readme-images/dependency-previews-logo.png)
+
+## What is this?
+
+> **This plugin is built for Storybook 10**
+
+A plugin for [Storybook](https://storybook.js.org/) that shows the full dependency tree in both directions (built with and used by) the components in your application.
+
+This is what you will see in Storybook after Dependency Previews have been installed and configured:
+
+![Dependency Previews - all closed](./readme-images/all-closed.png)
+
+The below image demonstrates what you will see when you open up some of the dependency segments:
+
+![Dependency Previews - all open](./readme-images/all-open.png)
+
+See the dependency previews add on in action at the [Storybook addon demo site](https://dependency-previews-storybook.netlify.app/).
+
+You can also [visit the example website](https://dependency-previews-demo-site.netlify.app/) that the Storybook demo is built for.
+
+<!-- TODO: Provide a video/gif of the addon in action -->
+
+## Installation guide
+
+### Package download
+
+First you will need to install the plugin via npm
+
+```
+npm install storybook-addon-dependency-previews
+```
+
+<details>
+	<summary>Other package managers</summary>
+	<p><pre><code>pnpm add storybook-addon-dependency-previews</code></pre></p>
+	<p><pre><code>yarn add storybook-addon-dependency-previews</code></pre></p>
+	<p><pre><code>bun add storybook-addon-dependency-previews</code></pre></p>
+	<p><pre><code>deno add npm:storybook-addon-dependency-previews</code></pre></p>
+</details>
+
+### Register the add-on
+
+From your root folder, open your `.storybook/main.ts` file.
+
+Edit the `main.ts` to contain the following values or copy/paste the below to replace the full contents of the main.ts file.
+
+```ts
+import { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+	// tells storybook what files to look for when it goes searching for story files
+	stories: ['../src/**/*.stories.@(ts|tsx|mdx|svelte|vue)'],
+	addons: [
+		// autodocs is required for this addon to work
+		'@storybook/addon-docs',
+		// the storybook dependency previews addon registration
+		'storybook-addon-dependency-previews/addon',
+	],
+	framework: {
+		// The framework that storybook uses to read story components
+		// Use @storybook/*-vite for your framework of choice
+		name: '@storybook/react-vite',
+		options: {},
+	},
+}
+
+export default config
+```
+
+### Bare minimum storybook story example
+
+Get a story ready so you have something to test with.
+
+Below is the bare minimum needed to generate a viable story that is compatible with the add-on.
+
+```ts
+import type { Meta } from '@storybook/react-vite'
+import { ComponentName } from './ComponentName'
+
+const meta: Meta<typeof ComponentName> = {
+	// You can use spaces here to make the title of the story page more human readable
+	title: 'Component Name',
+	component: ComponentName,
+	// autodocs tag is required
+	tags: ['autodocs'],
+	// The `__filePath` property must be applied to every story file
+	// for the addon to track dependencies effectively
+	// `import.meta.url` is a Vite specific value that automatically generates the path for you
+	parameters: {
+		__filePath: import.meta.url,
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+	args: {},
+}
+```
+
+### package.json scripts
+
+You will need the following scripts in your `package.json` file:
+
+```json
+// package.json
+{
+	...
+	"scripts": {
+		...
+		"sb": "sb-deps --watch --run-storybook",
+		"sb:build": "sb-deps && storybook build",
+		"sb:deps": "sb-deps",
+		"sb:alt-port": "sb-deps --watch --run-storybook --sb-port 7020"
+	}
+	...
+}
+```
+
+Don't run any of these yet, you are not finished with the installation.
+
+`npm run sb` will run storybook in watch mode. It will update the dependency-previews.json file whenever a story file changes, is added, or removed. Use this instead of the `storybook` command to take advantage of automatic dependency tracking while you work and auto scaffolding of stories when new story files are created.
+
+`npm run sb:build` will do a one off compile of your storybook website
+
+`npm run sb:deps` will generate a fresh dependency-previews.json on demand
+
+`npm run sb:alt-port` (optional) will run storybook in watch mode and run it using a specific port number.
+
+### Create the preview.tsx file
+
+First run `npm run sb:deps` to generate a fresh `dependency-previews.json` file in the `.storybook` folder.
+
+Make sure that the `"resolveJsonModule"` tsConfig.json setting is set to `true` to import this file.
+
+Now create a `preview.tsx` file in the `.storybook` folder with the following content:
+
+```tsx
+/// <reference types="vite/client" />
+
+import * as React from 'react'
+import {
+	defaultPreviewParameters,
+	dependencyPreviewDecorators,
+	type StorybookPreviewConfig,
+} from 'storybook-addon-dependency-previews'
+
+// Import the generated dependency-previews.json file
+import dependenciesJson from './dependency-previews.json'
+
+// Global styles are imported here
+import '../src/styles.css'
+
+const previewConfig: StorybookPreviewConfig = {
+	decorators: [...dependencyPreviewDecorators],
+	parameters: {
+		...defaultPreviewParameters,
+		dependencyPreviews: {
+			dependenciesJson,
+			storyModules: import.meta.glob(
+				'/src/**/*.stories.@(tsx|ts|jsx|js|svelte)',
+				{ eager: false },
+			),
+			// Replace this with the base url of your git repository
+			// This enables the addon to link to the source code of the component
+			sourceRootUrl:
+				'https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/example-site',
+			// This allows Source File Path to open the
+			// component file directly in VS Code when
+			// running in a local host environment.
+			// `import.meta.url` is a Vite specific feature
+			projectRootPath: new URL('..', import.meta.url).pathname,
+		},
+	},
+}
+
+export default previewConfig
+```
+
+### Run it!
+
+You should be all set now.
+
+Try running `npm run sb` to boot up storybook, leave it running as you work.
+
+As you create new component files, the component will be auto-scaffolded for you and a matching story file will be created for it automatically. The dependency previews json file will also be auto-updated.
+
+This workflow allows you to focus on what matters instead of having to waste time writing lots of boilerplate code every time you want to create a new component.

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,29 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__toESM = __toESM;

package/dist/addon/index.cjs

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_addon_vitePlugin = require('./vitePlugin.cjs');
+
+//#region src/addon/index.ts
+async function viteFinal(config) {
+	config.plugins = [...config.plugins ?? [], require_addon_vitePlugin.sbDepsVitePlugin()];
+	return config;
+}
+
+//#endregion
+exports.viteFinal = viteFinal;
+//# sourceMappingURL=index.cjs.map

package/dist/addon/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["sbDepsVitePlugin"],"sources":["../../src/addon/index.ts"],"sourcesContent":["import { sbDepsVitePlugin } from './vitePlugin'\n\nexport async function viteFinal(config: any) {\n\tconfig.plugins = [...(config.plugins ?? []), sbDepsVitePlugin()]\n\treturn config\n}\n"],"mappings":";;;;AAEA,eAAsB,UAAU,QAAa;AAC5C,QAAO,UAAU,CAAC,GAAI,OAAO,WAAW,EAAE,EAAGA,2CAAkB,CAAC;AAChE,QAAO"}

package/dist/addon/index.d.cts

@@ -0,0 +1,5 @@
+//#region src/addon/index.d.ts
+declare function viteFinal(config: any): Promise<any>;
+//#endregion
+export { viteFinal };
+//# sourceMappingURL=index.d.cts.map

package/dist/addon/index.d.mts

@@ -0,0 +1,5 @@
+//#region src/addon/index.d.ts
+declare function viteFinal(config: any): Promise<any>;
+//#endregion
+export { viteFinal };
+//# sourceMappingURL=index.d.mts.map

package/dist/addon/index.mjs

@@ -0,0 +1,11 @@
+import { sbDepsVitePlugin } from "./vitePlugin.mjs";
+
+//#region src/addon/index.ts
+async function viteFinal(config) {
+	config.plugins = [...config.plugins ?? [], sbDepsVitePlugin()];
+	return config;
+}
+
+//#endregion
+export { viteFinal };
+//# sourceMappingURL=index.mjs.map

package/dist/addon/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/addon/index.ts"],"sourcesContent":["import { sbDepsVitePlugin } from './vitePlugin'\n\nexport async function viteFinal(config: any) {\n\tconfig.plugins = [...(config.plugins ?? []), sbDepsVitePlugin()]\n\treturn config\n}\n"],"mappings":";;;AAEA,eAAsB,UAAU,QAAa;AAC5C,QAAO,UAAU,CAAC,GAAI,OAAO,WAAW,EAAE,EAAG,kBAAkB,CAAC;AAChE,QAAO"}

package/dist/addon/preset.cjs

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/addon/preset.ts
+const addons = ["@storybook/addon-docs", "@storybook/addon-links"];
+
+//#endregion
+exports.addons = addons;
+//# sourceMappingURL=preset.cjs.map

package/dist/addon/preset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.cjs","names":[],"sources":["../../src/addon/preset.ts"],"sourcesContent":["export const addons: Array<string> = [\n\t'@storybook/addon-docs',\n\t'@storybook/addon-links',\n]\n"],"mappings":";;;AAAA,MAAa,SAAwB,CACpC,yBACA,yBACA"}

package/dist/addon/preset.d.cts

@@ -0,0 +1,5 @@
+//#region src/addon/preset.d.ts
+declare const addons: Array<string>;
+//#endregion
+export { addons };
+//# sourceMappingURL=preset.d.cts.map

package/dist/addon/preset.d.mts

@@ -0,0 +1,5 @@
+//#region src/addon/preset.d.ts
+declare const addons: Array<string>;
+//#endregion
+export { addons };
+//# sourceMappingURL=preset.d.mts.map

package/dist/addon/preset.mjs

@@ -0,0 +1,6 @@
+//#region src/addon/preset.ts
+const addons = ["@storybook/addon-docs", "@storybook/addon-links"];
+
+//#endregion
+export { addons };
+//# sourceMappingURL=preset.mjs.map

package/dist/addon/preset.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.mjs","names":[],"sources":["../../src/addon/preset.ts"],"sourcesContent":["export const addons: Array<string> = [\n\t'@storybook/addon-docs',\n\t'@storybook/addon-links',\n]\n"],"mappings":";AAAA,MAAa,SAAwB,CACpC,yBACA,yBACA"}

package/dist/addon/vitePlugin.cjs

@@ -0,0 +1,26 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+let node_fs = require("node:fs");
+let node_path = require("node:path");
+
+//#region src/addon/vitePlugin.ts
+function sbDepsVitePlugin() {
+	const virtId = "virtual:dependency-previews-json";
+	const resolved = "\0" + virtId;
+	return {
+		name: "sb-deps",
+		resolveId(id) {
+			return id === virtId ? resolved : null;
+		},
+		load(id) {
+			if (id !== resolved) return null;
+			const jsonPath = (0, node_path.resolve)(process.cwd(), ".storybook/dependency-previews.json");
+			const json = (0, node_fs.existsSync)(jsonPath) ? (0, node_fs.readFileSync)(jsonPath, "utf8") : "{}";
+			return `export default ${json};`;
+		}
+	};
+}
+
+//#endregion
+exports.sbDepsVitePlugin = sbDepsVitePlugin;
+//# sourceMappingURL=vitePlugin.cjs.map

package/dist/addon/vitePlugin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitePlugin.cjs","names":[],"sources":["../../src/addon/vitePlugin.ts"],"sourcesContent":["import { readFileSync, existsSync } from 'node:fs'\nimport { resolve } from 'node:path'\n\nexport function sbDepsVitePlugin() {\n\tconst virtId = 'virtual:dependency-previews-json'\n\tconst resolved = '\\0' + virtId\n\treturn {\n\t\tname: 'sb-deps',\n\t\tresolveId(id: string) {\n\t\t\treturn id === virtId ? resolved : null\n\t\t},\n\t\tload(id: string) {\n\t\t\tif (id !== resolved) return null\n\t\t\tconst jsonPath = resolve(\n\t\t\t\tprocess.cwd(),\n\t\t\t\t'.storybook/dependency-previews.json',\n\t\t\t)\n\t\t\tconst json = existsSync(jsonPath)\n\t\t\t\t? readFileSync(jsonPath, 'utf8')\n\t\t\t\t: '{}'\n\t\t\treturn `export default ${json};`\n\t\t},\n\t}\n}\n"],"mappings":";;;;;;AAGA,SAAgB,mBAAmB;CAClC,MAAM,SAAS;CACf,MAAM,WAAW,OAAO;AACxB,QAAO;EACN,MAAM;EACN,UAAU,IAAY;AACrB,UAAO,OAAO,SAAS,WAAW;;EAEnC,KAAK,IAAY;AAChB,OAAI,OAAO,SAAU,QAAO;GAC5B,MAAM,kCACL,QAAQ,KAAK,EACb,sCACA;GACD,MAAM,+BAAkB,SAAS,6BACjB,UAAU,OAAO,GAC9B;AACH,UAAO,kBAAkB,KAAK;;EAE/B"}

package/dist/addon/vitePlugin.d.cts

@@ -0,0 +1,9 @@
+//#region src/addon/vitePlugin.d.ts
+declare function sbDepsVitePlugin(): {
+  name: string;
+  resolveId(id: string): string | null;
+  load(id: string): string | null;
+};
+//#endregion
+export { sbDepsVitePlugin };
+//# sourceMappingURL=vitePlugin.d.cts.map

package/dist/addon/vitePlugin.d.mts

@@ -0,0 +1,9 @@
+//#region src/addon/vitePlugin.d.ts
+declare function sbDepsVitePlugin(): {
+  name: string;
+  resolveId(id: string): string | null;
+  load(id: string): string | null;
+};
+//#endregion
+export { sbDepsVitePlugin };
+//# sourceMappingURL=vitePlugin.d.mts.map

package/dist/addon/vitePlugin.mjs

@@ -0,0 +1,24 @@
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+//#region src/addon/vitePlugin.ts
+function sbDepsVitePlugin() {
+	const virtId = "virtual:dependency-previews-json";
+	const resolved = "\0" + virtId;
+	return {
+		name: "sb-deps",
+		resolveId(id) {
+			return id === virtId ? resolved : null;
+		},
+		load(id) {
+			if (id !== resolved) return null;
+			const jsonPath = resolve(process.cwd(), ".storybook/dependency-previews.json");
+			const json = existsSync(jsonPath) ? readFileSync(jsonPath, "utf8") : "{}";
+			return `export default ${json};`;
+		}
+	};
+}
+
+//#endregion
+export { sbDepsVitePlugin };
+//# sourceMappingURL=vitePlugin.mjs.map

package/dist/addon/vitePlugin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitePlugin.mjs","names":[],"sources":["../../src/addon/vitePlugin.ts"],"sourcesContent":["import { readFileSync, existsSync } from 'node:fs'\nimport { resolve } from 'node:path'\n\nexport function sbDepsVitePlugin() {\n\tconst virtId = 'virtual:dependency-previews-json'\n\tconst resolved = '\\0' + virtId\n\treturn {\n\t\tname: 'sb-deps',\n\t\tresolveId(id: string) {\n\t\t\treturn id === virtId ? resolved : null\n\t\t},\n\t\tload(id: string) {\n\t\t\tif (id !== resolved) return null\n\t\t\tconst jsonPath = resolve(\n\t\t\t\tprocess.cwd(),\n\t\t\t\t'.storybook/dependency-previews.json',\n\t\t\t)\n\t\t\tconst json = existsSync(jsonPath)\n\t\t\t\t? readFileSync(jsonPath, 'utf8')\n\t\t\t\t: '{}'\n\t\t\treturn `export default ${json};`\n\t\t},\n\t}\n}\n"],"mappings":";;;;AAGA,SAAgB,mBAAmB;CAClC,MAAM,SAAS;CACf,MAAM,WAAW,OAAO;AACxB,QAAO;EACN,MAAM;EACN,UAAU,IAAY;AACrB,UAAO,OAAO,SAAS,WAAW;;EAEnC,KAAK,IAAY;AAChB,OAAI,OAAO,SAAU,QAAO;GAC5B,MAAM,WAAW,QAChB,QAAQ,KAAK,EACb,sCACA;GACD,MAAM,OAAO,WAAW,SAAS,GAC9B,aAAa,UAAU,OAAO,GAC9B;AACH,UAAO,kBAAkB,KAAK;;EAE/B"}

package/dist/blocks/DependencyPreviews.cjs

@@ -0,0 +1,102 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_PrimaryPreview = require('../components/PrimaryPreview.cjs');
+const require_StoryLink = require('../components/StoryLink.cjs');
+const require_useDependencyGraph = require('../hooks/useDependencyGraph.cjs');
+const require_ComponentSourceLink = require('../components/ComponentSourceLink.cjs');
+const require_Expandable = require('../components/Expandable.cjs');
+const require_BuildIcon = require('../components/icons/BuildIcon.cjs');
+const require_EyeOpen = require('../components/icons/EyeOpen.cjs');
+const require_SquaresPlus = require('../components/icons/SquaresPlus.cjs');
+const require_ArrowToRectangleIcon = require('../components/icons/ArrowToRectangleIcon.cjs');
+const require_CubeIcon = require('../components/icons/CubeIcon.cjs');
+const require_PathCopyMolecule = require('../components/PathCopyMolecule.cjs');
+const require_SbHeading = require('../components/SbHeading.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let src_blocks_DependencyPreviews_module_css = require("./DependencyPreviews.module.css");
+src_blocks_DependencyPreviews_module_css = require_runtime.__toESM(src_blocks_DependencyPreviews_module_css);
+
+//#region src/blocks/DependencyPreviews.tsx
+function DependencyPreviews() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useDependencyGraph.DependencyGraphProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopLevelDependencyPreviews, {}) });
+}
+function TopLevelDependencyPreviews() {
+	const { node } = require_useDependencyGraph.useDependencyGraph();
+	if (!node) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "No dependency previews for this component." });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: src_blocks_DependencyPreviews_module_css.default.topLevelWrapper,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SbHeading.SbHeading, { children: "Dependency previews" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DepsPreviewContent, {
+			storyInfo: node,
+			enablePreview: false
+		})]
+	});
+}
+function DepsPreviewContent({ storyInfo, enablePreview = true }) {
+	const { graph } = require_useDependencyGraph.useDependencyGraph();
+	const { builtWith, usedIn } = graph[storyInfo.componentPath];
+	const filteredBuiltWith = require_useDependencyGraph.filterOutStoryAndNonComponentFiles(builtWith);
+	const filteredUsedIn = require_useDependencyGraph.filterOutStoryAndNonComponentFiles(usedIn);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		enablePreview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Expandable.Expandable, {
+			Header: `Preview ${storyInfo.storyTitle} component`,
+			Icon: require_EyeOpen.EyeOpen,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PrimaryPreview.PrimaryPreview, { storyInfo })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Expandable.Expandable, {
+			Header: `Paths to ${storyInfo.storyTitle} component`,
+			Icon: require_ArrowToRectangleIcon.ArrowToRectangle,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: src_blocks_DependencyPreviews_module_css.default.pathData,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PathCopyMolecule.PathCopyMolecule, {
+						label: "Source File Path",
+						copyContent: storyInfo.componentPath,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentSourceLink.ComponentSourceLink, { storyInfo })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PathCopyMolecule.PathCopyMolecule, {
+						label: "Story Title Path",
+						copyContent: storyInfo.storyTitlePath,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_StoryLink.StoryLink, {
+							info: storyInfo,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: storyInfo.storyTitlePath.replaceAll("/", "/<wbr/>") } })
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PathCopyMolecule.PathCopyMolecule, {
+						label: "Story Page ID",
+						copyContent: storyInfo.storyId,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_StoryLink.StoryLink, {
+							info: storyInfo,
+							children: storyInfo.storyId
+						})
+					})
+				]
+			})
+		}),
+		filteredBuiltWith.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Expandable.Expandable, {
+			Header: `Built with ${filteredBuiltWith.length} component${plural(filteredBuiltWith)}`,
+			Icon: require_BuildIcon.BuildIcon,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: require_useDependencyGraph.filterOutStoryAndNonComponentFiles(builtWith).map((info) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DepsPreviewItem, { storyInfo: info }, info.componentPath)) })
+		}),
+		filteredUsedIn.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Expandable.Expandable, {
+			Header: `Used in ${filteredUsedIn.length} component${plural(filteredUsedIn)}`,
+			Icon: require_SquaresPlus.SquaresPlus,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: require_useDependencyGraph.filterOutStoryAndNonComponentFiles(usedIn).map((info) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DepsPreviewItem, { storyInfo: info }, info.componentPath)) })
+		})
+	] });
+}
+function DepsPreviewItem({ storyInfo }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: storyInfo.storyId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Expandable.Expandable, {
+		Icon: require_CubeIcon.CubeIcon,
+		Header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_StoryLink.StoryLink, {
+			info: storyInfo,
+			tooltipPosition: "right"
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DepsPreviewContent, { storyInfo })
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_StoryLink.StoryLink, { info: storyInfo }) }, storyInfo.componentPath);
+}
+function plural(arr) {
+	return arr.length === 1 ? "" : "s";
+}
+
+//#endregion
+exports.DependencyPreviews = DependencyPreviews;
+//# sourceMappingURL=DependencyPreviews.cjs.map

package/dist/blocks/DependencyPreviews.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DependencyPreviews.cjs","names":["DependencyGraphProvider","useDependencyGraph","s","SbHeading","filterOutStoryAndNonComponentFiles","Expandable","EyeOpen","PrimaryPreview","ArrowToRectangle","PathCopyMolecule","ComponentSourceLink","StoryLink","BuildIcon","SquaresPlus","CubeIcon"],"sources":["../../src/blocks/DependencyPreviews.tsx"],"sourcesContent":["import { PrimaryPreview } from '../components/PrimaryPreview'\nimport { StoryLink } from '../components/StoryLink'\nimport {\n\tDependencyGraphProvider,\n\tfilterOutStoryAndNonComponentFiles,\n\tuseDependencyGraph,\n} from '../hooks/useDependencyGraph'\nimport type { StoryInfo } from '../types'\n\nimport { ComponentSourceLink } from '../components/ComponentSourceLink'\nimport { Expandable } from '../components/Expandable'\nimport { BuildIcon } from '../components/icons/BuildIcon'\nimport { EyeOpen } from '../components/icons/EyeOpen'\nimport { SquaresPlus } from '../components/icons/SquaresPlus'\n\nimport { ArrowToRectangle } from '../components/icons/ArrowToRectangleIcon'\nimport { CubeIcon } from '../components/icons/CubeIcon'\nimport { PathCopyMolecule } from '../components/PathCopyMolecule'\nimport { SbHeading } from '../components/SbHeading'\nimport s from './DependencyPreviews.module.css'\n\nexport function DependencyPreviews() {\n\treturn (\n\t\t<DependencyGraphProvider>\n\t\t\t<TopLevelDependencyPreviews />\n\t\t</DependencyGraphProvider>\n\t)\n}\n\nfunction TopLevelDependencyPreviews() {\n\tconst { node } = useDependencyGraph()\n\tif (!node) return <div>No dependency previews for this component.</div>\n\n\treturn (\n\t\t<div className={s.topLevelWrapper}>\n\t\t\t<SbHeading>Dependency previews</SbHeading>\n\t\t\t<DepsPreviewContent storyInfo={node} enablePreview={false} />\n\t\t</div>\n\t)\n}\n\ninterface PropsForDepsPreviewContent {\n\tstoryInfo: StoryInfo\n\tenablePreview?: boolean\n}\nfunction DepsPreviewContent({\n\tstoryInfo,\n\tenablePreview = true,\n}: PropsForDepsPreviewContent) {\n\tconst { graph } = useDependencyGraph()\n\tconst { builtWith, usedIn } = graph![storyInfo.componentPath]\n\tconst filteredBuiltWith = filterOutStoryAndNonComponentFiles(builtWith)\n\tconst filteredUsedIn = filterOutStoryAndNonComponentFiles(usedIn)\n\n\treturn (\n\t\t<div>\n\t\t\t{enablePreview && (\n\t\t\t\t<Expandable\n\t\t\t\t\tHeader={`Preview ${storyInfo.storyTitle} component`}\n\t\t\t\t\tIcon={EyeOpen}\n\t\t\t\t>\n\t\t\t\t\t<PrimaryPreview storyInfo={storyInfo} />\n\t\t\t\t</Expandable>\n\t\t\t)}\n\n\t\t\t<Expandable\n\t\t\t\tHeader={`Paths to ${storyInfo.storyTitle} component`}\n\t\t\t\tIcon={ArrowToRectangle}\n\t\t\t>\n\t\t\t\t<div className={s.pathData}>\n\t\t\t\t\t<PathCopyMolecule\n\t\t\t\t\t\tlabel=\"Source File Path\"\n\t\t\t\t\t\tcopyContent={storyInfo.componentPath}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ComponentSourceLink storyInfo={storyInfo} />\n\t\t\t\t\t</PathCopyMolecule>\n\n\t\t\t\t\t<PathCopyMolecule\n\t\t\t\t\t\tlabel=\"Story Title Path\"\n\t\t\t\t\t\tcopyContent={storyInfo.storyTitlePath!}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StoryLink info={storyInfo}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t// allow line breaks on slashes\n\t\t\t\t\t\t\t\t\t__html: storyInfo.storyTitlePath!.replaceAll(\n\t\t\t\t\t\t\t\t\t\t'/',\n\t\t\t\t\t\t\t\t\t\t'/<wbr/>',\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</StoryLink>\n\t\t\t\t\t</PathCopyMolecule>\n\n\t\t\t\t\t<PathCopyMolecule\n\t\t\t\t\t\tlabel=\"Story Page ID\"\n\t\t\t\t\t\tcopyContent={storyInfo.storyId!}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StoryLink info={storyInfo}>\n\t\t\t\t\t\t\t{storyInfo.storyId}\n\t\t\t\t\t\t</StoryLink>\n\t\t\t\t\t</PathCopyMolecule>\n\t\t\t\t</div>\n\t\t\t</Expandable>\n\n\t\t\t{filteredBuiltWith.length > 0 && (\n\t\t\t\t<Expandable\n\t\t\t\t\tHeader={`Built with ${\n\t\t\t\t\t\tfilteredBuiltWith.length\n\t\t\t\t\t} component${plural(filteredBuiltWith)}`}\n\t\t\t\t\tIcon={BuildIcon}\n\t\t\t\t>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{filterOutStoryAndNonComponentFiles(builtWith).map(\n\t\t\t\t\t\t\t(info) => (\n\t\t\t\t\t\t\t\t<DepsPreviewItem\n\t\t\t\t\t\t\t\t\tstoryInfo={info}\n\t\t\t\t\t\t\t\t\tkey={info.componentPath}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</Expandable>\n\t\t\t)}\n\t\t\t{filteredUsedIn.length > 0 && (\n\t\t\t\t<Expandable\n\t\t\t\t\tHeader={`Used in ${filteredUsedIn.length} component${plural(\n\t\t\t\t\t\tfilteredUsedIn,\n\t\t\t\t\t)}`}\n\t\t\t\t\tIcon={SquaresPlus}\n\t\t\t\t>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{filterOutStoryAndNonComponentFiles(usedIn).map(\n\t\t\t\t\t\t\t(info) => (\n\t\t\t\t\t\t\t\t<DepsPreviewItem\n\t\t\t\t\t\t\t\t\tstoryInfo={info}\n\t\t\t\t\t\t\t\t\tkey={info.componentPath}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</Expandable>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\ninterface PropsForDepsPreviewItem {\n\tstoryInfo: StoryInfo\n}\n\nfunction DepsPreviewItem({ storyInfo }: PropsForDepsPreviewItem) {\n\treturn (\n\t\t<li key={storyInfo.componentPath}>\n\t\t\t{storyInfo.storyId ? (\n\t\t\t\t<Expandable\n\t\t\t\t\tIcon={CubeIcon}\n\t\t\t\t\tHeader={\n\t\t\t\t\t\t<StoryLink info={storyInfo} tooltipPosition=\"right\" />\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DepsPreviewContent storyInfo={storyInfo} />\n\t\t\t\t</Expandable>\n\t\t\t) : (\n\t\t\t\t<StoryLink info={storyInfo} />\n\t\t\t)}\n\t\t</li>\n\t)\n}\n\nfunction plural(arr: Array<any>) {\n\treturn arr.length === 1 ? '' : 's'\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,SAAgB,qBAAqB;AACpC,QACC,2CAACA,gEACA,2CAAC,+BAA6B,GACL;;AAI5B,SAAS,6BAA6B;CACrC,MAAM,EAAE,SAASC,+CAAoB;AACrC,KAAI,CAAC,KAAM,QAAO,2CAAC,mBAAI,+CAAgD;AAEvE,QACC,4CAAC;EAAI,WAAWC,iDAAE;aACjB,2CAACC,yCAAU,wBAA+B,EAC1C,2CAAC;GAAmB,WAAW;GAAM,eAAe;IAAS;GACxD;;AAQR,SAAS,mBAAmB,EAC3B,WACA,gBAAgB,QACc;CAC9B,MAAM,EAAE,UAAUF,+CAAoB;CACtC,MAAM,EAAE,WAAW,WAAW,MAAO,UAAU;CAC/C,MAAM,oBAAoBG,8DAAmC,UAAU;CACvE,MAAM,iBAAiBA,8DAAmC,OAAO;AAEjE,QACC,4CAAC;EACC,iBACA,2CAACC;GACA,QAAQ,WAAW,UAAU,WAAW;GACxC,MAAMC;aAEN,2CAACC,yCAA0B,YAAa;IAC5B;EAGd,2CAACF;GACA,QAAQ,YAAY,UAAU,WAAW;GACzC,MAAMG;aAEN,4CAAC;IAAI,WAAWN,iDAAE;;KACjB,2CAACO;MACA,OAAM;MACN,aAAa,UAAU;gBAEvB,2CAACC,mDAA+B,YAAa;OAC3B;KAEnB,2CAACD;MACA,OAAM;MACN,aAAa,UAAU;gBAEvB,2CAACE;OAAU,MAAM;iBAChB,2CAAC,UACA,yBAAyB,EAExB,QAAQ,UAAU,eAAgB,WACjC,KACA,UACA,EACD,GACA;QACS;OACM;KAEnB,2CAACF;MACA,OAAM;MACN,aAAa,UAAU;gBAEvB,2CAACE;OAAU,MAAM;iBACf,UAAU;QACA;OACM;;KACd;IACM;EAEZ,kBAAkB,SAAS,KAC3B,2CAACN;GACA,QAAQ,cACP,kBAAkB,OAClB,YAAY,OAAO,kBAAkB;GACtC,MAAMO;aAEN,2CAAC,kBACCR,8DAAmC,UAAU,CAAC,KAC7C,SACA,2CAAC,mBACA,WAAW,QACN,KAAK,cACT,CAEH,GACG;IACO;EAEb,eAAe,SAAS,KACxB,2CAACC;GACA,QAAQ,WAAW,eAAe,OAAO,YAAY,OACpD,eACA;GACD,MAAMQ;aAEN,2CAAC,kBACCT,8DAAmC,OAAO,CAAC,KAC1C,SACA,2CAAC,mBACA,WAAW,QACN,KAAK,cACT,CAEH,GACG;IACO;KAET;;AAQR,SAAS,gBAAgB,EAAE,aAAsC;AAChE,QACC,2CAAC,kBACC,UAAU,UACV,2CAACC;EACA,MAAMS;EACN,QACC,2CAACH;GAAU,MAAM;GAAW,iBAAgB;IAAU;YAGvD,2CAAC,sBAA8B,YAAa;GAChC,GAEb,2CAACA,+BAAU,MAAM,YAAa,IAXvB,UAAU,cAad;;AAIP,SAAS,OAAO,KAAiB;AAChC,QAAO,IAAI,WAAW,IAAI,KAAK"}

package/dist/blocks/DependencyPreviews.d.cts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/blocks/DependencyPreviews.d.ts
+declare function DependencyPreviews(): react_jsx_runtime2.JSX.Element;
+//#endregion
+export { DependencyPreviews };
+//# sourceMappingURL=DependencyPreviews.d.cts.map

package/dist/blocks/DependencyPreviews.d.mts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+
+//#region src/blocks/DependencyPreviews.d.ts
+declare function DependencyPreviews(): react_jsx_runtime3.JSX.Element;
+//#endregion
+export { DependencyPreviews };
+//# sourceMappingURL=DependencyPreviews.d.mts.map

package/dist/blocks/DependencyPreviews.mjs

@@ -0,0 +1,100 @@
+import { PrimaryPreview } from "../components/PrimaryPreview.mjs";
+import { StoryLink } from "../components/StoryLink.mjs";
+import { DependencyGraphProvider, filterOutStoryAndNonComponentFiles, useDependencyGraph } from "../hooks/useDependencyGraph.mjs";
+import { ComponentSourceLink } from "../components/ComponentSourceLink.mjs";
+import { Expandable } from "../components/Expandable.mjs";
+import { BuildIcon } from "../components/icons/BuildIcon.mjs";
+import { EyeOpen } from "../components/icons/EyeOpen.mjs";
+import { SquaresPlus } from "../components/icons/SquaresPlus.mjs";
+import { ArrowToRectangle } from "../components/icons/ArrowToRectangleIcon.mjs";
+import { CubeIcon } from "../components/icons/CubeIcon.mjs";
+import { PathCopyMolecule } from "../components/PathCopyMolecule.mjs";
+import { SbHeading } from "../components/SbHeading.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./DependencyPreviews.module.css";
+
+//#region src/blocks/DependencyPreviews.tsx
+function DependencyPreviews() {
+	return /* @__PURE__ */ jsx(DependencyGraphProvider, { children: /* @__PURE__ */ jsx(TopLevelDependencyPreviews, {}) });
+}
+function TopLevelDependencyPreviews() {
+	const { node } = useDependencyGraph();
+	if (!node) return /* @__PURE__ */ jsx("div", { children: "No dependency previews for this component." });
+	return /* @__PURE__ */ jsxs("div", {
+		className: s.topLevelWrapper,
+		children: [/* @__PURE__ */ jsx(SbHeading, { children: "Dependency previews" }), /* @__PURE__ */ jsx(DepsPreviewContent, {
+			storyInfo: node,
+			enablePreview: false
+		})]
+	});
+}
+function DepsPreviewContent({ storyInfo, enablePreview = true }) {
+	const { graph } = useDependencyGraph();
+	const { builtWith, usedIn } = graph[storyInfo.componentPath];
+	const filteredBuiltWith = filterOutStoryAndNonComponentFiles(builtWith);
+	const filteredUsedIn = filterOutStoryAndNonComponentFiles(usedIn);
+	return /* @__PURE__ */ jsxs("div", { children: [
+		enablePreview && /* @__PURE__ */ jsx(Expandable, {
+			Header: `Preview ${storyInfo.storyTitle} component`,
+			Icon: EyeOpen,
+			children: /* @__PURE__ */ jsx(PrimaryPreview, { storyInfo })
+		}),
+		/* @__PURE__ */ jsx(Expandable, {
+			Header: `Paths to ${storyInfo.storyTitle} component`,
+			Icon: ArrowToRectangle,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: s.pathData,
+				children: [
+					/* @__PURE__ */ jsx(PathCopyMolecule, {
+						label: "Source File Path",
+						copyContent: storyInfo.componentPath,
+						children: /* @__PURE__ */ jsx(ComponentSourceLink, { storyInfo })
+					}),
+					/* @__PURE__ */ jsx(PathCopyMolecule, {
+						label: "Story Title Path",
+						copyContent: storyInfo.storyTitlePath,
+						children: /* @__PURE__ */ jsx(StoryLink, {
+							info: storyInfo,
+							children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: storyInfo.storyTitlePath.replaceAll("/", "/<wbr/>") } })
+						})
+					}),
+					/* @__PURE__ */ jsx(PathCopyMolecule, {
+						label: "Story Page ID",
+						copyContent: storyInfo.storyId,
+						children: /* @__PURE__ */ jsx(StoryLink, {
+							info: storyInfo,
+							children: storyInfo.storyId
+						})
+					})
+				]
+			})
+		}),
+		filteredBuiltWith.length > 0 && /* @__PURE__ */ jsx(Expandable, {
+			Header: `Built with ${filteredBuiltWith.length} component${plural(filteredBuiltWith)}`,
+			Icon: BuildIcon,
+			children: /* @__PURE__ */ jsx("ul", { children: filterOutStoryAndNonComponentFiles(builtWith).map((info) => /* @__PURE__ */ jsx(DepsPreviewItem, { storyInfo: info }, info.componentPath)) })
+		}),
+		filteredUsedIn.length > 0 && /* @__PURE__ */ jsx(Expandable, {
+			Header: `Used in ${filteredUsedIn.length} component${plural(filteredUsedIn)}`,
+			Icon: SquaresPlus,
+			children: /* @__PURE__ */ jsx("ul", { children: filterOutStoryAndNonComponentFiles(usedIn).map((info) => /* @__PURE__ */ jsx(DepsPreviewItem, { storyInfo: info }, info.componentPath)) })
+		})
+	] });
+}
+function DepsPreviewItem({ storyInfo }) {
+	return /* @__PURE__ */ jsx("li", { children: storyInfo.storyId ? /* @__PURE__ */ jsx(Expandable, {
+		Icon: CubeIcon,
+		Header: /* @__PURE__ */ jsx(StoryLink, {
+			info: storyInfo,
+			tooltipPosition: "right"
+		}),
+		children: /* @__PURE__ */ jsx(DepsPreviewContent, { storyInfo })
+	}) : /* @__PURE__ */ jsx(StoryLink, { info: storyInfo }) }, storyInfo.componentPath);
+}
+function plural(arr) {
+	return arr.length === 1 ? "" : "s";
+}
+
+//#endregion
+export { DependencyPreviews };
+//# sourceMappingURL=DependencyPreviews.mjs.map