Storybook Opener

A Visual Studio Code extension to open Storybook quickly

demo.mov

Features

• Efficiency: Open Storybook directly from your active file.
• Colocation Support: Instantly open SomeComponent story from associated files like SomeComponent.tsx, SomeComponent.module.css or index.ts.
• Auto Server Start: If your Storybook server isn't running, it'll initiate it for you.
• Adaptable: Seamlessly syncs with your project settings.

Usage

1. Open folder containing Storybook configuration as root (/.storybook folder)
2. Open component story or related file in editor(*.stories.{t,j}sx, *.mdx, *.test.ts, *.module.css etc)
3. You can acesss storybook story in browser quickly!
   • Click editor actions button (you might see it in the editor toolbar)
   • Click Open Storybook from editor context (right-click) menu
   • Run Storybook Opener: Open Storybook from command palette

Guide

Running the Storybook dev server and other commands

If you need to execute other commands, such as code generation, to launch the Storybook dev server, you can use the npm-run-all or concurrently packages in conjunction with the storybook-opener.startCommand option.

For example, think about a project requires running the watch script alongside the storybook dev command, and it have a package.json set up with scripts as follows:

{
  "scripts": {
    "storybook": "run-p watch 'storybook:dev -- {1}' --",
    "storybook:dev": "storybook dev -p 6006",
    "watch": ": Commands necessary for the Storybook dev server..."
  }
}

-- {1} is argument placeholder of npm-run-all package.

Additionally, configure the storybook-opener.startCommand option like this:

{
  "storybook-opener.startCommand": "npm run storybook -- --no-open"
}

Then, when you run the npm run storybook command, it will execute the Storybook dev server concurrently with the watch command. Moreover, when you launch the Storybook dev server from the Storybook Opener, the watch command will execute, and the storybook dev command will have the --no-open option appended.

Working with monorepo

If you're using Storybook Opener in a monorepo project, try the methods described below.

Using Multi-root Workspaces (Recommended)

VS Code's Multi-root Workspaces feature allows you to open multiple folders simultaneously. This is particularly handy when working with a monorepo project in VS Code. (For your information: Visual Studio Code tips for monorepo development with Multi-root Workspaces and extension | by Damian Cyrus | REWRITE TECH by diconium | Medium)

For instance, imagine you have a monorepo project with the following folder structure:

.
├── apps
│   ├── web
│   ├── docs
│   └── ...
└── packages
     ├── ui
     └── ...

In this case, you'd configure Multi-root Workspaces as follows:

.vscode/project.code-workspace

{
  "folders": [
    {
      "name": "root",
      "path": ".."
    },
    {
      "path": "../apps/web"
    },
    {
      "path": "../packages/docs"
    },
    {
      "path": "../packages/ui"
    }
  ],
  "extensions": {
    "recommendations": ["ygkn.storybook-opener"]
  }
}

You can open .vscode/project.code-workspace using one of the following methods, and Storybook Opener can be used in any package:

• Select File > Open Workspace from File... and open project.code-workspace.
• Double-click on project.code-workspace in your file manager.
• Open project.code-workspace in the editor and click Open Workspace in the bottom right corner of the editor.
• Execute code project.code-workspace from the terminal.

Furthermore, using different port numbers for each package allows efficient checking if the Storybook server is running. Plus, you can run the Storybook server for each package concurrently.

apps/web/.vscode/settings.json

{
  "storybook-opener.storybookOption.port": 6006
}

packages/docs/.vscode/settings.json

{
  "storybook-opener.storybookOption.port": 6007
}

packages/ui/.vscode/settings.json

{
  "storybook-opener.storybookOption.port": 6008
}

Setting storybook-opener.storybookOption.configDir and storybook-opener.startCommand options

If you have just one package using Storybook and you don't want to use multi-root workspaces, you can use Storybook Opener by configuring the storybook-opener.storybookOption.configDir and storybook-opener.startCommand options.

{
  "storybook-opener.storybookOption.configDir": "apps/web/.storybook",
  "storybook-opener.startCommand": "npm run storybook -w apps/web -- --no-open"
}

Settings

Options to get Storybook URL

storybook-opener.storybookOption.configDir

• Type: string
• Default: .storybook

Directory where to load Storybook configurations from

Same to -c / --config-dir option of Storybook CLI Options.

storybook-opener.storybookOption.port

• Type: number
• Default: 6006

Port to run Storybook

Same to -p / --port option of Storybook CLI Options.

storybook-opener.storybookOption.host

• Type: string
• Default: localhost

Host to run Storybook

Same to -h / --host option of Storybook CLI Options.

storybook-opener.storybookOption.https

• Type: boolean
• Default: false

Serve Storybook over HTTPS

Same to --https option of Storybook CLI Options.

Options to run Storybook

storybook-opener.startCommand

• Type: string
• Default: ""

Command to run when starting a Storybook.

By default, Storybook Opener will run npx storybook dev --no-open ${options} with options built from storybook-opener.storybookOption options.

storybook-opener.autoStartBehavior

• Type: string
• Default: "ask"
• Enum: "ask", "always", "never"

The behavior when Storybook server is not running.

• ask: Ask before starting Storybook server.
• always: Always automatically start Storybook server without asking.
• never: Never automatically start Storybook server without asking.

storybook-opener.openInEditor.enable

• Type: boolean
• Default: false

When enabled, Open storybook with vscode SimpleBrowser.

storybook-opener.openInEditor.follow

• Type: boolean
• Default: false

When enabled, Automatically opens stories related to the opened file. storybook-opener.openInEditor.enable MUST be set to true.

Contributing

Contributions, issues and feature requests are welcome!

Development

1. Clone this repository
2. Run npm install
3. Open this repository in VS Code
4. Run Run Extension from the Run view

License

MIT