@akiojin/gwt 4.10.0 → 4.12.0

package/src/cli/ui/components/common/Confirm.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-import { Select, type SelectItem } from "./Select.js";
-
-export interface ConfirmProps {
-  message: string;
-  onConfirm: (confirmed: boolean) => void;
-  yesLabel?: string;
-  noLabel?: string;
-  defaultNo?: boolean;
-}
-
-/**
- * Confirm component - Yes/No confirmation dialog
- */
-export function Confirm({
-  message,
-  onConfirm,
-  yesLabel = "Yes",
-  noLabel = "No",
-  defaultNo = false,
-}: ConfirmProps) {
-  const items: SelectItem[] = [
-    { label: yesLabel, value: "yes" },
-    { label: noLabel, value: "no" },
-  ];
-
-  const handleSelect = (item: SelectItem) => {
-    onConfirm(item.value === "yes");
-  };
-
-  return (
-    <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text>{message}</Text>
-      </Box>
-      <Select
-        items={items}
-        onSelect={handleSelect}
-        initialIndex={defaultNo ? 1 : 0}
-      />
-    </Box>
-  );
-}

package/src/cli/ui/components/common/ErrorBoundary.tsx

@@ -1,60 +0,0 @@
-import React, { Component, type ReactNode } from "react";
-import { Box, Text } from "ink";
-
-interface ErrorBoundaryProps {
-  children: ReactNode;
-  fallback?: React.ComponentType<{ error: Error }>;
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-/**
- * Error Boundary component to catch and display errors
- */
-export class ErrorBoundary extends Component<
-  ErrorBoundaryProps,
-  ErrorBoundaryState
-> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    console.error("ErrorBoundary caught an error:", error, errorInfo);
-  }
-
-  componentDidUpdate(prevProps: ErrorBoundaryProps): void {
-    // Reset error state when children change
-    if (this.state.hasError && prevProps.children !== this.props.children) {
-      this.setState({ hasError: false, error: null });
-    }
-  }
-
-  render(): ReactNode {
-    if (this.state.hasError && this.state.error) {
-      const { fallback: Fallback } = this.props;
-
-      if (Fallback) {
-        return <Fallback error={this.state.error} />;
-      }
-
-      return (
-        <Box flexDirection="column" padding={1}>
-          <Text color="red" bold>
-            Error: {this.state.error.message || "Unknown error"}
-          </Text>
-        </Box>
-      );
-    }
-
-    return this.props.children;
-  }
-}

package/src/cli/ui/components/common/Input.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { Box, Text, useInput } from "ink";
-import TextInput from "ink-text-input";
-
-export interface InputProps {
-  value: string;
-  onChange: (value: string) => void;
-  onSubmit: (value: string) => void;
-  placeholder?: string;
-  label?: string;
-  mask?: string;
-  /**
-   * Block specific key bindings to prevent parent handlers from processing them
-   * Useful for blocking shortcuts like 'c', 'r' while typing
-   */
-  blockKeys?: string[];
-}
-
-/**
- * Input component - wrapper around ink-text-input with optional label
- */
-export function Input({
-  value,
-  onChange,
-  onSubmit,
-  placeholder,
-  label,
-  mask,
-  blockKeys,
-}: InputProps) {
-  // Block specific keys from being processed by parent useInput handlers
-  // This prevents shortcuts (c/r/m) from triggering while typing in the input
-  useInput((input) => {
-    if (blockKeys && blockKeys.includes(input)) {
-      // Consume the key - don't let it propagate to parent handlers
-      return;
-    }
-  });
-
-  return (
-    <Box flexDirection="column">
-      {label && (
-        <Box marginBottom={0}>
-          <Text>{label}</Text>
-        </Box>
-      )}
-      <Box>
-        <TextInput
-          value={value}
-          onChange={onChange}
-          onSubmit={onSubmit}
-          {...(placeholder !== undefined && { placeholder })}
-          {...(mask !== undefined && { mask })}
-        />
-      </Box>
-    </Box>
-  );
-}

package/src/cli/ui/components/common/LoadingIndicator.tsx

