create-appraisejs 0.1.6 → 0.1.8-alpha

package/templates/default/src/app/(base)/reports/duration-chart.tsx

@@ -1,33 +1,33 @@
-'use client'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
-
-export default function DurationChart({
-  config,
-  data,
-}: {
-  config: ChartConfig
-  data: Array<{ feature: string; duration: number }>
-}) {
-  return (
-    <>
-      <p className="mb-6 mt-2 text-center text-xs text-muted-foreground">Duration by Feature(Seconds)</p>
-      <ChartContainer config={config} className="min-h-[300px] w-full">
-        <BarChart
-          accessibilityLayer
-          data={data}
-          layout="vertical"
-          margin={{
-            left: 5,
-          }}
-        >
-          <YAxis dataKey="feature" type="category" tickLine={false} tickMargin={10} axisLine={false} width={100} />
-          <XAxis dataKey="duration" type="number" hide />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          <Bar dataKey="duration" fill="oklch(54.6% 0.245 262.881)" />
-        </BarChart>
-      </ChartContainer>
-    </>
-  )
-}
+'use client'
+
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+
+export default function DurationChart({
+  config,
+  data,
+}: {
+  config: ChartConfig
+  data: Array<{ feature: string; duration: number }>
+}) {
+  return (
+    <>
+      <p className="mb-6 mt-2 text-center text-xs text-muted-foreground">Duration by Feature(Seconds)</p>
+      <ChartContainer config={config} className="min-h-[300px] w-full">
+        <BarChart
+          accessibilityLayer
+          data={data}
+          layout="vertical"
+          margin={{
+            left: 5,
+          }}
+        >
+          <YAxis dataKey="feature" type="category" tickLine={false} tickMargin={10} axisLine={false} width={100} />
+          <XAxis dataKey="duration" type="number" hide />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Bar dataKey="duration" fill="oklch(54.6% 0.245 262.881)" />
+        </BarChart>
+      </ChartContainer>
+    </>
+  )
+}

package/templates/default/src/app/(base)/reports/feature-chart.tsx

@@ -1,78 +1,78 @@
-'use client'
-
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { Bar, BarChart, XAxis, YAxis } from 'recharts'
-
-interface FeatureChartProps {
-  config: ChartConfig
-  data: Array<{
-    feature: string
-    passed: number
-    failed: number
-    cancelled: number
-    unknown: number
-    total: number
-  }>
-}
-
-export default function FeatureChart({ config, data }: FeatureChartProps) {
-  // Calculate height based on number of items (each bar needs ~40px)
-  // Set a maximum height to prevent bars from becoming too thick when there are few items
-  const barHeight = 40
-  const maxHeight = 300 // Maximum height to prevent bars from becoming too thick
-  const calculatedHeight = data.length * barHeight
-  const minHeight = Math.min(Math.max(calculatedHeight, 200), maxHeight) // Cap at maxHeight
-
-  return (
-    <>
-      <p className="mb-6 mt-2 text-center text-xs text-muted-foreground">Results by Feature</p>
-      <ChartContainer
-        config={config}
-        className="min-h-[200px] w-full"
-        style={{ minHeight: `${minHeight}px`, maxHeight: `${maxHeight}px` }}
-      >
-        <BarChart
-          accessibilityLayer
-          data={data}
-          layout="vertical"
-          barCategoryGap="20%"
-          margin={{
-            left: 5,
-          }}
-        >
-          <YAxis dataKey="feature" type="category" tickLine={false} tickMargin={10} axisLine={false} width={100} />
-          <XAxis dataKey="total" type="number" hide />
-          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-          <Bar
-            dataKey="passed"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['passed']?.color as string}
-            stroke="none"
-          />
-          <Bar
-            dataKey="failed"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['failed']?.color as string}
-            stroke="none"
-          />
-          <Bar
-            dataKey="cancelled"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['cancelled']?.color as string}
-            stroke="none"
-          />
-          <Bar
-            dataKey="unknown"
-            stackId="scenarios"
-            radius={[0, 0, 0, 0]}
-            fill={config['unknown']?.color as string}
-            stroke="none"
-          />
-        </BarChart>
-      </ChartContainer>
-    </>
-  )
-}
+'use client'
+
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+
+interface FeatureChartProps {
+  config: ChartConfig
+  data: Array<{
+    feature: string
+    passed: number
+    failed: number
+    cancelled: number
+    unknown: number
+    total: number
+  }>
+}
+
+export default function FeatureChart({ config, data }: FeatureChartProps) {
+  // Calculate height based on number of items (each bar needs ~40px)
+  // Set a maximum height to prevent bars from becoming too thick when there are few items
+  const barHeight = 40
+  const maxHeight = 300 // Maximum height to prevent bars from becoming too thick
+  const calculatedHeight = data.length * barHeight
+  const minHeight = Math.min(Math.max(calculatedHeight, 200), maxHeight) // Cap at maxHeight
+
+  return (
+    <>
+      <p className="mb-6 mt-2 text-center text-xs text-muted-foreground">Results by Feature</p>
+      <ChartContainer
+        config={config}
+        className="min-h-[200px] w-full"
+        style={{ minHeight: `${minHeight}px`, maxHeight: `${maxHeight}px` }}
+      >
+        <BarChart
+          accessibilityLayer
+          data={data}
+          layout="vertical"
+          barCategoryGap="20%"
+          margin={{
+            left: 5,
+          }}
+        >
+          <YAxis dataKey="feature" type="category" tickLine={false} tickMargin={10} axisLine={false} width={100} />
+          <XAxis dataKey="total" type="number" hide />
+          <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+          <Bar
+            dataKey="passed"
+            stackId="scenarios"
+            radius={[0, 0, 0, 0]}
+            fill={config['passed']?.color as string}
+            stroke="none"
+          />
+          <Bar
+            dataKey="failed"
+            stackId="scenarios"
+            radius={[0, 0, 0, 0]}
+            fill={config['failed']?.color as string}
+            stroke="none"
+          />
+          <Bar
+            dataKey="cancelled"
+            stackId="scenarios"
+            radius={[0, 0, 0, 0]}
+            fill={config['cancelled']?.color as string}
+            stroke="none"
+          />
+          <Bar
+            dataKey="unknown"
+            stackId="scenarios"
+            radius={[0, 0, 0, 0]}
+            fill={config['unknown']?.color as string}
+            stroke="none"
+          />
+        </BarChart>
+      </ChartContainer>
+    </>
+  )
+}

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

