Merge pull request #460 from objectstack-ai/copilot/complete-roadmap-development-again

Author: hotlong

ROADMAP.md

@@ -221,21 +221,21 @@ The v2.0.7 spec introduces 70+ new UI types across 12 domains. This section maps
 
 - [x] Implement DndConfigSchema-based DnD framework (unified API for Kanban, Dashboard, Calendar, Grid) — `DndProvider`, `useDnd` in @object-ui/react
 - [x] Consume DragItemSchema, DropZoneSchema, DragConstraintSchema, DropEffectSchema — types re-exported from @object-ui/types
-- [ ] Refactor plugin-kanban card drag to use spec DnD schemas
-- [ ] Refactor plugin-dashboard widget drag to use spec DnD schemas
-- [ ] Add drag-to-reschedule for calendar events
+- [x] Refactor plugin-kanban card drag to use spec DnD schemas — DndBridge bridges @dnd-kit events to ObjectUI DndProvider
+- [x] Refactor plugin-dashboard widget drag to use spec DnD schemas — DndEditModeBridge bridges edit mode to DndProvider
+- [x] Add drag-to-reschedule for calendar events — native HTML5 DnD in MonthView with `onEventDrop` callback
 - [ ] Add drag-and-drop sidebar navigation reordering
 
 **Spec Reference:** `DndConfigSchema`, `DragItemSchema`, `DropZoneSchema`, `DragConstraintSchema`, `DragHandleSchema`, `DropEffectSchema`
 
 #### 2.2 Gesture & Touch Support (2 weeks)
 **Target:** Mobile-first gesture handling aligned with spec schemas
 
-- [ ] Integrate GestureConfigSchema and TouchInteractionSchema into @object-ui/mobile hooks
-- [ ] Consume SwipeGestureConfigSchema for navigation gestures
-- [ ] Consume PinchGestureConfigSchema for zoom interactions (maps, images)
-- [ ] Consume LongPressGestureConfigSchema for context menus
-- [ ] Consume TouchTargetConfigSchema for minimum touch target sizes (44px)
+- [x] Integrate GestureConfigSchema and TouchInteractionSchema into @object-ui/mobile hooks — `useSpecGesture` hook
+- [x] Consume SwipeGestureConfigSchema for navigation gestures — integrated in `useSpecGesture`
+- [x] Consume PinchGestureConfigSchema for zoom interactions (maps, images) — integrated in `useSpecGesture`
+- [x] Consume LongPressGestureConfigSchema for context menus — integrated in `useSpecGesture`
+- [x] Consume TouchTargetConfigSchema for minimum touch target sizes (44px) — `useTouchTarget` hook
 
 **Spec Reference:** `GestureConfigSchema`, `SwipeGestureConfigSchema`, `PinchGestureConfigSchema`, `LongPressGestureConfigSchema`, `TouchInteractionSchema`, `TouchTargetConfigSchema`
 
@@ -246,7 +246,7 @@ The v2.0.7 spec introduces 70+ new UI types across 12 domains. This section maps
 - [x] Implement FocusTrapConfigSchema for modal/drawer focus trapping — `useFocusTrap` with autoFocus, restoreFocus, escapeDeactivates
 - [x] Implement KeyboardNavigationConfigSchema for grid/list navigation (arrow keys, tab order) — `useKeyboardShortcuts` hook
 - [x] Implement KeyboardShortcutSchema system with help dialog (? key) — `useKeyboardShortcuts` + `getShortcutDescriptions` utility
-- [ ] Add keyboard shortcuts for common CRUD operations
+- [x] Add keyboard shortcuts for common CRUD operations — `useCrudShortcuts` hook (Ctrl+N/E/S/D, Delete, Escape, Ctrl+F)
 
 **Spec Reference:** `FocusManagementSchema`, `FocusTrapConfigSchema`, `KeyboardNavigationConfigSchema`, `KeyboardShortcutSchema`
 
@@ -257,17 +257,17 @@ The v2.0.7 spec introduces 70+ new UI types across 12 domains. This section maps
 - [x] Implement MotionConfigSchema for reduced-motion preferences (`prefers-reduced-motion`) — `useReducedMotion` hook
 - [x] Implement TransitionConfigSchema and TransitionPresetSchema for view transitions — `useAnimation` with 7 presets (fade, slide-up/down/left/right, scale, scale-fade)
 - [x] Implement EasingFunctionSchema for consistent easing curves — easing presets (linear, ease, ease-in, ease-out, ease-in-out, spring)