@@ -1,98 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Box, Text } from "ink";
-
-export interface LoadingIndicatorProps {
-  /** true にするとローディング表示を開始する */
-  isLoading: boolean;
-  /** 表示までの遅延時間 (ms)。デフォルトは 300ms */
-  delay?: number;
-  /** 表示するメッセージ */
-  message?: string;
-  /** スピナーの更新間隔 (ms)。デフォルトは 80ms */
-  interval?: number;
-  /** 使用するスピナーフレーム。ASCII のみを想定 */
-  frames?: string[];
-}
-
-const DEFAULT_FRAMES = ["|", "/", "-", "\\"];
-
-/**
- * ローディング中に簡易スピナーとメッセージを表示するコンポーネント。
- * delay で指定した時間を超えるまでスピナーを表示しないことで、短時間の処理ではちらつきを抑える。
- */
-export function LoadingIndicator({
-  isLoading,
-  delay = 300,
-  message = "Loading... please wait",
-  interval = 80,
-  frames = DEFAULT_FRAMES,
-}: LoadingIndicatorProps) {
-  const [visible, setVisible] = useState(false);
-  const [frameIndex, setFrameIndex] = useState(0);
-  const delayTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  // スピナーに使用するフレームをキャッシュ
-  const safeFrames = useMemo(
-    () => (frames.length > 0 ? frames : DEFAULT_FRAMES),
-    [frames],
-  );
-
-  useEffect(() => {
-    // ローディングが開始したら、delay後に表示を有効化
-    if (isLoading) {
-      delayTimerRef.current = setTimeout(() => {
-        setVisible(true);
-      }, delay);
-    } else {
-      setVisible(false);
-      setFrameIndex(0);
-    }
-
-    return () => {
-      if (delayTimerRef.current) {
-        clearTimeout(delayTimerRef.current);
-        delayTimerRef.current = null;
-      }
-    };
-  }, [isLoading, delay]);
-
-  useEffect(() => {
-    // 表示中のみスピナーを回転
-    if (visible && isLoading) {
-      intervalRef.current = setInterval(() => {
-        setFrameIndex((current) => (current + 1) % safeFrames.length);
-      }, interval);
-    }
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
-  }, [visible, isLoading, interval, safeFrames.length]);
-
-  // ローディングが解消されたらタイマーをクリア
-  useEffect(() => {
-    if (!isLoading && delayTimerRef.current) {
-      clearTimeout(delayTimerRef.current);
-      delayTimerRef.current = null;
-    }
-  }, [isLoading]);
-
-  if (!isLoading || !visible) {
-    return null;
-  }
-
-  return (
-    <Box gap={1}>
-      <Text color="yellow" data-testid="loading-indicator-frame">
-        {safeFrames[frameIndex]}
-      </Text>
-      <Text color="yellow" data-testid="loading-indicator-message">
-        {message}
-      </Text>
-    </Box>
-  );
-}

package/src/cli/ui/components/common/Select.tsx

