Merge pull request #15 from streamich/storybook2

docs: ✏️ add docs to Storybook demos

docs/useAudio.md

@@ -2,8 +2,6 @@
 
 Creates `<audio>` element, tracks its state and exposes playback conrols.
 
-[![](https://img.shields.io/badge/demo-useAudio-green.svg)](https://codesandbox.io/s/5v7q47knwl)
-
 
 ## Usage
 

docs/useBattery.md

@@ -2,8 +2,6 @@
 
 React sensor hook that tracks batter status.
 
-[![](https://img.shields.io/badge/demo-useBattery-green.svg)](https://codesandbox.io/s/qlvn662zww)
-
 
 ## Usage
 

docs/useList.md

@@ -14,7 +14,7 @@ const Demo = () => {
   return (
     <div>
       <div>{list.join(',')}</div>
-      <button onClick={() => set([])}>Rest</button>
+      <button onClick={() => set([])}>Reset</button>
       <button onClick={() => push(Date.now())}>Push</button>
     </div>
   );

docs/useWindowSize.md

@@ -2,8 +2,6 @@
 
 React sensor hook that tracks dimensions of the browser window.
 
-[![](https://img.shields.io/badge/demo-useWindowSize-green.svg)](https://codesandbox.io/s/m7ln22668)
-
 
 ## Usage
 

package.json

@@ -12,10 +12,11 @@
     "start": "yarn storybook",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
-    "clean": "rimraf lib",
+    "clean": "rimraf lib storybook-static",
     "storybook": "start-storybook -p 6008",
     "storybook:build": "build-storybook",
-    "storybook:upload": "gh-pages -d storybook-static"
+    "storybook:upload": "gh-pages -d storybook-static",
+    "storybook:clean": "rimraf storybook-static"
   },
   "author": "@streamich",
   "license": "Unlicense",

src/__stories__/useAsync.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useAsync} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const fn = () => new Promise((resolve) => {
   setTimeout(() => {
@@ -22,6 +23,7 @@ const Demo = () => {
 };
 
 storiesOf('useAsync', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useAsync.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useAudio.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useAudio} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [audio, state, controls, ref] = useAudio({
@@ -29,6 +30,7 @@ const Demo = () => {
 };
 
 storiesOf('useAudio', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useAudio.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useBattery.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useBattery} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useBattery();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useBattery', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useBattery.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useCounter.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useCounter} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [value, inc, set] = useCounter();
@@ -15,6 +16,7 @@ const Demo = () => {
 };
 
 storiesOf('useCounter', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useCounter.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useCss.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useCss} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const className = useCss({
@@ -19,6 +20,7 @@ const Demo = () => {
 };
 
 storiesOf('useCss', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useCss.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useFavicon.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useFavicon} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   useFavicon('https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico');
@@ -9,6 +10,7 @@ const Demo = () => {
 };
 
 storiesOf('useFavicon', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useFavicon.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useGeolocation.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useGeolocation} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useGeolocation();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useGeolocation', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useGeolocation.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useHover.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useHover} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const element = (hovered: boolean) =>
@@ -18,6 +19,7 @@ const Demo = () => {
 };
 
 storiesOf('useHover', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useHover.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useIdle.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useIdle} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const isIdle = useIdle(3e3);
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useIdle', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useIdle.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useLifecycles.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useLifecycles} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   useLifecycles(() => console.log('MOUNTED'), () => console.log('UNMOUNTED'));
@@ -8,6 +9,7 @@ const Demo = () => {
 };
 
 storiesOf('useLifecycles', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useLifecycles.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useList.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useList} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [list, {set, push}] = useList();
@@ -8,13 +9,14 @@ const Demo = () => {
   return (
     <div>
       <div>{list.join(',')}</div>
-      <button onClick={() => set([])}>Rest</button>
+      <button onClick={() => set([])}>Reset</button>
       <button onClick={() => push(Date.now())}>Push</button>
     </div>
   );
 };
 
 storiesOf('useList', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useList.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useLocalStorage.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useLocalStorage} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const value = useLocalStorage('key');
@@ -13,7 +14,8 @@ const Demo = () => {
   );
 };
 
-storiesOf('useLocalStorage', module)
-  .add('Example', () =>
-    <Demo/>
-  )
+// storiesOf('useLocalStorage', module)
+  // .add('Docs', () => <ShowDocs md={require('../../docs/useLocalStorage.md')} />)
+  // .add('Demo', () =>
+    // <Demo/>
+  // )

src/__stories__/useLocation.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useLocation} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useLocation();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useLocation', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useLocation.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useLogger.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useLogger} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = (props) => {
   useLogger('Demo', props);
@@ -8,6 +9,7 @@ const Demo = (props) => {
 };
 
 storiesOf('useLogger', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useLogger.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useMap.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useMap} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [map, {set, reset}] = useMap({
@@ -17,6 +18,7 @@ const Demo = () => {
 };
 
 storiesOf('useMap', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMap.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useMedia.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useMedia} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const isWide = useMedia('(min-width: 480px)');
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useMedia', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMedia.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useMediaDevices.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useMediaDevices} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useMediaDevices();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useMediaDevices', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMediaDevices.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useMotion.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useMotion} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useMotion();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useMotion', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMotion.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useMount.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useMount} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   useMount(() => console.log('MOUNTED'));
@@ -8,6 +9,7 @@ const Demo = () => {
 };
 
 storiesOf('useMount', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMount.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useNetwork.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useNetwork} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useNetwork();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useNetwork', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useNetwork.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useOrientation.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useOrientation} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useOrientation();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useOrientation', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useOrientation.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useRaf.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useRaf} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const frames = useRaf(5000, 1000);
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useRaf', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useRaf.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useSetState.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useSetState} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [state, setState] = useSetState({});
@@ -15,6 +16,7 @@ const Demo = () => {
 };
 
 storiesOf('useSetState', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useSetState.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useSize.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useSize} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [sized, {width, height}] = useSize(

src/__stories__/useSpeech.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useSpeech} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const state = useSpeech('Hello world!');
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useSpeech', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useSpeech.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useSpring.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useSpring} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [target, setTarget] = (React as any).useState(50);
@@ -17,6 +18,7 @@ const Demo = () => {
 };
 
 storiesOf('useSpring', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useSpring.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useTimeout.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useTimeout} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const ready = useTimeout(2e3);
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useTimeout', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useTimeout.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useTitle.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useTitle} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   useTitle('Hello world!');
@@ -9,6 +10,7 @@ const Demo = () => {
 };
 
 storiesOf('useTitle', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useTitle.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useToggle.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useToggle} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const [on, toggle, set] = useToggle(true);
@@ -16,6 +17,7 @@ const Demo = () => {
 };
 
 storiesOf('useToggle', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useToggle.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useTween.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useTween} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const t = useTween();
@@ -13,6 +14,7 @@ const Demo = () => {
 };
 
 storiesOf('useTween', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useTween.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useUnmount.story.tsx

@@ -1,6 +1,7 @@
 import {storiesOf} from '@storybook/react';
 import * as React from 'react';
 import {useUnmount} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   useUnmount(() => console.log('UNMOUNTED'));
@@ -8,6 +9,8 @@ const Demo = () => {
 };
 
 storiesOf('useUnmount', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useUnmount.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )
+

src/__stories__/useWindowSize.story.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {useWindowSize} from '..';
+import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const {width, height} = useWindowSize();
@@ -14,6 +15,7 @@ const Demo = () => {
 };
 
 storiesOf('useWindowSize', module)
-  .add('Example', () =>
+  .add('Docs', () => <ShowDocs md={require('../../docs/useWindowSize.md')} />)
+  .add('Demo', () =>
     <Demo/>
   )

src/util/ShowDocs.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+
+const h = React.createElement;
+
+const ShowDocs = (props) => {
+  return h('div', {},
+    h('div', {
+      style: {
+        padding: '0 20px'
+      },
+      dangerouslySetInnerHTML: {
+        __html: props.md
+      }
+    }),
+    h('style', {
+      dangerouslySetInnerHTML: {
+        __html: `
+@import url(http://fonts.googleapis.com/css?family=Merriweather:300italic,300);
+
+h1, h1 code, h2, h2 code, h3, h3 code, h4, h4 code {
+  color: #333;
+}
+
+html {
+  font-size: 16px;
+  max-width: 700px;
+  margin: auto;
+}
+
+body {
+  color: #444;
+  font-family: 'Merriweather', Georgia, serif;
+  max-width: 700px;
+  margin: auto;
+}
+
+/* === A bit of a gross hack so we can have bleeding divs/blockquotes. */
+
+div {
+  width: 100%;
+}
+
+div img {
+  width: 100%;
+}
+
+blockquote p {
+  font-size: 1.5rem;
+  font-style: italic;
+  margin: 1rem auto 1rem;
+  max-width: 48rem;
+}
+
+li {
+  margin-left: 2rem;
+}
+
+/* Counteract the specificity of the gross *:not() chain. */
+h1 {
+  padding: 1m 0 !important;
+}
+/*  === End gross hack */
+
+p {
+  color: #555;
+  height: auto;
+  line-height: 1.45;
+}
+
+pre, code {
+  font-family: Menlo, Monaco, "Courier New", monospace;
+  color: #42b983;
+}
+
+pre, pre code {
+  color: #000;
+}
+
+pre {
+  background-color: #fafafa;
+  font-size: .8rem;
+  overflow-x: scroll;
+  padding: 1.125em;
+}
+
+a, a pre, a code,
+a:visited {
+  color: #3498db;
+}
+
+a:hover,
+a:focus,
+a:active {
+  color: #2980b9;
+}
+        `
+      }
+    })
+  );
+};
+
+export default ShowDocs;