create-appraise 0.1.0

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

@@ -0,0 +1,59 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import React from 'react'
+import { Server } from 'lucide-react'
+import EnvironmentTable from './environment-table'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { Environment } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Environments',
+  description: 'Manage test environments and their configurations',
+}
+
+const Environments = async () => {
+  const { data: environments, error: environmentsError } = await getAllEnvironmentsAction()
+
+  if (environmentsError) {
+    return <div>Error: {environmentsError}</div>
+  }
+
+  const environmentsData = environments as Environment[]
+
+  if (!environmentsData || environmentsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<Server className="h-8 w-8" />}
+          title="No environments found"
+          description="Get started by creating an environment to manage your test configurations"
+          createRoute="/environments/create"
+          createText="Create Environment"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Server className="mr-2 h-8 w-8" />
+            Environments
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Manage test environments and their configurations</HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <EnvironmentTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default Environments

package/templates/default/src/app/(base)/layout.tsx

@@ -0,0 +1,10 @@
+/**
+ * All (base) routes depend on server data (Prisma). Force dynamic rendering
+ * so these pages are not statically generated at build time (e.g. in CI where
+ * no database is available).
+ */
+export const dynamic = 'force-dynamic'
+
+export default function BaseLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}

package/templates/default/src/app/(base)/locator-groups/create/page.tsx

@@ -0,0 +1,44 @@
+import { createLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import { Group } from 'lucide-react'
+import React from 'react'
+import LocatorGroupForm from '../locator-group-form'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { Module } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Locator Group',
+  description: 'Create a new locator group',
+}
+
+const CreateLocatorGroup = async () => {
+  const { data: moduleList, error: moduleListError } = await getAllModulesAction()
+
+  if (moduleListError) {
+    return <div>Error: {moduleListError}</div>
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Group className="mr-2 h-8 w-8" />
+            Create Locator Group
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>Create a new locator group.</HeaderSubtitle>
+      </div>
+      <LocatorGroupForm
+        moduleList={moduleList as Module[]}
+        onSubmitAction={createLocatorGroupAction}
+        successTitle="Locator Group Created"
+        successMessage="The locator group has been created successfully."
+      />
+    </>
+  )
+}
+
+export default CreateLocatorGroup

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

