gpui-component

GPUI Component Generator

Generate reusable, well-structured GPUI components with proper typing, state management, styling, and comprehensive documentation.

Arguments

• $1: Component name (required) - Name of the component in PascalCase (e.g., "Button", "DataTable", "SearchInput")
• $2: Component type (optional) - Either "stateless" (default) or "stateful"

Workflow

1. Gather Component Requirements

Ask user for:

• Component purpose and description
• Props/configuration needed
• Whether component needs internal state
• Event handlers required
• Styling requirements
• Accessibility needs

2. Generate Component Struct

Create component struct based on type:

Stateless Component

use gpui::*;

/// A reusable button component
///
/// # Examples
///
/// ```
/// Button::new("Click me")
///     .on_click(|cx| {
///         println!("Clicked!");
///     })
/// ```
pub struct Button {
    label: String,
    variant: ButtonVariant,
    disabled: bool,
    on_click: Option<Box<dyn Fn(&mut WindowContext)>>,
}

#[derive(Clone, Copy, PartialEq)]
pub enum ButtonVariant {
    Primary,
    Secondary,
    Destructive,
    Ghost,
}

impl Button {
    pub fn new(label: impl Into<String>) -> Self {
        Self {
            label: label.into(),
            variant: ButtonVariant::Primary,
            disabled: false,
            on_click: None,
        }
    }

    pub fn variant(mut self, variant: ButtonVariant) -> Self {
        self.variant = variant;
        self
    }

    pub fn disabled(mut self, disabled: bool) -> Self {
        self.disabled = disabled;
        self
    }

    pub fn on_click(mut self, handler: impl Fn(&mut WindowContext) + 'static) -> Self {
        self.on_click = Some(Box::new(handler));
        self
    }
}

Stateful Component

use gpui::*;

/// A search input with autocomplete
pub struct SearchInput {
    query: String,
    suggestions: Vec<String>,
    selected_index: Option<usize>,
    on_search: Option<Box<dyn Fn(&str, &mut WindowContext)>>,
}

impl SearchInput {
    pub fn new() -> Self {
        Self {
            query: String::new(),
            suggestions: Vec::new(),
            selected_index: None,
            on_search: None,
        }
    }

    pub fn on_search(mut self, handler: impl Fn(&str, &mut WindowContext) + 'static) -> Self {
        self.on_search = Some(Box::new(handler));
        self
    }

    fn handle_input(&mut self, value: String, cx: &mut ViewContext<Self>) {
        self.query = value;
        self.update_suggestions(cx);
        cx.notify();
    }

    fn update_suggestions(&mut self, cx: &mut ViewContext<Self>) {
        // Update suggestions based on query
        if let Some(handler) = &self.on_search {
            handler(&self.query, cx);
        }
    }

    fn handle_key_down(&mut self, event: &KeyDownEvent, cx: &mut ViewContext<Self>) {
        match event.key.as_str() {
            "ArrowDown" => {
                self.selected_index = Some(
                    self.selected_index
                        .map(|i| (i + 1).min(self.suggestions.len() - 1))
                        .unwrap_or(0)
                );
                cx.notify();
            }
            "ArrowUp" => {
                self.selected_index = self.selected_index
                    .and_then(|i| i.checked_sub(1));
                cx.notify();
            }
            "Enter" => {
                if let Some(index) = self.selected_index {
                    self.query = self.suggestions[index].clone();
                    self.suggestions.clear();
                    cx.notify();
                }
            }
            _ => {}
        }
    }
}