dreamstack/examples/project-manager.ds

-- DreamStack Project Manager
-- A comprehensive demo using all framework features
-- Routing, dynamic lists, when/else, match, callbacks, imports

import { Card } from "../registry/components/card"
import { Badge } from "../registry/components/badge"
import { Button } from "../registry/components/button"
import { Progress } from "../registry/components/progress"

-- State
let tasks = ["Design mockups", "Build API", "Write tests", "Deploy"]
let newTask = ""
let completedCount = 0
let teamSize = 4
let projectStatus = "active"
let showStats = true

-- Navigation
view nav = row [
  text "🗂️ ProjectHub" { variant: "title" }
  button "📊 Dashboard" { click: navigate "/", variant: "primary" }
  button "✅ Tasks" { click: navigate "/tasks", variant: "secondary" }
  button "👥 Team" { click: navigate "/team", variant: "secondary" }
  button "⚙️ Settings" { click: navigate "/settings", variant: "ghost" }
]

-- Dashboard
route "/" -> column [
  text "📊 Project Dashboard" { variant: "title" }
  text "Overview of your project" { variant: "subtitle" }

  -- Metrics row
  row [
    Card { title: "Tasks", subtitle: "total items" } [
      text "{tasks}" { variant: "title" }
      Badge { label: "ACTIVE", variant: "success" }
    ]

    Card { title: "Completed", subtitle: "finished" } [
      text "{completedCount}" { variant: "title" }
      Badge { label: "DONE", variant: "info" }
    ]

    Card { title: "Team", subtitle: "members" } [
      text "{teamSize}" { variant: "title" }
      Badge { label: "ONLINE", variant: "success" }
    ]
  ]

  -- Project status
  Card { title: "Status", subtitle: "current phase" } [
    match projectStatus
      "active" -> row [
        Badge { label: "🟢 ACTIVE", variant: "success" }
        text "Project is on track"
      ]
      "review" -> row [
        Badge { label: "🟡 IN REVIEW", variant: "warning" }
        text "Awaiting approval"
      ]
      "paused" -> row [
        Badge { label: "🔴 PAUSED", variant: "error" }
        text "Project on hold"
      ]
      _ -> Badge { label: "UNKNOWN", variant: "info" }
    row [
      Button { label: "Active", onClick: projectStatus = "active", variant: "primary" }
      Button { label: "Review", onClick: projectStatus = "review", variant: "secondary" }
      Button { label: "Pause", onClick: projectStatus = "paused", variant: "ghost" }
    ]
  ]

  -- Progress
  Card { title: "Sprint Progress", subtitle: "week 3 of 4" } [
    Progress { value: 75, label: "Sprint" }
    Progress { value: 40, label: "Testing" }
  ]
]

-- Tasks page
route "/tasks" -> column [
  text "✅ Task Manager" { variant: "title" }
  text "Add, complete, and remove tasks" { variant: "subtitle" }

  Card { title: "Add Task", subtitle: "type and press add" } [
    row [
      input { bind: newTask, placeholder: "What needs to be done?" }
      button "Add" { click: tasks.push(newTask), variant: "primary" }
    ]
  ]

  Card { title: "Active Tasks", subtitle: "click × to remove" } [
    each task in tasks ->
      row [
        text "📌 {task}"
        button "✓" { click: completedCount += 1, variant: "primary" }
        button "×" { click: tasks.remove(_idx), variant: "ghost" }
      ]
    when tasks -> text ""
    else -> text "🎉 All tasks done! Add more above."
  ]

  row [
    Badge { label: "COMPLETED: {completedCount}", variant: "success" }
    button "Clear All" { click: tasks = [], variant: "ghost" }
  ]
]

-- Team page
route "/team" -> column [
  text "👥 Team Members" { variant: "title" }
  text "Your project team" { variant: "subtitle" }

  row [
    Card { title: "Alice Chen", subtitle: "Lead Developer" } [
      Badge { label: "ONLINE", variant: "success" }
      text "Frontend & Architecture"
    ]
    Card { title: "Bob Smith", subtitle: "Backend Dev" } [
      Badge { label: "ONLINE", variant: "success" }
      text "API & Database"
    ]
  ]
  row [
    Card { title: "Carol Wu", subtitle: "Designer" } [
      Badge { label: "BUSY", variant: "warning" }
      text "UI/UX & Branding"
    ]
    Card { title: "Dan Park", subtitle: "QA Engineer" } [
      Badge { label: "OFFLINE", variant: "error" }
      text "Testing & Automation"
    ]
  ]

  Card { title: "Team Size", subtitle: "adjust team" } [
    text "Members: {teamSize}" { variant: "title" }
    row [
      button "Add Member" { click: teamSize += 1, variant: "primary" }
      button "Remove" { click: teamSize -= 1, variant: "ghost" }
    ]
  ]
]

-- Settings page
route "/settings" -> column [
  text "⚙️ Settings" { variant: "title" }
  text "Configure your project" { variant: "subtitle" }

  Card { title: "Display", subtitle: "UI preferences" } [
    row [
      text "Show stats dashboard"
      button "Toggle" { click: showStats = !showStats, variant: "secondary" }
    ]
    when showStats -> Badge { label: "STATS VISIBLE", variant: "success" }
    else -> Badge { label: "STATS HIDDEN", variant: "error" }
  ]

  Card { title: "About", subtitle: "DreamStack Project Manager" } [
    text "• Built with DreamStack v0.1.0"
    text "• 4 routes, 11 components"
    text "• Reactive signals + dynamic lists"
    text "• Zero dependencies, ~50KB total"
  ]
]