chore: 🤖 split display secions in Storybook left column

.storybook/addons.js

@@ -0,0 +1,4 @@
+import '@storybook/addon-options/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-notes/register';

.storybook/config.js

@@ -1,4 +1,16 @@
 import {configure} from '@storybook/react';
+import {setOptions} from '@storybook/addon-options';
+
+setOptions({
+  sortStoriesByKind: false,
+  showStoriesPanel: true,
+  showAddonPanel: true,
+  showSearchBox: false,
+  addonPanelInRight: true,
+  hierarchySeparator: /\//,
+  hierarchyRootSeparator: /\|/,
+  sidebarAnimations: false,
+});
 
 const req = require.context('../src/', true, /.*\.(stories|story)\.(js|jsx|ts|tsx)?$/);
 

package.json

@@ -45,12 +45,9 @@
     "@semantic-release/git": "7.0.8",
     "@semantic-release/npm": "5.1.4",
     "@storybook/addon-actions": "^5.0.1",
-    "@storybook/addon-backgrounds": "^5.0.1",
     "@storybook/addon-knobs": "^5.0.1",
-    "@storybook/addon-links": "^5.0.1",
     "@storybook/addon-notes": "^5.0.1",
     "@storybook/addon-options": "^5.0.1",
-    "@storybook/addon-viewport": "^5.0.1",
     "@storybook/react": "^5.0.1",
     "babel-core": "6.26.3",
     "callbag-interval": "1.1.0",

src/__stories__/createMemo.story.tsx

