storybook-addon-dependency-previews 0.1.0

package/dist/preview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.mjs","names":[],"sources":["../src/preview.tsx"],"sourcesContent":["// This runs in the Storybook preview (the iframe)\nimport '@iframe-resizer/child'\nimport { useEffect, useRef } from 'react'\nimport type { PartialStoryFn } from 'storybook/internal/csf'\n\nexport const decorators = [\n\t(Story: PartialStoryFn) => {\n\t\tconst ref = useRef<HTMLDivElement>(null)\n\n\t\tuseEffect(() => {\n\t\t\tref.current?.parentElement?.setAttribute('data-iframe-size', 'true')\n\t\t}, [])\n\n\t\treturn (\n\t\t\t<div className=\"iframe-size-child\" ref={ref}>\n\t\t\t\t<Story />\n\t\t\t</div>\n\t\t)\n\t},\n]\n\nexport const dependencyPreviewDecorators = decorators\n"],"mappings":";;;;;AAKA,MAAa,aAAa,EACxB,UAA0B;CAC1B,MAAM,MAAM,OAAuB,KAAK;AAExC,iBAAgB;AACf,MAAI,SAAS,eAAe,aAAa,oBAAoB,OAAO;IAClE,EAAE,CAAC;AAEN,QACC,oBAAC;EAAI,WAAU;EAAyB;YACvC,oBAAC,UAAQ;GACJ;EAGR;AAED,MAAa,8BAA8B"}

package/dist/types.d.cts

@@ -0,0 +1,104 @@
+import { ComponentType, ReactNode } from "react";
+import { ProjectAnnotations, Renderer, StoryContext } from "storybook/internal/types";
+
+//#region src/types.d.ts
+type StorybookParameters = ProjectAnnotations<Renderer>['parameters'];
+type StoryModules = Record<string, () => Promise<unknown>>;
+type LayoutOptions = 'padded' | 'centered' | 'fullscreen';
+type StoryParameters = StorybookParameters & {
+  /**
+   * Determine how the component is displayed in the preview area.
+   *
+   * Options are:
+   * - `'padded'` - adds padding around the component in the preview area (good for most components)
+   * - `'centered'` - centers the component in the preview area (good for small components like buttons and icons)
+   * - `'fullscreen'` - makes the component take up the entire preview area (good for components that take up the entire screen like pages and modals)
+   *
+   * @default 'padded'
+   */
+  layout?: LayoutOptions;
+  /**
+   * A required property in all component story files. This is used to determine the path to the story.
+   *
+   * Use the following as the value for this property:
+   *
+   * ```ts
+   * import.meta.url
+   * ```
+   */
+  __filePath: string;
+};
+type DependencyPreviewStorybookParameters = Omit<StoryParameters, '__filePath'> & {
+  /** Preview settings used by the dependency-previews storybook add-on */
+  dependencyPreviews: {
+    /**
+     * A mapping of story module importers, used to dynamically load story modules in the preview area.
+     *
+     * Use the following as the value for this property:
+     * ```ts
+     * import.meta.glob('/src/**\/*.stories.@(tsx|ts|jsx|js|svelte)', { eager: false });
+     * ``` */
+    storyModules: StoryModules;
+    /**
+     * Point to the root folder of your project source control.
+     *
+     * This allows the addon to link to the source code of your components.
+     *
+     * @example "https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/example-site"
+     */
+    sourceRootUrl: string;
+    /**
+     * Specify the absolute path of the root folder of your project source code.
+     * This is used to open files in VS Code from the Storybook UI.
+     *
+     * @example "C:/Users/your-user-name/projects/your-project-name"
+     *
+     * // If you are using Vite, and the config you are writing is stored in the `.storybook` folder, you can use:
+     *
+     * @example new URL('..', import.meta.url).pathname
+     */
+    projectRootPath: string;
+    /**
+     * The imported dependency-previews.json file.
+     *
+     * You will need to set `"resolveJsonModule"` to `true` in tsConfig.json to import this file.
+     */
+    dependenciesJson: Graph;
+  };
+};
+type StorybookPreviewConfig = ProjectAnnotations<Renderer> & {
+  parameters: DependencyPreviewStorybookParameters;
+};
+type Graph = Record<string, Deps>;
+interface Deps extends StoryInfo {
+  builtWith: Array<StoryInfo>;
+  usedIn: Array<StoryInfo>;
+}
+interface StoryInfo {
+  componentPath: string;
+  storyId?: string | null;
+  storyTitle?: string | null;
+  storyTitlePath?: string | null;
+  storyFilePath?: string | null;
+}
+type CsfModule = {
+  default?: {
+    title?: string;
+    component?: ComponentType<any>;
+    args?: AnyObj;
+    parameters?: AnyObj;
+    decorators?: DecoratorFn[];
+  };
+  __namedExportsOrder?: string[];
+  [k: string]: any;
+};
+type AnyObj = Record<string, any>;
+type StoryExport = ((args: AnyObj, context?: StoryContext) => ReactNode) | {
+  render?: (args: AnyObj, context?: StoryContext) => ReactNode;
+  args?: AnyObj;
+  decorators?: DecoratorFn[];
+};
+type DecoratorFn = (Story: (ctx: StoryContext) => ReactNode, ctx: StoryContext) => ReactNode;
+//#endregion
+export { AnyObj, CsfModule, DecoratorFn, DependencyPreviewStorybookParameters, Deps, Graph, StoryExport, StoryInfo, StoryModules, StoryParameters, StorybookParameters, StorybookPreviewConfig };
+//# sourceMappingURL=types.d.cts.map

package/dist/types.d.mts

@@ -0,0 +1,104 @@
+import { ComponentType, ReactNode } from "react";
+import { ProjectAnnotations, Renderer, StoryContext } from "storybook/internal/types";
+
+//#region src/types.d.ts
+type StorybookParameters = ProjectAnnotations<Renderer>['parameters'];
+type StoryModules = Record<string, () => Promise<unknown>>;
+type LayoutOptions = 'padded' | 'centered' | 'fullscreen';
+type StoryParameters = StorybookParameters & {
+  /**
+   * Determine how the component is displayed in the preview area.
+   *
+   * Options are:
+   * - `'padded'` - adds padding around the component in the preview area (good for most components)
+   * - `'centered'` - centers the component in the preview area (good for small components like buttons and icons)
+   * - `'fullscreen'` - makes the component take up the entire preview area (good for components that take up the entire screen like pages and modals)
+   *
+   * @default 'padded'
+   */
+  layout?: LayoutOptions;
+  /**
+   * A required property in all component story files. This is used to determine the path to the story.
+   *
+   * Use the following as the value for this property:
+   *
+   * ```ts
+   * import.meta.url
+   * ```
+   */
+  __filePath: string;
+};
+type DependencyPreviewStorybookParameters = Omit<StoryParameters, '__filePath'> & {
+  /** Preview settings used by the dependency-previews storybook add-on */
+  dependencyPreviews: {
+    /**
+     * A mapping of story module importers, used to dynamically load story modules in the preview area.
+     *
+     * Use the following as the value for this property:
+     * ```ts
+     * import.meta.glob('/src/**\/*.stories.@(tsx|ts|jsx|js|svelte)', { eager: false });
+     * ``` */
+    storyModules: StoryModules;
+    /**
+     * Point to the root folder of your project source control.
+     *
+     * This allows the addon to link to the source code of your components.
+     *
+     * @example "https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/example-site"
+     */
+    sourceRootUrl: string;
+    /**
+     * Specify the absolute path of the root folder of your project source code.
+     * This is used to open files in VS Code from the Storybook UI.
+     *
+     * @example "C:/Users/your-user-name/projects/your-project-name"
+     *
+     * // If you are using Vite, and the config you are writing is stored in the `.storybook` folder, you can use:
+     *
+     * @example new URL('..', import.meta.url).pathname
+     */
+    projectRootPath: string;
+    /**
+     * The imported dependency-previews.json file.
+     *
+     * You will need to set `"resolveJsonModule"` to `true` in tsConfig.json to import this file.
+     */
+    dependenciesJson: Graph;
+  };
+};
+type StorybookPreviewConfig = ProjectAnnotations<Renderer> & {
+  parameters: DependencyPreviewStorybookParameters;
+};
+type Graph = Record<string, Deps>;
+interface Deps extends StoryInfo {
+  builtWith: Array<StoryInfo>;
+  usedIn: Array<StoryInfo>;
+}
+interface StoryInfo {
+  componentPath: string;
+  storyId?: string | null;
+  storyTitle?: string | null;
+  storyTitlePath?: string | null;
+  storyFilePath?: string | null;
+}
+type CsfModule = {
+  default?: {
+    title?: string;
+    component?: ComponentType<any>;
+    args?: AnyObj;
+    parameters?: AnyObj;
+    decorators?: DecoratorFn[];
+  };
+  __namedExportsOrder?: string[];
+  [k: string]: any;
+};
+type AnyObj = Record<string, any>;
+type StoryExport = ((args: AnyObj, context?: StoryContext) => ReactNode) | {
+  render?: (args: AnyObj, context?: StoryContext) => ReactNode;
+  args?: AnyObj;
+  decorators?: DecoratorFn[];
+};
+type DecoratorFn = (Story: (ctx: StoryContext) => ReactNode, ctx: StoryContext) => ReactNode;
+//#endregion
+export { AnyObj, CsfModule, DecoratorFn, DependencyPreviewStorybookParameters, Deps, Graph, StoryExport, StoryInfo, StoryModules, StoryParameters, StorybookParameters, StorybookPreviewConfig };
+//# sourceMappingURL=types.d.mts.map

