fix: Fix build UI (#58)

* chore: lib/cli/build/ui.tsx -> lib/cli/build/ui/index.tsx

* chore: Create Progress component

* fix: Fix build ui

* chore: Add tsx to .lntstagedrc.json

* chore: Remove BuildUI

* chore: Add dist to biome ignore files

* chore: Format

* chore: Implement success() and use it

Author: koki-develop

.lintstagedrc.json

@@ -1,3 +1,3 @@
 {
-  "*.{ts,json}": "bunx biome check --write --unsafe --no-errors-on-unmatched"
+  "*.{ts,tsx,json}": "bunx biome check --write --unsafe --no-errors-on-unmatched"
 }

biome.json

@@ -6,7 +6,8 @@
     "useIgnoreFile": false
   },
   "files": {
-    "ignoreUnknown": false
+    "ignoreUnknown": false,
+    "includes": ["!dist/**"]
   },
   "formatter": {
     "enabled": true,

lib/cli/build/index.tsx

@@ -2,8 +2,9 @@ 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";
+import { render, Text } from "ink";
+import Progress from "../ui/Progress";
+import { success } from "../ui/message";
 
 export async function build(args: string[]) {
   const ghatsDir = path.resolve(process.cwd(), "node_modules/.ghats");
@@ -33,27 +34,22 @@ export async function build(args: string[]) {
     );
   }
 
-  const { unmount, rerender } = render(
-    <BuildUI workflowPaths={workflowPaths} currentIndex={0} />
-  );
+  const { rerender, unmount } = render(null);
   try {
-    for (
-      let currentIndex = 0;
-      currentIndex < workflowPaths.length;
-      currentIndex++
-    ) {
-      const workflowPath = workflowPaths[currentIndex];
-      await _buildWorkflow(workflowPath!);
+    for (const workflowPath of workflowPaths) {
+      rerender(
+        <Progress status="in-progress" title={`Building ${workflowPath}`} />
+      );
+      await _buildWorkflow(workflowPath);
       rerender(
-        <BuildUI
-          workflowPaths={workflowPaths}
-          currentIndex={currentIndex + 1}
-        />
+        <Progress status="done" title={getBuildTargetPath(workflowPath)} />
       );
     }
   } finally {
     unmount();
   }
+
+  success("All workflows built successfully!");
 }
 
 async function _buildWorkflow(workflowPath: string) {

lib/cli/build/ui.tsx

@@ -0,0 +1,33 @@
+import { Static, Text } from "ink";
+import Spinner from "./Spinner";
+
+export type ProgressProps = {
+  status: "in-progress" | "done";
+  title: string;
+};
+
+export default function Progress({ status, title }: ProgressProps) {
+  if (status === "in-progress") {
+    return (
+      <Text>
+        <Spinner />
+        <Text dimColor> {title}</Text>
+      </Text>
+    );
+  }
+
+  if (status === "done") {
+    return (
+      <Static items={[title]}>
+        {(title) => (
+          <Text key={title}>
+            <Text color="green" bold>
+              ✓
+            </Text>
+            <Text bold> {title}</Text>
+          </Text>
+        )}
+      </Static>
+    );
+  }
+}

lib/cli/ui/Progress.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
 import { Text } from "ink";
+import { useEffect, useState } from "react";
 
 const spinners = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 

lib/cli/ui/Spinner.tsx

@@ -0,0 +1,10 @@
+import { render, Text } from "ink";
+
+export function success(message: string) {
+  const { unmount } = render(
+    <Text color="green" bold>
+      {"  "}🎉 {message}
+    </Text>
+  );
+  unmount();
+}