@@ -0,0 +1,215 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { formOpts, LocatorGroup } from '@/constants/form-opts/locator-group-form-opts'
+import { toast } from '@/hooks/use-toast'
+import { ActionResponse } from '@/types/form/actionHandler'
+import { useForm } from '@tanstack/react-form'
+import React, { useCallback, useRef } from 'react'
+import { z } from 'zod'
+import { useRouter } from 'next/navigation'
+import { Module } from '@prisma/client'
+import { checkLocatorGroupNameUniqueAction } from '@/actions/locator-groups/locator-group-actions'
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+const LocatorGroupForm = ({
+  defaultValues,
+  successTitle,
+  successMessage,
+  id,
+  onSubmitAction,
+  moduleList,
+}: {
+  defaultValues?: LocatorGroup
+  successTitle: string
+  successMessage: string
+  moduleList: Module[]
+  id?: string
+  onSubmitAction: (
+    _prev: unknown,
+    value: LocatorGroup,
+    id?: string,
+  ) => Promise<ActionResponse>
+}) => {
+  const router = useRouter()
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  // Debounced function to check name uniqueness
+  const checkNameUniqueness = useCallback(
+    async (name: string) => {
+      if (!name || name.length < 1) return true
+
+      try {
+        const response = await checkLocatorGroupNameUniqueAction(name, id)
+        return response.status === 200 && (response.data as { isUnique: boolean })?.isUnique
+      } catch (error) {
+        console.error('Error checking name uniqueness:', error)
+        return true // Allow submission if check fails
+      }
+    },
+    [id],
+  )
+
+  // Debounced validation function
+  const debouncedNameValidation = useCallback(
+    (name: string): Promise<boolean> => {
+      return new Promise(resolve => {
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current)
+        }
+
+        debounceTimeoutRef.current = setTimeout(async () => {
+          const isValid = await checkNameUniqueness(name)
+          resolve(isValid)
+        }, 500) // 500ms debounce
+      })
+    },
+    [checkNameUniqueness],
+  )
+
+  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('/locator-groups')
+      }
+      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' }),
+          onChangeAsync: async ({ value }) => {
+            if (!value || value.length < 1) return undefined
+            const isValid = await debouncedNameValidation(value)
+            return isValid
+              ? undefined
+              : 'A locator group with this name already exists. Please choose a different name.'
+          },
+        }}
+      >
+        {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 group 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>
+                ))}
+              {field.state.meta.isTouched && field.state.meta.errors.length === 0 && field.state.meta.isValidating && (
+                <p className="text-xs text-blue-500">Checking name availability...</p>
+              )}
+            </div>
+          )
+        }}
+      </form.Field>
+      <form.Field
+        name="moduleId"
+        validators={{
+          onChange: z.string().min(1, { message: 'Module is required' }),
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Module</Label>
+              <Select value={field.state.value} onValueChange={value => field.handleChange(value)}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a module" />
+                </SelectTrigger>
+                <SelectContent>
+                  {moduleList.map(moduleData => (
+                    <SelectItem key={moduleData.id} value={moduleData.id}>
+                      {moduleData.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.Field
+        name="route"
+        validators={{
+          onChange: z.string().optional(),
+        }}
+      >
+        {field => {
+          return (
+            <div className="mb-4 flex flex-col gap-2 lg:w-1/3">
+              <Label htmlFor={field.name}>Route</Label>
+              <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={e => field.handleChange(e.target.value)}
+                placeholder="Enter the route of page the locator group is for. Default is '/' (root)"
+              />
+              {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 LocatorGroupForm

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

@@ -0,0 +1,77 @@
+'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 { LocatorGroup, Module } from '@prisma/client'
+import { formatDateTime } from '@/lib/utils'
+import { deleteLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
+import { Badge } from '@/components/ui/badge'
+
+export const locatorGroupTableCols: ColumnDef<LocatorGroup & { module: Module }>[] = [
+  {
+    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: 'module.name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Module" />,
+    cell: ({ row }) => {
+      const locatorGroup = row.original
+      return <Badge variant="outline">{locatorGroup.module?.name}</Badge>
+    },
+  },
+  {
+    accessorKey: 'route',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Route" />,
+  },
+  {
+    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 locatorGroup = row.original
+      return (
+        <TableActions
+          modifyLink={`/locator-groups/modify/${locatorGroup.id}`}
+          deleteHandler={() => deleteLocatorGroupAction([locatorGroup.id])}
+        />
+      )
+    },
+  },
+]

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

@@ -0,0 +1,28 @@
+import { deleteLocatorGroupAction, getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { DataTable } from '@/components/ui/data-table'
+import { LocatorGroup, Module } from '@prisma/client'
+import { locatorGroupTableCols } from './locator-group-table-columns'
+
+const LocatorGroupTable = async () => {
+  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
+
+  if (locatorGroupsError) {
+    return <div>Error: {locatorGroupsError}</div>
+  }
+
+  return (
+    <>
+      <DataTable
+        columns={locatorGroupTableCols}
+        data={locatorGroups as (LocatorGroup & { module: Module })[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/locator-groups/create"
+        modifyLink="/locator-groups/modify"
+        deleteAction={deleteLocatorGroupAction}
+      />
+    </>
+  )
+}
+
+export default LocatorGroupTable

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

@@ -0,0 +1,46 @@
+import { getLocatorGroupByIdAction } from '@/actions/locator-groups/locator-group-actions'
+import { LocatorGroup, Module } from '@prisma/client'
+import React from 'react'
+import LocatorGroupForm from '../../locator-group-form'
+import { updateLocatorGroupAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Locator Group',
+  description: 'Update locator group configuration',
+}
+
+const ModifyLocator = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const { data, error } = await getLocatorGroupByIdAction(id)
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+
+  const locatorGroup = data as LocatorGroup
+
+  const { data: moduleList, error: moduleListError } = await getAllModulesAction()
+
+  if (moduleListError) {
+    return <div>Error: {moduleListError}</div>
+  }
+
+  return (
+    <LocatorGroupForm
+      defaultValues={{
+        name: locatorGroup.name ?? '',
+        moduleId: locatorGroup.moduleId ?? '',
+        route: locatorGroup.route ?? '',
+      }}
+      successTitle="Locator Group updated"
+      successMessage="Locator Group updated successfully"
+      onSubmitAction={updateLocatorGroupAction}
+      id={id}
+      moduleList={moduleList as Module[]}
+    />
+  )
+}
+
+export default ModifyLocator

package/templates/default/src/app/(base)/locator-groups/page.tsx

@@ -0,0 +1,61 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import React from 'react'
+import { Group } from 'lucide-react'
+import LocatorGroupTable from './locator-group-table'
+import { Suspense } from 'react'
+import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import EmptyState from '@/components/data-state/empty-state'
+import { LocatorGroup } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Locator Groups',
+  description: 'Manage locator groups for organizing locators',
+}
+
+const LocatorGroups = async () => {
+  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
+
+  if (locatorGroupsError) {
+    return <div>Error: {locatorGroupsError}</div>
+  }
+
+  const locatorGroupsData = locatorGroups as LocatorGroup[]
+
+  if (!locatorGroupsData || locatorGroupsData.length === 0) {
+    return (
+      <div className="flex min-h-[calc(100vh-20rem)] items-center justify-center">
+        <EmptyState
+          icon={<Group className="h-8 w-8" />}
+          title="No locator groups found"
+          description="Get started by creating a locator group to organize your locators"
+          createRoute="/locator-groups/create"
+          createText="Create Locator Group"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>
+          <span className="flex items-center">
+            <Group className="mr-2 h-8 w-8" />
+            Locator Groups
+          </span>
+        </PageHeader>
+        <HeaderSubtitle>
+          Locator groups are used to group locators together. They are used to identify the elements on the page.
+        </HeaderSubtitle>
+      </div>
+      <Suspense fallback={<DataTableSkeleton />}>
+        <LocatorGroupTable />
+      </Suspense>
+    </>
+  )
+}
+
+export default LocatorGroups

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

@@ -0,0 +1,38 @@
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import React from 'react'
+import LocatorForm from '../locator-form'
+import { createLocatorAction } from '@/actions/locator/locator-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { LocatorGroup } from '@prisma/client'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Locator',
+  description: 'Create a new locator to be used in your test cases',
+}
+
+const CreateLocator = async () => {
+  const { data: locatorGroupList, error: locatorGroupListError } = await getAllLocatorGroupsAction()
+
+  if (locatorGroupListError) {
+    return <div>Error: {locatorGroupListError}</div>
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Create Locator</PageHeader>
+        <HeaderSubtitle>Create a new locator to be used in your test cases.</HeaderSubtitle>
+      </div>
+      <LocatorForm
+        successTitle="Locator created"
+        successMessage="Locator created successfully"
+        onSubmitAction={createLocatorAction}
+        locatorGroupList={locatorGroupList as LocatorGroup[]}
+      />
+    </>
+  )
+}
+
+export default CreateLocator