create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/starter/src/components/test-suite/test-suite-picker-suite-row-header.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import { Checkbox } from '@/components/ui/checkbox'
+import { getFilterTags } from '@/lib/tag-filters'
+import type { TestSuitePickerRow, TestSuiteSelection } from '@/types/test-suite-picker'
+import type { CheckedState } from '@radix-ui/react-checkbox'
+import { ChevronDown, ChevronRight, FolderTree } from 'lucide-react'
+
+type TestSuitePickerSuiteRowHeaderProps = {
+  testSuite: TestSuitePickerRow
+  currentSelection: TestSuiteSelection | undefined
+  isExpanded: boolean
+  suiteCheckedState: CheckedState
+  childCount: number
+  selectionCount: number
+  onToggleExpand: (suiteId: string) => void
+  onSuiteSelection: (suite: TestSuitePickerRow, checked: boolean) => void
+}
+
+export function TestSuitePickerSuiteRowHeader({
+  testSuite,
+  currentSelection,
+  isExpanded,
+  suiteCheckedState,
+  childCount,
+  selectionCount,
+  onToggleExpand,
+  onSuiteSelection,
+}: TestSuitePickerSuiteRowHeaderProps) {
+  const suiteTags = getFilterTags(testSuite.tags)
+
+  return (
+    <div className="flex items-start gap-3 p-4">
+      <Checkbox
+        checked={suiteCheckedState}
+        onCheckedChange={checked => onSuiteSelection(testSuite, !!checked)}
+        disabled={childCount === 0}
+        aria-label={`Select suite ${testSuite.name}`}
+        className="mt-1"
+      />
+
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            className="inline-flex items-center gap-2 text-left"
+            onClick={() => onToggleExpand(testSuite.id)}
+          >
+            {isExpanded ? (
+              <ChevronDown className="size-4 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="size-4 text-muted-foreground" />
+            )}
+            <span className="font-semibold">{testSuite.name}</span>
+          </button>
+          <Badge variant="outline" className="gap-1">
+            <FolderTree className="size-3.5" />
+            {testSuite.module.name}
+          </Badge>
+          <Badge variant="secondary">{childCount} test cases</Badge>
+          {selectionCount > 0 && (
+            <Badge variant={currentSelection?.runAll ? 'default' : 'secondary'}>
+              {currentSelection?.runAll ? 'Full suite selected' : `${selectionCount} selected`}
+            </Badge>
+          )}
+        </div>
+
+        <p className="mt-2 text-sm text-muted-foreground">
+          {testSuite.description?.trim() || 'No description provided.'}
+        </p>
+
+        <div className="mt-3 flex flex-wrap gap-2">
+          {suiteTags.length > 0 ? (
+            suiteTags.map(tag => (
+              <Badge key={tag.id} variant="outline">
+                {tag.name}
+              </Badge>
+            ))
+          ) : (
+            <span className="text-xs text-muted-foreground">No filter tags</span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/starter/src/components/test-suite/test-suite-picker-suite-row.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { memo } from 'react'
+import type { TestSuitePickerRow, TestSuiteSelection } from '@/types/test-suite-picker'
+import type { CheckedState } from '@radix-ui/react-checkbox'
+
+import { TestSuitePickerSuiteRowHeader } from './test-suite-picker-suite-row-header'
+import { TestSuitePickerTestCaseList } from './test-suite-picker-test-case-list'
+
+type TestSuitePickerSuiteRowProps = {
+  testSuite: TestSuitePickerRow
+  currentSelection: TestSuiteSelection | undefined
+  isExpanded: boolean
+  onToggleExpand: (suiteId: string) => void
+  onSuiteSelection: (suite: TestSuitePickerRow, checked: boolean) => void
+  onChildSelection: (suite: TestSuitePickerRow, testCaseId: string, checked: boolean) => void
+}
+
+function TestSuitePickerSuiteRowInner({
+  testSuite,
+  currentSelection,
+  isExpanded,
+  onToggleExpand,
+  onSuiteSelection,
+  onChildSelection,
+}: TestSuitePickerSuiteRowProps) {
+  const childIds = testSuite.testCases.map(testCase => testCase.id)
+  const selectedChildIds = currentSelection?.runAll ? childIds : (currentSelection?.testCaseIds ?? [])
+  const selectionCount = selectedChildIds.length
+  const suiteCheckedState: CheckedState =
+    selectionCount === 0 ? false : selectionCount === childIds.length ? true : 'indeterminate'
+
+  return (
+    <div className="bg-background">
+      <TestSuitePickerSuiteRowHeader
+        testSuite={testSuite}
+        currentSelection={currentSelection}
+        isExpanded={isExpanded}
+        suiteCheckedState={suiteCheckedState}
+        childCount={childIds.length}
+        selectionCount={selectionCount}
+        onToggleExpand={onToggleExpand}
+        onSuiteSelection={onSuiteSelection}
+      />
+
+      {isExpanded ? (
+        <div className="bg-muted/20 border-t px-4 py-3">
+          <TestSuitePickerTestCaseList
+            testSuite={testSuite}
+            currentSelection={currentSelection}
+            onChildSelection={onChildSelection}
+          />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export const TestSuitePickerSuiteRow = memo(TestSuitePickerSuiteRowInner)
+
+TestSuitePickerSuiteRow.displayName = 'TestSuitePickerSuiteRow'

package/templates/starter/src/components/test-suite/test-suite-picker-test-case-list.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import { Checkbox } from '@/components/ui/checkbox'
+import { cn } from '@/lib/utils'
+import { getFilterTags } from '@/lib/tag-filters'
+import type { TestSuitePickerRow, TestSuiteSelection } from '@/types/test-suite-picker'
+
+type TestSuitePickerTestCaseListProps = {
+  testSuite: TestSuitePickerRow
+  currentSelection: TestSuiteSelection | undefined
+  onChildSelection: (suite: TestSuitePickerRow, testCaseId: string, checked: boolean) => void
+}
+
+function TestSuitePickerTestCaseRow({
+  testSuite,
+  testCase,
+  checked,
+  onChildSelection,
+}: {
+  testSuite: TestSuitePickerRow
+  testCase: TestSuitePickerRow['testCases'][number]
+  checked: boolean
+  onChildSelection: (suite: TestSuitePickerRow, testCaseId: string, checked: boolean) => void
+}) {
+  const testCaseTags = getFilterTags(testCase.tags)
+  const testCaseCheckboxId = `test-suite-${testSuite.id}-test-case-${testCase.id}`
+
+  return (
+    <label
+      htmlFor={testCaseCheckboxId}
+      className={cn('flex items-start gap-3 rounded-md border bg-background px-3 py-3', checked && 'border-primary/40')}
+    >
+      <Checkbox
+        id={testCaseCheckboxId}
+        checked={checked}
+        onCheckedChange={value => onChildSelection(testSuite, testCase.id, !!value)}
+        aria-label={`Select test case ${testCase.title}`}
+        className="mt-1"
+      />
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm font-medium">{testCase.title}</span>
+          <Badge variant="secondary">{testCase.steps.length} steps</Badge>
+        </div>
+        <p className="mt-1 text-xs text-muted-foreground">
+          {testCase.description?.trim() || 'No description provided.'}
+        </p>
+        <div className="mt-2 flex flex-wrap gap-2">
+          {testCaseTags.length > 0 ? (
+            testCaseTags.map(tag => (
+              <Badge key={tag.id} variant="outline">
+                {tag.name}
+              </Badge>
+            ))
+          ) : (
+            <span className="text-xs text-muted-foreground">No filter tags</span>
+          )}
+        </div>
+      </div>
+    </label>
+  )
+}
+
+export function TestSuitePickerTestCaseList({
+  testSuite,
+  currentSelection,
+  onChildSelection,
+}: TestSuitePickerTestCaseListProps) {
+  if (testSuite.testCases.length === 0) {
+    return (
+      <div className="rounded-md border border-dashed bg-background px-4 py-6 text-sm text-muted-foreground">
+        This suite has no test cases yet and cannot be selected.
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      {testSuite.testCases.map(testCase => {
+        const checked = currentSelection?.runAll || currentSelection?.testCaseIds.includes(testCase.id) || false
+
+        return (
+          <TestSuitePickerTestCaseRow
+            key={testCase.id}
+            testSuite={testSuite}
+            testCase={testCase}
+            checked={checked}
+            onChildSelection={onChildSelection}
+          />
+        )
+      })}
+    </div>
+  )
+}