@akanjs/devkit 3.0.0-alpha.11 → 3.0.0-alpha.110

package/ui/MultiScrollList.tsx

@@ -1,242 +0,0 @@
-"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

@@ -1,107 +0,0 @@
-"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

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

package/useStdoutDimensions.ts

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