create-appraisejs 0.3.1-alpha.0 → 0.4.0-alpha.0

package/templates/starter/src/app/(base)/locators/locator-table-columns.tsx

@@ -9,66 +9,65 @@ import { deleteLocatorAction } from '@/actions/locator/locator-actions'
 import { formatDateTime } from '@/lib/utils'
 import type { LocatorTableRow } from './locator-helpers'
 
-export const locatorTableCols: ColumnDef<LocatorTableRow>[] =
-  [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <Checkbox
-          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-          onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="Select all"
-          className="mr-2"
-        />
-      ),
-      cell: ({ row }) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={value => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="mr-2"
-        />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-    },
-    {
-      accessorKey: 'name',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-    },
-    {
-      accessorKey: 'value',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Value" />,
+export const locatorTableCols: ColumnDef<LocatorTableRow>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'value',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Value" />,
+  },
+  {
+    accessorKey: 'locatorGroup.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Locator Group" />,
+    cell: ({ row }) => row.original.locatorGroup?.name ?? '-',
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.createdAt)
     },
-    {
-      accessorKey: 'locatorGroup.name',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Locator Group" />,
-      cell: ({ row }) => row.original.locatorGroup?.name ?? '-',
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.updatedAt)
     },
-    {
-      accessorKey: 'createdAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
-      cell: ({ row }) => {
-        return formatDateTime(row.original.createdAt)
-      },
-    },
-    {
-      accessorKey: 'updatedAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
-      cell: ({ row }) => {
-        return formatDateTime(row.original.updatedAt)
-      },
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => {
-        const locator = row.original
-        return (
-          <TableActions
-            modifyLink={`/locators/modify/${locator.id}`}
-            deleteHandler={() => deleteLocatorAction([locator.id])}
-          />
-        )
-      },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const locator = row.original
+      return (
+        <TableActions
+          modifyLink={`/locators/modify/${locator.id}`}
+          deleteHandler={() => deleteLocatorAction([locator.id])}
+        />
+      )
     },
-  ]
+  },
+]

package/templates/starter/src/app/(base)/modules/module-form.tsx

@@ -8,6 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { moduleFormOpts, type Module, ROOT_MODULE_UUID } from '@/constants/form-opts/module-form-opts'
 import { toast } from '@/hooks/use-toast'
 import { useForm } from '@tanstack/react-form'
