CLIPS

Note: This library is in active development. Features and APIs may change in future releases. Please refer to the documentation and changelog for the latest updates. Get in touch if you like what you see and want to help out.

CLI Panel System

A powerful TypeScript library for building terminal-based GUI applications with reactive components.

Features

• 📦 Flexible layout system
• 🎨 Rich terminal colors and styles
• 🖼️ Component-based architecture
• ⌨️ Built-in keyboard event handling
• 📝 Command system
• 🎯 Debug panel

Quick Start

import * as Rock from '@partrocks/clips';

const screen = new Rock.Screen('Rocker', {
  header: 'Rocker',
  status: 'A Happy Coder Project',
});

screen.addComponents([
  new Rock.Panel('A', {
    size: { w: 1 / 3, h: 1 },
    position: 'topleft',
  }),
  new Rock.Panel('B', {
    size: { w: 2 / 3, h: 1 / 3 },
    position: 'topright',
  }),
  new Rock.Panel('C', {
    size: { w: 2 / 3, h: 1 / 3 },
    position: 'middleright',
  }),
  new Rock.Panel('Alert styled', {
    size: { w: 2 / 3, h: 1 / 3 },
    position: 'bottomright',
    ...Rock.Style.ALERT_PANEL,
  }),
]);

screen.start();

Components

Screen

The main container that manages the terminal interface. Handles:

• Grid layout system
• Component management
• Event handling
• Keyboard input
• Command processing

Options:

• header: Fixed at the top of the screen - value shoud be your app name
• status: Fixed at the bottom with command input support - value shoud be a status message in the bottom right
• Debug: Panel for debugging information - value should be the number of lines to display above the status bar

Components

example uses Panel Components

Panel

Basic container component with customizable:

• Borders
• Colors
• Title alignment
• Content alignment
• Background

Commands

The library includes a built-in command system. Press : to enter command mode.

Default commands:

• :quit or :q - Exit the application
• :close - Close the active panel
• :restart - Restart the application
• :show screendim - will output screen dimention info to the debug bar

Events

Events are handled via the emitter property of the Screen class.

Standard events include:

• keypress - when a key is pressed
  • TAB - move focus to the next component
  • SHIFT+TAB - move focus to the previous component
• resize - when the terminal is resized

Handle keyboard and system events:

screen.emitter.on('keypress', (key: string) => {
  // Handle key press
});

screen.emitter.on('resize', () => {
  // Handle terminal resize
});

Custom Components

Components can be created by extending the Component class. or any of the provided base components Eg: Panel

apply your own logic to your components.

License

AGPL-3.0

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

This will replace the current content of your README.md file with the new documentation. The content includes all the essential information about your library's features, installation instructions, usage examples, and API documentation.