create-appraise 0.1.0

package/templates/default/src/app/(base)/template-step-groups/template-step-group-table-columns.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { TemplateStepGroup, TemplateStepGroupType } from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { deleteTemplateStepGroupAction } from '@/actions/template-step-group/template-step-group-actions'
+import { formatDateTime } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { CheckCheck, MousePointer2 } from 'lucide-react'
+
+export const templateStepGroupTableCols: ColumnDef<TemplateStepGroup>[] = [
+  {
+    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: 'description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
+  },
+  {
+    accessorKey: 'type',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Type" />,
+    cell: ({ row }) => {
+      const templateStepGroup = row.original
+      const icon =
+        templateStepGroup.type === TemplateStepGroupType.ACTION ? (
+          <MousePointer2 className="h-4 w-4" />
+        ) : (
+          <CheckCheck className="h-4 w-4" />
+        )
+      return (
+        <Badge variant="outline" className="flex w-fit items-center gap-1">
+          {icon}
+          {templateStepGroup.type.charAt(0).toUpperCase() + templateStepGroup.type.slice(1).toLowerCase()}
+        </Badge>
+      )
+    },
+  },
+  {
+    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 templateStepGroup = row.original
+      return (
+        <TableActions
+          modifyLink={`/template-step-groups/modify/${templateStepGroup.id}`}
+          deleteHandler={() => deleteTemplateStepGroupAction([templateStepGroup.id])}
+        />
+      )
+    },
+  },
+]

package/templates/default/src/app/(base)/template-step-groups/template-step-group-table.tsx

@@ -0,0 +1,32 @@
+import { DataTable } from '@/components/ui/data-table'
+import React from 'react'
+import { templateStepGroupTableCols } from './template-step-group-table-columns'
+import {
+  getAllTemplateStepGroupsAction,
+  deleteTemplateStepGroupAction,
+} from '@/actions/template-step-group/template-step-group-actions'
+import { TemplateStepGroup } from '@prisma/client'
+
+const TemplateStepGroupTable = async () => {
+  const { data: templateStepGroups, error: templateStepGroupsError } = await getAllTemplateStepGroupsAction()
+
+  if (templateStepGroupsError) {
+    return <div>Error: {templateStepGroupsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={templateStepGroupTableCols}
+        data={templateStepGroups as TemplateStepGroup[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/template-step-groups/create"
+        modifyLink="/template-step-groups/modify"
+        deleteAction={deleteTemplateStepGroupAction}
+      />
+    </>
+  )
+}
+
+export default TemplateStepGroupTable

package/templates/default/src/app/(base)/template-steps/create/page.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { TemplateStepForm } from '../template-step-form'
+import { createTemplateStepAction } from '@/actions/template-step/template-step-actions'
+import { getAllTemplateStepGroupsAction } from '@/actions/template-step-group/template-step-group-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Template Step',
+  description: 'Create a new template step to be used in test cases',
+}
+
+const CreateTemplateStep = async () => {
+  const { data: templateStepGroups, error: templateStepGroupsError } = await getAllTemplateStepGroupsAction()
+
+  if (templateStepGroupsError) {
+    return <div>Error: {templateStepGroupsError}</div>
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Template Step</PageHeader>
+        <HeaderSubtitle>Create a new template step to be used in test cases</HeaderSubtitle>
+      </div>
+      <TemplateStepForm
+        successTitle="Template Step Created"
+        successMessage="The template step has been created successfully"
+        onSubmitAction={createTemplateStepAction}
+        templateStepGroups={templateStepGroups as Array<{ id: string; name: string }>}
+      />
+    </>
+  )
+}
+
+export default CreateTemplateStep

package/templates/default/src/app/(base)/template-steps/modify/[id]/page.tsx

@@ -0,0 +1,49 @@
+import { updateTemplateStepAction } from '@/actions/template-step/template-step-actions'
+import { getTemplateStepByIdAction } from '@/actions/template-step/template-step-actions'
+import { TemplateStepForm } from '../../template-step-form'
+import { TemplateStep, TemplateStepParameter } from '@prisma/client'
+import { getAllTemplateStepGroupsAction } from '@/actions/template-step-group/template-step-group-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Template Step',
+  description: 'Update template step configuration',
+}
+
+export default async function ModifyTemplateStepPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const { data, error } = await getTemplateStepByIdAction(id)
+  const { data: templateStepGroups, error: templateStepGroupsError } = await getAllTemplateStepGroupsAction()
+
+  if (error || templateStepGroupsError) {
+    return <div>Error: {error || templateStepGroupsError}</div>
+  }
+
+  const templateStep = data as TemplateStep & {
+    parameters: TemplateStepParameter[]
+  }
+  return (
+    <TemplateStepForm
+      successTitle="Template step modified"
+      successMessage="The template step has been modified"
+      onSubmitAction={updateTemplateStepAction}
+      defaultValues={{
+        name: templateStep.name,
+        type: templateStep.type,
+        signature: templateStep.signature,
+        icon: templateStep.icon,
+        description: templateStep.description || '',
+        functionDefinition: templateStep.functionDefinition || '',
+        params: templateStep.parameters.map(param => ({
+          id: param.id,
+          name: param.name,
+          type: param.type,
+          order: param.order,
+        })),
+        templateStepGroupId: templateStep.templateStepGroupId || '',
+      }}
+      id={id}
+      templateStepGroups={templateStepGroups as Array<{ id: string; name: string }>}
+    />
+  )
+}

