nikcli 0.0.6

package/src/cli/cmd/tui/component/table-db/table/table-formatters.ts

@@ -0,0 +1,191 @@
+export const TableFormatters = {
+  date(value: Date | string, format: "short" | "long" = "short"): string {
+    if (value === null || value === undefined) return "-"
+
+    const date = typeof value === "string" ? new Date(value) : value
+
+    if (isNaN(date.getTime())) return String(value)
+
+    if (format === "short") {
+      return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      })
+    }
+
+    return date.toLocaleString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    })
+  },
+
+  time(value: Date | string | number, format: "short" | "long" = "short"): string {
+    if (value === null || value === undefined) return "-"
+
+    let date: Date
+
+    if (typeof value === "number") {
+      date = new Date(value)
+    } else if (typeof value === "string") {
+      date = new Date(value)
+    } else {
+      date = value
+    }
+
+    if (isNaN(date.getTime())) return String(value)
+
+    if (format === "short") {
+      return date.toLocaleTimeString("en-US", {
+        hour: "2-digit",
+        minute: "2-digit",
+      })
+    }
+
+    return date.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    })
+  },
+
+  number(value: number | null | undefined, options?: Intl.NumberFormatOptions): string {
+    if (value === null || value === undefined) return "-"
+    return new Intl.NumberFormat("en-US", options).format(value)
+  },
+
+  currency(value: number | null | undefined, currency: string = "USD"): string {
+    if (value === null || value === undefined) return "-"
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency,
+    }).format(value)
+  },
+
+  percent(value: number | null | undefined, decimals: number = 0): string {
+    if (value === null || value === undefined) return "-"
+    return `${value.toFixed(decimals)}%`
+  },
+
+  boolean(value: boolean | null | undefined, trueText: string = "✓", falseText: string = " "): string {
+    if (value === null || value === undefined) return "-"
+    return value ? trueText : falseText
+  },
+
+  yesno(value: boolean | null | undefined): string {
+    if (value === null || value === undefined) return "-"
+    return value ? "Yes" : "No"
+  },
+
+  onoff(value: boolean | null | undefined): string {
+    if (value === null || value === undefined) return "-"
+    return value ? "On" : "Off"
+  },
+
+  truncate(value: any, maxLength: number, ellipsis: string = "…"): string {
+    if (value === null || value === undefined) return "-"
+    const str = String(value)
+    if (str.length <= maxLength) return str
+    return str.slice(0, maxLength - 1) + ellipsis
+  },
+
+  null(value: any, placeholder: string = "-"): string {
+    return value === null || value === undefined ? placeholder : String(value)
+  },
+
+  default(value: any, defaultValue: string = "-"): string {
+    return value === null || value === undefined || value === "" ? defaultValue : String(value)
+  },
+
+  upper(value: any): string {
+    return value === null || value === undefined ? "-" : String(value).toUpperCase()
+  },
+
+  lower(value: any): string {
+    return value === null || value === undefined ? "-" : String(value).toLowerCase()
+  },
+
+  title(value: any): string {
+    if (value === null || value === undefined) return "-"
+    return String(value)
+      .split(" ")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(" ")
+  },
+
+  bytes(value: number | null | undefined): string {
+    if (value === null || value === undefined) return "-"
+
+    const units = ["B", "KB", "MB", "GB", "TB"]
+    let unitIndex = 0
+    let size = value
+
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024
+      unitIndex++
+    }
+
+    return `${size.toFixed(unitIndex > 0 ? 1 : 0)} ${units[unitIndex]}`
+  },
+
+  duration(value: number | null | undefined): string {
+    if (value === null || value === undefined) return "-"
+
+    const seconds = Math.floor(value / 1000)
+    const minutes = Math.floor(seconds / 60)
+    const hours = Math.floor(minutes / 60)
+    const days = Math.floor(hours / 24)
+
+    if (days > 0) return `${days}d ${hours % 24}h`
+    if (hours > 0) return `${hours}h ${minutes % 60}m`
+    if (minutes > 0) return `${minutes}m ${seconds % 60}s`
+    return `${seconds}s`
+  },
+
+  relativeTime(value: Date | string | number): string {
+    if (value === null || value === undefined) return "-"
+
+    const date = typeof value === "number" ? new Date(value) : new Date(value)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffSec = Math.floor(diffMs / 1000)
+    const diffMin = Math.floor(diffSec / 60)
+    const diffHour = Math.floor(diffMin / 60)
+    const diffDay = Math.floor(diffHour / 24)
+
+    if (diffSec < 0) return "future"
+    if (diffSec < 60) return "just now"
+    if (diffMin < 60) return `${diffMin}m ago`
+    if (diffHour < 24) return `${diffHour}h ago`
+    if (diffDay < 7) return `${diffDay}d ago`
+    if (diffDay < 30) return `${Math.floor(diffDay / 7)}w ago`
+
+    return date.toLocaleDateString()
+  },
+
+  json(value: any, indent: number = 2): string {
+    if (value === null || value === undefined) return "-"
+    if (typeof value === "string") {
+      try {
+        value = JSON.parse(value)
+      } catch {
+        return value
+      }
+    }
+    return JSON.stringify(value, null, indent)
+  },
+
+  array(value: any[] | null | undefined, separator: string = ", "): string {
+    if (value === null || value === undefined) return "-"
+    if (!Array.isArray(value)) return String(value)
+    return value.map(String).join(separator)
+  },
+
+  enum<T extends string>(value: T | null | undefined, mapping: Record<T, string>): string {
+    if (value === null || value === undefined) return "-"
+    return mapping[value] || String(value)
+  },
+}

