GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 22:21:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updated addon-notes to add params based app.

Browse Source 
Use official-storybook stories
This commit is contained in:
Tom Coleman 2018-04-06 12:27:50 +10:00
parent 9b3f63b304
commit fdafcbfd7e
2 changed files with 56 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
addons/notes/src/index.js
View File

@ -3,25 +3,49 @@ import addons from '@storybook/addons';
import marked from 'marked';
import { WithNotes as ReactWithNotes } from './react';
export const withMarkdownNotes = (text, options) => {
function renderMarkdown(text, options) {
marked.setOptions({ ...marked.defaults, options });
return marked(text);
}
const decorator = options => {
const channel = addons.getChannel();
return getStory => context => {
marked.setOptions({ ...marked.defaults, options });
// send the notes to the channel before the story is rendered
channel.emit('storybook/notes/add_notes', marked(text));
return (getStory, context) => {
const { parameters: { notes } } = context;
console.log({ options, getStory, context, notes });
const storyOptions = notes || options;
if (storyOptions) {
const { text, markdown, markdownOptions } =
typeof storyOptions === 'string' ? { text: storyOptions } : storyOptions;
if (!text && !markdown) {
throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter');
}
channel.emit('storybook/notes/add_notes', text || renderMarkdown(markdown, markdownOptions));
}
return getStory(context);
};
};
export const withNotes = textOrOptions => {
const channel = addons.getChannel();
const options = typeof textOrOptions === 'string' ? { text: textOrOptions } : textOrOptions;
const hoc = options => story => context => decorator(options)(story, context);
return getStory => context => {
// send the notes to the channel before the story is rendered
channel.emit('storybook/notes/add_notes', options.text);
return getStory(context);
};
export const withMarkdownNotes = (text, options) =>
hoc({
markdown: text,
markdownOptions: options,
});
export const withNotes = (...args) => {
// Used without options as .addDecorator(withNotes)
if (typeof args[0] === 'function') {
return decorator()(...args);
}
// Input are options, ala .add('name', withNotes('note')(() => <Story/>))
return hoc(args[0]);
};
Object.defineProperty(exports, 'WithNotes', {

39
examples/official-storybook/stories/addon-notes.stories.js
View File

@ -7,22 +7,11 @@ import { action } from '@storybook/addon-actions';
import BaseButton from '../components/BaseButton';
import markdownNotes from './notes/notes.md';
storiesOf('Addons|Notes', module)
.add(
'withNotes',
withNotes(
'This is the notes for a button. This is helpful for adding details about a story in a separate panel.'
)(() => <BaseButton label="Button with notes - check the notes panel for details" />)
)
.add(
'withNotes rendering imported markdown',
withNotes(markdownNotes)(() => (
<BaseButton label="Button with notes - check the notes panel for details" />
))
)
.add(
'withNotes rendering inline, github-flavored markdown',
withMarkdownNotes(`
const baseStory = () => (
<BaseButton label="Button with notes - check the notes panel for details" />
);
const markdownString = `
# Documentation
This is inline github-flavored markdown!
@ -37,10 +26,20 @@ storiesOf('Addons|Notes', module)
))
)
~~~
`)(() => (
<BaseButton label="Button with notes from inline github-flavored markdown - check the notes panel for details" />
))
)
`;
storiesOf('Addons|Notes', module)
.addDecorator(withNotes)
.add('withNotes', baseStory, {
notes:
'This is the notes for a button. This is helpful for adding details about a story in a separate panel.',
})
.add('withNotes rendering imported markdown', baseStory, { notes: { markdown: markdownNotes } })
.add('withNotes rendering inline, github-flavored markdown', baseStory, {
notes: { markdown: markdownString },
})
.add('using decorator arguments, withNotes', withNotes('Notes into withNotes')(baseStory))
.add('using decorator arguments, withMarkdownNotes', withMarkdownNotes(markdownString)(baseStory))
.add('using deprecated API', () => (
<WithNotes notes="Hello">
<BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />