npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

storybook-branch-switcher

v0.5.0

Published

A Storybook addon to navigate between multiple Git branches.

Downloads

573

Readme

Storybook Branch switcher

A Storybook 7+ addon to navigate between multiple Git branches. Also a command-line tool to automatically generate one instance per branch.

Screenshot of add-on in action in Storybook

Installation

Install the following module with npm:

npm i --save-dev storybook-branch-switcher

or with yarn:

yarn add -D storybook-branch-switcher

Then, add following content to .storybook/main.js

module.exports = {
  addons: ["storybook-branch-switcher"],
};

CLI

This package exports a script called sb-branch-switcher which will automatically generate one Storybook instance per branch, based on your Git workflow. (We support Git submodules, and any checkouts will only run in a clean workspace.)

Configuration

The CLI needs a configuration file located at .storybook/.branches.json by default. But you can create this file in another location and pass the path to the CLI with the --config or --c argument.

Example : sb-branch-switcher --config libs/storybook-host/.storybook/.branches.json

Here is the explanation of all available options:

| Key | Default | Description | | -------------- | --------------- | --------------------------------------------------------------------- | | from | - | (mandatory) Where the Storybook instance is located after a build | | to | - | (mandatory) Where all Storybook instances will be copied | | directory | current folder | Absolute path where the project belongs | | script_name | build-storybook | Name of the NPM script that builds the Storybook | | default_branch | master | Your default Git branch | | default_root | true | Copy instance for default branch into root folder | | provider | - | Configuration to retrieve branches and commits to process |

With Bitbucket (opened PRs)

This provider enables you to generate one Storybook instance per opened PR of a Bitbucket repository (supports cloud and on-premise servers).

| Key | Default | Description | | ---------- | --------------------- | ---------------------------------------------------------- | | type | - | (mandatory) must be "bitbucket" | | project | - | (mandatory) name of the Bitbucket project to target | | repository | - | (mandatory) name of the Bitbucket repository to target | | url | https://bitbucket.org | Bitbucket host to connect to |

Authorization (optional)

If the Bitbucket instance needs an authorization, you can use one of the following options with environment variables.

  • Basic login details : BITBUCKET_USERNAME and BITBUCKET_PASSWORD
  • Use an access token for HTTP Rest API: BITBUCKET_TOKEN

With GitHub (opened PRs)

This provider enables you to generate one Storybook instance per opened PR of a GitHub repository.

| Key | Default | Description | | ---------- | ------- | ------------------------------------------------------- | | type | - | (mandatory) must be "github" | | owner | - | (mandatory) name of the GitHub owner | | repository | - | (mandatory) name of the Github repository to target |

You must set GITHUB_TOKEN environment variable to access the GitHub.com API.

With Gitlab (opened MRs)

This provider enables you to generate one Storybook instance per opened MR in a Gitlab repository.

| Key | Default | Description | | --------- | ------------------ | ---------------------------------------- | | projectId | - | (mandatory) projectId of the project | | url | https://gitlab.com | Gitlab host to connect to |

You must set GITLAB_TOKEN environment variable to access the Gitlab.com API.

Configuration file example

{
  "from": "dist/storybook",
  "to": "dist/storybook-bundle",
  "default_branch": "master",
  "default_root": true,
  "provider": {
    "type": "bitbucket",
    "project": "my-project",
    "repository": "my-design-system"
  }
}

FAQ

How do I host my storybook in a subpath? (e.g. GitHub Pages)

Out-of-the-box this addon supports hosting Storybook at the root path, but you'll need some extra setup if you'd like to host a storybook in a subpath.

| ✅ Out-of-the-box: root path | 🛠️ Requires setup: subpaths | |:-----------------------------|:--------------------------------------------| | http://localhost:6006 | http://localhost:6006/some/path | | https://sub.example.com | https://your-username.github.io/your-repo |

Just make these changes in your .storybook/preview.js file, in this example, publishing to GitHub Pages.

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 6731af8..7587cb6 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,4 +1,5 @@
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
     controls: {
@@ -10,4 +11,18 @@ const preview = {
   },
 };
 
+/* Any envvar prefixed with STORYBOOK_ will be available in the built storybook, ie. preview.js
+ * See: https://storybook.js.org/docs/configure/environment-variables
+ *
+ * Set STORYBOOK_PUBLISH_FOR_WEB=true in your build environment, along with the
+ * domain and path you'd like to host from.
+ */
+if (process.env["STORYBOOK_PUBLISH_FOR_WEB"]) {
+  preview.parameters = {
+    branches: {
+      hostname: `your-username.github.io/your-repo`,
+    }
+  }
+}
+
 export default preview;

You'll then just need to set STORYBOOK_PUBLISH_FOR_WEB=true in whatever build environment you run the sb-branch-switcher command.

To test locally:

  1. set hostname in .storybook/preview.js to localhost:6006/storybook-bundle,
  2. build via STORYBOOK_PUBLISH_FOR_WEB=true sb-branch-switcher <other opts>
  3. run npx http-server dist to serve your local storybook one subpath deeper.