a290bc1891
Parser:
- column/row/stack now parse trailing { props } after ]
- Enables: column [...] { variant: "card" }
Codegen:
- Container props dispatch: variant, class, click, style, layout
- variant_to_css() maps (tag, variant) → CSS class
- variant_map_js() for dynamic variants via inline JS map
- 230+ lines design system CSS (button/badge/card/dialog/toast/
progress/alert/separator/toggle/avatar/stat)
Registry (11 components):
- button, input, card, badge, dialog, toast
- NEW: progress, alert, separator, toggle, avatar
- All embedded via include_str! for offline use
Examples:
- showcase.ds: component gallery with variant prop
- dashboard.ds: admin dashboard with glassmorphism cards
45 lines
1.2 KiB
Text
45 lines
1.2 KiB
Text
-- DreamStack Component Showcase
|
|
-- Demonstrates all component styles via variant prop
|
|
|
|
-- State
|
|
let name = ""
|
|
let count = 0
|
|
|
|
-- Main view
|
|
view main = column [
|
|
|
|
text "🧩 DreamStack Components" { variant: "title" }
|
|
text "shadcn-inspired component registry" { variant: "subtitle" }
|
|
|
|
-- Button Variants
|
|
text "Button Variants" { variant: "title" }
|
|
row [
|
|
button "Primary" { variant: "primary" }
|
|
button "Secondary" { variant: "secondary" }
|
|
button "Ghost" { variant: "ghost" }
|
|
button "Destructive" { variant: "destructive" }
|
|
]
|
|
|
|
-- Badge Variants
|
|
text "Badge Variants" { variant: "title" }
|
|
row [
|
|
text "SUCCESS" { variant: "success" }
|
|
text "WARNING" { variant: "warning" }
|
|
text "ERROR" { variant: "error" }
|
|
text "INFO" { variant: "info" }
|
|
text "DEFAULT" { variant: "default" }
|
|
]
|
|
|
|
-- Input with live binding
|
|
text "Input Component" { variant: "title" }
|
|
text "Name" { variant: "label" }
|
|
input { bind: name, placeholder: "Type your name..." }
|
|
text "Hello, {name}!"
|
|
|
|
-- Interactive counter
|
|
text "Interactive Counter" { variant: "title" }
|
|
row [
|
|
button "Count: {count}" { click: count += 1, variant: "primary" }
|
|
button "Reset" { click: count = 0, variant: "ghost" }
|
|
]
|
|
]
|