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

@leocorbi/storybook-addon-extra-tab

v1.0.1--canary.83bd41c.0

Published

It gives you an empty tab to customize as needed.

Downloads

5

Readme

Storybook Addon extra-tab

It gives you an empty tab to customize as needed.

Development scripts

  • npm run start runs babel in watch mode and starts Storybook
  • npm run build build and package your addon code

Switch from TypeScript to JavaScript

Don't want to use TypeScript? We offer a handy eject command: npm run eject-ts

This will convert all code to JS. It is a destructive process, so we recommended running this before you start writing any code.

What's included?

Demo

The addon code lives in src. It demonstrates all core addon related concepts. The three UI paradigms

  • src/Tool.tsx
  • src/Panel.tsx
  • src/Tab.tsx

Which, along with the addon itself, are registered in src/manager.ts.

Managing State and interacting with a story:

  • src/withGlobals.ts & src/Tool.tsx demonstrates how to use useGlobals to manage global state and modify the contents of a Story.
  • src/withRoundTrip.ts & src/Panel.tsx demonstrates two-way communication using channels.
  • src/Tab.tsx demonstrates how to use useParameter to access the current story's parameters.

Your addon might use one or more of these patterns. Feel free to delete unused code. Update src/manager.ts and src/preview.ts accordingly.

Lastly, configure you addon name in src/constants.ts.

Bundling

Addons can interact with a Storybook project in multiple ways. It is recommended to familiarize yourself with the basics before getting started.

  • Manager entries are used to add UI or behavior to the Storybook manager UI.
  • Preview entries are used to add UI or behavior to the preview iframe where stories are rendered.
  • Presets are used to modify the Storybook configuration, similar to how users can configure their main.ts configurations.

Since each of these places represents a different environment with different features and modules, it is also recommended to split and build your modules accordingly. This addon-kit comes with a preconfigured bundling configuration that supports this split, and you are free to modify and extend it as needed.

You can define which modules match which environments in the package.json#bundler property:

  • exportEntries is a list of module entries that users can manually import from anywhere they need to. For example, you could have decorators that users need to import into their preview.ts file or utility functions that can be used in their main.ts files.
  • managerEntries is a list of module entries meant only for the manager UI. These modules will be bundled to ESM and won't include types since they are mostly loaded by Storybook directly.
  • previewEntries is a list of module entries meant only for the preview UI. These modules will be bundled to ESM and won't include types since they are mostly loaded by Storybook directly.

Manager and preview entries are only used in the browser so they only output ESM modules. Export entries could be used both in the browser and in Node depending on their use case, so they both output ESM and CJS modules.

Globalized packages

Storybook provides a predefined set of packages that are available in the manager UI and the preview UI. In the final bundle of your addon, these packages should not be included. Instead, the imports should stay in place, allowing Storybook to replace those imports with the actual packages during the Storybook build process.

The list of packages differs between the manager and the preview, which is why there is a slight difference between managerEntries and previewEntries. Most notably, react and react-dom are prebundled in the manager but not in the preview. This means that your manager entries can use React to build UI without bundling it or having a direct reference to it. Therefore, it is safe to have React as a devDependency even though you are using it in production. Requiring React as a peer dependency would unnecessarily force your users to install React.

An exception to this rule is if you are using React to inject UI into the preview, which does not come prebundled with React. In such cases, you need to move react and react-dom to a peer dependency. However, we generally advise against this pattern since it would limit the usage of your addon to React-based Storybooks.

Metadata

Storybook addons are listed in the catalog and distributed via npm. The catalog is populated by querying npm's registry for Storybook-specific metadata in package.json. This project has been configured with sample data. Learn more about available options in the Addon metadata docs.

Release Management

Setup

This project is configured to use auto for release management. It generates a changelog and pushes it to both GitHub and npm. Therefore, you need to configure access to both:

  • NPM_TOKEN Create a token with both Read and Publish permissions.
  • GH_TOKEN Create a token with the repo scope.

Then open your package.json and edit the following fields:

  • name
  • author
  • repository

Local

To use auto locally create a .env file at the root of your project and add your tokens to it:

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

Lastly, create labels on GitHub. You’ll use these labels in the future when making changes to the package.

npx auto create-labels

If you check on GitHub, you’ll now see a set of labels that auto would like you to use. Use these to tag future pull requests.

GitHub Actions

This template comes with GitHub actions already set up to publish your addon anytime someone pushes to your repository.

Go to Settings > Secrets, click New repository secret, and add your NPM_TOKEN.

Creating a release

To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.

npm run release

That will:

  • Build and package the addon code
  • Bump the version
  • Push a release to GitHub and npm
  • Push a changelog to GitHub