storybook-addon-dependency-previews 0.1.2 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # Storybook Add On - Dependency Previews
 
-[![Dependency Previews logo](https://github.com/Dan503/storybook-addon-dependency-previews/raw/main/storybook-addon-package/readme-images/dependency-previews-logo.png)](https://dependency-previews-storybook.netlify.app/?path=/docs/04-templates-home-template--docs)
+[![Dependency Previews logo](https://github.com/Dan503/storybook-addon-dependency-previews/raw/main/storybook-addon-package/readme-images/dependency-previews-logo.png)](https://dependency-previews-storybook-react.netlify.app/?path=/docs/04-templates-home-template--docs)
 
 ## What is this?
 
@@ -8,6 +8,8 @@
 
 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.
 
+Currently works with **React**, **Svelte**, and **Angular**.
+
 This is what you will see in Storybook after Dependency Previews have been installed and configured:
 
 ![Dependency Previews - all closed](https://github.com/Dan503/storybook-addon-dependency-previews/raw/main/storybook-addon-package/readme-images/all-closed.png)
@@ -16,11 +18,25 @@ The below image demonstrates what you will see when you open up some of the depe
 
 ![Dependency Previews - all open](https://github.com/Dan503/storybook-addon-dependency-previews/raw/main/storybook-addon-package/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/?path=/docs/04-templates-home-template--docs).
+### Demos
+
+#### React demos
+
+- [React Storybook demo site](https://dependency-previews-storybook-react.netlify.app/?path=/docs/04-templates-home-template--docs)
+- [React rendered example website](https://dependency-previews-demo-site-react.netlify.app/)
+- [React demo source code](https://github.com/Dan503/storybook-addon-dependency-previews/tree/main/example-site/react)
+
+#### Svelte demos
 
-You can also [visit the example website](https://dependency-previews-demo-site.netlify.app/) that the Storybook demo is built for.
+- [Svelte Storybook demo site](https://dependency-previews-storybook-svelte.netlify.app/)
+- [Svelte rendered example website](https://dependency-previews-demo-site-svelte.netlify.app/)
+- [Svelte demo source code](https://github.com/Dan503/storybook-addon-dependency-previews/tree/main/example-site/svelte)
 
-Also [visit the npm page](https://www.npmjs.com/package/storybook-addon-dependency-previews) if you are reading this on GitHub
+#### Angular demos
+
+- [Angular Storybook demo site](https://dependency-previews-storybook-angular.netlify.app/?path=/docs/04-templates-home-template--docs)
+- [Angular rendered example website](https://dependency-previews-demo-site-angular.netlify.app/)
+- [Angular demo source code](https://github.com/Dan503/storybook-addon-dependency-previews/tree/main/example-site/angular)
 
 <!-- TODO: Provide a video/gif of the addon in action -->
 
@@ -28,18 +44,18 @@ Also [visit the npm page](https://www.npmjs.com/package/storybook-addon-dependen
 
 ### Package download
 
-First you will need to install the plugin via npm
+First you will need to install the plugin via npm as well as [dependency-cruiser](https://www.npmjs.com/package/dependency-cruiser)
 
 ```
-npm install storybook-addon-dependency-previews
+npm install -D storybook-addon-dependency-previews dependency-cruiser
 ```
 
 <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>
+	<p><pre><code>pnpm add -D storybook-addon-dependency-previews dependency-cruiser</code></pre></p>
+	<p><pre><code>yarn add -D storybook-addon-dependency-previews dependency-cruiser</code></pre></p>
+	<p><pre><code>bun add -D storybook-addon-dependency-previews dependency-cruiser</code></pre></p>
+	<p><pre><code>deno add --dev npm:storybook-addon-dependency-previews npm:dependency-cruiser</code></pre></p>
 </details>
 
 ### Register the add-on
@@ -48,12 +64,13 @@ 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.
 
+#### Register with React
+
 ```ts
-import { StorybookConfig } from '@storybook/react-vite'
+import type { 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)'],
+	stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
 	addons: [
 		// autodocs is required for this addon to work
 		'@storybook/addon-docs',
@@ -61,8 +78,6 @@ const config: StorybookConfig = {
 		'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: {},
 	},
@@ -71,14 +86,122 @@ const config: StorybookConfig = {
 export default config
 ```
 
+#### Register with Svelte
+
+```ts
+import type { StorybookConfig } from '@storybook/sveltekit'
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
+	addons: [
+		// autodocs is required for this addon to work
+		'@storybook/addon-docs',
+		// required for .stories.svelte CSF format
+		'@storybook/addon-svelte-csf',
+		// the storybook dependency previews addon registration
+		'storybook-addon-dependency-previews/addon',
+	],
+	framework: '@storybook/sveltekit',
+}
+
+export default config
+```
+
+#### Register with Angular
+
+`@storybook/angular` uses webpack5 exclusively. The addon requires two webpack additions in `webpackFinal`: a `DefinePlugin` to inject `__PROJECT_ROOT__` (needed for the VS Code "open file" feature), and a `NormalModuleFactory` plugin to handle the addon's CSS modules correctly.
+
+You will also need a `css-modules-loader.cjs` file alongside your `.storybook/main.ts`. Copy it from the [Angular example source](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/example-site/angular/.storybook/css-modules-loader.cjs).
+
+```ts
+import type { StorybookConfig } from '@storybook/angular'
+import { createRequire } from 'module'
+import { fileURLToPath } from 'url'
+import path from 'path'
+
+const require = createRequire(import.meta.url)
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		// autodocs is required for this addon to work
+		'@storybook/addon-docs',
+		// the storybook dependency previews addon registration
+		'storybook-addon-dependency-previews/addon',
+	],
+	framework: {
+		name: '@storybook/angular',
+		options: {},
+	},
+	webpackFinal: async (config) => {
+		const sbAngularRequire = createRequire(
+			import.meta.resolve('@storybook/angular'),
+		)
+		const webpack = sbAngularRequire('webpack') as any
+
+		// Path to the css-modules-loader.cjs file (copy from the Angular example source)
+		const cssModulesLoader = fileURLToPath(
+			new URL('./css-modules-loader.cjs', import.meta.url),
+		)
+
+		config.plugins = config.plugins ?? []
+
+		// Inject __PROJECT_ROOT__ so preview.ts can pass it to projectRootPath
+		config.plugins.push(
+			new webpack.DefinePlugin({
+				__PROJECT_ROOT__: JSON.stringify(
+					path.resolve(fileURLToPath(new URL('..', import.meta.url))),
+				),
+			}),
+		)
+
+		// Handle CSS modules for the addon's dist files
+		config.plugins.push({
+			apply(compiler: any) {
+				compiler.hooks.normalModuleFactory.tap(
+					'AddonCssModules',
+					(factory: any) => {
+						factory.hooks.afterResolve.tap(
+							'AddonCssModules',
+							(resolveData: any) => {
+								const resource: string =
+									resolveData.createData?.resource ?? ''
+								if (
+									resource.endsWith('.module.css') &&
+									resource.includes(
+										'storybook-addon-dependency-previews',
+									)
+								) {
+									resolveData.createData.loaders = [
+										{
+											loader: cssModulesLoader,
+											options: {},
+										},
+									]
+								}
+							},
+						)
+					},
+				)
+			},
+		})
+
+		return config
+	},
+}
+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.
 
+#### React `.stories.tsx` file example
+
 ```ts
-import type { Meta } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ComponentName } from './ComponentName'
 
 const meta: Meta<typeof ComponentName> = {
@@ -104,6 +227,56 @@ export const Primary: Story = {
 }
 ```
 
+#### Svelte `.stories.svelte` file using [Svelte CSF](https://github.com/storybookjs/addon-svelte-csf)
+
+```svelte
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf'
+	import ComponentName from './ComponentName.svelte'
+
+	const { Story } = defineMeta({
+		title: 'Component Name',
+		component: ComponentName,
+		// autodocs tag is required
+		tags: ['autodocs'],
+		// The `__filePath` property must be applied to every story file
+		parameters: {
+			__filePath: import.meta.url,
+		},
+	})
+</script>
+
+<Story name="Primary" />
+```
+
+#### Angular `.stories.ts` file example
+
+```ts
+import type { Meta, StoryObj } from '@storybook/angular'
+import type { StoryParameters } from 'storybook-addon-dependency-previews'
+import { ComponentName } from './ComponentName.component'
+
+const meta: Meta<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 webpack feature available in Angular Storybook
+	parameters: {
+		__filePath: import.meta.url,
+	} satisfies StoryParameters,
+}
+
+export default meta
+
+type Story = StoryObj<ComponentName>
+
+export const Primary: Story = {}
+```
+
 ### package.json scripts
 
 You will need the following scripts in your `package.json` file:
@@ -133,18 +306,27 @@ Don't run any of these yet, you are not finished with the installation.
 
 `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
+#### Angular projects
+
+`@storybook/angular@10+` requires Storybook to be launched through the Angular CLI builder rather than the default `storybook dev` command. Pass the Angular CLI target as an argument to `--run-storybook`:
+
+```json
+"sb": "sb-deps --watch --run-storybook \"ng run <project-name>:storybook\""
+```
+
+Replace `<project-name>` with the name of your Angular project as defined in `angular.json`.
+
+### Create the preview 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:
+Now create a `.storybook/preview.ts` file (or `preview.tsx` if your framework requires JSX) with the following content:
 
-```tsx
+```ts
 /// <reference types="vite/client" />
 
-import * as React from 'react'
 import {
 	defaultPreviewParameters,
 	dependencyPreviewDecorators,
@@ -154,7 +336,7 @@ import {
 // Import the generated dependency-previews.json file
 import dependenciesJson from './dependency-previews.json'
 
-// Global styles are imported here
+// Global styles are imported here (optional)
 import '../src/styles.css'
 
 const previewConfig: StorybookPreviewConfig = {
@@ -167,10 +349,10 @@ const previewConfig: StorybookPreviewConfig = {
 				'/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
+			// Replace this with the URL to your src folder in 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',
+				'https://github.com/your-org/your-repo/blob/main/src',
 			// This allows Source File Path to open the
 			// component file directly in VS Code when
 			// running in a local host environment.
@@ -183,6 +365,43 @@ const previewConfig: StorybookPreviewConfig = {
 export default previewConfig
 ```
 
+#### Angular `preview.ts`
+
+Angular uses webpack, so `import.meta.glob` and Vite-specific APIs are not available. Use the `__PROJECT_ROOT__` value injected via `DefinePlugin` in `main.ts` instead:
+
+```ts
+import type { Preview } from '@storybook/angular'
+import {
+	defaultPreviewParameters,
+	dependencyPreviewDecorators,
+} from 'storybook-addon-dependency-previews'
+import dependenciesJson from './dependency-previews.json'
+
+declare const __PROJECT_ROOT__: string
+
+const preview: Preview = {
+	parameters: {
+		...defaultPreviewParameters,
+		dependencyPreviews: {
+			dependenciesJson,
+			// Replace this with the URL to your src folder in your git repository.
+			// This enables the addon to link to the source code of the component.
+			sourceRootUrl:
+				'https://github.com/your-org/your-repo/blob/main/src',
+			// __PROJECT_ROOT__ is injected by DefinePlugin in main.ts.
+			// This allows Source File Path to open the component file
+			// directly in VS Code when running in a local host environment.
+			projectRootPath: __PROJECT_ROOT__,
+		},
+	},
+	decorators: [...dependencyPreviewDecorators],
+}
+
+export default preview
+```
+
+> **Note:** Angular does not use `storyModules` (no `import.meta.glob`). The addon still generates the full dependency tree via the CLI — only the VS Code "open file" shortcut needs `projectRootPath`.
+
 ### Run it!
 
 You should be all set now.
@@ -192,3 +411,87 @@ 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.
+
+## Configuration file (optional)
+
+The `sb-deps` CLI can be customized via a `sb-deps.config.mjs` file in your project root (alongside `package.json`). Supported formats: `.mjs`, `.js`, or `.cjs`.
+
+Use the `defineSbDepsConfig` helper from `storybook-addon-dependency-previews/config` for type safety and editor autocomplete:
+
+```js
+// sb-deps.config.mjs
+import { defineSbDepsConfig } from 'storybook-addon-dependency-previews/config'
+
+export default defineSbDepsConfig({
+	// options go here
+})
+```
+
+### `angularSelectorPrefix`
+
+_(Angular only)_ The prefix prepended to Angular component selectors when auto-scaffolding new components.
+
+**Default:** `'app-'`
+
+| Value              | Resulting selector |
+| ------------------ | ------------------ |
+| `'app-'` (default) | `app-button-atom`  |
+| `'my-'`            | `my-button-atom`   |
+| `''`               | `button-atom`      |
+
+```js
+// sb-deps.config.mjs
+import { defineSbDepsConfig } from 'storybook-addon-dependency-previews/config'
+
+export default defineSbDepsConfig({
+	angularSelectorPrefix: '', // no prefix
+})
+```
+
+### `scaffold`
+
+Override the templates used when `sb-deps` auto-scaffolds new component and story files. Each template function receives a context object with relevant variables and must return the full file content as a string.
+
+```js
+// sb-deps.config.mjs
+import { defineSbDepsConfig } from 'storybook-addon-dependency-previews/config'
+
+export default defineSbDepsConfig({
+	scaffold: {
+		react: {
+			/** Customize the generated .tsx component file */
+			component: ({ componentName, propsName }) =>
+				`export interface ${propsName} {}
+
+export function ${componentName}({}: ${propsName}) {
+	return <div>${componentName}</div>
+}
+`,
+			/** Customize the generated .stories.tsx file */
+			story: ({ componentName, propsName, title, tags, base }) => '...',
+		},
+		svelte: {
+			/** Customize the generated .svelte component file */
+			component: ({ componentName }) => '...',
+			/** Customize the generated .stories.svelte file */
+			story: ({ componentName, title, tags }) => '...',
+		},
+		angular: {
+			/** Customize the generated .component.ts file */
+			component: ({
+				componentName,
+				className,
+				selector,
+				base,
+				templateLocation,
+			}) => '...',
+			/** Customize the generated .component.html file (external templates only) */
+			componentHtml: ({ componentName }) => '...',
+			/** Customize the generated .stories.ts file */
+			story: ({ componentName, className, base, title, tags }) => '...',
+		},
+	},
+})
+```
+
+All scaffold options are optional — omit any key to keep the default template for that file type.

package/dist/_virtual/{_rolldown/runtime.cjs → rolldown_runtime.cjs}

@@ -1,4 +1,4 @@
-//#region \0rolldown/runtime.js
+//#region rolldown:runtime
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -6,16 +6,12 @@ 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
-				});
-			}
-		}
+	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;
 };

package/dist/addon/index.cjs

@@ -1,12 +1,17 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_addon_vitePlugin = require('./vitePlugin.cjs');
+let module$1 = require("module");
+module$1 = require_rolldown_runtime.__toESM(module$1);
 
 //#region src/addon/index.ts
+const require$1 = (0, module$1.createRequire)(require("url").pathToFileURL(__filename).href);
+const managerEntries = [require$1.resolve("../manager.mjs")];
 async function viteFinal(config) {
 	config.plugins = [...config.plugins ?? [], require_addon_vitePlugin.sbDepsVitePlugin()];
 	return config;
 }
 
 //#endregion
+exports.managerEntries = managerEntries;
 exports.viteFinal = viteFinal;
 //# sourceMappingURL=index.cjs.map

package/dist/addon/index.cjs.map

@@ -1 +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"}
+{"version":3,"file":"index.cjs","names":["require","sbDepsVitePlugin"],"sources":["../../src/addon/index.ts"],"sourcesContent":["import { createRequire } from 'module'\nimport { sbDepsVitePlugin } from './vitePlugin'\n\nconst require = createRequire(import.meta.url)\n\nexport const managerEntries = [require.resolve('../manager.mjs')]\n\nexport async function viteFinal(config: any) {\n\tconfig.plugins = [...(config.plugins ?? []), sbDepsVitePlugin()]\n\treturn config\n}\n"],"mappings":";;;;;;AAGA,MAAMA,sFAAwC;AAE9C,MAAa,iBAAiB,CAACA,UAAQ,QAAQ,iBAAiB,CAAC;AAEjE,eAAsB,UAAU,QAAa;AAC5C,QAAO,UAAU,CAAC,GAAI,OAAO,WAAW,EAAE,EAAGC,2CAAkB,CAAC;AAChE,QAAO"}

package/dist/addon/index.d.cts

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

package/dist/addon/index.d.mts

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

package/dist/addon/index.mjs

@@ -1,11 +1,14 @@
 import { sbDepsVitePlugin } from "./vitePlugin.mjs";
+import { createRequire } from "module";
 
 //#region src/addon/index.ts
+const require = createRequire(import.meta.url);
+const managerEntries = [require.resolve("../manager.mjs")];
 async function viteFinal(config) {
 	config.plugins = [...config.plugins ?? [], sbDepsVitePlugin()];
 	return config;
 }
 
 //#endregion
-export { viteFinal };
+export { managerEntries, viteFinal };
 //# sourceMappingURL=index.mjs.map

package/dist/addon/index.mjs.map

@@ -1 +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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/addon/index.ts"],"sourcesContent":["import { createRequire } from 'module'\nimport { sbDepsVitePlugin } from './vitePlugin'\n\nconst require = createRequire(import.meta.url)\n\nexport const managerEntries = [require.resolve('../manager.mjs')]\n\nexport async function viteFinal(config: any) {\n\tconfig.plugins = [...(config.plugins ?? []), sbDepsVitePlugin()]\n\treturn config\n}\n"],"mappings":";;;;AAGA,MAAM,UAAU,cAAc,OAAO,KAAK,IAAI;AAE9C,MAAa,iBAAiB,CAAC,QAAQ,QAAQ,iBAAiB,CAAC;AAEjE,eAAsB,UAAU,QAAa;AAC5C,QAAO,UAAU,CAAC,GAAI,OAAO,WAAW,EAAE,EAAG,kBAAkB,CAAC;AAChE,QAAO"}

package/dist/addon/preset.cjs

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

package/dist/addon/preset.cjs.map

@@ -1 +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"}
+{"version":3,"file":"preset.cjs","names":["addons: Array<string>"],"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,MAAaA,SAAwB,CACpC,yBACA,yBACA"}

package/dist/addon/preset.mjs.map

@@ -1 +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"}
+{"version":3,"file":"preset.mjs","names":["addons: Array<string>"],"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,MAAaA,SAAwB,CACpC,yBACA,yBACA"}

package/dist/addon/vitePlugin.cjs

@@ -1,7 +1,8 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 let node_fs = require("node:fs");
+node_fs = require_rolldown_runtime.__toESM(node_fs);
 let node_path = require("node:path");
+node_path = require_rolldown_runtime.__toESM(node_path);
 
 //#region src/addon/vitePlugin.ts
 function sbDepsVitePlugin() {

package/dist/addon/vitePlugin.cjs.map

@@ -1 +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"}
+{"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/blocks/DependencyPreviews.cjs

@@ -1,4 +1,4 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_rolldown_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');
@@ -12,8 +12,9 @@ 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");
+react_jsx_runtime = require_rolldown_runtime.__toESM(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);
+src_blocks_DependencyPreviews_module_css = require_rolldown_runtime.__toESM(src_blocks_DependencyPreviews_module_css);
 
 //#region src/blocks/DependencyPreviews.tsx
 function DependencyPreviews() {

package/dist/blocks/DependencyPreviews.cjs.map

@@ -1 +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"}
+{"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"}