@@ -21,7 +21,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('State/createMemo', module)
+storiesOf('State|createMemo', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/createMemo.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useAsync.story.tsx

@@ -22,7 +22,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Side effects/useAsync', module)
+storiesOf('Side effects|useAsync', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useAsync.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useAudio.story.tsx

@@ -29,7 +29,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('UI/useAudio', module)
+storiesOf('UI|useAudio', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useAudio.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useBattery.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useBattery', module)
+storiesOf('Sensors|useBattery', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useBattery.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useBoolean.story.tsx

@@ -16,7 +16,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('State/useBoolean', module)
+storiesOf('State|useBoolean', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useToggle.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useCallbag.story.tsx

@@ -9,7 +9,7 @@ const Demo = () => {
   return <span>{`Counter: ${count}`}</span>
 };
 
-storiesOf('State/useCallbag', module)
+storiesOf('State|useCallbag', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useCallbag.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useCounter.story.tsx

@@ -20,7 +20,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('State/useCounter', module)
+storiesOf('State|useCounter', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useCounter.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useCss.story.tsx

@@ -19,7 +19,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Side effects/useCss', module)
+storiesOf('Side effects|useCss', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useCss.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useDebounce.story.tsx

@@ -31,6 +31,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Side effects/useDebounce', module)
+storiesOf('Side effects|useDebounce', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useDebounce.md')} />)
   .add('Demo', () => <Demo />);

src/__stories__/useFavicon.story.tsx

@@ -9,7 +9,7 @@ const Demo = () => {
   return null;
 };
 
-storiesOf('Side effects/useFavicon', module)
+storiesOf('Side effects|useFavicon', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useFavicon.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useGeolocation.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useGeolocation', module)
+storiesOf('Sensors|useGeolocation', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useGeolocation.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useGetSet.story.tsx

@@ -30,7 +30,7 @@ const DemoWrong = () => {
   );
 };
 
-storiesOf('State/useGetSet', module)
+storiesOf('State|useGetSet', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useGetSet.md')} />)
   .add('Demo, 1s delay', () =>
     <Demo/>

src/__stories__/useGetSetState.story.tsx

@@ -16,7 +16,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('State/useGetSetState', module)
+storiesOf('State|useGetSetState', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useGetSetState.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useHover.story.tsx

@@ -18,7 +18,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useHover', module)
+storiesOf('Sensors|useHover', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useHover.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useHoverDirty.story.tsx

@@ -15,7 +15,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useHoverDirty', module)
+storiesOf('Sensors|useHoverDirty', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useHover.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useIdle.story.tsx

@@ -8,12 +8,12 @@ const Demo = () => {
 
   return (
     <div>
-      <div>Use is idle: {isIdle ? 'Yes' : 'No'}</div>
+      <div>User is idle: {isIdle ? 'Yes' : 'No'}</div>
     </div>
   );
 };
 
-storiesOf('Sensors/useIdle', module)
+storiesOf('Sensors|useIdle', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useIdle.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useKeyPress.story.tsx

@@ -33,6 +33,6 @@ const Demo = () => {
   );
 };
 
-storiesOf("Sensors/useKeyPress", module)
+storiesOf("Sensors|useKeyPress", module)
   .add("Docs", () => <ShowDocs md={require("../../docs/useKeyPress.md")} />)
   .add("Demo", () => <Demo />);

src/__stories__/useLifecycles.story.tsx

@@ -8,7 +8,7 @@ const Demo = () => {
   return null;
 };
 
-storiesOf('Lifecycles/useLifecycles', module)
+storiesOf('Lifecycles|useLifecycles', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useLifecycles.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useList.story.tsx

@@ -15,7 +15,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('State/useList', module)
+storiesOf('State|useList', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useList.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useLocalStorage.story.tsx

@@ -15,7 +15,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Side effects/useLocalStorage', module)
+storiesOf('Side effects|useLocalStorage', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useLocalStorage.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useLocation.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useLocation', module)
+storiesOf('Sensors|useLocation', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useLocation.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useLogger.story.tsx

@@ -8,7 +8,7 @@ const Demo = (props) => {
   return null;
 };
 
-storiesOf('Lifecycles/useLogger', module)
+storiesOf('Lifecycles|useLogger', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useLogger.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useMap.story.tsx

@@ -17,7 +17,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('State/useMap', module)
+storiesOf('State|useMap', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useMap.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useMedia.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useMedia', module)
+storiesOf('Sensors|useMedia', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useMedia.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useMediaDevices.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useMediaDevices', module)
+storiesOf('Sensors|useMediaDevices', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useMediaDevices.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useMotion.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useMotion', module)
+storiesOf('Sensors|useMotion', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useMotion.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useMount.story.tsx

@@ -8,7 +8,7 @@ const Demo = () => {
   return null;
 };
 
-storiesOf('Lifecycles/useMount', module)
+storiesOf('Lifecycles|useMount', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useMount.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useNetwork.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useNetwork', module)
+storiesOf('Sensors|useNetwork', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useNetwork.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useObservable.story.tsx

@@ -7,16 +7,16 @@ import {BehaviorSubject} from 'rxjs';
 const counter$ = new BehaviorSubject(0);
 const Demo = () => {
   const value = useObservable(counter$, 0);
-  
+
   return (
     <button onClick={() => counter$.next(value! + 1)}>
       Clicked {value} times
     </button>
   );
 };
 
-storiesOf('State/useObservable', module)
-  // .add('Docs', () => <ShowDocs md={require('../../docs/useObservable.md')} />)
+storiesOf('State|useObservable', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useObservable.md')} />)
   .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useOrientation.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useOrientation', module)
+storiesOf('Sensors|useOrientation', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useOrientation.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useOutsideClick.story.tsx

@@ -19,7 +19,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('UI/useOutsideClick', module)
+storiesOf('UI|useOutsideClick', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useOutsideClick.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useRaf.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Animations/useRaf', module)
+storiesOf('Animations|useRaf', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useRaf.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useRefMounted.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('useRefMounted', module)
+storiesOf('Lifecycles|useRefMounted', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useRefMounted.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useSessionStorage.story.tsx

@@ -15,7 +15,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Side effects/useSessionStorage', module)
+storiesOf('Side effects|useSessionStorage', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useSessionStorage.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useSetState.story.tsx

@@ -24,7 +24,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('State/useSetState', module)
+storiesOf('State|useSetState', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useSetState.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useSize.story.tsx

@@ -17,7 +17,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors/useSize', module)
+storiesOf('Sensors|useSize', module)
   .add('Example', () =>
     <Demo/>
   )

src/__stories__/useSpeech.story.tsx

@@ -9,11 +9,11 @@ const Demo = () => {
   return (
     <pre>
       {JSON.stringify(state, null, 2)}
-    </pre>  
+    </pre>
   );
 };
 
-storiesOf('UI/useSpeech', module)
+storiesOf('UI|useSpeech', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useSpeech.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useSpring.story.tsx

@@ -17,7 +17,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Animations/useSpring', module)
+storiesOf('Animations|useSpring', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useSpring.md')} />)
   .add('Demo', () =>
     <Demo/>