mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-03 05:04:51 +08:00
Merge pull request #2299 from storybooks/add-support-for-importing-markdown-in-storybook-react
Add support for importing markdown in storybook
This commit is contained in:
Daniel Duan
GitHub
commit
afcdcc9f5b
1
__mocks__/htmlMock.js
Normal file
1
__mocks__/htmlMock.js
Normal file
@ -0,0 +1 @@
|
||||
module.exports = '<h1>HTML Mock</h1>';
|
||||
@ -41,9 +41,23 @@ import { withNotes } from '@storybook/addon-notes';
|
||||
import Component from './Component';
|
||||
|
||||
storiesOf('Component', module)
|
||||
.add('with some emoji', withNotes('A very simple component')(() => <Component></Component>));
|
||||
.add('with some emoji', withNotes('A very simple component')(() => </Component>>));
|
||||
```
|
||||
|
||||
#### Using Markdown
|
||||
|
||||
To use markdown in your notes simply import a markdown file and use that in your note.
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withNotes } from '@storybook/addon-notes';
|
||||
import Component from './Component';
|
||||
import someMarkdownText from './someMarkdownText.md';
|
||||
|
||||
storiesOf('Component', module)
|
||||
.add('With Markdown', withNotes(someMarkdownText)(() => <Component/>));
|
||||
|
||||
```
|
||||
### Deprecated API
|
||||
This API is slated for removal in 4.0
|
||||
|
||||
|
||||
@ -78,6 +78,17 @@ export default function() {
|
||||
loader: 'raw-loader',
|
||||
exclude: /\.async\.(html|css)$/,
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'html-loader',
|
||||
},
|
||||
{
|
||||
loader: 'markdown-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
@ -35,6 +35,17 @@ const getConfig = options => ({
|
||||
include: includePaths,
|
||||
exclude: excludePaths,
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'html-loader',
|
||||
},
|
||||
{
|
||||
loader: 'markdown-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
@ -53,6 +53,17 @@ const getConfig = options => {
|
||||
include: includePaths,
|
||||
exclude: excludePaths,
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'html-loader',
|
||||
},
|
||||
{
|
||||
loader: 'markdown-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
@ -53,12 +53,14 @@
|
||||
"glamor": "^2.20.40",
|
||||
"glamorous": "^4.11.0",
|
||||
"global": "^4.3.2",
|
||||
"html-loader": "^0.5.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"json-loader": "^0.5.7",
|
||||
"json-stringify-safe": "^5.0.1",
|
||||
"json5": "^0.5.1",
|
||||
"lodash.flattendeep": "^4.4.0",
|
||||
"lodash.pick": "^4.4.0",
|
||||
"markdown-loader": "^2.0.1",
|
||||
"postcss-flexbugs-fixes": "^3.2.0",
|
||||
"postcss-loader": "^2.0.8",
|
||||
"prop-types": "^15.6.0",
|
||||
|
||||
@ -65,6 +65,17 @@ export default function() {
|
||||
include: includePaths,
|
||||
exclude: excludePaths,
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'html-loader',
|
||||
},
|
||||
{
|
||||
loader: 'markdown-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
@ -65,6 +65,17 @@ export default function() {
|
||||
include: includePaths,
|
||||
exclude: excludePaths,
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'html-loader',
|
||||
},
|
||||
{
|
||||
loader: 'markdown-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
@ -69,6 +69,17 @@ export default function() {
|
||||
loader: require.resolve('vue-loader'),
|
||||
options: {},
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'html-loader',
|
||||
},
|
||||
{
|
||||
loader: 'markdown-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
@ -70,6 +70,17 @@ export default function() {
|
||||
loader: require.resolve('vue-loader'),
|
||||
options: {},
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'html-loader',
|
||||
},
|
||||
{
|
||||
loader: 'markdown-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
@ -105,6 +105,22 @@ configure(function () {
|
||||
}, module);
|
||||
```
|
||||
|
||||
## Using Markdown
|
||||
|
||||
As of storybook 3.3, [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) can be used in storybook by default. All you need to do is import a markdown file, and it will automatically be parsed into an HTML string. You can then use that string in any addon that supports HTML (such as notes).
|
||||
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withNotes } from '@storybook/addon-notes';
|
||||
import MyComponent from './MyComponent';
|
||||
import someMarkdownText from './someMarkdownText.md';
|
||||
|
||||
storiesOf('Component', module)
|
||||
.add('With Markdown', withNotes(someMarkdownText)(() => <Component/>));
|
||||
```
|
||||
|
||||
## Nesting stories
|
||||
|
||||
You can organize your stories in a nesting structures using "/" as a separator:
|
||||
|
||||
@ -19,3 +19,13 @@ exports[`Storyshots Addon Notes withNotes 1`] = `
|
||||
Button with notes - check the notes panel for details
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Addon Notes withNotes rendering imported markdown 1`] = `
|
||||
<button
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
style={Object {}}
|
||||
>
|
||||
Button with notes - check the notes panel for details
|
||||
</button>
|
||||
`;
|
||||
|
||||
@ -4,6 +4,7 @@ import { storiesOf } from '@storybook/react';
|
||||
import { withNotes, WithNotes } from '@storybook/addon-notes';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import BaseButton from '../components/BaseButton';
|
||||
import markdownNotes from './notes/notes.md';
|
||||
|
||||
storiesOf('Addon Notes', module)
|
||||
.add(
|
||||
@ -12,6 +13,12 @@ storiesOf('Addon Notes', module)
|
||||
'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('using deprecated API', () => (
|
||||
<WithNotes notes="Hello">
|
||||
<BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />
|
||||
|
||||
10
examples/cra-kitchen-sink/src/stories/notes/notes.md
Normal file
10
examples/cra-kitchen-sink/src/stories/notes/notes.md
Normal file
@ -0,0 +1,10 @@
|
||||
# This is a Markdown File
|
||||
|
||||
#### It is imported and compiled using a webpack markdown loader
|
||||
|
||||
Supports code snippets too:
|
||||
```jsx
|
||||
<div>
|
||||
Foo
|
||||
</div>
|
||||
```
|
||||
@ -5,6 +5,7 @@ module.exports = {
|
||||
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
|
||||
'<rootDir>/__mocks__/fileMock.js',
|
||||
'\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',
|
||||
'\\.(md)$': '<rootDir>/__mocks__/htmlMock.js',
|
||||
},
|
||||
roots: [
|
||||
'<rootDir>/addons',
|
||||
|
||||
30
yarn.lock
30
yarn.lock
@ -4452,6 +4452,13 @@ es6-symbol@3.1.1, es6-symbol@^3.1.1, es6-symbol@~3.1.1:
|
||||
d "1"
|
||||
es5-ext "~0.10.14"
|
||||
|
||||
es6-templates@^0.2.2:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
|
||||
dependencies:
|
||||
recast "~0.11.12"
|
||||
through "~2.3.6"
|
||||
|
||||
es6-weak-map@^2.0.1:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
|
||||
@ -6186,7 +6193,17 @@ html-entities@^1.2.0:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
|
||||
|
||||
html-minifier@^3.2.3:
|
||||
html-loader@^0.5.1:
|
||||
version "0.5.1"
|
||||
resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.1.tgz#4f1e8396a1ea6ab42bedc987dfac058070861ebe"
|
||||
dependencies:
|
||||
es6-templates "^0.2.2"
|
||||
fastparse "^1.1.1"
|
||||
html-minifier "^3.0.1"
|
||||
loader-utils "^1.0.2"
|
||||
object-assign "^4.1.0"
|
||||
|
||||
html-minifier@^3.0.1, html-minifier@^3.2.3:
|
||||
version "3.5.6"
|
||||
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.6.tgz#7e4e661a09999599c7d8e8a2b8d7fb7430bb5c3e"
|
||||
dependencies:
|
||||
@ -8529,6 +8546,13 @@ markdown-extensions@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/markdown-extensions/-/markdown-extensions-1.1.0.tgz#fba0f1a2ebb4f4123d25b7a93bc35792c11f504e"
|
||||
|
||||
markdown-loader@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/markdown-loader/-/markdown-loader-2.0.1.tgz#eed8bead82978bacf17b76a11c5593a013e2d976"
|
||||
dependencies:
|
||||
loader-utils "^1.1.0"
|
||||
marked "^0.3.6"
|
||||
|
||||
markdown-table@^1.1.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.1.tgz#4b3dd3a133d1518b8ef0dbc709bf2a1b4824bc8c"
|
||||
@ -11203,7 +11227,7 @@ recast@^0.10.10:
|
||||
private "~0.1.5"
|
||||
source-map "~0.5.0"
|
||||
|
||||
recast@^0.11.17:
|
||||
recast@^0.11.17, recast@~0.11.12:
|
||||
version "0.11.23"
|
||||
resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
|
||||
dependencies:
|
||||
@ -13073,7 +13097,7 @@ through2@^2.0.0, through2@^2.0.2:
|
||||
readable-stream "^2.1.5"
|
||||
xtend "~4.0.1"
|
||||
|
||||
through@2, "through@>=2.2.7 <3", through@X.X.X, through@^2.3.4, through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1, through@~2.3.8:
|
||||
through@2, "through@>=2.2.7 <3", through@X.X.X, through@^2.3.4, through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1, through@~2.3.6, through@~2.3.8:
|
||||
version "2.3.8"
|
||||
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user