@object-ui/plugin-kanban 3.0.3 → 3.1.0

package/src/InlineQuickAdd.tsx

@@ -0,0 +1,189 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react"
+import { Button, Input } from "@object-ui/components"
+import { Check, X } from "lucide-react"
+import type { InlineFieldDefinition } from "./types"
+
+const cn = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ')
+
+export interface InlineQuickAddProps {
+  /** Column where the card will be added */
+  columnId: string
+  /** Field definitions for inline editing */
+  fields: InlineFieldDefinition[]
+  /** Called with field values when the form is submitted */
+  onSubmit: (columnId: string, values: Record<string, any>) => void
+  /** Called when the form is cancelled */
+  onCancel: () => void
+  /** Pre-filled values (e.g. from a card template) */
+  defaultValues?: Record<string, any>
+}
+
+/**
+ * InlineQuickAdd renders form fields directly inside the kanban column
+ * without opening a dialog or modal. Submit with Enter or the Save button;
+ * cancel with Escape or the Cancel button.
+ */
+export const InlineQuickAdd: React.FC<InlineQuickAddProps> = ({
+  columnId,
+  fields,
+  onSubmit,
+  onCancel,
+  defaultValues,
+}) => {
+  const [values, setValues] = React.useState<Record<string, any>>(() => {
+    const initial: Record<string, any> = {}
+    for (const field of fields) {
+      initial[field.name] = defaultValues?.[field.name] ?? field.defaultValue ?? ""
+    }
+    return initial
+  })
+
+  const firstInputRef = React.useRef<HTMLInputElement | HTMLSelectElement>(null)
+
+  React.useEffect(() => {
+    // Auto-focus first field on mount
+    const timer = setTimeout(() => firstInputRef.current?.focus(), 0)
+    return () => clearTimeout(timer)
+  }, [])
+
+  const handleChange = React.useCallback((name: string, value: any) => {
+    setValues(prev => ({ ...prev, [name]: value }))
+  }, [])
+
+  const handleSubmit = React.useCallback(() => {
+    // Require at least one non-empty value
+    const hasValue = Object.values(values).some(v =>
+      typeof v === "string" ? v.trim().length > 0 : v != null
+    )
+    if (hasValue) {
+      onSubmit(columnId, values)
+    }
+  }, [columnId, values, onSubmit])
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault()
+        handleSubmit()
+      } else if (e.key === "Escape") {
+        e.preventDefault()
+        onCancel()
+      }
+    },
+    [handleSubmit, onCancel],
+  )
+
+  return (
+    <div
+      className="mt-2 rounded-lg border border-primary/30 bg-card p-3 space-y-2 shadow-sm"
+      onKeyDown={handleKeyDown}
+      role="form"
+      aria-label="Quick add card"
+    >
+      {fields.map((field, idx) => (
+        <div key={field.name} className="space-y-1">
+          <label
+            htmlFor={`qa-${columnId}-${field.name}`}
+            className="text-xs font-mono text-muted-foreground"
+          >
+            {field.label ?? field.name}
+          </label>
+          {renderField(field, values[field.name], handleChange, idx === 0 ? firstInputRef : undefined, `qa-${columnId}-${field.name}`)}
+        </div>
+      ))}
+      <div className="flex items-center gap-2 pt-1">
+        <Button
+          type="button"
+          size="sm"
+          className="h-7 text-xs gap-1"
+          onClick={handleSubmit}
+        >
+          <Check className="h-3 w-3" />
+          Save
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-7 text-xs gap-1"
+          onClick={onCancel}
+        >
+          <X className="h-3 w-3" />
+          Cancel
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+/** Renders a single field based on its type. */
+function renderField(
+  field: InlineFieldDefinition,
+  value: any,
+  onChange: (name: string, value: any) => void,
+  ref?: React.Ref<any>,
+  id?: string,
+) {
+  const commonClasses = "text-sm h-8"
+
+  switch (field.type) {
+    case "select":
+      return (
+        <select
+          ref={ref as React.Ref<HTMLSelectElement>}
+          id={id}
+          value={value ?? ""}
+          onChange={e => onChange(field.name, e.target.value)}
+          className={cn(
+            commonClasses,
+            "w-full rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          )}
+        >
+          <option value="">{field.placeholder ?? `Select ${field.label ?? field.name}...`}</option>
+          {(field.options ?? []).map(opt => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      )
+
+    case "number":
+      return (
+        <Input
+          ref={ref as React.Ref<HTMLInputElement>}
+          id={id}
+          type="number"
+          value={value ?? ""}
+          onChange={e => onChange(field.name, e.target.value === "" ? "" : Number(e.target.value))}
+          placeholder={field.placeholder ?? `Enter ${field.label ?? field.name}...`}
+          className={commonClasses}
+        />
+      )
+
+    case "text":
+    default:
+      return (
+        <Input
+          ref={ref as React.Ref<HTMLInputElement>}
+          id={id}
+          type="text"
+          value={value ?? ""}
+          onChange={e => onChange(field.name, e.target.value)}
+          placeholder={field.placeholder ?? `Enter ${field.label ?? field.name}...`}
+          className={commonClasses}
+        />
+      )
+  }
+}
+
+export default InlineQuickAdd

package/src/KanbanEnhanced.tsx

@@ -25,8 +25,8 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
-import { Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, Button } from "@object-ui/components"
-import { ChevronDown, ChevronRight, AlertTriangle } from "lucide-react"
+import { Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, Button, Input } from "@object-ui/components"
+import { ChevronDown, ChevronRight, AlertTriangle, Plus } from "lucide-react"
 
 const cn = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ')
 
@@ -35,6 +35,7 @@ export interface KanbanCard {
   title: string
   description?: string
   badges?: Array<{ label: string; variant?: "default" | "secondary" | "destructive" | "outline" }>
+  coverImage?: string
   [key: string]: any
 }
 
@@ -47,6 +48,14 @@ export interface KanbanColumn {
   collapsed?: boolean
 }
 
+export interface ConditionalFormattingRule {
+  field: string
+  operator: 'equals' | 'not_equals' | 'contains' | 'in'
+  value: string | string[]
+  backgroundColor?: string
+  borderColor?: string
+}
+
 export interface KanbanEnhancedProps {
   columns: KanbanColumn[]
   onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, newIndex: number) => void
@@ -54,9 +63,47 @@ export interface KanbanEnhancedProps {
   enableVirtualScrolling?: boolean
   virtualScrollThreshold?: number
   className?: string
+  quickAdd?: boolean
+  onQuickAdd?: (columnId: string, title: string) => void
+  conditionalFormatting?: ConditionalFormattingRule[]
 }
 
-function SortableCard({ card }: { card: KanbanCard }) {
+function getCardStyles(card: KanbanCard, rules?: ConditionalFormattingRule[]): React.CSSProperties {
+  if (!rules || rules.length === 0) return {}
+
+  for (const rule of rules) {
+    const fieldValue = card[rule.field]
+    if (fieldValue === undefined || fieldValue === null) continue
+
+    let matches = false
+    const strValue = String(fieldValue)
+
+    switch (rule.operator) {
+      case 'equals':
+        matches = strValue === String(rule.value)
+        break
+      case 'not_equals':
+        matches = strValue !== String(rule.value)
+        break
+      case 'contains':
+        matches = strValue.toLowerCase().includes(String(rule.value).toLowerCase())
+        break
+      case 'in':
+        matches = Array.isArray(rule.value) && rule.value.includes(strValue)
+        break
+    }
+
+    if (matches) {
+      return {
+        ...(rule.backgroundColor ? { backgroundColor: rule.backgroundColor } : {}),
+        ...(rule.borderColor ? { borderColor: rule.borderColor } : {}),
+      }
+    }
+  }
+  return {}
+}
+
+function SortableCard({ card, conditionalFormatting }: { card: KanbanCard; conditionalFormatting?: ConditionalFormattingRule[] }) {
   const {
     attributes,
     listeners,
@@ -72,9 +119,21 @@ function SortableCard({ card }: { card: KanbanCard }) {
     opacity: isDragging ? 0.5 : undefined,
   }
 
+  const cardStyles = getCardStyles(card, conditionalFormatting)
+
   return (
     <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      <Card className="mb-2 cursor-grab active:cursor-grabbing border-border bg-card/60 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 group">
+      <Card className="mb-2 cursor-grab active:cursor-grabbing border-border bg-card/60 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 group" style={cardStyles}>
+        {card.coverImage && (
+          <div className="w-full h-32 overflow-hidden rounded-t-lg">
+            <img
+              src={card.coverImage}
+              alt=""
+              className="w-full h-full object-cover"
+              loading="lazy"
+            />
+          </div>
+        )}
         <CardHeader className="p-4">
           <CardTitle className="text-sm font-medium font-mono tracking-tight text-foreground group-hover:text-primary transition-colors">{card.title}</CardTitle>
           {card.description && (
@@ -99,7 +158,7 @@ function SortableCard({ card }: { card: KanbanCard }) {
   )
 }
 
-function VirtualizedCardList({ cards, parentRef }: { cards: KanbanCard[]; parentRef: React.RefObject<HTMLDivElement | null> }) {
+function VirtualizedCardList({ cards, parentRef, conditionalFormatting }: { cards: KanbanCard[]; parentRef: React.RefObject<HTMLDivElement | null>; conditionalFormatting?: ConditionalFormattingRule[] }) {
   const rowVirtualizer = useVirtualizer({
     count: cards.length,
     getScrollElement: () => parentRef.current,
@@ -128,7 +187,7 @@ function VirtualizedCardList({ cards, parentRef }: { cards: KanbanCard[]; parent
               transform: `translateY(${virtualItem.start}px)`,
             }}
           >
-            <SortableCard card={card} />
+            <SortableCard card={card} conditionalFormatting={conditionalFormatting} />
           </div>
         )
       })}
@@ -136,16 +195,79 @@ function VirtualizedCardList({ cards, parentRef }: { cards: KanbanCard[]; parent
   )
 }
 
+function QuickAddForm({ columnId, onAdd }: { columnId: string; onAdd: (columnId: string, title: string) => void }) {
+  const [isAdding, setIsAdding] = React.useState(false)
+  const [title, setTitle] = React.useState('')
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const handleSubmit = () => {
+    const trimmed = title.trim()
+    if (trimmed) {
+      onAdd(columnId, trimmed)
+      setTitle('')
+    }
+    setIsAdding(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleSubmit()
+    } else if (e.key === 'Escape') {
+      setTitle('')
+      setIsAdding(false)
+    }
+  }
+
+  if (!isAdding) {
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="w-full mt-2 text-muted-foreground hover:text-foreground"
+        onClick={() => {
+          setIsAdding(true)
+          setTimeout(() => inputRef.current?.focus(), 0)
+        }}
+      >
+        <Plus className="h-4 w-4 mr-1" />
+        Add Card
+      </Button>
+    )
+  }
+
+  return (
+    <div className="mt-2 space-y-2">
+      <Input
+        ref={inputRef}
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleSubmit}
+        placeholder="Enter card title..."
+        className="text-sm"
+        autoFocus
+      />
+    </div>
+  )
+}
+
 function KanbanColumnEnhanced({
   column,
   cards,
   onToggle,
   enableVirtual,
+  quickAdd,
+  onQuickAdd,
+  conditionalFormatting,
 }: {
   column: KanbanColumn
   cards: KanbanCard[]
   onToggle: (collapsed: boolean) => void
   enableVirtual: boolean
+  quickAdd?: boolean
+  onQuickAdd?: (columnId: string, title: string) => void
+  conditionalFormatting?: ConditionalFormattingRule[]
 }) {
   const safeCards = cards || []
   const scrollRef = React.useRef<HTMLDivElement>(null)
@@ -221,15 +343,18 @@ function KanbanColumnEnhanced({
             strategy={verticalListSortingStrategy}
           >
             {enableVirtual ? (
-              <VirtualizedCardList cards={safeCards} parentRef={scrollRef} />
+              <VirtualizedCardList cards={safeCards} parentRef={scrollRef} conditionalFormatting={conditionalFormatting} />
             ) : (
               <div className="space-y-2">
                 {safeCards.map((card) => (
-                  <SortableCard key={card.id} card={card} />
+                  <SortableCard key={card.id} card={card} conditionalFormatting={conditionalFormatting} />
                 ))}
               </div>
             )}
           </SortableContext>
+          {quickAdd && onQuickAdd && (
+            <QuickAddForm columnId={column.id} onAdd={onQuickAdd} />
+          )}
         </div>
       )}
     </div>
@@ -243,6 +368,9 @@ export function KanbanEnhanced({
   enableVirtualScrolling = false,
   virtualScrollThreshold = 50,
   className,
+  quickAdd,
+  onQuickAdd,
+  conditionalFormatting,
 }: KanbanEnhancedProps) {
   const [activeCard, setActiveCard] = React.useState<KanbanCard | null>(null)
   
@@ -380,12 +508,15 @@ export function KanbanEnhanced({
               cards={column.cards}
               onToggle={(collapsed) => handleColumnToggle(column.id, collapsed)}
               enableVirtual={shouldUseVirtual}
+              quickAdd={quickAdd}
+              onQuickAdd={onQuickAdd}
+              conditionalFormatting={conditionalFormatting}
             />
           )
         })}
       </div>
       <DragOverlay>
-        {activeCard ? <SortableCard card={activeCard} /> : null}
+        {activeCard ? <SortableCard card={activeCard} conditionalFormatting={conditionalFormatting} /> : null}
       </DragOverlay>
     </DndContext>
   )