Store layout (full screen mode and panel visibility) into permalink s…

…o it can be persisted across refresh and also shared to others.

closes #180 #200

src/__tests__/index.js

@@ -1,10 +1,9 @@
-import renderStorybookUI, { Provider } from '../';
+import renderStorybookUI from '../';
 import { expect } from 'chai';
-import sinon from 'sinon';
 const { describe, it } = global;
 
 describe('Main API', () => {
-  describe('default export', (done) => {
+  describe('default export', () => {
     it('should fail if provider is not extended from the base Provider', () => {
       const run = () => {
         const fakeProvider = {};
@@ -13,5 +12,5 @@ describe('Main API', () => {
 
       expect(run).to.throw(/base Provider/);
     });
-  })
+  });
 });

src/index.js

@@ -8,11 +8,11 @@ import uiModule from './modules/ui';
 import providerModule from './modules/provider';
 
 export class Provider {
-  renderPreview(selectedKind, selectedStory) {
+  renderPreview(selectedKind, selectedStory) { // eslint-disable-line no-unused-vars
     throw new Error('Provider.enderPreview() is not implemented!');
   }
 
-  handleAPI(api) {
+  handleAPI(api) { // eslint-disable-line no-unused-vars
     throw new Error('Provider.handleAPI() is not implemented!');
   }
 }

src/modules/provider/configs/init_api.js

@@ -17,7 +17,7 @@ export default function (provider, reduxStore, actions) {
     const { api } = reduxStore.getState();
     if (!api) return;
     if (!providerApi._onStoryCallback) return;
-    
+
     providerApi._onStoryCallback(api.selectedKind, api.selectedStory);
   });
 }

src/modules/shortcuts/actions/index.js

@@ -2,6 +2,7 @@ import shortcuts from './shortcuts';
 
 export const types = {
   HANDLE_EVENT: 'SHORTCUTS_HANDLE_EVENT',
+  SET_LAYOUT: 'SHORTCUTS_SET_LAYOUT',
 };
 
 export default {

src/modules/shortcuts/actions/shortcuts.js

@@ -19,4 +19,12 @@ export default {
         });
     }
   },
+
+  setLayout(context, layout) {
+    const { reduxStore } = context;
+    reduxStore.dispatch({
+      type: types.SET_LAYOUT,
+      layout,
+    });
+  },
 };

src/modules/shortcuts/configs/reducers/shortcuts.js

@@ -29,6 +29,13 @@ export default function (state = defaultState, action) {
       };
     }
 
+    case types.SET_LAYOUT: {
+      return {
+        ...state,
+        ...action.layout,
+      };
+    }
+
     default:
       return state;
   }

src/modules/ui/configs/__tests__/handle_routing.js

@@ -11,22 +11,31 @@ describe('manager.ui.config.handle_routing', () => {
       changeUrl(null);
       config.insidePopState = false;
     });
+
     it('should put the correct URL and state to pushState', (done) => {
       const reduxState = {
         api: {
           selectedKind: 'kk',
           selectedStory: 'ss',
         },
+        shortcuts: {
+          goFullScreen: false,
+          showDownPanel: true,
+          showLeftPanel: true,
+        },
       };
 
       const reduxStore = {
         getState: () => reduxState,
       };
 
       const pushState = {
-        url: '?selectedKind=kk&selectedStory=ss',
+        url: '?selectedKind=kk&selectedStory=ss&full=0&down=1&left=1',
         selectedKind: 'kk',
         selectedStory: 'ss',
+        full: false,
+        down: true,
+        left: true,
       };
 
       const originalPushState = window.history.pushState;
@@ -46,15 +55,28 @@ describe('manager.ui.config.handle_routing', () => {
         api: {
           selectStory: sinon.mock(),
         },
+        shortcuts: {
+          setLayout: sinon.mock(),
+        },
       };
 
+      const url = '?selectedKind=kk&selectedStory=ss&full=1&down=0&left=0';
+
       const location = {
-        search: '?selectedKind=kk&selectedStory=ss',
+        search: url,
       };
-      window.location.search = '?selectedKind=kk&selectedStory=ss';
+      window.location.search = url;
       handleInitialUrl(actions, location);
 
       expect(actions.api.selectStory.callCount).to.be.equal(1);
+      expect(actions.shortcuts.setLayout.callCount).to.be.equal(1);
+      /* eslint-disable no-unused-expressions */
+      expect(actions.shortcuts.setLayout.calledWith({
+        goFullScreen: true,
+        showDownPanel: false,
+        showLeftPanel: false,
+      })).to.be.true;
+      /* eslint-enable no-unused-expressions */
     });
   });
 });

src/modules/ui/configs/handle_routing.js

@@ -7,29 +7,48 @@ export function changeUrl(reduxStore) {
   // Do not change the URL if we are inside a popState event.
   if (config.insidePopState) return;
 
-  const { api } = reduxStore.getState();
+  const { api, shortcuts } = reduxStore.getState();
   if (!api) return;
 
   const { selectedKind, selectedStory } = api;
   const queryString = qs.stringify({ selectedKind, selectedStory });
 
   if (queryString === '') return;
 
-  const url = `?${queryString}`;
+  const { goFullScreen: full, showDownPanel: down, showLeftPanel: left } = shortcuts;
+  const layoutQuery = qs.stringify({ full: Number(full), down: Number(down), left: Number(left) });
+
+  const url = `?${queryString}&${layoutQuery}`;
   const state = {
     url,
     selectedKind,
     selectedStory,
+    full,
+    down,
+    left,
   };
 
   window.history.pushState(state, '', url);
 }
 
 export function updateStore(queryParams, actions) {
-  const { selectedKind, selectedStory } = queryParams;
+  const {
+    selectedKind,
+    selectedStory,
+    full,
+    down,
+    left,
+  } = queryParams;
+
   if (selectedKind && selectedStory) {
     actions.api.selectStory(selectedKind, selectedStory);
   }
+
+  actions.shortcuts.setLayout({
+    goFullScreen: Boolean(Number(full)),
+    showDownPanel: Boolean(Number(down)),
+    showLeftPanel: Boolean(Number(left)),
+  });
 }
 
 export function handleInitialUrl(actions, location) {