Update emotion and draggable

Author: pomber

packages/hitchcock/package.json

@@ -11,10 +11,10 @@
     "build:watch": "yarn build --watch --source-maps"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.22",
+    "@emotion/styled": "^10.0.22",
     "create-subscription": "^0.1.0",
-    "glamor": "^2.20.40",
-    "glamorous": "^4.12.1",
-    "react-draggable": "^3.0.5"
+    "react-draggable": "^4.1.0"
   },
   "peerDependencies": {
     "react": "0.0.0-experimental-f6b8d31a7",

packages/hitchcock/src/director.js

@@ -1,5 +1,5 @@
 import React from "react";
-import glamorous from "glamorous";
+import styled from "@emotion/styled";
 import { cachePublisher as cache, WAITING, RUNNING, PAUSED, DONE } from "./spy";
 import { createSubscription } from "create-subscription/cjs/create-subscription.production.min.js";
 import Draggable from "react-draggable";
@@ -29,12 +29,12 @@ const clickable = {
   }
 };
 
-const Row = glamorous.li({
+const Row = styled.li({
   margin: "8px 8px",
   ...clickable,
   fontSize: "15px",
   fontFamily: `"Courier New", Monaco, sans-serif`,
-  "& *:first-child": {
+  "& *:first-of-type": {
     height: 18,
     paddingBottom: 2,
     display: "flex",
@@ -45,7 +45,7 @@ const Row = glamorous.li({
   }
 });
 
-const ProgressBar = glamorous.div(({ completion }) => ({
+const ProgressBar = styled.div(({ completion }) => ({
   borderBottom: "solid 1px #222",
   width: `${completion}%`
 }));
@@ -84,15 +84,15 @@ const Record = ({ record }) => (
   </Subscription>
 );
 
-const List = glamorous.ul(({ scrollable }) => ({
+const List = styled.ul(({ scrollable }) => ({
   padding: 0,
   margin: 0,
   listStyleType: "none"
   // overflowY: "auto",
   // height: `${scrollable ? 94 : "auto"}`
 }));
 
-const EmptyList = glamorous.div({
+const EmptyList = styled.div({
   fontSize: "15px",
   margin: "8px 8px",
   fontFamily: `"Courier New", Monaco, sans-serif`
@@ -109,7 +109,7 @@ const RecordList = ({ records, scrollable }) =>
     </List>
   );
 
-const DirectorPanel = glamorous.div({
+const DirectorPanel = styled.div({
   position: "fixed",
   top: 10,
   right: 10,
@@ -121,15 +121,15 @@ const DirectorPanel = glamorous.div({
   fontFamily: `Helvetica Neue, Helvetica, Arial, "Lucida Grande", sans-serif`
 });
 
-const Header = glamorous.div({
+const Header = styled.div({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "flex-end",
   height: 20,
   lineHeight: "20px",
   verticalAlign: "bottom",
   margin: "20px 8px 8px 8px",
-  "& *:first-child": {
+  "& *:first-of-type": {
     fontSize: "18px",
     fontWeight: "500"
   },
@@ -140,7 +140,7 @@ const Header = glamorous.div({
   }
 });
 
-const Slider = glamorous.div({
+const Slider = styled.div({
   margin: "8px 8px 0px 8px",
   display: "flex",
   justifyContent: "space-between",