dreamstack/examples/component-gallery.ds

-- 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 }
]