Extract Sidebar panels into separate components (#230)

* Extract Sidebar panels into separate components

* Add Jest TS types

src/components/panels/PanelCanvas.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import { ColorPicker } from "../ColorPicker";
+
+interface PanelCanvasProps {
+  viewBackgroundColor: string;
+  onViewBackgroundColorChange: (val: string) => void;
+  onClearCanvas: React.MouseEventHandler;
+}
+
+export const PanelCanvas: React.FC<PanelCanvasProps> = ({
+  viewBackgroundColor,
+  onViewBackgroundColorChange,
+  onClearCanvas
+}) => {
+  return (
+    <>
+      <h4>Canvas</h4>
+      <div className="panelColumn">
+        <h5>Canvas Background Color</h5>
+        <ColorPicker
+          color={viewBackgroundColor}
+          onChange={color => onViewBackgroundColorChange(color)}
+        />
+        <button
+          type="button"
+          onClick={onClearCanvas}
+          title="Clear the canvas & reset background color"
+        >
+          Clear canvas
+        </button>
+      </div>
+    </>
+  );
+};

src/components/panels/PanelColor.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { ColorPicker } from "../ColorPicker";
+
+interface PanelColorProps {
+  title: string;
+  colorValue: string | null;
+  onColorChange: (value: string) => void;
+}
+
+export const PanelColor: React.FC<PanelColorProps> = ({
+  title,
+  onColorChange,
+  colorValue
+}) => {
+  return (
+    <>
+      <h5>{title}</h5>
+      <ColorPicker
+        color={colorValue}
+        onChange={color => onColorChange(color)}
+      />
+    </>
+  );
+};

src/components/panels/PanelExport.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { EditableText } from "../EditableText";
+
+interface PanelExportProps {
+  projectName: string;
+  onProjectNameChange: (name: string) => void;
+  onExportAsPNG: React.MouseEventHandler;
+  exportBackground: boolean;
+  onExportBackgroundChange: (val: boolean) => void;
+  onSaveScene: React.MouseEventHandler;
+  onLoadScene: React.MouseEventHandler;
+}
+
+export const PanelExport: React.FC<PanelExportProps> = ({
+  projectName,
+  exportBackground,
+  onProjectNameChange,
+  onExportBackgroundChange,
+  onSaveScene,
+  onLoadScene,
+  onExportAsPNG
+}) => {
+  return (
+    <>
+      <h4>Export</h4>
+      <div className="panelColumn">
+        <h5>Name</h5>
+        {projectName && (
+          <EditableText
+            value={projectName}
+            onChange={(name: string) => onProjectNameChange(name)}
+          />
+        )}
+        <h5>Image</h5>
+        <button onClick={onExportAsPNG}>Export to png</button>
+        <label>
+          <input
+            type="checkbox"
+            checked={exportBackground}
+            onChange={e => {
+              onExportBackgroundChange(e.target.checked);
+            }}
+          />
+          background
+        </label>
+        <h5>Scene</h5>
+        <button onClick={onSaveScene}>Save as...</button>
+        <button onClick={onLoadScene}>Load file...</button>
+      </div>
+    </>
+  );
+};

src/components/panels/PanelSelection.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+interface PanelSelectionProps {
+  onBringForward: React.MouseEventHandler;
+  onBringToFront: React.MouseEventHandler;
+  onSendBackward: React.MouseEventHandler;
+  onSendToBack: React.MouseEventHandler;
+}
+
+export const PanelSelection: React.FC<PanelSelectionProps> = ({
+  onBringForward,
+  onBringToFront,
+  onSendBackward,
+  onSendToBack
+}) => {
+  return (
+    <>
+      <h4>Selection</h4>
+      <div className="buttonList">
+        <button type="button" onClick={onBringForward}>
+          Bring forward
+        </button>
+        <button type="button" onClick={onBringToFront}>
+          Bring to front
+        </button>
+        <button type="button" onClick={onSendBackward}>
+          Send backward
+        </button>
+        <button type="button" onClick={onSendToBack}>
+          Send to back
+        </button>
+      </div>
+    </>
+  );
+};

src/components/panels/PanelTools.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { SHAPES } from "../../shapes";
+import { capitalizeString } from "../../utils";
+
+interface PanelToolsProps {
+  activeTool: string;
+  onToolChange: (value: string) => void;
+}
+
+export const PanelTools: React.FC<PanelToolsProps> = ({
+  activeTool,
+  onToolChange
+}) => {
+  return (
+    <>
+      <h4>Shapes</h4>
+      <div className="panelTools">
+        {SHAPES.map(({ value, icon }) => (
+          <label
+            key={value}
+            className="tool"
+            title={`${capitalizeString(value)} - ${capitalizeString(value)[0]}`}
+          >
+            <input
+              type="radio"
+              checked={activeTool === value}
+              onChange={() => {
+                onToolChange(value);
+              }}
+            />
+            <div className="toolIcon">{icon}</div>
+          </label>
+        ))}
+      </div>
+    </>
+  );
+};