create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/src/app/(base)/reports/overview-chart.tsx

@@ -1,49 +1,49 @@
-'use client'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { Pie, PieChart, Label } from 'recharts'
-
-interface OverviewChartProps {
-  config: ChartConfig
-  data: Array<{ result: string; value: number; fill: string }>
-}
-
-const calculatePassRate = (data: Array<{ result: string; value: number; fill: string }>) => {
-  const total = data.reduce((acc, curr) => acc + curr.value, 0)
-  if (total === 0) {
-    return 0
-  }
-  const passed = data.find(item => item.result === 'passed')?.value || 0
-  return Math.round((passed / total) * 100)
-}
-
-export default function OverviewChart({ config, data }: OverviewChartProps) {
-  return (
-    <>
-      <p className="mt-2 text-center text-xs text-muted-foreground">Status(%) by Feature</p>
-      <ChartContainer config={config} className="mx-auto aspect-square max-h-[250px]">
-        <PieChart>
-          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          <Pie data={data} dataKey="value" nameKey="result" innerRadius={60} strokeWidth={5}>
-            <Label
-              content={({ viewBox }) => {
-                if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                  return (
-                    <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
-                      <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
-                        {calculatePassRate(data)}%
-                      </tspan>
-                      <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
-                        Pass Rate
-                      </tspan>
-                    </text>
-                  )
-                }
-              }}
-            />
-          </Pie>
-        </PieChart>
-      </ChartContainer>
-    </>
-  )
-}
+'use client'
+
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { Pie, PieChart, Label } from 'recharts'
+
+interface OverviewChartProps {
+  config: ChartConfig
+  data: Array<{ result: string; value: number; fill: string }>
+}
+
+const calculatePassRate = (data: Array<{ result: string; value: number; fill: string }>) => {
+  const total = data.reduce((acc, curr) => acc + curr.value, 0)
+  if (total === 0) {
+    return 0
+  }
+  const passed = data.find(item => item.result === 'passed')?.value || 0
+  return Math.round((passed / total) * 100)
+}
+
+export default function OverviewChart({ config, data }: OverviewChartProps) {
+  return (
+    <>
+      <p className="mt-2 text-center text-xs text-muted-foreground">Status(%) by Feature</p>
+      <ChartContainer config={config} className="mx-auto aspect-square max-h-[250px]">
+        <PieChart>
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Pie data={data} dataKey="value" nameKey="result" innerRadius={60} strokeWidth={5}>
+            <Label
+              content={({ viewBox }) => {
+                if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                  return (
+                    <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                      <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
+                        {calculatePassRate(data)}%
+                      </tspan>
+                      <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
+                        Pass Rate
+                      </tspan>
+                    </text>
+                  )
+                }
+              }}
+            />
+          </Pie>
+        </PieChart>
+      </ChartContainer>
+    </>
+  )
+}

package/templates/starter/src/app/(base)/reports/page.tsx

@@ -5,36 +5,7 @@ import { Metadata } from 'next'
 import ReportTable from './report-table'
 import EmptyState from '@/components/data-state/empty-state'
 import { getAllReportsAction } from '@/actions/reports/report-actions'
-import { Prisma } from '@prisma/client'
-
-type ReportWithRelations = Prisma.ReportGetPayload<{
-  include: {
-    testRun: {
-      include: {
-        environment: true
-        tags: true
-      }
-    }
-    testCases: {
-      include: {
-        testRunTestCase: {
-          include: {
-            testCase: {
-              include: {
-                tags: true
-              }
-            }
-          }
-        }
-        reportScenario: {
-          include: {
-            reportFeature: true
-          }
-        }
-      }
-    }
-  }
-}>
+import { isValidReportList } from './report-detail-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Reports',
@@ -48,21 +19,7 @@ const Reports = async () => {
     return <div>Error: {reportsError}</div>
   }
 
