From 424e1bb63dd851a0422402602323bb326897456f Mon Sep 17 00:00:00 2001 From: Alexander Nilsson Date: Fri, 9 Jun 2017 09:54:12 +0200 Subject: [PATCH 001/115] Add shallow render snapshot as a test body --- addons/storyshots/src/index.js | 2 +- addons/storyshots/src/test-bodies.js | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js index b24b308b2189..6b328fd0116b 100644 --- a/addons/storyshots/src/index.js +++ b/addons/storyshots/src/index.js @@ -7,7 +7,7 @@ import runWithRequireContext from './require_context'; import createChannel from './storybook-channel-mock'; import { snapshot } from './test-bodies'; -export { snapshotWithOptions, snapshot, renderOnly } from './test-bodies'; +export { snapshotWithOptions, snapshot, shallowSnapshot, renderOnly } from './test-bodies'; let storybook; let configPath; diff --git a/addons/storyshots/src/test-bodies.js b/addons/storyshots/src/test-bodies.js index 67dca76dcfdc..48362bca93c1 100644 --- a/addons/storyshots/src/test-bodies.js +++ b/addons/storyshots/src/test-bodies.js @@ -1,4 +1,5 @@ import renderer from 'react-test-renderer'; +import shallow from 'react-test-renderer/shallow'; export const snapshotWithOptions = options => ({ story, context }) => { const storyElement = story.render(context); @@ -8,6 +9,12 @@ export const snapshotWithOptions = options => ({ story, context }) => { export const snapshot = snapshotWithOptions({}); +export function shallowSnapshot({ story, context }) { + const shallowRenderer = shallow.createRenderer(); + const result = shallowRenderer.render(story.render(context)); + expect(result).toMatchSnapshot(); +} + export function renderOnly({ story, context }) { const storyElement = story.render(context); renderer.create(storyElement); From 18bc011f6d198b7055f36c40d1d0d8bd6b9a23e0 Mon Sep 17 00:00:00 2001 From: Trevor Eyre Date: Fri, 9 Jun 2017 13:28:52 -0600 Subject: [PATCH 002/115] Fix code samples for decorators in Intro to Addons docs --- docs/pages/addons/introduction/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/pages/addons/introduction/index.md b/docs/pages/addons/introduction/index.md index 040a69c84aa4..72734c43efa8 100644 --- a/docs/pages/addons/introduction/index.md +++ b/docs/pages/addons/introduction/index.md @@ -56,9 +56,9 @@ import Button from './button'; const styles = { textAlign: 'center', }; -const CenterDecorator = ({ children }) => ( +const CenterDecorator = (storyFn) => (
- { children } + { storyFn() }
); @@ -85,9 +85,9 @@ import Welcome from './welcome'; const styles = { textAlign: 'center', }; -const CenterDecorator = ({ children }) => ( +const CenterDecorator = (storyFn) => (
- { children } + { storyFn() }
); addDecorator(CenterDecorator); From d39713519b08efd6baef89a902fbc5721ab32b56 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 10 Jun 2017 13:21:44 +1200 Subject: [PATCH 003/115] Fix manager-/preview-head.hTML bugs introduced in #1134 --- app/react/src/server/build.js | 13 +++++++++---- app/react/src/server/iframe.html.js | 4 +--- app/react/src/server/index.html.js | 4 +--- app/react/src/server/middleware.js | 4 ++-- app/react/src/server/utils.js | 2 +- app/react/src/server/utils.test.js | 8 ++++---- 6 files changed, 18 insertions(+), 17 deletions(-) mode change 100644 => 100755 app/react/src/server/build.js diff --git a/app/react/src/server/build.js b/app/react/src/server/build.js old mode 100644 new mode 100755 index 807bbf8ad215..01a4a7394041 --- a/app/react/src/server/build.js +++ b/app/react/src/server/build.js @@ -11,7 +11,7 @@ import getBaseConfig from './config/webpack.config.prod'; import loadConfig from './config'; import getIndexHtml from './index.html'; import getIframeHtml from './iframe.html'; -import { getHeadHtml, parseList, getEnvConfig } from './utils'; +import { getPreviewHeadHtml, getManagerHeadHtml, parseList, getEnvConfig } from './utils'; process.env.NODE_ENV = process.env.NODE_ENV || 'production'; @@ -87,9 +87,14 @@ webpack(config).run((err, stats) => { publicPath: config.output.publicPath, assets: stats.toJson().assetsByChunkName, }; - const headHtml = getHeadHtml(configDir); // Write both the storybook UI and IFRAME HTML files to destination path. - fs.writeFileSync(path.resolve(outputDir, 'index.html'), getIndexHtml(data)); - fs.writeFileSync(path.resolve(outputDir, 'iframe.html'), getIframeHtml({ ...data, headHtml })); + fs.writeFileSync( + path.resolve(outputDir, 'index.html'), + getIndexHtml({ ...data, headHtml: getManagerHeadHtml(configDir) }) + ); + fs.writeFileSync( + path.resolve(outputDir, 'iframe.html'), + getIframeHtml({ ...data, headHtml: getPreviewHeadHtml(configDir) }) + ); }); diff --git a/app/react/src/server/iframe.html.js b/app/react/src/server/iframe.html.js index 580b48b6dec7..95193273617c 100644 --- a/app/react/src/server/iframe.html.js +++ b/app/react/src/server/iframe.html.js @@ -38,9 +38,7 @@ const urlsFromAssets = assets => { return urls; }; -export default function(data) { - const { assets, headHtml, publicPath } = data; - +export default function({ assets, publicPath, headHtml }) { const urls = urlsFromAssets(assets); const cssTags = urls.css diff --git a/app/react/src/server/index.html.js b/app/react/src/server/index.html.js index 375f03acb84c..dc5b0afc42b8 100644 --- a/app/react/src/server/index.html.js +++ b/app/react/src/server/index.html.js @@ -27,9 +27,7 @@ const managerUrlsFromAssets = assets => { }; }; -export default function(data) { - const { assets, publicPath, headHtml } = data; - +export default function({ assets, publicPath, headHtml }) { const managerUrls = managerUrlsFromAssets(assets); return ` diff --git a/app/react/src/server/middleware.js b/app/react/src/server/middleware.js index aa61721ca00a..7ebeb18be477 100644 --- a/app/react/src/server/middleware.js +++ b/app/react/src/server/middleware.js @@ -6,7 +6,7 @@ import getBaseConfig from './config/webpack.config'; import loadConfig from './config'; import getIndexHtml from './index.html'; import getIframeHtml from './iframe.html'; -import { getHeadHtml, getManagerHeadHtml, getMiddleware } from './utils'; +import { getPreviewHeadHtml, getManagerHeadHtml, getMiddleware } from './utils'; let webpackResolve = () => {}; let webpackReject = () => {}; @@ -55,7 +55,7 @@ export default function(configDir) { }); router.get('/iframe.html', (req, res) => { - const headHtml = getHeadHtml(configDir); + const headHtml = getPreviewHeadHtml(configDir); res.send(getIframeHtml({ ...data, headHtml, publicPath })); }); diff --git a/app/react/src/server/utils.js b/app/react/src/server/utils.js index 70f20e268f49..8c740d6f4a30 100644 --- a/app/react/src/server/utils.js +++ b/app/react/src/server/utils.js @@ -11,7 +11,7 @@ export function parseList(str) { return str.split(','); } -export function getHeadHtml(configDirPath) { +export function getPreviewHeadHtml(configDirPath) { const headHtmlPath = path.resolve(configDirPath, 'preview-head.html'); const fallbackHtmlPath = path.resolve(configDirPath, 'head.html'); let headHtml = ''; diff --git a/app/react/src/server/utils.test.js b/app/react/src/server/utils.test.js index 52f0cfa1d26c..5b8a4cd28b80 100644 --- a/app/react/src/server/utils.test.js +++ b/app/react/src/server/utils.test.js @@ -1,9 +1,9 @@ import mock from 'mock-fs'; -import { getHeadHtml } from './utils'; +import { getPreviewHeadHtml } from './utils'; const HEAD_HTML_CONTENTS = ''; -describe('server.getHeadHtml', () => { +describe('server.getPreviewHeadHtml', () => { describe('when .storybook/head.html does not exist', () => { beforeEach(() => { mock({ @@ -16,7 +16,7 @@ describe('server.getHeadHtml', () => { }); it('return an empty string', () => { - const result = getHeadHtml('./config'); + const result = getPreviewHeadHtml('./config'); expect(result).toEqual(''); }); }); @@ -35,7 +35,7 @@ describe('server.getHeadHtml', () => { }); it('return the contents of the file', () => { - const result = getHeadHtml('./config'); + const result = getPreviewHeadHtml('./config'); expect(result).toEqual(HEAD_HTML_CONTENTS); }); }); From ba5dbf02a94202cb71b2ac21b531a7de9fff7cdb Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 10 Jun 2017 23:39:54 +1200 Subject: [PATCH 004/115] Changelog for 3.1.3 --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ff70762b234c..f6ac7ddb4abc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +# 3.1.3 + +2017-June-10 + +#### Bug Fixes + +- Fix `storybook-build` manager-head.html bug [#1248](https://github.com/storybooks/storybook/pull/1248) + # 3.1.2 Minor features including a new "events" addon, as well as the usual bugfixes, cleanup, etc. From b32cae6846068810f204785a926025754f3bcc3f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 10 Jun 2017 23:47:36 +1200 Subject: [PATCH 005/115] v3.1.3 --- addons/info/package.json | 2 +- app/react-native/package.json | 4 ++-- app/react/package.json | 4 ++-- lerna.json | 2 +- lib/ui/package.json | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/addons/info/package.json b/addons/info/package.json index 529ab3b7ae21..0aadfaaa2f99 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-info", - "version": "3.1.2", + "version": "3.1.3", "description": "A Storybook addon to show additional information for your stories.", "license": "MIT", "main": "dist/index.js", diff --git a/app/react-native/package.json b/app/react-native/package.json index d5ecd7a003fe..6d8e420eb25a 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native", - "version": "3.1.2", + "version": "3.1.3", "description": "A better way to develop React Native Components for your app", "keywords": [ "react", @@ -28,7 +28,7 @@ "@storybook/addon-links": "^3.1.2", "@storybook/addons": "^3.1.2", "@storybook/channel-websocket": "^3.1.2", - "@storybook/ui": "^3.1.2", + "@storybook/ui": "^3.1.3", "autoprefixer": "^7.0.1", "babel-core": "^6.24.1", "babel-loader": "^7.0.0", diff --git a/app/react/package.json b/app/react/package.json index 7068c4379d39..595d02d57263 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "3.1.2", + "version": "3.1.3", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybooks/storybook/tree/master/apps/react", "bugs": { @@ -26,7 +26,7 @@ "@storybook/addon-links": "^3.1.2", "@storybook/addons": "^3.1.2", "@storybook/channel-postmessage": "^3.1.2", - "@storybook/ui": "^3.1.2", + "@storybook/ui": "^3.1.3", "airbnb-js-shims": "^1.1.1", "autoprefixer": "^7.1.1", "babel-core": "^6.24.1", diff --git a/lerna.json b/lerna.json index b0c64aaf8bab..b7844d88287d 100644 --- a/lerna.json +++ b/lerna.json @@ -22,5 +22,5 @@ "examples/*" ], "concurrency": 1, - "version": "3.1.2" + "version": "3.1.3" } diff --git a/lib/ui/package.json b/lib/ui/package.json index 780302d05d67..4b8647250965 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ui", - "version": "3.1.2", + "version": "3.1.3", "description": "Core Storybook UI", "license": "MIT", "main": "dist/index.js", From 507e8cbf728e9924bfceac0dcb4a29b9da841566 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sat, 10 Jun 2017 20:07:40 +0200 Subject: [PATCH 006/115] IMPROVE design of addon-events --- addons/events/src/components/Event.js | 101 ++++++++++++++++---------- addons/events/src/components/Panel.js | 3 +- 2 files changed, 64 insertions(+), 40 deletions(-) diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.js index 35c93f3d607c..9e38218d5e24 100644 --- a/addons/events/src/components/Event.js +++ b/addons/events/src/components/Event.js @@ -4,37 +4,64 @@ import Textarea from 'react-textarea-autosize'; import PropTypes from 'prop-types'; const styles = { - item: { - padding: '10 0', - }, - buttonWrapper: { - textAlign: 'center', + label: { + display: 'table-cell', + boxSizing: 'border-box', + verticalAlign: 'top', + paddingRight: '5px', + paddingTop: '7px', + textAlign: 'right', + width: '100px', + fontSize: '12px', + color: 'rgb(68, 68, 68)', + fontWeight: '600', }, button: { - display: 'inline-block', - fontFamily: ` - -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", - "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif - `, - fontSize: 14, - padding: 10, - margin: 10, - width: '40%', + display: 'table-cell', + textTransform: 'uppercase', + letterSpacing: '3.5px', + fontSize: 12, + fontWeight: 'bolder', + color: 'rgb(130, 130, 130)', + border: '1px solid rgb(193, 193, 193)', + textAlign: 'center', + borderRadius: 2, + padding: 5, + cursor: 'pointer', + paddingLeft: 8, + margin: '0 0 0 5px', + backgroundColor: 'inherit', + verticalAlign: 'top', + outline: 0, }, textArea: { - display: 'block', + flex: '1 0 0', boxSizing: 'border-box', - margin: 0, - width: '100%', - maxWidth: '100%', - verticalAlign: 'middle', + margin: '0 0 0 5px', + verticalAlign: 'top', outline: 'none', border: '1px solid #c7c7c7', borderRadius: 2, fontSize: 13, - padding: '5px', + padding: '8px 5px 7px 8px', color: 'rgb(51, 51, 51)', fontFamily: 'Arial, sans-serif', + minHeight: '32px', + resize: 'vertical', + }, + item: { + display: 'flex', + padding: '5px', + alignItems: 'flex-start', + boxSizing: 'border-box', + width: '100%', + }, + hidden: { + display: 'none', + }, + failed: { + border: '1px solid #fadddd', + backgroundColor: '#fff5f5', }, }; @@ -100,37 +127,33 @@ export default class Item extends Component { }; render() { + const { title, name } = this.props; const { failed, isTextAreaShowed } = this.state; - const extraStyle = { - display: isTextAreaShowed ? 'block' : 'none', - }; - if (failed) { - extraStyle.border = '1px solid #fadddd'; - extraStyle.backgroundColor = '#fff5f5'; - } + const extraStyle = {}; + Object.assign(extraStyle, isTextAreaShowed ? {} : { ...styles.hidden }); + Object.assign(extraStyle, failed ? { ...styles.failed } : {}); return ( -
-

{this.props.title}

-
- - -
- +
+ +