package/templates/default/src/app/(base)/template-steps/page.tsx

@@ -0,0 +1,59 @@
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import PageHeader from '@/components/typography/page-header'
+import React from 'react'
+import TemplateStepTable from './template-step-table'
+import { LayoutTemplate } from 'lucide-react'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllTemplateStepsAction } from '@/actions/template-step/template-step-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { TemplateStep } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Template Steps',
+  description: 'Manage template steps for reusable test steps',
+}
+
+const TemplateSteps = async () => {
+  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
+
+  if (templateStepsError) {
+    return <div>Error: {templateStepsError}</div>
+  }
+
+  const templateStepsData = templateSteps as TemplateStep[]
+
+  if (!templateStepsData || templateStepsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<LayoutTemplate className="h-8 w-8" />}
+          title="No template steps found"
+          description="Get started by creating a template step to define reusable test steps"
+          createRoute="/template-steps/create"
+          createText="Create Template Step"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <LayoutTemplate className="mr-2 h-8 w-8" />
+            Template Steps
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Template steps are the steps that are used to define a reusable test step</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <TemplateStepTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default TemplateSteps

package/templates/default/src/app/(base)/template-steps/paramChip.tsx

@@ -0,0 +1,213 @@
+'use client'
+
+import type React from 'react'
+
+import { useState, useEffect } from 'react'
+import { PlusCircle } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Badge } from '@/components/ui/badge'
+import { Label } from '@/components/ui/label'
+import { z } from 'zod'
+
+// Define the form schema
+const formSchema = z.object({
+  name: z.string().min(2, { message: 'Name must be at least 2 characters' }),
+  type: z.string().min(1, { message: 'Please select a type' }),
+  order: z.coerce.number().int().positive(),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
+// Define the item type
+type Param = {
+  id: string
+  name: string
+  type: string
+  order: number
+}
+
+export default function ParamChip({
+  types,
+  onSubmit,
+  defaultValues,
+}: {
+  types: string[]
+  onSubmit: (value: Param[]) => void
+  defaultValues?: Param[]
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [items, setItems] = useState<Param[]>(defaultValues || [])
+  // Sync items when defaultValues changes (defer setState to avoid sync setState in effect)
+  useEffect(() => {
+    queueMicrotask(() => setItems(defaultValues || []))
+  }, [defaultValues])
+
+  // Form state
+  const [formValues, setFormValues] = useState<FormValues>({
+    name: '',
+    type: '',
+    order: 1,
+  })
+
+  // Form errors
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  // Handle input change
+  const handleChange = (field: keyof FormValues, value: string) => {
+    setFormValues(prev => ({
+      ...prev,
+      [field]: field === 'order' ? Number(value) : value,
+    }))
+
+    // Clear error for this field when user types
+    if (errors[field]) {
+      setErrors(prev => {
+        const newErrors = { ...prev }
+        delete newErrors[field]
+        return newErrors
+      })
+    }
+  }
+
+  // Validate form
+  const validateForm = (): boolean => {
+    try {
+      formSchema.parse(formValues)
+      setErrors({})
+      return true
+    } catch (error) {
+      if (error instanceof z.ZodError) {
+        const newErrors: Record<string, string> = {}
+        error.errors.forEach(err => {
+          if (err.path[0]) {
+            newErrors[err.path[0] as string] = err.message
+          }
+        })
+        setErrors(newErrors)
+      }
+      return false
+    }
+  }
+
+  // Handle form submission
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (validateForm()) {
+      // Create a new item with the form values
+      const newItem = {
+        id: crypto.randomUUID(),
+        ...formValues,
+      }
+
+      // Add the new item to the items array
+      setItems([...items, newItem])
+
+      // Reset the form
+      setFormValues({
+        name: '',
+        type: '',
+        order: 1,
+      })
+
+      // Call the onSubmit callback with the new item
+      onSubmit([...items, newItem])
+
+      // Close the modal
+      setIsOpen(false)
+    }
+  }
+
+  // Handle removing an item
+  const removeItem = (id: string) => {
+    setItems(items.filter(item => item.id !== id))
+    onSubmit(items.filter(item => item.id !== id))
+  }
+
+  return (
+    <div className="space-y-6">
+      <Button type="button" onClick={() => setIsOpen(true)} variant="outline" size="icon">
+        <PlusCircle className="h-4 w-4" />
+      </Button>
+
+      {/* Display the added items as chips */}
+      <div className="flex flex-wrap gap-2">
+        {items.map(item => (
+          <Badge key={item.id} variant="secondary" className="px-3 py-1 text-sm">
+            {item.name}
+            <button
+              type="button"
+              className="ml-2 text-muted-foreground hover:text-foreground"
+              onClick={() => removeItem(item.id)}
+            >
+              ×
+            </button>
+          </Badge>
+        ))}
+        {items.length === 0 && <p className="text-sm text-muted-foreground">No items added yet.</p>}
+      </div>
+
+      {/* Modal with form */}
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Add New Item</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                value={formValues.name}
+                onChange={e => handleChange('name', e.target.value)}
+                placeholder="Enter name"
+              />
+              {errors.name && <p className="text-sm font-medium text-destructive">{errors.name}</p>}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="type">Type</Label>
+              <Select value={formValues.type} onValueChange={value => handleChange('type', value)}>
+                <SelectTrigger id="type">
+                  <SelectValue placeholder="Select a type" />
+                </SelectTrigger>
+                <SelectContent>
+                  {types.map(type => (
+                    <SelectItem key={type} value={type}>
+                      {type}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {errors.type && <p className="text-sm font-medium text-destructive">{errors.type}</p>}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="order">Order</Label>
+              <Input
+                id="order"
+                type="number"
+                min="1"
+                value={formValues.order}
+                onChange={e => handleChange('order', e.target.value)}
+              />
+              {errors.order && <p className="text-sm font-medium text-destructive">{errors.order}</p>}
+            </div>
+
+            <DialogFooter className="mt-4">
+              <Button type="button" variant="outline" onClick={() => setIsOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="button" onClick={handleSubmit}>
+                Save
+              </Button>
+            </DialogFooter>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}