@startsimpli/ui 0.1.0

package/src/components/unified-table/components/MobileView/Card.tsx

@@ -0,0 +1,218 @@
+'use client'
+
+import { Card as UICard, CardContent, CardHeader, CardFooter } from '../../../ui/card'
+import { Checkbox } from '../../../ui/checkbox'
+import { cn } from '../../../../lib/utils'
+import { Loader2 } from 'lucide-react'
+import { CardProps, MobileCardField } from './types'
+import { CardActions } from './CardActions'
+
+function getNestedValue(obj: any, path: string): any {
+  if (!path || !obj) return obj
+
+  const keys = path.split('.')
+  let value = obj
+
+  for (const key of keys) {
+    if (value === null || value === undefined) return undefined
+    value = value[key]
+  }
+
+  return value
+}
+
+function renderField(field: MobileCardField, row: any) {
+  const value = getNestedValue(row, field.key)
+
+  if (field.render) {
+    return field.render(value, row)
+  }
+
+  if (value === null || value === undefined) {
+    return <span className="text-muted-foreground">-</span>
+  }
+
+  if (typeof value === 'boolean') {
+    return <span>{value ? 'Yes' : 'No'}</span>
+  }
+
+  return <span>{String(value)}</span>
+}
+
+export function Card<TData = any>({
+  row,
+  config,
+  rowId,
+  isLoading = false,
+  className
+}: CardProps<TData>) {
+  const {
+    titleKey,
+    titleRender,
+    subtitleKey,
+    subtitleRender,
+    imageKey,
+    imageRender,
+    primaryFields,
+    secondaryFields,
+    actions,
+    renderCustomContent,
+    renderCustomHeader,
+    renderCustomFooter,
+    showSelection,
+    onSelectionChange,
+    isSelected,
+    onClick,
+    headerClassName,
+    contentClassName,
+    footerClassName,
+  } = config
+
+  const handleClick = () => {
+    if (onClick && !isLoading) {
+      onClick(row)
+    }
+  }
+
+  const handleSelectionChange = (checked: boolean) => {
+    if (onSelectionChange && rowId) {
+      onSelectionChange(rowId, checked)
+    }
+  }
+
+  const selected = isSelected ? isSelected(row) : false
+
+  return (
+    <UICard
+      className={cn(
+        'relative transition-all duration-200',
+        onClick && !isLoading && 'cursor-pointer hover:shadow-md hover:border-primary/50',
+        selected && 'ring-2 ring-primary border-primary',
+        isLoading && 'opacity-60 pointer-events-none',
+        className,
+        config.className
+      )}
+      onClick={handleClick}
+    >
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50 rounded-lg z-10">
+          <Loader2 className="h-6 w-6 animate-spin text-primary" />
+        </div>
+      )}
+
+      <CardHeader className={cn('pb-3', headerClassName)}>
+        {renderCustomHeader ? (
+          renderCustomHeader(row)
+        ) : (
+          <div className="flex items-start gap-3">
+            {showSelection && (
+              <div
+                className="flex items-center pt-1"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Checkbox
+                  checked={selected}
+                  onCheckedChange={handleSelectionChange}
+                  aria-label="Select row"
+                  className="h-5 w-5"
+                />
+              </div>
+            )}
+
+            {(imageKey || imageRender) && (
+              <div className="flex-shrink-0">
+                {imageRender ? imageRender(row) : (
+                  <div className="h-12 w-12 rounded-full bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center">
+                    <span className="text-lg font-semibold text-primary">
+                      {String(getNestedValue(row, titleKey) || '?').charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div className="flex-1 min-w-0">
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-base leading-tight truncate">
+                    {titleRender ? titleRender(row) : getNestedValue(row, titleKey)}
+                  </h3>
+                  {subtitleKey && (
+                    <p className="text-sm text-muted-foreground mt-1 truncate">
+                      {subtitleRender ? subtitleRender(row) : getNestedValue(row, subtitleKey)}
+                    </p>
+                  )}
+                </div>
+
+                {actions && actions.length > 0 && (
+                  <div onClick={(e) => e.stopPropagation()}>
+                    <CardActions
+                      actions={actions}
+                      row={row}
+                      maxVisibleActions={2}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </CardHeader>
+
+      <CardContent className={cn('pt-0 space-y-4', contentClassName)}>
+        {renderCustomContent ? (
+          renderCustomContent(row)
+        ) : (
+          <>
+            {primaryFields && primaryFields.length > 0 && (
+              <div className="space-y-3">
+                {primaryFields.map((field) => (
+                  <div
+                    key={field.key}
+                    className={cn(
+                      'flex justify-between items-center gap-2',
+                      field.className
+                    )}
+                  >
+                    <span className="text-sm font-medium text-muted-foreground flex-shrink-0">
+                      {field.label || field.key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}:
+                    </span>
+                    <div className="text-sm font-medium text-right truncate">
+                      {renderField(field, row)}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {secondaryFields && secondaryFields.length > 0 && (
+              <div className="border-t pt-3">
+                <div className="grid grid-cols-2 gap-3">
+                  {secondaryFields.map((field) => (
+                    <div
+                      key={field.key}
+                      className={cn('space-y-1', field.className)}
+                    >
+                      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                        {field.label || field.key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
+                      </div>
+                      <div className="text-sm font-semibold truncate">
+                        {renderField(field, row)}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </CardContent>
+
+      {renderCustomFooter && (
+        <CardFooter className={cn('pt-0', footerClassName)}>
+          {renderCustomFooter(row)}
+        </CardFooter>
+      )}
+    </UICard>
+  )
+}

package/src/components/unified-table/components/MobileView/CardActions.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import { Button } from '../../../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../../ui/dropdown-menu'
+import { cn } from '../../../../lib/utils'
+import { MoreVertical } from 'lucide-react'
+import { useState } from 'react'
+import { CardActionsProps } from './types'
+
+export function CardActions({
+  actions,
+  row,
+  className,
+  maxVisibleActions = 2
+}: CardActionsProps) {
+  const [isExecuting, setIsExecuting] = useState<string | null>(null)
+
+  const visibleActions = actions.filter((action) => {
+    return !(action.hidden && action.hidden(row))
+  })
+
+  if (visibleActions.length === 0) {
+    return null
+  }
+
+  const handleActionClick = async (action: any) => {
+    if (action.disabled && action.disabled(row)) {
+      return
+    }
+
+    setIsExecuting(action.id)
+    try {
+      await action.onClick(row)
+    } finally {
+      setIsExecuting(null)
+    }
+  }
+
+  const primaryActions = visibleActions.slice(0, maxVisibleActions)
+  const overflowActions = visibleActions.slice(maxVisibleActions)
+
+  return (
+    <div className={cn('flex items-center gap-1', className)}>
+      {primaryActions.map((action) => {
+        const Icon = action.icon
+        const isDisabled = action.disabled ? action.disabled(row) : false
+        const isLoading = isExecuting === action.id
+
+        return (
+          <Button
+            key={action.id}
+            variant={action.variant || 'ghost'}
+            size="sm"
+            className={cn(
+              'h-9 min-w-[44px]',
+              Icon && !action.label && 'w-9 p-0',
+              action.className
+            )}
+            onClick={(e) => {
+              e.stopPropagation()
+              handleActionClick(action)
+            }}
+            disabled={isDisabled || isLoading}
+          >
+            {Icon && (
+              <Icon className={cn(
+                'h-4 w-4',
+                action.label && 'mr-1.5'
+              )} />
+            )}
+            {action.label && (
+              <span className="text-xs font-medium">{action.label}</span>
+            )}
+          </Button>
+        )
+      })}
+
+      {overflowActions.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-9 w-9 p-0"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <MoreVertical className="h-4 w-4" />
+              <span className="sr-only">More actions</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            {overflowActions.map((action, index) => {
+              const Icon = action.icon
+              const isDisabled = action.disabled ? action.disabled(row) : false
+              const isLoading = isExecuting === action.id
+
+              return (
+                <DropdownMenuItem
+                  key={action.id}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleActionClick(action)
+                  }}
+                  disabled={isDisabled || isLoading}
+                  className={cn(
+                    action.variant === 'destructive' && 'text-destructive focus:text-destructive',
+                    action.className
+                  )}
+                >
+                  {Icon && <Icon className="mr-2 h-4 w-4" />}
+                  <span>{action.label || 'Action'}</span>
+                </DropdownMenuItem>
+              )
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  )
+}