-  // Type guard to validate the data structure
-  const isValidReportData = (data: unknown): data is ReportWithRelations[] => {
-    if (!Array.isArray(data)) return false
-    return data.every(
-      item =>
-        item &&
-        typeof item === 'object' &&
-        'id' in item &&
-        'testRun' in item &&
-        'testCases' in item &&
-        Array.isArray(item.testCases),
-    )
-  }
-
-  if (!reports || !isValidReportData(reports)) {
+  if (!reports || !isValidReportList(reports)) {
     return <div>Error: Invalid report data format</div>
   }
 
@@ -70,7 +27,7 @@ const Reports = async () => {
     return (
       <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
         <EmptyState
-          icon={<FileCheck className="h-8 w-8" />}
+          icon={<FileCheck className="size-8" />}
           title="No reports found"
           description="Get started by creating a test run to generate reports"
           createRoute="/test-runs/create"
@@ -84,13 +41,13 @@ const Reports = async () => {
       <div className="mb-8">
         <PageHeader>
           <span className="flex items-center">
-            <FileCheck className="mr-2 h-8 w-8" />
+            <FileCheck className="mr-2 size-8" />
             Reports
           </span>
         </PageHeader>
         <HeaderSubtitle>Review test execution details, identify patterns, and optimize performance</HeaderSubtitle>
       </div>
-      <ReportTable />
+      <ReportTable reports={reports} />
     </>
   )
 }

package/templates/starter/src/app/(base)/reports/report-charts.tsx

@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic'
+
+function ChartPlaceholder() {
+  return <div className="mx-auto aspect-square max-h-[250px] animate-pulse rounded-lg bg-muted" />
+}
+
+export const OverviewChart = dynamic(() => import('./overview-chart'), {
+  loading: () => <ChartPlaceholder />,
+})
+
+export const FeatureChart = dynamic(() => import('./feature-chart'), {
+  loading: () => <ChartPlaceholder />,
+})
+
+export const DurationChart = dynamic(() => import('./duration-chart'), {
+  loading: () => <ChartPlaceholder />,
+})

package/templates/starter/src/app/(base)/reports/report-detail-helpers.ts

@@ -1,57 +1,10 @@
-import { BrowserEngine, Prisma, StepStatus } from '@prisma/client'
+import { BrowserEngine, StepStatus } from '@prisma/client'
 import { Compass, Flame } from 'lucide-react'
 import { createElement } from 'react'
 
 import type { ChartConfig } from '@/components/ui/chart'
-
-export type ReportDetailWithRelations = Prisma.ReportGetPayload<{
-  include: {
-    testRun: {
-      include: {
-        environment: true
-        tags: true
-      }
-    }
-    features: {
-      include: {
-        tags: true
-        scenarios: {
-          include: {
-            tags: true
-            steps: true
-            hooks: true
-          }
-        }
-      }
-    }
-    testCases: {
-      include: {
-        testRunTestCase: {
-          include: {
-            testCase: {
-              include: {
-                tags: true
-              }
-            }
-            testSuite: true
-          }
-        }
-        reportScenario: {
-          include: {
-            reportFeature: true
-            tags: true
-            steps: {
-              orderBy: {
-                order: 'asc'
-              }
-            }
-            hooks: true
-          }
-        }
-      }
-    }
-  }
-}>
+export type { ReportDetailWithRelations } from '@/types/report'
+import type { ReportDetailWithRelations, ReportWithRelations } from '@/types/report'
 
 export const reportColorMap = {
   passed: 'oklch(59.6% 0.145 163.225)',
@@ -62,9 +15,9 @@ export const reportColorMap = {
 } as const
 
 export const browserIcons = {
-  [BrowserEngine.CHROMIUM]: createElement(Flame, { className: 'h-4 w-4' }),
-  [BrowserEngine.FIREFOX]: createElement(Flame, { className: 'h-4 w-4' }),
-  [BrowserEngine.WEBKIT]: createElement(Compass, { className: 'h-4 w-4' }),
+  [BrowserEngine.CHROMIUM]: createElement(Flame, { className: 'size-4' }),
+  [BrowserEngine.FIREFOX]: createElement(Flame, { className: 'size-4' }),
+  [BrowserEngine.WEBKIT]: createElement(Compass, { className: 'size-4' }),
 } as const
 
 export const overViewPieChartConfig = {
@@ -138,6 +91,22 @@ export function isValidReportDetail(data: unknown): data is ReportDetailWithRela
   )
 }
 
+export function isValidReportList(data: unknown): data is ReportWithRelations[] {
+  if (!Array.isArray(data)) {
+    return false
+  }
+
+  return data.every(
+    item =>
+      item &&
+      typeof item === 'object' &&
+      'id' in item &&
+      'testRun' in item &&
+      'testCases' in item &&
+      Array.isArray(item.testCases),
+  )
+}
+
 export function formatDateTime(date: Date) {
   return date.toLocaleString('en-US', {
     year: 'numeric',
@@ -148,7 +117,11 @@ export function formatDateTime(date: Date) {
   })
 }
 
-export function formatDuration(startDate: Date, endDate: Date) {
+export function formatDuration(startDate: Date, endDate: Date | null) {
+  if (!endDate) {
+    return '-'
+  }
+
   const diffInMs = endDate.getTime() - startDate.getTime()
   const totalSeconds = Math.floor(diffInMs / 1000)
   const hours = Math.floor(totalSeconds / 3600)

package/templates/starter/src/app/(base)/reports/report-metric-card.tsx

@@ -47,13 +47,13 @@ const ReportMetricCard = ({ title, value }: { title: string; value: string }) =>
   return (
     <Card
       className={cn(
-        'group relative min-w-0 overflow-hidden rounded-2xl shadow-sm transition-colors bg-transparent border-gray-500/10',
+        'group relative min-w-0 overflow-hidden rounded-2xl border-zinc-500/10 bg-transparent shadow-sm transition-colors',
         styles.card,
       )}
     >
       <div
         className={cn(
-          'pointer-events-none absolute -right-10 -top-10 h-28 w-28 rounded-full blur-3xl transition-opacity group-hover:opacity-90',
+          'pointer-events-none absolute -right-10 -top-10 size-28 rounded-full blur-3xl transition-opacity group-hover:opacity-90',
           styles.glow,
         )}
       />
@@ -62,7 +62,7 @@ const ReportMetricCard = ({ title, value }: { title: string; value: string }) =>
       <CardHeader className="space-y-3 p-5 pb-3">
         <div className="flex items-center gap-3">
           <span className={cn('h-2.5 w-2.5 rounded-full shadow-sm', styles.dot)} />
-          <CardTitle className="text-sm font-medium tracking-[0.18em] text-muted-foreground uppercase">
+          <CardTitle className="text-sm font-medium uppercase tracking-[0.18em] text-muted-foreground">
             {title}
           </CardTitle>
         </div>

package/templates/starter/src/app/(base)/reports/report-table-columns.tsx

@@ -1,68 +1,36 @@
 'use client'
 
 import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import {
-  Report,
-  Tag,
-  ReportTestCase,
-  TestRun,
-  TestRunTestCase,
-  TestCase,
-  TestRunStatus,
-  TestRunResult,
-  Environment,
-  TagType,
-} from '@prisma/client'
+import { TestRunStatus, TestRunResult, TagType } from '@prisma/client'
 import { ColumnDef } from '@tanstack/react-table'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { CheckCircle, Clock, XCircle, Eye } from 'lucide-react'
 import Link from 'next/link'
-
-type ReportWithRelations = Report & {
-  testRun: TestRun & {
-    environment: Environment
-    tags: Tag[]
-  }
-  testCases: (ReportTestCase & {
-    testRunTestCase: TestRunTestCase & {
-      testCase: TestCase & { tags?: Tag[] }
-    }
-  })[]
-}
-
-const formatDuration = (startDate: Date, endDate: Date | null) => {
-  if (!endDate) return '-'
-  const diffInMs = endDate.getTime() - startDate.getTime()
-  const totalSeconds = Math.floor(diffInMs / 1000)
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
-  const seconds = totalSeconds % 60
-
-  return `${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m ${String(seconds).padStart(2, '0')}s`
-}
+import { formatDuration } from './report-detail-helpers'
+import type { ReportWithRelations } from '@/types/report'
 
 const testRunStatusToBadge = (status: TestRunStatus) => {
   switch (status) {
     case TestRunStatus.COMPLETED:
       return (
         <Badge className="bg-primary">
-          <CheckCircle className="mr-1 h-4 w-4" />
+          <CheckCircle className="mr-1 size-4" />
           Completed
         </Badge>
       )
     case TestRunStatus.CANCELLED:
       return (
         <Badge className="bg-pink-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
+          <XCircle className="mr-1 size-4" />
           Cancelled
         </Badge>
       )
     default:
       return (
-        <Badge className="bg-gray-500 text-white">
-          <Clock className="mr-1 h-4 w-4" />
+        <Badge className="bg-zinc-500 text-white">
+          <Clock className="mr-1 size-4" />
           Unknown
         </Badge>
       )
@@ -74,28 +42,28 @@ const testRunResultToBadge = (result: TestRunResult) => {
     case TestRunResult.PASSED:
       return (
         <Badge className="bg-primary">
-          <CheckCircle className="mr-1 h-4 w-4" />
+          <CheckCircle className="mr-1 size-4" />
           Passed
         </Badge>
       )
     case TestRunResult.FAILED:
       return (
         <Badge className="bg-pink-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
+          <XCircle className="mr-1 size-4" />
           Failed
         </Badge>
       )
     case TestRunResult.CANCELLED:
       return (
-        <Badge className="bg-gray-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
+        <Badge className="bg-zinc-500 text-white">
+          <XCircle className="mr-1 size-4" />
           Cancelled
         </Badge>
       )
     default:
       return (
-        <Badge className="bg-gray-500 text-white">
-          <Clock className="mr-1 h-4 w-4" />
+        <Badge className="bg-zinc-500 text-white">
+          <Clock className="mr-1 size-4" />
           Unknown
         </Badge>
       )
@@ -179,7 +147,7 @@ export const reportTableCols: ColumnDef<ReportWithRelations>[] = [
       return (
         <Link href={`/reports/${report.id}`}>
           <Button variant="outline" size="sm" className="flex items-center gap-2">
-            <Eye className="h-4 w-4" />
+            <Eye className="size-4" />
             View
           </Button>
         </Link>

package/templates/starter/src/app/(base)/reports/report-table.tsx

@@ -1,62 +1,12 @@
 import { DataTable } from '@/components/ui/data-table'
 import { reportTableCols } from './report-table-columns'
-import { getAllReportsAction } from '@/actions/reports/report-actions'
-import { Prisma } from '@prisma/client'
+import type { ReportWithRelations } from '@/types/report'
 
-type ReportWithRelations = Prisma.ReportGetPayload<{
-  include: {
-    testRun: {
-      include: {
-        environment: true
-        tags: true
-      }
-    }
-    testCases: {
-      include: {
-        testRunTestCase: {
-          include: {
-            testCase: {
-              include: {
-                tags: true
-              }
-            }
-          }
-        }
-        reportScenario: {
-          include: {
-            reportFeature: true
-          }
-        }
-      }
-    }
-  }
-}>
-
-const ReportTable = async () => {
-  const { data: reports, error: reportsError } = await getAllReportsAction()
-
-  if (reportsError) {
-    return <div>Error: {reportsError}</div>
-  }
-
-  // Type guard to validate the data structure
-  const isValidReportData = (data: unknown): data is ReportWithRelations[] => {
-    if (!Array.isArray(data)) return false
-    return data.every(
-      item =>
-        item &&
-        typeof item === 'object' &&
-        'id' in item &&
-        'testRun' in item &&
-        'testCases' in item &&
-        Array.isArray(item.testCases),
-    )
-  }
-
-  if (!reports || !isValidReportData(reports)) {
-    return <div>Error: Invalid report data format</div>
-  }
+interface ReportTableProps {
+  reports: ReportWithRelations[]
+}
 
+const ReportTable = ({ reports }: ReportTableProps) => {
   return (
     <>
       <DataTable

package/templates/starter/src/app/(base)/reports/report-view-table-columns.tsx

@@ -51,28 +51,28 @@ const testRunTestCaseResultToBadge = (result: TestRunTestCaseResult) => {
     case TestRunTestCaseResult.PASSED:
       return (
         <Badge className="bg-primary">
-          <CheckCircle className="mr-1 h-4 w-4" />
+          <CheckCircle className="mr-1 size-4" />
           Passed
         </Badge>
       )
     case TestRunTestCaseResult.FAILED:
       return (
         <Badge className="bg-pink-500 text-white">
-          <XCircle className="mr-1 h-4 w-4" />
+          <XCircle className="mr-1 size-4" />
           Failed
         </Badge>
       )
     case TestRunTestCaseResult.UNTESTED:
       return (
         <Badge className="bg-yellow-500 text-white">
-          <Clock className="mr-1 h-4 w-4" />
+          <Clock className="mr-1 size-4" />
           Untested
         </Badge>
       )
     default:
       return (
-        <Badge className="bg-gray-500 text-white">
-          <Clock className="mr-1 h-4 w-4" />
+        <Badge className="bg-zinc-500 text-white">
+          <Clock className="mr-1 size-4" />
           Unknown
         </Badge>
       )

package/templates/starter/src/app/(base)/reports/report-view-table.tsx

@@ -1,54 +1,6 @@
 import { DataTable } from '@/components/ui/data-table'
 import { reportViewTableCols } from './report-view-table-columns'
-import { Prisma } from '@prisma/client'
-
-type ReportDetailWithRelations = Prisma.ReportGetPayload<{
-  include: {
-    testRun: {
-      include: {
-        environment: true
-        tags: true
-      }
-    }
-    features: {
-      include: {
-        tags: true
-        scenarios: {
-          include: {
-            tags: true
-            steps: true
-            hooks: true
-          }
-        }
-      }
-    }
-    testCases: {
-      include: {
-        testRunTestCase: {
-          include: {
-            testCase: {
-              include: {
-                tags: true
-              }
-            }
-            testSuite: true
-          }
-        }
-        reportScenario: {
-          include: {
-            tags: true
-            steps: {
-              orderBy: {
-                order: 'asc'
-              }
-            }
-            hooks: true
-          }
-        }
-      }
-    }
-  }
-}>
+import type { ReportDetailWithRelations } from '@/types/report'
 
 interface ReportViewTableProps {
   report: ReportDetailWithRelations

package/templates/starter/src/app/(base)/reports/test-cases/page.tsx

@@ -22,7 +22,7 @@ const TestCasesMetricsReport = async ({ searchParams }: { searchParams: Promise<
           <div>
             <PageHeader>
               <span className="flex items-center">
-                <Code className="mr-2 h-8 w-8" />
+                <Code className="mr-2 size-8" />
                 Failing Test Cases Report
               </span>
             </PageHeader>