torch-glare 2.1.0 → 2.1.2

package/apps/lib/components/TreeFolder/useTreeFolderDnD.ts

@@ -0,0 +1,261 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { isAncestor } from "./treeFolderUtils"
+import type {
+  TreeFolderDropPosition,
+  TreeFolderDropTarget,
+  TreeFolderMoveArgs,
+  TreeFolderNode,
+  TreeFolderVisibleRow,
+} from "./types"
+
+type RowLookup = Map<string, TreeFolderVisibleRow>
+
+const SCROLL_EDGE_PX = 32
+const SCROLL_SPEED_PX_PER_FRAME = 8
+const DRAG_DATA_MIME = "application/x-treefolder-ids"
+
+export type UseTreeFolderDnDOptions = {
+  data: TreeFolderNode[]
+  rowsById: RowLookup
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>
+  enabled: boolean
+  onMove?: (args: TreeFolderMoveArgs) => void
+  /**
+   * Predicate. Return false to forbid the drop. Defaults to allow except for
+   * dropping a node into itself or a descendant.
+   */
+  canDrop?: (args: {
+    dragIds: string[]
+    parentId: string | null
+    index: number
+  }) => boolean
+}
+
+export type UseTreeFolderDnDResult = {
+  dragIds: string[]
+  dropTarget: TreeFolderDropTarget | null
+  getRowDragHandlers: (rowId: string) => {
+    draggable: boolean
+    onDragStart: (e: React.DragEvent<HTMLElement>) => void
+    onDragEnd: (e: React.DragEvent<HTMLElement>) => void
+    onDragOver: (e: React.DragEvent<HTMLElement>) => void
+    onDragLeave: (e: React.DragEvent<HTMLElement>) => void
+    onDrop: (e: React.DragEvent<HTMLElement>) => void
+  }
+}
+
+export function useTreeFolderDnD({
+  data,
+  rowsById,
+  scrollContainerRef,
+  enabled,
+  onMove,
+  canDrop,
+}: UseTreeFolderDnDOptions): UseTreeFolderDnDResult {
+  const [dragIds, setDragIds] = useState<string[]>([])
+  const [dropTarget, setDropTarget] = useState<TreeFolderDropTarget | null>(null)
+
+  // Auto-scroll loop while the user is dragging near a container edge.
+  const autoScrollDeltaRef = useRef(0)
+  const autoScrollRafRef = useRef<number | null>(null)
+
+  const stopAutoScroll = useCallback(() => {
+    autoScrollDeltaRef.current = 0
+    if (autoScrollRafRef.current != null) {
+      cancelAnimationFrame(autoScrollRafRef.current)
+      autoScrollRafRef.current = null
+    }
+  }, [])
+
+  const tickAutoScroll = useCallback(() => {
+    const el = scrollContainerRef.current
+    const delta = autoScrollDeltaRef.current
+    if (!el || delta === 0) {
+      autoScrollRafRef.current = null
+      return
+    }
+    el.scrollTop += delta
+    autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll)
+  }, [scrollContainerRef])
+
+  const maybeAutoScroll = useCallback(
+    (clientY: number) => {
+      const el = scrollContainerRef.current
+      if (!el) return
+      const rect = el.getBoundingClientRect()
+      let delta = 0
+      if (clientY - rect.top < SCROLL_EDGE_PX) delta = -SCROLL_SPEED_PX_PER_FRAME
+      else if (rect.bottom - clientY < SCROLL_EDGE_PX) delta = SCROLL_SPEED_PX_PER_FRAME
+      autoScrollDeltaRef.current = delta
+      if (delta !== 0 && autoScrollRafRef.current == null) {
+        autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll)
+      } else if (delta === 0) {
+        stopAutoScroll()
+      }
+    },
+    [scrollContainerRef, stopAutoScroll, tickAutoScroll],
+  )
+
+  useEffect(() => stopAutoScroll, [stopAutoScroll])
+
+  const computePosition = useCallback(
+    (target: HTMLElement, clientY: number, isInternal: boolean): TreeFolderDropPosition => {
+      const rect = target.getBoundingClientRect()
+      const offset = clientY - rect.top
+      const ratio = offset / rect.height
+      // Leaves can't accept "inside" drops — squash that zone into before/after.
+      if (!isInternal) return ratio < 0.5 ? "before" : "after"
+      if (ratio < 0.25) return "before"
+      if (ratio > 0.75) return "after"
+      return "inside"
+    },
+    [],
+  )
+
+  const resolveMoveArgs = useCallback(
+    (drag: string[], drop: TreeFolderDropTarget): TreeFolderMoveArgs | null => {
+      const targetRow = rowsById.get(drop.rowId)
+      if (!targetRow) return null
+
+      let parentId: string | null
+      let index: number
+
+      if (drop.position === "inside") {
+        parentId = targetRow.node.id
+        // Drop at the end of the target's children.
+        index = targetRow.node.children?.length ?? 0
+      } else {
+        parentId = targetRow.parentId
+        index = drop.position === "before" ? targetRow.childIndex : targetRow.childIndex + 1
+      }
+
+      // Reject: dropping into self or any descendant.
+      for (const id of drag) {
+        const node = rowsById.get(id)?.node
+        if (!node) continue
+        if (parentId && (node.id === parentId || isAncestor(node, parentId))) return null
+      }
+
+      if (canDrop && !canDrop({ dragIds: drag, parentId, index })) return null
+
+      // No-op safety: skipping the equivalent of "drop where you already are".
+      if (drag.length === 1) {
+        const onlyDrag = rowsById.get(drag[0])
+        if (
+          onlyDrag &&
+          onlyDrag.parentId === parentId &&
+          (onlyDrag.childIndex === index || onlyDrag.childIndex + 1 === index)
+        ) {
+          return null
+        }
+      }
+
+      return { dragIds: drag, parentId, index }
+    },
+    [rowsById, canDrop],
+  )
+
+  const getRowDragHandlers = useCallback(
+    (rowId: string) => {
+      if (!enabled) {
+        return {
+          draggable: false,
+          onDragStart: () => {},
+          onDragEnd: () => {},
+          onDragOver: () => {},
+          onDragLeave: () => {},
+          onDrop: () => {},
+        }
+      }
+      return {
+        draggable: true,
+        onDragStart: (e: React.DragEvent<HTMLElement>) => {
+          const ids = [rowId]
+          setDragIds(ids)
+          e.dataTransfer.effectAllowed = "move"
+          try {
+            e.dataTransfer.setData(DRAG_DATA_MIME, ids.join(","))
+            // Required for Firefox to initiate the drag at all.
+            e.dataTransfer.setData("text/plain", ids.join(","))
+          } catch {
+            // setData can throw in some sandboxed contexts; ignore.
+          }
+        },
+        onDragEnd: () => {
+          setDragIds([])
+          setDropTarget(null)
+          stopAutoScroll()
+        },
+        onDragOver: (e: React.DragEvent<HTMLElement>) => {
+          if (dragIds.length === 0) return
+          // Reject self-drops upfront so the cursor reflects "no drop" outside the tree.
+          if (dragIds.includes(rowId)) {
+            e.dataTransfer.dropEffect = "none"
+            return
+          }
+          const row = rowsById.get(rowId)
+          if (!row) return
+          // Reject dropping onto a descendant of any dragged node.
+          for (const dragId of dragIds) {
+            const dragNode = rowsById.get(dragId)?.node
+            if (dragNode && isAncestor(dragNode, rowId)) {
+              e.dataTransfer.dropEffect = "none"
+              return
+            }
+          }
+          e.preventDefault()
+          e.dataTransfer.dropEffect = "move"
+          const position = computePosition(e.currentTarget, e.clientY, row.isInternal)
+          // Only setState when something actually changed (avoids re-render storms).
+          setDropTarget((prev) =>
+            prev && prev.rowId === rowId && prev.position === position
+              ? prev
+              : { rowId, position },
+          )
+          maybeAutoScroll(e.clientY)
+        },
+        onDragLeave: () => {
+          // No-op: onDragOver on the next row will overwrite dropTarget. Clearing
+          // here would flicker the indicator during normal row-to-row hovering.
+        },
+        onDrop: (e: React.DragEvent<HTMLElement>) => {
+          if (dragIds.length === 0) return
+          e.preventDefault()
+          const row = rowsById.get(rowId)
+          if (!row) {
+            setDragIds([])
+            setDropTarget(null)
+            stopAutoScroll()
+            return
+          }
+          const position = computePosition(e.currentTarget, e.clientY, row.isInternal)
+          const moveArgs = resolveMoveArgs(dragIds, { rowId, position })
+          if (moveArgs) onMove?.(moveArgs)
+          setDragIds([])
+          setDropTarget(null)
+          stopAutoScroll()
+        },
+      }
+    },
+    [
+      enabled,
+      dragIds,
+      rowsById,
+      computePosition,
+      resolveMoveArgs,
+      onMove,
+      maybeAutoScroll,
+      stopAutoScroll,
+    ],
+  )
+
+  // If the data tree changes mid-drag, clear stale targets.
+  useEffect(() => {
+    if (dragIds.length === 0) return
+    setDropTarget((prev) => (prev && rowsById.has(prev.rowId) ? prev : null))
+  }, [data, rowsById, dragIds.length])
+
+  return { dragIds, dropTarget, getRowDragHandlers }
+}