@@ -1,247 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Box, Text, useStdout } from "ink";
-import { useAppInput } from "../../hooks/useAppInput.js";
-
-/**
- * Item descriptor for the `Select` component.
- */
-export interface SelectItem {
-  label: string;
-  value: string;
-}
-
-/**
- * Props for the `Select` component.
- */
-export interface SelectProps<T extends SelectItem = SelectItem> {
-  items: T[];
-  onSelect: (item: T) => void;
-  limit?: number;
-  initialIndex?: number;
-  disabled?: boolean;
-  renderIndicator?: (item: T, isSelected: boolean) => React.ReactNode;
-  renderItem?: (
-    item: T,
-    isSelected: boolean,
-    context: { columns: number },
-  ) => React.ReactNode;
-  // Optional controlled component props for cursor position
-  selectedIndex?: number;
-  onSelectedIndexChange?: (index: number) => void;
-  onSpace?: (item: T) => void;
-  onEscape?: () => void;
-}
-
-/**
- * Custom comparison function for React.memo
- * Compares items array by content (value and label) instead of reference
- */
-function arePropsEqual<T extends SelectItem = SelectItem>(
-  prevProps: SelectProps<T>,
-  nextProps: SelectProps<T>,
-): boolean {
-  // Check if non-array props are the same
-  if (
-    prevProps.limit !== nextProps.limit ||
-    prevProps.disabled !== nextProps.disabled ||
-    prevProps.initialIndex !== nextProps.initialIndex ||
-    prevProps.selectedIndex !== nextProps.selectedIndex ||
-    prevProps.onSelect !== nextProps.onSelect ||
-    prevProps.onSelectedIndexChange !== nextProps.onSelectedIndexChange ||
-    prevProps.renderIndicator !== nextProps.renderIndicator ||
-    prevProps.renderItem !== nextProps.renderItem ||
-    prevProps.onSpace !== nextProps.onSpace ||
-    prevProps.onEscape !== nextProps.onEscape
-  ) {
-    return false;
-  }
-
-  // Check if items arrays have the same length
-  if (prevProps.items.length !== nextProps.items.length) {
-    return false;
-  }
-
-  // Compare items by content (value and label)
-  for (let i = 0; i < prevProps.items.length; i++) {
-    const prevItem = prevProps.items[i];
-    const nextItem = nextProps.items[i];
-
-    if (!prevItem || !nextItem) {
-      return false;
-    }
-
-    if (
-      prevItem.value !== nextItem.value ||
-      prevItem.label !== nextItem.label
-    ) {
-      return false;
-    }
-  }
-
-  // All props are equal
-  return true;
-}
-
-/**
- * Select component - custom implementation with no looping
- * Cursor stops at top and bottom instead of wrapping around
- * Wrapped with React.memo for performance optimization
- */
-const SelectComponent = <T extends SelectItem = SelectItem>({
-  items,
-  onSelect,
-  limit,
-  initialIndex = 0,
-  disabled = false,
-  renderIndicator,
-  renderItem,
-  selectedIndex: externalSelectedIndex,
-  onSelectedIndexChange,
-  onSpace,
-  onEscape,
-}: SelectProps<T>) => {
-  // Support both controlled and uncontrolled modes
-  const [internalSelectedIndex, setInternalSelectedIndex] =
-    useState(initialIndex);
-  const [offset, setOffset] = useState(0);
-
-  // Use external selectedIndex if provided (controlled mode), otherwise use internal state
-  const isControlled = externalSelectedIndex !== undefined;
-  const selectedIndex = isControlled
-    ? externalSelectedIndex
-    : internalSelectedIndex;
-
-  const updateSelectedIndex = (value: number | ((prev: number) => number)) => {
-    const newIndex = typeof value === "function" ? value(selectedIndex) : value;
-
-    if (!isControlled) {
-      setInternalSelectedIndex(newIndex);
-    }
-
-    if (onSelectedIndexChange) {
-      onSelectedIndexChange(newIndex);
-    }
-  };
-
-  useEffect(() => {
-    if (items.length === 0) {
-      updateSelectedIndex(0);
-      setOffset(0);
-      return;
-    }
-
-    updateSelectedIndex((current) => {
-      const clamped = Math.min(current, items.length - 1);
-      return clamped < 0 ? 0 : clamped;
-    });
-
-    if (limit) {
-      setOffset((current) => {
-        if (current <= items.length - limit) {
-          return current < 0 ? 0 : current;
-        }
-        const newOffset = Math.max(0, items.length - limit);
-        return newOffset;
-      });
-    }
-  }, [items, limit]);
-
-  useAppInput((input, key) => {
-    if (disabled) {
-      return;
-    }
-
-    // Only handle navigation and selection keys
-    // Let other keys (q, m, n, c, etc.) propagate to parent components
-    if (key.upArrow || input === "k") {
-      // Move up but don't loop - stop at 0
-      updateSelectedIndex((current) => {
-        const newIndex = Math.max(0, current - 1);
-
-        // Adjust offset if needed for scrolling
-        if (limit && newIndex < offset) {
-          setOffset(newIndex);
-        }
-
-        return newIndex;
-      });
-    } else if (key.downArrow || input === "j") {
-      // Move down but don't loop - stop at last item
-      updateSelectedIndex((current) => {
-        const newIndex = Math.min(items.length - 1, current + 1);
-
-        // Adjust offset if needed for scrolling
-        if (limit && newIndex >= offset + limit) {
-          setOffset(newIndex - limit + 1);
-        }
-
-        return newIndex;
-      });
-    } else if (key.return || input === "\n") {
-      // Select current item (handle both CR in raw mode and LF in cooked mode)
-      const selectedItem = items[selectedIndex];
-      if (selectedItem && !disabled) {
-        onSelect(selectedItem);
-      }
-    } else if (input === ' ' && onSpace) {
-      const selectedItem = items[selectedIndex];
-      if (selectedItem && !disabled) {
-        onSpace(selectedItem);
-      }
-    } else if (key.escape && onEscape) {
-      onEscape();
-    }
-    // All other keys are ignored and will propagate to parent components
-  });
-
-  // Determine visible items based on limit
-  const visibleItems = limit ? items.slice(offset, offset + limit) : items;
-  const visibleStartIndex = limit ? offset : 0;
-
-  const { stdout } = useStdout();
-  const columns = stdout?.columns ?? 80;
-
-  return (
-    <Box flexDirection="column">
-      {visibleItems.map((item, index) => {
-        const actualIndex = visibleStartIndex + index;
-        const isSelected = actualIndex === selectedIndex;
-
-        if (renderItem) {
-          return (
-            <Box key={item.value} flexDirection="row">
-              {renderItem(item, isSelected, { columns })}
-            </Box>
-          );
-        }
-
-        const indicatorElement = renderIndicator ? (
-          renderIndicator(item, isSelected)
-        ) : isSelected ? (
-          <Text color="cyan">›</Text>
-        ) : (
-          <Text> </Text>
-        );
-
-        return (
-          <Box key={item.value} flexDirection="row">
-            <Box marginRight={1}>{indicatorElement ?? <Text> </Text>}</Box>
-            {isSelected ? (
-              <Text color="cyan">{item.label}</Text>
-            ) : (
-              <Text>{item.label}</Text>
-            )}
-          </Box>
-        );
-      })}
-    </Box>
-  );
-};
-
-/**
- * Export memoized Select component
- */
-export const Select = React.memo(
-  SelectComponent,
-  arePropsEqual,
-) as typeof SelectComponent;

