Fix the import of external md files

addons/info/src/index.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import AddonInfo, { withInfo, setDefaults } from './';
+import externalMdDocs from '../README.md';
 
 /* eslint-disable */
 const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
@@ -52,6 +53,11 @@ describe('addon Info', () => {
 
     expect(mount(<Info />)).toMatchSnapshot();
   });
+  it('should render <Info /> and external markdown', () => {
+    const Info = withInfo(externalMdDocs)(story);
+
+    expect(mount(<Info />)).toMatchSnapshot();
+  });
   it('should render with text options', () => {
     const Info = withInfo({ text: 'some text here' })(story);
     mount(<Info />);

addons/notes/README.md

@@ -52,7 +52,7 @@ storiesOf('Component', module)
 
 #### Using Markdown
 
-To use markdown in your notes simply import a markdown file and use that in your note.
+To use markdown in your notes, either through import or inline, simply put it in the `markdown` property of your note.
 
 ```js
 import { storiesOf } from '@storybook/react';
@@ -61,31 +61,7 @@ import someMarkdownText from './someMarkdownText.md';
 
 storiesOf('Component', module).add(
   'With Markdown',
-  () => <Component />
-  { notes: someMarkdownText }
-);
-```
-
-If you want to use Github flavored markdown inline, use `notes: { markdownText: 'your md' }`:
-
-```js
-import { storiesOf } from '@storybook/react';
-import Component from './Component';
-
-storiesOf('Component', module).add(
-  'With Markdown',
-  () => <Component />
-  { notes: { markdown: `
-  # Hello World
-
-This is some code showing usage of the component and other inline documentation
-
-~~~js
-<div>
-  hello world!
-  <Component/>
-</div>
-~~~
-`} }
+  () => <Component />,
+  { notes: { markdown: someMarkdownText } }
 );
 ```

app/angular/package.json

@@ -36,9 +36,7 @@
     "core-js": "^2.5.5",
     "dotenv-webpack": "^1.5.5",
     "global": "^4.3.2",
-    "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "markdown-loader": "^2.0.2",
     "raw-loader": "^0.5.1",
     "sass-loader": "^7.0.1",
     "ts-loader": "^4.2.0",

app/angular/src/server/config/webpack.config.js

@@ -96,14 +96,7 @@ export default function(configDir, quiet) {
         },
         {
           test: /\.md$/,
-          use: [
-            {
-              loader: require.resolve('html-loader'),
-            },
-            {
-              loader: require.resolve('markdown-loader'),
-            },
-          ],
+          loader: require.resolve('raw-loader'),
         },
       ],
     },

app/angular/src/server/config/webpack.config.prod.js

@@ -92,14 +92,7 @@ export default function(configDir) {
         },
         {
           test: /\.md$/,
-          use: [
-            {
-              loader: require.resolve('html-loader'),
-            },
-            {
-              loader: require.resolve('markdown-loader'),
-            },
-          ],
+          loader: require.resolve('raw-loader'),
         },
       ],
     },

app/mithril/package.json

@@ -38,9 +38,8 @@
     "core-js": "^2.5.5",
     "dotenv-webpack": "^1.5.5",
     "global": "^4.3.2",
-    "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "markdown-loader": "^2.0.2",
+    "raw-loader": "^0.5.1",
     "webpack": "^4.6.0",
     "webpack-hot-middleware": "^2.22.1"
   },

app/mithril/src/server/config/webpack.config.js

@@ -73,14 +73,7 @@ export default function(configDir, quiet) {
         },
         {
           test: /\.md$/,
-          use: [
-            {
-              loader: require.resolve('html-loader'),
-            },
-            {
-              loader: require.resolve('markdown-loader'),
-            },
-          ],
+          loader: require.resolve('raw-loader'),
         },
       ],
     },

app/mithril/src/server/config/webpack.config.prod.js

@@ -68,14 +68,7 @@ export default function(configDir) {
         },
         {
           test: /\.md$/,
-          use: [
-            {
-              loader: require.resolve('html-loader'),
-            },
-            {
-              loader: require.resolve('markdown-loader'),
-            },
-          ],
+          loader: require.resolve('raw-loader'),
         },
       ],
     },

app/polymer/package.json

@@ -40,6 +40,7 @@
     "dotenv-webpack": "^1.5.5",
     "global": "^4.3.2",
     "html-webpack-plugin": "^3.2.0",
+    "raw-loader": "^0.5.1",
     "webpack": "^4.6.0",
     "webpack-hot-middleware": "^2.22.1"
   },

app/polymer/src/server/config/webpack.config.js

@@ -85,6 +85,10 @@ export default function(configDir, quiet) {
             },
           ],
         },
