Fix stories-panel: still need to pass url and name via props

examples/cra-kitchen-sink/.storybook/config.js

@@ -8,14 +8,13 @@ setOptions({
   name: 'CRA Kitchen Sink',
   url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
   goFullScreen: false,
-  // showStoriesPanel: true,
   showAddonsPanel: true,
   showSearchBox: false,
   addonPanelInRight: true,
   sortStoriesByKind: false,
   hierarchySeparator: /\./,
   hierarchyRootSeparator: /\|/,
-}, 'shit');
+});
 
 // deprecated usage of infoAddon
 setAddon(infoAddon);

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

@@ -4,9 +4,6 @@ import pick from 'lodash.pick';
 import Header from '../header';
 import Stories from './stories_tree';
 import TextFilter from './text_filter';
-import checkIfMobileDevice from '../../libs/is_mobile_device';
-
-const isMobileDevice = checkIfMobileDevice();
 
 const scrollStyle = {
   height: 'calc(100vh - 105px)',
@@ -49,11 +46,11 @@ class StoriesPanel extends Component {
   }
 
   render() {
-    const { onStoryFilter, storyFilter, openShortcutsHelp } = this.props;
+    const { onStoryFilter, storyFilter, openShortcutsHelp, isMobileDevice, name, url } = this.props;
 
     return (
       <div style={mainStyle}>
-        {!isMobileDevice && <Header openShortcutsHelp={openShortcutsHelp} />}
+        {!isMobileDevice && <Header name={name} url={url} openShortcutsHelp={openShortcutsHelp} />}
         <TextFilter
           text={storyFilter}
           onClear={() => onStoryFilter('')}
@@ -70,6 +67,7 @@ StoriesPanel.defaultProps = {
   storyFilter: null,
   onStoryFilter: () => {},
   openShortcutsHelp: null,
+  isMobileDevice: false,
   name: '',
   url: '',
 };
@@ -86,6 +84,7 @@ StoriesPanel.propTypes = {
   onStoryFilter: PropTypes.func,
 
   openShortcutsHelp: PropTypes.func,
+  isMobileDevice: PropTypes.bool,
   name: PropTypes.string,
   url: PropTypes.string,
 };

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

@@ -12,7 +12,7 @@ const decorator = withLifecyle({
     setContext({
       clientStore: {
         getAll() {
-          return { shortcutOptions: {} };
+          return { shortcutOptions: {}, uiOptions: {}, actions: { ui: {} } };
         },
         subscribe() {},
       },

lib/ui/src/modules/ui/containers/header.js

@@ -3,7 +3,7 @@ import Header from '../components/header';
 import genPoddaLoader from '../libs/gen_podda_loader';
 import compose from '../../../compose';
 
-export const headerMapper = (state, props, { actions }) => {
+export const mapper = (state, props, { actions }) => {
   const currentOptions = pick(
     state.shortcutOptions,
     'showStoriesPanel',
@@ -14,7 +14,6 @@ export const headerMapper = (state, props, { actions }) => {
 
   const actionMap = actions();
   const { uiOptions, isMobileDevice } = state;
-
   const { name = '', url = '' } = uiOptions;
 
   const handleBurgerButtonClick = () => {
@@ -36,4 +35,4 @@ export const headerMapper = (state, props, { actions }) => {
   };
 };
 
-export default compose(genPoddaLoader(headerMapper))(Header);
+export default compose(genPoddaLoader(mapper))(Header);

lib/ui/src/modules/ui/containers/header.test.js

@@ -1,7 +1,7 @@
-import { headerMapper } from './header';
+import { mapper } from './header';
 
 describe('manager.ui.containers.header', () => {
-  describe('headerMapper', () => {
+  describe('mapper', () => {
     test('should give correct data', () => {
       const uiOptions = {
         name: 'foo',
@@ -27,7 +27,7 @@ describe('manager.ui.containers.header', () => {
         shortcutOptions,
       };
 
-      const result = headerMapper(state, props, env);
+      const result = mapper(state, props, env);
 
       expect(result.showStoriesPanel).toEqual('aa');
       expect(result.showAddonPanel).toEqual('bb');
@@ -41,7 +41,7 @@ describe('manager.ui.containers.header', () => {
         isMobileDevice: true,
       };
 
-      const resultWhenMobileDevice = headerMapper(stateWhenMobileDevice, props, env);
+      const resultWhenMobileDevice = mapper(stateWhenMobileDevice, props, env);
       expect(resultWhenMobileDevice.addonPanelInRight).toEqual(false);
     });
   });

lib/ui/src/modules/ui/containers/layout.js

@@ -2,13 +2,11 @@ import pick from 'lodash.pick';
 import Layout from '../components/layout';
 import genPoddaLoader from '../libs/gen_podda_loader';
 import compose from '../../../compose';
-import checkIfMobileDevice from '../libs/is_mobile_device';
 
-const isMobileDevice = checkIfMobileDevice();
-
-export const shortcutMapper = state => {
+export const mapper = state => {
+  const { shortcutOptions, isMobileDevice } = state;
   const currentOptions = pick(
-    state.shortcutOptions,
+    shortcutOptions,
     'showStoriesPanel',
     'showAddonPanel',
     'goFullScreen',
@@ -21,4 +19,4 @@ export const shortcutMapper = state => {
   };
 };
 
-export default compose(genPoddaLoader(shortcutMapper))(Layout);
+export default compose(genPoddaLoader(mapper))(Layout);

lib/ui/src/modules/ui/containers/layout.test.js

@@ -1,17 +1,16 @@
-import { shortcutMapper } from './layout';
+import { mapper } from './layout';
 
 describe('manager.ui.containers.layout', () => {
-  describe('shortcutMapper', () => {
+  describe('mapper', () => {
     test('should give correct data', () => {
       const state = {
         shortcutOptions: {
           showStoriesPanel: 'aa',
           showAddonPanel: 'bb',
           goFullScreen: 'cc',
-          isMobileDevice: false,
         },
       };
-      const data = shortcutMapper(state);
+      const data = mapper(state);
 
       expect(data).toEqual(state.shortcutOptions);
     });

lib/ui/src/modules/ui/containers/stories_panel.js

@@ -13,12 +13,14 @@ import {
 export const mapper = (state, props, { actions }) => {
   const actionMap = actions();
 
-  const { stories, selectedKind, selectedStory, uiOptions, storyFilter } = state;
+  const { stories, selectedKind, selectedStory, uiOptions, storyFilter, isMobileDevice } = state;
   const {
     sortStoriesByKind,
     hierarchySeparator,
     hierarchyRootSeparator,
     sidebarAnimations,
+    name,
+    url,
   } = uiOptions;
 
   const preparedStories = prepareStoriesForHierarchy(
@@ -46,11 +48,13 @@ export const mapper = (state, props, { actions }) => {
     selectedStory,
     selectedHierarchy,
     onSelectStory: actionMap.api.selectStory,
-
     storyFilter,
     onStoryFilter: actionMap.ui.setStoryFilter,
-
+    openShortcutsHelp: actionMap.ui.toggleShortcutsHelp,
     sidebarAnimations,
+    isMobileDevice,
+    name,
+    url,
   };
 };