Extract components and shapes into their respective modules (#212)

src/components/ButtonSelect.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export function ButtonSelect<T>({
+  options,
+  value,
+  onChange
+}: {
+  options: { value: T; text: string }[];
+  value: T | null;
+  onChange: (value: T) => void;
+}) {
+  return (
+    <div className="buttonList">
+      {options.map(option => (
+        <button
+          key={option.text}
+          onClick={() => onChange(option.value)}
+          className={value === option.value ? "active" : ""}
+        >
+          {option.text}
+        </button>
+      ))}
+    </div>
+  );
+}

src/components/ColorPicker.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { TwitterPicker } from "react-color";
+
+export function ColorPicker({
+  color,
+  onChange
+}: {
+  color: string | null;
+  onChange: (color: string) => void;
+}) {
+  const [isActive, setActive] = React.useState(false);
+  return (
+    <div>
+      <button
+        className="swatch"
+        style={color ? { backgroundColor: color } : undefined}
+        onClick={() => setActive(!isActive)}
+      />
+      {isActive ? (
+        <div className="popover">
+          <div className="cover" onClick={() => setActive(false)} />
+          <TwitterPicker
+            colors={[
+              "#000000",
+              "#ABB8C3",
+              "#FFFFFF",
+              "#FF6900",
+              "#FCB900",
+              "#00D084",
+              "#8ED1FC",
+              "#0693E3",
+              "#EB144C",
+              "#F78DA7",
+              "#9900EF"
+            ]}
+            width="205px"
+            color={color || undefined}
+            onChange={changedColor => {
+              onChange(changedColor.hex);
+            }}
+          />
+        </div>
+      ) : null}
+      <input
+        type="text"
+        className="swatch-input"
+        value={color || ""}
+        onChange={e => onChange(e.target.value)}
+      />
+    </div>
+  );
+}

src/components/EditableText.tsx

@@ -10,7 +10,7 @@ type Props = {
   onChange: (value: string) => void;
 };
 
-export default class EditableText extends Component<Props, InputState> {
+export class EditableText extends Component<Props, InputState> {
   constructor(props: Props) {
     super(props);