feat(yahweh-widget-card): container card-shape compartido para timeline entries
Iter 3 de integración nakui↔yahweh. El card visual pattern (padding consistente + rounded + flex_col + gap) que vivía duplicado en cada timeline entry de nakui-explorer ahora es un widget yahweh reusable. crates/modules/ui_engine/widgets/card/: - pub fn card() -> Div: flex_col + px(12) + py(8) + mb(4) + rounded(4) + gap(2). Sin colores (caller decide via builder). - 1 test smoke. nakui-explorer: - Los 2 timeline entry patterns (Seed/Morphism) pasan de ~7 calls a ~3, intención "card with accent" emerge del nombre. Tests stack: 111 → 112. App-agnostic — el widget no impone paleta, permite themes diversos. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,67 @@
|
||||
//! `yahweh-widget-card` — container card-shape para entries de
|
||||
//! timeline, info cards y similares.
|
||||
//!
|
||||
//! Aporta la **forma**: padding consistente (12/8), `rounded(4)`,
|
||||
//! `flex_col` con `gap(2)`. NO aporta colores — el caller decide
|
||||
//! `bg`, `border_color`, etc. via builder calls. Esto permite que
|
||||
//! distintos consumers (timeline con accent por kind, info card
|
||||
//! con bg uniforme) compartan la misma proporción visual sin
|
||||
//! acoplarse a una paleta fija.
|
||||
//!
|
||||
//! # Ejemplo
|
||||
//!
|
||||
//! ```ignore
|
||||
//! use yahweh_widget_card::card;
|
||||
//! use gpui::{rgb, prelude::*, px};
|
||||
//!
|
||||
//! // Card con accent border-l (típico timeline entry):
|
||||
//! let entry = card()
|
||||
//! .bg(rgb(0x1d2128))
|
||||
//! .border_l_4()
|
||||
//! .border_color(rgb(0x88c0d0))
|
||||
//! .child(div().child("header"))
|
||||
//! .child(div().child("body"));
|
||||
//!
|
||||
//! // Card sin border (info card uniforme):
|
||||
//! let info = card()
|
||||
//! .bg(rgb(0x1d2128))
|
||||
//! .child("contenido");
|
||||
//! ```
|
||||
|
||||
#![forbid(unsafe_code)]
|
||||
|
||||
use gpui::{div, prelude::*, px, Div};
|
||||
|
||||
/// Container card-shape: `flex_col` con padding `12/8`, `rounded(4)`,
|
||||
/// `gap(2)` interno entre children y `mb(4)` para separación
|
||||
/// vertical de cards apiladas.
|
||||
///
|
||||
/// Sin colores aplicados — el caller agrega `.bg(...)`,
|
||||
/// `.border_color(...)`, `.border_l_4()`, etc. según necesite.
|
||||
///
|
||||
/// El return es un `Div` GPUI — todas las builder methods de div
|
||||
/// están disponibles (children, hover, on_click, ids, etc.).
|
||||
pub fn card() -> Div {
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.px(px(12.))
|
||||
.py(px(8.))
|
||||
.mb(px(4.))
|
||||
.rounded(px(4.))
|
||||
.gap(px(2.))
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::*;
|
||||
|
||||
/// Sanity smoke: el constructor devuelve un Div sin panic. No
|
||||
/// podemos asertar las property de styling sin renderear (que
|
||||
/// requiere TestAppContext + window). Si la signature cambia,
|
||||
/// el código no compila — eso es la real garantía.
|
||||
#[test]
|
||||
fn card_returns_div_without_panic() {
|
||||
let _d = card();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user