package/apps/lib/hooks/useDataViewsState.ts

@@ -0,0 +1,169 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import type {
+  DynamicRecord,
+  DynamicColumnConfig,
+  FieldConfig,
+  FilterState,
+  TreeConfig,
+  ViewConfig,
+  ViewType,
+  ViewVisibility,
+} from "../components/DataViews/types"
+import { defaultConfig } from "../components/DataViews/types"
+import { detectColumns, mergeColumns } from "../utils/dataViews/columnUtils"
+import { detectFields, mergeFields } from "../utils/dataViews/fieldUtils"
+import { autoDetectTreeShape, flattenAll } from "../utils/dataViews/treeUtils"
+
+export type UseDataViewsStateOptions = {
+  data?: DynamicRecord[]
+  fields?: FieldConfig[]
+  columns?: Partial<DynamicColumnConfig>[]
+  config?: Partial<ViewConfig>
+  treeConfig?: TreeConfig
+  views?: ViewVisibility
+  filterState?: FilterState
+  onFilterChange?: (filters: FilterState) => void
+}
+
+export function useDataViewsState({
+  data,
+  fields,
+  columns,
+  config: initialConfig,
+  treeConfig,
+  views,
+  filterState: externalFilterState,
+  onFilterChange,
+}: UseDataViewsStateOptions) {
+  const [currentView, setCurrentView] = useState<ViewType>(
+    initialConfig?.defaultView || defaultConfig.defaultView,
+  )
+  const [config, setConfig] = useState<ViewConfig>({ ...defaultConfig, ...initialConfig })
+  const [items, setItems] = useState<DynamicRecord[]>(data || [])
+  const [internalFilterState, setInternalFilterState] = useState<FilterState>({})
+
+  useEffect(() => {
+    setItems(data || [])
+  }, [data])
+
+  const activeFilterState = externalFilterState ?? internalFilterState
+
+  const treeShape = useMemo(
+    () => autoDetectTreeShape(items, treeConfig ?? {}),
+    [items, treeConfig],
+  )
+  const treeAutoAvailable =
+    !!treeConfig || !!treeShape.childrenField || !!treeShape.parentField
+
+  const enabledViews = useMemo<Record<ViewType, boolean>>(() => {
+    const v = views ?? {}
+    return {
+      table:  v.table  ?? true,
+      kanban: v.kanban ?? true,
+      inbox:  v.inbox  ?? true,
+      tree:   v.tree   ?? treeAutoAvailable,
+    }
+  }, [views, treeAutoAvailable])
+
+  useEffect(() => {
+    if (!enabledViews[currentView]) {
+      const fallback = (Object.entries(enabledViews) as Array<[ViewType, boolean]>)
+        .find(([, on]) => on)?.[0]
+      if (fallback) setCurrentView(fallback)
+    }
+  }, [enabledViews, currentView])
+
+  const flatItems = useMemo<DynamicRecord[]>(() => {
+    const cf = treeConfig?.childrenField ?? treeShape.childrenField
+    if (!cf) return items
+    return flattenAll(items, cf)
+  }, [items, treeConfig?.childrenField, treeShape.childrenField])
+
+  const detectedFields = useMemo<FieldConfig[]>(() => {
+    if (!flatItems || flatItems.length === 0) return []
+    const detected = detectFields(flatItems)
+    return mergeFields(detected, fields)
+  }, [flatItems, fields])
+
+  const resolvedFields = useMemo<FieldConfig[]>(() => {
+    if (detectedFields.length === 0) return detectedFields
+    const overrides = new Map(config.tableColumns.map((c) => [c.id, c]))
+    return detectedFields
+      .map((f) => {
+        const o = overrides.get(f.path)
+        if (!o) return f
+        return { ...f, visible: o.visible, order: o.order }
+      })
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+  }, [detectedFields, config.tableColumns])
+
+  const detectedColumns = useMemo<DynamicColumnConfig[]>(() => {
+    if (!flatItems || flatItems.length === 0) return []
+    const detected = detectColumns(flatItems)
+    return mergeColumns(detected, columns)
+  }, [flatItems, columns])
+
+  useEffect(() => {
+    if (detectedFields.length === 0) return
+    setConfig((prev) => {
+      const prevByPath = new Map(prev.tableColumns.map((c) => [c.id, c]))
+      const next: typeof prev.tableColumns = []
+      let order = 0
+      for (const f of detectedFields) {
+        if (f.type === "hidden") continue
+        const existing = prevByPath.get(f.path)
+        next.push({
+          id: f.path,
+          label: f.label ?? f.path,
+          visible: existing?.visible ?? f.visible !== false,
+          order: existing?.order ?? order,
+        })
+        order++
+        prevByPath.delete(f.path)
+      }
+      const stale = Array.from(prevByPath.values())
+      const carried = [...next, ...stale].slice(0, 100)
+      if (
+        carried.length === prev.tableColumns.length &&
+        carried.every((c, i) => {
+          const p = prev.tableColumns[i]
+          return p && p.id === c.id && p.label === c.label && p.visible === c.visible && p.order === c.order
+        })
+      ) {
+        return prev
+      }
+      return { ...prev, tableColumns: carried }
+    })
+  }, [detectedFields])
+
+  const handleConfigChange = (newConfig: Partial<ViewConfig>) => {
+    setConfig((prev) => ({ ...prev, ...newConfig }))
+  }
+
+  const handleDataUpdate = (updatedData: DynamicRecord[]) => {
+    setItems(updatedData)
+  }
+
+  const handleFilterChange = (newFilters: FilterState) => {
+    if (onFilterChange) onFilterChange(newFilters)
+    else setInternalFilterState(newFilters)
+  }
+
+  return {
+    items,
+    flatItems,
+    resolvedFields,
+    detectedColumns,
+    config,
+    setConfig: handleConfigChange,
+    currentView,
+    setCurrentView,
+    filterState: activeFilterState,
+    setFilterState: handleFilterChange,
+    onDataUpdate: handleDataUpdate,
+    treeShape,
+    enabledViews,
+  }
+}

