SB v5 API

api.js

// The idea is to maintain the `api.X` contract that allows us to change the internal store format without releasing a breaking change

import React from 'react';
import { addons, types } from '@storybook/addons';

import { ADDON_ID, PANEL_ID } from './constants';

addons.register(ADDON_ID, api => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'My Addon',

    // A function from api calls to props for render. This allows us to be reactive on state changes
    // but maintain performance by only considering props that we care about (ala mapStateToProps)
    renderProps: () => ({
      const storyId = api.storyId();
      return {
        storyId,
        parameters: api.getParameters(storyId),
        currentVersion: api.getCurrentVersion(),
      };
    }),

    render: ({ active, storyId, parameters, currentVersion }) => (
      <h1>Current story = {storyId}</h1>
    ),
  });
  
  // If an addon needs to directly access state (for instance to use our persistence layer),
  // it can register a module
    addons.addModule(({ store }) => ({
      // This is the same API as core modules use
      return ({
        api: {
          myAddonSomething() {
            /* ... */
          },
        },
      });
    });
});