From 83d9422dc0e8656ba09afa9e4885a01e8b029853 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 16:42:56 -0700 Subject: [PATCH 01/16] add raw-loader for markdown --- .storybook/webpack.config.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 037ae7908e..29de1c3ad8 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -5,6 +5,10 @@ const modulesPath = path.resolve(__dirname, "../modules") module.exports = { module: { rules: [ + { + test: /\.md$/, + use: "raw-loader", + }, { test: /\.scss$/, loaders: [ @@ -28,7 +32,7 @@ module.exports = { }, ], include: modulesPath, - } - ] + }, + ], }, } From 44ca3abc1c561be03bdf00a9f9c970893e802a5d Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 16:43:10 -0700 Subject: [PATCH 02/16] add markdown parser dependencies --- package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package.json b/package.json index 49fa5d3238..2dd31076c6 100644 --- a/package.json +++ b/package.json @@ -24,20 +24,24 @@ "commit-status": "^4.1.0", "css-loader": "^0.28.4", "glob": "^7.1.2", + "html-to-react": "^1.2.11", "lerna": "^2.0.0", "node-sass": "^4.5.3", "npm-run-all": "^4.0.2", "octicons": "^6.0.1", "postcss-loader": "^2.0.6", "primer-module-build": "^1.0.2", + "raw-loader": "^0.5.1", "react": "^15.6.1", "react-dom": "^15.6.1", "react-svg-inline": "^2.0.0", + "remark": "^8.0.0", "sass-loader": "^6.0.6", "semver": "^5.3.0", "style-loader": "^0.18.2", "stylelint": "^7.13.0", "stylelint-config-primer": "^2.0.0", + "unist-util-select": "^1.5.0", "yo": "^2.0.0" } } From ac2a619938079ccbdbe81a8f4fa6a4f49b2c123f Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 16:43:19 -0700 Subject: [PATCH 03/16] get stories from markdown! --- modules/primer-breadcrumb/stories.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/modules/primer-breadcrumb/stories.js b/modules/primer-breadcrumb/stories.js index fd4089f506..2f0037b3db 100644 --- a/modules/primer-breadcrumb/stories.js +++ b/modules/primer-breadcrumb/stories.js @@ -1,15 +1,10 @@ import React from 'react' import { storiesOf } from '@storybook/react' +import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown' -storiesOf('Breadcrumb', module) -.add('breadcrumb', () => ( -
- -
-)) +const stories = storiesOf('Breadcrumb', module) + +storiesFromMarkdown(require.context('.', true, /\.md$/)) + .forEach((story, i) => { + stories.add(`story #${i + 1}`, () => story) + }) From 59b78300b3e69924c1a97597acfa4a8eb05b0e01 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 16:43:34 -0700 Subject: [PATCH 04/16] add markdown story parser --- .storybook/lib/storiesFromMarkdown.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 .storybook/lib/storiesFromMarkdown.js diff --git a/.storybook/lib/storiesFromMarkdown.js b/.storybook/lib/storiesFromMarkdown.js new file mode 100644 index 0000000000..2e0057d77c --- /dev/null +++ b/.storybook/lib/storiesFromMarkdown.js @@ -0,0 +1,16 @@ +import remark from 'remark' +import select from 'unist-util-select' +import htmlToReact from 'html-to-react' + +export default req => { + const parser = new htmlToReact.Parser() + return req.keys() + .reduce((stories, file) => { + const content = req(file) + const ast = remark.parse(content) + return stories.concat( + select(ast, 'code[lang^=html]') + .map(node => parser.parse(node.value)) + ) + }, []) +} From 1143a5e0da65e7c1da2f6642e39aef4600eafc23 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 23:55:42 -0700 Subject: [PATCH 05/16] add parse-pairs and unist-util-visit --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 2dd31076c6..f773c58c48 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "node-sass": "^4.5.3", "npm-run-all": "^4.0.2", "octicons": "^6.0.1", + "parse-pairs": "^0.2.2", "postcss-loader": "^2.0.6", "primer-module-build": "^1.0.2", "raw-loader": "^0.5.1", @@ -42,6 +43,7 @@ "stylelint": "^7.13.0", "stylelint-config-primer": "^2.0.0", "unist-util-select": "^1.5.0", + "unist-util-visit": "^1.1.3", "yo": "^2.0.0" } } From 85ca8189988f0a20fa2db5e2ddf9ec05678fbb70 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 23:55:58 -0700 Subject: [PATCH 06/16] wrap everything in div.p-4 --- .storybook/config.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/.storybook/config.js b/.storybook/config.js index 32418d6f97..97c1c24eed 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,4 +1,5 @@ -import { configure } from '@storybook/react' +import React from 'react' +import { configure, addDecorator } from '@storybook/react' import { setOptions } from '@storybook/addon-options' import '../modules/primer-css/index.scss' @@ -8,6 +9,12 @@ setOptions({ showDownPanel: false, }) +addDecorator(story => ( +
+ {story()} +
+)) + const contexts = [ require.context('.', true, /\.js$/), require.context('../modules', true, /stories.*\.js$/), From 1b6c2bdc9b71299646d2f662b28dc5d28623ecb0 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 23:59:07 -0700 Subject: [PATCH 07/16] parse titles from nearest heading or fence lang --- .storybook/lib/storiesFromMarkdown.js | 54 ++++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 5 deletions(-) diff --git a/.storybook/lib/storiesFromMarkdown.js b/.storybook/lib/storiesFromMarkdown.js index 2e0057d77c..a475e69731 100644 --- a/.storybook/lib/storiesFromMarkdown.js +++ b/.storybook/lib/storiesFromMarkdown.js @@ -1,16 +1,60 @@ import remark from 'remark' +import visit from 'unist-util-visit' import select from 'unist-util-select' import htmlToReact from 'html-to-react' +import {createParser} from 'parse-pairs' + +const htmlParser = new htmlToReact.Parser() + +const parsePairs = (parse => { + return str => { + try { + return parse(str) + } catch (error) { + return {} + } + } +})(createParser()) + +const nodeToStory = (node, heading, file, index) => { + const html = node.value + const pairs = node.lang.replace(/^html\s+/, '') + const data = pairs ? parsePairs(pairs) : {} + const title = data.title || heading || `story #${index} (${file})` + return { + story: htmlParser.parse(html), + title, + html, + file, + node, + } +} export default req => { - const parser = new htmlToReact.Parser() return req.keys() .reduce((stories, file) => { const content = req(file) const ast = remark.parse(content) - return stories.concat( - select(ast, 'code[lang^=html]') - .map(node => parser.parse(node.value)) - ) + let heading + + visit(ast, node => { + switch (node.type) { + case 'heading': + heading = node.children + .map(child => child.value) + .join('') + break + case 'code': + if (node.lang && node.lang.match(/^html\b/)) { + stories.push( + nodeToStory(node, heading, file, stories.length + 1) + ) + heading = undefined + } + break + } + }) + + return stories }, []) } From 50c635566a20d650f9e272b66e8fbed1607186ae Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 23:59:56 -0700 Subject: [PATCH 08/16] simplify --- modules/primer-breadcrumb/stories.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/primer-breadcrumb/stories.js b/modules/primer-breadcrumb/stories.js index 2f0037b3db..a9b1bca313 100644 --- a/modules/primer-breadcrumb/stories.js +++ b/modules/primer-breadcrumb/stories.js @@ -5,6 +5,6 @@ import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown' const stories = storiesOf('Breadcrumb', module) storiesFromMarkdown(require.context('.', true, /\.md$/)) - .forEach((story, i) => { - stories.add(`story #${i + 1}`, () => story) + .forEach(({story, title}) => { + stories.add(title, () => story) }) From 09e2172f1f9dc12819f3c6ae4a03de4430208fab Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 13 Sep 2017 00:00:12 -0700 Subject: [PATCH 09/16] add title for code block --- modules/primer-breadcrumb/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-breadcrumb/README.md b/modules/primer-breadcrumb/README.md index 0563466146..0234d63043 100644 --- a/modules/primer-breadcrumb/README.md +++ b/modules/primer-breadcrumb/README.md @@ -22,7 +22,7 @@ Breadcrumbs are used to show taxonomical context on pages that are many levels d #### Usage -```html +```html title=breadcrumb ``` -```html story=false +```html note="this should get the default title" + +``` + +```html title="this should NOT show up" story=false