+        {
+          test: /\.md$/,
+          loader: require.resolve('raw-loader'),
+        },
       ],
     },
     resolve: {

app/polymer/src/server/config/webpack.config.prod.js

@@ -79,6 +79,10 @@ export default function(configDir) {
             },
           ],
         },
+        {
+          test: /\.md$/,
+          loader: require.resolve('raw-loader'),
+        },
       ],
     },
     resolve: {

app/react-native/package.json

@@ -52,11 +52,10 @@
     "express": "^4.16.3",
     "find-cache-dir": "^1.0.0",
     "global": "^4.3.2",
-    "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "json5": "^1.0.1",
-    "markdown-loader": "^2.0.2",
     "prop-types": "^15.6.1",
+    "raw-loader": "^0.5.1",
     "react-native-compat": "^1.0.0",
     "react-native-iphone-x-helper": "^1.0.2",
     "shelljs": "^0.8.1",

app/react-native/src/server/config/webpack.config.js

@@ -46,14 +46,7 @@ const getConfig = options => ({
       },
       {
         test: /\.md$/,
-        use: [
-          {
-            loader: require.resolve('html-loader'),
-          },
-          {
-            loader: require.resolve('markdown-loader'),
-          },
-        ],
+        loader: require.resolve('raw-loader'),
       },
     ],
   },

app/react-native/src/server/config/webpack.config.prod.js

@@ -50,14 +50,7 @@ const getConfig = options => {
         },
         {
           test: /\.md$/,
-          use: [
-            {
-              loader: require.resolve('html-loader'),
-            },
-            {
-              loader: require.resolve('markdown-loader'),
-            },
-          ],
+          loader: require.resolve('raw-loader'),
         },
       ],
     },

app/react/package.json

@@ -42,11 +42,10 @@
     "glamor": "^2.20.40",
     "glamorous": "^4.12.4",
     "global": "^4.3.2",
-    "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "lodash.flattendeep": "^4.4.0",
-    "markdown-loader": "^2.0.2",
     "prop-types": "^15.6.1",
+    "raw-loader": "^0.5.1",
     "webpack": "^4.6.0",
     "webpack-hot-middleware": "^2.22.1"
   },

app/react/src/server/config/webpack.config.js

@@ -73,14 +73,7 @@ export default function(configDir, quiet) {
         },
         {
           test: /\.md$/,
-          use: [
-            {
-              loader: require.resolve('html-loader'),
-            },
-            {
-              loader: require.resolve('markdown-loader'),
-            },
-          ],
+          loader: require.resolve('raw-loader'),
         },
       ],
     },

app/react/src/server/config/webpack.config.prod.js

@@ -68,14 +68,7 @@ export default function(configDir) {
         },
         {
           test: /\.md$/,
-          use: [
-            {
-              loader: require.resolve('html-loader'),
-            },
-            {
-              loader: require.resolve('markdown-loader'),
-            },
-          ],
+          loader: require.resolve('raw-loader'),
         },
       ],
     },

app/vue/package.json

@@ -38,9 +38,8 @@
     "core-js": "^2.5.5",
     "dotenv-webpack": "^1.5.5",
     "global": "^4.3.2",
-    "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "markdown-loader": "^2.0.2",
+    "raw-loader": "^0.5.1",
     "webpack": "^4.6.0",
     "webpack-hot-middleware": "^2.22.1"
   },

app/vue/src/server/config/webpack.config.js

@@ -78,14 +78,7 @@ export default function(configDir, quiet) {
         },
         {
           test: /\.md$/,
-          use: [
-            {
-              loader: require.resolve('html-loader'),
-            },
-            {
-              loader: require.resolve('markdown-loader'),
-            },
-          ],
+          loader: require.resolve('raw-loader'),
         },
       ],
     },

app/vue/src/server/config/webpack.config.prod.js

@@ -73,14 +73,7 @@ export default function(configDir) {
         },
         {
           test: /\.md$/,
-          use: [
-            {
-              loader: require.resolve('html-loader'),
-            },
-            {
-              loader: require.resolve('markdown-loader'),
-            },
-          ],
+          loader: require.resolve('raw-loader'),
         },
       ],
     },

docs/src/pages/basics/writing-stories/index.md

@@ -107,18 +107,18 @@ configure(function () {
 
 ## 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).
+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, which extracts the raw markdown content into a string. You can then use that string in any addon that supports markdown (such as notes).
 
 
 ```js
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withNotes } from '@storybook/addon-notes';
+import { withMarkdownNotes } from '@storybook/addon-notes';
 import MyComponent from './MyComponent';
 import someMarkdownText from './someMarkdownText.md';
 
 storiesOf('Component', module)
-  .add('With Markdown', withNotes(someMarkdownText)(() => <MyComponent/>));
+  .add('With Markdown', withMarkdownNotes(someMarkdownText)(() => <MyComponent/>));
 ```
 
 ## Nesting stories