deps: Remove all webpack/babel and begin switch to docz (#5)

* Remove all webpack/babel and begin switch to docz

* Better types for token/text annotator

* Bump gh-pages and improve README

* Fix docz and add yarn

Author: mcamac

.babelrc

@@ -18,3 +18,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.docz

.gitignore

@@ -1,7 +1,8 @@
 {
   "singleQuote": true,
   "semi": false,
+  "tabWidth": 2,
   "trailingComma": "es5",
   "printWidth": 100,
   "bracketSpacing": false
-}
+}

.prettierrc

@@ -2,4 +2,25 @@
 
 A React component for interactively highlighting parts of text.
 
-[Demo](https://mcamac.github.io/react-text-annotate/)
+## Usage
+
+React `16.8.0` or higher is required as a peer dependency of this package.
+
+```
+npm install --save react-text-annotate
+```
+
+[Docs](https://mcamac.github.io/react-text-annotate/)
+
+## Examples
+
+A simple controlled annotation.
+
+```tsx
+import {TokenAnnotator, TextAnnotator} from 'react-text-annotate'
+
+<TokenAnnotator
+  tokens={['My', 'text', 'needs', 'annotating', 'for', 'NLP', 'training']}
+  value={[{start: 5, end: 6, tag: 'TOPIC', color: '#EEE'}]}
+/>
+```

README.md

@@ -0,0 +1,99 @@
+---
+name: Annotators
+route: /annotators
+---
+
+# Annotators
+
+import {Playground, Props} from 'docz'
+import {State} from 'react-powerplug'
+import {TextAnnotator, TokenAnnotator} from '../src'
+import {Card, TEXT, TAG_COLORS} from './Examples'
+
+
+```tsx
+import {TokenAnnotator, TextAnnotator} from 'react-text-annotate'
+
+<TokenAnnotator
+  tokens={['My', 'text', 'needs', 'annotating', 'for', 'NLP', 'training']}
+  value={[{start: 5, end: 6, tag: 'TOPIC'}]}
+/>
+```
+
+
+Note: the examples below use the `State` component from [react-powerplug](https://github.com/renatorib/react-powerplug).
+
+## `TokenAnnotator`
+
+Token annotators take a list of tokens, and allow selecting subranges of them.
+
+In the example below, drag or double click to select text. Click on a selected "mark" to deselect.
+
+<Playground>
+  <State initial={{value: [{start: 17, end: 19, tag: 'PERSON'}], tag: 'PERSON'}}>
+{({state, setState}) => (
+  <Card>
+      <select onChange={e => setState({tag: e.target.value})} value={state.tag}>
+        <option value="ORG">ORG</option>
+        <option value="PERSON">PERSON</option>
+      </select>
+      <TokenAnnotator
+        style={{
+          maxWidth: 500,
+          lineHeight: 1.5,
+        }}
+        tokens={TEXT.split(' ')}
+        value={state.value}
+        onChange={value => setState({value})}
+        getSpan={span => ({
+          ...span,
+          tag: state.tag,
+          color: TAG_COLORS[state.tag],
+        })}
+      />
+      <pre style={{fontSize: 12, lineHeight: 1.2}}>
+        {JSON.stringify(state, null, 2)}
+      </pre>
+    </Card>
+)}
+</State>
+</Playground>
+
+
+
+## `TextAnnotator`
+
+Text annotators take a string `content` prop, and allow the selecting of substrings.
+This can be useful for fine-grained text annotation tasks.
+
+In the example below, drag or double click to select text. Click on a selected "mark" to deselect.
+
+<Playground>
+  <State initial={{value: [{start: 18, end: 28, tag: 'PERSON'}], tag: 'PERSON'}}>
+{({state, setState}) => (
+  <Card>
+      <select onChange={e => setState({tag: e.target.value})} value={state.tag}>
+        <option value="ORG">ORG</option>
+        <option value="PERSON">PERSON</option>
+      </select>
+      <TextAnnotator
+        style={{
+          maxWidth: 500,
+          lineHeight: 1.5,
+        }}
+        content={TEXT}
+        value={state.value}
+        onChange={value => setState({value})}
+        getSpan={span => ({
+          ...span,
+          tag: state.tag,
+          color: TAG_COLORS[state.tag],
+        })}
+      />
+       <pre style={{fontSize: 12, lineHeight: 1.2}}>
+        {JSON.stringify(state, null, 2)}
+      </pre>
+    </Card>
+)}
+</State>
+</Playground>

docs/Annotators.mdx

@@ -0,0 +1,23 @@
+import React, {useState} from 'react'
+
+import {TextAnnotator, TokenAnnotator} from '../src'
+
+export const TEXT = `On Monday night , Mr. Fallon will have a co-host for the first time : The rapper Cardi B , who just released her first album, " Invasion of Privacy . "`
+
+export const TAG_COLORS = {
+  ORG: '#00ffa2',
+  PERSON: '#84d2ff',
+}
+
+export const Card = ({children}) => (
+  <div
+    style={{
+      boxShadow: '0 2px 4px rgba(0,0,0,.1)',
+      margin: 6,
+      maxWidth: 500,
+      padding: 16,
+    }}
+  >
+    {children}
+  </div>
+)

docs/Examples.tsx

@@ -0,0 +1,5 @@
+export default {
+  typescript: true,
+  ignore: ['README.md'],
+  base: '/react-text-annotate',
+}