create-appraisejs 0.2.0 → 0.3.0-alpha.1

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

@@ -1,46 +0,0 @@
-import { getEnvironmentByIdAction, updateEnvironmentAction } from '@/actions/environments/environment-actions'
-import { Environment } from '@prisma/client'
-import EnvironmentForm from '../../environment-form'
-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 | Modify Environment',
-  description: 'Update the environment configuration',
-}
-
-const ModifyEnvironment = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
-  const { data: environmentToBeEditedData, error: environmentToBeEditedError } = await getEnvironmentByIdAction(id)
-
-  if (environmentToBeEditedError) {
-    return <div>Error: {environmentToBeEditedError}</div>
-  }
-
-  const environmentData = environmentToBeEditedData as Environment
-
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Modify Environment</PageHeader>
-        <HeaderSubtitle>Update the environment configuration.</HeaderSubtitle>
-      </div>
-      <EnvironmentForm
-        id={id}
-        defaultValues={{
-          name: environmentData.name,
-          baseUrl: environmentData.baseUrl,
-          apiBaseUrl: environmentData.apiBaseUrl || '',
-          username: environmentData.username || '',
-          password: environmentData.password || '',
-        }}
-        successTitle="Environment updated"
-        successMessage="Environment updated successfully"
-        onSubmitAction={updateEnvironmentAction}
-      />
-    </>
-  )
-}
-
-export default ModifyEnvironment

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

@@ -1,59 +0,0 @@
-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

@@ -1,10 +0,0 @@
-/**
- * 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

@@ -1,44 +0,0 @@
-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

@@ -1,215 +0,0 @@
-'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 isEmpty={moduleList.length === 0}>
-                  {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

@@ -1,77 +0,0 @@
-'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

@@ -1,28 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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