WIP

addons/a11y/src/components/Panel.js

@@ -19,7 +19,7 @@ const Violations = styled('span')(({ theme }) => ({
   color: theme.failColor,
 }));
 
-class Panel extends Component {
+class A11YPanel extends Component {
   static propTypes = {
     active: PropTypes.bool.isRequired,
     channel: PropTypes.shape({
@@ -99,4 +99,4 @@ class Panel extends Component {
   }
 }
 
-export default Panel;
+export default A11YPanel;

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

@@ -10,37 +10,33 @@ import ActionLoggerComponent from '../../components/ActionLogger';
 import { EVENT_ID } from '../..';
 
 export default class ActionLogger extends React.Component {
-  constructor(props, ...args) {
-    super(props, ...args);
-    this.state = { actions: [] };
-    this._actionListener = action => this.addAction(action);
-    this._storyChangeListener = () => this.handleStoryChange();
-  }
+  state = { actions: [] };
 
   componentDidMount() {
+    this.mounted = true;
     const { channel, api } = this.props;
 
     channel.on(EVENT_ID, this._actionListener);
-    this.stopListeningOnStory = api.onStory(this._storyChangeListener);
+    this.stopListeningOnStory = api.onStory(this.handleStoryChange);
   }
 
   componentWillUnmount() {
+    this.mounted = false;
     const { channel } = this.props;
 
-    channel.removeListener(EVENT_ID, this._actionListener);
-    if (this.stopListeningOnStory) {
-      this.stopListeningOnStory();
-    }
+    channel.removeListener(EVENT_ID, this.addAction);
+
+    this.stopListeningOnStory();
   }
 
-  handleStoryChange() {
+  handleStoryChange = () => {
     const { actions } = this.state;
     if (actions.length > 0 && actions[0].options.clearOnStoryChange) {
       this.clearActions();
     }
-  }
+  };
 
-  addAction(action) {
+  addAction = action => {
     let { actions = [] } = this.state;
     actions = [...actions];
 
@@ -55,18 +51,18 @@ export default class ActionLogger extends React.Component {
       actions.unshift(action);
     }
     this.setState({ actions: actions.slice(0, action.options.limit) });
-  }
+  };
 
-  clearActions() {
+  clearActions = () => {
     this.setState({ actions: [] });
-  }
+  };
 
   render() {
     const { actions = [] } = this.state;
     const { active } = this.props;
     const props = {
       actions,
-      onClear: () => this.clearActions(),
+      onClear: this.clearActions,
     };
     return active ? <ActionLoggerComponent {...props} /> : null;
   }

addons/backgrounds/src/BackgroundPanel.js

@@ -32,7 +32,7 @@ const Item = styled('div')({
   padding: 5,
 });
 
-const storybookIframe = 'storybook-preview-iframe';
+const storybookIframe = 'storybook-preview-background';
 const style = {
   iframe: {
     transition: 'background 0.25s ease-in-out',
@@ -83,7 +83,8 @@ export default class BackgroundPanel extends Component {
     this.iframe = document.getElementById(storybookIframe);
 
     if (!this.iframe) {
-      throw new Error('Cannot find Storybook iframe');
+      return;
+      // throw new Error('Cannot find Storybook iframe');
     }
 
     Object.keys(style.iframe).forEach(prop => {
@@ -97,8 +98,6 @@ export default class BackgroundPanel extends Component {
       const current = api.getQueryParam('background');
       const defaultOrFirst = backgrounds.find(x => x.default) || backgrounds[0];
 
-      // debugger;
-
       if (current && backgrounds.find(bg => bg.value === current)) {
         this.updateIframe(current);
       } else if (defaultOrFirst) {

addons/events/src/components/Panel.js

@@ -13,7 +13,7 @@ const Wrapper = styled('div')({
   minHeight: '100%',
 });
 
-export default class Events extends Component {
+export default class EventsPanel extends Component {
   static propTypes = {
     active: PropTypes.bool.isRequired,
     channel: PropTypes.shape({

addons/jest/src/components/Panel.js

@@ -96,10 +96,10 @@ const SuiteTitle = styled('div')({
 
 const Content = styled(({ tests, className }) => (
   <div className={className}>
-    {tests.map(({ name, result }) => {
-      if (!result) {
-        return <NoTests key={name}>This story has tests configured, but no file was found</NoTests>;
-      }
+    {tests.filter(({ result } = {}) => !!result).map(({ name, result }) => {
+      // if (!result) {
+      //   return <NoTests key={name}>This story has tests configured, but no file was found</NoTests>;
+      // }
 
       const successNumber = result.assertionResults.filter(({ status }) => status === 'passed')
         .length;
@@ -141,14 +141,14 @@ const Content = styled(({ tests, className }) => (
   flex: '1 1 0%',
 });
 
-const Panel = ({ tests }) =>
-  tests ? <Content tests={tests} /> : <NoTests>This story has no tests configures</NoTests>;
+const JestPanel = ({ tests }) =>
+  tests ? <Content tests={tests} /> : <NoTests>This story has no tests configured</NoTests>;
 
-Panel.defaultProps = {
+JestPanel.defaultProps = {
   tests: null,
 };
 
-Panel.propTypes = {
+JestPanel.propTypes = {
   tests: PropTypes.arrayOf(
     PropTypes.shape({
       result: PropTypes.object,
@@ -156,4 +156,4 @@ Panel.propTypes = {
   ),
 };
 
-export default provideJestResult(Panel);
+export default provideJestResult(JestPanel);

addons/jest/src/hoc/provideJestResult.js

@@ -15,27 +15,30 @@ const provideTests = Component =>
     };
 
     static defaultProps = {
-      active: true,
+      active: false,
     };
 
     state = {};
 
     componentDidMount() {
+      this.mounted = true;
       const { channel, api } = this.props;
 
       this.stopListeningOnStory = api.onStory(() => {
-        this.onAddTests({});
+        const { kind, storyName, tests } = this.state;
+        if (this.mounted && (kind || storyName || tests)) {
+          this.onAddTests({});
+        }
       });
 
       channel.on('storybook/tests/add_tests', this.onAddTests);
     }
 
     componentWillUnmount() {
+      this.mounted = false;
       const { channel } = this.props;
 
-      if (this.stopListeningOnStory) {
-        this.stopListeningOnStory();
-      }
+      this.stopListeningOnStory();
       channel.removeListener('storybook/tests/add_tests', this.onAddTests);
     }
 
@@ -45,7 +48,9 @@ const provideTests = Component =>
 
     render() {
       const { active } = this.props;
-      return active ? <Component {...this.state} /> : null;
+      const { tests } = this.state;
+
+      return active && tests ? <Component {...this.state} /> : null;
     }
   };
 

addons/jest/src/index.js

@@ -46,7 +46,7 @@ export const withTests = userOptions => {
     ] = args;
 
     if (testFiles && !testFiles.disable) {
-      emitAddTests({ kind, story, testFiles, options });
+      emitAddTests({ kind, story, testFiles: [].concat(testFiles), options });
     }
 
     return story();

addons/jest/src/register.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import addons from '@storybook/addons';
 
-import PanelTitle from './components/PanelTitle';
+// import PanelTitle from './components/PanelTitle';
 import Panel from './components/Panel';
 
 addons.register('storybook/tests', api => {
   const channel = addons.getChannel();
+
   addons.addPanel('storybook/tests/panel', {
-    title: <PanelTitle channel={addons.getChannel()} api={api} />,
+    title: 'tests',
+    // title: () => <PanelTitle channel={channel} api={api} />,
     // eslint-disable-next-line react/prop-types
     render: ({ active }) => <Panel channel={channel} api={api} active={active} />,
   });

addons/knobs/src/components/Panel.js

@@ -18,7 +18,7 @@ const PanelWrapper = styled('div')({
   width: '100%',
 });
 
-export default class Panel extends PureComponent {
+export default class KnobPanel extends PureComponent {
   constructor(props) {
     super(props);
     this.state = { knobs: {} };
@@ -29,17 +29,21 @@ export default class Panel extends PureComponent {
   }
 
   componentDidMount() {
+    this.mounted = true;
     const { channel, api } = this.props;
     channel.on('addon:knobs:setKnobs', this.setKnobs);
     channel.on('addon:knobs:setOptions', this.setOptions);
 
     this.stopListeningOnStory = api.onStory(() => {
-      this.setState({ knobs: {} });
+      if (this.mounted) {
+        this.setState({ knobs: {} });
+      }
       channel.emit('addon:knobs:reset');
     });
   }
 
   componentWillUnmount() {
+    this.mounted = false;
     const { channel } = this.props;
 
     channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
@@ -190,7 +194,7 @@ export default class Panel extends PureComponent {
   }
 }
 
-Panel.propTypes = {
+KnobPanel.propTypes = {
   active: PropTypes.bool.isRequired,
   onReset: PropTypes.object, // eslint-disable-line
   channel: PropTypes.shape({

addons/knobs/src/components/types/Array.js

@@ -27,8 +27,14 @@ class ArrayType extends React.Component {
 
   render() {
     const { knob } = this.props;
-
-    return <Textarea id={knob.name} value={knob.value} onChange={this.handleChange} size="flex" />;
+    return (
+      <Textarea
+        id={knob.name}
+        value={knob.value.join(',')}
+        onChange={this.handleChange}
+        size="flex"
+      />
+    );
   }
 }
 

addons/notes/src/index.js

@@ -3,6 +3,7 @@ import marked from 'marked';
 
 function renderMarkdown(text, options) {
   marked.setOptions({ ...marked.defaults, options });
+
   return marked(text);
 }
 
@@ -11,6 +12,7 @@ export const withNotes = makeDecorator({
   parameterName: 'notes',
   skipIfNoParametersOrOptions: true,
   allowDeprecatedUsage: true,
+
   wrapper: (getStory, context, { options, parameters }) => {
     const channel = addons.getChannel();
 

addons/notes/src/register.js

@@ -10,38 +10,36 @@ const Panel = styled('div')({
   width: '100%',
 });
 
-export class Notes extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = { text: '' };
-    this.onAddNotes = this.onAddNotes.bind(this);
-  }
+export class NotesPanel extends React.Component {
+  state = {
+    text: '',
+  };
 
   componentDidMount() {
+    this.mounted = true;
     const { channel, api } = this.props;
-    // Listen to the notes and render it.
-    channel.on('storybook/notes/add_notes', this.onAddNotes);
 
     // Clear the current notes on every story change.
     this.stopListeningOnStory = api.onStory(() => {
-      this.onAddNotes('');
+      const { text } = this.state;
+      if (this.mounted && text !== '') {
+        this.onAddNotes('');
+      }
     });
+    channel.on('storybook/notes/add_notes', this.onAddNotes);
   }
 
-  // This is some cleanup tasks when the Notes panel is unmounting.
   componentWillUnmount() {
-    if (this.stopListeningOnStory) {
-      this.stopListeningOnStory();
-    }
-
-    this.unmounted = true;
+    this.mounted = false;
     const { channel } = this.props;
+
+    this.stopListeningOnStory();
     channel.removeListener('storybook/notes/add_notes', this.onAddNotes);
   }
 
-  onAddNotes(text) {
+  onAddNotes = text => {
     this.setState({ text });
-  }
+  };
 
   render() {
     const { active } = this.props;
@@ -62,7 +60,7 @@ export class Notes extends React.Component {
   }
 }
 
-Notes.propTypes = {
+NotesPanel.propTypes = {
   active: PropTypes.bool.isRequired,
   channel: PropTypes.shape({
     on: PropTypes.func,
@@ -81,6 +79,6 @@ addons.register('storybook/notes', api => {
   addons.addPanel('storybook/notes/panel', {
     title: 'Notes',
     // eslint-disable-next-line react/prop-types
-    render: ({ active }) => <Notes channel={channel} api={api} active={active} />,
+    render: ({ active }) => <NotesPanel channel={channel} api={api} active={active} />,
   });
 });

addons/options/README.md

@@ -95,7 +95,7 @@ setOptions({
    * id to select an addon panel
    * @type {String}
    */
-  selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
+  selectedPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
   /**
    * enable/disable shortcuts
    * @type {Boolean}

addons/storysource/src/StoryPanel.js

@@ -62,18 +62,10 @@ export default class StoryPanel extends Component {
   state = { source: '// Here will be dragons 🐉' };
 
   componentDidMount() {
+    this.mounted = true;
     const { channel } = this.props;
 
-    channel.on(EVENT_ID, ({ source, currentLocation, locationsMap }) => {
-      const locationsKeys = getLocationKeys(locationsMap);
-
-      this.setState({
-        source,
-        currentLocation,
-        locationsMap,
-        locationsKeys,
-      });
-    });
+    channel.on(EVENT_ID, this.listener);
   }
 
   componentDidUpdate() {
@@ -82,10 +74,27 @@ export default class StoryPanel extends Component {
     }
   }
 
+  componentWillUnmount() {
+    const { channel } = this.props;
+
+    channel.removeListener(EVENT_ID, this.listener);
+  }
+
   setSelectedStoryRef = ref => {
     this.selectedStoryRef = ref;
   };
 
+  listener = ({ source, currentLocation, locationsMap }) => {
+    const locationsKeys = getLocationKeys(locationsMap);
+
+    this.setState({
+      source,
+      currentLocation,
+      locationsMap,
+      locationsKeys,
+    });
+  };
+
   clickOnStory = (kind, story) => {
     const { api } = this.props;
 

addons/viewport/src/manager/components/Panel.js

@@ -29,7 +29,7 @@ const getDefaultViewport = (viewports, candidateViewport) =>
 const getViewports = viewports =>
   Object.keys(viewports).length > 0 ? viewports : INITIAL_VIEWPORTS;
 
-export class Panel extends Component {
+export default class ViewportPanel extends Component {
   static defaultOptions = {
     viewports: INITIAL_VIEWPORTS,
     defaultViewport: DEFAULT_VIEWPORT,
@@ -59,6 +59,7 @@ export class Panel extends Component {
   };
 
   componentDidMount() {
+    this.mounted = true;
     const { channel, api } = this.props;
     const { defaultViewport } = this.state;
 
@@ -69,16 +70,18 @@ export class Panel extends Component {
     channel.on(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport);
 
     this.unsubscribeFromOnStory = api.onStory(() => {
-      this.setStoryDefaultViewport(defaultViewport);
+      const { storyDefaultViewport } = this.state;
+      if (this.mounted && !storyDefaultViewport === defaultViewport) {
+        this.setStoryDefaultViewport(defaultViewport);
+      }
     });
   }
 
   componentWillUnmount() {
+    this.mounted = false;
     const { channel } = this.props;
 
-    if (this.unsubscribeFromOnStory) {
-      this.unsubscribeFromOnStory();
-    }
+    this.unsubscribeFromOnStory();
 
     channel.removeListener(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
     channel.removeListener(CONFIGURE_VIEWPORT_EVENT_ID, this.configure);
@@ -95,7 +98,7 @@ export class Panel extends Component {
     this.changeViewport(defaultViewport);
   };
 
-  configure = (options = Panel.defaultOptions) => {
+  configure = (options = ViewportPanel.defaultOptions) => {
     const viewports = getViewports(options.viewports);
     const defaultViewport = getDefaultViewport(viewports, options.defaultViewport);
 

addons/viewport/src/manager/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import addons from '@storybook/addons';
 
-import { Panel } from './components/Panel';
+import Panel from './components/Panel';
 
 import { ADDON_ID, PANEL_ID } from '../shared';
 

examples/cra-kitchen-sink/src/stories/index.js

@@ -83,26 +83,26 @@
 //   .addDecorator(withKnobs)
 //   .add('with text', () => (
 //     <Button onClick={action('clicked')}>
-//       {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
+//       {setOptions({ selectedPanel: 'storybook/actions/actions-panel' })}
 //       Hello Button
 //     </Button>
 //   ))
 //   .add('with some emoji', () => (
 //     <Button onClick={action('clicked')}>
-//       {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
+//       {setOptions({ selectedPanel: 'storybook/actions/actions-panel' })}
 //       <span role="img" aria-label="so cool">😀 😎 👍 💯</span>
 //     </Button>
 //   ))
 //   .add('with notes', () => (
 //     <WithNotes notes={'A very simple button'}>
 //       <Button>
-//         {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
+//         {setOptions({ selectedPanel: 'storybook/notes/panel' })}
 //         Check my notes in the notes panel
 //       </Button>
 //     </WithNotes>
 //   ))
 //   .add('with knobs', () => {
-//     setOptions({ selectedAddonPanel: 'storybooks/storybook-addon-knobs' });
+//     setOptions({ selectedPanel: 'storybooks/storybook-addon-knobs' });
 //     const name = text('Name', 'Storyteller');
 //     const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
 //     const fruits = {
@@ -173,7 +173,7 @@
 //       'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.'
 //     )(context => (
 //       <Container>
-//         {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })}
+//         {setOptions({ selectedPanel: 'storybook/info/info-panel' })}
 //         click the <InfoButton /> label in top right for info about "{context.story}"
 //       </Container>
 //     ))
@@ -183,7 +183,7 @@
 //     withInfo('see Notes panel for composition info')(
 //       withNotes('Composition: Info(Notes())')(context => (
 //         <div>
-//           {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
+//           {setOptions({ selectedPanel: 'storybook/notes/panel' })}
 //           click the <InfoButton /> label in top right for info about "{context.story}"
 //         </div>
 //       ))

examples/cra-kitchen-sink/src/stories/index.stories.js

@@ -36,13 +36,13 @@ storiesOf('Button', module)
   .addDecorator(withNotes)
   .add('with text', () => (
     <Button onClick={action('clicked')}>
-      {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
+      {setOptions({ selectedPanel: 'storybook/actions/actions-panel' })}
       Hello Button
     </Button>
   ))
   .add('with some emoji', () => (
     <Button onClick={action('clicked')}>
-      {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
+      {setOptions({ selectedPanel: 'storybook/actions/actions-panel' })}
       <span role="img" aria-label="so cool">
         😀 😎 👍 💯
       </span>
@@ -52,7 +52,7 @@ storiesOf('Button', module)
     'with notes',
     () => (
       <Button>
-        {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
+        {setOptions({ selectedPanel: 'storybook/notes/panel' })}
         Check my notes in the notes panel
       </Button>
     ),
@@ -64,7 +64,7 @@ storiesOf('Button', module)
       'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.'
     )(context => (
       <Container>
-        {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })}
+        {setOptions({ selectedPanel: 'storybook/info/info-panel' })}
         click the <InfoButton /> label in top right for info about "{context.story}"
       </Container>
     ))
@@ -74,7 +74,7 @@ storiesOf('Button', module)
     withInfo('see Notes panel for composition info')(
       withNotes('Composition: Info(Notes())')(context => (
         <div>
-          {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
+          {setOptions({ selectedPanel: 'storybook/notes/panel' })}
           click the <InfoButton /> label in top right for info about "{context.story}"
         </div>
       ))

examples/html-kitchen-sink/stories/addon-a11y.stories.js

@@ -9,7 +9,7 @@ const text = 'Testing the a11y addon';
 storiesOf('Addons|a11y', module)
   .addDecorator(checkA11y)
   .addDecorator(fn => {
-    setOptions({ selectedAddonPanel: '@storybook/addon-a11y/panel' });
+    setOptions({ selectedPanel: '@storybook/addon-a11y/panel' });
     return fn();
   })
   .add('Default', () => `<button></button>`)

examples/official-storybook/stories/addon-a11y.stories.js

@@ -15,7 +15,7 @@ const text = 'Testing the a11y addon';
 storiesOf('Addons|a11y', module)
   .addDecorator(checkA11y)
   .addDecorator(fn => {
-    setOptions({ selectedAddonPanel: '@storybook/addon-a11y/panel' });
+    setOptions({ selectedPanel: '@storybook/addon-a11y/panel' });
     return fn();
   })
   .add('Default', () => <BaseButton label="" />)

examples/official-storybook/stories/addon-actions.stories.js

@@ -76,7 +76,7 @@ storiesOf('Addons|Actions', module)
 
     return (
       <div>
-        {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
+        {setOptions({ selectedPanel: 'storybook/actions/actions-panel' })}
         <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
         <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
         <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>

lib/channel-postmessage/src/index.js

@@ -61,7 +61,7 @@ export class PostmsgTransport {
   _handleEvent(rawEvent) {
     try {
       const { data } = rawEvent;
-      const { key, event } = JSON.parse(data);
+      const { key, event } = typeof data === 'string' ? JSON.parse(data) : data;
       if (key === KEY) {
         this._handler(event);
       }

lib/components/src/explorer/explorer.js

@@ -6,16 +6,7 @@ import styled from 'react-emotion';
 import Stories from './tree';
 import TextFilter from './text_filter';
 
-const Wrapper = styled('div')(
-  ({ isMobileDevice }) =>
-    isMobileDevice
-      ? {
-          padding: '10px',
-        }
-      : {
-          padding: '10px 0 10px 10px',
-        }
-);
+const Wrapper = styled('div')({});
 
 const storyProps = [
   'selectedKind',
@@ -62,7 +53,6 @@ Explorer.defaultProps = {
   storiesHierarchies: [],
   storyFilter: null,
   onStoryFilter: () => {},
-  openShortcutsHelp: null,
 };
 
 Explorer.propTypes = {
@@ -75,8 +65,6 @@ Explorer.propTypes = {
   ),
   storyFilter: PropTypes.string,
   onStoryFilter: PropTypes.func,
-
-  openShortcutsHelp: PropTypes.func,
 };
 
 export { Explorer };

lib/components/src/explorer/routedLink.js

@@ -0,0 +1,21 @@
+import { MenuLink } from '@storybook/components';
+import { inject } from 'mobx-react';
+import qs from 'qs';
+
+export function mapper(store, { overrideParams = {} }) {
+  const search = qs.stringify(
+    {
+      ...store.urlState,
+      ...overrideParams,
+    },
+    { addQueryPrefix: true }
+  );
+
+  return {
+    href: search,
+  };
+}
+
+const ComposedMenuLink = inject(({ store }, props) => mapper(store, props))(MenuLink);
+
+export { ComposedMenuLink as MenuLink };

lib/components/src/explorer/tree.js

@@ -8,7 +8,7 @@ import styled from 'react-emotion';
 
 import TreeHeader from './tree_header';
 import treeNodeTypes from './tree_node_type';
-// import treeDecorators from './tree_decorators';
+import treeDecorators from './tree_decorators';
 import treeStyle from './tree_style';
 
 const namespaceSeparator = '@';
@@ -148,8 +148,8 @@ class Stories extends React.Component {
           data={data}
           onToggle={this.onToggle}
           animations={sidebarAnimations ? undefined : false}
+          decorators={treeDecorators}
         />
-        {/* decorators={treeDecorators} */}
       </Wrapper>
     );
   }

lib/components/src/explorer/tree_decorators.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import { decorators } from '@ndelangen/react-treebeard';
 import Icons from '../icons/index';
-import { MenuLink } from '../../../containers/routed_link';
-import MenuItem from '../menu_item';
+import { MenuLink } from './routedLink';
+import MenuItem from './menu_item';
 import treeNodeTypes from './tree_node_type';
 import { highlightNode } from './tree_decorators_utils';
 

lib/components/src/index.js

@@ -20,6 +20,7 @@ export { default as Layout } from './layout/index';
 export { Root } from './root/root';
 export { Nav } from './nav/nav';
 export { Explorer } from './explorer/explorer';
+export { Preview } from './preview/preview';
 
 export { default as Header } from './header/header';
 export { default as Icons } from './icons/index';

lib/components/src/preview/pointerBlock.js

@@ -0,0 +1,15 @@
+import styled from 'react-emotion';
+
+const PointerBlock = styled('span')(({ shown }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  width: '100%',
+  height: '100%',
+  zIndex: shown ? 2 : 0,
+  background: 'rgba(255,255,255,0.05)',
+}));
+
+export { PointerBlock };

lib/components/src/preview/preview.js

@@ -0,0 +1,104 @@
+import React, { Component, Fragment } from 'react';
+import styled from 'react-emotion';
+
+import { PointerBlock } from './pointerBlock';
+import { Toolbar } from './toolbar';
+
+const Typography = styled('div')({
+  fontSize: 11,
+  lineHeight: '40px',
+  marginRight: 5,
+  borderRight: '1px solid rgba(0,0,0,0.2)',
+  paddingRight: 10,
+});
+
+const defaults = {
+  grid: {
+    backgroundSize: '100px 100px, 100px 100px, 20px 20px, 20px 20px',
+    backgroundPosition: '-2px -2px, -2px -2px, -1px -1px, -1px -1px',
+
+    backgroundImage: `
+    linear-gradient(rgba(0,0,0,0.05) 2px, transparent 2px),
+    linear-gradient(90deg, rgba(0,0,0,0.05) 2px, transparent 2px),
+    linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px)`,
+  },
+  background: {
+    backgroundColor: 'transparent',
+  },
+};
+
+const Frame = styled('iframe')(
+  {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    border: '0 none',
+    overflow: 'hidden',
+    transition: 'transform .2s ease-out, height .2s ease-out, width .2s ease-out',
+    transformOrigin: 'top left',
+  },
+  ({ grid = defaults.grid }) => grid,
+  ({ background = defaults.background }) => background
+);
+
+const FrameWrap = styled('div')(({ offset, full }) => ({
+  position: full ? 'fixed' : 'absolute',
+  overflow: 'auto',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  top: full ? 0 : offset,
+  zIndex: full ? 1 : 3,
+  height: full ? '100vh' : `calc(100% - ${offset}px)`,
+  background: full ? 'white' : 'transparent',
+}));
+
+class Preview extends Component {
+  state = {
+    zoom: 1,
+  };
+
+  render() {
+    const {
+      id,
+      isDragging,
+      full = false,
+      toolbar = true,
+      url = 'https://example.com',
+    } = this.props;
+
+    const { zoom } = this.state;
+
+    const toolbarHeight = toolbar ? 40 : 0;
+
+    return (
+      <Fragment>
+        <PointerBlock shown={isDragging} />
+        <FrameWrap offset={toolbarHeight} full={full} id="storybook-preview-background">
+          <Frame
+            id="storybook-preview-iframe"
+            title={id || 'preview'}
+            src={url}
+            allowFullScreen
+            style={{
+              width: `${100 * zoom}%`,
+              height: `${100 * zoom}%`,
+              transform: `scale(${1 / zoom})`,
+            }}
+          />
+        </FrameWrap>
+        {toolbar && !full ? (
+          <Toolbar onZoomChange={val => this.setState({ zoom: zoom * val })}>
+            <Typography>
+              ({parseFloat(100 / zoom).toFixed(0)}
+              %)
+            </Typography>
+          </Toolbar>
+        ) : null}
+      </Fragment>
+    );
+  }
+}
+
+export { Preview };

lib/components/src/preview/preview.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Iframe } from './preview';
+
+storiesOf('Components|Preview', module).add('default', () => <Iframe />);

lib/components/src/preview/toolbar.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'react-emotion';
+
+const ZoomInIcon = () => <span>+</span>;
+const ZoomOutIcon = () => <span>-</span>;
+const IconButton = styled('button')({
+  width: 40,
+  height: 40,
+  background: 'none',
+  border: '0 none',
+});
+
+const Wrapper = styled('div')({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  left: 0,
+  height: 40,
+  boxSizing: 'border-box',
+  borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
+  background: '#fff',
+  zIndex: 2,
+});
+
+const Toolbar = ({ children, onZoomChange }) => (
+  <Wrapper>
+    {children}
+    <IconButton onClick={() => onZoomChange(0.8)}>
+      <ZoomInIcon />
+    </IconButton>
+    <IconButton onClick={() => onZoomChange(1.25)}>
+      <ZoomOutIcon />
+    </IconButton>
+  </Wrapper>
+);
+
+export { Toolbar };

lib/components/src/root/desktop.js

@@ -48,7 +48,7 @@ const DesktopPadding = styled('div')(({ left }) => ({
   alignItems: 'center',
 }));
 
-const RoundedBorder = styled('div')({
+const Rounded = styled('div')(({ border }) => ({
   position: 'absolute',
   left: 0,
   top: 0,
@@ -59,7 +59,8 @@ const RoundedBorder = styled('div')({
   borderRadius: 5,
   overflow: 'hidden',
   boxSizing: 'border-box',
-});
+  border: border ? '1px solid gray' : '0 none',
+}));
 
 const Desktop = ({
   Nav,
@@ -79,12 +80,12 @@ const Desktop = ({
           primary="second"
           show={panel ? [0, 1] : [0]}
         >
-          <RoundedBorder>
-            <Preview />
-          </RoundedBorder>
-          <RoundedBorder>
+          <Rounded border>
+            <Preview full={full} isDragging />
+          </Rounded>
+          <Rounded>
             <Panel />
-          </RoundedBorder>
+          </Rounded>
         </MemSplit>
       </DesktopPadding>
     </MemSplit>

lib/components/src/root/root.js

@@ -16,13 +16,22 @@ const Root = ({
   },
 }) => (
   <ResizeDetector handleWidth>
-    {width =>
-      width > 500 ? (
-        <Desktop {...{ Nav, Preview, Panel, options }} />
-      ) : (
-        <Mobile {...{ Nav, Preview, Panel, options }} />
-      )
-    }
+    {width => {
+      switch (true) {
+        case width === 0: {
+          return <div />;
+        }
+        case width < 500: {
+          return <Mobile {...{ Nav, Preview, Panel, options }} />;
+        }
+        case width > 500: {
+          return <Desktop {...{ Nav, Preview, Panel, options }} />;
+        }
+        default: {
+          return <div />;
+        }
+      }
+    }}
   </ResizeDetector>
 );
 

lib/core/package.json

@@ -20,6 +20,7 @@
     "@storybook/channel-postmessage": "4.0.0-alpha.16",
     "@storybook/client-logger": "4.0.0-alpha.16",
     "@storybook/core-events": "4.0.0-alpha.16",
+    "@storybook/components": "4.0.0-alpha.16",
     "@storybook/node-logger": "4.0.0-alpha.16",
     "@storybook/ui": "4.0.0-alpha.16",
     "airbnb-js-shims": "^2.1.0",

lib/core/src/client/manager/preview.js

@@ -1,35 +1,3 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Preview } from '@storybook/components';
 
-import styled from 'react-emotion';
-
-const Iframe = styled('iframe')({
-  width: '100%',
-  height: '100%',
-  border: 0,
-  margin: 'auto',
-  padding: 0,
-});
-
-class Preview extends Component {
-  shouldComponentUpdate() {
-    // When the manager is re-rendered, due to changes in the layout (going full screen / changing
-    // addon panel to right) Preview section will update. If its re-rendered the whole html page
-    // inside the html is re-rendered making the story to re-mount.
-    // We dont have to re-render this component for any reason since changes are communicated to
-    // story using the channel and necessary changes are done by it.
-    return false;
-  }
-
-  render() {
-    const { url } = this.props;
-
-    return <Iframe id="storybook-preview-iframe" title="preview" src={url} allowFullScreen />;
-  }
-}
-
-Preview.propTypes = {
-  url: PropTypes.string.isRequired,
-};
-
-export default Preview;
+export { Preview as default };

lib/ui/src/components/stories_panel/index.js

@@ -6,16 +6,7 @@ import styled from 'react-emotion';
 import Stories from './stories_tree';
 import TextFilter from './text_filter';
 
-const Wrapper = styled('div')(
-../../../../components/src/explorer/text_filterDevice }) =>
-    isMobileDevice
-      ? {
-          padding: '10px',
-        }
-      : {
-          padding: '10px 0 10px 10px',
-        }
-);
+const Wrapper = styled('div')({});
 
 const storyProps = [
   'selectedKind',

lib/ui/src/containers/addon_panel.js

@@ -4,7 +4,7 @@ import { AddonPanel } from '@storybook/components';
 export function mapper(store) {
   return {
     panels: store.panels,
-    selectedPanel: store.selectedAddonPanel,
+    selectedPanel: store.selectedPanel,
     onPanelSelect: panel => store.selectAddonPanel(panel),
   };
 }

lib/ui/src/containers/addon_panel.test.js

@@ -4,7 +4,7 @@ describe('manager.ui.containers.addon_panel', () => {
   describe('mapper', () => {
     test('should give correct data', () => {
       const state = {
-        selectedAddonPanel: 'sdp',
+        selectedPanel: 'sdp',
       };
 
       const selectAddonPanel = () => 'selectAddonPanel';

lib/ui/src/containers/nav.js

@@ -12,17 +12,21 @@ import {
 } from '../libs/hierarchy';
 
 export const mapper = store => {
-  const { stories, selectedKind, selectedStory, uiOptions, storyFilter } = store;
-
   const {
-    name,
-    url,
+    stories,
+    selectedKind,
+    selectedStory,
+    uiOptions: {
+      name,
+      url,
 
-    sortStoriesByKind,
-    hierarchySeparator,
-    hierarchyRootSeparator,
-    sidebarAnimations,
-  } = uiOptions;
+      sortStoriesByKind,
+      hierarchySeparator,
+      hierarchyRootSeparator,
+      sidebarAnimations,
+    },
+    storyFilter,
+  } = store;
 
   const preparedStories = prepareStoriesForHierarchy(
     stories,
@@ -44,13 +48,23 @@ export const mapper = store => {
   const selectedHierarchy = resolveStoryHierarchy(storyName, hierarchySeparator);
 
   return {
-    name,
+    title: name,
     url,
     sections: [
       {
         id: 'components',
         name: 'components',
-        render: () => <div>LIST GOES HERE </div>,
+        render: () => (
+          <Explorer
+            storiesHierarchies={storiesHierarchies}
+            storyFilter={storyFilter}
+            onStoryFilter={filter => store.setStoryFilter(filter)}
+            sidebarAnimations={sidebarAnimations}
+            selectedKind={selectedKind}
+            selectedHierarchy={selectedHierarchy}
+            selectedStory={selectedStory}
+          />
+        ),
         active: true,
       },
       {
@@ -67,10 +81,8 @@ export const mapper = store => {
     selectedStory,
     selectedHierarchy,
     onSelectStory: (kind, story) => store.selectStory(kind, story),
-    // shortcutOptions,
     storyFilter,
     onStoryFilter: filter => store.setStoryFilter(filter),
-    openShortcutsHelp: () => store.toggleShortcutsHelp(),
     sidebarAnimations,
   };
 };

lib/ui/src/containers/root.js

@@ -9,7 +9,9 @@ export default inject(stores => {
   const currentOptions = pick(shortcutOptions, 'panel', 'full', 'nav');
 
   return {
-    ...currentOptions,
-    ...uiOptions,
+    options: {
+      ...currentOptions,
+      ...uiOptions,
+    },
   };
 })(Root);

lib/ui/src/containers/themeProvider.js

@@ -0,0 +1,14 @@
+import { ThemeProvider } from 'emotion-theming';
+
+import { inject } from 'mobx-react';
+
+export default inject(stores => {
+  const state = stores.store;
+  const {
+    uiOptions: { theme },
+  } = state;
+
+  return {
+    theme,
+  };
+})(ThemeProvider);

lib/ui/src/index.js

@@ -6,7 +6,9 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 
 import App from './app';
+import ThemeProvider from './containers/themeProvider';
 import Provider from './provider';
+
 import initProviderApi from './init-provider-api';
 import initHistoryHandler from './init-history-handler';
 import initKeyHandler from './init-key-handler';
@@ -40,7 +42,9 @@ function renderStorybookUI(domNode, provider) {
     <Container>
       <MobxProvider store={store}>
         <Router>
-          <App />
+          <ThemeProvider>
+            <App />
+          </ThemeProvider>
         </Router>
       </MobxProvider>
     </Container>

lib/ui/src/routing.js

@@ -11,7 +11,9 @@ const QueryRoute = ({ path, render }) => (
 
       // keep backwards compatibility by asserting /components as default
       const match = matchPath(path, { path: query.path || '/components' });
-      if (match) return render({ ...props, location, match, query });
+      if (match) {
+        return render({ ...props, location, match, query });
+      }
 
       return null;
     }}

lib/ui/src/store.js

@@ -1,6 +1,6 @@
-import { console as logger } from 'global';
 import { observable, action, set } from 'mobx';
 import pick from 'lodash.pick';
+import { themes } from '@storybook/components';
 
 import { features } from './libs/key_events';
 
@@ -28,12 +28,15 @@ function ensureStory(stories, selectedKind, selectedStory) {
 }
 
 export function ensurePanel(panels, selectedPanel, currentPanel) {
-  if (Object.keys(panels).indexOf(selectedPanel) >= 0) return selectedPanel;
-  // if the selected panel is non-existant, select the current panel
-  // and output to console all available panels
-  logger.group('Available Panels ID:');
-  Object.keys(panels).forEach(panelID => logger.log(`${panelID} (${panels[panelID].title})`));
-  logger.groupEnd('Available Panels ID:');
+  const keys = Object.keys(panels);
+
+  if (keys.indexOf(selectedPanel) >= 0) {
+    return selectedPanel;
+  }
+
+  if (keys.length) {
+    return keys[0];
+  }
   return currentPanel;
 }
 
@@ -41,9 +44,7 @@ const createStore = ({ provider }) => {
   const store = observable(
     {
       stories: [],
-      showShortcutsHelp: false,
       storyFilter: null,
-      selectedAddonPanel: null,
       shortcutOptions: {
         full: false,
         nav: true,
@@ -59,7 +60,7 @@ const createStore = ({ provider }) => {
         hierarchySeparator: '/',
         hierarchyRootSeparator: null,
         sidebarAnimations: true,
-        theme: null,
+        theme: themes.normal,
       },
       customQueryParams: {},
 
@@ -67,20 +68,24 @@ const createStore = ({ provider }) => {
         return () => provider.renderPreview(this.selectedKind, this.selectedStory);
       },
 
+      selectedPanelValue: null,
+      get selectedPanel() {
+        return ensurePanel(this.panels, this.selectedPanelValue, this.selectedPanelValue);
+      },
+      set selectedPanel(value) {
+        this.selectedPanelValue = value;
+      },
+
       get panels() {
         return provider.getPanels();
       },
 
       setOptions(options) {
-        const { selectedAddonPanel, ...uiOptions } = options;
+        const { selectedPanel, ...uiOptions } = options;
         const newOptions = pick(uiOptions, Object.keys(this.uiOptions));
 
-        if (selectedAddonPanel) {
-          this.selectedAddonPanel = ensurePanel(
-            this.panels,
-            selectedAddonPanel,
-            this.selectedAddonPanel
-          );
+        if (selectedPanel) {
+          set(this.selectedPanel, ensurePanel(this.panels, selectedPanel, this.selectedPanel));
         }
 
         set(this.uiOptions, newOptions);
@@ -155,9 +160,13 @@ const createStore = ({ provider }) => {
         return {
           selectedKind: this.selectedKind,
           selectedStory: this.selectedStory,
-          full: this.shortcutOptions.full,
-          panel: this.shortcutOptions.panel,
-          nav: this.shortcutOptions.nav,
+          selectedPanel: this.selectedPanel,
+          full: Number(Boolean(this.shortcutOptions.full)),
+          panel:
+            this.shortcutOptions.panel === 'right' || this.shortcutOptions.panel === 'bottom'
+              ? this.shortcutOptions.panel
+              : false,
+          nav: Number(Boolean(this.shortcutOptions.nav)),
           ...this.customQueryParams,
         };
       },
@@ -172,7 +181,7 @@ const createStore = ({ provider }) => {
       },
 
       selectAddonPanel(panelName) {
-        this.selectedAddonPanel = panelName;
+        this.selectedPanel = panelName;
       },
 
       setStories(stories) {