package/src/cli/cmd/tui/component/table-db/table/table-hooks.ts

@@ -0,0 +1,105 @@
+import { createSignal, createMemo, onMount, onCleanup } from "solid-js"
+import { createStore, reconcile } from "solid-js/store"
+import type { TableColumn, TableRow, TableStyle, TableActions, TableState } from "./types"
+import { TableStateManager } from "./table-state"
+
+export interface UseTableOptions {
+  columns: TableColumn[]
+  rows: TableRow[]
+  rowKey?: string
+  selection?: "none" | "single" | "multiple"
+  showHeader?: boolean
+  showRowNumbers?: boolean
+  striped?: boolean
+  compact?: boolean
+  style?: TableStyle
+  pageSize?: number
+}
+
+export function useTable(options: UseTableOptions) {
+  const [state, setState] = createStore<TableState>({
+    data: options.rows,
+    filteredData: options.rows,
+    selectedRow: null,
+    sortColumn: null,
+    sortDirection: "asc",
+    filterQuery: "",
+    page: 1,
+    pageSize: options.pageSize ?? 50,
+  })
+
+  const stateManager = new TableStateManager()
+  stateManager.setData(options.rows)
+  if (options.pageSize) {
+    stateManager.setPageSize(options.pageSize)
+  }
+
+  const columns = createMemo(() => options.columns)
+  const rows = createMemo(() => stateManager.getVisibleRows())
+
+  const actions: TableActions = {
+    setData: (cols: TableColumn[], newRows: TableRow[]) => {
+      stateManager.setData(newRows)
+      setState({ data: newRows, filteredData: newRows, page: 1 })
+    },
+    selectRow: (index: number | null) => {
+      setState({ selectedRow: index })
+    },
+    sortBy: (columnId: string) => {
+      stateManager.setSort(columnId)
+      setState({
+        sortColumn: stateManager.sortColumn,
+        sortDirection: stateManager.sortDirection,
+      })
+    },
+    filter: (query: string) => {
+      stateManager.setFilter(query)
+      setState({ filterQuery: query })
+    },
+    setPage: (page: number) => {
+      stateManager.setPage(page)
+      setState({ page })
+    },
+    nextPage: () => {
+      if (stateManager.nextPage()) {
+        setState({ page: stateManager.page })
+      }
+    },
+    prevPage: () => {
+      if (stateManager.prevPage()) {
+        setState({ page: stateManager.page })
+      }
+    },
+  }
+
+  const selection = createMemo(() => ({
+    selected: state.selectedRow,
+    total: rows().length,
+    hasSelection: state.selectedRow !== null,
+  }))
+
+  const pagination = createMemo(() => ({
+    page: stateManager.page,
+    pageSize: stateManager.pageSize,
+    totalPages: stateManager.getTotalPages(),
+    totalRows: stateManager.getTotalRows(),
+    hasNext: stateManager.nextPage() !== false,
+    hasPrev: stateManager.page > 1,
+  }))
+
+  const sort = createMemo(() => ({
+    column: stateManager.sortColumn,
+    direction: stateManager.sortDirection,
+  }))
+
+  return {
+    columns,
+    rows,
+    state,
+    actions,
+    selection,
+    pagination,
+    sort,
+    stateManager,
+  }
+}

package/src/cli/cmd/tui/component/table-db/table/table-keyboard-handler.ts

