feat: Implement build UI (#55)

* chore: Install ink

* chore: build/index.ts -> build/index.tsx

* chore: Install react

* chore: Create Spinner component

* feat: Implement build ui

* fix: Fix ui

Author: koki-develop

bun.lock

@@ -0,0 +1,89 @@
+import * as fs from "node:fs";
+import { register } from "node:module";
+import * as path from "node:path";
+import { pathToFileURL } from "node:url";
+import { render } from "ink";
+import BuildUI from "./ui";
+
+export async function build(args: string[]) {
+  const ghatsDir = path.resolve(process.cwd(), "node_modules/.ghats");
+  const actionJsPath = path.join(ghatsDir, "action.js");
+  if (!fs.existsSync(actionJsPath)) {
+    fs.mkdirSync(ghatsDir, { recursive: true });
+    fs.writeFileSync(actionJsPath, "export {}");
+  }
+
+  register("@swc-node/register/esm", pathToFileURL("./"));
+
+  const workflowPaths: string[] = [];
+  if (args.length > 0) {
+    workflowPaths.push(...args);
+  } else {
+    const githubWorkflowsPath = ".github/workflows";
+    workflowPaths.push(
+      ...fs
+        .readdirSync(githubWorkflowsPath)
+        .filter((file) => {
+          if (!file.endsWith(".ts")) return false;
+          if (path.basename(file).startsWith("_")) return false;
+
+          return true;
+        })
+        .map((file) => path.join(githubWorkflowsPath, file))
+    );
+  }
+
+  const { unmount, rerender } = render(
+    <BuildUI workflowPaths={workflowPaths} currentIndex={0} />
+  );
+  try {
+    for (
+      let currentIndex = 0;
+      currentIndex < workflowPaths.length;
+      currentIndex++
+    ) {
+      const workflowPath = workflowPaths[currentIndex];
+      await _buildWorkflow(workflowPath!);
+      rerender(
+        <BuildUI
+          workflowPaths={workflowPaths}
+          currentIndex={currentIndex + 1}
+        />
+      );
+    }
+  } finally {
+    unmount();
+  }
+}
+
+async function _buildWorkflow(workflowPath: string) {
+  const module = await import(path.resolve(process.cwd(), workflowPath));
+  const workflowYml = JSON.stringify(module.default);
+
+  const dirname = path.dirname(workflowPath);
+  const filenameWithoutExtension = path.basename(
+    workflowPath,
+    path.extname(workflowPath)
+  );
+
+  fs.mkdirSync(dirname, { recursive: true });
+  fs.writeFileSync(
+    getBuildTargetPath(workflowPath),
+    [
+      "# DO NOT EDIT THIS FILE",
+      "# This file is automatically generated by ghats (https://www.npmjs.com/package/ghats)",
+      `# Edit the workflow in .github/workflows/${filenameWithoutExtension}.ts instead, and run \`ghats build\` to update this file.`,
+      workflowYml,
+    ].join("\n")
+  );
+}
+
+export function getBuildTargetPath(workflowPath: string) {
+  const dirname = path.dirname(workflowPath);
+  const filenameWithoutExtension = path.basename(
+    workflowPath,
+    path.extname(workflowPath)
+  );
+
+  return path.join(dirname, `${filenameWithoutExtension}.yml`);
+}

lib/cli/build/index.ts

@@ -0,0 +1,63 @@
+import { Box, Text } from "ink";
+import Spinner from "../ui/Spinner";
+import { getBuildTargetPath } from ".";
+
+type BuildUIProps = {
+  workflowPaths: string[];
+  currentIndex: number;
+};
+
+type Status = "pending" | "building" | "done";
+
+function getStatus(index: number, currentIndex: number): Status {
+  if (index < currentIndex) return "done";
+  if (index === currentIndex) return "building";
+  return "pending";
+}
+
+export default function BuildUI({ workflowPaths, currentIndex }: BuildUIProps) {
+  return (
+    <Box flexDirection="column">
+      {workflowPaths.map((workflowPath, index) => (
+        <WorkflowPath
+          key={workflowPath}
+          status={getStatus(index, currentIndex)}
+          workflowPath={workflowPath}
+        />
+      ))}
+    </Box>
+  );
+}
+
+type WorkflowPathProps = {
+  status: Status;
+  workflowPath: string;
+};
+
+function WorkflowPath({ status, workflowPath }: WorkflowPathProps) {
+  switch (status) {
+    case "pending":
+      return (
+        <Text dimColor>
+          {"  "}
+          {workflowPath}
+        </Text>
+      );
+    case "building":
+      return (
+        <Text>
+          <Spinner />
+          <Text dimColor> {workflowPath}</Text>
+        </Text>
+      );
+    case "done":
+      return (
+        <Text>
+          <Text color="green" bold>
+            ✔
+          </Text>
+          <Text bold> {getBuildTargetPath(workflowPath)}</Text>
+        </Text>
+      );
+  }
+}

lib/cli/build/index.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+import { Text } from "ink";
+
+const spinners = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export default function Spinner() {
+  const [spinnerIndex, setSpinnerIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSpinnerIndex((spinnerIndex) => (spinnerIndex + 1) % spinners.length);
+    }, 50);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return <Text color="cyan">{spinners[spinnerIndex]}</Text>;
+}

lib/cli/build/ui.tsx

@@ -29,12 +29,16 @@
   "dependencies": {
     "@swc-node/register": "1.10.10",
     "commander": "13.1.0",
+    "ink": "5.2.0",
     "octokit": "4.1.2",
+    "react": "18.3.1",
     "yaml": "2.7.1"
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.0-beta.1",
     "@types/bun": "1.2.8",
+    "@types/ink": "2.0.3",
+    "@types/react": "18.3.20",
     "ghats": "0.7.0",
     "husky": "9.1.7",
     "lint-staged": "15.5.0",