Panel does not play nice with other addons

[epavletic]

This is possbly the same bug as reported in #10, but since I still experience the issue with 1.6.0 as well, I thought I’d open a new ticket.

Issue description

The storybook-state addon panel doesn’t seem to work properly together with other addons. The panel is always shown even if another addon panel is active. If storybook-state is imported last in .storybook/addons.js its panel is rendered on top of all other panels, making it hard to interact with the at all. If it is imported first, it just stays in sight the whole time, making it harder to see the contents in the other panels:

Steps to reproduce

In the gif above I’m using:

• @storybook/react – 5.1.4
• @storybook/addon-actions – 5.1.4
• @storybook/addon-knobs – 5.1.4
• @dump247/storybook-state – 1.6.0

// addons.js
import '@dump247/storybook-state/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';

// story
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text } from '@storybook/addon-knobs';
import { withState } from '@dump247/storybook-state';

// …

const handleChange = store => option => {
  action('onValueChange')(option);
  store.set({ selectedOption: option });
};

storiesOf('Dropdown', module)
  .addDecorator(withKnobs)
  .add(
    'default',
    withState({ selectedOption: null })(({ store }) => (
      <Dropdown
        placeholder={text('placeholder', 'Hello Storybook')}
        options={options}
        selectedOption={store.state.selectedOption}
        onValueChange={handleChange(store)}
      />
    )),
  );

Expected behaviour

Switching between the addon panels should hide the inactive ones, and show only the active tab/panel.

Actual behaviour

The storybook-state addon panel stays visible regardless of active tab/panel. Note that both the knobs- and actions-addons properly shows/hides when selecting their tabs/panels.

[hmvp]

It is the same issue. 1.6.0 didn't fix it because it is missing a check on active in the render function..

As per https://storybook.js.org/docs/addons/writing-addons/#add-a-panel the render function should return null when active is false