@@ -0,0 +1,255 @@
+import type { TableSelectionManager } from "./table-selection-manager"
+import type { TableStateManager } from "./table-state"
+
+export interface KeyboardEvent {
+  name: string
+  ctrl?: boolean
+  shift?: boolean
+  alt?: boolean
+  meta?: boolean
+  char?: string
+}
+
+export interface KeyboardHandlerOptions {
+  selectionManager: TableSelectionManager
+  state: TableStateManager
+  totalRows: number
+  totalColumns: number
+  onEnter?: () => void
+  onCtrlC?: () => void
+  onCtrlF?: () => void
+  onCtrlA?: () => void
+  onPageUp?: () => void
+  onPageDown?: () => void
+  onHome?: () => void
+  onEnd?: () => void
+  onTab?: (direction: "next" | "prev") => void
+  onEscape?: () => void
+}
+
+export class TableKeyboardHandler {
+  private _options: KeyboardHandlerOptions
+
+  constructor(options: KeyboardHandlerOptions) {
+    this._options = options
+  }
+
+  handleKey(event: KeyboardEvent): boolean {
+    const { name, ctrl, shift, alt, meta } = event
+
+    if (ctrl && !shift && !alt && !meta) {
+      return this._handleCtrl(name)
+    }
+
+    if (shift && !ctrl && !alt && !meta) {
+      return this._handleShift(name)
+    }
+
+    if (!ctrl && !shift && !alt && !meta) {
+      return this._handlePlain(name)
+    }
+
+    return false
+  }
+
+  private _handleCtrl(name: string): boolean {
+    switch (name) {
+      case "a":
+        this._options.selectionManager.selectAll()
+        this._options.onCtrlA?.()
+        return true
+
+      case "c":
+        if (this._options.selectionManager.hasSelection) {
+          this._options.onCtrlC?.()
+          return true
+        }
+        return false
+
+      case "f":
+        this._options.onCtrlF?.()
+        return true
+
+      case "home":
+        this._options.selectionManager.setFocusedIndex(0)
+        return true
+
+      case "end":
+        this._options.selectionManager.setFocusedIndex(this._options.totalRows - 1)
+        return true
+
+      case "left":
+        this._moveToColumn(0)
+        return true
+
+      case "right":
+        this._moveToColumn(this._options.totalColumns - 1)
+        return true
+
+      default:
+        return false
+    }
+  }
+
+  private _handleShift(name: string): boolean {
+    switch (name) {
+      case "tab":
+        this._options.onTab?.("prev")
+        return true
+
+      case "arrowdown":
+      case "j":
+        this._options.selectionManager.selectRange(this._options.selectionManager.focusedIndex + 1)
+        return true
+
+      case "arrowup":
+      case "k":
+        this._options.selectionManager.selectRange(this._options.selectionManager.focusedIndex - 1)
+        return true
+
+      case "pageup":
+        this._options.onPageUp?.()
+        return true
+
+      case "pagedown":
+        this._options.onPageDown?.()
+        return true
+
+      default:
+        return false
+    }
+  }
+
+  private _handlePlain(name: string): boolean {
+    switch (name) {
+      case "up":
+      case "k":
+        this._options.selectionManager.moveUp()
+        return true
+
+      case "down":
+      case "j":
+        this._options.selectionManager.moveDown()
+        return true
+
+      case "left":
+      case "h":
+        this._moveToPreviousColumn()
+        return true
+
+      case "right":
+      case "l":
+        this._moveToNextColumn()
+        return true
+
+      case "enter":
+      case "return":
+        this._options.onEnter?.()
+        return true
+
+      case "tab":
+        this._options.onTab?.("next")
+        return true
+
+      case "home":
+        this._options.onHome?.()
+        return true
+
+      case "end":
+        this._options.onEnd?.()
+        return true
+
+      case "pageup":
+      case "u":
+        this._options.onPageUp?.()
+        return true
+
+      case "pagedown":
+      case "d":
+        this._options.onPageDown?.()
+        return true
+
+      case "escape":
+      case "esc":
+        this._options.onEscape?.()
+        return true
+
+      case " ":
+        this._options.selectionManager.addSelection(this._options.selectionManager.focusedIndex)
+        return true
+
+      case "s":
+        if (this._options.state.sortColumn) {
+          this._options.state.setSort(this._options.state.sortColumn)
+          return true
+        }
+        return false
+
+      case "f":
+        this._options.onCtrlF?.()
+        return true
+
+      case "a":
+        if (this._options.selectionManager.selectionMode === "multiple") {
+          this._options.selectionManager.selectAll()
+          return true
+        }
+        return false
+
+      case "*":
+        this._options.selectionManager.selectAll()
+        return true
+
+      case "+":
+        this._options.selectionManager.addSelection(this._options.selectionManager.focusedIndex)
+        return true
+
+      case "-":
+        this._options.selectionManager.setSelectedIndex(null)
+        return true
+
+      default:
+        return false
+    }
+  }
+
+  private _moveToColumn(columnIndex: number): void {
+    this._options.selectionManager.setFocusedIndex(columnIndex)
+  }
+
+  private _moveToPreviousColumn(): void {
+    this._options.selectionManager.moveLeft()
+  }
+
+  private _moveToNextColumn(): void {
+    const columnCount = this._options.selectionManager.moveRight()
+  }
+
+  static isNavigationKey(name: string): boolean {
+    const navKeys = [
+      "up",
+      "down",
+      "left",
+      "right",
+      "home",
+      "end",
+      "pageup",
+      "pagedown",
+      "tab",
+      "k",
+      "j",
+      "h",
+      "l",
+      "u",
+      "d",
+    ]
+    return navKeys.includes(name)
+  }
+
+  static isActionKey(name: string, ctrl?: boolean): boolean {
+    if (ctrl) {
+      return ["enter", "return", "a", "c", "f"].includes(name)
+    }
+    return ["enter", "return", " ", "*", "+", "-", "s", "f", "a"].includes(name)
+  }
+}