@igstack/app-catalog-frontend-core 0.0.1

package/src/ui/crud-list/CrudList.tsx

@@ -0,0 +1,274 @@
+import { useCallback, useState } from 'react'
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { Pencil, Plus, Trash2 } from 'lucide-react'
+import { Button } from '~/ui/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/ui/table'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/ui/dialog'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '~/ui/alert-dialog'
+import { Skeleton } from '~/ui/skeleton'
+import type { CrudDialogState, CrudListProps } from './types'
+
+export function CrudList<TData, TCreateInput, TUpdateInput>({
+  data,
+  isLoading = false,
+  columns,
+  getRowId,
+  renderForm,
+  onCreate,
+  onUpdate,
+  onDelete,
+  title,
+  createButtonLabel = 'Add',
+  emptyMessage = 'No items found',
+  canCreate = true,
+  canEdit = true,
+  canDelete = true,
+}: CrudListProps<TData, TCreateInput, TUpdateInput>) {
+  const [dialogState, setDialogState] = useState<CrudDialogState<TData>>({
+    open: false,
+  })
+  const [deleteItem, setDeleteItem] = useState<TData | null>(null)
+  const [isPending, setIsPending] = useState(false)
+
+  // Add action column
+  const columnsWithActions = [
+    ...columns,
+    {
+      id: 'actions',
+      header: '',
+      cell: ({ row }: { row: { original: TData } }) => {
+        const item = row.original
+        const showEdit = typeof canEdit === 'function' ? canEdit(item) : canEdit
+        const showDelete =
+          typeof canDelete === 'function' ? canDelete(item) : canDelete
+
+        return (
+          <div className="flex justify-end gap-1">
+            {showEdit && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() =>
+                  setDialogState({ open: true, mode: 'edit', item })
+                }
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+            )}
+            {showDelete && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setDeleteItem(item)}
+              >
+                <Trash2 className="h-4 w-4 text-destructive" />
+              </Button>
+            )}
+          </div>
+        )
+      },
+      size: 80,
+    },
+  ]
+
+  const table = useReactTable({
+    data,
+    columns: columnsWithActions,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId,
+  })
+
+  const handleSubmit = useCallback(
+    async (formData: TCreateInput | TUpdateInput) => {
+      if (!dialogState.open) return
+
+      setIsPending(true)
+      try {
+        if (dialogState.mode === 'create') {
+          await onCreate(formData as TCreateInput)
+        } else {
+          await onUpdate(formData as TUpdateInput)
+        }
+        setDialogState({ open: false })
+      } finally {
+        setIsPending(false)
+      }
+    },
+    [dialogState, onCreate, onUpdate],
+  )
+
+  const handleDelete = useCallback(async () => {
+    if (!deleteItem) return
+    setIsPending(true)
+    try {
+      await onDelete(deleteItem)
+      setDeleteItem(null)
+    } finally {
+      setIsPending(false)
+    }
+  }, [deleteItem, onDelete])
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        {title && <h3 className="text-lg font-medium">{title}</h3>}
+        {canCreate && (
+          <Button
+            onClick={() =>
+              setDialogState({ open: true, mode: 'create', item: null })
+            }
+            size="sm"
+          >
+            <Plus className="h-4 w-4 mr-1" />
+            {createButtonLabel}
+          </Button>
+        )}
+      </div>
+
+      {/* Table */}
+      <div className="border rounded-md">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              Array.from({ length: 3 }).map((_item, i) => (
+                <TableRow key={i}>
+                  {columns.map((_col, j) => (
+                    <TableCell key={j}>
+                      <Skeleton className="h-4 w-full" />
+                    </TableCell>
+                  ))}
+                  <TableCell>
+                    <Skeleton className="h-4 w-16" />
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : table.getRowModel().rows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columnsWithActions.length}
+                  className="text-center text-muted-foreground py-8"
+                >
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            ) : (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  className="cursor-pointer hover:bg-muted/50"
+                  onClick={(e) => {
+                    // Don't open if clicking on action buttons
+                    if ((e.target as HTMLElement).closest('button')) return
+                    const showEdit =
+                      typeof canEdit === 'function'
+                        ? canEdit(row.original)
+                        : canEdit
+                    if (showEdit) {
+                      setDialogState({
+                        open: true,
+                        mode: 'edit',
+                        item: row.original,
+                      })
+                    }
+                  }}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Create/Edit Dialog */}
+      <Dialog
+        open={dialogState.open}
+        onOpenChange={(open) => !open && setDialogState({ open: false })}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {dialogState.open && dialogState.mode === 'create'
+                ? 'Create'
+                : 'Edit'}
+            </DialogTitle>
+          </DialogHeader>
+          {dialogState.open &&
+            renderForm({
+              mode: dialogState.mode,
+              item: dialogState.mode === 'edit' ? dialogState.item : null,
+              onSubmit: handleSubmit,
+              onCancel: () => setDialogState({ open: false }),
+              isPending,
+            })}
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation */}
+      <AlertDialog
+        open={!!deleteItem}
+        onOpenChange={(open) => !open && setDeleteItem(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Item</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete this item? This action cannot be
+              undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} disabled={isPending}>
+              {isPending ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

package/src/ui/crud-list/index.ts

@@ -0,0 +1,2 @@
+export { CrudList } from './CrudList'
+export type { CrudListProps, CrudFormProps, CrudDialogState } from './types'

package/src/ui/crud-list/types.ts

@@ -0,0 +1,44 @@
+import type { ColumnDef } from '@tanstack/react-table'
+
+export interface CrudListProps<TData, TCreateInput, TUpdateInput> {
+  // Data
+  data: Array<TData>
+  isLoading?: boolean
+
+  // Table configuration
+  columns: Array<ColumnDef<TData>>
+  getRowId: (item: TData) => string
+
+  // Dialog form - render prop pattern
+  renderForm: (
+    props: CrudFormProps<TData, TCreateInput, TUpdateInput>,
+  ) => React.ReactNode
+
+  // Callbacks
+  onCreate: (data: TCreateInput) => Promise<void>
+  onUpdate: (data: TUpdateInput) => Promise<void>
+  onDelete: (item: TData) => Promise<void>
+
+  // UI customization
+  title?: string
+  createButtonLabel?: string
+  emptyMessage?: string
+
+  // Optional: disable actions
+  canCreate?: boolean
+  canEdit?: boolean | ((item: TData) => boolean)
+  canDelete?: boolean | ((item: TData) => boolean)
+}
+
+export interface CrudFormProps<TData, TCreateInput, TUpdateInput> {
+  mode: 'create' | 'edit'
+  item: TData | null
+  onSubmit: (data: TCreateInput | TUpdateInput) => void
+  onCancel: () => void
+  isPending: boolean
+}
+
+export type CrudDialogState<TData> =
+  | { open: false }
+  | { open: true; mode: 'create'; item: null }
+  | { open: true; mode: 'edit'; item: TData }

package/src/ui/dialog.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { XIcon } from 'lucide-react'
+
+import { cn } from '~/lib/utils'
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}