2026-02-26 16:14:35 -08:00
|
|
|
-- DreamStack Card Component with Slot
|
|
|
|
|
-- Glassmorphism container with title, subtitle, and slot for children
|
feat: component registry with styled variants, dreamstack add/convert CLI, and showcase
- 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
2026-02-26 13:27:49 -08:00
|
|
|
|
feat: enhanced 14 registry components + component gallery
Registry components enhanced with proper DreamStack patterns:
- Card: conditional title/subtitle/footer via when guards, slot for children
- Button: variant as string prop, disabled support
- Dialog: when-guarded overlay, slot for content, close button
- Progress: conditional label, variant support
- Input: conditional label, error state, helper text
- Alert: variant prop, slot for custom content
- Toggle: when-guarded label display
- Toast: when-guarded visibility
- Avatar: initials with variant
- Badge: label with variant prop
- Separator: optional centered label
New components:
- Stat: dashboard metric card (label, value, change delta)
- Tabs: tab switcher supporting 2-3 tabs
- Select: button-based option selector
New example:
- component-gallery.ds (89KB): imports 12 components, uses Card+Button,
Input+Alert, Progress, Badge+when/else, match expressions,
Stat metrics, Toggle, Avatar, Toast, Separator, every timer
All 10 examples pass. Browser-tested with zero errors.
2026-02-26 18:25:49 -08:00
|
|
|
export component Card(title, subtitle, footer) =
|
feat: component registry with styled variants, dreamstack add/convert CLI, and showcase
- 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
2026-02-26 13:27:49 -08:00
|
|
|
column [
|
feat: enhanced 14 registry components + component gallery
Registry components enhanced with proper DreamStack patterns:
- Card: conditional title/subtitle/footer via when guards, slot for children
- Button: variant as string prop, disabled support
- Dialog: when-guarded overlay, slot for content, close button
- Progress: conditional label, variant support
- Input: conditional label, error state, helper text
- Alert: variant prop, slot for custom content
- Toggle: when-guarded label display
- Toast: when-guarded visibility
- Avatar: initials with variant
- Badge: label with variant prop
- Separator: optional centered label
New components:
- Stat: dashboard metric card (label, value, change delta)
- Tabs: tab switcher supporting 2-3 tabs
- Select: button-based option selector
New example:
- component-gallery.ds (89KB): imports 12 components, uses Card+Button,
Input+Alert, Progress, Badge+when/else, match expressions,
Stat metrics, Toggle, Avatar, Toast, Separator, every timer
All 10 examples pass. Browser-tested with zero errors.
2026-02-26 18:25:49 -08:00
|
|
|
when title -> text title { variant: "title" }
|
|
|
|
|
when subtitle -> text subtitle { variant: "subtitle" }
|
2026-02-26 16:14:35 -08:00
|
|
|
slot
|
feat: enhanced 14 registry components + component gallery
Registry components enhanced with proper DreamStack patterns:
- Card: conditional title/subtitle/footer via when guards, slot for children
- Button: variant as string prop, disabled support
- Dialog: when-guarded overlay, slot for content, close button
- Progress: conditional label, variant support
- Input: conditional label, error state, helper text
- Alert: variant prop, slot for custom content
- Toggle: when-guarded label display
- Toast: when-guarded visibility
- Avatar: initials with variant
- Badge: label with variant prop
- Separator: optional centered label
New components:
- Stat: dashboard metric card (label, value, change delta)
- Tabs: tab switcher supporting 2-3 tabs
- Select: button-based option selector
New example:
- component-gallery.ds (89KB): imports 12 components, uses Card+Button,
Input+Alert, Progress, Badge+when/else, match expressions,
Stat metrics, Toggle, Avatar, Toast, Separator, every timer
All 10 examples pass. Browser-tested with zero errors.
2026-02-26 18:25:49 -08:00
|
|
|
when footer -> text footer { variant: "subtitle" }
|
feat: container variant props, 11-component registry, rich dashboard
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
2026-02-26 13:58:33 -08:00
|
|
|
] { variant: "card" }
|