storybook-addon-source-link

This addon adds links to open the source code of story or components in your editor.

Getting started

Requirements

• Storybook 8.0 or later

1. Install the addon.

npm install -D storybook-addon-source-link
# or
yarn add -D storybook-addon-source-link
# or
pnpm add -D storybook-addon-source-link

2. Register the addon in your Storybook configuration.

Then, register it as an addon in .storybook/main.js (or .storybook/main.ts).

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/your-framework";

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    // ...other addons
    "storybook-addon-source-link",
  ],
};

export default config;

3. (Optional) Configure the addon.

You can modify or add links using .storybook/preview.ts or the parameters of a Story.

import type { Preview } from "@storybook/react";
import {
  type SourceLinkParameter,
  getFileUrl,
} from "storybook-addon-source-link";

const preview: Preview = {
  parameters: {
    // ...other parameters
    sourceLink: {
      links: {
        // override addon's default link
        "story-vscode": ({ importPath, rootPath, isStaticBuild }) => {
          if (isStaticBuild) return undefined;
          if (!rootPath) return undefined;
          const fileUrl = getFileUrl(rootPath, importPath);
          const href = `vscode://${fileUrl.href}`;
          return {
            label: importPath.split("/").at(-1) ?? "",
            href,
            icon: "StorybookIcon",
          };
        },

        // add a new link type
        "story-github": ({ importPath, rootPath }) => {
          if (!rootPath) return undefined;
          const href = `https://github.com/elecdeer/storybook-addon-source-link/blob/-/packages/demo${importPath.replace(
            /^\./,
            ""
          )}`;
          return {
            label: importPath,
            href,
            icon: "GithubIcon",
          };
        },
      },
    } satisfies SourceLinkParameter,
  },
};

export default preview;

API

Parameters

This addon contributes the following parameters to Storybook, under the sourceLink namespace.

[!TIP] Storybook parameters can be specified at the story, component, and global levels, and are merged for each value.

https://storybook.js.org/docs/writing-stories/parameters

links

Type: { [key: string]: LinkEntry | undefined | ((context: ResolveContext) => LinkEntry | undefined) }

If undefined is returned, the link will not be added.

• ResolveContext:
  • rootPath: The path to the root directory of the source files. e.g. "/Users/username/project". If isStaticBuild is true, this value is "".
  • isStaticBuild: Whether the Storybook is built statically.
  • type: The type of entry. "story" or "docs".
  • importPath: The path to the source file. e.g. "./src/stories/Button.tsx"
  • id: The ID of the story. e.g. "example-button--primary"
  • title: The title of the story or the component. e.g. "Example/Button"
  • name: The name of the story. e.g. "Primary"
  • tags: The tags of the story. e.g. ["autodocs"]
• LinkEntry:
  • label: The label of the link.
  • href: The URL of the link.
  • icon: (Optional) The icon name in @storybook/icons
  • type: (Optional) The type of the link.
    • "link": The link will be opened in the same tab.
    • "linkBlank": (default) The link will be opened in a new tab. Added target="_blank" to the link.
    • "copy": The link will be copied to the clipboard.
  • order: (Optional) When order is specified, it will be sorted in ascending order. The default value is 0.

Preset settings provided by the addon

// preview.tsx

const preview: Preview = {
  parameters: {
    sourceLink: {
      links: {
        "component-vscode": ({ importPath, rootPath }) => {
          if (!rootPath) return undefined;
          const componentPath = importPath.replace(/\.stories\.tsx?$/, ".tsx");
          const componentFileUrl = getFileUrl(rootPath, componentPath);
          return {
            label: componentPath,
            href: `vscode://${componentFileUrl.href}`,
            icon: "VSCodeIcon",
          };
        },
        "story-vscode": ({ importPath, rootPath }) => {
          if (!rootPath) return undefined;
          const fileUrl = getFileUrl(rootPath, importPath);
          const href = `vscode://${fileUrl.href}`;
          return {
            label: importPath,
            href,
            icon: "VSCodeIcon",
          };
        },
        "addon-powered-by": {
          label: "Powered by addon-source-link",
          href: "https://github.com/elecdeer/storybook-addon-source-link",
          order: Number.MAX_SAFE_INTEGER,
          icon: "InfoIcon",
        },
      },
    } satisfies SourceLinkParameter,
  },
};