create-appraisejs 0.3.0-alpha.0 → 0.3.0

package/templates/starter/src/components/ui/data-table-view-options.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
+import { Table } from '@tanstack/react-table'
+import { Settings2 } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu'
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+          <Settings2 />
+          View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide())
+          .map(column => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={value => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            )
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/templates/starter/src/components/ui/data-table.test.tsx

@@ -0,0 +1,122 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { ColumnDef } from '@tanstack/react-table'
+import type { ReactNode } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { Checkbox } from '@/components/ui/checkbox'
+
+import { DataTable } from './data-table'
+
+const { toast } = vi.hoisted(() => ({
+  toast: vi.fn(),
+}))
+
+vi.mock('next/link', () => ({
+  default: ({
+    href,
+    children,
+    ...props
+  }: {
+    href: string
+    children: ReactNode
+  }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+type TableRow = {
+  id: string
+  name: string
+}
+
+const columns: ColumnDef<TableRow>[] = [
+  {
+    id: 'select',
+    header: 'Select',
+    cell: ({ row }) => (
+      <Checkbox
+        aria-label={`Select ${row.original.name}`}
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(Boolean(value))}
+      />
+    ),
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name',
+  },
+]
+
+describe('DataTable', () => {
+  it('enables row actions from a single selected row and deletes the selected id', async () => {
+    const user = userEvent.setup()
+    const deleteAction = vi.fn().mockResolvedValue({
+      status: 200,
+      message: 'Deleted',
+    })
+
+    render(
+      <DataTable
+        columns={columns}
+        data={[
+          { id: 'row-1', name: 'Smoke' },
+          { id: 'row-2', name: 'Regression' },
+        ]}
+        filterColumn="name"
+        filterPlaceholder="Search names"
+        modifyLink="/tags/modify"
+        viewLink="/tags/view"
+        deleteAction={deleteAction}
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: 'Edit selected item' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'View selected item' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Delete selected item(s)' })).toBeDisabled()
+
+    await user.click(screen.getByRole('checkbox', { name: 'Select Smoke' }))
+
+    expect(screen.getByRole('link', { name: 'Edit selected item' })).toHaveAttribute('href', '/tags/modify/row-1')
+    expect(screen.getByRole('link', { name: 'View selected item' })).toHaveAttribute('href', '/tags/view/row-1')
+
+    await user.click(screen.getByRole('button', { name: 'Delete selected item(s)' }))
+    await user.click(screen.getByRole('button', { name: /^delete$/i }))
+
+    await waitFor(() => {
+      expect(deleteAction).toHaveBeenCalledWith(['row-1'])
+    })
+
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Item(s) deleted successfully',
+    })
+  })
+
+  it('filters rows from the search input', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <DataTable
+        columns={columns}
+        data={[
+          { id: 'row-1', name: 'Smoke' },
+          { id: 'row-2', name: 'Regression' },
+        ]}
+        filterColumn="name"
+        filterPlaceholder="Search names"
+      />,
+    )
+
+    await user.type(screen.getByPlaceholderText('Search names'), 'missing')
+
+    expect(screen.getByText('No results.')).toBeInTheDocument()
+  })
+})

package/templates/starter/src/components/ui/data-table.tsx

@@ -0,0 +1,298 @@
+'use client'
+
+import {
+  ColumnDef,
+  type RowSelectionState,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  SortingState,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  ColumnFiltersState,
+  PaginationState,
+} from '@tanstack/react-table'
+
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Input } from '@/components/ui/input'
+import { useState } from 'react'
+import { DataTablePagination } from './data-table-pagination'
+import { DataTableViewOptions } from './data-table-view-options'
+import { Eye, Pencil, PlusCircle, Search } from 'lucide-react'
+import { Button } from './button'
+import Link from 'next/link'
+import { toast } from '@/hooks/use-toast'
+import { ActionResponse } from '@/types/form/actionHandler'
+import DeletePrompt from '../user-prompt/delete-prompt'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from './dropdown-menu'
+
+type DataTableRowLike = {
+  id?: string
+  conflicts?: unknown[]
+}
+
+type DataTableCreateButtonOption = {
+  label: string
+  link: string
+  icon?: React.ReactNode
+}
+
+export type DataTableProps<TData, TValue> = {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  filterColumn: string
+  filterPlaceholder: string
+  createLink?: string
+  modifyLink?: string
+  deleteAction?: (id: string[]) => Promise<ActionResponse>
+  multiOptionCreateButton?: boolean
+  createButtonOptions?: DataTableCreateButtonOption[]
+  createMenuLabel?: string
+  viewLink?: string
+  showSelectedRows?: boolean
+  getRowId?: (row: TData, index: number) => string
+}
+
+function hasDataTableRowShape(value: unknown): value is DataTableRowLike {
+  return typeof value === 'object' && value !== null
+}
+
+function getResolvedRowId<TData>(row: TData, index: number, getRowId?: (row: TData, index: number) => string) {
+  if (getRowId) {
+    return getRowId(row, index)
+  }
+
+  if (hasDataTableRowShape(row) && typeof row.id === 'string') {
+    return row.id
+  }
+
+  return `row-${index}`
+}
+
+function getEntityId<TData>(row: TData, index: number, getRowId?: (row: TData, index: number) => string) {
+  if (getRowId) {
+    return getRowId(row, index)
+  }
+
+  if (hasDataTableRowShape(row) && typeof row.id === 'string') {
+    return row.id
+  }
+
+  return null
+}
+
+function rowHasConflicts(value: unknown) {
+  return hasDataTableRowShape(value) && Array.isArray(value.conflicts) && value.conflicts.length > 0
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  filterColumn,
+  filterPlaceholder,
+  createLink,
+  multiOptionCreateButton,
+  createButtonOptions,
+  modifyLink,
+  viewLink,
+  deleteAction,
+  showSelectedRows = true,
+  createMenuLabel = 'Create item',
+  getRowId,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+
+  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table's useReactTable returns unstable refs; React Compiler skips memoization
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      rowSelection,
+      pagination,
+    },
+    getRowId: (row, index) => getResolvedRowId(row, index, getRowId),
+  })
+
+  const selectedRows = table.getSelectedRowModel().rows
+  const selectedIds = selectedRows
+    .map(row => getEntityId(row.original, row.index, getRowId))
+    .filter((value): value is string => value !== null)
+  const selectedRowCount = selectedRows.length
+  const singleSelectedId = selectedRowCount === 1 ? selectedIds[0] ?? null : null
+
+  const deleteHandler = async () => {
+    if (!deleteAction || selectedIds.length === 0) {
+      return false
+    }
+
+    const res = await deleteAction(selectedIds)
+    if (res.status === 200) {
+      toast({
+        title: 'Item(s) deleted successfully',
+      })
+      return true
+    }
+
+    toast({
+      title: 'Error deleting item(s)',
+      description: res.message,
+      variant: 'destructive',
+    })
+
+    return false
+  }
+
+  return (
+    <div className="mb-10">
+      <div className="flex justify-end">
+        <div className="mb-4 flex gap-2">
+          {createLink && (
+            <Button variant="default" size="icon" aria-label="Create item" asChild>
+              <Link href={createLink}>
+                <PlusCircle className="h-4 w-4" aria-hidden="true" />
+                <span className="sr-only">Create item</span>
+              </Link>
+            </Button>
+          )}
+          {multiOptionCreateButton && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="default" size="icon" aria-label={createMenuLabel}>
+                  <PlusCircle className="h-4 w-4" aria-hidden="true" />
+                  <span className="sr-only">{createMenuLabel}</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuLabel>{createMenuLabel}</DropdownMenuLabel>
+                {createButtonOptions?.map(option => (
+                  <DropdownMenuItem key={option.label} asChild>
+                    <Link href={option.link}>
+                      {option.icon}
+                      {option.label}
+                    </Link>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+          {modifyLink && (
+            singleSelectedId ? (
+              <Button variant="outline" size="icon" aria-label="Edit selected item" asChild>
+                <Link href={`${modifyLink}/${singleSelectedId}`}>
+                  <Pencil className="h-4 w-4" aria-hidden="true" />
+                  <span className="sr-only">Edit selected item</span>
+                </Link>
+              </Button>
+            ) : (
+              <Button variant="outline" size="icon" aria-label="Edit selected item" disabled>
+                <Pencil className="h-4 w-4" aria-hidden="true" />
+                <span className="sr-only">Edit selected item</span>
+              </Button>
+            )
+          )}
+          {viewLink && (
+            singleSelectedId ? (
+              <Button variant="outline" size="icon" aria-label="View selected item" asChild>
+                <Link href={`${viewLink}/${singleSelectedId}`}>
+                  <Eye className="h-4 w-4" aria-hidden="true" />
+                  <span className="sr-only">View selected item</span>
+                </Link>
+              </Button>
+            ) : (
+              <Button variant="outline" size="icon" aria-label="View selected item" disabled>
+                <Eye className="h-4 w-4" aria-hidden="true" />
+                <span className="sr-only">View selected item</span>
+              </Button>
+            )
+          )}
+          {deleteAction && (
+            <DeletePrompt
+              isDisabled={selectedIds.length === 0}
+              dialogTitle="Delete Item"
+              dialogDescription="Please confirm your action"
+              confirmationText="Are you sure you want to delete the selected item(s)?"
+              deleteHandler={deleteHandler}
+              triggerLabel="Delete selected item(s)"
+            />
+          )}
+        </div>
+      </div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center">
+          <Search className="mr-2 h-6 w-6" />
+          <Input
+            placeholder={filterPlaceholder}
+            value={(table.getColumn(filterColumn)?.getFilterValue() as string) ?? ''}
+            onChange={event => table.getColumn(filterColumn)?.setFilterValue(event.target.value)}
+            className="max-w-sm"
+          />
+        </div>
+        <DataTableViewOptions table={table} />
+      </div>
+      <div className="mb-4">
+        <Table>
+          <TableHeader className="bg-white dark:bg-muted">
+            {table.getHeaderGroups().map(headerGroup => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map(header => {
+                  return (
+                    <TableHead key={header.id} className="font-bold dark:text-white">
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => {
+                return (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && 'selected'}
+                    className={rowHasConflicts(row.original) ? 'bg-destructive/10' : ''}
+                  >
+                    {row.getVisibleCells().map(cell => (
+                      <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                    ))}
+                  </TableRow>
+                )
+              })
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} showSelectedRows={showSelectedRows} />
+    </div>
+  )
+}

package/templates/starter/src/components/ui/dialog.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}