package/package.json

@@ -0,0 +1,94 @@
+{
+	"name": "storybook-addon-dependency-previews",
+	"version": "0.1.0",
+	"private": false,
+	"type": "module",
+	"main": "dist/index.cjs",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs",
+			"types": "./dist/index.d.mts"
+		},
+		"./addon": {
+			"import": "./dist/addon/index.mjs",
+			"require": "./dist/addon/index.cjs",
+			"types": "./dist/addon/index.d.mts"
+		},
+		"./cli/sb-deps": {
+			"import": "./dist/cli/sb-deps.mjs",
+			"require": "./dist/cli/sb-deps.cjs",
+			"types": "./dist/cli/sb-deps.d.mts"
+		}
+	},
+	"bin": {
+		"sb-deps": "./dist/cli/sb-deps.cjs"
+	},
+	"typesVersions": {
+		"*": {
+			"blocks": [
+				"dist/blocks/index.d.ts"
+			]
+		}
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"files": [
+		"dist/**"
+	],
+	"scripts": {
+		"copy-css": "cpx \"src/**/*.module.css\" dist",
+		"build": "rm -rf dist && tsdown && npm run copy-css && npm run typecheck",
+		"dev": "npm-watch",
+		"typecheck": "cross-env FORCE_COLOR=1 npm_config_color=always tsc -p tsconfig.json --noEmit --pretty true && tsc -p ./cli/tsconfig.json --noEmit --pretty true"
+	},
+	"watch": {
+		"build": {
+			"patterns": [
+				"src",
+				"cli"
+			],
+			"extensions": "ts,tsx,css",
+			"delay": 200
+		}
+	},
+	"peerDependencies": {
+		"@storybook/addon-docs": "^10.0.2",
+		"@storybook/addon-links": "^10.0.2",
+		"react": ">=18",
+		"react-dom": ">=18",
+		"storybook": "^10.0.2",
+		"dependency-cruiser": "^17.3.6"
+	},
+	"devDependencies": {
+		"@storybook/csf": "^0.1.13",
+		"@types/cross-spawn": "^6.0.6",
+		"@types/micromatch": "^4.0.9",
+		"@types/node": "^24.7.2",
+		"@types/react": "^19.1.13",
+		"@types/react-dom": "^19.1.9",
+		"concurrently": "^9.2.1",
+		"cpx2": "^8.0.0",
+		"cross-env": "^10.1.0",
+		"cross-spawn": "^7.0.6",
+		"npm-watch": "^0.13.0",
+		"storybook": "^10.0.2",
+		"ts-dedent": "^2.2.0",
+		"tsdown": "^0.15.7",
+		"typescript": "^5.6.3",
+		"vite": "^7.1.7",
+		"dependency-cruiser": "^17.3.6"
+	},
+	"dependencies": {
+		"@iframe-resizer/child": "^5.5.7",
+		"@iframe-resizer/react": "^5.5.7",
+		"@parcel/watcher": "^2.5.1",
+		"micromatch": "^4.0.8"
+	},
+	"storybook-addon": {
+		"preset": "dist/addon/preset.cjs"
+	}
+}