Merge pull request #3964 from storybooks/tech/updates3

Upgrade even more dependencies

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   plugins: ['prettier', 'jest', 'import', 'react', 'jsx-a11y', 'json'],
   parser: 'babel-eslint',
   parserOptions: {
+    ecmaVersion: 8,
     sourceType: 'module',
   },
   env: {

addons/a11y/src/components/Panel.js

@@ -35,21 +35,27 @@ class Panel extends Component {
   };
 
   componentDidMount() {
-    this.props.channel.on(CHECK_EVENT_ID, this.onUpdate);
-    this.props.channel.on(STORY_RENDERED, this.requestCheck);
-    this.props.channel.on(RERUN_EVENT_ID, this.requestCheck);
+    const { channel } = this.props;
+
+    channel.on(CHECK_EVENT_ID, this.onUpdate);
+    channel.on(STORY_RENDERED, this.requestCheck);
+    channel.on(RERUN_EVENT_ID, this.requestCheck);
   }
 
   componentDidUpdate(prevProps) {
-    if (!prevProps.active && this.props.active) {
+    const { active } = this.props;
+
+    if (!prevProps.active && active) {
       this.requestCheck();
     }
   }
 
   componentWillUnmount() {
-    this.props.channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
-    this.props.channel.removeListener(STORY_RENDERED, this.requestCheck);
-    this.props.channel.removeListener(RERUN_EVENT_ID, this.requestCheck);
+    const { channel } = this.props;
+
+    channel.removeListener(CHECK_EVENT_ID, this.onUpdate);
+    channel.removeListener(STORY_RENDERED, this.requestCheck);
+    channel.removeListener(RERUN_EVENT_ID, this.requestCheck);
   }
 
   onUpdate = ({ passes, violations }) => {
@@ -60,8 +66,10 @@ class Panel extends Component {
   };
 
   requestCheck = () => {
-    if (this.props.active) {
-      this.props.channel.emit(REQUEST_CHECK_EVENT_ID);
+    const { channel, active } = this.props;
+
+    if (active) {
+      channel.emit(REQUEST_CHECK_EVENT_ID);
     }
   };
 

addons/a11y/src/components/Report/Elements.js

@@ -40,7 +40,9 @@ Element.propTypes = {
 /* eslint-disable react/no-array-index-key */
 const Elements = ({ elements, passes }) => (
   <ol>
-    {elements.map((element, index) => <Element passes={passes} element={element} key={index} />)}
+    {elements.map((element, index) => (
+      <Element passes={passes} element={element} key={index} />
+    ))}
   </ol>
 );
 

addons/a11y/src/components/Report/Rules.js

@@ -61,7 +61,11 @@ Rule.propTypes = {
 /* eslint-disable react/no-array-index-key */
 function Rules({ rules, passes }) {
   return (
-    <List>{rules.map((rule, index) => <Rule passes={passes} rule={rule} key={index} />)}</List>
+    <List>
+      {rules.map((rule, index) => (
+        <Rule passes={passes} rule={rule} key={index} />
+      ))}
+    </List>
   );
 }
 Rules.propTypes = {

addons/a11y/src/components/Report/Tags.js

@@ -17,7 +17,13 @@ const Item = styled('div')(({ theme }) => ({
 }));
 
 function Tags({ tags }) {
-  return <Wrapper>{tags.map(tag => <Item key={tag}>{tag}</Item>)}</Wrapper>;
+  return (
+    <Wrapper>
+      {tags.map(tag => (
+        <Item key={tag}>{tag}</Item>
+      ))}
+    </Wrapper>
+  );
 }
 Tags.propTypes = {
   tags: PropTypes.arrayOf(PropTypes.node).isRequired,

addons/actions/src/constants.js

@@ -0,0 +1,4 @@
+export const ADDON_ID = 'storybook/actions';
+export const PANEL_ID = `${ADDON_ID}/actions-panel`;
+export const EVENT_ID = `${ADDON_ID}/action-event`;
+export const CYCLIC_KEY = '$___storybook.isCyclic';

addons/actions/src/containers/ActionLogger/index.js

@@ -6,8 +6,8 @@ import deepEqual from 'deep-equal';
 import { CYCLIC_KEY, retrocycle } from '../../lib';
 import { isObject } from '../../lib/util';
 
-import ActionLoggerComponent from '../../components/ActionLogger/';
-import { EVENT_ID } from '../../';
+import ActionLoggerComponent from '../../components/ActionLogger';
+import { EVENT_ID } from '../..';
 
 export default class ActionLogger extends React.Component {
   constructor(props, ...args) {
@@ -18,12 +18,16 @@ export default class ActionLogger extends React.Component {
   }
 
   componentDidMount() {
-    this.props.channel.on(EVENT_ID, this._actionListener);
-    this.stopListeningOnStory = this.props.api.onStory(this._storyChangeListener);
+    const { channel, api } = this.props;
+
+    channel.on(EVENT_ID, this._actionListener);
+    this.stopListeningOnStory = api.onStory(this._storyChangeListener);
   }
 
   componentWillUnmount() {
-    this.props.channel.removeListener(EVENT_ID, this._actionListener);
+    const { channel } = this.props;
+
+    channel.removeListener(EVENT_ID, this._actionListener);
     if (this.stopListeningOnStory) {
       this.stopListeningOnStory();
     }
@@ -37,9 +41,11 @@ export default class ActionLogger extends React.Component {
   }
 
   addAction(action) {
+    let { actions = [] } = this.state;
+    actions = [...actions];
+
     action.data.args = action.data.args.map(arg => retrocycle(arg)); // eslint-disable-line
     const isCyclic = !!action.data.args.find(arg => isObject(arg) && arg[CYCLIC_KEY]);
-    const actions = [...this.state.actions];
     const previous = actions.length && actions[0];
 
     if (previous && !isCyclic && deepEqual(previous.data, action.data, { strict: true })) {
@@ -56,9 +62,10 @@ export default class ActionLogger extends React.Component {
   }
 
   render() {
+    const { actions = [] } = this.state;
     const { active } = this.props;
     const props = {
-      actions: this.state.actions,
+      actions,
       onClear: () => this.clearActions(),
     };
     return active ? <ActionLoggerComponent {...props} /> : null;

addons/actions/src/index.js

@@ -8,8 +8,16 @@ import {
 } from './preview';
 
 // addons, panels and events get unique names using a prefix
-export const ADDON_ID = 'storybook/actions';
-export const PANEL_ID = `${ADDON_ID}/actions-panel`;
-export const EVENT_ID = `${ADDON_ID}/action-event`;
+import { ADDON_ID, PANEL_ID, EVENT_ID } from './constants';
 
-export { action, actions, decorate, configureActions, decorateAction, withActions };
+export {
+  action,
+  actions,
+  decorate,
+  configureActions,
+  decorateAction,
+  withActions,
+  ADDON_ID,
+  PANEL_ID,
+  EVENT_ID,
+};

addons/actions/src/lib/decycle.js

@@ -2,7 +2,7 @@ import { DecycleError } from './errors';
 
 import { getPropertiesList, typeReplacer, omitProperty } from './util';
 
-import { CYCLIC_KEY } from './';
+import { CYCLIC_KEY } from '../constants';
 
 import { objectType } from './types';
 

addons/actions/src/lib/retrocycle.js

@@ -1,6 +1,6 @@
 import reviver from './reviver';
 import { muteProperty } from './util';
-import { CYCLIC_KEY } from './';
+import { CYCLIC_KEY } from '../constants';
 
 // eslint-disable-next-line no-control-regex
 const pathReg = /^\$(?:\[(?:\d+|"(?:[^\\"\u0000-\u001f]|\\([\\"/bfnrt]|u[0-9a-zA-Z]{4}))*")])*$/;

addons/actions/src/lib/types/date/__tests__/index.js

@@ -1,4 +1,4 @@
-import dateType from '../';
+import dateType from '..';
 
 const date = new Date(1512137134873);
 const isoString = date.toISOString();

addons/actions/src/lib/types/function/__tests__/index.js

@@ -1,4 +1,4 @@
-import functionType from '../';
+import functionType from '..';
 import reservedKeywords from '../reservedKeywords';
 import createFunction from '../createFunction';
 import createBoundFunction from '../createBoundFunction';

addons/actions/src/lib/types/infinity/__tests__/index.js

@@ -1,4 +1,4 @@
-import infinityType from '../';
+import infinityType from '..';
 
 describe('Infinity', () => {
   it('Recognizes Infinity', () => {

addons/actions/src/lib/types/nan/__tests__/index.js

@@ -1,4 +1,4 @@
-import nanType from '../';
+import nanType from '..';
 
 describe('NaN', () => {
   it('Recognizes NaN', () => {

addons/actions/src/lib/types/object/__tests__/index.js

@@ -1,4 +1,4 @@
-import objectType from '../';
+import objectType from '..';
 import { DEPTH_KEY } from '../configureDepth';
 
 describe('Object', () => {

addons/actions/src/lib/types/regexp/__tests__/index.js

@@ -1,4 +1,4 @@
-import regExpType from '../';
+import regExpType from '..';
 
 const regExp = /aRegExp/g;
 

addons/actions/src/lib/types/symbol/__tests__/index.js

@@ -1,4 +1,4 @@
-import symbolType from '../';
+import symbolType from '..';
 
 const symbol = Symbol('S');
 

addons/actions/src/lib/types/undefined/__tests__/index.js

@@ -1,4 +1,4 @@
-import undefinedType from '../';
+import undefinedType from '..';
 
 describe('undefined', () => {
   it('Recognizes undefined', () => {

addons/actions/src/manager.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import addons from '@storybook/addons';
 import ActionLogger from './containers/ActionLogger';
-import { ADDON_ID, PANEL_ID } from './';
+import { ADDON_ID, PANEL_ID } from '.';
 
 export function register() {
   addons.register(ADDON_ID, api => {

addons/actions/src/preview/__tests__/action.test.js

@@ -1,5 +1,5 @@
 import addons from '@storybook/addons';
-import { action, configureActions } from '../../';
+import { action, configureActions } from '../..';
 
 jest.mock('@storybook/addons');
 

addons/actions/src/preview/__tests__/configureActions.test.js

@@ -1,5 +1,5 @@
 import { config } from '../configureActions';
-import { configureActions } from '../../';
+import { configureActions } from '../..';
 
 describe('Configure Actions', () => {
   it('can configure actions', () => {

addons/actions/src/preview/__tests__/preview.test.js

@@ -1,6 +1,6 @@
 import addons from '@storybook/addons';
 import uuid from 'uuid/v1';
-import { action } from '../';
+import { action } from '..';
 import { undefinedType, symbolType } from '../../lib/types';
 
 jest.mock('uuid/v1');

addons/actions/src/preview/action.js

@@ -1,6 +1,6 @@
 import uuid from 'uuid/v1';
 import addons from '@storybook/addons';
-import { EVENT_ID } from '../';
+import { EVENT_ID } from '../constants';
 import { canConfigureName, prepareArguments } from '../lib/util';
 import { config } from './configureActions';
 

addons/backgrounds/src/BackgroundPanel.js

@@ -1,11 +1,10 @@
 import { document } from 'global';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import addons from '@storybook/addons';
 
 import styled from 'react-emotion';
 
-import Events from './events';
+import Events from './constants';
 import Swatch from './Swatch';
 
 const Wrapper = styled('div')({
@@ -76,19 +75,11 @@ export default class BackgroundPanel extends Component {
   constructor(props) {
     super(props);
 
-    const { channel } = props;
-
-    // A channel is explicitly passed in for testing
-    if (channel) {
-      this.channel = channel;
-    } else {
-      this.channel = addons.getChannel();
-    }
-
     this.state = { backgrounds: [] };
   }
 
   componentDidMount() {
+    const { api, channel } = this.props;
     this.iframe = document.getElementById(storybookIframe);
 
     if (!this.iframe) {
@@ -99,29 +90,33 @@ export default class BackgroundPanel extends Component {
       this.iframe.style[prop] = style.iframe[prop];
     });
 
-    const { api } = this.props;
+    channel.on(Events.SET, data => {
+      const backgrounds = [...data];
 
-    this.channel.on(Events.SET, backgrounds => {
       this.setState({ backgrounds });
-      const currentBackground = api.getQueryParam('background');
+      const current = api.getQueryParam('background');
+      const defaultOrFirst = backgrounds.find(x => x.default) || backgrounds[0];
 
-      if (currentBackground && backgrounds.some(bg => bg.value === currentBackground)) {
-        this.updateIframe(currentBackground);
-      } else if (backgrounds.filter(x => x.default).length) {
-        const defaultBgs = backgrounds.filter(x => x.default);
-        this.updateIframe(defaultBgs[0].value);
+      // debugger;
+
+      if (current && backgrounds.find(bg => bg.value === current)) {
+        this.updateIframe(current);
+      } else if (defaultOrFirst) {
+        this.updateIframe(defaultOrFirst.value);
+        api.setQueryParams({ background: defaultOrFirst.value });
       }
     });
 
-    this.channel.on(Events.UNSET, () => {
+    channel.on(Events.UNSET, () => {
       this.setState({ backgrounds: [] });
       this.updateIframe('none');
     });
   }
 
   setBackgroundFromSwatch = background => {
+    const { api } = this.props;
     this.updateIframe(background);
-    this.props.api.setQueryParams({ background });
+    api.setQueryParams({ background });
   };
 
   updateIframe(background) {
@@ -130,7 +125,8 @@ export default class BackgroundPanel extends Component {
 
   render() {
     const { active } = this.props;
-    const backgrounds = [...this.state.backgrounds];
+    const { backgrounds = [] } = this.state;
+
     if (!active) {
       return null;
     }

addons/backgrounds/src/__tests__/BackgroundPanel.js

@@ -3,10 +3,10 @@ import { shallow, mount } from 'enzyme';
 import EventEmitter from 'events';
 
 import BackgroundPanel from '../BackgroundPanel';
-import Events from '../events';
+import Events from '../constants';
 
 const backgrounds = [
-  { name: 'black', value: '#000000' },
+  { name: 'black', value: '#000000', default: true },
   { name: 'secondary', value: 'rgb(123,123,123)' },
   { name: 'tertiary', value: 'rgba(123,123,123,.5)' },
   { name: 'An image', value: 'url(http://placehold.it/350x150)' },

addons/backgrounds/src/constants.js

@@ -0,0 +1,7 @@
+export const ADDON_ID = 'storybook-addon-background';
+export const PANEL_ID = `${ADDON_ID}/background-panel`;
+
+export default {
+  SET: `${ADDON_ID}:set`,
+  UNSET: `${ADDON_ID}:unset`,
+};