amir/dreamstack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
dreamstack/registry/components/progress.ds

14 lines
392 B
Text
Raw Permalink Normal View History

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
-- DreamStack Progress Component
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
-- Animated progress bar with percentage, label, and variant
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
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 Progress(value, label, variant) =
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
column [
fix: when/else parentNode null guard for slot context + match parser boundaries + showcase demo - When/else inside slots: anchor parentNode is null during initial effect Fixed with named effect function + requestAnimationFrame retry - Match parser now terminates on ] } else tokens (works inside containers) - Updated Progress/Badge components - Added examples/showcase.ds: 5-section demo exercising all features
2026-02-26 16:34:45 -08:00
row [
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 label -> text label { variant: "label" }
fix: when/else parentNode null guard for slot context + match parser boundaries + showcase demo - When/else inside slots: anchor parentNode is null during initial effect Fixed with named effect function + requestAnimationFrame retry - Match parser now terminates on ] } else tokens (works inside containers) - Updated Progress/Badge components - Added examples/showcase.ds: 5-section demo exercising all features
2026-02-26 16:34:45 -08:00
text "{value}%" { variant: "label" }
]
column [
column [] { variant: "progress-fill", style: "width: {value}%" }
] { variant: "progress-track" }
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
]
Reference in a new issue Copy permalink