Merge pull request #31251 from MLoughry/storybook__addon-notes/4.0

Update typings for @storybook/addon-notes
This commit is contained in:
Nathan Shively-Sanders
2018-12-18 10:34:49 -08:00
committed by GitHub
2 changed files with 40 additions and 24 deletions
+13 -10
View File
@@ -1,18 +1,21 @@
// Type definitions for @storybook/addon-notes 3.3
// Type definitions for @storybook/addon-notes 4.0
// Project: https://github.com/storybooks/storybook
// Definitions by: Joscha Feth <https://github.com/joscha>
// A.MacLeay <https://github.com/amacleay>
// Michael Loughry <https://github.com/MLoughry>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
// TypeScript Version: 3.0
import * as React from 'react';
import { RenderFunction } from '@storybook/react';
import { RenderFunction, StoryDecorator } from '@storybook/react';
import { MarkedOptions } from 'marked';
export function withNotes(textOrOptions: string | object): (getStory: RenderFunction) => RenderFunction;
export function withMarkdownNotes(text: string): (getStory: RenderFunction) => RenderFunction;
export type WithNotesOptions = string | {
text: string;
} | {
markdown: string;
markdownOptions?: MarkedOptions;
};
export interface WithNotesProps extends React.HTMLProps<HTMLDivElement> {
notes?: string;
}
export const WithNotes: React.StatelessComponent<WithNotesProps>;
export function withNotes(options?: WithNotesOptions): StoryDecorator;
export function withMarkdownNotes(markdown: string, options?: MarkedOptions): StoryDecorator;
@@ -1,7 +1,7 @@
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withNotes, withMarkdownNotes, WithNotes } from '@storybook/addon-notes';
import { withNotes, withMarkdownNotes, } from '@storybook/addon-notes';
const SIMPLE_MARKDOWN = `
## Markdown for component
@@ -10,18 +10,31 @@ A very simple component with markdown notes
`;
storiesOf('Component', module)
.add('with some emoji', () => (
<WithNotes notes={'A very simple component'}>
my component
</WithNotes>
))
.addDecorator(withNotes())
.add('with withNotes',
withNotes('A very simple component')(
() => (<div>my component</div>)
)
)
.add('with withMarkdownNotes',
withMarkdownNotes(SIMPLE_MARKDOWN)(
() => (<div>my component</div>)
)
() => (<div>my component</div>)
);
storiesOf('Component', module)
.addDecorator(withNotes('Some text'))
.add('with withNotes',
() => (<div>my component</div>)
);
storiesOf('Component', module)
.addDecorator(withNotes({ text: 'Some text' }))
.add('with withNotes',
() => (<div>my component</div>)
);
storiesOf('Component', module)
.addDecorator(withNotes({ markdown: 'Some text' }))
.add('with withNotes',
() => (<div>my component</div>)
);
storiesOf('Component', module)
.addDecorator(withNotes({ markdown: 'Some text', markdownOptions: { sanitize: true } }))
.add('with withNotes',
() => (<div>my component</div>)
);