@akanjs/devkit 1.0.20 → 2.1.0-rc.1

package/ui/MultiScrollList.tsx

@@ -0,0 +1,242 @@
+"use client";
+import { Box, Text, useInput } from "ink";
+import { useEffect, useState } from "react";
+import { useStdoutDimensions } from "../useStdoutDimensions";
+
+interface MultiScrollListProps {
+  logList: {
+    title: string;
+    logs: {
+      type: string;
+      content: string;
+    }[];
+    color: string;
+  }[];
+
+  maxLength?: number;
+}
+
+/**
+ * @param logList 로그 목록
+ * @param maxLength 최대 로그 길이 (기본 100)
+ */
+const HEADER_HEIGHT = 1;
+const FOOTER_HEIGHT = 1;
+const OUTER_BORDER_HEIGHT = 2;
+const BORDER_HEIGHT = 2;
+const ANSI_ESCAPE_RE = new RegExp(`${String.fromCharCode(27)}(?:[@-Z\\\\-_]|\\[[\\s\\S]*?[@-~])`, "g");
+
+export const MultiScrollList = ({ logList, maxLength = 100 }: MultiScrollListProps) => {
+  // 창 너비, 높이
+  const [width, height] = useStdoutDimensions();
+  // 탭별 로그 렌더링
+
+  const [focusLog, setFocusLog] = useState<{ type: string; content: string }[]>([]);
+  // 탭별 로그 길이 저장 (스크롤시 로그 길이 변화로 위치 조정)
+  const [lengthMap, setLengthMap] = useState<Map<number, number>>(new Map());
+  // 스크롤 위치
+  const [scrollPos, setScrollPos] = useState(0);
+  // 현재 포커싱탭 인덱스
+  const [tabIndex, setTabIndex] = useState<number>(0);
+  // 스크롤 실행 여부
+  const [isRunning, setIsRunning] = useState(false);
+  // 박스 높이 (보더 사이즈 2, 헤더 사이즈 1, 푸터 사이즈 5 기본 1)
+  const [boxHeight, setBoxHeight] = useState(
+    height - HEADER_HEIGHT - OUTER_BORDER_HEIGHT - FOOTER_HEIGHT - BORDER_HEIGHT,
+  );
+  const boxWidth = width - 27;
+
+  // maxLength에 따라 로그 배열을 제한하는 유틸리티 함수
+  const getLimitedLogs = (logs: { type: string; content: string }[]) => {
+    const sortedLogs = logs.reduce<{ type: string; content: string }[]>((acc, log) => {
+      // log.content.length가 boxWidth보다 큰 경우 잘라서 줄 수 만큼 추가
+      // ANSI 코드 보관
+
+      const content = log.content.replace(ANSI_ESCAPE_RE, "");
+      if (content.length > boxWidth) {
+        const lines = Math.ceil(content.length / boxWidth);
+        for (let i = 0; i < lines; i++) {
+          acc.push({ type: log.type, content: content.slice(i * boxWidth, (i + 1) * boxWidth) });
+        }
+      } else {
+        acc.push(log);
+      }
+      return acc;
+    }, []);
+    return sortedLogs.length > maxLength ? sortedLogs.slice(sortedLogs.length - maxLength) : sortedLogs;
+  };
+
+  // 입력 이벤트 처리
+  useInput((input, key) => {
+    // 탭 키 이벤트 처리(포커싱 탭 변경)
+    if (key.tab) {
+      setTabIndex((prev: number) => (prev + 1) % logList.length);
+      setScrollPos(0);
+      setIsRunning(false);
+    }
+    // 스크롤 중지 이벤트 처리 (포커싱까지 완전히 종료)
+    if (key.escape) {
+      setScrollPos(0);
+      setIsRunning(false);
+    }
+    // 스크롤 중지 이벤트 처리 (포커싱 유지)
+    if (input === " ") {
+      setScrollPos(0);
+      setIsRunning(false);
+    }
+    // 스크롤 다운 이벤트 처리
+    if (key.downArrow && scrollPos > 0) {
+      if (key.shift) {
+        const newScrollPos = scrollPos - 10;
+        // 스크롤 최소 위치에 도달 경우에 대한 예외 처리
+        if (newScrollPos < 0) {
+          setScrollPos(0);
+        } else {
+          setScrollPos(newScrollPos);
+        }
+      } else {
+        const newScrollPos = scrollPos - 1;
+        setScrollPos(newScrollPos);
+      }
+    }
+    // 스크롤 업 이벤트 처리
+    if (key.upArrow && scrollPos < logList[tabIndex].logs.length - boxHeight) {
+      const limitedLogs = getLimitedLogs(logList[tabIndex].logs);
+      if (scrollPos < limitedLogs.length - boxHeight) {
+        // 스크롤 업 이벤트 처리 (스크롤 속도 증가)
+        if (key.shift) {
+          const newScrollPos = scrollPos + 10;
+          // 스크롤 최대 위치에 도달 경우에 대한 예외 처리
+          if (newScrollPos > limitedLogs.length - boxHeight) {
+            setScrollPos(limitedLogs.length - boxHeight);
+          } else {
+            setScrollPos(newScrollPos);
+          }
+        } else {
+          setScrollPos(scrollPos + 1);
+        }
+        if (!isRunning) setIsRunning(true);
+      }
+    }
+  });
+
+  useEffect(() => {
+    // 공통 로직을 함수로 추출
+    const getLogsToRender = (logs: { type: string; content: string }[], index: number) => {
+      // maxLength에 따라 로그 제한
+      const limitedLogs = getLimitedLogs(logs);
+      // 로그 중 boxWidth보다 긴 것이 있는 경우 잘라서 출력
+
+      // 활성 탭이고 스크롤 중인 특별한 경우
+      if (scrollPos > 0 && tabIndex === index) {
+        return limitedLogs.slice(limitedLogs.length - boxHeight - scrollPos, limitedLogs.length - scrollPos);
+      }
+      // 로그가 표시 영역보다 큰 경우 (공통 로직)
+      else if (limitedLogs.length > boxHeight) {
+        return limitedLogs.slice(limitedLogs.length - boxHeight, limitedLogs.length);
+      }
+      // 로그가 표시 영역에 모두 들어가는 경우 (공통 로직)
+      else {
+        return limitedLogs;
+      }
+    };
+
+    // isRunning일 때 로직
+    if (isRunning) {
+      // 선택된 탭의 로그 길이 변화 확인 및 스크롤 포지션 업데이트
+      if (lengthMap.has(tabIndex)) {
+        const tabLength = lengthMap.get(tabIndex);
+        const limitedLogsLength = Math.min(logList[tabIndex].logs.length, maxLength);
+        if (tabLength && tabLength < limitedLogsLength) {
+          setScrollPos(scrollPos + 1);
+          lengthMap.set(tabIndex, limitedLogsLength);
+        }
+      }
+
+      // 스크롤 위치에 따른 로그 렌더링 업데이트
+
+      setFocusLog(getLogsToRender(logList[tabIndex].logs, tabIndex));
+    }
+    // isRunning이 아닐 때 로직
+    else {
+      // lengthMap 업데이트 및 초기 렌더링
+      setFocusLog(getLogsToRender(logList[tabIndex].logs, tabIndex));
+    }
+  }, [logList, isRunning, scrollPos, tabIndex, boxHeight, maxLength]);
+
+  useEffect(() => {
+    setBoxHeight(height - HEADER_HEIGHT - OUTER_BORDER_HEIGHT - FOOTER_HEIGHT - BORDER_HEIGHT);
+  }, [height]);
+
+  // 초기 로그 사이즈 설정
+  useEffect(() => {
+    setLengthMap(new Map(logList.map((log, index) => [index, Math.min(log.logs.length, maxLength)])));
+  }, [logList, maxLength]);
+
+  return (
+    <Box width={width} height={height} borderStyle="round" borderColor="blackBright" flexDirection="column">
+      <Box width={"100%"} height={boxHeight + BORDER_HEIGHT + HEADER_HEIGHT} flexDirection="row">
+        <Box width={30} height="100%" flexDirection="column">
+          <Box>
+            <Text>
+              List {tabIndex + 1}/{logList.length}
+            </Text>
+          </Box>
+          <Box borderStyle="round" borderColor="blackBright" width={"100%"} height="100%" flexDirection="column">
+            {logList.map((log, index) => {
+              return (
+                <Text key={index} color={index === tabIndex ? "green" : "white"}>
+                  <Text>●</Text>&nbsp;
+                  {log.title.length > 25 ? `${log.title.slice(0, 25)}...` : log.title}
+                </Text>
+              );
+            })}
+          </Box>
+        </Box>
+        <Box width={"100%"} height="100%" flexDirection="column">
+          <Box height={1}>
+            <Text color={logList[tabIndex].color}>
+              {logList[tabIndex].title} {logList[tabIndex].logs.length}
+            </Text>
+          </Box>
+          <Box
+            borderStyle={isRunning ? "double" : "round"}
+            flexDirection="column"
+            borderColor={logList[tabIndex].color}
+            width="100%"
+            height="100%"
+          >
+            {scrollPos > 0 ? (
+              <>
+                {focusLog.slice(0, focusLog.length - 1).map((log, index) => {
+                  return (
+                    <Text underline={false} color={log.type === "error" ? "red" : "white"} key={index}>
+                      {log.content}
+                    </Text>
+                  );
+                })}
+                <Text underline={false} backgroundColor="green">
+                  Scrolling... +{scrollPos}
+                </Text>
+              </>
+            ) : (
+              focusLog.map((log, index) => {
+                return (
+                  <Text underline={false} color={log.type === "error" ? "red" : "white"} key={index}>
+                    {log.content}
+                  </Text>
+                );
+              })
+            )}
+          </Box>
+        </Box>
+      </Box>
+      {/* <Text>{renderMultiLogs[tabIndex][0]}</Text> */}
+      <Box width={"100%"} height={FOOTER_HEIGHT}>
+        <Text dimColor={true}>
+          Tab : switch tab | Up / Down(shift : x10) : scroll | Space : back last position | Esc : stop scrolling
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/ui/ScrollList.tsx

@@ -0,0 +1,107 @@
+"use client";
+import { Box, type BoxProps, Newline, Text, useInput } from "ink";
+import { type ReactNode, useEffect, useState } from "react";
+import { useStdoutDimensions } from "../useStdoutDimensions";
+
+interface ScrollListProps extends BoxProps {
+  list: ReactNode[];
+}
+
+export const ScrollList = ({ list, ...props }: ScrollListProps) => {
+  const [renderLogs, setRenderLogs] = useState<ReactNode[]>(list);
+  const [width, height] = useStdoutDimensions();
+  const [scrollPos, setScrollPos] = useState(0);
+  const [isRunning, setIsRunning] = useState(false);
+  const [boxHeight, setBoxHeight] = useState(height - 3);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      setIsRunning(false);
+      setScrollPos(0);
+    }
+    if (input === " " && isRunning) {
+      setIsRunning(false);
+      setScrollPos(0);
+    }
+    if (key.downArrow && scrollPos > 0) {
+      if (key.shift) {
+        setScrollPos(scrollPos - 10);
+      } else {
+        setScrollPos(scrollPos - 1);
+      }
+    }
+    if (key.upArrow && scrollPos < list.length - boxHeight) {
+      if (key.shift) {
+        setScrollPos(scrollPos + 10);
+      } else {
+        setScrollPos(scrollPos + 1);
+      }
+    }
+  });
+
+  useEffect(() => {
+    //1 로그가 박스 높이보다 크면 스크롤 위치 조정
+    //2. scrollPos값에 따라 포커싱 위치 변경하고 pos 활성시 포커싱 위치 고정
+    if (isRunning) {
+      setScrollPos(scrollPos + 1);
+      return;
+    }
+    if (list.length > boxHeight) {
+      setRenderLogs(list.slice(list.length - boxHeight, list.length));
+    } else {
+      setRenderLogs(list);
+    }
+  }, [list, isRunning]);
+
+  useEffect(() => {
+    setBoxHeight(Math.floor(height * 0.9));
+  }, [height]);
+
+  useEffect(() => {
+    if (scrollPos > 0) {
+      setRenderLogs(list.slice(list.length - boxHeight - scrollPos, list.length - scrollPos));
+      setIsRunning(true);
+    } else {
+      setRenderLogs(list.slice(list.length - boxHeight, list.length));
+      setIsRunning(false);
+    }
+  }, [scrollPos]);
+
+  return (
+    <Box {...props} width={width} height={"100%"} flexDirection="column">
+      <Box borderStyle="round" width={width} height={height - 3}>
+        <Newline />
+        <Text>
+          {isRunning ? (
+            <>
+              {renderLogs.slice(0, renderLogs.length - 1).map((log, index) => (
+                <>
+                  <Text key={index}>{log}</Text>
+                  <Newline />
+                </>
+              ))}
+              <Text backgroundColor="green">scrolling... + {scrollPos}</Text>
+            </>
+          ) : (
+            <>
+              {renderLogs.map((log, index) => (
+                <>
+                  <Text key={index}>{log}</Text>
+                  <Newline />
+                </>
+              ))}
+            </>
+          )}
+        </Text>
+      </Box>
+      <Box>
+        <Text dimColor={true}>
+          You can use the following shortcuts:
+          <Newline />* <Text backgroundColor="green">up</Text> and <Text backgroundColor="green">down</Text> to scroll.{" "}
+          <Text backgroundColor="green">shift</Text> to scroll faster.
+          <Newline />* <Text backgroundColor="green">escape</Text> to stop scrolling.
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/ui/index.ts

@@ -0,0 +1,2 @@
+export * from "./MultiScrollList";
+export * from "./ScrollList";

package/{esm/src/uploadRelease.js → uploadRelease.ts}

@@ -1,71 +1,90 @@
-import { Logger } from "@akanjs/common";
-import axios from "axios";
-import FormData from "form-data";
-import fs from "fs";
+import { HttpClient, Logger } from "akanjs/common";
+
 import { Spinner } from "./spinner";
-const spinning = (message) => {
+
+const spinning = (message: string) => {
   const spinner = new Spinner(message, { prefix: message, enableSpin: true }).start();
   return spinner;
 };
-const uploadRelease = async (appName, {
-  workspaceRoot,
-  environment,
-  buildNum,
-  platformVersion,
-  os,
-  local
-}) => {
+export const uploadRelease = async (
+  appName: string,
+  {
+    workspaceRoot,
+    environment,
+    buildNum,
+    platformVersion,
+    os,
+    local,
+  }: {
+    workspaceRoot: string;
+    environment: string;
+    buildNum: number;
+    platformVersion?: string;
+    os?: "android" | "ios";
+    local?: boolean;
+  },
+) => {
   const logger = new Logger("uploadRelease");
-  const basePath = local ? "http://localhost:8080/backend" : "https://cloud.akanjs.com/backend";
+  const basePath = local ? "http://localhost:8282/backend" : "https://cloud.akanjs.com/backend";
+  const httpClient = new HttpClient(basePath);
   const buildPath = `${workspaceRoot}/releases/builds/${appName}-release.tar.gz`;
   const appBuildPath = `${workspaceRoot}/releases/builds/${appName}-appBuild.zip`;
   const sourcePath = `${workspaceRoot}/releases/sources/${appName}-source.tar.gz`;
+
   const readingFilesSpinner = spinning("Reading files...");
   try {
-    const build = fs.readFileSync(buildPath);
-    const source = fs.readFileSync(sourcePath);
-    const appBuild = fs.readFileSync(appBuildPath);
-    const buildStat = fs.statSync(buildPath);
-    const sourceStat = fs.statSync(sourcePath);
-    const appBuildStat = fs.statSync(appBuildPath);
+    const buildFile = Bun.file(buildPath);
+    const sourceFile = Bun.file(sourcePath);
+    const appBuildFile = Bun.file(appBuildPath);
+    const buildStat = { mtime: new Date(buildFile.lastModified), size: buildFile.size };
+    const sourceStat = { mtime: new Date(sourceFile.lastModified), size: sourceFile.size };
+    const appBuildStat = { mtime: new Date(appBuildFile.lastModified), size: appBuildFile.size };
     readingFilesSpinner.succeed("Reading files... done");
+
     const preparingFormSpinner = spinning("Preparing form data...");
     const formData = new FormData();
-    formData.append("files", build, `${appName}-release.tar.gz`);
-    formData.append("files", source, `${appName}-source.tar.gz`);
-    formData.append("files", appBuild, `${appName}-appBuild.zip`);
+    formData.append("files", buildFile, `${appName}-release.tar.gz`);
+    formData.append("files", sourceFile, `${appName}-source.tar.gz`);
+    formData.append("files", appBuildFile, `${appName}-appBuild.zip`);
     formData.append(
       "metas",
       JSON.stringify([
         { lastModifiedAt: buildStat.mtime, size: buildStat.size },
         { lastModifiedAt: sourceStat.mtime, size: sourceStat.size },
-        { lastModifiedAt: appBuildStat.mtime, size: appBuildStat.size }
-      ])
+        { lastModifiedAt: appBuildStat.mtime, size: appBuildStat.size },
+      ]),
     );
     formData.append("type", "release");
     preparingFormSpinner.succeed("Preparing form data... done");
+
     try {
       const uploadingFilesSpinner = spinning("Uploading files to server...");
-      const [buildFile, sourceFile, appBuildFile] = (await axios.post(`${basePath}/file/addFilesRestApi`, formData)).data;
+      const [buildFile, sourceFile, appBuildFile] = await httpClient.post<
+        [{ id: string }, { id: string }, { id: string }]
+      >("/file/addFilesRestApi", formData);
       uploadingFilesSpinner.succeed("Uploading files to server... done");
+
       const fetchingAppSpinner = spinning(`Fetching dev app information for ${appName}...`);
       const major = platformVersion ? parseInt(platformVersion.split(".")[0]) : 1;
       const minor = platformVersion ? parseInt(platformVersion.split(".")[1]) : 0;
       const patch = platformVersion ? parseInt(platformVersion.split(".")[2]) : 0;
-      const devApp = (await axios.get(`${basePath}/devApp/devAppInName/${appName}`)).data;
+
+      const devApp = await httpClient.get<{ id: string }>(`/devApp/devAppInName/${appName}`);
       fetchingAppSpinner.succeed(`Fetching dev app information for ${appName}... done`);
+
       const pushingReleaseSpinner = spinning(`Pushing release to ${environment} environment...`);
-      const release = (await axios.post(
-        `${basePath}/release/pushRelease/${devApp.id}/${environment}/${major}/${minor}/${patch}/${sourceFile.id}/${buildFile.id}/${appBuildFile.id}${os ? `/${os}` : ""}`
-      )).data;
+      const release = await httpClient.post<{ id: string }>(
+        `/release/pushRelease/${devApp.id}/${environment}/${major}/${minor}/${patch}/${sourceFile.id}/${buildFile.id}/${appBuildFile.id}${os ? `/${os}` : ""}`,
+      );
       pushingReleaseSpinner.succeed(`Pushing release to ${environment} environment... done`);
       new Spinner(`Successfully pushed release to ${appName}-${environment} server. `, {
         prefix: `Successfully pushed release to ${appName}-${environment} server. `,
-        enableSpin: false
+        enableSpin: false,
       }).succeed(`Successfully pushed release to ${appName}-${environment} server. `);
       return release;
     } catch (e) {
       const errorMessage = e instanceof Error ? e.message : "Unknown error";
+      logger.error(`Upload release failed: ${errorMessage}`);
       return null;
     }
   } catch (e) {
@@ -74,6 +93,3 @@ const uploadRelease = async (appName, {
     return null;
   }
 };
-export {
-  uploadRelease
-};

package/{esm/src/useStdoutDimensions.js → useStdoutDimensions.ts}

@@ -1,9 +1,11 @@
 "use client";
 import { useStdout } from "ink";
 import { useEffect, useState } from "react";
-const useStdoutDimensions = () => {
+
+export const useStdoutDimensions = (): [number, number] => {
   const { stdout } = useStdout();
-  const [dimensions, setDimensions] = useState([stdout.columns, stdout.rows]);
+  const [dimensions, setDimensions] = useState<[number, number]>([stdout.columns, stdout.rows]);
+
   useEffect(() => {
     const handler = () => {
       setDimensions([stdout.columns, stdout.rows]);
@@ -13,8 +15,6 @@ const useStdoutDimensions = () => {
       stdout.off("resize", handler);
     };
   }, [stdout]);
+
   return dimensions;
 };
-export {
-  useStdoutDimensions
-};

package/cjs/index.js

@@ -1,21 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var devkit_exports = {};
-module.exports = __toCommonJS(devkit_exports);
-__reExport(devkit_exports, require("./src"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("./src")
-});