package/src/cli/ui/components/common/SpinnerIcon.tsx

@@ -1,86 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import { Text } from "ink";
-
-const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧"];
-
-export interface SpinnerIconProps {
-  /** true にするとスピナーを回転させる */
-  isSpinning: boolean;
-  /** スピナーの色 */
-  color?: "cyan" | "green" | "yellow" | "red";
-  /** スピナーの更新間隔 (ms)。デフォルトは 120ms */
-  interval?: number;
-}
-
-/**
- * インラインで使用できるスピナーアイコンコンポーネント。
- * 自身の内部で状態を管理するため、親コンポーネントの再レンダリングを引き起こさない。
- */
-export function SpinnerIcon({
-  isSpinning,
-  color = "cyan",
-  interval = 120,
-}: SpinnerIconProps) {
-  const [frameIndex, setFrameIndex] = useState(0);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  useEffect(() => {
-    if (isSpinning) {
-      intervalRef.current = setInterval(() => {
-        setFrameIndex((current) => (current + 1) % SPINNER_FRAMES.length);
-      }, interval);
-    } else {
-      setFrameIndex(0);
-    }
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
-  }, [isSpinning, interval]);
-
-  if (!isSpinning) {
-    return null;
-  }
-
-  const frame = SPINNER_FRAMES[frameIndex] ?? SPINNER_FRAMES[0];
-
-  return <Text color={color}>{frame}</Text>;
-}
-
-/**
- * スピナーを文字列として取得するためのフック。
- * Textコンポーネントでラップせず、文字列として使用したい場合に使用。
- */
-export function useSpinnerFrame(
-  isSpinning: boolean,
-  interval = 120,
-): string | null {
-  const [frameIndex, setFrameIndex] = useState(0);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
-  useEffect(() => {
-    if (isSpinning) {
-      intervalRef.current = setInterval(() => {
-        setFrameIndex((current) => (current + 1) % SPINNER_FRAMES.length);
-      }, interval);
-    } else {
-      setFrameIndex(0);
-    }
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-        intervalRef.current = null;
-      }
-    };
-  }, [isSpinning, interval]);
-
-  if (!isSpinning) {
-    return null;
-  }
-
-  return SPINNER_FRAMES[frameIndex] ?? SPINNER_FRAMES[0] ?? null;
-}

package/src/cli/ui/components/parts/Footer.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-
-export interface FooterAction {
-  key: string;
-  description: string;
-}
-
-export interface FooterProps {
-  actions: FooterAction[];
-  separator?: string;
-}
-
-/**
- * Footer component - displays keyboard actions
- * Optimized with React.memo to prevent unnecessary re-renders
- */
-export const Footer = React.memo(function Footer({
-  actions,
-  separator = "  ",
-}: FooterProps) {
-  if (actions.length === 0) {
-    return null;
-  }
-
-  return (
-    <Box>
-      {actions.map((action, index) => (
-        <Box key={`${action.key}-${index}`}>
-          <Text dimColor>[</Text>
-          <Text bold color="cyan">
-            {action.key}
-          </Text>
-          <Text dimColor>]</Text>
-          <Text> {action.description}</Text>
-          {index < actions.length - 1 && <Text dimColor>{separator}</Text>}
-        </Box>
-      ))}
-    </Box>
-  );
-});