@even-toolkit/create-even-app 1.1.0

package/templates/tracker/src/screens/Settings.tsx

@@ -0,0 +1,135 @@
+import { useState } from 'react'
+import { SettingsGroup, Toggle, ListItem, Card, Button, Divider, Input, useDrawerHeader } from 'even-toolkit/web'
+import { useTracker } from '../contexts/TrackerContext'
+
+export function Settings() {
+  const { goals, setGoals, entries, showCompletionBadge, setShowCompletionBadge } = useTracker()
+  const [confirmClear, setConfirmClear] = useState(false)
+
+  const [waterGoal, setWaterGoal] = useState(String(goals.water))
+  const [stepsGoal, setStepsGoal] = useState(String(goals.steps))
+  const [focusGoal, setFocusGoal] = useState(String(goals.focus))
+
+  useDrawerHeader({ title: 'Settings', backTo: '/' })
+
+  function handleSaveGoals() {
+    const w = parseInt(waterGoal, 10)
+    const s = parseInt(stepsGoal, 10)
+    const f = parseInt(focusGoal, 10)
+    if (!isNaN(w) && !isNaN(s) && !isNaN(f) && w > 0 && s > 0 && f > 0) {
+      setGoals({ water: w, steps: s, focus: f })
+    }
+  }
+
+  function handleExport() {
+    const data = JSON.stringify(entries, null, 2)
+    const blob = new Blob([data], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `tracker-export-${Date.now()}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  function handleClearAll() {
+    if (!confirmClear) {
+      setConfirmClear(true)
+      return
+    }
+    localStorage.removeItem('{{APP_NAME}}-entries')
+    localStorage.removeItem('{{APP_NAME}}-goals')
+    localStorage.removeItem('{{APP_NAME}}-settings')
+    window.location.reload()
+  }
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-6">
+      <SettingsGroup label="Goals">
+        <Card className="p-4 space-y-3">
+          <div className="space-y-1.5">
+            <label className="text-[11px] tracking-[-0.11px] text-text-dim block">Water (glasses per day)</label>
+            <Input
+              type="number"
+              value={waterGoal}
+              onChange={(e) => setWaterGoal(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label className="text-[11px] tracking-[-0.11px] text-text-dim block">Steps (per day)</label>
+            <Input
+              type="number"
+              value={stepsGoal}
+              onChange={(e) => setStepsGoal(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label className="text-[11px] tracking-[-0.11px] text-text-dim block">Focus (minutes per day)</label>
+            <Input
+              type="number"
+              value={focusGoal}
+              onChange={(e) => setFocusGoal(e.target.value)}
+            />
+          </div>
+          <Button size="sm" onClick={handleSaveGoals}>
+            Save Goals
+          </Button>
+        </Card>
+      </SettingsGroup>
+
+      <SettingsGroup label="Display">
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-[15px] tracking-[-0.15px] text-text">Completion Badge</p>
+              <p className="text-[11px] tracking-[-0.11px] text-text-dim mt-0.5">
+                Show daily completion percentage in history
+              </p>
+            </div>
+            <Toggle checked={showCompletionBadge} onChange={setShowCompletionBadge} />
+          </div>
+        </Card>
+      </SettingsGroup>
+
+      <SettingsGroup label="Data">
+        <Card className="divide-y divide-border">
+          <ListItem
+            title="Export Data"
+            subtitle={`Export all ${entries.length} entries as JSON`}
+            onPress={handleExport}
+          />
+          <div>
+            <ListItem
+              title={confirmClear ? 'Tap again to confirm' : 'Clear All Data'}
+              subtitle="Permanently delete all entries and reset goals"
+              onPress={handleClearAll}
+            />
+            {confirmClear && (
+              <div className="px-4 pb-3">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full"
+                  onClick={() => setConfirmClear(false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </div>
+        </Card>
+      </SettingsGroup>
+
+      <SettingsGroup label="About">
+        <Card className="p-4 space-y-1.5">
+          <p className="text-[15px] tracking-[-0.15px] text-text">{{DISPLAY_NAME}}</p>
+          <p className="text-[13px] tracking-[-0.13px] text-text-dim">Version 1.0.0</p>
+          <Divider className="my-2" />
+          <p className="text-[11px] tracking-[-0.11px] text-text-dim">
+            An activity and habit tracker for Even Realities G2 smart glasses. All data is stored locally in your browser.
+          </p>
+        </Card>
+      </SettingsGroup>
+    </main>
+  )
+}

package/templates/tracker/src/screens/TodayScreen.tsx

@@ -0,0 +1,147 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useNavigate } from 'react-router'
+import { Card, Button, Progress, StatusProgress, TimerRing, StatGrid, ScreenHeader, useDrawerHeader } from 'even-toolkit/web'
+import { IcPlus } from 'even-toolkit/web/icons/svg-icons'
+import { useTracker } from '../contexts/TrackerContext'
+
+function formatPercent(value: number, target: number): string {
+  return `${Math.round((value / target) * 100)}%`
+}
+
+export function TodayScreen() {
+  const navigate = useNavigate()
+  const { goals, getTodayTotal } = useTracker()
+
+  const waterTotal = getTodayTotal('Water')
+  const stepsTotal = getTodayTotal('Steps')
+  const focusTotal = getTodayTotal('Focus')
+
+  // Focus timer state
+  const [timerActive, setTimerActive] = useState(false)
+  const [timerRemaining, setTimerRemaining] = useState(25 * 60) // 25 min default
+
+  useEffect(() => {
+    if (!timerActive || timerRemaining <= 0) return
+    const interval = setInterval(() => {
+      setTimerRemaining((prev) => {
+        if (prev <= 1) {
+          setTimerActive(false)
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [timerActive, timerRemaining])
+
+  const toggleTimer = useCallback(() => {
+    if (timerRemaining <= 0) {
+      setTimerRemaining(25 * 60)
+      setTimerActive(true)
+    } else {
+      setTimerActive((prev) => !prev)
+    }
+  }, [timerRemaining])
+
+  // Routine steps
+  const hour = new Date().getHours()
+  const routineSteps = [
+    { label: 'Morning', status: hour >= 9 ? 'complete' as const : hour >= 6 ? 'in-progress' as const : 'waiting' as const },
+    { label: 'Work', status: hour >= 17 ? 'complete' as const : hour >= 9 ? 'in-progress' as const : 'waiting' as const },
+    { label: 'Exercise', status: stepsTotal >= goals.steps ? 'complete' as const : hour >= 17 ? 'in-progress' as const : 'waiting' as const },
+    { label: 'Evening', status: hour >= 21 ? 'complete' as const : hour >= 19 ? 'in-progress' as const : 'waiting' as const },
+  ]
+
+  useDrawerHeader({
+    right: (
+      <Button variant="ghost" size="icon" onClick={() => navigate('/new')}>
+        <IcPlus width={20} height={20} />
+      </Button>
+    ),
+  })
+
+  return (
+    <main className="px-3 pt-4 pb-8 space-y-3">
+      <ScreenHeader
+        title="Today"
+        subtitle={new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
+      />
+
+      {/* Daily Goals Progress */}
+      <Card className="p-4 space-y-3">
+        <p className="text-[15px] tracking-[-0.15px] text-text">Daily Goals</p>
+
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between">
+              <span className="text-[13px] tracking-[-0.13px] text-text">Water</span>
+              <span className="text-[13px] tracking-[-0.13px] text-text-dim">
+                {waterTotal}/{goals.water} glasses
+              </span>
+            </div>
+            <Progress value={(waterTotal / goals.water) * 100} />
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between">
+              <span className="text-[13px] tracking-[-0.13px] text-text">Steps</span>
+              <span className="text-[13px] tracking-[-0.13px] text-text-dim">
+                {stepsTotal.toLocaleString()}/{goals.steps.toLocaleString()}
+              </span>
+            </div>
+            <Progress value={(stepsTotal / goals.steps) * 100} />
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between">
+              <span className="text-[13px] tracking-[-0.13px] text-text">Focus</span>
+              <span className="text-[13px] tracking-[-0.13px] text-text-dim">
+                {focusTotal}/{goals.focus} min
+              </span>
+            </div>
+            <Progress value={(focusTotal / goals.focus) * 100} />
+          </div>
+        </div>
+      </Card>
+
+      {/* Daily Routine */}
+      <Card className="p-4 space-y-3">
+        <p className="text-[15px] tracking-[-0.15px] text-text">Daily Routine</p>
+        <StatusProgress steps={routineSteps} />
+      </Card>
+
+      {/* Focus Timer */}
+      <Card className="p-4 space-y-3">
+        <p className="text-[15px] tracking-[-0.15px] text-text">Focus Timer</p>
+        <div className="flex flex-col items-center gap-3">
+          <TimerRing
+            remaining={timerRemaining}
+            total={25 * 60}
+            size={140}
+            strokeWidth={6}
+          />
+          <Button
+            size="sm"
+            variant={timerActive ? 'secondary' : 'default'}
+            onClick={toggleTimer}
+          >
+            {timerRemaining <= 0 ? 'Restart' : timerActive ? 'Pause' : 'Start Focus'}
+          </Button>
+        </div>
+      </Card>
+
+      {/* Today's Stats */}
+      <Card className="p-4 space-y-3">
+        <p className="text-[15px] tracking-[-0.15px] text-text">Stats</p>
+        <StatGrid
+          columns={3}
+          stats={[
+            { label: 'Water', value: formatPercent(waterTotal, goals.water) },
+            { label: 'Steps', value: formatPercent(stepsTotal, goals.steps) },
+            { label: 'Focus', value: formatPercent(focusTotal, goals.focus) },
+          ]}
+        />
+      </Card>
+    </main>
+  )
+}

package/templates/tracker/src/types.ts

@@ -0,0 +1,34 @@
+export type ActivityType = 'Water' | 'Steps' | 'Focus'
+
+export interface TrackerEntry {
+  id: string
+  activity: ActivityType
+  value: number
+  note: string
+  timestamp: number
+}
+
+export interface DayRecord {
+  date: string // YYYY-MM-DD
+  entries: TrackerEntry[]
+}
+
+export interface GoalTargets {
+  water: number   // glasses
+  steps: number   // steps
+  focus: number   // minutes
+}
+
+export const ACTIVITIES: ActivityType[] = ['Water', 'Steps', 'Focus']
+
+export const DEFAULT_GOALS: GoalTargets = {
+  water: 8,
+  steps: 10000,
+  focus: 60,
+}
+
+export const ACTIVITY_UNITS: Record<ActivityType, string> = {
+  Water: 'glasses',
+  Steps: 'steps',
+  Focus: 'min',
+}

package/templates/tracker/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/tracker/template.json

@@ -0,0 +1,7 @@
+{
+  "name": "tracker",
+  "displayName": "Activity Tracker",
+  "description": "Activity and habit tracker with daily goals, history calendar, and focus timer — built for G2 smart glasses",
+  "tags": ["tracker", "habits", "health"],
+  "components": ["DrawerShell", "ScreenHeader", "Card", "Button", "Progress", "StatusProgress", "TimerRing", "StatGrid", "Calendar", "Timeline", "StepIndicator", "Select", "Slider", "Input", "Textarea", "Badge", "SettingsGroup", "Toggle", "Divider", "ListItem"]
+}

package/templates/tracker/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/tracker/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": ["node"],
+    "composite": true,
+    "noEmit": false,
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/tracker/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: { '@': path.resolve(__dirname, './src') },
+    dedupe: ['react', 'react-dom', 'react-router', '@evenrealities/even_hub_sdk', '@jappyjan/even-better-sdk', 'upng-js'],
+  },
+})