-- [ ] Add animation to view switcher transitions
+- [x] Add animation to view switcher transitions — fade-in animation via Tailwind CSS `animate-in` classes
 
 **Spec Reference:** `ComponentAnimationSchema`, `AnimationTriggerSchema`, `MotionConfigSchema`, `TransitionConfigSchema`, `TransitionPresetSchema`, `EasingFunctionSchema`
 
 #### 2.5 View Enhancements (3 weeks)
 **Target:** Consume v2.0.7 view enhancement schemas in grid/list plugins
 
-- [ ] Consume GalleryConfigSchema in plugin-list (gallery view layout, image sizing, masonry mode)
+- [x] Consume GalleryConfigSchema in plugin-list (gallery view layout, image sizing, masonry mode) — ObjectGallery with coverField/coverFit/cardSize/visibleFields
 - [x] Consume ColumnSummarySchema in plugin-grid and plugin-aggrid (column-level SUM/AVG/COUNT) — `useColumnSummary` hook
-- [ ] Consume GroupingConfigSchema and GroupingFieldSchema in plugin-grid (row grouping with subtotals)
-- [ ] Consume RowColorConfigSchema for conditional row coloring rules
+- [x] Consume GroupingConfigSchema and GroupingFieldSchema in plugin-grid (row grouping with subtotals) — `useGroupedData` hook with collapsible sections
+- [x] Consume RowColorConfigSchema for conditional row coloring rules — `useRowColor` hook with field-value color mapping
 - [x] Consume RowHeightSchema for compact/comfortable/spacious row height modes — `useDensityMode` hook
 - [x] Consume DensityMode for grid/list density toggling — `useDensityMode` with cycle()
 - [x] Consume ViewSharingSchema for shared/personal view configurations — `useViewSharing` hook with CRUD
@@ -281,7 +281,7 @@ The v2.0.7 spec introduces 70+ new UI types across 12 domains. This section maps
 - [x] Consume NotificationConfigSchema for position, duration, stacking — `NotificationSystemConfig` with all options
 - [x] Consume NotificationActionSchema for interactive notifications (buttons, links) — `NotificationActionButton` support
 - [x] Implement notification center UI with unread count badge — `useNotifications` with `unreadCount`, `markAsRead`, `markAllAsRead`
-- [ ] Integrate with `client.notifications.*` API for device registration and preferences
+- [x] Integrate with `client.notifications.*` API for device registration and preferences — `useClientNotifications` hook
 
 **Spec Reference:** `NotificationSchema`, `NotificationConfigSchema`, `NotificationActionSchema`, `NotificationPositionSchema`, `NotificationSeveritySchema`, `NotificationTypeSchema`
 

packages/components/src/renderers/complex/data-table.tsx

@@ -100,6 +100,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     resizableColumns = true,
     reorderableColumns = true,
     editable = false,
+    rowClassName,
     className,
   } = schema;
 
