How to use the storybook-readme.withDocs function in storybook-readme
To help you get started, we’ve selected a few storybook-readme examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
tuchk4 / storybook-readme / packages / example-vue / stories / index.js View on Github 
const success = boolean('Success', false);
return {
components: {
MyButton,
},
template: `My Button`,
};
});
// withReadme and withDocs
storiesOf('withDocs and withReadme', module)
.addDecorator(withKnobs)
.addDecorator(withDocs(ButtonDocs))
.addDecorator(withReadme(ButtonReadme))
.add('Button', () => {
const warning = boolean('Warning', false);
const success = boolean('Success', false);
return {
components: {
MyButton,
},
template: `My Button`,
};
});
// withDocs))))
.add('Block', withReadme(ButtonReadme, withDocs(ButtonBlockDoc, () => (
<button>Block level button</button>
<button>Block level button</button>
))))
.add('Active', withReadme(ButtonReadme, withDocs(ButtonActiveDoc, () => (
<button>Primary button</button>
<button>Secondary Button</button>
))))
.add('Disabled', withReadme(ButtonReadme, withDocs(ButtonDisabledDoc, () => (
<button disabled="">Primary button</button>
<button disabled="">Secondary Button</button>
))));))))
.add('Checkboxes and radios without label', withReadme(FormReadme, withDocs(FormCheckboxRadioWOLabelDocs, () => (
<form>
</form>
))))
.add('Form groups', withReadme(FormReadme, withDocs(FormGroupsDocs, () => (
<form>
<label>Example label</label>
<label>Another label</label>
</form>
))))
.add('Form Grid', withReadme(FormReadme, withDocs(FormGridDocs, () => (
<form></form>return {
styles: {
textAlign: 'center',
padding: '25px',
margin: '25px 0',
boxShadow: '0 0 40px rgba(0, 0, 0, 0.1)',
},
};
},
template: `<div></div>`,
},
});
storiesOf('With Docs from *.vue docs section', module)
.addDecorator(withKnobs)
.addDecorator(withDocs(MyButton.__docs))
.add('Button', () => {
const warning = boolean('Warning', false);
const success = boolean('Success', false);
return {
components: {
MyButton,
},
template: `My Button`,
};
});
storiesOf('Custom Preview and Footer', module)
.addDecorator(withKnobs)import Text from './showcase/text';
import SizingDocs from './docs/sizing.md';
import Sizing from './showcase/sizing';
import DisplayDocs from './docs/display.md';
import Display from './showcase/display';
import BordersDocs from './docs/borders.md';
import Borders from './showcase/borders';
import ShadowsDocs from './docs/shadows.md';
import Shadows from './showcase/shadows';
import FloatDocs from './docs/float.md';
import Float from './showcase/float';
import ResizeDocs from './docs/resize.md';
import Resize from './showcase/resize';
storiesOf('Utilities', module)
.add('ShowcaseContainer', withReadme(BaseReadme, withDocs(ShowcaseContainerDocs, () => (
Just container with utilities
))))
.add('Colors', withReadme(BaseReadme, withDocs(ColorsDocs, Colors)))
.add('Spacing', withReadme(BaseReadme, withDocs(SpacingDocs, Spacing)))
.add('Text', withReadme(BaseReadme, withDocs(TextDocs, Text)))
.add('Sizing', withReadme(BaseReadme, withDocs(SizingDocs, Sizing)))
.add('Display', withReadme(BaseReadme, withDocs(DisplayDocs, Display)))
.add('Borders', withReadme(BaseReadme, withDocs(BordersDocs, Borders)))
.add('Shadows', withReadme(BaseReadme, withDocs(ShadowsDocs, Shadows)))
.add('Float', withReadme(BaseReadme, withDocs(FloatDocs, Float)))
.add('Resize', withReadme(BaseReadme, withDocs(ResizeDocs, Resize)));import {
Radio,
Field,
Box,
Card,
Heading,
Text,
Flex,
Pill,
Select,
} from 'rimble-ui';
storiesOf('Components/Form/Radio buttons', module)
.add(
'Documentation',
withDocs(Documentation, () => (
Radio examples<table>
<thead>
</thead><tbody>
</tbody></table>
))))
.add('Hoverable Dark', withReadme(TableReadme, withDocs(TableHoverDarkDocs, () => (
<table>
<thead>
</thead><tbody>
</tbody></table>
))))
.add('Small', withReadme(TableReadme, withDocs(TableSmallDocs, () => (
<table>
<thead>
</thead><tbody>
</tbody></table>
))))
.add('Small Dark', withReadme(TableReadme, withDocs(TableSmallDarkDocs, () => (
<table>
<thead>
</thead><tbody>
</tbody></table>
))))
.add('Contextual', withReadme(TableReadme, withDocs(TableContextualDocs, () => (import { storiesOf } from '@storybook/react';
import { withDocs } from 'storybook-readme';
import CodeBlock from '../../components/CodeBlock';
import Documentation from './docs.md';
import { Pill, Box, Text, Heading } from 'rimble-ui';
Heading.defaultProps = {
...Heading.defaultProps,
py: 3
}
storiesOf('Components/', module).add(
'Pill',
withDocs(Documentation, () => (
Pill examples
Different ways to use the <code>{'Pill'}</code> component in your product.
Default:
{'Pending'}
Custom color:<button>Dark</button>
))))
.add('Sizes', withReadme(ButtonReadme, withDocs(ButtonSizesDoc, () => (
<button>Large button</button>
<button>Large button</button>
<button>Small button</button>
<button>Small button</button>
))))
.add('Block', withReadme(ButtonReadme, withDocs(ButtonBlockDoc, () => (
<button>Block level button</button>
<button>Block level button</button>
))))
.add('Active', withReadme(ButtonReadme, withDocs(ButtonActiveDoc, () => (
<button>Primary button</button>
<button>Secondary Button</button>
))))
.add('Disabled', withReadme(ButtonReadme, withDocs(ButtonDisabledDoc, () => (
<button disabled="">Primary button</button>
<button disabled="">Secondary Button</button><table>
<thead>
</thead><tbody>
</tbody></table>
))))
.add('Hoverable', withReadme(TableReadme, withDocs(TableHoverableDocs, () => (
<table>
<thead>
</thead><tbody>
</tbody></table>
))))
.add('Hoverable Dark', withReadme(TableReadme, withDocs(TableHoverDarkDocs, () => (
<table>
<thead>
</thead><tbody>
</tbody></table>
))))
.add('Small', withReadme(TableReadme, withDocs(TableSmallDocs, () => (
<table>
<thead>
</thead><tbody>
</tbody></table>
))))
.add('Small Dark', withReadme(TableReadme, withDocs(TableSmallDarkDocs, () => (storybook-readme
Storybook addon to show components README (for React and Vue)