@@ -1,46 +1,46 @@
-'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)
-  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)
+  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/default/src/app/(base)/reports/page.tsx

@@ -1,98 +1,98 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import { FileCheck } from 'lucide-react'
-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
-          }
-        }
-      }
-    }
-  }
-}>
-
-export const metadata: Metadata = {
-  title: 'Appraise | Reports',
-  description: 'Manage reports for test runs',
-}
-
-const Reports = 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>
-  }
-
-  if (!reports || reports.length === 0) {
-    return (
-      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
-        <EmptyState
-          icon={<FileCheck className="h-8 w-8" />}
-          title="No reports found"
-          description="Get started by creating a test run to generate reports"
-          createRoute="/test-runs/create"
-          createText="Create Test Run"
-        />
-      </div>
-    )
-  }
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>
-          <span className="flex items-center">
-            <FileCheck className="mr-2 h-8 w-8" />
-            Reports
-          </span>
-        </PageHeader>
-        <HeaderSubtitle>Reports are the reports of the test runs.</HeaderSubtitle>
-      </div>
-      <ReportTable />
-    </>
-  )
-}
-
-export default Reports
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { FileCheck } from 'lucide-react'
+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
+          }
+        }
+      }
+    }
+  }
+}>
+
+export const metadata: Metadata = {
+  title: 'Appraise | Reports',
+  description: 'Manage reports for test runs',
+}
+
+const Reports = 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>
+  }
+
+  if (!reports || reports.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<FileCheck className="h-8 w-8" />}
+          title="No reports found"
+          description="Get started by creating a test run to generate reports"
+          createRoute="/test-runs/create"
+          createText="Create Test Run"
+        />
+      </div>
+    )
+  }
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <FileCheck className="mr-2 h-8 w-8" />
+            Reports
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Reports are the reports of the test runs.</HeaderSubtitle>
+      </div>
+      <ReportTable />
+    </>
+  )
+}
+
+export default Reports

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

@@ -1,16 +1,16 @@
-import { Card, CardTitle, CardContent, CardHeader } from '@/components/ui/card'
-
-const ReportMetricCard = ({ title, value }: { title: string; value: string }) => {
-  return (
-    <Card className="min-w-60 shadow-none dark:border-none">
-      <CardHeader>
-        <CardTitle className="text-lg font-normal text-gray-400">{title}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold text-primary">{value}</div>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default ReportMetricCard
+import { Card, CardTitle, CardContent, CardHeader } from '@/components/ui/card'
+
+const ReportMetricCard = ({ title, value }: { title: string; value: string }) => {
+  return (
+    <Card className="min-w-60 shadow-none dark:border-none">
+      <CardHeader>
+        <CardTitle className="text-lg font-normal text-gray-400">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold text-primary">{value}</div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ReportMetricCard