diff --git a/.eslintrc.js b/.eslintrc.js index 8b8bfc5f697..8eb7119e378 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -74,7 +74,7 @@ module.exports = { 'jsx-a11y/accessible-emoji': ignore, 'jsx-a11y/href-no-hash': ignore, 'jsx-a11y/label-has-for': ignore, - 'jsx-a11y/click-events-have-key-events': warn, + 'jsx-a11y/click-events-have-key-events': error, 'jsx-a11y/anchor-is-valid': [warn, { aspects: ['invalidHref'] }], 'react/no-unescaped-entities': ignore, }, diff --git a/CHANGELOG.md b/CHANGELOG.md index d7c7474ff9b..56c908eb2ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -143,6 +143,47 @@ - Update eslint-plugin-jest to the latest version 🚀 [#1795](https://github.com/storybooks/storybook/pull/1795) - Update lerna to the latest version 🚀 [#1768](https://github.com/storybooks/storybook/pull/1768) +# 3.2.15 + +2017-November-10 + +#### Features + +- Optimizing for iphone x [#2260](https://github.com/storybooks/storybook/pull/2260) +- Fix accessibility warnings [#2270](https://github.com/storybooks/storybook/pull/2270) + +#### Bug Fixes + +- Fix propTypes in addon-background [#2279](https://github.com/storybooks/storybook/pull/2279) +- Addon-info: allow duplicate displayNames [#2269](https://github.com/storybooks/storybook/pull/2269) +- Fix browser navigation [#2261](https://github.com/storybooks/storybook/pull/2261) + +#### Maintenance + +- Fixes to build scripts for Windows. [#2051](https://github.com/storybooks/storybook/pull/2051) +- Update dependencies.yml to include batch updates for docs dependencies [#2252](https://github.com/storybooks/storybook/pull/2252) + +#### Dependency Upgrades + +
+ +11 PRs + + +- Update 4 dependencies from npm [#2267](https://github.com/storybooks/storybook/pull/2267) +- Update 8 dependencies from npm [#2262](https://github.com/storybooks/storybook/pull/2262) +- Update 3 dependencies from npm [#2257](https://github.com/storybooks/storybook/pull/2257) +- Update babel-eslint in / from 8.0.1 to 8.0.2 [#2253](https://github.com/storybooks/storybook/pull/2253) +- 3 packages updated by dependencies.io [#2251](https://github.com/storybooks/storybook/pull/2251) +- Update devDependencies [#2232](https://github.com/storybooks/storybook/pull/2232) +- Update react-textarea-autosize to 5.1.0 [#2233](https://github.com/storybooks/storybook/pull/2233) +- Update insert-css to 2.0.0 [#2234](https://github.com/storybooks/storybook/pull/2234) +- Update file-loader to 1.1.5 [#2236](https://github.com/storybooks/storybook/pull/2236) +- Update read-pkg-up to 3.0.0 [#2237](https://github.com/storybooks/storybook/pull/2237) +- Update react-modal to 3.1.0 [#2238](https://github.com/storybooks/storybook/pull/2238) + +
+ # 3.2.14 2017-November-01 diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 00000000000..cfc1b23f81f --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,46 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at ndelangen@me.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] + +[homepage]: http://contributor-covenant.org +[version]: http://contributor-covenant.org/version/1/4/ diff --git a/addons/actions/package.json b/addons/actions/package.json index 0bdb06016ee..27df7781965 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -28,9 +28,9 @@ "uuid": "^3.1.0" }, "devDependencies": { - "react": "^16.0.0", - "react-dom": "^16.0.0", - "react-test-renderer": "^16.0.0", + "react": "^16.1.0", + "react-dom": "^16.1.0", + "react-test-renderer": "^16.1.0", "shelljs": "^0.7.8" }, "peerDependencies": { diff --git a/addons/background/src/BackgroundPanel.js b/addons/background/src/BackgroundPanel.js index 66564a99cc3..c5c8984215b 100644 --- a/addons/background/src/BackgroundPanel.js +++ b/addons/background/src/BackgroundPanel.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import addons from '@storybook/addons'; -import EventEmitter from 'events'; import Swatch from './Swatch'; @@ -118,7 +117,11 @@ BackgroundPanel.propTypes = { getQueryParam: PropTypes.func, setQueryParams: PropTypes.func, }).isRequired, - channel: PropTypes.instanceOf(EventEmitter), + channel: PropTypes.shape({ + emit: PropTypes.func, + on: PropTypes.func, + removeListener: PropTypes.func, + }), }; BackgroundPanel.defaultProps = { channel: undefined, diff --git a/addons/background/src/__tests__/BackgroundPanel.js b/addons/background/src/__tests__/BackgroundPanel.js index 1b05ef8212d..dd37d25380c 100644 --- a/addons/background/src/__tests__/BackgroundPanel.js +++ b/addons/background/src/__tests__/BackgroundPanel.js @@ -27,7 +27,7 @@ describe('Background Panel', () => { it('should have a default background value of transparent', () => { const backgroundPanel = shallow(); - expect(backgroundPanel.state().backgrounds.length).toBe(0); + expect(backgroundPanel.state().backgrounds).toHaveLength(0); }); it('should show setup instructions if no colors provided', () => { @@ -72,7 +72,7 @@ describe('Background Panel', () => { // check to make sure the default bg was added const headings = backgroundPanel.find('h4'); - expect(headings.length).toBe(8); + expect(headings).toHaveLength(8); }); it('should allow the default swatch become the background color', () => { @@ -90,7 +90,7 @@ describe('Background Panel', () => { // check to make sure the default bg was added const headings = backgroundPanel.find('h4'); - expect(headings.length).toBe(8); + expect(headings).toHaveLength(8); }); it('should unset all swatches on receiving the background-unset message', () => { diff --git a/addons/background/src/__tests__/Swatch.js b/addons/background/src/__tests__/Swatch.js index 4d2956c5318..c446b7ecfe1 100644 --- a/addons/background/src/__tests__/Swatch.js +++ b/addons/background/src/__tests__/Swatch.js @@ -17,7 +17,7 @@ describe('Swatch', () => { ).html(); - expect(markup.match(/foo/gim).length).toBe(1); + expect(markup.match(/foo/gim)).toHaveLength(1); }); it('should render the value of the swatch and set it to be the background', () => { @@ -25,8 +25,8 @@ describe('Swatch', () => { ).html(); - expect(markup.match(/background:bar/gim).length).toBe(1); - expect(markup.match(/bar/gim).length).toBe(2); + expect(markup.match(/background:bar/gim)).toHaveLength(1); + expect(markup.match(/bar/gim)).toHaveLength(2); }); it('should emit message on click', () => { diff --git a/addons/background/src/__tests__/index.js b/addons/background/src/__tests__/index.js index 2e940df3fb2..d097228959c 100644 --- a/addons/background/src/__tests__/index.js +++ b/addons/background/src/__tests__/index.js @@ -31,7 +31,7 @@ describe('Background Decorator', () => { ); - expect(backgroundDecorator.html().match(/background:transparent/gim).length).toBe(1); + expect(backgroundDecorator.html().match(/background:transparent/gim)).toHaveLength(1); }); it('should set internal state when background event called', () => { @@ -87,6 +87,6 @@ describe('Background Decorator', () => { ); backgroundDecorator.setProps({ randomProp: true }); - expect(story.mock.calls.length).toBe(1); + expect(story.mock.calls).toHaveLength(1); }); }); diff --git a/addons/background/src/index.js b/addons/background/src/index.js index b21ec5d26c2..ac0c1a65f59 100644 --- a/addons/background/src/index.js +++ b/addons/background/src/index.js @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import EventEmitter from 'events'; import addons from '@storybook/addons'; @@ -63,7 +62,11 @@ export class BackgroundDecorator extends React.Component { } BackgroundDecorator.propTypes = { backgrounds: PropTypes.arrayOf(PropTypes.object), - channel: PropTypes.instanceOf(EventEmitter), + channel: PropTypes.shape({ + emit: PropTypes.func, + on: PropTypes.func, + removeListener: PropTypes.func, + }), story: PropTypes.func.isRequired, }; BackgroundDecorator.defaultProps = { diff --git a/addons/events/package.json b/addons/events/package.json index cf79f5fea4e..b73c1fabe03 100644 --- a/addons/events/package.json +++ b/addons/events/package.json @@ -24,12 +24,12 @@ "babel-runtime": "^6.26.0", "format-json": "^1.0.3", "prop-types": "^15.6.0", - "react-textarea-autosize": "^5.1.0", + "react-textarea-autosize": "^5.2.0", "uuid": "^3.1.0" }, "devDependencies": { - "react": "^16.0.0", - "react-dom": "^16.0.0" + "react": "^16.1.0", + "react-dom": "^16.1.0" }, "peerDependencies": { "react": "*" diff --git a/addons/graphql/package.json b/addons/graphql/package.json index af424f2983d..2ec41eabbe0 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -27,8 +27,8 @@ "prop-types": "^15.6.0" }, "devDependencies": { - "react": "^16.0.0", - "react-dom": "^16.0.0", + "react": "^16.1.0", + "react-dom": "^16.1.0", "shelljs": "^0.7.8" }, "peerDependencies": { diff --git a/addons/info/package.json b/addons/info/package.json index f5329d68336..d349a5dbfa6 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -24,9 +24,9 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "react": "^16.0.0", - "react-dom": "^16.0.0", - "react-test-renderer": "^16.0.0" + "react": "^16.1.0", + "react-dom": "^16.1.0", + "react-test-renderer": "^16.1.0" }, "peerDependencies": { "react": "*" diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index b0a2863075b..bda0263d4bd 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -14,14 +14,16 @@ import { Pre } from './markdown'; global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || []; const { STORYBOOK_REACT_CLASSES } = global; +const getName = type => type.displayName || type.name; + const stylesheet = { - link: { + button: { base: { fontFamily: 'sans-serif', fontSize: '12px', display: 'block', position: 'fixed', - textDecoration: 'none', + border: 'none', background: '#28c', color: '#fff', padding: '5px 15px', @@ -149,9 +151,9 @@ export default class Story extends React.Component { } _renderOverlay() { - const linkStyle = { - ...stylesheet.link.base, - ...stylesheet.link.topRight, + const buttonStyle = { + ...stylesheet.button.base, + ...stylesheet.button.topRight, }; const infoStyle = Object.assign({}, stylesheet.info); @@ -172,13 +174,13 @@ export default class Story extends React.Component { return (
{this.props.children}
- +
- +
{this._getInfoHeader()} @@ -324,14 +326,13 @@ export default class Story extends React.Component { extract(this.props.children); const array = Array.from(types.keys()); - array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name)); + array.sort((a, b) => getName(a) > getName(b)); const { maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = this.props; - const propTables = array.map(type => ( -
-

- "{type.displayName || type.name}" Component -

+ const propTables = array.map((type, i) => ( + // eslint-disable-next-line react/no-array-index-key +
+

"{getName(type)}" Component

-
+ {conditionalRender( displayColorPicker, () => ( diff --git a/addons/knobs/src/react/index.test.js b/addons/knobs/src/react/index.test.js index d6f560ada1c..75b1a08e47f 100644 --- a/addons/knobs/src/react/index.test.js +++ b/addons/knobs/src/react/index.test.js @@ -17,7 +17,7 @@ describe('React Handler', () => { const wrappedStory = reactHandler(testChannel, testStore)(testStory)(testContext); const wrapper = shallow(wrappedStory); - expect(wrapper.find('#test-story').length).toBe(1); + expect(wrapper.find('#test-story')).toHaveLength(1); const storyWrapperProps = wrappedStory.props; expect(storyWrapperProps.channel).toEqual(testChannel); diff --git a/addons/links/package.json b/addons/links/package.json index c7b12d13306..0de1779e37d 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -28,8 +28,8 @@ }, "devDependencies": { "enzyme": "^3.0.0", - "react": "^16.0.0", - "react-dom": "^16.0.0", + "react": "^16.1.0", + "react-dom": "^16.1.0", "shelljs": "^0.7.8" }, "peerDependencies": { diff --git a/addons/notes/package.json b/addons/notes/package.json index a001192d195..e541ee52d4d 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -25,9 +25,9 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "react": "^16.0.0", + "react": "^16.1.0", "react-addons-test-utils": "^15.5.1", - "react-dom": "^16.0.0" + "react-dom": "^16.1.0" }, "peerDependencies": { "react": "*" diff --git a/addons/options/package.json b/addons/options/package.json index 5d3aecde13d..66fdf157534 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -23,9 +23,9 @@ "@storybook/addons": "^3.3.0-alpha.3" }, "devDependencies": { - "react": "^16.0.0", - "react-dom": "^16.0.0", - "react-test-renderer": "^16.0.0", + "react": "^16.1.0", + "react-dom": "^16.1.0", + "react-test-renderer": "^16.1.0", "shelljs": "^0.7.8" }, "peerDependencies": { diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json index fae0bab03cd..3100ab4174f 100644 --- a/addons/storyshots/package.json +++ b/addons/storyshots/package.json @@ -33,8 +33,8 @@ "babel-preset-react": "^6.24.1", "jest": "^20.0.4", "jest-cli": "^20.0.4", - "react": "^16.0.0", - "react-dom": "^16.0.0" + "react": "^16.1.0", + "react-dom": "^16.1.0" }, "peerDependencies": { "@storybook/addons": "^3.3.0-alpha.3", diff --git a/app/react-native/package.json b/app/react-native/package.json index 13e0e7f180e..3240d917b25 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -59,6 +59,7 @@ "postcss-loader": "^2.0.8", "prop-types": "^15.6.0", "react-native-compat": "^1.0.0", + "react-native-iphone-x-helper": "^1.0.1", "shelljs": "^0.7.8", "style-loader": "^0.18.2", "url-loader": "^0.6.2", @@ -68,13 +69,13 @@ "webpack": "^3.8.1", "webpack-dev-middleware": "^1.12.0", "webpack-hot-middleware": "^2.20.0", - "ws": "^3.3.0" + "ws": "^3.3.1" }, "devDependencies": { "babel-cli": "^6.26.0", - "react": "^16.0.0", - "react-dom": "^16.0.0", - "react-native": "^0.50.1" + "react": "^16.1.0", + "react-dom": "^16.1.0", + "react-native": "^0.50.3" }, "peerDependencies": { "react": "*", diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js index 516a41a0526..9e4f423dd56 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/index.js +++ b/app/react-native/src/preview/components/OnDeviceUI/index.js @@ -1,8 +1,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { ifIphoneX } from 'react-native-iphone-x-helper'; import { Animated, + Dimensions, Easing, View, TouchableWithoutFeedback, @@ -14,6 +16,14 @@ import style from './style'; import StoryListView from '../StoryListView'; import StoryView from '../StoryView'; +/** + * Returns true if the screen is in portrait mode + */ +const isDeviceInPortrait = () => { + const dim = Dimensions.get('screen'); + return dim.height >= dim.width; +}; + const openMenuImage = require('./menu_open.png'); const closeMenuImage = require('./menu_close.png'); @@ -26,29 +36,41 @@ export default class OnDeviceUI extends Component { isMenuOpen: false, selectedKind: null, selectedStory: null, - menuWidth: 0, + menuWidth: Dimensions.get('screen').width / 2, + isPortrait: isDeviceInPortrait(), }; - - this.storyChangedHandler = this.handleStoryChanged.bind(this); - this.menuToggledHandler = this.handleToggleMenu.bind(this); - this.menuLayoutHandler = this.handleMenuLayout.bind(this); - - this.props.events.on('story', this.storyChangedHandler); } - componentWillUnmount() { - this.props.events.removeListener('story', this.storyChangedHandler); + componentWillMount = () => { + Dimensions.addEventListener('change', this.handleDeviceRotation); + this.props.events.on('story', this.handleStoryChange); + }; + + componentDidMount() { + StatusBar.setHidden(true); } - handleStoryChanged(storyFn, selection) { + componentWillUnmount = () => { + Dimensions.removeEventListener('change', this.handleDeviceRotation); + this.props.events.removeListener('story', this.handleStoryChange); + }; + + handleDeviceRotation = () => { + this.setState({ + isPortrait: isDeviceInPortrait(), + menuWidth: Dimensions.get('screen').width / 2, + }); + }; + + handleStoryChange = (storyFn, selection) => { const { kind, story } = selection; this.setState({ selectedKind: kind, selectedStory: story, }); - } + }; - handleToggleMenu() { + handleToggleMenu = () => { const isMenuOpen = !this.state.isMenuOpen; Animated.timing(this.state.menuAnimation, { @@ -60,17 +82,22 @@ export default class OnDeviceUI extends Component { this.setState({ isMenuOpen, }); - } - - handleMenuLayout(e) { - this.setState({ - menuWidth: e.nativeEvent.layout.width, - }); - } + }; render() { const { stories, events, url } = this.props; - const { menuAnimation, selectedKind, selectedStory, menuWidth } = this.state; + const { isPortrait, menuAnimation, selectedKind, selectedStory, menuWidth } = this.state; + + const iPhoneXStyles = ifIphoneX( + isPortrait + ? { + marginVertical: 30, + } + : { + marginHorizontal: 30, + }, + {} + ); const menuStyles = [ style.menuContainer, @@ -84,15 +111,7 @@ export default class OnDeviceUI extends Component { }, ], }, - ]; - - const menuSpacerStyles = [ - { - width: menuAnimation.interpolate({ - inputRange: [0, 1], - outputRange: [0, menuWidth], - }), - }, + iPhoneXStyles, ]; const headerStyles = [ @@ -105,6 +124,10 @@ export default class OnDeviceUI extends Component { }, ]; + const previewContainerStyles = [style.previewContainer, iPhoneXStyles]; + + const previewWrapperStyles = [style.previewWrapper, iPhoneXStyles]; + /* Checks if import is a base64 encoded string uri. If using haul as bundler, some projects are set up to include small files as base64 strings. @@ -120,12 +143,10 @@ export default class OnDeviceUI extends Component { return ( -
- Show Info - +
- × - +
@@ -405,6 +403,345 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
`; +exports[`Storyshots Addon Info.GitHub issues #1814 1`] = ` +
+
+
+ + ); + +storiesOf('Addon Info.GitHub issues', module).add( + '#1814', + withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => ( +
+ +