@@ -665,7 +666,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       data-state={isSelected ? 'selected' : undefined}
                       className={cn(
                         schema.onRowClick && "cursor-pointer",
-                        rowHasChanges && "bg-amber-50 dark:bg-amber-950/20"
+                        rowHasChanges && "bg-amber-50 dark:bg-amber-950/20",
+                        rowClassName && rowClassName(row, rowIndex)
                       )}
                       onClick={(e) => {
                         if (schema.onRowClick && !e.defaultPrevented) {

packages/mobile/src/index.ts

@@ -23,6 +23,8 @@ export { useBreakpoint, type BreakpointState } from './useBreakpoint';
 export { useResponsive } from './useResponsive';
 export { useResponsiveConfig, type SpecResponsiveConfig, type ResolvedResponsiveState } from './useResponsiveConfig';
 export { useGesture, type UseGestureOptions } from './useGesture';
+export { useSpecGesture, type UseSpecGestureOptions } from './useSpecGesture';
+export { useTouchTarget, type UseTouchTargetOptions, type TouchTargetResult } from './useTouchTarget';
 export { usePullToRefresh, type PullToRefreshOptions } from './usePullToRefresh';
 export { MobileProvider, type MobileProviderProps } from './MobileProvider';
 export { ResponsiveContainer, type ResponsiveContainerProps } from './ResponsiveContainer';
@@ -45,4 +47,10 @@ export type {
   GestureConfig,
   GestureContext,
   MobileComponentConfig,
+  SpecGestureConfig,
+  SwipeGestureConfig,
+  PinchGestureConfig,
+  LongPressGestureConfig,
+  TouchInteraction,
+  TouchTargetConfig,
 } from '@object-ui/types';

packages/mobile/src/useSpecGesture.ts

@@ -0,0 +1,77 @@
+/**
+ * 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 { useGesture } from './useGesture';
+import type { GestureType, SpecGestureConfig } from '@object-ui/types';
+
+export interface UseSpecGestureOptions {
+  /** Spec gesture configuration */
+  config: SpecGestureConfig;
+  /** Callback when a swipe gesture is detected */
+  onSwipe?: (direction: string) => void;
+  /** Callback when a pinch gesture is detected */
+  onPinch?: (scale: number) => void;
+  /** Callback when a long-press gesture is detected */
+  onLongPress?: () => void;
+}
+
+const SWIPE_DIRECTION_MAP: Record<string, GestureType> = {
+  left: 'swipe-left',
+  right: 'swipe-right',
+  up: 'swipe-up',
+  down: 'swipe-down',
+};
+
+/**
+ * Spec-aware gesture hook that maps an @objectstack/spec GestureConfig
+ * to the existing useGesture hook.
+ *
+ * @example
+ * ```tsx
+ * const ref = useSpecGesture({
+ *   config: { type: 'swipe', enabled: true, swipe: { direction: 'left', threshold: 80 } },
+ *   onSwipe: (dir) => console.log('Swiped', dir),
+ * });
+ * return <div ref={ref}>Swipe me</div>;
+ * ```
+ */
+export function useSpecGesture<T extends HTMLElement = HTMLElement>(
+  options: UseSpecGestureOptions,
+) {
+  const { config, onSwipe, onPinch, onLongPress } = options;
+  const enabled = config.enabled ?? true;
+
+  let gestureType: GestureType = 'tap';
+  let threshold: number | undefined;
+  let longPressDuration: number | undefined;
+  let onGesture: (ctx: { direction?: string; scale?: number }) => void = () => {};
+
+  if (config.swipe && onSwipe) {
+    const dir = Array.isArray(config.swipe.direction)
+      ? config.swipe.direction[0]
+      : config.swipe.direction;
+    gestureType = (dir && SWIPE_DIRECTION_MAP[dir]) ?? 'swipe-left';
+    threshold = config.swipe.threshold;
+    onGesture = (ctx) => onSwipe(ctx.direction ?? dir ?? 'left');
+  } else if (config.longPress && onLongPress) {
+    gestureType = 'long-press';
+    longPressDuration = config.longPress.duration;
+    onGesture = () => onLongPress();
+  } else if (config.pinch && onPinch) {
+    gestureType = 'pinch';
+    onGesture = (ctx) => onPinch(ctx.scale ?? 1);
+  }
+
+  return useGesture<T>({
+    type: gestureType,
+    onGesture,
+    threshold,
+    longPressDuration,
+    enabled,
+  });
+}

packages/mobile/src/useTouchTarget.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 type { TouchTargetConfig } from '@object-ui/types';
+
+export interface UseTouchTargetOptions {
+  /** Spec touch target configuration */
+  config?: TouchTargetConfig;
+}
+
+export interface TouchTargetResult {
+  /** CSS style properties enforcing minimum touch target sizes */
+  style: {
+    minWidth: string;
+    minHeight: string;
+    padding: string | undefined;
+  };
+  /** CSS class for touch-action optimization */
+  className: string;
+}
+
+/**
+ * Hook that returns style and className props enforcing minimum
+ * touch target sizes per the @objectstack/spec TouchTargetConfig.
+ *
+ * Defaults follow WCAG 2.5.5 (44×44 CSS pixels).
+ *
+ * @example
+ * ```tsx
+ * const target = useTouchTarget({ config: { minWidth: 48, minHeight: 48 } });
+ * return <button style={target.style} className={target.className}>Tap</button>;
+ * ```
+ */
+export function useTouchTarget(options: UseTouchTargetOptions = {}): TouchTargetResult {
+  const { config } = options;
+  const minWidth = config?.minWidth ?? 44;
+  const minHeight = config?.minHeight ?? 44;
+  const padding = config?.padding ?? 0;
+
+  return {
+    style: {
+      minWidth: `${minWidth}px`,
+      minHeight: `${minHeight}px`,
+      padding: padding > 0 ? `${padding}px` : undefined,
+    },
+    className: 'touch-manipulation',
+  };
+}

packages/plugin-calendar/src/CalendarView.tsx

@@ -46,6 +46,7 @@ export interface CalendarViewProps {
   onViewChange?: (view: "month" | "week" | "day") => void
   onNavigate?: (date: Date) => void
   onAddClick?: () => void
+  onEventDrop?: (event: CalendarEvent, newStart: Date, newEnd?: Date) => void
   className?: string
 }
 
@@ -59,6 +60,7 @@ function CalendarView({
   onViewChange,
   onNavigate,
   onAddClick,
+  onEventDrop,
   className,
 }: CalendarViewProps) {
   const [selectedView, setSelectedView] = React.useState(view)
@@ -228,6 +230,7 @@ function CalendarView({
             events={events}
             onEventClick={onEventClick}
             onDateClick={onDateClick}
+            onEventDrop={onEventDrop}
           />
         )}
         {selectedView === "week" && (
@@ -322,12 +325,70 @@ interface MonthViewProps {
   events: CalendarEvent[]
   onEventClick?: (event: CalendarEvent) => void
   onDateClick?: (date: Date) => void
+  onEventDrop?: (event: CalendarEvent, newStart: Date, newEnd?: Date) => void
 }
 
-function MonthView({ date, events, onEventClick, onDateClick }: MonthViewProps) {
+function MonthView({ date, events, onEventClick, onDateClick, onEventDrop }: MonthViewProps) {
   const days = getMonthDays(date)
   const today = new Date()
   const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+  const [draggedEventId, setDraggedEventId] = React.useState<string | number | null>(null)
+  const [dropTargetIndex, setDropTargetIndex] = React.useState<number | null>(null)
+
+  const handleDragStart = (e: React.DragEvent, event: CalendarEvent) => {
+    setDraggedEventId(event.id)
+    e.dataTransfer.effectAllowed = "move"
+    e.dataTransfer.setData("text/plain", String(event.id))
+  }
+
+  const handleDragEnd = () => {
+    setDraggedEventId(null)
+    setDropTargetIndex(null)
+  }
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "move"
+    setDropTargetIndex(index)
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    // Only clear when actually leaving the cell, not when moving over child elements
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setDropTargetIndex(null)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent, targetDay: Date) => {
+    e.preventDefault()
+    setDropTargetIndex(null)
+    setDraggedEventId(null)
+
+    if (!onEventDrop) return
+
+    const eventId = e.dataTransfer.getData("text/plain")
+    const draggedEvent = events.find((ev) => String(ev.id) === eventId)
+    if (!draggedEvent) return
+
+    const oldStart = new Date(draggedEvent.start)
+    const oldStartDay = new Date(oldStart)
+    oldStartDay.setHours(0, 0, 0, 0)
+
+    const newTargetDay = new Date(targetDay)
+    newTargetDay.setHours(0, 0, 0, 0)
+
+    const deltaMs = newTargetDay.getTime() - oldStartDay.getTime()
+    if (deltaMs === 0) return
+
+    const newStart = new Date(oldStart.getTime() + deltaMs)
+
+    let newEnd: Date | undefined
+    if (draggedEvent.end) {
+      newEnd = new Date(new Date(draggedEvent.end).getTime() + deltaMs)
+    }
+
+    onEventDrop(draggedEvent, newStart, newEnd)
+  }
 
   return (
     <div className="flex flex-col h-full">
@@ -355,9 +416,13 @@ function MonthView({ date, events, onEventClick, onDateClick }: MonthViewProps)
               key={index}
               className={cn(
                 "border-b border-r last:border-r-0 p-2 min-h-[100px] cursor-pointer hover:bg-accent/50",
-                !isCurrentMonth && "bg-muted/30 text-muted-foreground"
+                !isCurrentMonth && "bg-muted/30 text-muted-foreground",
+                dropTargetIndex === index && "ring-2 ring-primary"
               )}
               onClick={() => onDateClick?.(day)}
+              onDragOver={(e) => handleDragOver(e, index)}
+              onDragLeave={handleDragLeave}
+              onDrop={(e) => handleDrop(e, day)}
             >
               <div
                 className={cn(
@@ -372,9 +437,13 @@ function MonthView({ date, events, onEventClick, onDateClick }: MonthViewProps)
                 {dayEvents.slice(0, 3).map((event) => (
                   <div
                     key={event.id}
+                    draggable={!!onEventDrop}
+                    onDragStart={(e) => handleDragStart(e, event)}
+                    onDragEnd={handleDragEnd}
                     className={cn(
                       "text-xs px-2 py-1 rounded truncate cursor-pointer hover:opacity-80",
-                      event.color || DEFAULT_EVENT_COLOR
+                      event.color || DEFAULT_EVENT_COLOR,
+                      draggedEventId === event.id && "opacity-50"
                     )}
                     style={
                       event.color && event.color.startsWith("#")