diff --git a/__mocks__/htmlMock.js b/__mocks__/htmlMock.js new file mode 100644 index 00000000000..0062fcfe198 --- /dev/null +++ b/__mocks__/htmlMock.js @@ -0,0 +1 @@ +module.exports = '

HTML Mock

'; diff --git a/addons/notes/README.md b/addons/notes/README.md index e637e3faa0e..2b88113201e 100644 --- a/addons/notes/README.md +++ b/addons/notes/README.md @@ -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')(() => )); + .add('with some emoji', withNotes('A very simple 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)(() => )); + +``` ### Deprecated API This API is slated for removal in 4.0 diff --git a/app/angular/src/server/config/webpack.config.js b/app/angular/src/server/config/webpack.config.js index e863df84908..92d05118f87 100644 --- a/app/angular/src/server/config/webpack.config.js +++ b/app/angular/src/server/config/webpack.config.js @@ -78,6 +78,17 @@ export default function() { loader: 'raw-loader', exclude: /\.async\.(html|css)$/, }, + { + test: /\.md$/, + use: [ + { + loader: 'html-loader', + }, + { + loader: 'markdown-loader', + }, + ], + }, ], }, resolve: { diff --git a/app/react-native/src/server/config/webpack.config.js b/app/react-native/src/server/config/webpack.config.js index 0e2f5c2ce09..44e9be40779 100644 --- a/app/react-native/src/server/config/webpack.config.js +++ b/app/react-native/src/server/config/webpack.config.js @@ -35,6 +35,17 @@ const getConfig = options => ({ include: includePaths, exclude: excludePaths, }, + { + test: /\.md$/, + use: [ + { + loader: 'html-loader', + }, + { + loader: 'markdown-loader', + }, + ], + }, ], }, }); diff --git a/app/react-native/src/server/config/webpack.config.prod.js b/app/react-native/src/server/config/webpack.config.prod.js index b7c15794ef1..ad624a3501c 100644 --- a/app/react-native/src/server/config/webpack.config.prod.js +++ b/app/react-native/src/server/config/webpack.config.prod.js @@ -53,6 +53,17 @@ const getConfig = options => { include: includePaths, exclude: excludePaths, }, + { + test: /\.md$/, + use: [ + { + loader: 'html-loader', + }, + { + loader: 'markdown-loader', + }, + ], + }, ], }, }; diff --git a/app/react/package.json b/app/react/package.json index 6d8321c71fd..8fa79448a09 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -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", diff --git a/app/react/src/server/config/webpack.config.js b/app/react/src/server/config/webpack.config.js index d90af4f9c91..090ea973bc1 100644 --- a/app/react/src/server/config/webpack.config.js +++ b/app/react/src/server/config/webpack.config.js @@ -65,6 +65,17 @@ export default function() { include: includePaths, exclude: excludePaths, }, + { + test: /\.md$/, + use: [ + { + loader: 'html-loader', + }, + { + loader: 'markdown-loader', + }, + ], + }, ], }, resolve: { diff --git a/app/react/src/server/config/webpack.config.prod.js b/app/react/src/server/config/webpack.config.prod.js index 12a2793137f..ba5bfaf7321 100644 --- a/app/react/src/server/config/webpack.config.prod.js +++ b/app/react/src/server/config/webpack.config.prod.js @@ -65,6 +65,17 @@ export default function() { include: includePaths, exclude: excludePaths, }, + { + test: /\.md$/, + use: [ + { + loader: 'html-loader', + }, + { + loader: 'markdown-loader', + }, + ], + }, ], }, resolve: { diff --git a/app/vue/src/server/config/webpack.config.js b/app/vue/src/server/config/webpack.config.js index c5fe4cdd631..b9baa314466 100644 --- a/app/vue/src/server/config/webpack.config.js +++ b/app/vue/src/server/config/webpack.config.js @@ -69,6 +69,17 @@ export default function() { loader: require.resolve('vue-loader'), options: {}, }, + { + test: /\.md$/, + use: [ + { + loader: 'html-loader', + }, + { + loader: 'markdown-loader', + }, + ], + }, ], }, resolve: { diff --git a/app/vue/src/server/config/webpack.config.prod.js b/app/vue/src/server/config/webpack.config.prod.js index f4fca7240d7..0095ad6fcd9 100644 --- a/app/vue/src/server/config/webpack.config.prod.js +++ b/app/vue/src/server/config/webpack.config.prod.js @@ -70,6 +70,17 @@ export default function() { loader: require.resolve('vue-loader'), options: {}, }, + { + test: /\.md$/, + use: [ + { + loader: 'html-loader', + }, + { + loader: 'markdown-loader', + }, + ], + }, ], }, resolve: { diff --git a/docs/src/pages/basics/writing-stories/index.md b/docs/src/pages/basics/writing-stories/index.md index cc06435695a..e9e074fde80 100644 --- a/docs/src/pages/basics/writing-stories/index.md +++ b/docs/src/pages/basics/writing-stories/index.md @@ -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)(() => )); +``` + ## Nesting stories You can organize your stories in a nesting structures using "/" as a separator: diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot index 43fd55dd6f6..5f6e684d807 100644 --- a/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot +++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot @@ -19,3 +19,13 @@ exports[`Storyshots Addon Notes withNotes 1`] = ` Button with notes - check the notes panel for details `; + +exports[`Storyshots Addon Notes withNotes rendering imported markdown 1`] = ` + +`; diff --git a/examples/cra-kitchen-sink/src/stories/addon-notes.stories.js b/examples/cra-kitchen-sink/src/stories/addon-notes.stories.js index e27c7998de9..f6c850dddfe 100644 --- a/examples/cra-kitchen-sink/src/stories/addon-notes.stories.js +++ b/examples/cra-kitchen-sink/src/stories/addon-notes.stories.js @@ -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.' )(() => ) ) + .add( + 'withNotes rendering imported markdown', + withNotes(markdownNotes)(() => ( + + )) + ) .add('using deprecated API', () => ( diff --git a/examples/cra-kitchen-sink/src/stories/notes/notes.md b/examples/cra-kitchen-sink/src/stories/notes/notes.md new file mode 100644 index 00000000000..47bae27134c --- /dev/null +++ b/examples/cra-kitchen-sink/src/stories/notes/notes.md @@ -0,0 +1,10 @@ +# This is a Markdown File + +#### It is imported and compiled using a webpack markdown loader + +Supports code snippets too: +```jsx +
+ Foo +
+``` diff --git a/jest.config.js b/jest.config.js index 08ea182c3e6..05a33cab5fa 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,6 +5,7 @@ module.exports = { '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/__mocks__/fileMock.js', '\\.(css|scss)$': '/__mocks__/styleMock.js', + '\\.(md)$': '/__mocks__/htmlMock.js', }, roots: [ '/addons', diff --git a/yarn.lock b/yarn.lock index e88a313b672..79ef37443b4 100644 --- a/yarn.lock +++ b/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"