@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha-20260224145405

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/{components/ui → ui}/dialog.tsx

@@ -1,45 +1,9 @@
-'use client'
-
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { XIcon } from 'lucide-react'
 
-import { cva } from 'class-variance-authority'
-import type { VariantProps } from 'class-variance-authority'
 import { cn } from '~/lib/utils'
 
-const dialogVariants = cva(
-  'z-50 grid w-full gap-4 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 sm:rounded-lg border border-neutral-500 bg-white dark:border-neutral-900 dark:bg-neutral-950 dark:text-white',
-  {
-    variants: {
-      variant: {
-        default: 'fixed ',
-        inline: '',
-      },
-      position: {
-        default:
-          'left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] 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%]',
-        bl: 'left-6 bottom-6 data-[state=closed]:slide-out-to-bottom-16 data-[state=open]:slide-in-from-bottom-16',
-        bc: 'left-[50%] top-[50%] translate-x-[-50%] bottom-6 data-[state=closed]:slide-out-to-bottom-16 data-[state=open]:slide-in-from-bottom-16',
-        br: 'right-6 bottom-6 data-[state=closed]:slide-out-to-bottom-16 data-[state=open]:slide-in-from-bottom-16',
-      },
-      size: {
-        default: 'max-w-lg',
-        sm: 'max-w-md',
-        md: 'max-w-lg',
-        lg: 'max-w-xl',
-        xl: 'max-w-2xl',
-        fullscreen: 'w-screen h-screen',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      position: 'default',
-      size: 'default',
-    },
-  },
-)
-
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -80,32 +44,27 @@ function DialogOverlay({
   )
 }
 
-export interface DialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
-    VariantProps<typeof dialogVariants> {}
-
 function DialogContent({
   className,
-  variant = 'default',
-  size,
-  position,
   children,
+  showCloseButton = true,
   ...props
-}: DialogContentProps) {
+}: 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
-        // )}
-        className={cn(dialogVariants({ variant, size, position, className }))}
+        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"
@@ -113,7 +72,7 @@ function DialogContent({
             <XIcon />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
-        }
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   )

package/src/{components/ui → ui}/dropdown-menu.tsx

@@ -1,8 +1,6 @@
-'use client'
-
-import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '~/lib/utils'
 
@@ -42,7 +40,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
           className,
         )}
         {...props}
@@ -74,7 +72,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -92,7 +90,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -128,7 +126,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -155,7 +153,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        'px-2 py-1.5 text-sm font-medium data-inset:pl-8',
         className,
       )}
       {...props}
@@ -211,7 +209,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -230,7 +228,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
         className,
       )}
       {...props}
@@ -240,18 +238,18 @@ function DropdownMenuSubContent({
 
 export {
   DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuLabel,
   DropdownMenuItem,
-  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
-  DropdownMenuSubTrigger,
   DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
 }