Merge pull request #2299 from storybooks/add-support-for-importing-markdown-in-storybook-react

Add support for importing markdown in storybook

__mocks__/htmlMock.js

@@ -0,0 +1 @@
+module.exports = '<h1>HTML Mock</h1>';

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')(() => <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
 

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: {

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',
+          },
+        ],
+      },
     ],
   },
 });

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',
+            },
+          ],
+        },
       ],
     },
   };

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",

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: {

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: {

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: {

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: {

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)(() => <Component/>));
+```
+
 ## Nesting stories
 
 You can organize your stories in a nesting structures using "/" as a separator:

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
 </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>
+`;

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.'
     )(() => <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="😀 😎 👍 💯" />

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
+<div>
+  Foo
+</div>
+```

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)$':
       '<rootDir>/__mocks__/fileMock.js',
     '\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',
+    '\\.(md)$': '<rootDir>/__mocks__/htmlMock.js',
   },
   roots: [
     '<rootDir>/addons',

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"