Add prettierrc and fix lint

Author: Martin Camacho

.gitignore

@@ -9,6 +9,7 @@
 # production
 /dist
 /lib
+/example/dist
 
 # misc
 .DS_Store

.prettierrc

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

example/dist/app.js

@@ -10,16 +10,18 @@ const TAG_COLORS = {
   PERSON: '#84d2ff',
 }
 
-const Card = ({ children }) => (
+const Card = ({children}) => (
   <div
     style={{
       boxShadow: '0 2px 4px rgba(0,0,0,.1)',
       margin: 6,
       maxWidth: 500,
       padding: 16,
     }}
-  >{children}</div>
-);
+  >
+    {children}
+  </div>
+)
 
 class App extends React.Component<any, any> {
   state = {
@@ -41,7 +43,7 @@ class App extends React.Component<any, any> {
         <h3 style={{marginTop: 0}}>react-text-annotate</h3>
         <a href="https://github.com/mcamac/react-text-annotate">Github</a>
         <p>A React component for interactively highlighting parts of text.</p>
-        <div style={{ display: 'flex', marginBottom: 24 }}>
+        <div style={{display: 'flex', marginBottom: 24}}>
           <Card>
             <h4>Default</h4>
             <select onChange={this.handleTagChange} value={this.state.tag}>
@@ -84,11 +86,13 @@ class App extends React.Component<any, any> {
                 tag: this.state.tag,
                 color: TAG_COLORS[this.state.tag],
               })}
-              renderMark={(props) => (
+              renderMark={props => (
                 <mark
                   key={props.key}
-                  onClick={() => props.onClick({ start: props.start, end: props.end })}
-                >{props.content} [{props.tag}]</mark>
+                  onClick={() => props.onClick({start: props.start, end: props.end})}
+                >
+                  {props.content} [{props.tag}]
+                </mark>
               )}
             />
           </Card>

example/dist/app.js.map

@@ -24,7 +24,7 @@
     "fork-ts-checker-webpack-plugin": "^0.4.1",
     "gh-pages": "^1.1.0",
     "html-webpack-plugin": "^3.2.0",
-    "prettier": "^1.11.1",
+    "prettier": "^1.12.1",
     "react-hot-loader": "^4.0.1",
     "style-loader": "^0.20.3",
     "ts-loader": "^4.1.0",

example/dist/index.html

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 export interface MarkProps {
-  key: string,
+  key: string
   content: string
   start: number
   end: number
@@ -19,9 +19,7 @@ const Mark: React.SFC<MarkProps> = props => (
   >
     {props.content}
     {props.tag && (
-      <span style={{fontSize: '0.7em', fontWeight: 500, marginLeft: 6}}>
-        {props.tag}
-      </span>
+      <span style={{fontSize: '0.7em', fontWeight: 500, marginLeft: 6}}>{props.tag}</span>
     )}
   </mark>
 )

example/src/App.tsx

@@ -25,7 +25,7 @@ export interface TokenAnnotatorProps {
 // TODO: When React 16.3 types are ready, remove casts.
 class TokenAnnotator extends React.Component<TokenAnnotatorProps, {}> {
   static defaultProps = {
-    renderMark: (props) => <Mark {...props} />,
+    renderMark: props => <Mark {...props} />,
   }
 
   rootRef: any
@@ -98,12 +98,13 @@ class TokenAnnotator extends React.Component<TokenAnnotatorProps, {}> {
       <div style={style} ref={this.rootRef}>
         {splits.map(
           (split, i) =>
-            split.mark ? renderMark({
+            split.mark ? (
+              renderMark({
                 key: `${split.start}-${split.end}`,
                 ...split,
-                onClick: this.handleSplitClick
+                onClick: this.handleSplitClick,
               })
-            : (
+            ) : (
               <Token key={split.i} {...split} />
             )
         )}

package-lock.json

@@ -1,9 +1,6 @@
 import * as sortBy from 'lodash.sortby'
 
-export const splitWithOffsets = (
-  text,
-  offsets: {start: number; end: number}[]
-) => {
+export const splitWithOffsets = (text, offsets: {start: number; end: number}[]) => {
   let lastEnd = 0
   const splits = []
 
@@ -34,10 +31,7 @@ export const splitWithOffsets = (
   return splits
 }
 
-export const splitTokensWithOffsets = (
-  text,
-  offsets: {start: number; end: number}[]
-) => {
+export const splitTokensWithOffsets = (text, offsets: {start: number; end: number}[]) => {
   let lastEnd = 0
   const splits = []
 
@@ -70,19 +64,15 @@ export const splitTokensWithOffsets = (
 }
 
 export const selectionIsEmpty = (selection: Selection) => {
-  let position = selection.anchorNode.compareDocumentPosition(
-    selection.focusNode
-  )
+  let position = selection.anchorNode.compareDocumentPosition(selection.focusNode)
 
   return position === 0 && selection.focusOffset === selection.anchorOffset
 }
 
 export const selectionIsBackwards = (selection: Selection) => {
   if (selectionIsEmpty(selection)) return false
 
-  let position = selection.anchorNode.compareDocumentPosition(
-    selection.focusNode
-  )
+  let position = selection.anchorNode.compareDocumentPosition(selection.focusNode)
 
   let backward = false
   if (