Terminal

import { Terminal } from '@hanzo/ui'

Default

A bare shell with the built-ins (`help`, `clear`, `date`, `echo …`) and nothing else wired up.

terminal

export function Default() {
  return <Terminal prompt=">" />
}

With history

Commands rendered up front, as `initialCommands` would carry over from a previous session.

terminal

$echo Welcome to Terminal

Welcome to Terminal

$help

Available commands: help, clear, echo, date

export function WithHistory() {
  return (
    <Terminal
      initialCommands={[
        {
          id: "1",
          input: "echo Welcome to Terminal",
          output: "Welcome to Terminal",
          timestamp: new Date(),
          type: "success",
        },
        {
          id: "2",
          input: "help",
          output: "Available commands: help, clear, echo, date",
          timestamp: new Date(),
          type: "info",
        },
      ]}
    />
  )
}

Themes

The same terminal in each of the four built-in palettes.

terminal

export function Themes() {
  return (
    <YStack gap="$4">
      <Terminal theme="dark" />
      <Terminal theme="matrix" />
      <Terminal theme="dracula" />
      <Terminal theme="light" />
    </YStack>
  )
}

Custom command handler

`onCommand` answers anything the built-ins don't, and `autoCompleteCommands` offers those names on Tab.

terminal

export function CustomCommands() {
  const handleCommand = async (command: string) => {
    const [cmd, ...args] = command.split(" ")
    switch (cmd) {
      case "time":
        return new Date().toLocaleTimeString()
      case "greet":
        return `Hello, ${args.join(" ") || "stranger"}!`
      default:
        return `Command not found: ${cmd}`
    }
  }

  return (
    <Terminal
      prompt="$"
      onCommand={handleCommand}
      autoCompleteCommands={["time", "greet", "help", "clear"]}
    />
  )
}

Types

export type TerminalTheme = 'dark' | 'light' | 'matrix' | 'dracula'

export type TerminalLineType = 'command' | 'error' | 'success' | 'info'

export interface TerminalCommand {
  id: string
  input: string
  output: string | React.ReactNode
  timestamp: Date
  type?: TerminalLineType
}

export interface TerminalProps extends Omit<YStackProps, 'children' | 'theme'> {
  /** Shown before every command line and the input line. */
  prompt?: string
  /** Lines shown before anything is typed. */
  initialCommands?: TerminalCommand[]
  /** Handles anything the built-ins (`clear`/`help`/`date`/`echo`) do not. */
  onCommand?: (command: string) => Promise<string | React.ReactNode> | string | React.ReactNode
  theme?: TerminalTheme
  /** Arrow-key history navigation. */
  enableHistory?: boolean
  /** Tab-completion against `autoCompleteCommands`. */
  enableAutoComplete?: boolean
  autoCompleteCommands?: string[]
  maxHistorySize?: number
}

Exports

Terminaltype TerminalCommandtype TerminalLineTypetype TerminalPropstype TerminalTheme