Merge pull request #1517 from oddeirik/storybook-separator-fix

Fix storybook separators in stories

stories/comps/UseKey.story.tsx

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import UseKey from '../../src/comps/UseKey';
 
-storiesOf('Components|<UseKey>', module).add('Demo', () => (
+storiesOf('Components/<UseKey>', module).add('Demo', () => (
   <div>
     Press "q" key!
     <UseKey filter="q" fn={() => alert('Q pressed!')} />

stories/createBreakpoint.story.tsx

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

stories/createGlobalState.story.tsx

@@ -1,7 +1,7 @@
-import { storiesOf } from "@storybook/react";
-import React, { FC } from "react";
-import { createGlobalState } from "../src";
-import ShowDocs from "./util/ShowDocs";
+import { storiesOf } from '@storybook/react';
+import React, { FC } from 'react';
+import { createGlobalState } from '../src';
+import ShowDocs from './util/ShowDocs';
 
 const useGlobalValue = createGlobalState<number>(0);
 
@@ -28,6 +28,6 @@ const Demo: FC = () => {
   );
 };
 
-storiesOf("State|createGlobalState", module)
-  .add("Docs", () => <ShowDocs md={require("../docs/createGlobalState.md")} />)
-  .add("Demo", () => <Demo />);
+storiesOf('State/createGlobalState', module)
+  .add('Docs', () => <ShowDocs md={require('../docs/createGlobalState.md')} />)
+  .add('Demo', () => <Demo />);

stories/createMemo.story.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { createMemo } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const fibonacci = n => {
+const fibonacci = (n) => {
   if (n === 0) {
     return 0;
   }
@@ -21,6 +21,6 @@ const Demo = () => {
   return <div>fib(10) = {result}</div>;
 };
 
-storiesOf('State|createMemo', module)
+storiesOf('State/createMemo', module)
   .add('Docs', () => <ShowDocs md={require('../docs/createMemo.md')} />)
   .add('Demo', () => <Demo />);

stories/createReducer.story.tsx

@@ -29,7 +29,7 @@ function reducer(state, action) {
 const Demo = ({ initialCount = 1 }) => {
   // Action creator to increment count, wait a second and then reset
   const addAndReset = React.useCallback(() => {
-    return dispatch2 => {
+    return (dispatch2) => {
       dispatch2({ type: 'increment' });
 
       setTimeout(() => {
@@ -52,6 +52,6 @@ const Demo = ({ initialCount = 1 }) => {
   );
 };
 
-storiesOf('State|createReducer', module)
+storiesOf('State/createReducer', module)
   .add('Docs', () => <ShowDocs md={require('../docs/createReducer.md')} />)
   .add('Demo', () => <Demo />);

stories/createReducerContext.story.tsx

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

stories/createStateContext.story.tsx

@@ -12,7 +12,7 @@ const ComponentA = () => {
     <p>
       Component A:
       <br />
-      <input type="text" value={text} onInput={ev => setText(ev.currentTarget.value)} />
+      <input type="text" value={text} onInput={(ev) => setText(ev.currentTarget.value)} />
     </p>
   );
 };
@@ -23,7 +23,7 @@ const ComponentB = () => {
     <p>
       Component B:
       <br />
-      <input type="text" value={text} onInput={ev => setText(ev.currentTarget.value)} />
+      <input type="text" value={text} onInput={(ev) => setText(ev.currentTarget.value)} />
     </p>
   );
 };
@@ -38,6 +38,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('State|createStateContext', module)
+storiesOf('State/createStateContext', module)
   .add('Docs', () => <ShowDocs md={require('../docs/createStateContext.md')} />)
   .add('Demo', () => <Demo />);

stories/useAsync.story.tsx

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

stories/useAsyncFn.story.tsx

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

stories/useAsyncRetry.story.tsx

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

stories/useAudio.story.tsx

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

stories/useBattery.story.tsx

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

stories/useBeforeUnload.story.tsx

@@ -30,7 +30,7 @@ const DemoFunc = () => {
   );
 };
 
-storiesOf('Side effects|useBeforeUnload', module)
+storiesOf('Side effects/useBeforeUnload', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useBeforeUnload.md')} />)
   .add('Demo (boolean)', () => <DemoBool />)
   .add('Demo (function)', () => <DemoFunc />);

stories/useBoolean.story.tsx

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

stories/useClickAway.story.tsx

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

stories/useCookie.story.tsx

@@ -1,10 +1,10 @@
-import { storiesOf } from "@storybook/react";
-import React, { useState, useEffect } from "react";
-import { useCookie } from "../src";
-import ShowDocs from "./util/ShowDocs";
+import { storiesOf } from '@storybook/react';
+import React, { useState, useEffect } from 'react';
+import { useCookie } from '../src';
+import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
-  const [value, updateCookie, deleteCookie] = useCookie("my-cookie");
+  const [value, updateCookie, deleteCookie] = useCookie('my-cookie');
   const [counter, setCounter] = useState(1);
 
   useEffect(() => {
@@ -13,7 +13,7 @@ const Demo = () => {
 
   const updateCookieHandler = () => {
     updateCookie(`my-awesome-cookie-${counter}`);
-    setCounter(c => c + 1);
+    setCounter((c) => c + 1);
   };
 
   return (
@@ -26,6 +26,6 @@ const Demo = () => {
   );
 };
 
-storiesOf("Side effects|useCookie", module)
-  .add("Docs", () => <ShowDocs md={require("../docs/useCookie.md")} />)
-  .add("Demo", () => <Demo />);
+storiesOf('Side effects/useCookie', module)
+  .add('Docs', () => <ShowDocs md={require('../docs/useCookie.md')} />)
+  .add('Demo', () => <Demo />);

stories/useCopyToClipboard.story.tsx

@@ -9,7 +9,7 @@ const Demo = () => {
 
   return (
     <div>
-      <input value={text} onChange={e => setText(e.target.value)} />
+      <input value={text} onChange={(e) => setText(e.target.value)} />
       <button type="button" onClick={() => copyToClipboard(text)}>
         copy text
       </button>
@@ -29,6 +29,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Side-effects|useCopyToClipboard', module)
+storiesOf('Side-effects/useCopyToClipboard', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useCopyToClipboard.md')} />)
   .add('Demo', () => <Demo />);

stories/useCounter.story.tsx

@@ -35,12 +35,12 @@ const Demo = () => {
       <br />
       <br />
       Initial value: {initialValue}
-      <button onClick={() => setInitialValue(v => ++v)}>Increment</button>
-      <button onClick={() => setInitialValue(v => --v)}>Decrement</button>
+      <button onClick={() => setInitialValue((v) => ++v)}>Increment</button>
+      <button onClick={() => setInitialValue((v) => --v)}>Decrement</button>
     </div>
   );
 };
 
-storiesOf('State|useCounter', module)
+storiesOf('State/useCounter', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useCounter.md')} />)
   .add('Demo', () => <Demo />);

stories/useCss.story.tsx

@@ -15,6 +15,6 @@ const Demo = () => {
   return <div className={className}>hello</div>;
 };
 
-storiesOf('UI|useCss', module)
+storiesOf('UI/useCss', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useCss.md')} />)
   .add('Demo', () => <Demo />);

stories/useCustomCompareEffect.story.tsx

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

stories/useDebounce.story.tsx

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

stories/useDeepCompareEffect.story.tsx

@@ -28,6 +28,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Lifecycle|useDeepCompareEffect', module)
+storiesOf('Lifecycle/useDeepCompareEffect', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useDeepCompareEffect.md')} />)
   .add('Demo', () => <Demo />);

stories/useDefault.story.tsx

@@ -11,12 +11,12 @@ const Demo = () => {
   return (
     <div>
       <div>User: {user.name}</div>
-      <input onChange={e => setUser({ name: e.target.value })} />
+      <input onChange={(e) => setUser({ name: e.target.value })} />
       <button onClick={() => setUser(null)}>set to null</button>
     </div>
   );
 };
 
-storiesOf('State|useDefault', module)
+storiesOf('State/useDefault', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useDefault.md')} />)
   .add('Demo', () => <Demo />);

stories/useDrop.story.tsx

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

stories/useDropArea.story.tsx

@@ -51,6 +51,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('UI|useDropArea', module)
+storiesOf('UI/useDropArea', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useDrop.md')} />)
   .add('Default', () => <Demo />);

stories/useEffectOnce.story.tsx

@@ -16,6 +16,6 @@ const Demo = () => {
   return <ConsoleStory />;
 };
 
-storiesOf('Lifecycle|useEffectOnce', module)
+storiesOf('Lifecycle/useEffectOnce', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useEffectOnce.md')} />)
   .add('Demo', () => <Demo />);

stories/useEnsuredForwardedRef.story.tsx

@@ -70,7 +70,7 @@ const Child = forwardRef(({}, ref: MutableRefObject<HTMLTextAreaElement>) => {
   );
 });
 
-storiesOf('Miscellaneous|useEnsuredForwardedRef', module)
+storiesOf('Miscellaneous/useEnsuredForwardedRef', module)
   .addDecorator(withKnobs)
   .add('Docs', () => <ShowDocs md={require('../docs/useEnsuredForwardedRef.md')} />)
   .add('Demo', () => {

stories/useError.story.tsx

@@ -37,7 +37,7 @@ const Demo = () => {
   return <button onClick={clickHandler}>Click me to throw</button>;
 };
 
-storiesOf('Side effects|useError', module)
+storiesOf('Side effects/useError', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useError.md')} />)
   .add('Demo', () => (
     <ErrorBoundary>

stories/useEvent.story.tsx

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

stories/useFavicon.story.tsx

@@ -10,6 +10,6 @@ const Demo = () => {
   return <NewTabStory>Favicon should be the Stack Overflow logo</NewTabStory>;
 };
 
-storiesOf('Side effects|useFavicon', module)
+storiesOf('Side effects/useFavicon', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useFavicon.md')} />)
   .add('Demo', () => <Demo />);

stories/useFirstMountState.story.tsx

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

stories/useFullscreen.story.tsx

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

stories/useGeolocation.story.tsx

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

stories/useGetSet.story.tsx

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

stories/useGetSetState.story.tsx

@@ -14,6 +14,6 @@ const Demo = () => {
   return <button onClick={onClick}>Clicked: {get().cnt}</button>;
 };
 
-storiesOf('State|useGetSetState', module)
+storiesOf('State/useGetSetState', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useGetSetState.md')} />)
   .add('Demo', () => <Demo />);

stories/useHarmonicIntervalFn.story.tsx

@@ -6,7 +6,7 @@ import ShowDocs from './util/ShowDocs';
 const Clock: React.FC<{ useInt: typeof useHarmonicIntervalFn }> = ({ useInt }) => {
   const [count, setCount] = React.useState(0);
   useInt(() => {
-    setCount(cnt => cnt + 1);
+    setCount((cnt) => cnt + 1);
   }, 1000);
 
   let m: number | string = Math.floor(count / 60);
@@ -54,7 +54,7 @@ const Demo: React.FC<{ useInt: typeof useHarmonicIntervalFn }> = ({ useInt }) =>
   );
 };
 
-storiesOf('Animation|useHarmonicIntervalFn', module)
+storiesOf('Animation/useHarmonicIntervalFn', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useHarmonicIntervalFn.md')} />)
   .add('Demo', () => (
     <>

stories/useHash.story.tsx

@@ -18,12 +18,12 @@ const Demo = () => {
       </div>
       <div>Edit hash: </div>
       <div>
-        <input style={{ width: '100%' }} value={hash} onChange={e => setHash(e.target.value)} />
+        <input style={{ width: '100%' }} value={hash} onChange={(e) => setHash(e.target.value)} />
       </div>
     </div>
   );
 };
 
-storiesOf('Sensors|useHash', module)
+storiesOf('Sensors/useHash', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useHash.md')} />)
   .add('Demo', () => <Demo />);

stories/useHover.story.tsx

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

stories/useHoverDirty.story.tsx

@@ -11,6 +11,6 @@ const Demo = () => {
   return <div ref={ref}>{isHovered ? '😁' : '☹️'}</div>;
 };
 
-storiesOf('Sensors|useHoverDirty', module)
+storiesOf('Sensors/useHoverDirty', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useHover.md')} />)
   .add('Demo', () => <Demo />);

stories/useIdle.story.tsx

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

stories/useInterval.story.tsx

@@ -18,7 +18,7 @@ const Demo = () => {
   return (
     <div>
       <div>
-        delay: <input value={delay} onChange={event => setDelay(Number(event.target.value))} />
+        delay: <input value={delay} onChange={(event) => setDelay(Number(event.target.value))} />
       </div>
       <h1>count: {count}</h1>
       <div>
@@ -28,6 +28,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Animation|useInterval', module)
+storiesOf('Animation/useInterval', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useInterval.md')} />)
   .add('Demo', () => <Demo />);

stories/useIsomorphicLayoutEffect.story.tsx

@@ -2,6 +2,6 @@ import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import ShowDocs from './util/ShowDocs';
 
-storiesOf('Lifecycle|useIsomorphicLayoutEffect', module).add('Docs', () => (
+storiesOf('Lifecycle/useIsomorphicLayoutEffect', module).add('Docs', () => (
   <ShowDocs md={require('../docs/useIsomorphicLayoutEffect.md')} />
 ));

stories/useKeyPress.story.tsx

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

stories/useKeyboardJs.story.tsx

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

stories/useLatest.story.tsx

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

stories/useLifecycles.story.tsx

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

stories/useList.story.tsx

@@ -24,11 +24,13 @@ const Demo = () => {
       <br />
       <button onClick={() => removeAt(1)}>Remove element at index 1</button>
       <br />
-      <button onClick={() => filter(item => item % 2 === 0)}>Filter even values</button>
+      <button onClick={() => filter((item) => item % 2 === 0)}>Filter even values</button>
       <br />
-      <button onClick={() => update(item => item % 2 === 0, Date.now())}>Update all even values with timestamp</button>
+      <button onClick={() => update((item) => item % 2 === 0, Date.now())}>
+        Update all even values with timestamp
+      </button>
       <br />
-      <button onClick={() => updateFirst(item => item % 2 === 0, Date.now())}>
+      <button onClick={() => updateFirst((item) => item % 2 === 0, Date.now())}>
         Update first even value with timestamp
       </button>
       <br />
@@ -62,7 +64,7 @@ const UpsertDemo = () => {
     <div style={{ display: 'inline-flex', flexDirection: 'column' }}>
       {list.map((item, index) => (
         <div key={item.id}>
-          <input value={item.text} onChange={e => upsert(upsertPredicate, { ...item, text: e.target.value })} />
+          <input value={item.text} onChange={(e) => upsert(upsertPredicate, { ...item, text: e.target.value })} />
           <button onClick={() => removeAt(index)}>Remove</button>
         </div>
       ))}
@@ -72,7 +74,7 @@ const UpsertDemo = () => {
   );
 };
 
-storiesOf('State|useList', module)
+storiesOf('State/useList', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useList.md')} />)
   .add('Demo', () => <Demo />)
   .add('Upsert Demo', () => <UpsertDemo />);

stories/useLocalStorage.story.tsx

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

stories/useLocation.story.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useLocation } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const go = page => history.pushState({}, '', page);
+const go = (page) => history.pushState({}, '', page);
 
 const Demo = () => {
   const state = useLocation();
@@ -17,6 +17,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors|useLocation', module)
+storiesOf('Sensors/useLocation', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useLocation.md')} />)
   .add('Demo', () => <Demo />);

stories/useLockBodyScroll.story.tsx

@@ -53,7 +53,7 @@ const IframeComponent = () => {
   );
 };
 
-storiesOf('Side effects|useLockBodyScroll', module)
+storiesOf('Side effects/useLockBodyScroll', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useLockBodyScroll.md')} />)
   .add('Demo', () => <Demo />)
   .add('Two hooks on page', () => (

stories/useLogger.story.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useCounter, useLogger } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const Demo = props => {
+const Demo = (props) => {
   const [state, { inc }] = useCounter(0);
 
   useLogger('Demo', props, state);
@@ -17,7 +17,7 @@ const Demo = props => {
   );
 };
 
-storiesOf('Lifecycle|useLogger', module)
+storiesOf('Lifecycle/useLogger', module)
   .addDecorator(withKnobs)
   .add('Docs', () => <ShowDocs md={require('../docs/useLogger.md')} />)
   .add('Demo', () => {

stories/useLongPress.story.tsx

@@ -17,6 +17,6 @@ const Demo = () => {
   return <button {...longPressEvent}>useLongPress</button>;
 };
 
-storiesOf('Sensors|useLongPress', module)
+storiesOf('Sensors/useLongPress', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useLongPress.md')} />)
   .add('Demo', () => <Demo />);

stories/useMap.story.tsx

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

stories/useMeasure.story.tsx

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

stories/useMedia.story.tsx

@@ -9,6 +9,6 @@ const Demo = () => {
   return <div>Screen is wide: {isWide ? 'Yes' : 'No'}</div>;
 };
 
-storiesOf('Sensors|useMedia', module)
+storiesOf('Sensors/useMedia', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useMedia.md')} />)
   .add('Demo', () => <Demo />);

stories/useMediaDevices.story.tsx

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

stories/useMediatedState.story.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useMediatedState } from '../src/useMediatedState';
 import ShowDocs from './util/ShowDocs';
 
-const inputMediator = s => s.replace(/[\s]+/g, ' ');
+const inputMediator = (s) => s.replace(/[\s]+/g, ' ');
 const Demo = () => {
   const [state, setState] = useMediatedState(inputMediator, '');
 
@@ -23,6 +23,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('State|useMediatedState', module)
+storiesOf('State/useMediatedState', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useMediatedState.md')} />)
   .add('Demo', () => <Demo />);

stories/useMethods.story.tsx

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

stories/useMotion.story.tsx

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

stories/useMount.story.tsx

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

stories/useMountedState.story.tsx

@@ -12,6 +12,6 @@ const Demo = () => {
   return <div>This component is {isMounted() ? 'MOUNTED' : 'NOT MOUNTED'}</div>;
 };
 
-storiesOf('Lifecycle|useMountedState', module)
+storiesOf('Lifecycle/useMountedState', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useMountedState.md')} />)
   .add('Demo', () => <Demo />);

stories/useMouse.story.tsx

@@ -37,6 +37,6 @@ const Demo: React.FC<any> = () => {
   );
 };
 
-storiesOf('Sensors|useMouse', module)
+storiesOf('Sensors/useMouse', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useMouse.md')} />)
   .add('Demo', () => <Demo />);

stories/useMouseHovered.story.tsx

@@ -38,7 +38,7 @@ const Demo: React.FC<any> = ({ whenHovered, bound }) => {
   );
 };
 
-storiesOf('Sensors|useMouseHovered', module)
+storiesOf('Sensors/useMouseHovered', module)
   .addDecorator(withKnobs)
   .add('Docs', () => <ShowDocs md={require('../docs/useMouse.md')} />)
   .add('Demo', () => {

stories/useMouseWheel.story.tsx

@@ -4,7 +4,7 @@ import { useMouseWheel } from '../src';
 import ShowDocs from './util/ShowDocs';
 
 const Demo: React.FC<any> = () => {
-  const mouseWheel = useMouseWheel()
+  const mouseWheel = useMouseWheel();
   return (
     <>
       <h3>delta Y Scrolled: {mouseWheel}</h3>
@@ -12,6 +12,6 @@ const Demo: React.FC<any> = () => {
   );
 };
 
-storiesOf('Sensors|useMouseWheel', module)
+storiesOf('Sensors/useMouseWheel', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useMouseWheel.md')} />)
   .add('Demo', () => <Demo />);

stories/useMultiStateValidator.story.tsx

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

stories/useNetwork.story.tsx

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

stories/useObservable.story.tsx

@@ -11,6 +11,6 @@ const Demo = () => {
   return <button onClick={() => counter$.next(value! + 1)}>Clicked {value} times</button>;
 };
 
-storiesOf('State|useObservable', module)
+storiesOf('State/useObservable', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useObservable.md')} />)
   .add('Demo', () => <Demo />);

stories/useOrientation.story.tsx

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

stories/usePageLeave.story.tsx

@@ -14,6 +14,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Sensors|usePageLeave', module)
+storiesOf('Sensors/usePageLeave', module)
   .add('Docs', () => <ShowDocs md={require('../docs/usePageLeave.md')} />)
   .add('Default', () => <Demo />);

stories/usePermission.story.tsx

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

stories/usePrevious.story.tsx

@@ -12,12 +12,12 @@ const Demo = () => {
       <p>
         Now: {count}, before: {String(prevCount)}
       </p>
-      <button onClick={() => setCount(value => value + 1)}>+</button>
-      <button onClick={() => setCount(value => value - 1)}>-</button>
+      <button onClick={() => setCount((value) => value + 1)}>+</button>
+      <button onClick={() => setCount((value) => value - 1)}>-</button>
     </div>
   );
 };
 
-storiesOf('State|usePrevious', module)
+storiesOf('State/usePrevious', module)
   .add('Docs', () => <ShowDocs md={require('../docs/usePrevious.md')} />)
   .add('Demo', () => <Demo />);

stories/usePreviousDistinct.story.tsx

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

stories/usePromise.story.tsx

@@ -18,7 +18,7 @@ const DemoInner = ({ promise }) => {
 const Demo = () => {
   const [mounted, toggleMounted] = useBoolean(true);
   const [num, { inc }] = useNumber();
-  const promise = new Promise(r => setTimeout(() => r(num), 1_000));
+  const promise = new Promise((r) => setTimeout(() => r(num), 1_000));
 
   return (
     <div>
@@ -31,6 +31,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Lifecycle|usePromise', module)
+storiesOf('Lifecycle/usePromise', module)
   .add('Docs', () => <ShowDocs md={require('../docs/usePromise.md')} />)
   .add('Demo', () => <Demo />);

stories/useQueue.story.tsx

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

stories/useRaf.story.tsx

@@ -9,6 +9,6 @@ const Demo = () => {
   return <div>Elapsed: {frames}</div>;
 };
 
-storiesOf('Animation|useRaf', module)
+storiesOf('Animation/useRaf', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useRaf.md')} />)
   .add('Demo', () => <Demo />);

stories/useRafLoop.story.tsx

@@ -9,7 +9,7 @@ const Demo = () => {
   const update = useUpdate();
 
   const [loopStop, loopStart, isActive] = useRafLoop((time) => {
-    setTicks(ticks => ticks + 1);
+    setTicks((ticks) => ticks + 1);
     setLastCall(time);
   });
 
@@ -18,14 +18,18 @@ const Demo = () => {
       <div>RAF triggered: {ticks} (times)</div>
       <div>Last high res timestamp: {lastCall}</div>
       <br />
-      <button onClick={() => {
-        isActive() ? loopStop() : loopStart();
-        update();
-      }}>{isActive() ? 'STOP' : 'START'}</button>
+      <button
+        onClick={() => {
+          isActive() ? loopStop() : loopStart();
+          update();
+        }}
+      >
+        {isActive() ? 'STOP' : 'START'}
+      </button>
     </div>
   );
 };
 
-storiesOf('Side effects|useRafLoop', module)
+storiesOf('Side effects/useRafLoop', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useRafLoop.md')} />)
   .add('Demo', () => <Demo />);

stories/useRafState.story.tsx

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

stories/useRendersCount.story.tsx

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

stories/useSearchParam.story.tsx

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

stories/useSessionStorage.story.tsx

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

stories/useSet.story.tsx

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

stories/useSetState.story.tsx

@@ -13,7 +13,7 @@ const Demo = () => {
       <button onClick={() => setState({ foo: 'bar' })}>foo</button>
       <button
         onClick={() => {
-          setState(prevState => ({
+          setState((prevState) => ({
             count: prevState.count === undefined ? 0 : prevState.count + 1,
           }));
         }}
@@ -24,6 +24,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('State|useSetState', module)
+storiesOf('State/useSetState', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useSetState.md')} />)
   .add('Demo', () => <Demo />);

stories/useShallowCompareEffect.story.tsx

@@ -36,6 +36,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Lifecycle|useShallowCompareEffect', module)
+storiesOf('Lifecycle/useShallowCompareEffect', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useShallowCompareEffect.md')} />)
   .add('Demo', () => <Demo />);

stories/useSize.story.tsx

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

stories/useSlider.story.tsx

@@ -15,7 +15,7 @@ const Demo = () => {
     <div>
       <div ref={ref} style={{ position: 'relative', background: 'yellow', padding: 4 }}>
         <p style={{ margin: 0, textAlign: 'center' }}>Slide me</p>
-        <div style={{ position: 'absolute', top: 0, left: (100 * state.value) + '%', transform: 'scale(2)' }}>
+        <div style={{ position: 'absolute', top: 0, left: 100 * state.value + '%', transform: 'scale(2)' }}>
           {state.isSliding ? '🏂' : '🎿'}
         </div>
       </div>
@@ -32,7 +32,7 @@ const DemoVertical = () => {
     <div>
       <div ref={ref} style={{ position: 'relative', background: 'yellow', padding: 4, width: 30, height: 400 }}>
         <p style={{ margin: 0, textAlign: 'center' }}>Slide me</p>
-        <div style={{ position: 'absolute', left: 0, top: (100 * state.value) + '%', transform: 'scale(2)' }}>
+        <div style={{ position: 'absolute', left: 0, top: 100 * state.value + '%', transform: 'scale(2)' }}>
           {state.isSliding ? '🏂' : '🎿'}
         </div>
       </div>
@@ -41,7 +41,7 @@ const DemoVertical = () => {
   );
 };
 
-storiesOf('UI|useSlider', module)
+storiesOf('UI/useSlider', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useSlider.md')} />)
   .add('Horizontal', () => <Demo />)
   .add('Vertical', () => <DemoVertical />);

stories/useSpeech.story.tsx

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

stories/useSpring.story.tsx

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

stories/useStartTyping.story.tsx

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

stories/useStateList.story.tsx

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

stories/useStateValidator.story.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import useStateValidator from '../src/useStateValidator';
 import ShowDocs from './util/ShowDocs';
 
-const DemoStateValidator = s => [s === '' ? undefined : (s * 1) % 2 === 0] as [boolean | undefined];
+const DemoStateValidator = (s) => [s === '' ? undefined : (s * 1) % 2 === 0] as [boolean | undefined];
 const Demo = () => {
   const [state, setState] = React.useState<number>(0);
   const [[isValid]] = useStateValidator(state, DemoStateValidator);
@@ -25,6 +25,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('State|useStateValidator', module)
+storiesOf('State/useStateValidator', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useStateValidator.md')} />)
   .add('Demo', () => <Demo />);

stories/useStateWithHistory.story.tsx

@@ -74,9 +74,7 @@ const Demo = () => {
         <div>Current history</div>
         <div
           dangerouslySetInnerHTML={{
-            __html: JSON.stringify(history.history, null, 2)
-              .replace(/\n/g, '<br/>')
-              .replace(/ /g, '&nbsp;'),
+            __html: JSON.stringify(history.history, null, 2).replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;'),
           }}
         />
       </div>
@@ -84,6 +82,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('State|useStateWithHistory', module)
+storiesOf('State/useStateWithHistory', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useStateWithHistory.md')} />)
   .add('Demo', () => <Demo />);

stories/useThrottle.story.tsx

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

stories/useThrottleFn.story.tsx

@@ -5,7 +5,7 @@ import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
   const [value, setValue] = React.useState('');
-  const throttledValue = useThrottleFn(defaultValue => defaultValue, 2000, [value]);
+  const throttledValue = useThrottleFn((defaultValue) => defaultValue, 2000, [value]);
   const [lastThrottledValue, setLastThrottledValue] = React.useState(throttledValue);
   const [count, { inc }] = useCounter();
 
@@ -35,6 +35,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Side effects|useThrottleFn', module)
+storiesOf('Side effects/useThrottleFn', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useThrottle.md')} />)
   .add('Demo', () => <Demo />);

stories/useTimeout.story.tsx

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

stories/useTimeoutFn.story.tsx

@@ -35,6 +35,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Animation|useTimeoutFn', module)
+storiesOf('Animation/useTimeoutFn', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useTimeoutFn.md')} />)
   .add('Demo', () => <Demo />);

stories/useTitle.story.tsx

@@ -10,6 +10,6 @@ const Demo = () => {
   return <NewTabStory>Title should be "Hello world!"</NewTabStory>;
 };
 
-storiesOf('Side effects|useTitle', module)
+storiesOf('Side effects/useTitle', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useTitle.md')} />)
   .add('Demo', () => <Demo />);

stories/useToggle.story.tsx

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

stories/useTween.story.tsx

@@ -9,6 +9,6 @@ const Demo = () => {
   return <div>Tween: {t}</div>;
 };
 
-storiesOf('Animation|useTween', module)
+storiesOf('Animation/useTween', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useTween.md')} />)
   .add('Demo', () => <Demo />);

stories/useUnmount.story.tsx

@@ -14,6 +14,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Lifecycle|useUnmount', module)
+storiesOf('Lifecycle/useUnmount', module)
   .add('Docs', () => <ShowDocs md={require('../docs/useUnmount.md')} />)
   .add('Demo', () => <Demo />);

stories/useUpdate.story.tsx

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