- Phase 1: Component parser + codegen (emit_component_decl, emit_component_use, emit_match) - Phase 2: 6 registry components (button, input, card, badge, dialog, toast) - Phase 3: dreamstack add CLI with dependency resolution and --list/--all - Phase 4: dreamstack convert TSX→DS transpiler with --shadcn GitHub fetch - Phase 5: 120+ lines variant CSS (buttons, badges, cards, dialog, toast, input) - New example: showcase.ds demonstrating all component styles
45 lines
1.3 KiB
Text
45 lines
1.3 KiB
Text
-- DreamStack Component Showcase
|
|
-- Demonstrates all component styles
|
|
|
|
-- State
|
|
let name = ""
|
|
let count = 0
|
|
|
|
-- Main view
|
|
view main = column [
|
|
|
|
text "🧩 DreamStack Components" { class: "ds-card-title" }
|
|
text "shadcn-inspired component registry" { class: "ds-card-subtitle" }
|
|
|
|
-- Button Variants
|
|
text "Button Variants" { class: "ds-card-title" }
|
|
row [
|
|
button "Primary" { class: "ds-btn-primary" }
|
|
button "Secondary" { class: "ds-btn-secondary" }
|
|
button "Ghost" { class: "ds-btn-ghost" }
|
|
button "Destructive" { class: "ds-btn-destructive" }
|
|
]
|
|
|
|
-- Badge Variants
|
|
text "Badge Variants" { class: "ds-card-title" }
|
|
row [
|
|
text "SUCCESS" { class: "ds-badge ds-badge-success" }
|
|
text "WARNING" { class: "ds-badge ds-badge-warning" }
|
|
text "ERROR" { class: "ds-badge ds-badge-error" }
|
|
text "INFO" { class: "ds-badge ds-badge-info" }
|
|
text "DEFAULT" { class: "ds-badge ds-badge-default" }
|
|
]
|
|
|
|
-- Input with live binding
|
|
text "Input Component" { class: "ds-card-title" }
|
|
text "Name" { class: "ds-input-label" }
|
|
input { bind: name, placeholder: "Type your name..." }
|
|
text "Hello, {name}!"
|
|
|
|
-- Interactive counter
|
|
text "Interactive Counter" { class: "ds-card-title" }
|
|
row [
|
|
button "Count: {count}" { click: count += 1, class: "ds-btn-primary" }
|
|
button "Reset" { click: count = 0, class: "ds-btn-ghost" }
|
|
]
|
|
]
|