create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/src/app/(dashboard-components)/app-drawer.tsx

@@ -39,11 +39,6 @@ export const AppDrawerItemColor = {
     iconColor: 'text-emerald-500',
     badgeColor: 'bg-emerald-400 text-emerald-800',
   },
-  indigo: {
-    buttonColor: 'bg-indigo-500/20 hover:bg-indigo-500/25',
-    iconColor: 'text-indigo-500',
-    badgeColor: 'bg-indigo-400 text-indigo-800',
-  },
   purple: {
     buttonColor: 'bg-purple-500/20 hover:bg-purple-500/25',
     iconColor: 'text-purple-500',
@@ -80,13 +75,13 @@ export const AppDrawerItemColor = {
     badgeColor: 'bg-orange-400 text-orange-800',
   },
   gray: {
-    buttonColor: 'bg-gray-500/20 hover:bg-gray-500/25',
-    iconColor: 'text-gray-500',
-    badgeColor: 'bg-gray-400 text-gray-800',
+    buttonColor: 'bg-zinc-500/20 hover:bg-zinc-500/25',
+    iconColor: 'text-zinc-500',
+    badgeColor: 'bg-zinc-400 text-zinc-800',
   },
 }
 
-export const AppDrawerItem = ({
+const AppDrawerItem = ({
   title,
   icon,
   colorKey,
@@ -105,14 +100,14 @@ export const AppDrawerItem = ({
   return (
     <Button
       variant="outline"
-      className={`relative flex h-fit w-full flex-col items-center justify-center border-none hover:text-gray-200 ${color.buttonColor} px-2`}
+      className={`relative flex h-fit w-full flex-col items-center justify-center border-none hover:text-zinc-200 ${color.buttonColor} px-2`}
       onClick={onClick}
       disabled={!isActive}
     >
       <div className={`${color.iconColor} [&_svg]:!h-6 [&_svg]:!w-6`}>{icon}</div>
-      <div className="text-xs font-medium text-gray-200">{title}</div>
+      <div className="text-xs font-medium text-zinc-200">{title}</div>
       <div
-        className={`absolute right-[-8px] top-[-8px] flex h-4 w-4 items-center justify-center rounded-full ${color.badgeColor} p-2.5 text-xs`}
+        className={`absolute right-[-8px] top-[-8px] flex size-4 items-center justify-center rounded-full ${color.badgeColor} p-2.5 text-xs`}
       >
         {count}
       </div>
@@ -120,49 +115,57 @@ export const AppDrawerItem = ({
   )
 }
 
-export default function AppDrawer({ metrics, title, description }: { metrics: DashboardMetrics | null, title: string, description: string }) {
-  const router = useRouter()
+export default function AppDrawer({
+  metrics,
+  title,
+  description,
+}: {
+  metrics: DashboardMetrics | null
+  title: string
+  description: string
+}) {
+  const { push } = useRouter()
   const items: AppDrawerItem[] = [
     {
       title: 'Failed Runs',
-      icon: <XCircle className="h-4 w-4" />,
+      icon: <XCircle className="size-4" />,
       color: 'orange',
       count: metrics?.failedRecentRunsCount ?? 0,
       onClick: () => {
-        router.push('/test-runs?filter=recentFailed')
+        push('/test-runs?filter=recentFailed')
       },
     },
     {
       title: 'Failing Tests',
-      icon: <AlertCircle className="h-4 w-4" />,
+      icon: <AlertCircle className="size-4" />,
       color: 'rose',
       count: metrics?.repeatedlyFailingTestsCount ?? 0,
       onClick: () => {
-        router.push('/reports/test-cases?filter=repeatedlyFailing')
+        push('/reports/test-cases?filter=repeatedlyFailing')
       },
     },
     {
       title: 'Flaky Tests',
-      icon: <AlertTriangle className="h-4 w-4" />,
+      icon: <AlertTriangle className="size-4" />,
       color: 'yellow',
       count: metrics?.flakyTestsCount ?? 0,
       onClick: () => {
-        router.push('/reports/test-cases?filter=flaky')
+        push('/reports/test-cases?filter=flaky')
       },
     },
     {
       title: 'Unexecuted Suites',
-      icon: <Clock className="h-4 w-4" />,
+      icon: <Clock className="size-4" />,
       color: 'blue',
       count: metrics?.suitesNotExecutedRecentlyCount ?? 0,
       onClick: () => {
-        router.push('/reports/test-suites?filter=notExecutedRecently')
+        push('/reports/test-suites?filter=notExecutedRecently')
       },
     },
   ]
 
   return (
-    <Card id="container" className="w-fit border-gray-600/10 bg-gray-600/10">
+    <Card id="container" className="w-fit border-zinc-600/10 bg-zinc-600/10">
       <CardHeader id="header">
         <CardTitle className="text-primary">{title}</CardTitle>
         <CardDescription>{description}</CardDescription>

package/templates/starter/src/app/(dashboard-components)/data-card-grid.tsx

@@ -1,7 +1,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 
 export const DataCardGrid = ({ children }: { children: React.ReactNode }) => {
-    return <Card className="border-gray-600/10 bg-gray-600/10 w-fit">
+    return <Card className="border-zinc-600/10 bg-zinc-600/10 w-fit">
         <CardHeader>
             <CardTitle className="text-primary">States</CardTitle>
             <CardDescription>Overview of entity states</CardDescription>

package/templates/starter/src/app/(dashboard-components)/data-card.tsx

@@ -1,27 +1,31 @@
 'use client'
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardTitle, CardHeader } from "@/components/ui/card";
-import { ExternalLink } from "lucide-react";
-import { useRouter } from "next/navigation";
-export default function DataCard({ title, value, link }: { title: string, value: number, link: string }) {
-    const router = useRouter()
-    return (
-        <Card className="h-fit border-gray-600/10 bg-gray-600/10 min-w-40">
-            <CardHeader className="flex items-center justify-between flex-row p-2">
-                <CardTitle className={`text-xs font-normal ${value > 0 ? 'text-primary' : 'text-gray-400'}`}>{title}</CardTitle>
-                <div className="flex items-center gap-2">
-                    <Button variant="outline" className="text-primary hover:text-primary/80 px-2 py-1 bg-inherit border-gray-600/15 hover:bg-emerald-400/10"
-                        disabled={value === 0}
-                        onClick={() => router.push(link)}
-                        size="sm"
-                    >
-                        <ExternalLink className="h-4 w-4" />
-                    </Button>
-                </div>
-            </CardHeader>
-            <CardContent className="h-full px-2 py-1">
-                <div className={`text-2xl h-full flex items-center font-bold ${value > 0 ? 'text-primary' : 'text-gray-400'}`}>{value}</div>
-            </CardContent>
-        </Card>
-    )
-}
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardTitle, CardHeader } from '@/components/ui/card'
+import { ExternalLink } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+export default function DataCard({ title, value, link }: { title: string; value: number; link: string }) {
+  const { push } = useRouter()
+  return (
+    <Card className="h-fit min-w-40 border-zinc-600/10 bg-zinc-600/10">
+      <CardHeader className="flex flex-row items-center justify-between p-2">
+        <CardTitle className={`text-xs font-normal ${value > 0 ? 'text-primary' : 'text-zinc-400'}`}>{title}</CardTitle>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            className="hover:text-primary/80 border-zinc-600/15 bg-inherit px-2 py-1 text-primary hover:bg-emerald-400/10"
+            disabled={value === 0}
+            onClick={() => push(link)}
+            size="sm"
+          >
+            <ExternalLink className="size-4" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="h-full px-2 py-1">
+        <div className={`flex h-full items-center text-2xl font-bold ${value > 0 ? 'text-primary' : 'text-zinc-400'}`}>
+          {value}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/templates/starter/src/app/(dashboard-components)/execution-health-panel.tsx

@@ -4,54 +4,54 @@ import FeatureChart from '../(base)/reports/feature-chart'
 import type { TestSuiteExecutionData } from '@/services/dashboard/dashboard-service'
 
 const colorMap = {
-    passed: 'oklch(59.6% 0.145 163.225)',
-    failed: 'oklch(59.2% 0.249 0.584)',
-    cancelled: 'oklch(55.4% 0.046 257.417)',
-    unknown: 'oklch(79.5% 0.184 86.047)',
+  passed: 'oklch(59.6% 0.145 163.225)',
+  failed: 'oklch(59.2% 0.249 0.584)',
+  cancelled: 'oklch(55.4% 0.046 257.417)',
+  unknown: 'oklch(79.5% 0.184 86.047)',
 }
 
 const resultByTestSuiteBarChartConfig = {
-    feature: {
-        label: 'Test Suite',
-    },
-    passed: {
-        label: 'Passed',
-        color: colorMap.passed,
-    },
-    failed: {
-        label: 'Failed',
-        color: colorMap.failed,
-    },
-    cancelled: {
-        label: 'Cancelled',
-        color: colorMap.cancelled,
-    },
-    unknown: {
-        label: 'Unknown',
-        color: colorMap.unknown,
-    },
+  feature: {
+    label: 'Test Suite',
+  },
+  passed: {
+    label: 'Passed',
+    color: colorMap.passed,
+  },
+  failed: {
+    label: 'Failed',
+    color: colorMap.failed,
+  },
+  cancelled: {
+    label: 'Cancelled',
+    color: colorMap.cancelled,
+  },
+  unknown: {
+    label: 'Unknown',
+    color: colorMap.unknown,
+  },
 } satisfies ChartConfig
 
 interface ExecutionHealthPanelProps {
-    featureData: TestSuiteExecutionData
+  featureData: TestSuiteExecutionData
 }
 
 export const ExecutionHealthPanel = ({ featureData }: ExecutionHealthPanelProps) => {
-    return (
-        <Card className="border-gray-600/10 bg-gray-600/10 w-full h-full">
-            <CardHeader>
-                <CardTitle className="text-primary">Execution Health</CardTitle>
-                <CardDescription>Pass/fail counts by test suite across last 10 completed test runs</CardDescription>
-            </CardHeader>
-            <CardContent>
-                {featureData.length === 0 ? (
-                    <div className="flex h-[300px] items-center justify-center text-sm text-muted-foreground">
-                        No execution data available. Run some test suites to see execution health metrics.
-                    </div>
-                ) : (
-                    <FeatureChart config={resultByTestSuiteBarChartConfig} data={featureData} />
-                )}
-            </CardContent>
-        </Card>
-    )
-}
+  return (
+    <Card className="size-full border-zinc-600/10 bg-zinc-600/10">
+      <CardHeader>
+        <CardTitle className="text-primary">Execution Health</CardTitle>
+        <CardDescription>Pass/fail counts by test suite across last 10 completed test runs</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {featureData.length === 0 ? (
+          <div className="flex h-[300px] items-center justify-center text-sm text-muted-foreground">
+            No execution data available. Run some test suites to see execution health metrics.
+          </div>
+        ) : (
+          <FeatureChart config={resultByTestSuiteBarChartConfig} data={featureData} />
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/templates/starter/src/app/(dashboard-components)/ongoing-test-runs-card.tsx

@@ -13,7 +13,7 @@ interface OngoingTestRunsCardProps {
 }
 
 export default function OngoingTestRunsCard({ initialCount, link }: OngoingTestRunsCardProps) {
-  const router = useRouter()
+  const { push } = useRouter()
   const [count, setCount] = useState(initialCount)
   const pollingRef = useRef<NodeJS.Timeout | null>(null)
 
@@ -60,25 +60,25 @@ export default function OngoingTestRunsCard({ initialCount, link }: OngoingTestR
   }, [count])
 
   return (
-    <Card className="h-fit border-gray-600/10 bg-gray-600/10 min-w-40">
-      <CardHeader className="flex items-center justify-between flex-row p-2">
-        <CardTitle className={`text-xs font-normal ${count > 0 ? 'text-primary' : 'text-gray-400'}`}>
+    <Card className="h-fit min-w-40 border-zinc-600/10 bg-zinc-600/10">
+      <CardHeader className="flex flex-row items-center justify-between p-2">
+        <CardTitle className={`text-xs font-normal ${count > 0 ? 'text-primary' : 'text-zinc-400'}`}>
           Ongoing Test Runs
         </CardTitle>
         <div className="flex items-center gap-2">
           <Button
             variant="outline"
-            className="text-primary hover:text-primary/80 px-2 py-1 bg-inherit border-gray-600/15 hover:bg-emerald-400/10"
+            className="hover:text-primary/80 border-zinc-600/15 bg-inherit px-2 py-1 text-primary hover:bg-emerald-400/10"
             disabled={count === 0}
-            onClick={() => router.push(link)}
+            onClick={() => push(link)}
             size="sm"
           >
-            <ExternalLink className="h-4 w-4" />
+            <ExternalLink className="size-4" />
           </Button>
         </div>
       </CardHeader>
       <CardContent className="h-full px-2 py-1">
-        <div className={`text-2xl h-full flex items-center font-bold ${count > 0 ? 'text-primary' : 'text-gray-400'}`}>
+        <div className={`flex h-full items-center text-2xl font-bold ${count > 0 ? 'text-primary' : 'text-zinc-400'}`}>
           {count}
         </div>
       </CardContent>

package/templates/starter/src/app/(dashboard-components)/quick-actions-drawer.tsx

@@ -1,45 +1,69 @@
 'use client'
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Blocks, FileCheck, LayoutTemplate, ListChecks, TestTubeDiagonal, TestTubes } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Blocks, FileCheck, LayoutTemplate, ListChecks, TestTubeDiagonal, TestTubes } from 'lucide-react'
+import { useRouter } from 'next/navigation'
 
 export default function QuickActionsDrawer() {
-    const router = useRouter()
-    return (
-        <Card id="container" className="w-fit border-gray-600/10 bg-gray-600/10 h-fit">
-            <CardHeader id="header">
-                <CardTitle className="text-primary">Quick Actions</CardTitle>
-                <CardDescription>Quickly create new entities to get started</CardDescription>
-            </CardHeader>
-            <CardContent id="content">
-                <div className="grid grid-cols-5 gap-4">
-                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/test-suites/create')}>
-                        <TestTubes />
-                        <span className="text-xs font-medium">Create Suite</span>
-                    </Button>
-                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/test-cases/create')}>
-                        <TestTubeDiagonal />
-                        <span className="text-xs font-medium">Create Test</span>
-                    </Button>
-                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/template-steps/create')}>
-                        <LayoutTemplate />
-                        <span className="text-xs font-medium">Create Step</span>
-                    </Button>
-                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/test-runs/create')}>
-                        <ListChecks />
-                        <span className="text-xs font-medium">Create Run</span>
-                    </Button>
-                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/template-test-cases/create')}>
-                        <Blocks />
-                        <span className="text-xs font-medium">Create Template</span>
-                    </Button>
-                    <Button variant="outline" className="flex flex-col items-center gap-2 h-fit [&_svg]:!h-6 [&_svg]:!w-6 bg-emerald-500/10 hover:bg-emerald-500/25 text-emerald-500 hover:text-emerald-400 border-none" onClick={() => router.push('/reports')}>
-                        <FileCheck />
-                        <span className="text-xs font-medium">View Reports</span>
-                    </Button>
-                </div>
-            </CardContent>
-        </Card>
-    )
-}
+  const { push } = useRouter()
+  return (
+    <Card id="container" className="h-fit w-fit border-zinc-600/10 bg-zinc-600/10">
+      <CardHeader id="header">
+        <CardTitle className="text-primary">Quick Actions</CardTitle>
+        <CardDescription>Quickly create new entities to get started</CardDescription>
+      </CardHeader>
+      <CardContent id="content">
+        <div className="grid grid-cols-5 gap-4">
+          <Button
+            variant="outline"
+            className="flex h-fit flex-col items-center gap-2 border-none bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/25 hover:text-emerald-400 [&_svg]:!h-6 [&_svg]:!w-6"
+            onClick={() => push('/test-suites/create')}
+          >
+            <TestTubes />
+            <span className="text-xs font-medium">Create Suite</span>
+          </Button>
+          <Button
+            variant="outline"
+            className="flex h-fit flex-col items-center gap-2 border-none bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/25 hover:text-emerald-400 [&_svg]:!h-6 [&_svg]:!w-6"
+            onClick={() => push('/test-cases/create')}
+          >
+            <TestTubeDiagonal />
+            <span className="text-xs font-medium">Create Test</span>
+          </Button>
+          <Button
+            variant="outline"
+            className="flex h-fit flex-col items-center gap-2 border-none bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/25 hover:text-emerald-400 [&_svg]:!h-6 [&_svg]:!w-6"
+            onClick={() => push('/template-steps/create')}
+          >
+            <LayoutTemplate />
+            <span className="text-xs font-medium">Create Step</span>
+          </Button>
+          <Button
+            variant="outline"
+            className="flex h-fit flex-col items-center gap-2 border-none bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/25 hover:text-emerald-400 [&_svg]:!h-6 [&_svg]:!w-6"
+            onClick={() => push('/test-runs/create')}
+          >
+            <ListChecks />
+            <span className="text-xs font-medium">Create Run</span>
+          </Button>
+          <Button
+            variant="outline"
+            className="flex h-fit flex-col items-center gap-2 border-none bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/25 hover:text-emerald-400 [&_svg]:!h-6 [&_svg]:!w-6"
+            onClick={() => push('/template-test-cases/create')}
+          >
+            <Blocks />
+            <span className="text-xs font-medium">Create Template</span>
+          </Button>
+          <Button
+            variant="outline"
+            className="flex h-fit flex-col items-center gap-2 border-none bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/25 hover:text-emerald-400 [&_svg]:!h-6 [&_svg]:!w-6"
+            onClick={() => push('/reports')}
+          >
+            <FileCheck />
+            <span className="text-xs font-medium">View Reports</span>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}