From a1f54bc6aebfd3155a2055f5543ae4b5fc4ff853 Mon Sep 17 00:00:00 2001 From: igor Date: Wed, 31 Jan 2018 14:54:29 +0200 Subject: [PATCH 01/18] First addon stories integration --- addons/stories/loader.js | 53 +++++++++++++++++++ addons/stories/package.json | 30 +++++++++++ addons/stories/register.js | 1 + addons/stories/src/StoryPanel.js | 35 ++++++++++++ addons/stories/src/index.js | 6 +++ addons/stories/src/manager.js | 14 +++++ addons/stories/src/preview.js | 18 +++++++ examples/official-storybook/addons.js | 1 + examples/official-storybook/config.js | 10 ++-- examples/official-storybook/package.json | 1 + examples/official-storybook/webpack.config.js | 39 +++++++++----- 11 files changed, 193 insertions(+), 15 deletions(-) create mode 100644 addons/stories/loader.js create mode 100644 addons/stories/package.json create mode 100644 addons/stories/register.js create mode 100644 addons/stories/src/StoryPanel.js create mode 100644 addons/stories/src/index.js create mode 100644 addons/stories/src/manager.js create mode 100644 addons/stories/src/preview.js diff --git a/addons/stories/loader.js b/addons/stories/loader.js new file mode 100644 index 000000000000..3a6f07800ab0 --- /dev/null +++ b/addons/stories/loader.js @@ -0,0 +1,53 @@ +const STORY_OF_STATEMENT = 'storiesOf('; +const ADD_STATEMENT = 'add'; +const ADD_DECORATOR_STATEMENT = 'addDecorator(withStorySource(__STORY__)).'; +const ADD_DECORATOR_STATEMENT_LENGTH = ADD_DECORATOR_STATEMENT.length; + +function insertDecorator(source) { + let newSource = source; + let changed = false; + let storyOfIndex = source.indexOf(STORY_OF_STATEMENT); + + while (storyOfIndex > 0) { + const indexOfFirstAdd = newSource.indexOf(ADD_STATEMENT, storyOfIndex); + + const start = newSource.slice(0, indexOfFirstAdd); + const end = newSource.slice(indexOfFirstAdd); + + newSource = `${start}${ADD_DECORATOR_STATEMENT}${end}`; + + storyOfIndex = newSource.indexOf( + STORY_OF_STATEMENT, + indexOfFirstAdd + ADD_DECORATOR_STATEMENT_LENGTH + ); + + changed = true; + } + + return { + newSource, + changed, + }; +} + +module.exports = source => { + this.value = source; + + // Based on https://github.com/webpack-contrib/raw-loader/blob/master/index.js + const json = JSON.stringify(source) + .replace(/\u2028/g, '\\u2028') + .replace(/\u2029/g, '\\u2029'); + + const result = insertDecorator(source); + + if (!result.changed) { + return source; + } + + return ` + var withStorySource = require('@storybook/addon-stories').withStorySource; + var __STORY__ = ${json}; + + ${result.newSource} + `; +}; diff --git a/addons/stories/package.json b/addons/stories/package.json new file mode 100644 index 000000000000..1734e2cfd824 --- /dev/null +++ b/addons/stories/package.json @@ -0,0 +1,30 @@ +{ + "name": "@storybook/addon-stories", + "version": "3.4.0-alpha.6", + "description": "Stories addon for storybook", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybooks/storybook/tree/master/addons/stories", + "bugs": { + "url": "https://github.com/storybooks/storybook/issues" + }, + "license": "MIT", + "main": "dist/index.js", + "jsnext:main": "src/index.js", + "repository": { + "type": "git", + "url": "https://github.com/storybooks/storybook.git" + }, + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "@storybook/addons": "^3.3.0", + "react": "*", + "react-dom": "*" + } +} diff --git a/addons/stories/register.js b/addons/stories/register.js new file mode 100644 index 000000000000..e69edbea3ed1 --- /dev/null +++ b/addons/stories/register.js @@ -0,0 +1 @@ +require('./dist').register(); diff --git a/addons/stories/src/StoryPanel.js b/addons/stories/src/StoryPanel.js new file mode 100644 index 000000000000..05e1beb8f0d2 --- /dev/null +++ b/addons/stories/src/StoryPanel.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { EVENT_ID } from './'; + +export default class StoryPanel extends Component { + constructor(props) { + super(props); + + this.state = { source: '' }; + + const { channel } = props; + + channel.on(EVENT_ID, ({ source }) => { + this.setState({ + source, + }); + }); + } + + render() { + return ( + 
+        {this.state.source}
+
+ ); + } +} + +StoryPanel.propTypes = { + channel: PropTypes.shape({ + emit: PropTypes.func, + on: PropTypes.func, + removeListener: PropTypes.func, + }).isRequired, +}; diff --git a/addons/stories/src/index.js b/addons/stories/src/index.js new file mode 100644 index 000000000000..d24b2a4f9853 --- /dev/null +++ b/addons/stories/src/index.js @@ -0,0 +1,6 @@ +export const ADDON_ID = 'storybook/stories'; +export const PANEL_ID = `${ADDON_ID}/stories-panel`; +export const EVENT_ID = `${ADDON_ID}/story-event`; + +export { register } from './manager'; +export { withStorySource } from './preview'; diff --git a/addons/stories/src/manager.js b/addons/stories/src/manager.js new file mode 100644 index 000000000000..bdfd4b4d5db4 --- /dev/null +++ b/addons/stories/src/manager.js @@ -0,0 +1,14 @@ +import React from 'react'; +import addons from '@storybook/addons'; +import StoryPanel from './StoryPanel'; +import { ADDON_ID, PANEL_ID } from './'; + +export function register() { + addons.register(ADDON_ID, () => { + const channel = addons.getChannel(); + addons.addPanel(PANEL_ID, { + title: 'Story', + render: () => , + }); + }); +} diff --git a/addons/stories/src/preview.js b/addons/stories/src/preview.js new file mode 100644 index 000000000000..f866e2f70324 --- /dev/null +++ b/addons/stories/src/preview.js @@ -0,0 +1,18 @@ +import addons from '@storybook/addons'; +import { EVENT_ID } from './'; + +function setStorySource(source, context) { + const channel = addons.getChannel(); + + channel.emit(EVENT_ID, { + source, + context, + }); +} + +export function withStorySource(source) { + return (story, context) => { + setStorySource(source, context); + return story(); + }; +} diff --git a/examples/official-storybook/addons.js b/examples/official-storybook/addons.js index 3d9e060a1226..e6fb08d25399 100644 --- a/examples/official-storybook/addons.js +++ b/examples/official-storybook/addons.js @@ -1,4 +1,5 @@ /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ +import '@storybook/addon-stories/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-events/register'; diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js index f2886738d26a..d5bb03603425 100644 --- a/examples/official-storybook/config.js +++ b/examples/official-storybook/config.js @@ -12,16 +12,20 @@ setOptions({ hierarchyRootSeparator: /\|/, }); +function importAll(req) { + req.keys().forEach(filename => req(filename)); +} + function loadStories() { let req; req = require.context('../../lib/ui/src', true, /\.stories\.js$/); - req.keys().forEach(filename => req(filename)); + importAll(req); req = require.context('../../lib/components/src', true, /\.stories\.js$/); - req.keys().forEach(filename => req(filename)); + importAll(req); req = require.context('./stories', true, /\.stories\.js$/); - req.keys().forEach(filename => req(filename)); + importAll(req); } configure(loadStories, module); diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index e0b6a10f4e86..4839de44f86a 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -21,6 +21,7 @@ "@storybook/addon-links": "^3.4.0-alpha.6", "@storybook/addon-notes": "^3.4.0-alpha.6", "@storybook/addon-options": "^3.4.0-alpha.6", + "@storybook/addon-stories": "^3.4.0-alpha.6", "@storybook/addon-storyshots": "^3.4.0-alpha.6", "@storybook/addon-viewport": "^3.4.0-alpha.6", "@storybook/addons": "^3.4.0-alpha.6", diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js index 0a6124501f5b..b6d45be3a581 100644 --- a/examples/official-storybook/webpack.config.js +++ b/examples/official-storybook/webpack.config.js @@ -1,16 +1,31 @@ const path = require('path'); -module.exports = { - module: { - rules: [ - { - test: /\.js/, - loaders: ['babel-loader'], - include: [ - path.resolve(__dirname, '../../lib/ui/src'), - path.resolve(__dirname, '../../lib/components/src'), - ], - }, +module.exports = baseConfig => { + const originJsRule = baseConfig.module.rules.find(rule => rule.test.test('text.js')); + + if (originJsRule) { + originJsRule.exclude.push(/\.stories\.jsx?$/); + } + + baseConfig.module.rules.push({ + test: /\.jsx?$/, + exclude: [/\.stories\.jsx?$/], + loaders: [require.resolve('babel-loader')], + include: [ + path.resolve(__dirname, '../../lib/ui/src'), + path.resolve(__dirname, '../../lib/components/src'), ], - }, + }); + + baseConfig.module.rules.push({ + test: /\.stories\.jsx?$/, + loaders: [require.resolve('babel-loader'), require.resolve('@storybook/addon-stories/loader')], + include: [ + path.resolve(__dirname, './stories'), + path.resolve(__dirname, '../../lib/ui/src'), + path.resolve(__dirname, '../../lib/components/src'), + ], + }); + + return baseConfig; }; From 65e4ea2d5d62c63d36992ecc03183622a1967257 Mon Sep 17 00:00:00 2001 From: igor Date: Wed, 31 Jan 2018 15:21:41 +0200 Subject: [PATCH 02/18] Add stories addon to angular --- examples/angular-cli/.storybook/addons.js | 1 + .../angular-cli/.storybook/webpack.config.js | 23 +++++++++++++++++++ examples/angular-cli/package.json | 1 + examples/official-storybook/webpack.config.js | 6 ++--- 4 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 examples/angular-cli/.storybook/webpack.config.js diff --git a/examples/angular-cli/.storybook/addons.js b/examples/angular-cli/.storybook/addons.js index c558d2235028..2d5d822c6dcc 100644 --- a/examples/angular-cli/.storybook/addons.js +++ b/examples/angular-cli/.storybook/addons.js @@ -1,5 +1,6 @@ /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ +import '@storybook/addon-stories/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-notes/register'; diff --git a/examples/angular-cli/.storybook/webpack.config.js b/examples/angular-cli/.storybook/webpack.config.js new file mode 100644 index 000000000000..2ee8211ad6c0 --- /dev/null +++ b/examples/angular-cli/.storybook/webpack.config.js @@ -0,0 +1,23 @@ +const path = require('path'); + +module.exports = (baseConfig) => { + debugger; + const originalTsRule = baseConfig.module.rules.find(rule => rule.test.test('text.ts')); + + if (originalTsRule) { + originalTsRule.exclude = [/\.stories\.tsx?$/]; + } + + baseConfig.module.rules.push({ + test: [ + /\.stories\.tsx?$/, + /index\.ts$/ + ], + loaders: [ ...originalTsRule.loaders, require.resolve('@storybook/addon-stories/loader') ], + include: [ + path.resolve(__dirname, '../src') + ], + }); + + return baseConfig; +}; diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 55c9dadae834..eb710f7b1f94 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -33,6 +33,7 @@ "@storybook/addon-actions": "^3.4.0-alpha.6", "@storybook/addon-links": "^3.4.0-alpha.6", "@storybook/addon-notes": "^3.4.0-alpha.6", + "@storybook/addon-stories": "^3.4.0-alpha.6", "@storybook/addon-storyshots": "^3.4.0-alpha.6", "@storybook/addons": "^3.4.0-alpha.6", "@storybook/angular": "^3.4.0-alpha.6", diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js index b6d45be3a581..6a9ed7cf7828 100644 --- a/examples/official-storybook/webpack.config.js +++ b/examples/official-storybook/webpack.config.js @@ -1,10 +1,10 @@ const path = require('path'); module.exports = baseConfig => { - const originJsRule = baseConfig.module.rules.find(rule => rule.test.test('text.js')); + const originalJsRule = baseConfig.module.rules.find(rule => rule.test.test('text.js')); - if (originJsRule) { - originJsRule.exclude.push(/\.stories\.jsx?$/); + if (originalJsRule) { + originalJsRule.exclude.push(/\.stories\.jsx?$/); } baseConfig.module.rules.push({ From c7b07bb38e89dc55babf4b7cb6fd7900070e0ea7 Mon Sep 17 00:00:00 2001 From: igor Date: Thu, 1 Feb 2018 10:13:06 +0200 Subject: [PATCH 03/18] Add react-syntax-highlighter to highlight the story code --- addons/stories/package.json | 3 +- addons/stories/src/StoryPanel.js | 18 +++++-- yarn.lock | 89 ++++++++++++++++++++++++++++++++ 3 files changed, 105 insertions(+), 5 deletions(-) diff --git a/addons/stories/package.json b/addons/stories/package.json index 1734e2cfd824..51bccad6747a 100644 --- a/addons/stories/package.json +++ b/addons/stories/package.json @@ -20,7 +20,8 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "prop-types": "^15.5.10" + "prop-types": "^15.5.10", + "react-syntax-highlighter": "^7.0.0" }, "peerDependencies": { "@storybook/addons": "^3.3.0", diff --git a/addons/stories/src/StoryPanel.js b/addons/stories/src/StoryPanel.js index 05e1beb8f0d2..8d69a69f97d1 100644 --- a/addons/stories/src/StoryPanel.js +++ b/addons/stories/src/StoryPanel.js @@ -1,12 +1,17 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light'; +import jsx from 'react-syntax-highlighter/languages/prism/jsx'; +import { darcula } from 'react-syntax-highlighter/styles/prism'; import { EVENT_ID } from './'; +registerLanguage('jsx', jsx); + export default class StoryPanel extends Component { constructor(props) { super(props); - this.state = { source: '' }; + this.state = { source: '// Here will be dragons 🐉' }; const { channel } = props; @@ -19,9 +24,14 @@ export default class StoryPanel extends Component { render() { return ( - 
-        {this.state.source}
-
+ + {this.state.source} + ); } } diff --git a/yarn.lock b/yarn.lock index 5a9cd5edaac5..1bd382b47a4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2950,6 +2950,14 @@ cli@~1.0.0: exit "0.1.2" glob "^7.1.1" +clipboard@^1.7.1: + version "1.7.1" + resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b" + dependencies: + good-listener "^1.2.2" + select "^1.1.2" + tiny-emitter "^2.0.0" + cliui@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1" @@ -3124,6 +3132,12 @@ combined-stream@^1.0.5, combined-stream@~1.0.5: dependencies: delayed-stream "~1.0.0" +comma-separated-tokens@^1.0.0: + version "1.0.4" + resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.4.tgz#72083e58d4a462f01866f6617f4d98a3cd3b8a46" + dependencies: + trim "0.0.1" + command-join@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/command-join/-/command-join-2.0.0.tgz#52e8b984f4872d952ff1bdc8b98397d27c7144cf" @@ -4121,6 +4135,10 @@ delayed-stream@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" +delegate@^3.1.2: + version "3.2.0" + resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166" + delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -6199,6 +6217,12 @@ glogg@^1.0.0: dependencies: sparkles "^1.0.0" +good-listener@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" + dependencies: + delegate "^3.1.2" + got@^5.0.0: version "5.7.1" resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35" @@ -6513,6 +6537,20 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.0" +hast-util-parse-selector@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.1.0.tgz#b55c0f4bb7bb2040c889c325ef87ab29c38102b4" + +hastscript@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-3.1.0.tgz#66628ba6d7f1ad07d9277dd09028aba7f4934599" + dependencies: + camelcase "^3.0.0" + comma-separated-tokens "^1.0.0" + hast-util-parse-selector "^2.0.0" + property-information "^3.0.0" + space-separated-tokens "^1.0.0" + hawk@3.1.3, hawk@~3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4" @@ -6535,6 +6573,10 @@ he@1.1.x, he@^1.1.0, he@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +highlight.js@~9.12.0: + version "9.12.0" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -9417,6 +9459,12 @@ lowercase-keys@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306" +lowlight@~1.9.1: + version "1.9.1" + resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.9.1.tgz#ed7c3dffc36f8c1f263735c0fe0c907847c11250" + dependencies: + highlight.js "~9.12.0" + lru-cache@2.2.x: version "2.2.4" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d" @@ -11533,6 +11581,12 @@ pretty-format@^4.2.1: version "4.3.1" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-4.3.1.tgz#530be5c42b3c05b36414a7a2a4337aa80acd0e8d" +prismjs@^1.8.4, prismjs@~1.10.0: + version "1.10.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.10.0.tgz#77e5187c2ae6b3253fcc313029cf25fe53778721" + optionalDependencies: + clipboard "^1.7.1" + private@^0.1.6, private@^0.1.7, private@~0.1.5: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" @@ -11606,6 +11660,10 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, loose-envify "^1.3.1" object-assign "^4.1.1" +property-information@^3.0.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/property-information/-/property-information-3.2.0.tgz#fd1483c8fbac61808f5fe359e7693a1f48a58331" + proto-list@~1.2.1: version "1.2.4" resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849" @@ -12160,6 +12218,16 @@ react-style-proptype@^3.0.0: dependencies: prop-types "^15.5.4" +react-syntax-highlighter@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-7.0.0.tgz#a522ccf95f272178b8f25de2184383e9bf647155" + dependencies: + babel-runtime "^6.18.0" + highlight.js "~9.12.0" + lowlight "~1.9.1" + prismjs "^1.8.4" + refractor "^2.0.0" + react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.0, react-test-renderer@^16.2.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211" @@ -12482,6 +12550,13 @@ reflect-metadata@^0.1.10, reflect-metadata@^0.1.2: version "0.1.10" resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.10.tgz#b4f83704416acad89988c9b15635d47e03b9344a" +refractor@^2.0.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.3.0.tgz#b8cade8f88020f8836ca3622c6ef87fd2444d76a" + dependencies: + hastscript "^3.1.0" + prismjs "~1.10.0" + regenerate@^1.2.1: version "1.3.3" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f" @@ -13203,6 +13278,10 @@ select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" +select@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" + selenium-webdriver@3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-3.6.0.tgz#2ba87a1662c020b8988c981ae62cb2a01298eafc" @@ -13734,6 +13813,12 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" +space-separated-tokens@^1.0.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.1.tgz#9695b9df9e65aec1811d4c3f9ce52520bc2f7e4d" + dependencies: + trim "0.0.1" + sparkles@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3" @@ -14406,6 +14491,10 @@ timers-browserify@^2.0.4: dependencies: setimmediate "^1.0.4" +tiny-emitter@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c" + tinycolor2@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8" From b96b1dac2f77de4b83f0a9197b9574637ed2f344 Mon Sep 17 00:00:00 2001 From: igor Date: Thu, 1 Feb 2018 11:52:23 +0200 Subject: [PATCH 04/18] Add to vue --- examples/angular-cli/.storybook/addons.js | 2 -- examples/vue-kitchen-sink/.storybook/addons.js | 1 + .../.storybook/webpack.config.js | 17 ++++++++++++----- examples/vue-kitchen-sink/package.json | 1 + 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/examples/angular-cli/.storybook/addons.js b/examples/angular-cli/.storybook/addons.js index 2d5d822c6dcc..2577aa9ee2bb 100644 --- a/examples/angular-cli/.storybook/addons.js +++ b/examples/angular-cli/.storybook/addons.js @@ -1,5 +1,3 @@ -/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ - import '@storybook/addon-stories/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; diff --git a/examples/vue-kitchen-sink/.storybook/addons.js b/examples/vue-kitchen-sink/.storybook/addons.js index 2d7b52c620bd..a7afc3474ea6 100644 --- a/examples/vue-kitchen-sink/.storybook/addons.js +++ b/examples/vue-kitchen-sink/.storybook/addons.js @@ -1,3 +1,4 @@ +import '@storybook/addon-stories/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-notes/register'; diff --git a/examples/vue-kitchen-sink/.storybook/webpack.config.js b/examples/vue-kitchen-sink/.storybook/webpack.config.js index c96b297ebae5..5d124c0fb8d9 100644 --- a/examples/vue-kitchen-sink/.storybook/webpack.config.js +++ b/examples/vue-kitchen-sink/.storybook/webpack.config.js @@ -1,11 +1,19 @@ +const path = require('path'); const webpack = require('webpack'); module.exports = (storybookBaseConfig, configType, defaultConfig) => { - // configType has a value of 'DEVELOPMENT' or 'PRODUCTION' - // You can change the configuration based on that. - // 'PRODUCTION' is used when building the static version of storybook. - // Make whatever fine-grained changes you need + defaultConfig.module.rules.push({ + test: [ + /\.stories\.js$/, + /index\.js$/ + ], + loaders: [ require.resolve('babel-loader'), require.resolve('@storybook/addon-stories/loader') ], + include: [ + path.resolve(__dirname, '../src') + ], + }); + defaultConfig.plugins.push( new webpack.optimize.CommonsChunkPlugin({ name: "vendor", @@ -17,6 +25,5 @@ module.exports = (storybookBaseConfig, configType, defaultConfig) => { }) ); - // Return the altered config return defaultConfig; }; diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json index 80acd6189727..bb1a2ed8e268 100644 --- a/examples/vue-kitchen-sink/package.json +++ b/examples/vue-kitchen-sink/package.json @@ -18,6 +18,7 @@ "@storybook/addon-knobs": "^3.4.0-alpha.6", "@storybook/addon-links": "^3.4.0-alpha.6", "@storybook/addon-notes": "^3.4.0-alpha.6", + "@storybook/addon-stories": "^3.4.0-alpha.6", "@storybook/addon-storyshots": "^3.4.0-alpha.6", "@storybook/addon-viewport": "^3.4.0-alpha.6", "@storybook/addons": "^3.4.0-alpha.6", From 53d3bf38735d2446ea8ee1b52600c91d2610230e Mon Sep 17 00:00:00 2001 From: igor Date: Thu, 1 Feb 2018 12:07:00 +0200 Subject: [PATCH 05/18] Add to polymer --- examples/polymer-cli/.storybook/addons.js | 1 + .../polymer-cli/.storybook/webpack.config.js | 17 +++++++++++++++++ examples/polymer-cli/package.json | 1 + 3 files changed, 19 insertions(+) create mode 100644 examples/polymer-cli/.storybook/webpack.config.js diff --git a/examples/polymer-cli/.storybook/addons.js b/examples/polymer-cli/.storybook/addons.js index 1191fbebf304..3f64483be7f9 100644 --- a/examples/polymer-cli/.storybook/addons.js +++ b/examples/polymer-cli/.storybook/addons.js @@ -1,3 +1,4 @@ +import '@storybook/addon-stories/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-notes/register'; import '@storybook/addon-knobs/register'; diff --git a/examples/polymer-cli/.storybook/webpack.config.js b/examples/polymer-cli/.storybook/webpack.config.js new file mode 100644 index 000000000000..8419ff0c9883 --- /dev/null +++ b/examples/polymer-cli/.storybook/webpack.config.js @@ -0,0 +1,17 @@ +const path = require('path'); + +module.exports = (storybookBaseConfig, configType, defaultConfig) => { + + defaultConfig.module.rules.push({ + test: [ + /\.stories\.js$/, + /index\.js$/ + ], + loaders: [ require.resolve('babel-loader'), require.resolve('@storybook/addon-stories/loader') ], + include: [ + path.resolve(__dirname, '../src') + ], + }); + + return defaultConfig; +}; \ No newline at end of file diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json index a354a06d62b7..fa3c6ece0dad 100644 --- a/examples/polymer-cli/package.json +++ b/examples/polymer-cli/package.json @@ -11,6 +11,7 @@ "@storybook/addon-actions": "^3.4.0-alpha.6", "@storybook/addon-knobs": "^3.4.0-alpha.6", "@storybook/addon-notes": "^3.4.0-alpha.6", + "@storybook/addon-stories": "^3.4.0-alpha.6", "@storybook/addon-viewport": "^3.4.0-alpha.6", "@storybook/polymer": "^3.4.0-alpha.6", "@webcomponents/webcomponentsjs": "^1.1.0", From e940e88214f0886d14af0488fbf255ccb5c2e401 Mon Sep 17 00:00:00 2001 From: igor Date: Thu, 1 Feb 2018 18:57:13 +0200 Subject: [PATCH 06/18] Change loader to parse the source with acorn and estraverse --- __mocks__/inject-decorator.no-stories.txt | 3 + __mocks__/inject-decorator.stories.txt | 153 ++++++++++++++++ addons/stories/loader.js | 54 +----- addons/stories/package.json | 4 + .../inject-decorator.test.js.snap | 164 ++++++++++++++++++ addons/stories/src/loader/index.js | 23 +++ addons/stories/src/loader/inject-decorator.js | 52 ++++++ .../src/loader/inject-decorator.test.js | 22 +++ yarn.lock | 73 +++++++- 9 files changed, 493 insertions(+), 55 deletions(-) create mode 100644 __mocks__/inject-decorator.no-stories.txt create mode 100644 __mocks__/inject-decorator.stories.txt create mode 100644 addons/stories/src/loader/__snapshots__/inject-decorator.test.js.snap create mode 100644 addons/stories/src/loader/index.js create mode 100644 addons/stories/src/loader/inject-decorator.js create mode 100644 addons/stories/src/loader/inject-decorator.test.js diff --git a/__mocks__/inject-decorator.no-stories.txt b/__mocks__/inject-decorator.no-stories.txt new file mode 100644 index 000000000000..f0124e61691c --- /dev/null +++ b/__mocks__/inject-decorator.no-stories.txt @@ -0,0 +1,3 @@ +while(true) { + console.log("it's a kind of magic"); +} \ No newline at end of file diff --git a/__mocks__/inject-decorator.stories.txt b/__mocks__/inject-decorator.stories.txt new file mode 100644 index 000000000000..c4f0c4d53e5d --- /dev/null +++ b/__mocks__/inject-decorator.stories.txt @@ -0,0 +1,153 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { withInfo } from '@storybook/addon-info'; +import { action } from '@storybook/addon-actions'; + +import DocgenButton from '../components/DocgenButton'; +import FlowTypeButton from '../components/FlowTypeButton'; +import BaseButton from '../components/BaseButton'; +import TableComponent from '../components/TableComponent'; + +storiesOf('Addons|Info.React Docgen', module) + .add( + 'Comments from PropType declarations', + withInfo( + 'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table' + )(() => ) + ) + .add( + 'Comments from Flow declarations', + withInfo( + 'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table' + )(() => ) + ) + .add( + 'Comments from component declaration', + withInfo( + 'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading' + )(() => ) + ); + +const markdownDescription = ` +#### You can use markdown in your withInfo() description. + +Sometimes you might want to manually include some code examples: +~~~js +const Button = () =>