Ability to Specify Component for which docs should be extracted.

[jayshah123]

trafficstars

Below is the sample code which is story for Switch component. Since Switch is controlled component, I use a State/Store addon to control .

import * as React from 'react';
import { SwitchProps } from './Switch';
import { Store, State } from "@sambego/storybook-state";
import { boolean, withKnobs } from '@storybook/addon-knobs';

// state for controlled component
const store = new Store({
    checked: false
});
  
export default(storiesOf:any, {
  Switch,
}:{
  Switch: React.ComponentType<SwitchProps>,
}) =>
  storiesOf('Switch', module)
    .addDecorator(withKnobs)
    .add('simple', () => {
        const disable = boolean('Disable Switch', false, 'switch');
        return (
            <State store={store}>
                {state => 
                    <Switch
                        onChange={() => {
                            store.set({ checked: !store.get('checked')});
                        }}
                        disabled={disable}
                        checked={state.checked}
                    >
                    </Switch>
                }
            </State>
        )
    }
);

The info addon is configured at a global level using following .storybook/config.js:

function loadStories() {
  addDecorator(withInfo({inline:false}));
  // automatically import all files ending in *.stories.js
  const req = require.context('../src/components', true, /.stories.tsx$/);
  return req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

When trying to see Info about the Switch component used in the story, It shows info about the State component.

[jayshah123]