hojicha-pearls

Pre-built UI components and styling system for the Hojicha TUI framework.

Purpose

This crate provides a rich collection of ready-to-use UI components:

• Input components: TextInput, Textarea
• Display components: List, Table, ProgressBar, Spinner
• Navigation: Tabs, Paginator, Modal
• Layout helpers and styling system
• Theme support with color profiles

Basic Usage

use hojicha_pearls::components::{TextInput, List, Button};
use hojicha_pearls::style::Theme;
use hojicha_core::{Model, Cmd, Event};

struct MyApp {
    input: TextInput,
    list: List<String>,
    theme: Theme,
}

impl Model for MyApp {
    type Message = MyMessage;

    fn view(&self, frame: &mut Frame, area: Rect) {
        // Use the pre-built components
        let chunks = Layout::default()
            .direction(Direction::Vertical)
            .constraints([Constraint::Length(3), Constraint::Min(0)])
            .split(area);
            
        self.input.render(frame, chunks[0], &self.theme.color_profile);
        self.list.render(frame, chunks[1], &self.theme.color_profile);
    }
    
    fn update(&mut self, event: Event<Self::Message>) -> Cmd<Self::Message> {
        // Components handle their own events
        if self.input.handle_event(event.clone()) {
            return Cmd::none();
        }
        if self.list.handle_event(event.clone()) {
            return Cmd::none();
        }
        // Handle other events...
        Cmd::none()
    }
}

Available Components

Input Components

• TextInput: Single-line text input with cursor and selection
• Textarea: Multi-line text editor with scrolling

Display Components

• List: Scrollable list with selection
• Table: Data table with headers and row selection
• ProgressBar: Visual progress indicator
• Spinner: Loading animation

Navigation Components

• Tabs: Tab bar with content switching
• Paginator: Page navigation controls
• Modal: Overlay dialog windows

Utility Components

• Button: Clickable button with keyboard support
• Help: Help text display
• StatusBar: Application status display
• Timer/Stopwatch: Time tracking displays
• Viewport: Scrollable content area

File System Components

• FilePicker: File browser and selector with filtering and navigation

Styling System

The pearls crate includes a comprehensive theming system with support for margin backgrounds:

use hojicha_pearls::style::{Theme, ColorProfile, Style};

// Use built-in themes
let theme = Theme::default();
let dark_theme = Theme::dark();

// Or create custom themes
let custom_theme = Theme::builder()
    .primary(Color::Cyan)
    .secondary(Color::Magenta)
    .build();

// Apply margin background colors (Lipgloss-style)
let styled = Style::new()
    .background(Color::Blue)
    .margin_background(Color::DarkGray)
    .margin(2)
    .build();

Documentation

For full documentation and more examples, see the main Hojicha documentation.

License

GPL-3.0 - See LICENSE file for details