add monitor cli

cli/src/components/Builds.tsx

@@ -0,0 +1,33 @@
+import { Box, Newline, Text } from "ink";
+import React from "react";
+import { SetConfig } from "../types";
+import Selector from "./util/Selector";
+
+const Builds = (p: { setConfig: SetConfig; next: () => void }) => {
+	return (
+		<Box flexDirection="column">
+			<Text>Would you like to enable docker build services?</Text>
+			<Text>
+				This will create a{" "}
+				<Text color="blue" bold>
+					docker registry
+				</Text>{" "}
+				and enable Monitor to act as a{" "}
+				<Text color="blue" bold>
+					build server
+				</Text>
+				.
+			</Text>
+			<Newline />
+			<Selector
+				items={["yes", "no"]}
+				onSelect={(item) => {
+					p.setConfig("useBuilds", item === "yes");
+					p.next();
+				}}
+			/>
+		</Box>
+	);
+};
+
+export default Builds;

cli/src/components/FinalConfig.tsx

@@ -0,0 +1,53 @@
+import { Box, Newline, Text, useInput } from "ink";
+import React from "react";
+import { Config } from "../types";
+
+const FinalConfig = (p: {
+  periphery: boolean | undefined;
+  config: Config;
+  onConfirm: () => void;
+}) => {
+  useInput((_, key) => {
+    if (key.return) p.onConfirm();
+  });
+  if (p.periphery) {
+    return (
+      <Text>
+        press{" "}
+        <Text color="green" bold>
+          enter
+        </Text>{" "}
+        to start setup of the <Text color="red">monitor periphery</Text>. you
+        cannot go back after this begins.
+      </Text>
+    );
+  } else {
+    return (
+      <Box flexDirection="column">
+        <Text color="blue" bold>
+          your monitor core config
+        </Text>
+        <Newline />
+        <Box flexDirection="column" borderColor="green" borderStyle="round">
+          <Text>
+            use builds:{" "}
+            <Text color={p.config.useBuilds ? "green" : "red"} bold>
+              {p.config.useBuilds ? "yes" : "no"}
+            </Text>
+          </Text>
+        </Box>
+        <Newline />
+        <Text>
+          press{" "}
+          <Text color="green" bold>
+            enter
+          </Text>{" "}
+          to start setup of <Text color="cyan">monitor core</Text>. you cannot
+          go back after this begins.
+        </Text>
+      </Box>
+    );
+  }
+};
+
+export default FinalConfig;

cli/src/components/Intro.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Box, Newline, Text, useInput } from "ink";
+
+const Intro = (p: { next: () => void }) => {
+	useInput((_, key) => {
+		if (key.return) p.next();
+	});
+	return (
+		<Box flexDirection="column">
+			<Text>
+				This is a CLI to setup{" "}
+				<Text color="cyan" bold>
+					Monitor
+				</Text>
+				, a tool to manage application deployment.
+			</Text>
+			<Newline />
+			<Text>
+				press{" "}
+				<Text color="green" bold>
+					enter
+				</Text>{" "}
+				to continue.
+			</Text>
+		</Box>
+	);
+};
+
+export default Intro;

cli/src/components/Periphery.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Box, Newline, Text } from "ink";
+import Selector from "./util/Selector";
+import { SetConfig } from "../types";
+
+const Periphery = (p: {
+  setPeriphery: (a: boolean) => void;
+  next: () => void;
+}) => {
+  return (
+    <Box flexDirection="column">
+      <Text>
+        Are you setting up <Text color="cyan">monitor core</Text> or {" "}
+        <Text color="red">monitor periphery</Text>?
+      </Text>
+      <Newline />
+      <Selector
+        items={["core", "peripheral"]}
+        onSelect={(item) => {
+          p.setPeriphery(item === "periphery");
+          p.next();
+        }}
+      />
+    </Box>
+  );
+};
+
+export default Periphery;

cli/src/components/Setup.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+const Setup = (p: { periphery: boolean | undefined }) => {
+  return (
+    <Box flexDirection="column">
+      <Text>
+        setting up{" "}
+        <Text color={p.periphery ? "red" : "cyan"}>
+          {p.periphery ? "a peripheral client..." : "monitor core"}
+        </Text>{" "}
+        {!p.periphery && "using the specified configuration..."}
+      </Text>
+    </Box>
+  );
+};
+
+export default Setup;

cli/src/components/util/Selector.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+
+const Selector = (p: {
+	items: string[];
+	onSelect?: (item: string, i: number) => void;
+}) => {
+	const [highlighted, setHighlighted] = useState(0);
+	useInput((_, key) => {
+		if (key.upArrow) {
+			setHighlighted(Math.max(highlighted - 1, 0));
+		} else if (key.downArrow) {
+			setHighlighted(Math.min(highlighted + 1, p.items.length - 1));
+		} else if (key.return) {
+			if (p.onSelect) p.onSelect(p.items[highlighted]!, highlighted);
+		}
+	});
+	return (
+		<Box flexDirection="column">
+			{p.items.map((item, i) => {
+				return (
+          <Text key={i} color={i === highlighted ? "green" : "white"}>
+            {i === highlighted ? ">" : " "} {item}
+          </Text>
+        );
+			})}
+		</Box>
+	);
+};
+
+export default Selector;