Open jayshah123 opened 5 years ago
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:
.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.
Switch
State
Below is the sample code which is story for Switch component. Since Switch is controlled component, I use a State/Store addon to control .
The info addon is configured at a global level using following
.storybook/config.js
:When trying to see Info about the
Switch
component used in the story, It shows info about theState
component.