From 1b7481be23f1e59a9ad009d554fc458c81e266c5 Mon Sep 17 00:00:00 2001 From: hypnos Date: Sun, 20 Aug 2017 06:32:42 +0300 Subject: [PATCH 1/5] Revert "Revert "Deprecate confusing option names"" This reverts commit 524110b2e5c62a901ee9dfa326a1bd5a99e55520. --- addons/options/.storybook/config.js | 6 +- .../cra-kitchen-sink/.storybook/config.js | 6 +- lib/ui/src/libs/key_events.js | 12 +- lib/ui/src/modules/api/actions/api.test.js | 2 +- .../modules/shortcuts/actions/shortcuts.js | 39 +++++-- .../shortcuts/actions/shortcuts.test.js | 29 +++++ lib/ui/src/modules/shortcuts/index.js | 6 +- lib/ui/src/modules/ui/actions/ui.js | 2 +- lib/ui/src/modules/ui/actions/ui.test.js | 4 +- .../{down_panel => addon_panel}/index.js | 8 +- .../{down_panel => addon_panel}/index.test.js | 10 +- .../{down_panel => addon_panel}/style.js | 0 .../src/modules/ui/components/layout/index.js | 104 +++++++++--------- .../ui/components/layout/index.test.js | 52 ++++----- .../modules/ui/components/shortcuts_help.js | 12 +- .../{left_panel => stories_panel}/header.js | 0 .../header.test.js | 2 +- .../{left_panel => stories_panel}/index.js | 8 +- .../index.test.js | 14 +-- .../stories_tree/index.js | 0 .../stories_tree/index.test.js | 2 +- .../stories_tree/tree_decorators.js | 0 .../stories_tree/tree_node_type.js | 0 .../stories_tree/tree_style.js | 0 .../text_filter.js | 0 .../text_filter.test.js | 2 +- .../src/modules/ui/configs/handle_routing.js | 31 +++--- .../modules/ui/configs/handle_routing.test.js | 59 +++++++--- lib/ui/src/modules/ui/configs/init_panels.js | 2 +- .../modules/ui/configs/init_panels.test.js | 6 +- .../{down_panel.js => addon_panel.js} | 6 +- ...down_panel.test.js => addon_panel.test.js} | 10 +- lib/ui/src/modules/ui/containers/layout.js | 2 +- .../src/modules/ui/containers/layout.test.js | 4 +- .../{left_panel.js => stories_panel.js} | 4 +- ...ft_panel.test.js => stories_panel.test.js} | 4 +- lib/ui/src/modules/ui/routes.js | 8 +- 37 files changed, 274 insertions(+), 182 deletions(-) rename lib/ui/src/modules/ui/components/{down_panel => addon_panel}/index.js (94%) rename lib/ui/src/modules/ui/components/{down_panel => addon_panel}/index.test.js (78%) rename lib/ui/src/modules/ui/components/{down_panel => addon_panel}/style.js (100%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/header.js (100%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/header.test.js (86%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/index.js (93%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/index.test.js (82%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/stories_tree/index.js (100%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/stories_tree/index.test.js (99%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/stories_tree/tree_decorators.js (100%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/stories_tree/tree_node_type.js (100%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/stories_tree/tree_style.js (100%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/text_filter.js (100%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/text_filter.test.js (95%) rename lib/ui/src/modules/ui/containers/{down_panel.js => addon_panel.js} (67%) rename lib/ui/src/modules/ui/containers/{down_panel.test.js => addon_panel.test.js} (72%) rename lib/ui/src/modules/ui/containers/{left_panel.js => stories_panel.js} (90%) rename lib/ui/src/modules/ui/containers/{left_panel.test.js => stories_panel.test.js} (97%) diff --git a/addons/options/.storybook/config.js b/addons/options/.storybook/config.js index 339b3300e362..6f80581920af 100644 --- a/addons/options/.storybook/config.js +++ b/addons/options/.storybook/config.js @@ -5,10 +5,10 @@ setOptions({ name: 'CUSTOM-OPTIONS', url: 'https://github.com/storybooks/storybook', // goFullScreen: false, - // showLeftPanel: true, - showDownPanel: false, + // showStoriesPanel: true, + showAddonPanel: false, // showSearchBox: false, - // downPanelInRight: false, + // addonPanelInRight: false, }); storybook.configure(() => require('./stories'), module); diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js index c21ef8b46b43..a90810903681 100644 --- a/examples/cra-kitchen-sink/.storybook/config.js +++ b/examples/cra-kitchen-sink/.storybook/config.js @@ -6,10 +6,10 @@ setOptions({ name: 'CRA Kitchen Sink', url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink', goFullScreen: false, - showLeftPanel: true, - showDownPanel: true, + showStoriesPanel: true, + showAddonsPanel: true, showSearchBox: false, - downPanelInRight: true, + addonsPanelInRight: true, sortStoriesByKind: false, hierarchySeparator: /\/|\./, }); diff --git a/lib/ui/src/libs/key_events.js b/lib/ui/src/libs/key_events.js index fb2b3822903d..bd54cf090692 100755 --- a/lib/ui/src/libs/key_events.js +++ b/lib/ui/src/libs/key_events.js @@ -2,14 +2,14 @@ import keycode from 'keycode'; export const features = { FULLSCREEN: 1, - DOWN_PANEL: 2, - LEFT_PANEL: 3, + ADDON_PANEL: 2, + NAVIGATION_PANEL: 3, SHORTCUTS_HELP: 4, ESCAPE: 5, NEXT_STORY: 6, PREV_STORY: 7, SHOW_SEARCH: 8, - DOWN_PANEL_IN_RIGHT: 9, + ADDON_PANEL_IN_RIGHT: 9, }; export function isModifierPressed(e) { @@ -42,10 +42,10 @@ export default function handle(e) { return features.FULLSCREEN; case keycode('D'): e.preventDefault(); - return features.DOWN_PANEL; + return features.ADDON_PANEL; case keycode('L'): e.preventDefault(); - return features.LEFT_PANEL; + return features.NAVIGATION_PANEL; case keycode('right'): e.preventDefault(); return features.NEXT_STORY; @@ -57,7 +57,7 @@ export default function handle(e) { return features.SHOW_SEARCH; case keycode('J'): e.preventDefault(); - return features.DOWN_PANEL_IN_RIGHT; + return features.ADDON_PANEL_IN_RIGHT; default: return false; } diff --git a/lib/ui/src/modules/api/actions/api.test.js b/lib/ui/src/modules/api/actions/api.test.js index 568bf358ed37..689116b537e9 100755 --- a/lib/ui/src/modules/api/actions/api.test.js +++ b/lib/ui/src/modules/api/actions/api.test.js @@ -216,7 +216,7 @@ describe('manager.api.actions.api', () => { expect(stateUpdates.selectedAddonPanel).toEqual('storybooks/storybook-addon-knobs'); }); - it('should keep current downPanel and output panel IDs', () => { + it('should keep current addonPanel and output panel IDs', () => { const clientStore = new MockClientStore(); actions.setOptions({ clientStore, provider }, { selectedAddonPanel: null }); diff --git a/lib/ui/src/modules/shortcuts/actions/shortcuts.js b/lib/ui/src/modules/shortcuts/actions/shortcuts.js index 741cb3eeebae..71b9eaad575b 100755 --- a/lib/ui/src/modules/shortcuts/actions/shortcuts.js +++ b/lib/ui/src/modules/shortcuts/actions/shortcuts.js @@ -2,23 +2,32 @@ import pick from 'lodash.pick'; import { features } from '../../../libs/key_events'; import apiActions from '../../api/actions'; +const deprecationMessage = (oldName, newName) => + `The ${oldName} prop is renamed to ${newName} and will not be available since the next major Storybook release. Please update your config.`; + export function keyEventToOptions(currentOptions, event) { switch (event) { case features.FULLSCREEN: return { goFullScreen: !currentOptions.goFullScreen }; - case features.DOWN_PANEL: - return { showDownPanel: !currentOptions.showDownPanel }; - case features.LEFT_PANEL: - return { showLeftPanel: !currentOptions.showLeftPanel }; + case features.ADDON_PANEL: + return { showAddonPanel: !currentOptions.showAddonPanel }; + case features.NAVIGATION_PANEL: + return { showStoriesPanel: !currentOptions.showStoriesPanel }; case features.SHOW_SEARCH: return { showSearchBox: true }; - case features.DOWN_PANEL_IN_RIGHT: - return { downPanelInRight: !currentOptions.downPanelInRight }; + case features.ADDON_PANEL_IN_RIGHT: + return { addonPanelInRight: !currentOptions.addonPanelInRight }; default: return {}; } } +const renamedOptions = { + showLeftPanel: 'showStoriesPanel', + showDownPanel: 'showAddonPanel', + downPanelInRight: 'addonPanelInRight', +}; + export default { handleEvent(context, event) { const { clientStore } = context; @@ -51,8 +60,24 @@ export default { ...pick(options, Object.keys(state.shortcutOptions)), }; + const withNewNames = Object.keys(renamedOptions).reduce((acc, oldName) => { + const newName = renamedOptions[oldName]; + + if (oldName in options && !(newName in options)) { + // eslint-disable-next-line no-console + console.warn(deprecationMessage(oldName, newName)); + + return { + ...acc, + [newName]: options[oldName], + }; + } + + return acc; + }, updatedOptions); + return { - shortcutOptions: updatedOptions, + shortcutOptions: withNewNames, }; }); }, diff --git a/lib/ui/src/modules/shortcuts/actions/shortcuts.test.js b/lib/ui/src/modules/shortcuts/actions/shortcuts.test.js index 7256d3991a86..09a0b42c7b44 100644 --- a/lib/ui/src/modules/shortcuts/actions/shortcuts.test.js +++ b/lib/ui/src/modules/shortcuts/actions/shortcuts.test.js @@ -35,5 +35,34 @@ describe('manager.shortcuts.actions.shortcuts', () => { shortcutOptions: { bbc: 50, abc: 10 }, }); }); + + test('should warn about deprecated option names', () => { + const clientStore = new MockClientStore(); + const spy = jest.spyOn(global.console, 'warn'); + actions.setOptions( + { clientStore }, + { + showLeftPanel: 1, + showDownPanel: 2, + downPanelInRight: 3, + } + ); + + const state = { + shortcutOptions: {}, + }; + const stateUpdates = clientStore.updateCallback(state); + expect(spy).toHaveBeenCalledTimes(3); + expect(stateUpdates).toEqual({ + shortcutOptions: { + showStoriesPanel: 1, + showAddonPanel: 2, + addonPanelInRight: 3, + }, + }); + + spy.mockReset(); + spy.mockRestore(); + }); }); }); diff --git a/lib/ui/src/modules/shortcuts/index.js b/lib/ui/src/modules/shortcuts/index.js index b86918e2d854..b8c3b8fa659b 100755 --- a/lib/ui/src/modules/shortcuts/index.js +++ b/lib/ui/src/modules/shortcuts/index.js @@ -5,10 +5,10 @@ export default { defaultState: { shortcutOptions: { goFullScreen: false, - showLeftPanel: true, - showDownPanel: true, + showStoriesPanel: true, + showAddonPanel: true, showSearchBox: false, - downPanelInRight: false, + addonPanelInRight: false, }, }, }; diff --git a/lib/ui/src/modules/ui/actions/ui.js b/lib/ui/src/modules/ui/actions/ui.js index a5a823643ce5..b0d279a8e7e8 100755 --- a/lib/ui/src/modules/ui/actions/ui.js +++ b/lib/ui/src/modules/ui/actions/ui.js @@ -7,7 +7,7 @@ export default { clientStore.toggle('showShortcutsHelp'); }, - selectDownPanel({ clientStore }, panelName) { + selectAddonPanel({ clientStore }, panelName) { clientStore.set('selectedAddonPanel', panelName); }, }; diff --git a/lib/ui/src/modules/ui/actions/ui.test.js b/lib/ui/src/modules/ui/actions/ui.test.js index de4df76f35ee..0226517cc5b3 100755 --- a/lib/ui/src/modules/ui/actions/ui.test.js +++ b/lib/ui/src/modules/ui/actions/ui.test.js @@ -24,13 +24,13 @@ describe('manager.ui.actions.ui', () => { }); }); - describe('selectDownPanel', () => { + describe('selectAddonPanel', () => { it('should set the given panel name', () => { const clientStore = { set: jest.fn(), }; const panelName = 'kkkind'; - actions.selectDownPanel({ clientStore }, panelName); + actions.selectAddonPanel({ clientStore }, panelName); expect(clientStore.set).toHaveBeenCalledWith('selectedAddonPanel', panelName); }); diff --git a/lib/ui/src/modules/ui/components/down_panel/index.js b/lib/ui/src/modules/ui/components/addon_panel/index.js similarity index 94% rename from lib/ui/src/modules/ui/components/down_panel/index.js rename to lib/ui/src/modules/ui/components/addon_panel/index.js index f20cbdcc359c..17b1935286a5 100644 --- a/lib/ui/src/modules/ui/components/down_panel/index.js +++ b/lib/ui/src/modules/ui/components/addon_panel/index.js @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; import style from './style'; -class DownPanel extends Component { +class AddonPanel extends Component { renderTab(name, panel) { let tabStyle = style.tablink; if (this.props.selectedPanel === name) { @@ -69,16 +69,16 @@ class DownPanel extends Component { } } -DownPanel.defaultProps = { +AddonPanel.defaultProps = { panels: {}, onPanelSelect: () => {}, selectedPanel: null, }; -DownPanel.propTypes = { +AddonPanel.propTypes = { panels: PropTypes.object, // eslint-disable-line react/forbid-prop-types onPanelSelect: PropTypes.func, selectedPanel: PropTypes.string, }; -export default DownPanel; +export default AddonPanel; diff --git a/lib/ui/src/modules/ui/components/down_panel/index.test.js b/lib/ui/src/modules/ui/components/addon_panel/index.test.js similarity index 78% rename from lib/ui/src/modules/ui/components/down_panel/index.test.js rename to lib/ui/src/modules/ui/components/addon_panel/index.test.js index c8e825689465..82ebc0866043 100644 --- a/lib/ui/src/modules/ui/components/down_panel/index.test.js +++ b/lib/ui/src/modules/ui/components/addon_panel/index.test.js @@ -1,8 +1,8 @@ import React from 'react'; import { shallow } from 'enzyme'; -import DownPanel from './index'; +import AddonPanel from './index'; -describe('manager.ui.components.down_panel.index', () => { +describe('manager.ui.components.addon_panel.index', () => { test('should render only the selected panel with display set other than "none"', () => { const panels = { test1: { @@ -20,7 +20,7 @@ describe('manager.ui.components.down_panel.index', () => { const onPanelSelect = () => 'onPanelSelect'; const wrapper = shallow( - + ); expect(wrapper.find('#test1').parent()).toHaveStyle('display', 'none'); @@ -38,7 +38,7 @@ describe('manager.ui.components.down_panel.index', () => { const onPanelSelect = jest.fn(); const preventDefault = jest.fn(); const wrapper = shallow( - + ); wrapper.find('a').simulate('click', { preventDefault }); @@ -50,7 +50,7 @@ describe('manager.ui.components.down_panel.index', () => { test('should render "no panels available"', () => { const panels = {}; const onPanelSelect = () => 'onPanelSelect'; - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.contains('no panels available')).toBe(true); }); diff --git a/lib/ui/src/modules/ui/components/down_panel/style.js b/lib/ui/src/modules/ui/components/addon_panel/style.js similarity index 100% rename from lib/ui/src/modules/ui/components/down_panel/style.js rename to lib/ui/src/modules/ui/components/addon_panel/style.js diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js index 8be499e0965b..22ae8b54b570 100755 --- a/lib/ui/src/modules/ui/components/layout/index.js +++ b/lib/ui/src/modules/ui/components/layout/index.js @@ -11,48 +11,48 @@ const rootStyle = { backgroundColor: '#F7F7F7', }; -const leftPanelStyle = leftPanelOnTop => ({ +const storiesPanelStyle = storiesPanelOnTop => ({ width: '100%', display: 'flex', - flexDirection: leftPanelOnTop ? 'column' : 'row', + flexDirection: storiesPanelOnTop ? 'column' : 'row', alignItems: 'stretch', - paddingRight: leftPanelOnTop ? 10 : 0, + paddingRight: storiesPanelOnTop ? 10 : 0, }); -const downPanelStyle = downPanelInRight => ({ +const addonPanelStyle = addonPanelInRight => ({ display: 'flex', - flexDirection: downPanelInRight ? 'row' : 'column', + flexDirection: addonPanelInRight ? 'row' : 'column', alignItems: 'stretch', position: 'absolute', width: '100%', height: '100%', - padding: downPanelInRight ? '5px 10px 10px 0' : '0px 10px 10px 0', + padding: addonPanelInRight ? '5px 10px 10px 0' : '0px 10px 10px 0', boxSizing: 'border-box', }); const resizerCursor = isVert => (isVert ? 'col-resize' : 'row-resize'); -const storiesResizerStyle = (showLeftPanel, leftPanelOnTop) => ({ - cursor: showLeftPanel ? resizerCursor(!leftPanelOnTop) : undefined, - height: leftPanelOnTop ? 10 : 'auto', - width: leftPanelOnTop ? '100%' : 10, +const storiesResizerStyle = (showStoriesPanel, storiesPanelOnTop) => ({ + cursor: showStoriesPanel ? resizerCursor(!storiesPanelOnTop) : undefined, + height: storiesPanelOnTop ? 10 : 'auto', + width: storiesPanelOnTop ? '100%' : 10, zIndex: 1, }); -const addonResizerStyle = (showDownPanel, downPanelInRight) => ({ - cursor: showDownPanel ? resizerCursor(downPanelInRight) : undefined, - height: downPanelInRight ? '100%' : 10, - width: downPanelInRight ? 10 : '100%', +const addonResizerStyle = (showAddonPanel, addonPanelInRight) => ({ + cursor: showAddonPanel ? resizerCursor(addonPanelInRight) : undefined, + height: addonPanelInRight ? '100%' : 10, + width: addonPanelInRight ? 10 : '100%', zIndex: 1, }); -const contentPanelStyle = (downPanelInRight, leftPanelOnTop) => ({ +const contentPanelStyle = (addonPanelInRight, storiesPanelOnTop) => ({ position: 'absolute', boxSizing: 'border-box', width: '100%', height: '100%', - padding: downPanelInRight ? '10px 2px 10px 0' : '10px 10px 2px 0', - paddingTop: leftPanelOnTop ? 0 : 10, + padding: addonPanelInRight ? '10px 2px 10px 0' : '10px 10px 2px 0', + paddingTop: storiesPanelOnTop ? 0 : 10, }); const normalPreviewStyle = { @@ -161,16 +161,16 @@ class Layout extends React.Component { render() { const { goFullScreen, - showLeftPanel, - showDownPanel, - downPanelInRight, - downPanel, - leftPanel, + showStoriesPanel, + showAddonPanel, + addonPanelInRight, + addonPanel, + storiesPanel, preview, } = this.props; const { previewPanelDimensions } = this.state; - const leftPanelOnTop = false; + const storiesPanelOnTop = false; let previewStyle = normalPreviewStyle; @@ -180,32 +180,36 @@ class Layout extends React.Component { const sizes = getSavedSizes(this.layerSizes); - const leftPanelDefaultSize = !leftPanelOnTop ? sizes.storiesPanel.left : sizes.storiesPanel.top; - const downPanelDefaultSize = !downPanelInRight ? sizes.addonPanel.down : sizes.addonPanel.right; + const storiesPanelDefaultSize = !storiesPanelOnTop + ? sizes.storiesPanel.left + : sizes.storiesPanel.top; + const addonPanelDefaultSize = !addonPanelInRight + ? sizes.addonPanel.down + : sizes.addonPanel.right; - const addonSplit = downPanelInRight ? 'vertical' : 'horizontal'; - const storiesSplit = leftPanelOnTop ? 'horizontal' : 'vertical'; + const addonSplit = addonPanelInRight ? 'vertical' : 'horizontal'; + const storiesSplit = storiesPanelOnTop ? 'horizontal' : 'vertical'; return (
{conditionalRender( - showLeftPanel, + showStoriesPanel, () => -
+
- {leftPanel()} + {storiesPanel()}
, @@ -214,18 +218,18 @@ class Layout extends React.Component { -
+
{ @@ -237,11 +241,11 @@ class Layout extends React.Component {
{conditionalRender( - showDownPanel, + showAddonPanel, () => -
+
- {downPanel()} + {addonPanel()}
, () => )} @@ -253,13 +257,13 @@ class Layout extends React.Component { } Layout.propTypes = { - showLeftPanel: PropTypes.bool.isRequired, - showDownPanel: PropTypes.bool.isRequired, + showStoriesPanel: PropTypes.bool.isRequired, + showAddonPanel: PropTypes.bool.isRequired, goFullScreen: PropTypes.bool.isRequired, - leftPanel: PropTypes.func.isRequired, + storiesPanel: PropTypes.func.isRequired, preview: PropTypes.func.isRequired, - downPanel: PropTypes.func.isRequired, - downPanelInRight: PropTypes.bool.isRequired, + addonPanel: PropTypes.func.isRequired, + addonPanelInRight: PropTypes.bool.isRequired, }; export default Layout; diff --git a/lib/ui/src/modules/ui/components/layout/index.test.js b/lib/ui/src/modules/ui/components/layout/index.test.js index 687b08fe5a2b..09811c55d2d3 100755 --- a/lib/ui/src/modules/ui/components/layout/index.test.js +++ b/lib/ui/src/modules/ui/components/layout/index.test.js @@ -7,18 +7,18 @@ describe('manager.ui.components.layout.index', () => { test('should render provided components', () => { const wrap = shallow( 'LeftPanel'} - downPanel={() => 'DownPanel'} + storiesPanel={() => 'StoriesPanel'} + addonPanel={() => 'AddonPanel'} preview={() => 'Preview'} /> ); const markup = wrap.html(); - expect(markup).toMatch(/LeftPanel/); - expect(markup).toMatch(/DownPanel/); + expect(markup).toMatch(/StoriesPanel/); + expect(markup).toMatch(/AddonPanel/); expect(markup).toMatch(/Preview/); }); }); @@ -28,55 +28,55 @@ describe('manager.ui.components.layout.index', () => { const wrap = shallow( 'LeftPanel'} - downPanel={() => 'DownPanel'} + storiesPanel={() => 'StoriesPanel'} + addonPanel={() => 'AddonPanel'} preview={() => 'Preview'} /> ); const markup = wrap.html(); - expect(markup).not.toMatch(/LeftPanel/); - expect(markup).not.toMatch(/DownPanel/); + expect(markup).not.toMatch(/StoriesPanel/); + expect(markup).not.toMatch(/AddonPanel/); expect(markup).toMatch(/Preview/); }); }); - describe('with showLeftPanel=false', () => { - test('should hide the leftPanel', () => { + describe('with showStoriesPanel=false', () => { + test('should hide the storiesPanel', () => { const wrap = shallow( 'LeftPanel'} - downPanel={() => 'DownPanel'} + storiesPanel={() => 'StoriesPanel'} + addonPanel={() => 'AddonPanel'} preview={() => 'Preview'} /> ); const markup = wrap.html(); - expect(markup).not.toMatch(/LeftPanel/); - expect(markup).toMatch(/DownPanel/); + expect(markup).not.toMatch(/StoriesPanel/); + expect(markup).toMatch(/AddonPanel/); expect(markup).toMatch(/Preview/); }); }); - describe('with showDownPanel=false', () => { - test('should hide the downPanel', () => { + describe('with showAddonPanel=false', () => { + test('should hide the addonPanel', () => { const wrap = shallow( 'LeftPanel'} - downPanel={() => 'DownPanel'} + storiesPanel={() => 'StoriesPanel'} + addonPanel={() => 'AddonPanel'} preview={() => 'Preview'} /> ); const markup = wrap.html(); - expect(markup).toMatch(/LeftPanel/); - expect(markup).not.toMatch(/DownPanel/); + expect(markup).toMatch(/StoriesPanel/); + expect(markup).not.toMatch(/AddonPanel/); expect(markup).toMatch(/Preview/); }); }); diff --git a/lib/ui/src/modules/ui/components/shortcuts_help.js b/lib/ui/src/modules/ui/components/shortcuts_help.js index 9fb87a273c4c..fa3407d31d66 100755 --- a/lib/ui/src/modules/ui/components/shortcuts_help.js +++ b/lib/ui/src/modules/ui/components/shortcuts_help.js @@ -40,10 +40,10 @@ export function getShortcuts(platform) { if (platform && platform.indexOf('mac') !== -1) { return [ { name: 'Show Search Box', keys: ['⌘ ⇧ P', '⌃ ⇧ P'] }, - { name: 'Toggle Action Logger position', keys: ['⌘ ⇧ J', '⌃ ⇧ J'] }, + { name: 'Toggle Addon panel position', keys: ['⌘ ⇧ J', '⌃ ⇧ J'] }, { name: 'Toggle Fullscreen Mode', keys: ['⌘ ⇧ F', '⌃ ⇧ F'] }, - { name: 'Toggle Left Panel', keys: ['⌘ ⇧ L', '⌃ ⇧ L'] }, - { name: 'Toggle Down Panel', keys: ['⌘ ⇧ D', '⌃ ⇧ D'] }, + { name: 'Toggle Stories Panel', keys: ['⌘ ⇧ L', '⌃ ⇧ L'] }, + { name: 'Toggle Addon panel', keys: ['⌘ ⇧ D', '⌃ ⇧ D'] }, { name: 'Next Story', keys: ['⌘ ⇧ →', '⌃ ⇧ →'] }, { name: 'Previous Story', keys: ['⌘ ⇧ ←', '⌃ ⇧ ←'] }, ]; @@ -51,10 +51,10 @@ export function getShortcuts(platform) { return [ { name: 'Show Search Box', keys: ['Ctrl + Shift + P'] }, - { name: 'Toggle Action Logger position', keys: ['Ctrl + Shift + J'] }, + { name: 'Toggle Addon panel position', keys: ['Ctrl + Shift + J'] }, { name: 'Toggle Fullscreen Mode', keys: ['Ctrl + Shift + F'] }, - { name: 'Toggle Left Panel', keys: ['Ctrl + Shift + L'] }, - { name: 'Toggle Down Panel', keys: ['Ctrl + Shift + D'] }, + { name: 'Toggle Stories Panel', keys: ['Ctrl + Shift + L'] }, + { name: 'Toggle Addon panel', keys: ['Ctrl + Shift + D'] }, { name: 'Next Story', keys: ['Ctrl + Shift + →'] }, { name: 'Previous Story', keys: ['Ctrl + Shift + ←'] }, ]; diff --git a/lib/ui/src/modules/ui/components/left_panel/header.js b/lib/ui/src/modules/ui/components/stories_panel/header.js similarity index 100% rename from lib/ui/src/modules/ui/components/left_panel/header.js rename to lib/ui/src/modules/ui/components/stories_panel/header.js diff --git a/lib/ui/src/modules/ui/components/left_panel/header.test.js b/lib/ui/src/modules/ui/components/stories_panel/header.test.js similarity index 86% rename from lib/ui/src/modules/ui/components/left_panel/header.test.js rename to lib/ui/src/modules/ui/components/stories_panel/header.test.js index 9d65d36d6c5f..e353296e32c8 100755 --- a/lib/ui/src/modules/ui/components/left_panel/header.test.js +++ b/lib/ui/src/modules/ui/components/stories_panel/header.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { shallow } from 'enzyme'; import Header from './header'; -describe('manager.ui.components.left_panel.header', () => { +describe('manager.ui.components.stories_panel.header', () => { test('should fire openShortcutsHelp when clicked on shortcut button', () => { const openShortcutsHelp = jest.fn(); const wrap = shallow(
); diff --git a/lib/ui/src/modules/ui/components/left_panel/index.js b/lib/ui/src/modules/ui/components/stories_panel/index.js similarity index 93% rename from lib/ui/src/modules/ui/components/left_panel/index.js rename to lib/ui/src/modules/ui/components/stories_panel/index.js index e38994898a9c..57ae6ab563da 100755 --- a/lib/ui/src/modules/ui/components/left_panel/index.js +++ b/lib/ui/src/modules/ui/components/stories_panel/index.js @@ -30,7 +30,7 @@ function hierarchyContainsStories(storiesHierarchy) { } // eslint-disable-next-line react/prefer-stateless-function -class LeftPanel extends Component { +class StoriesPanel extends Component { render() { const { name, @@ -59,7 +59,7 @@ class LeftPanel extends Component { } } -LeftPanel.defaultProps = { +StoriesPanel.defaultProps = { storiesHierarchy: null, storyFilter: null, onStoryFilter: () => {}, @@ -68,7 +68,7 @@ LeftPanel.defaultProps = { url: '', }; -LeftPanel.propTypes = { +StoriesPanel.propTypes = { storiesHierarchy: PropTypes.shape({ namespaces: PropTypes.arrayOf(PropTypes.string), name: PropTypes.string, @@ -82,4 +82,4 @@ LeftPanel.propTypes = { url: PropTypes.string, }; -export default LeftPanel; +export default StoriesPanel; diff --git a/lib/ui/src/modules/ui/components/left_panel/index.test.js b/lib/ui/src/modules/ui/components/stories_panel/index.test.js similarity index 82% rename from lib/ui/src/modules/ui/components/left_panel/index.test.js rename to lib/ui/src/modules/ui/components/stories_panel/index.test.js index 03c3e2da6aae..0f91f76e8109 100755 --- a/lib/ui/src/modules/ui/components/left_panel/index.test.js +++ b/lib/ui/src/modules/ui/components/stories_panel/index.test.js @@ -1,17 +1,17 @@ import React from 'react'; import { shallow } from 'enzyme'; -import LeftPanel from './index'; +import StoriesPanel from './index'; import Header from './header'; import TextFilter from './text_filter'; import Stories from './stories_tree'; import { createHierarchy } from '../../libs/hierarchy'; -describe('manager.ui.components.left_panel.index', () => { +describe('manager.ui.components.stories_panel.index', () => { test('should render Header and TextFilter by default', () => { const openShortcutsHelp = jest.fn(); const storyFilter = 'xxxxx'; const wrap = shallow( - + ); const header = wrap.find(Header).first(); @@ -28,7 +28,7 @@ describe('manager.ui.components.left_panel.index', () => { const selectedStory = 'bb'; const storiesHierarchy = createHierarchy([{ kind: 'kk', stories: ['bb'] }]); const wrap = shallow( - { test('should not render stories if storiesHierarchy exists but is empty', () => { const storiesHierarchy = createHierarchy([]); - const wrap = shallow(); + const wrap = shallow(); expect(wrap.find(Stories).exists()).toBe(false); }); @@ -54,7 +54,7 @@ describe('manager.ui.components.left_panel.index', () => { describe('onStoryFilter prop', () => { test('should set filter as an empty text on TextFilter.onClear', () => { const onStoryFilter = jest.fn(); - const wrap = shallow(); + const wrap = shallow(); const textFilter = wrap.find(TextFilter).first(); textFilter.props().onClear(); @@ -65,7 +65,7 @@ describe('manager.ui.components.left_panel.index', () => { test('should set filter as the given text of TextFilter.onChange', () => { const onStoryFilter = jest.fn(); const filterText = 'XXX'; - const wrap = shallow(); + const wrap = shallow(); const textFilter = wrap.find(TextFilter).first(); textFilter.props().onChange(filterText); diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js similarity index 100% rename from lib/ui/src/modules/ui/components/left_panel/stories_tree/index.js rename to lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js similarity index 99% rename from lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js rename to lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js index 708fdcc8d183..ae8a22c3f1dd 100644 --- a/lib/ui/src/modules/ui/components/left_panel/stories_tree/index.test.js +++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js @@ -6,7 +6,7 @@ import { createHierarchy } from '../../../libs/hierarchy'; const leftClick = { button: 0 }; -describe('manager.ui.components.left_panel.stories', () => { +describe('manager.ui.components.stories_panel.stories', () => { beforeEach(() => setContext({ clientStore: { diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js similarity index 100% rename from lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators.js rename to lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_node_type.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_node_type.js similarity index 100% rename from lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_node_type.js rename to lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_node_type.js diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_style.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_style.js similarity index 100% rename from lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_style.js rename to lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_style.js diff --git a/lib/ui/src/modules/ui/components/left_panel/text_filter.js b/lib/ui/src/modules/ui/components/stories_panel/text_filter.js similarity index 100% rename from lib/ui/src/modules/ui/components/left_panel/text_filter.js rename to lib/ui/src/modules/ui/components/stories_panel/text_filter.js diff --git a/lib/ui/src/modules/ui/components/left_panel/text_filter.test.js b/lib/ui/src/modules/ui/components/stories_panel/text_filter.test.js similarity index 95% rename from lib/ui/src/modules/ui/components/left_panel/text_filter.test.js rename to lib/ui/src/modules/ui/components/stories_panel/text_filter.test.js index 184415db2471..24f704a35d5e 100755 --- a/lib/ui/src/modules/ui/components/left_panel/text_filter.test.js +++ b/lib/ui/src/modules/ui/components/stories_panel/text_filter.test.js @@ -4,7 +4,7 @@ import TextFilter from './text_filter'; jest.mock('lodash.debounce', () => jest.fn(fn => fn)); -describe('manager.ui.components.left_panel.test_filter', () => { +describe('manager.ui.components.stories_panel.test_filter', () => { describe('render', () => { test('should render input without filterText', () => { const wrap = shallow(); diff --git a/lib/ui/src/modules/ui/configs/handle_routing.js b/lib/ui/src/modules/ui/configs/handle_routing.js index 1ca89a8a021e..3727b3ec8bb5 100755 --- a/lib/ui/src/modules/ui/configs/handle_routing.js +++ b/lib/ui/src/modules/ui/configs/handle_routing.js @@ -10,22 +10,22 @@ export function getUrlState(data) { const { goFullScreen: full, - showDownPanel: down, - showLeftPanel: left, - downPanelInRight: panelRight, + showAddonPanel: addons, + showStoriesPanel: stories, + addonPanelInRight: panelRight, } = data.shortcutOptions; - const { selectedAddonPanel: downPanel } = data; + const { selectedAddonPanel: addonPanel } = data; const urlObj = { ...customQueryParams, selectedKind, selectedStory, full: Number(full), - down: Number(down), - left: Number(left), + addons: Number(addons), + stories: Number(stories), panelRight: Number(panelRight), - downPanel, + addonPanel, }; const url = `?${qs.stringify(urlObj)}`; @@ -33,8 +33,8 @@ export function getUrlState(data) { return { ...urlObj, full, - down, - left, + addons, + stories, panelRight, url, }; @@ -57,9 +57,12 @@ export function updateStore(queryParams, actions) { selectedStory, full = 0, down = 1, + addons = down, left = 1, + stories = left, panelRight = 0, downPanel, + addonPanel = downPanel, ...customQueryParams } = queryParams; @@ -69,13 +72,13 @@ export function updateStore(queryParams, actions) { actions.shortcuts.setOptions({ goFullScreen: Boolean(Number(full)), - showDownPanel: Boolean(Number(down)), - showLeftPanel: Boolean(Number(left)), - downPanelInRight: Boolean(Number(panelRight)), + showAddonPanel: Boolean(Number(addons)), + showStoriesPanel: Boolean(Number(stories)), + addonPanelInRight: Boolean(Number(panelRight)), }); - if (downPanel) { - actions.ui.selectDownPanel(downPanel); + if (addonPanel) { + actions.ui.selectAddonPanel(addonPanel); } actions.api.setQueryParams(customQueryParams); } diff --git a/lib/ui/src/modules/ui/configs/handle_routing.test.js b/lib/ui/src/modules/ui/configs/handle_routing.test.js index aea5bbdd270b..0fafc1df698b 100755 --- a/lib/ui/src/modules/ui/configs/handle_routing.test.js +++ b/lib/ui/src/modules/ui/configs/handle_routing.test.js @@ -19,9 +19,9 @@ describe('manager.ui.config.handle_routing', () => { }, shortcutOptions: { goFullScreen: false, - showDownPanel: true, - showLeftPanel: true, - downPanelInRight: true, + showAddonPanel: true, + showStoriesPanel: true, + addonPanelInRight: true, }, selectedAddonPanel: 'pp', }; @@ -29,17 +29,17 @@ describe('manager.ui.config.handle_routing', () => { getAll: () => state, }; const url = - '?customText=test&selectedKind=kk&selectedStory=ss&full=0&down=1&left=1&panelRight=1&downPanel=pp'; + '?customText=test&selectedKind=kk&selectedStory=ss&full=0&addons=1&stories=1&panelRight=1&addonPanel=pp'; const pushState = { url, selectedKind: 'kk', selectedStory: 'ss', full: false, - down: true, - left: true, + addons: true, + stories: true, panelRight: true, - downPanel: 'pp', + addonPanel: 'pp', customText: 'test', }; const originalPushState = window.history.pushState; @@ -66,11 +66,11 @@ describe('manager.ui.config.handle_routing', () => { setOptions: jest.fn(), }, ui: { - selectDownPanel: jest.fn(), + selectAddonPanel: jest.fn(), }, }; const url = - '?selectedKind=kk&selectedStory=ss&full=1&down=0&left=0&panelRight=0&downPanel=test&customText=teststring'; + '?selectedKind=kk&selectedStory=ss&full=1&addons=0&stories=0&panelRight=0&addonPanel=test&customText=teststring'; const location = { search: url, @@ -80,17 +80,48 @@ describe('manager.ui.config.handle_routing', () => { expect(actions.api.selectStory).toHaveBeenCalled(); expect(actions.shortcuts.setOptions).toHaveBeenCalled(); - expect(actions.ui.selectDownPanel).toHaveBeenCalled(); + expect(actions.ui.selectAddonPanel).toHaveBeenCalled(); expect(actions.shortcuts.setOptions).toHaveBeenCalledWith({ goFullScreen: true, - showDownPanel: false, - showLeftPanel: false, - downPanelInRight: false, + showAddonPanel: false, + showStoriesPanel: false, + addonPanelInRight: false, }); - expect(actions.ui.selectDownPanel).toHaveBeenCalledWith('test'); + expect(actions.ui.selectAddonPanel).toHaveBeenCalledWith('test'); expect(actions.api.setQueryParams).toHaveBeenCalledWith({ customText: 'teststring', }); }); + + test('should handle URLs with outdated param names', () => { + const actions = { + api: { + selectStory: jest.fn(), + setQueryParams: jest.fn(), + }, + shortcuts: { + setOptions: jest.fn(), + }, + ui: { + selectAddonPanel: jest.fn(), + }, + }; + const url = '?down=0&left=0&downPanel=test'; + + const location = { + search: url, + }; + window.location.search = url; + handleInitialUrl(actions, location); + + expect(actions.shortcuts.setOptions).toHaveBeenCalled(); + expect(actions.shortcuts.setOptions).toHaveBeenCalledWith({ + goFullScreen: false, + showAddonPanel: false, + showStoriesPanel: false, + addonPanelInRight: false, + }); + expect(actions.ui.selectAddonPanel).toHaveBeenCalledWith('test'); + }); }); }); diff --git a/lib/ui/src/modules/ui/configs/init_panels.js b/lib/ui/src/modules/ui/configs/init_panels.js index ba898142da96..b1f7b58a23af 100644 --- a/lib/ui/src/modules/ui/configs/init_panels.js +++ b/lib/ui/src/modules/ui/configs/init_panels.js @@ -2,6 +2,6 @@ export default function({ provider }, actionMap) { const panels = Object.keys(provider.getPanels()); if (panels.length > 0) { - actionMap.ui.selectDownPanel(panels[0]); + actionMap.ui.selectAddonPanel(panels[0]); } } diff --git a/lib/ui/src/modules/ui/configs/init_panels.test.js b/lib/ui/src/modules/ui/configs/init_panels.test.js index c8bbce25711f..8c9040a507d1 100644 --- a/lib/ui/src/modules/ui/configs/init_panels.test.js +++ b/lib/ui/src/modules/ui/configs/init_panels.test.js @@ -1,10 +1,10 @@ import initPanels from './init_panels'; describe('manager.ui.config.init_panels', () => { - test('should call the selectDownPanel with first panel name', () => { + test('should call the selectAddonPanel with first panel name', () => { const actions = { ui: { - selectDownPanel: jest.fn(), + selectAddonPanel: jest.fn(), }, }; @@ -20,6 +20,6 @@ describe('manager.ui.config.init_panels', () => { initPanels({ provider }, actions); - expect(actions.ui.selectDownPanel).toHaveBeenCalledWith('test1'); + expect(actions.ui.selectAddonPanel).toHaveBeenCalledWith('test1'); }); }); diff --git a/lib/ui/src/modules/ui/containers/down_panel.js b/lib/ui/src/modules/ui/containers/addon_panel.js similarity index 67% rename from lib/ui/src/modules/ui/containers/down_panel.js rename to lib/ui/src/modules/ui/containers/addon_panel.js index d356dc69c149..7aef41f17422 100644 --- a/lib/ui/src/modules/ui/containers/down_panel.js +++ b/lib/ui/src/modules/ui/containers/addon_panel.js @@ -1,4 +1,4 @@ -import DownPanel from '../components/down_panel'; +import AddonPanel from '../components/addon_panel'; import genPoddaLoader from '../libs/gen_podda_loader'; import compose from '../../../compose'; @@ -10,8 +10,8 @@ export function mapper(state, props, { context, actions }) { return { panels, selectedPanel, - onPanelSelect: actionMap.ui.selectDownPanel, + onPanelSelect: actionMap.ui.selectAddonPanel, }; } -export default compose(genPoddaLoader(mapper))(DownPanel); +export default compose(genPoddaLoader(mapper))(AddonPanel); diff --git a/lib/ui/src/modules/ui/containers/down_panel.test.js b/lib/ui/src/modules/ui/containers/addon_panel.test.js similarity index 72% rename from lib/ui/src/modules/ui/containers/down_panel.test.js rename to lib/ui/src/modules/ui/containers/addon_panel.test.js index fb534adca717..4fb0a31133a4 100644 --- a/lib/ui/src/modules/ui/containers/down_panel.test.js +++ b/lib/ui/src/modules/ui/containers/addon_panel.test.js @@ -1,13 +1,13 @@ -import { mapper } from './down_panel'; +import { mapper } from './addon_panel'; -describe('manager.ui.containers.down_panel', () => { +describe('manager.ui.containers.addon_panel', () => { describe('mapper', () => { test('should give correct data', () => { const state = { selectedAddonPanel: 'sdp', }; - const selectDownPanel = () => 'selectDownPanel'; + const selectAddonPanel = () => 'selectAddonPanel'; const panels = { test1: {}, test2: {}, @@ -19,7 +19,7 @@ describe('manager.ui.containers.down_panel', () => { const env = { actions: () => ({ ui: { - selectDownPanel, + selectAddonPanel, }, }), context: () => ({ @@ -33,7 +33,7 @@ describe('manager.ui.containers.down_panel', () => { expect(result.panels).toEqual(panels); expect(result.selectedPanel).toEqual('sdp'); - expect(result.onPanelSelect).toBe(selectDownPanel); + expect(result.onPanelSelect).toBe(selectAddonPanel); }); }); }); diff --git a/lib/ui/src/modules/ui/containers/layout.js b/lib/ui/src/modules/ui/containers/layout.js index 2abed63b41d1..cb89879735ea 100755 --- a/lib/ui/src/modules/ui/containers/layout.js +++ b/lib/ui/src/modules/ui/containers/layout.js @@ -4,6 +4,6 @@ import genPoddaLoader from '../libs/gen_podda_loader'; import compose from '../../../compose'; export const mapper = ({ shortcutOptions }) => - pick(shortcutOptions, 'showLeftPanel', 'showDownPanel', 'goFullScreen', 'downPanelInRight'); + pick(shortcutOptions, 'showStoriesPanel', 'showAddonPanel', 'goFullScreen', 'addonPanelInRight'); export default compose(genPoddaLoader(mapper))(Layout); diff --git a/lib/ui/src/modules/ui/containers/layout.test.js b/lib/ui/src/modules/ui/containers/layout.test.js index b837078d660d..2aabf74f37d4 100755 --- a/lib/ui/src/modules/ui/containers/layout.test.js +++ b/lib/ui/src/modules/ui/containers/layout.test.js @@ -5,8 +5,8 @@ describe('manager.ui.containers.layout', () => { test('should give correct data', () => { const state = { shortcutOptions: { - showLeftPanel: 'aa', - showDownPanel: 'bb', + showStoriesPanel: 'aa', + showAddonPanel: 'bb', goFullScreen: 'cc', }, }; diff --git a/lib/ui/src/modules/ui/containers/left_panel.js b/lib/ui/src/modules/ui/containers/stories_panel.js similarity index 90% rename from lib/ui/src/modules/ui/containers/left_panel.js rename to lib/ui/src/modules/ui/containers/stories_panel.js index 43188d6378a7..23e49b27cda8 100755 --- a/lib/ui/src/modules/ui/containers/left_panel.js +++ b/lib/ui/src/modules/ui/containers/stories_panel.js @@ -1,4 +1,4 @@ -import LeftPanel from '../components/left_panel'; +import StoriesPanel from '../components/stories_panel'; import * as filters from '../libs/filters'; import genPoddaLoader from '../libs/gen_podda_loader'; import compose from '../../../compose'; @@ -38,4 +38,4 @@ export const mapper = (state, props, { actions }) => { return data; }; -export default compose(genPoddaLoader(mapper))(LeftPanel); +export default compose(genPoddaLoader(mapper))(StoriesPanel); diff --git a/lib/ui/src/modules/ui/containers/left_panel.test.js b/lib/ui/src/modules/ui/containers/stories_panel.test.js similarity index 97% rename from lib/ui/src/modules/ui/containers/left_panel.test.js rename to lib/ui/src/modules/ui/containers/stories_panel.test.js index 8896e6ed983c..bc80a8257692 100755 --- a/lib/ui/src/modules/ui/containers/left_panel.test.js +++ b/lib/ui/src/modules/ui/containers/stories_panel.test.js @@ -1,6 +1,6 @@ -import { mapper } from './left_panel'; +import { mapper } from './stories_panel'; -describe('manager.ui.containers.left_panel', () => { +describe('manager.ui.containers.stories_panel', () => { describe('mapper', () => { test('should give correct data', () => { const stories = [{ kind: 'sk', stories: ['dd'] }]; diff --git a/lib/ui/src/modules/ui/routes.js b/lib/ui/src/modules/ui/routes.js index a59f7f7712ba..98c536c633fc 100755 --- a/lib/ui/src/modules/ui/routes.js +++ b/lib/ui/src/modules/ui/routes.js @@ -1,8 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Layout from './containers/layout'; -import LeftPanel from './containers/left_panel'; -import DownPanel from './containers/down_panel'; +import StoriesPanel from './containers/stories_panel'; +import AddonPanel from './containers/addon_panel'; import ShortcutsHelp from './containers/shortcuts_help'; import SearchBox from './containers/search_box'; @@ -17,9 +17,9 @@ export default function(injectDeps, { clientStore, provider, domNode }) { const root = (
} + storiesPanel={() => } preview={() => } - downPanel={() => } + addonPanel={() => } /> From 2233afd1aedfc2bd9837d0afb63ef098f730b1e7 Mon Sep 17 00:00:00 2001 From: hypnos Date: Sun, 20 Aug 2017 06:42:39 +0300 Subject: [PATCH 2/5] Produce warning only in development --- lib/ui/src/modules/shortcuts/actions/shortcuts.js | 8 +++++--- lib/ui/src/modules/shortcuts/actions/shortcuts.test.js | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/ui/src/modules/shortcuts/actions/shortcuts.js b/lib/ui/src/modules/shortcuts/actions/shortcuts.js index 71b9eaad575b..3c25b5e83412 100755 --- a/lib/ui/src/modules/shortcuts/actions/shortcuts.js +++ b/lib/ui/src/modules/shortcuts/actions/shortcuts.js @@ -3,7 +3,7 @@ import { features } from '../../../libs/key_events'; import apiActions from '../../api/actions'; const deprecationMessage = (oldName, newName) => - `The ${oldName} prop is renamed to ${newName} and will not be available since the next major Storybook release. Please update your config.`; + `The ${oldName} option has been renamed to ${newName} and will not be available in the next major Storybook release. Please update your config.`; export function keyEventToOptions(currentOptions, event) { switch (event) { @@ -64,8 +64,10 @@ export default { const newName = renamedOptions[oldName]; if (oldName in options && !(newName in options)) { - // eslint-disable-next-line no-console - console.warn(deprecationMessage(oldName, newName)); + if (process.env.NODE_ENV !== 'production') { + // eslint-disable-next-line no-console + console.warn(deprecationMessage(oldName, newName)); + } return { ...acc, diff --git a/lib/ui/src/modules/shortcuts/actions/shortcuts.test.js b/lib/ui/src/modules/shortcuts/actions/shortcuts.test.js index 09a0b42c7b44..459a7e05860d 100644 --- a/lib/ui/src/modules/shortcuts/actions/shortcuts.test.js +++ b/lib/ui/src/modules/shortcuts/actions/shortcuts.test.js @@ -38,7 +38,7 @@ describe('manager.shortcuts.actions.shortcuts', () => { test('should warn about deprecated option names', () => { const clientStore = new MockClientStore(); - const spy = jest.spyOn(global.console, 'warn'); + const spy = jest.spyOn(console, 'warn'); actions.setOptions( { clientStore }, { From 1ad0decfb7b10ef8303d1daa19cff5d3f1550916 Mon Sep 17 00:00:00 2001 From: hypnos Date: Sun, 20 Aug 2017 13:18:19 +0300 Subject: [PATCH 3/5] String literals in features enum --- lib/ui/src/libs/key_events.js | 20 +++++++++---------- .../modules/shortcuts/actions/shortcuts.js | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/lib/ui/src/libs/key_events.js b/lib/ui/src/libs/key_events.js index bd54cf090692..c1cd9765b67d 100755 --- a/lib/ui/src/libs/key_events.js +++ b/lib/ui/src/libs/key_events.js @@ -1,15 +1,15 @@ import keycode from 'keycode'; export const features = { - FULLSCREEN: 1, - ADDON_PANEL: 2, - NAVIGATION_PANEL: 3, - SHORTCUTS_HELP: 4, - ESCAPE: 5, - NEXT_STORY: 6, - PREV_STORY: 7, - SHOW_SEARCH: 8, - ADDON_PANEL_IN_RIGHT: 9, + FULLSCREEN: 'FULLSCREEN', + ADDON_PANEL: 'ADDON_PANEL', + STORIES_PANEL: 'STORIES_PANEL', + SHORTCUTS_HELP: 'SHORTCUTS_HELP', + ESCAPE: 'ESCAPE', + NEXT_STORY: 'NEXT_STORY', + PREV_STORY: 'PREV_STORY', + SHOW_SEARCH: 'SHOW_SEARCH', + ADDON_PANEL_IN_RIGHT: 'ADDON_PANEL_IN_RIGHT', }; export function isModifierPressed(e) { @@ -45,7 +45,7 @@ export default function handle(e) { return features.ADDON_PANEL; case keycode('L'): e.preventDefault(); - return features.NAVIGATION_PANEL; + return features.STORIES_PANEL; case keycode('right'): e.preventDefault(); return features.NEXT_STORY; diff --git a/lib/ui/src/modules/shortcuts/actions/shortcuts.js b/lib/ui/src/modules/shortcuts/actions/shortcuts.js index 3c25b5e83412..1920b154e013 100755 --- a/lib/ui/src/modules/shortcuts/actions/shortcuts.js +++ b/lib/ui/src/modules/shortcuts/actions/shortcuts.js @@ -11,7 +11,7 @@ export function keyEventToOptions(currentOptions, event) { return { goFullScreen: !currentOptions.goFullScreen }; case features.ADDON_PANEL: return { showAddonPanel: !currentOptions.showAddonPanel }; - case features.NAVIGATION_PANEL: + case features.STORIES_PANEL: return { showStoriesPanel: !currentOptions.showStoriesPanel }; case features.SHOW_SEARCH: return { showSearchBox: true }; From 30b02e78989e84242774e976af98d0c9ee3c5055 Mon Sep 17 00:00:00 2001 From: hypnos Date: Sun, 20 Aug 2017 14:40:18 +0300 Subject: [PATCH 4/5] merge master --- .../stories_tree/tree_decorators_utils.js | 0 .../stories_tree/tree_decorators_utils.test.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/stories_tree/tree_decorators_utils.js (100%) rename lib/ui/src/modules/ui/components/{left_panel => stories_panel}/stories_tree/tree_decorators_utils.test.js (92%) diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators_utils.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.js similarity index 100% rename from lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators_utils.js rename to lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.js diff --git a/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators_utils.test.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.test.js similarity index 92% rename from lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators_utils.test.js rename to lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.test.js index 1de23bb03820..1688a1867d6f 100644 --- a/lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators_utils.test.js +++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators_utils.test.js @@ -1,7 +1,7 @@ import { shallow } from 'enzyme'; import { highlightNode } from './tree_decorators_utils'; -describe('manager.ui.components.left_panel.tree_decorators_utils.test', () => { +describe('manager.ui.components.stories_panel.tree_decorators_utils.test', () => { describe('highlightNode', () => { test('should return name when there no highlighting matches', () => { const node = { From 26307a08a0f0017f5aaba4c7c7f0ca0811a9b0f5 Mon Sep 17 00:00:00 2001 From: hypnos Date: Thu, 31 Aug 2017 02:08:32 +0300 Subject: [PATCH 5/5] Update addons/options README --- addons/options/README.md | 14 +++++++------- .../src/modules/ui/components/layout/index.test.js | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/addons/options/README.md b/addons/options/README.md index b000c47fb8a7..3dd473b12a8b 100644 --- a/addons/options/README.md +++ b/addons/options/README.md @@ -53,25 +53,25 @@ setOptions({ */ goFullScreen: false, /** - * display left panel that shows a list of stories + * display panel that shows a list of stories * @type {Boolean} */ - showLeftPanel: true, + showStoriesPanel: true, /** - * display horizontal panel that displays addon configurations + * display panel that shows addon configurations * @type {Boolean} */ - showDownPanel: true, + showAddonPanel: true, /** * display floating search box to search through stories * @type {Boolean} */ showSearchBox: false, /** - * show horizontal addons panel as a vertical panel on the right + * show addon panel as a vertical panel on the right * @type {Boolean} */ - downPanelInRight: false, + addonPanelInRight: false, /** * sorts stories * @type {Boolean} @@ -98,7 +98,7 @@ setOptions({ * id to select an addon panel * @type {String} */ - selectedAddonPanel: undefined, // The order of addons in the "Addons Panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook + 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 }); storybook.configure(() => require('./stories'), module); diff --git a/lib/ui/src/modules/ui/components/layout/index.test.js b/lib/ui/src/modules/ui/components/layout/index.test.js index 6cd1a2acade6..9d579154734a 100755 --- a/lib/ui/src/modules/ui/components/layout/index.test.js +++ b/lib/ui/src/modules/ui/components/layout/index.test.js @@ -28,8 +28,8 @@ describe('manager.ui.components.layout.index', () => { test('should only render preview', () => { const wrap = shallow( 'StoriesPanel'}