+import { Save } from 'lucide-react'
 import { TanStackForm } from '@/lib/form/tanstack-form'
 import { useRouter } from 'next/navigation'
 import {
@@ -143,7 +144,8 @@ const ModuleForm = ({
       <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
         {([canSubmit, isSubmitting]) => (
           <Button type="submit" disabled={!canSubmit}>
-            {isSubmitting ? '...' : 'Save'}
+            <Save className="size-4" aria-hidden />
+            <span className="font-bold">{isSubmitting ? '...' : 'Save'}</span>
           </Button>
         )}
       </form.Subscribe>

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/test-cases/test-cases-metric-table-columns.tsx

@@ -1,115 +1,114 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { ColumnDef } from '@tanstack/react-table'
-import TableActions from '@/components/table/table-actions'
-import { Tag, TestCase, TestCaseMetrics } from '@prisma/client'
-import { deleteTestCaseAction } from '@/actions/test-case/test-case-actions'
-import { formatDateTime } from '@/lib/utils'
-import { Checkbox } from '@/components/ui/checkbox'
-
-export const testCasesMetricTableCols: ColumnDef<TestCaseMetrics & { testCase: TestCase & { tags: Tag[] } }>[] =
-  [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <Checkbox
-          checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-          onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="Select all"
-          className="mr-2"
-        />
-      ),
-      cell: ({ row }) => (
-        <Checkbox
-          checked={row.getIsSelected()}
-          onCheckedChange={value => row.toggleSelected(!!value)}
-          aria-label="Select row"
-          className="mr-2"
-        />
-      ),
-      enableSorting: false,
-      enableHiding: false,
-    },
-    {
-      id: 'testCase.title',
-      accessorKey: 'testCase.title',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Title" />,
-      cell: ({ row }) => {
-        const testCase = row.original.testCase
-        return <div>{testCase.title}</div>
-      },
-    },
-    {
-      accessorKey: 'testCase.description',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Description" />,
-      cell: ({ row }) => {
-        const testCase = row.original.testCase
-        return <div>{testCase.description}</div>
-      },
-    },
-    {
-      accessorKey: 'consecutiveFailures',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Consecutive Failures" />,
-    },
-    {
-      accessorKey: 'failureRate',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Failure Rate" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{((testCaseMetrics.failureRate as number) * 100).toFixed(2)}%</div>
-      },
-    },
-    {
-      accessorKey: 'totalRecentRuns',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Total Recent Runs" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.totalRecentRuns}</div>
-      },
-    },
-    {
-      accessorKey: 'failedRecentRuns',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Failed Recent Runs" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.failedRecentRuns}</div>
-      },
-    },
-    {
-      accessorKey: 'lastExecutedAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.lastExecutedAt ? formatDateTime(testCaseMetrics.lastExecutedAt) : '-'}</div>
-      },
-    },
-    {
-      accessorKey: 'lastFailedAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Failed At" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.lastFailedAt ? formatDateTime(testCaseMetrics.lastFailedAt) : '-'}</div>
-      },
-    },
-    {
-      accessorKey: 'lastPassedAt',
-      header: ({ column }) => <DataTableColumnHeader column={column} title="Last Passed At" />,
-      cell: ({ row }) => {
-        const testCaseMetrics = row.original
-        return <div>{testCaseMetrics.lastPassedAt ? formatDateTime(testCaseMetrics.lastPassedAt) : '-'}</div>
-      },
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => {
-        const testCaseId = row.original.testCaseId
-        return (
-          <TableActions
-            modifyLink={`/test-cases/modify/${testCaseId}`}
-            deleteHandler={() => deleteTestCaseAction([testCaseId])}
-          />
-        )
-      },
-    },
-  ]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+import TableActions from '@/components/table/table-actions'
+import { Tag, TestCase, TestCaseMetrics } from '@prisma/client'
+import { deleteTestCaseAction } from '@/actions/test-case/test-case-actions'
+import { formatDateTime } from '@/lib/utils'
+import { Checkbox } from '@/components/ui/checkbox'
+
+export const testCasesMetricTableCols: ColumnDef<TestCaseMetrics & { testCase: TestCase & { tags: Tag[] } }>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    id: 'testCase.title',
+    accessorKey: 'testCase.title',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Title" />,
+    cell: ({ row }) => {
+      const testCase = row.original.testCase
+      return <div>{testCase.title}</div>
+    },
+  },
+  {
+    accessorKey: 'testCase.description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Test Case Description" />,
+    cell: ({ row }) => {
+      const testCase = row.original.testCase
+      return <div>{testCase.description}</div>
+    },
+  },
+  {
+    accessorKey: 'consecutiveFailures',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Consecutive Failures" />,
+  },
+  {
+    accessorKey: 'failureRate',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Failure Rate" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{((testCaseMetrics.failureRate as number) * 100).toFixed(2)}%</div>
+    },
+  },
+  {
+    accessorKey: 'totalRecentRuns',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Total Recent Runs" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{testCaseMetrics.totalRecentRuns}</div>
+    },
+  },
+  {
+    accessorKey: 'failedRecentRuns',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Failed Recent Runs" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{testCaseMetrics.failedRecentRuns}</div>
+    },
+  },
+  {
+    accessorKey: 'lastExecutedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Executed At" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{testCaseMetrics.lastExecutedAt ? formatDateTime(testCaseMetrics.lastExecutedAt) : '-'}</div>
+    },
+  },
+  {
+    accessorKey: 'lastFailedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Failed At" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{testCaseMetrics.lastFailedAt ? formatDateTime(testCaseMetrics.lastFailedAt) : '-'}</div>
+    },
+  },
+  {
+    accessorKey: 'lastPassedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Passed At" />,
+    cell: ({ row }) => {
+      const testCaseMetrics = row.original
+      return <div>{testCaseMetrics.lastPassedAt ? formatDateTime(testCaseMetrics.lastPassedAt) : '-'}</div>
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const testCaseId = row.original.testCaseId
+      return (
+        <TableActions
+          modifyLink={`/test-cases/modify/${testCaseId}`}
+          deleteHandler={() => deleteTestCaseAction([testCaseId])}
+        />
+      )
+    },
+  },
+]

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

@@ -1,27 +1,27 @@
-import { DataTable } from '@/components/ui/data-table'
-import { testCasesMetricTableCols } from './test-cases-metric-table-columns'
-import { TestCaseMetrics, TestCase, Tag } from '@prisma/client'
-import { getAllTestCaseMetricsAction } from '@/actions/reports/report-actions'
-import { deleteTestCaseAction } from '@/actions/test-case/test-case-actions'
-
-const TestCasesMetricTable = async ({ filter }: { filter: 'repeatedlyFailing' | 'flaky' }) => {
-  const { data: testCaseMetrics, error: testCaseMetricsError } = await getAllTestCaseMetricsAction(filter)
-
-  if (testCaseMetricsError) {
-    return <div>Error: {testCaseMetricsError}</div>
-  }
-
-  return (
-    <>
-      <DataTable
-        columns={testCasesMetricTableCols}
-        data={testCaseMetrics as (TestCaseMetrics & { testCase: TestCase & { tags: Tag[] } })[]}
-        filterColumn="testCase.title"
-        filterPlaceholder="Filter by name..."
-        deleteAction={deleteTestCaseAction}
-      />
-    </>
-  )
-}
-
-export default TestCasesMetricTable
+import { DataTable } from '@/components/ui/data-table'
+import { testCasesMetricTableCols } from './test-cases-metric-table-columns'
+import { TestCaseMetrics, TestCase, Tag } from '@prisma/client'
+import { getAllTestCaseMetricsAction } from '@/actions/reports/report-actions'
+import { deleteTestCaseAction } from '@/actions/test-case/test-case-actions'
+
+const TestCasesMetricTable = async ({ filter }: { filter: 'repeatedlyFailing' | 'flaky' }) => {
+  const { data: testCaseMetrics, error: testCaseMetricsError } = await getAllTestCaseMetricsAction(filter)
+
+  if (testCaseMetricsError) {
+    return <div>Error: {testCaseMetricsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={testCasesMetricTableCols}
+        data={testCaseMetrics as (TestCaseMetrics & { testCase: TestCase & { tags: Tag[] } })[]}
+        filterColumn="testCase.title"
+        filterPlaceholder="Filter by name..."
+        deleteAction={deleteTestCaseAction}
+      />
+    </>
+  )
+}
+
+export default TestCasesMetricTable