1d554ae7ab
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.
117 lines
3.8 KiB
Text
117 lines
3.8 KiB
Text
-- DreamStack Component Gallery
|
||
-- Comprehensive showcase of all 14 registry components
|
||
-- Demonstrates: imports, slots, when/else, match, reactive state, every timer
|
||
|
||
import { Card } from "../registry/components/card"
|
||
import { Badge } from "../registry/components/badge"
|
||
import { Button } from "../registry/components/button"
|
||
import { Progress } from "../registry/components/progress"
|
||
import { Alert } from "../registry/components/alert"
|
||
import { Input } from "../registry/components/input"
|
||
import { Toggle } from "../registry/components/toggle"
|
||
import { Avatar } from "../registry/components/avatar"
|
||
import { Stat } from "../registry/components/stat"
|
||
import { Separator } from "../registry/components/separator"
|
||
import { Toast } from "../registry/components/toast"
|
||
|
||
-- State
|
||
let count = 0
|
||
let name = ""
|
||
let darkMode = false
|
||
let loggedIn = false
|
||
let mood = "neutral"
|
||
let progress = 25
|
||
let showToast = false
|
||
let ticks = 0
|
||
|
||
-- Timer
|
||
every 1000 -> ticks += 1
|
||
|
||
view gallery = column [
|
||
|
||
-- Header
|
||
text "🧩 Component Gallery" { variant: "title" }
|
||
text "14 components • DreamStack Registry" { variant: "subtitle" }
|
||
|
||
Separator { label: "Interactive" }
|
||
|
||
-- 1. Card + Button + Counter
|
||
Card { title: "Counter", subtitle: "Card + Button + slots" } [
|
||
text "Count: {count}" { variant: "title" }
|
||
row [
|
||
Button { label: "−1", variant: "secondary", onClick: count -= 1 }
|
||
Button { label: "+1", variant: "primary", onClick: count += 1 }
|
||
Button { label: "Reset", variant: "ghost", onClick: count = 0 }
|
||
]
|
||
]
|
||
|
||
-- 2. Input + Alert
|
||
Card { title: "Form", subtitle: "Input + Alert components" } [
|
||
Input { value: name, placeholder: "Type your name...", label: "Name" }
|
||
when name ->
|
||
Alert { message: "Hello, {name}! 👋", variant: "success" }
|
||
]
|
||
|
||
-- 3. Progress
|
||
Card { title: "Progress", subtitle: "Progress bar with controls" } [
|
||
Progress { value: progress, label: "Loading" }
|
||
row [
|
||
Button { label: "−10", variant: "secondary", onClick: progress -= 10 }
|
||
Button { label: "+10", variant: "primary", onClick: progress += 10 }
|
||
Button { label: "Full", variant: "ghost", onClick: progress = 100 }
|
||
]
|
||
]
|
||
|
||
Separator { label: "Status" }
|
||
|
||
-- 4. Badge + When/Else
|
||
Card { title: "Auth", subtitle: "Badge + when/else" } [
|
||
Button { label: "Toggle Login", variant: "primary", onClick: loggedIn = !loggedIn }
|
||
when loggedIn ->
|
||
row [
|
||
Badge { label: "ONLINE", variant: "success" }
|
||
text "Welcome back!"
|
||
]
|
||
else ->
|
||
row [
|
||
Badge { label: "OFFLINE", variant: "error" }
|
||
text "Please log in"
|
||
]
|
||
]
|
||
|
||
-- 5. Match + Mood
|
||
Card { title: "Mood", subtitle: "match expressions" } [
|
||
row [
|
||
Button { label: "😊 Happy", variant: "primary", onClick: mood = "happy" }
|
||
Button { label: "😢 Sad", variant: "secondary", onClick: mood = "sad" }
|
||
Button { label: "😡 Angry", variant: "ghost", onClick: mood = "angry" }
|
||
]
|
||
match mood
|
||
"happy" -> text "You're feeling great! 🌟"
|
||
"sad" -> text "Hang in there... 💙"
|
||
"angry" -> text "Take a deep breath 🔥"
|
||
_ -> text "How are you feeling?"
|
||
]
|
||
|
||
Separator { label: "Display" }
|
||
|
||
-- 6. Stat cards
|
||
row [
|
||
Stat { label: "Uptime", value: "{ticks}s", change: "+1/s" }
|
||
Stat { label: "Clicks", value: "{count}", change: "total" }
|
||
Stat { label: "Progress", value: "{progress}%", change: "current" }
|
||
]
|
||
|
||
-- 7. Avatar + Toggle
|
||
Card { title: "Settings" } [
|
||
row [
|
||
Avatar { initials: "DS" }
|
||
text "DreamStack User"
|
||
]
|
||
Toggle { value: darkMode, label: "Dark Mode", onChange: darkMode = !darkMode }
|
||
Toggle { value: showToast, label: "Show Toast", onChange: showToast = !showToast }
|
||
]
|
||
|
||
-- 8. Toast
|
||
Toast { message: "Hello from DreamStack! 🚀", variant: "success", visible: showToast }
|
||
]
|