package/apps/lib/hooks/useIsMobile.ts

@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/apps/lib/utils/dataViews/columnUtils.ts

@@ -0,0 +1,130 @@
+import type { DynamicColumnConfig, DynamicRecord } from "../../components/DataViews/types"
+import { isPlainObject } from "./nestedDataUtils"
+
+export function detectColumns(data: DynamicRecord[]): DynamicColumnConfig[] {
+  if (!data || data.length === 0) {
+    return []
+  }
+
+  const allKeys = new Set<string>()
+  data.forEach((item) => {
+    Object.keys(item).forEach((key) => allKeys.add(key))
+  })
+
+  const columns: DynamicColumnConfig[] = []
+  let order = 0
+
+  allKeys.forEach((key) => {
+    if (key.startsWith("_")) return
+
+    const firstValue = data.find((item) => item[key] != null)?.[key]
+
+    if (isPlainObject(firstValue)) return
+    if (Array.isArray(firstValue) && firstValue.length > 0 && isPlainObject(firstValue[0])) return
+
+    const type = inferColumnType(key, firstValue)
+
+    columns.push({
+      id: key,
+      label: formatLabel(key),
+      visible: true,
+      order: order++,
+      type,
+    })
+  })
+
+  return columns.sort((a, b) => {
+    if (a.id === "id") return -1
+    if (b.id === "id") return 1
+    return a.label.localeCompare(b.label)
+  }).map((col, idx) => ({ ...col, order: idx }))
+}
+
+function inferColumnType(
+  key: string,
+  value: any
+): "text" | "number" | "date" | "badge" | "array" | "boolean" {
+  if (key.toLowerCase().includes("date") || key.toLowerCase().includes("time")) {
+    return "date"
+  }
+  if (key.toLowerCase().includes("status") || key.toLowerCase().includes("priority")) {
+    return "badge"
+  }
+  if (key.toLowerCase().includes("tag") || key.toLowerCase().includes("label")) {
+    return "array"
+  }
+
+  if (value === null || value === undefined) {
+    return "text"
+  }
+
+  if (typeof value === "boolean") {
+    return "boolean"
+  }
+
+  if (typeof value === "number") {
+    return "number"
+  }
+
+  if (Array.isArray(value)) {
+    return "array"
+  }
+
+  if (typeof value === "string") {
+    if (!isNaN(Date.parse(value)) && /^\d{4}-\d{2}-\d{2}/.test(value)) {
+      return "date"
+    }
+    return "text"
+  }
+
+  return "text"
+}
+
+function formatLabel(key: string): string {
+  if (key.includes("_")) {
+    return key
+      .split("_")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ")
+  }
+
+  return key
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (str) => str.toUpperCase())
+    .trim()
+}
+
+export function mergeColumns(
+  detected: DynamicColumnConfig[],
+  custom?: Partial<DynamicColumnConfig>[]
+): DynamicColumnConfig[] {
+  if (!custom || custom.length === 0) {
+    return detected
+  }
+
+  const merged = [...detected]
+  const customMap = new Map(custom.map((col) => [col.id, col]))
+
+  merged.forEach((col, idx) => {
+    const customCol = customMap.get(col.id)
+    if (customCol) {
+      merged[idx] = { ...col, ...customCol }
+      customMap.delete(col.id)
+    }
+  })
+
+  customMap.forEach((customCol) => {
+    if (customCol.id) {
+      merged.push({
+        id: customCol.id,
+        label: customCol.label || formatLabel(customCol.id),
+        visible: customCol.visible ?? true,
+        order: customCol.order ?? merged.length,
+        type: customCol.type || "text",
+        render: customCol.render,
+      })
+    }
+  })
+
+  return merged.sort((a, b) => a.order - b.order)
+}