Skip to content

v0.2.0 — Phase 1: Design System

Choose a tag to compare

View all tags
@quavondev quavondev released this 07 Jun 15:16
· 64 commits to main since this release
v0.2.0
73c818f

Phase 1 — Design System Primitives

The full design system is now in place. See it live in the app: Settings → Design System (or open /design-system). Toggle light/dark in the top right.

New Components

UI Primitives (src/components/ui/):

  • Button — primary/secondary/ghost/destructive, 3 sizes, with haptics
  • Chip — for filters, with selected-color override (great for status)
  • SegmentedControl — animated sliding indicator
  • Tag — small colored label with optional dot
  • EmptyState / ErrorState — illustrated placeholders
  • icons.tsx — Lucide wrapper with monitorTypeIcon() helper

Monitor Components (src/components/monitor/):

  • MonitorCard — large card with stats, heartbeat pulse, type icon
  • MonitorRow — dense list row for many-monitor lists

Server Components (src/components/server/):

  • ServerCard — server display with active badge, monitor count, notification mode
  • ServerSwitcher — modal-style switcher

Chart Components (src/components/chart/):

  • ResponseTimeChart — SVG line chart with Reanimated 4 fade-in
  • UptimeBar — segmented color-coded uptime indicator

New Screens

  • /design-system — Storybook of every component in light/dark
  • /monitors/[monitorId] — monitor detail with chart, uptime bar, actions
  • /servers/switch — server switcher modal

Wired Up

  • Monitors tab uses MonitorCard (featured) + MonitorRow (list) with sample data
  • Settings tab has Design system link + theme switcher
  • i18n extended with all new strings

Icons

Added lucide-react-native@1.17.0 for cross-platform icon consistency. The monitorTypeIcon() helper maps Kuma monitor types to Lucide icons (HTTP→Globe, ping→Radio, port→Signal, DNS→Hash, database types→Database, etc.).

Quality

  • TypeScript: 0 errors
  • ESLint: 0 warnings
  • Build: 14 routes exported successfully (was 11)

What's next

Phase 2 — Auth & Persistence (~weeks 3-4):

  • Persist server credentials to expo-secure-store (iOS Keychain / Android Keystore)
  • Real Kuma connection: REST + socket.io with reconnection
  • Kuma version detection + outdated warning
  • Edit/remove server UI
Assets 2
Loading