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

@kadira/storybook-ui

v3.11.0

Published

Core Storybook UI

Downloads

27,338

Readme

Storybook UI

This is the core UI of react-storybook and other similar projects. It's a React based UI where you can initialize with a simple function. You can configure it by providing a simple provider API.

Storybook UI Demo

Usage

First you need to install @kadira/storybook-ui into your app.

npm i --save @kadira/storybook-ui

Then you need to create a Provider class like this:

// provider.js
import { Provider } from '@kadira/storybook-ui';
import React from 'react';

export default class MyProvider extends Provider {
  getPanels() {
    return {};
  }

  renderPreview() {
    return (
      <p>This is the Preview</p>
    );
  }

  handleAPI(api) {
    // no need to do anything for now.
  }
}

Then you need to initialize the UI like this:

import Provider from './provider';
import renderStorybookUI from '@kadira/storybook-ui';

const roolEl = document.getElementById('root');
renderStorybookUI(roolEl, new Provider());

Then you'll get a UI like this:

Simplest Storybook UI

See the example app for a complete example.

API

.setOptions([option])

handleAPI(api) {
  api.setOptions({
    name: 'My Component', // change the name displayed in the left top portion
    url: 'https://github.com/user/my-component', // change its URL
    sortStoriesByKind: true // Sort the list of stories by their "kind"
  });
}

.setStories([stories])

This API is used to pass thekind and stories list to storybook-ui.

handleAPI(api) {
  api.setStories([
    {
      kind: 'Component 1',
      stories: ['State 1', 'State 2']
    },

    {
      kind: 'Component 2',
      stories: ['State a', 'State b']
    }
  ]);
}

.onStory()

You can use to listen to the story change and update the preview.

handleAPI(api) {
  api.onStory((kind, story) => {
      this.globalState.emit('change', kind, story);
  });
}

Hacking Guide

If you like to add features to the Storybook UI or fix bugs, this is the guide you need to follow.

First of all, you can need to start the example app to see your changes.

The App

This is a Redux app written based on the Mantra architecture. It's a set of modules. You can see those modules at src/modules directory.

Changing UI

If you like to change the appearance of the UI, you need to look at the ui module. Simply change components at the components directory for simple UI tweaks.

You can also change containers(which are written with react-komposer) to add more data from the redux state.

Redux

Each module has a it's own set of reducers at <module>/configs/reducers directory. These reducers are loaded in the src/index.js(inside the main api).

Mounting

The UI is mounted in the src/modules/ui/routes.js. Inside that, we have injected dependencies as well. Refer mantra-core for that.

We've injected the context and actions.

App Context

App context is the app which application context you initialize when creating the UI. It is initialized in the src/index.js file. It's a non serializable state. You can access the app context from containers and basically most of the place in the app.

So, that's the place to put app wide configurations and objects which won't changed after initialized. Our redux store is also stayed inside the app context.

Actions

Actions are the place we implement app logic in a Mantra app. Each module has a set of actions and they are globally accessible. These actions are located at <module>/actions directory.

They got injected into the app(when mounting) and you can access them via containers. If you are familiar with redux, this is exactly action creators. But they are not only limited to do redux stuff. Actions has the access to the app context, so literally it can do anything.

Core API

Core API (which is passed to the Provider with handleAPI method) is implemented in the api module. We put the provider passed by the user in the app context. Then api module access it and use it as needed.

Keyboard Shortcuts

Keyboard shortcuts are implemented in a bit different way. The final state of keyboard shortcuts is managed by the shortcuts module. But they are implemented in the ui module with src/modules/ui/configs/handle_routing.js

These shortcuts also can be called from main API using the handleShortcut method. Check the example app for the usage. That's implemented as an action in the shortcuts module.

The above action(or the handleShortcut method) accepts events as a constant defined by this module. They are defined in the src/libs/key_events.js. This is basically to serialize these events.

In react-storybook we need to pass these events from the preview iframe to the main app. That's the core reason for this.

URL Changes

We are not using any routing library. That's because, we don't want to do routing, but wanted to add some query params and use them.

Routing logic is implemented in the src/modules/ui/configs/handle_routing.js configuration.