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 />);