feat: extract cursor component

packages/example/package.json

@@ -16,6 +16,7 @@
     "concurrently": "^4.1.2",
     "faker": "^4.1.0",
     "lodash": "^4.17.15",
+    "nodemon": "^1.19.2",
     "randomcolor": "^0.5.4",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
@@ -26,10 +27,9 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "build": "react-scripts build",
     "dev": "concurrently \"yarn start\" \"yarn serve\"",
-    "serve": "nodemon --watch ../backend/lib --inspect server.js",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "serve": "nodemon --watch ../backend/lib --inspect server.js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -45,8 +45,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "nodemon": "^1.19.2"
   }
 }

packages/example/src/App.tsx

@@ -19,9 +19,11 @@ class App extends Component<{}, { rooms: string[] }> {
 
     return (
       <Container>
-        <AddButton type="button" onClick={this.addRoom}>
-          Add Room
-        </AddButton>
+        <Panel>
+          <AddButton type="button" onClick={this.addRoom}>
+            Add Room
+          </AddButton>
+        </Panel>
         {rooms.map(room => (
           <Room key={room} slug={room} removeRoom={this.removeRoom(room)} />
         ))}
@@ -46,6 +48,10 @@ export default App
 
 const Container = styled.div``
 
+const Panel = styled.div`
+  display: flex;
+`
+
 const Button = styled.button`
   padding: 6px 14px;
   display: block;

packages/example/src/Client.tsx

@@ -45,18 +45,10 @@ class Client extends Component<ClienProps> {
         }
       },
       annotationDataMixin: {
-        name: this.props.name
+        name: this.props.name,
+        color,
+        alphaColor: color.slice(0, -2) + '0.2)'
       },
-      cursorStyle: {
-        background: color
-      },
-      caretStyle: {
-        background: color
-      },
-      selectionStyle: {
-        background: color.slice(0, -2) + '0.2)'
-      },
-      renderCursor: data => data.get('name'),
       // renderPreloader: () => <div>PRELOADER!!!!!!</div>,
       onConnect: this.onConnect,
       onDisconnect: this.onDisconnect