create-appraise 0.1.0

package/templates/default/src/app/(base)/locators/locator-form.tsx

@@ -0,0 +1,163 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { formOpts, Locator } from '@/constants/form-opts/locator-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { ActionResponse } from '@/types/form/actionHandler'
+import { useForm } from '@tanstack/react-form'
+import React from 'react'
+import { z } from 'zod'
+import { LocatorGroup } from '@prisma/client'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { useRouter } from 'next/navigation'
+
+const LocatorForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  id,
+  locatorGroupList,
+  onSubmitAction,
+}: {
+  defaultValues?: Locator
+  successTitle: string
+  successMessage: string
+  locatorGroupList: LocatorGroup[]
+  id?: string
+  onSubmitAction: (_prev: unknown, value: Locator, id?: string) => Promise<ActionResponse>
+}) => {
+  const router = useRouter()
+  const form = useForm({
+    defaultValues: defaultValues ?? formOpts?.defaultValues,
+    validators: formOpts?.validators,
+    onSubmit: async ({ value }) => {
+      const res = await onSubmitAction(undefined, value, id)
+      if (res.status === 200) {
+        toast({
+          title: successTitle,
+          description: successMessage,
+        })
+        router.push('/locators')
+      }
+      if (res.status === 400) {
+        toast({
+          title: 'Error',
+          description: res.error,
+          variant: 'destructive',
+        })
+      }
+      if (res.status === 500) {
+        toast({
+          title: 'Error',
+          description: res.error,
+          variant: 'destructive',
+        })
+      }
+    },
+  })
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="name"
+        validators={{
+          onChange: z.string().min(1, { message: 'Name is required' }),
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Name</Label>
+              <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+                placeholder="Enter locator name"
+              />
+              {field.state.meta.isTouched &&
+                field.state.meta.errors.map((error, index) => (
+                  <p key={index} className="text-xs text-pink-500">
+                    {typeof error === 'string' ? error : error?.message || String(error)}
+                  </p>
+                ))}
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field
+        name="value"
+        validators={{
+          onChange: z.string().min(1, { message: 'Value is required' }),
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Value</Label>
+              <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+                placeholder="CSS or XPath Selector"
+              />
+              {field.state.meta.isTouched &&
+                field.state.meta.errors.map((error, index) => (
+                  <p key={index} className="text-xs text-pink-500">
+                    {typeof error === 'string' ? error : error?.message || String(error)}
+                  </p>
+                ))}
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field
+        name="locatorGroupId"
+        validators={{
+          onChange: z.string().min(1, { message: 'Locator group is required' }),
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Locator Group</Label>
+              <Select value={field.state.value} onValueChange={value => field.handleChange(value)}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a locator group" />
+                </SelectTrigger>
+                <SelectContent>
+                  {locatorGroupList.map(locatorGroup => (
+                    <SelectItem key={locatorGroup.id} value={locatorGroup.id}>
+                      {locatorGroup.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {field.state.meta.isTouched &&
+                field.state.meta.errors.map((error, index) => (
+                  <p key={index} className="text-xs text-pink-500">
+                    {typeof error === 'string' ? error : error?.message || String(error)}
+                  </p>
+                ))}
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
+        {([canSubmit, isSubmitting]) => (
+          <Button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Save'}
+          </Button>
+        )}
+      </form.Subscribe>
+    </form>
+  )
+}
+
+export default LocatorForm

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

@@ -0,0 +1,90 @@
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { Locator, LocatorGroup, ConflictResolution } from '@prisma/client'
+import { deleteLocatorAction } from '@/actions/locator/locator-actions'
+import { formatDateTime } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { resolveConflictsAction } from '@/actions/conflict/conflict.action'
+
+export const locatorTableCols: ColumnDef<Locator & { locatorGroup: LocatorGroup; conflicts: ConflictResolution[] }>[] =
+  [
+    {
+      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" />,
+      cell: ({ row }) => {
+        const locator = row.original
+        const hasConflicts = locator.conflicts && locator.conflicts.length > 0
+        return (
+          <div className="flex items-center gap-2">
+            <span>{locator.name}</span>
+            {hasConflicts && (
+              <Badge variant="destructive" className="text-xs">
+                Conflict
+              </Badge>
+            )}
+          </div>
+        )
+      },
+    },
+    {
+      accessorKey: 'value',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Value" />,
+    },
+    {
+      accessorKey: 'locatorGroup.name',
+      header: ({ column }) => <DataTableColumnHeader column={column} title="Locator Group" />,
+    },
+    {
+      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])}
+            resolveConflictsHandler={() => resolveConflictsAction([locator.id])}
+          />
+        )
+      },
+    },
+  ]

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

@@ -0,0 +1,28 @@
+import { deleteLocatorAction, getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { locatorTableCols } from './locator-table-columns'
+import { Locator, LocatorGroup, ConflictResolution } from '@prisma/client'
+
+const LocatorTable = async () => {
+  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
+
+  if (locatorsError) {
+    return <div>Error: {locatorsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={locatorTableCols}
+        data={locators as (Locator & { locatorGroup: LocatorGroup; conflicts: ConflictResolution[] })[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/locators/create"
+        modifyLink="/locators/modify"
+        deleteAction={deleteLocatorAction}
+      />
+    </>
+  )
+}
+
+export default LocatorTable

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

@@ -0,0 +1,45 @@
+import { getLocatorByIdAction, updateLocatorAction } from '@/actions/locator/locator-actions'
+import { Locator, LocatorGroup } from '@prisma/client'
+import React from 'react'
+import LocatorForm from '../../locator-form'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Locator',
+  description: 'Update locator configuration',
+}
+
+const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data, error } = await getLocatorByIdAction(id)
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+
+  const locator = data as Locator & { locatorGroup: LocatorGroup }
+
+  const { data: locatorGroupList, error: locatorGroupListError } = await getAllLocatorGroupsAction()
+
+  if (locatorGroupListError) {
+    return <div>Error: {locatorGroupListError}</div>
+  }
+
+  return (
+    <LocatorForm
+      defaultValues={{
+        name: locator.name ?? '',
+        value: locator.value ?? '',
+        locatorGroupId: locator.locatorGroupId ?? '',
+      }}
+      successTitle="Locator updated"
+      successMessage="Locator updated successfully"
+      onSubmitAction={updateLocatorAction}
+      id={id}
+      locatorGroupList={locatorGroupList as LocatorGroup[]}
+    />
+  )
+}
+
+export default ModifyLocator

package/templates/default/src/app/(base)/locators/page.tsx

@@ -0,0 +1,65 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import React from 'react'
+import { Code } from 'lucide-react'
+import LocatorTable from './locator-table'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { Locator, LocatorGroup } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Locators',
+  description: 'Manage locators for identifying elements on pages',
+}
+
+const Locators = async () => {
+  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
+
+  if (locatorsError) {
+    return <div>Error: {locatorsError}</div>
+  }
+
+  const locatorsData = locators as (Locator & { locatorGroup: LocatorGroup })[]
+
+  if (!locatorsData || locatorsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<Code className="h-8 w-8" />}
+          title="No locators found"
+          description="Get started by creating a locator to identify elements on your pages"
+          createRoute="/locators/create"
+          createText="Create Locator"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <div className="flex items-center justify-between">
+          <div>
+            <PageHeader>
+              <span className="flex items-center">
+                <Code className="mr-2 h-8 w-8" />
+                Locators
+              </span>
+            </PageHeader>
+            <HeaderSubtitle>
+              Locators are the elements that are used to identify the elements on the page
+            </HeaderSubtitle>
+          </div>
+        </div>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <LocatorTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default Locators

package/templates/default/src/app/(base)/locators/sync-locators-button.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { RefreshCw } from 'lucide-react'
+import { useState } from 'react'
+import { syncLocatorsFromFilesAction } from '@/actions/locator/locator-actions'
+import { toast } from '@/hooks/use-toast'
+import { useRouter } from 'next/navigation'
+
+export function SyncLocatorsButton() {
+  const [isLoading, setIsLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSync = async () => {
+    setIsLoading(true)
+    try {
+      const result = await syncLocatorsFromFilesAction()
+
+      if (result.status === 200 && result.data) {
+        const { synced, conflicts, errors } = result.data as {
+          synced: number
+          conflicts: number
+          errors: string[]
+        }
+
+        if (errors.length > 0) {
+          toast({
+            variant: 'destructive',
+            title: 'Sync completed with errors',
+            description: `Synced ${synced} locators, ${conflicts} conflicts detected. ${errors.length} error(s) occurred.`,
+          })
+        } else {
+          toast({
+            title: 'Sync completed successfully',
+            description: `Synced ${synced} locators, ${conflicts} conflicts detected.`,
+          })
+        }
+
+        // Refresh the page to show updated data
+        router.refresh()
+      } else {
+        toast({
+          variant: 'destructive',
+          title: 'Sync failed',
+          description: result.error || 'An error occurred during sync',
+        })
+      }
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Sync failed',
+        description: `An error occurred: ${error}`,
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Button onClick={handleSync} disabled={isLoading} variant="outline">
+      <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+      {isLoading ? 'Syncing...' : 'Sync Locators'}
+    </Button>
+  )
+}
+

package/templates/default/src/app/(base)/modules/create/page.tsx

@@ -0,0 +1,34 @@
+import { createModuleAction, getAllModulesAction } from '@/actions/modules/module-actions'
+import ModuleForm from '../module-form'
+import { Module } from '@prisma/client'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Module',
+  description: 'Create a new module to be used in your test cases',
+}
+
+const CreateModule = async () => {
+  const { data: modules } = await getAllModulesAction()
+
+  const parentOptions = (Array.isArray(modules) ? modules : []) as (Module & { parent: { name: string } })[]
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Module</PageHeader>
+        <HeaderSubtitle>Create a new module to be used in your test cases.</HeaderSubtitle>
+      </div>
+      <ModuleForm
+        parentOptions={parentOptions}
+        successTitle="Module created"
+        successMessage="Module created successfully"
+        onSubmitAction={createModuleAction}
+      />
+    </>
+  )
+}
+
+export default CreateModule

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

@@ -0,0 +1,46 @@
+import { getAllModulesAction, getModuleByIdAction, updateModuleAction } from '@/actions/modules/module-actions'
+import { Module } from '@prisma/client'
+import ModuleForm from '../../module-form'
+import { ROOT_MODULE_UUID } from '@/constants/form-opts/module-form-opts'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Module',
+  description: 'Update module configuration',
+}
+
+const ModifyModule = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data: moduleToBeEditedData, error: moduleToBeEditedError } = await getModuleByIdAction(id)
+
+  const { data: modulesData, error: modulesError } = await getAllModulesAction()
+
+  if (moduleToBeEditedError || modulesError) {
+    return <div>Error: {moduleToBeEditedError || modulesError}</div>
+  }
+
+  const moduleData = moduleToBeEditedData as Module & {
+    parent: { name: string }
+  }
+
+  const modulesList = Array.isArray(modulesData) ? modulesData : []
+  const parentOptions = (modulesList as (Module & { parent: { name: string } })[]).filter(
+    (module: Module & { parent: { name: string } }) => module.id !== moduleData.id,
+  ) as (Module & { parent: { name: string } })[]
+
+  return (
+    <ModuleForm
+      id={id}
+      defaultValues={{
+        name: moduleData.name,
+        parentId: moduleData.parentId ?? ROOT_MODULE_UUID,
+      }}
+      successTitle="Module updated"
+      successMessage="Module updated successfully"
+      parentOptions={parentOptions}
+      onSubmitAction={updateModuleAction}
+    />
+  )
+}
+
+export default ModifyModule

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

@@ -0,0 +1,126 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { formOpts, type Module, ROOT_MODULE_UUID } from '@/constants/form-opts/module-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { ActionResponse } from '@/types/form/actionHandler'
+import { useForm } from '@tanstack/react-form'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+import { z } from 'zod'
+
+const ModuleForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  parentOptions = [],
+  id,
+  onSubmitAction,
+}: {
+  defaultValues?: Module
+  successTitle: string
+  successMessage: string
+  parentOptions?: { id: string; name: string }[]
+  id?: string
+  onSubmitAction: (_prev: unknown, value: Module, id?: string) => Promise<ActionResponse>
+}) => {
+  const router = useRouter()
+  const options = Array.isArray(parentOptions) ? parentOptions : []
+  const form = useForm({
+    defaultValues: defaultValues ?? formOpts?.defaultValues,
+    validators: formOpts?.validators,
+    onSubmit: async ({ value }) => {
+      const res = await onSubmitAction(undefined, value, id)
+      if (res.status === 200) {
+        toast({
+          title: successTitle,
+          description: successMessage,
+        })
+        router.push('/modules')
+      }
+      if (res.status === 400) {
+        toast({
+          title: 'Error',
+          description: res.error,
+          variant: 'destructive',
+        })
+      }
+      if (res.status === 500) {
+        toast({
+          title: 'Error',
+          description: res.error,
+          variant: 'destructive',
+        })
+      }
+    },
+  })
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.Field
+        name="name"
+        validators={{
+          onChange: z.string().min(1, { message: 'Name is required' }),
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Name</Label>
+              <Input id={field.name} value={field.state.value} onChange={e => field.handleChange(e.target.value)} />
+              {field.state.meta.isTouched &&
+                field.state.meta.errors.map((error, index) => (
+                  <p key={index} className="text-xs text-pink-500">
+                    {typeof error === 'string' ? error : error?.message || String(error)}
+                  </p>
+                ))}
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field name="parentId">
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Parent</Label>
+              <Select value={field.state.value || ROOT_MODULE_UUID} onValueChange={value => field.handleChange(value)}>
+                <SelectTrigger>
+                  <SelectValue
+                    placeholder={options.length === 0 ? 'No parent modules available' : 'Select a parent or Root'}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ROOT_MODULE_UUID}>Root (No Parent)</SelectItem>
+                  {options.length > 0
+                    ? options.map(option => (
+                        <SelectItem key={option.id} value={option.id}>
+                          {option.name}
+                        </SelectItem>
+                      ))
+                    : null}
+                </SelectContent>
+              </Select>
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Subscribe selector={formState => [formState.canSubmit, formState.isSubmitting]}>
+        {([canSubmit, isSubmitting]) => (
+          <Button type="submit" disabled={!canSubmit}>
+            {isSubmitting ? '...' : 'Save'}
+          </Button>
+        )}
+      </form.Subscribe>
+    </form>
+  )
+}
+
+export default ModuleForm