Keep store on stories selecting

Author: usulpro

.storybook/stories.js

@@ -14,33 +14,33 @@ import { withAdk, adkParams } from '../dev/withAdk';
  *
  */
 
-addParameters(adkParams({ themes: ['theme1', 'theme2'], currentTheme: 0 }));
+addParameters(
+  adkParams({ themes: ['theme1-aa', 'theme2-bb', 't3', 't4', 't5'], currentTheme: 0 })
+);
 
 storiesOf('Storybook Addon Development Kit', module)
   .addDecorator(withAdk({ mainColor: 'green' }))
   .add(
     'Stories',
     () => {
-      console.log('Render Button 1');
       return (
         <div>
           <button>Button 1</button>
         </div>
       );
     },
-    adkParams({ currentTheme: 1 })
+    // adkParams({ currentTheme: 1 })
   )
   .add(
     'Stories2',
     () => {
-      console.log('Render Button 2');
       return (
         <div>
           <button>Button 2</button>
         </div>
       );
     },
-    adkParams({ currentTheme: 0 })
+    // adkParams({ currentTheme: 0 })
   );
 //   .add('Details', () => (
 //     <div>

dev/register.js

@@ -62,19 +62,19 @@ const AsyncRequest = () => new Promise(resolve => {
 
 register(
   {
-    themeInd: store => store.currentTheme,
+    themeInd: store => store.currentTheme || 0,
     themeList: store => store.themes,
     theme: store => store.themes[store.currentTheme],
     data: store => store
   },
   ({ global, local }) => ({
     indInc: global(store => ({
-      ...store,
-      currentTheme: store.currentTheme + 1,
+      // ...store,
+      currentTheme: (store.currentTheme || 0) + 1,
     })),
     indDec: global(store => ({
-      ...store,
-      currentTheme: store.currentTheme - 1,
+      // ...store,
+      currentTheme: (store.currentTheme || 0) - 1,
     })),
     update: global(),
     comment: local(store => ({

package.json

@@ -25,6 +25,7 @@
     "@storybook/addons": "^5.0.11",
     "@storybook/core-events": "^5.0.11",
     "@storybook/theming": "^5.0.11",
+    "deep-equal": "^2.0.2",
     "prop-types": "^15.6.2"
   },
   "devDependencies": {

src/ChannelStore.js

@@ -1,4 +1,5 @@
 import addons from '@storybook/addons';
+import deepEqual from 'deep-equal';
 
 const GLOBAL = 'global';
 
@@ -26,7 +27,6 @@ export default class ChannelStore {
     };
   }
 
-
   selectorId = null;
 
   subscriber = () => {};
@@ -65,16 +65,46 @@ export default class ChannelStore {
     const { data, id } = initData;
     const selectorId = id || GLOBAL;
     const selectedData = { ...(this.store[selectorId] || {}) };
-    selectedData.init = data;
     /**
      * Previous behavior didn't reset state on init event
      * it caused that we didn't see changes after
      * updating story parameters
      * So i'm removing this, but if we need to make it optional
      * this is how to revert it:
-     * electedData.over = selectedData.over || {};
+     * selectedData.over = selectedData.over || {};
+     *
+     * Update:
+     * Now we check if coming initial data the same as we already have in the store
+     * this allow us to not reset changes while switching stories
+     *
+     * it works if stories don't contain parameters or changing data any other way
+     *
+     * Additional it's better if actions don't return whole store
+     * compare:
+     *
+     * // right way:
+     * store => ({
+     *   currentTheme: store.currentTheme + 1,
+     * })
+     *
+     * vs
+     *
+     * // wrong way:
+     * store => ({
+     *   ...store, // this cause an overriding of whole store
+     *   currentTheme: store.currentTheme + 1,
+     * })
+     *
+     * the better solution would be to granularly commit updates and store only changed values
+     *
      */
-    selectedData.over = {};
+    if (deepEqual(selectedData.init, data)) {
+      selectedData.over = selectedData.over || {};
+    } else {
+      selectedData.init = data;
+      selectedData.over = {};
+    }
+
     this.store[selectorId] = selectedData;
     this.selectorId = selectorId;
     this.subscriber();
@@ -169,6 +199,6 @@ export const getSingleStore = (...args) => {
   return singleStore;
 };
 
-export const getNewStore =  (...args) => {
+export const getNewStore = (...args) => {
   return new ChannelStore(...args);
-};
+};