torch-glare 2.1.1 → 2.1.2

package/apps/lib/components/DataViews/tree/TreeDrawer.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { Drawer } from "vaul"
+import { Menu, X } from "lucide-react"
+import type { ReactNode } from "react"
+
+type Props = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  children: ReactNode
+}
+
+export function TreeDrawer({ open, onOpenChange, children }: Props) {
+  return (
+    <Drawer.Root open={open} onOpenChange={onOpenChange} direction="left">
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 bg-black/40 z-40" />
+        <Drawer.Content
+          className="fixed inset-y-0 left-0 z-50 w-72 bg-background-presentation-body-overlay-primary border-r border-border-presentation-global-primary outline-none flex flex-col"
+        >
+          <div className="flex items-center justify-between p-3 border-b border-border-presentation-global-primary">
+            <Drawer.Title className="text-sm font-semibold text-content-presentation-global-primary">
+              Tree
+            </Drawer.Title>
+            <button
+              type="button"
+              onClick={() => onOpenChange(false)}
+              aria-label="Close tree"
+              className="p-1 rounded text-content-presentation-global-tertiary hover:text-content-presentation-global-primary"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+          <div className="flex-1 overflow-y-auto p-2">
+            {children}
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  )
+}
+
+export function TreeDrawerTrigger({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="Open tree"
+      className="inline-flex items-center justify-center h-8 w-8 rounded-md border border-border-presentation-global-primary text-content-presentation-global-secondary hover:text-content-presentation-global-primary"
+    >
+      <Menu className="w-4 h-4" />
+    </button>
+  )
+}

package/apps/lib/components/DataViews/tree/TreeSidebar.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { useMemo } from "react"
+import type { FieldConfig } from "../types"
+import type { TreeNode } from "../../../utils/dataViews/treeUtils"
+import { getByPath } from "../../../utils/dataViews/pathUtils"
+import { TreeFolder } from "../../TreeFolder"
+import type {
+  TreeFolderMoveArgs,
+  TreeFolderNode,
+} from "../../TreeFolder"
+
+type Props = {
+  roots: TreeNode[]
+  expanded: Set<string>
+  selectedId: string | null
+  labelField: FieldConfig
+  dndEnabled: boolean
+  onToggle: (id: string) => void
+  onSelect: (id: string) => void
+  onMove?: (args: TreeFolderMoveArgs) => void
+}
+
+function toFolderNode(node: TreeNode, labelField: FieldConfig): TreeFolderNode {
+  const labelValue = getByPath(node.record, labelField.path)
+  const name = labelValue == null ? node.id : String(labelValue)
+  const children = node.children.length
+    ? node.children.map((c) => toFolderNode(c, labelField))
+    : undefined
+  return {
+    id: node.id,
+    name,
+    type: children ? "folder" : "file",
+    data: node.record,
+    children,
+  }
+}
+
+export function TreeSidebar({
+  roots,
+  expanded,
+  selectedId,
+  labelField,
+  dndEnabled,
+  onToggle,
+  onSelect,
+  onMove,
+}: Props) {
+  const folderData = useMemo(
+    () => roots.map((r) => toFolderNode(r, labelField)),
+    [roots, labelField],
+  )
+
+  const expandedIds = useMemo(() => Array.from(expanded), [expanded])
+
+  return (
+    <TreeFolder
+      data={folderData}
+      selectedId={selectedId}
+      onSelectionChange={(id) => {
+        if (id) onSelect(id)
+      }}
+      expandedIds={expandedIds}
+      onExpandedChange={(next) => {
+        const before = new Set(expandedIds)
+        const after = new Set(next)
+        for (const id of after) if (!before.has(id)) onToggle(id)
+        for (const id of before) if (!after.has(id)) onToggle(id)
+      }}
+      dndEnabled={dndEnabled}
+      onMove={onMove}
+      showHeader={false}
+      showBreadcrumb={true}
+      highlightAncestors={true}
+    />
+  )
+}

package/apps/lib/components/DataViews/types.ts

@@ -0,0 +1,177 @@
+import type React from "react"
+
+export type ViewType = "table" | "kanban" | "inbox" | "tree"
+
+export type TreeConfig = {
+  childrenField?: string
+  parentField?: string
+  idField?: string
+  orderField?: string
+  nodeLabel?: string
+  defaultExpanded?: "all" | "roots" | "none"
+  defaultRightPane?: "table" | "details"
+  dndEnabled?: boolean
+}
+
+export type ViewVisibility = {
+  table?: boolean
+  kanban?: boolean
+  inbox?: boolean
+  tree?: boolean
+}
+
+export type DynamicRecord = Record<string, any>
+
+export type DynamicColumnConfig = {
+  id: string
+  label: string
+  visible: boolean
+  order: number
+  type?: "text" | "number" | "date" | "badge" | "array" | "boolean"
+  render?: (value: any, row: DynamicRecord) => React.ReactNode
+}
+
+export type DynamicFilterConfig = {
+  id: string
+  label?: string
+  enabled?: boolean
+  order?: number
+  options?: string[] | { label: string; value: string }[]
+  render?: (value: string, isSelected: boolean) => React.ReactNode
+  onChange?: (selectedValues: string[]) => void
+}
+
+export type NumericRangeFilter = { kind: "number"; min?: number; max?: number }
+export type DateRangeFilter = { kind: "date"; from?: string; to?: string }
+export type RangeFilter = NumericRangeFilter | DateRangeFilter
+export type FilterValue = string[] | RangeFilter
+export type FilterState = Record<string, FilterValue>
+
+export type FieldPreset =
+  | { label: string; min?: number; max?: number }
+  | { label: string; from?: string; to?: string }
+
+export type BadgeVariant =
+  | "green"
+  | "greenLight"
+  | "cocktailGreen"
+  | "yellow"
+  | "redOrange"
+  | "redLight"
+  | "rose"
+  | "purple"
+  | "bluePurple"
+  | "blue"
+  | "navy"
+  | "gray"
+  | "highlight"
+
+export type FieldType =
+  | "text"
+  | "number"
+  | "date"
+  | "boolean"
+  | "hidden"
+  | "enum-badge"
+  | "badge-array"
+  | "currency"
+  | "number-format"
+  | "progress-bar"
+  | "star-rating"
+  | "icon-text"
+  | "two-line"
+  | "avatar"
+  | "link"
+  | "image"
+  | "date-format"
+
+export type CurrencyOptions = {
+  symbol?: string
+  locale?: string
+  decimals?: number
+  code?: string
+}
+
+export type FieldConfig = {
+  path: string
+  label?: string
+  type?: FieldType
+  visible?: boolean
+  order?: number
+
+  variants?: Record<string, BadgeVariant>
+  defaultVariant?: BadgeVariant
+
+  variant?: BadgeVariant
+  limit?: number
+
+  currency?: string | CurrencyOptions
+  format?: Intl.NumberFormatOptions
+
+  thresholds?: [number, number]
+
+  max?: number
+
+  icon?: string
+  iconPosition?: "before" | "after"
+
+  secondaryPath?: string
+
+  linkType?: "mailto" | "tel" | "url"
+
+  fallbackPath?: string
+
+  dateFormat?: string | Intl.DateTimeFormatOptions
+
+  trueLabel?: string
+  falseLabel?: string
+  trueVariant?: BadgeVariant
+  falseVariant?: BadgeVariant
+
+  filterable?: boolean
+  filterLabel?: string
+  filterOptions?: string[] | { label: string; value: string }[]
+  presets?: FieldPreset[]
+  rangeMin?: number
+  rangeMax?: number
+  rangeStep?: number
+  onFilterChange?: (value: FilterValue) => void
+
+  render?: (value: any, row: DynamicRecord) => React.ReactNode
+}
+
+export type InboxConfig = {
+  starredField?: string | null
+  readField?: string | null
+  attachmentField?: string | null
+  priorityField?: string | null
+  titlePath?: string
+  previewPath?: string
+}
+
+export type ColumnConfig = {
+  id: string
+  label: string
+  visible: boolean
+  order: number
+}
+
+export type ViewConfig = {
+  defaultView: ViewType
+  tableColumns: ColumnConfig[]
+  kanbanGroupBy: string
+  showFilters: boolean
+  showPreviewPane: boolean
+  sortBy: string
+  sortOrder: "asc" | "desc"
+}
+
+export const defaultConfig: ViewConfig = {
+  defaultView: "table",
+  tableColumns: [],
+  kanbanGroupBy: "",
+  showFilters: true,
+  showPreviewPane: true,
+  sortBy: "",
+  sortOrder: "desc",
+}

package/apps/lib/components/TreeFolder/TreeFolder.tsx

@@ -0,0 +1,387 @@
+"use client"
+
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react"
+import { cn } from "../../utils/cn"
+import type { Themes } from "../../utils/types"
+import { TreeFolderBreadcrumb } from "./TreeFolderBreadcrumb"
+import { TreeFolderRow } from "./TreeFolderRow"
+import { TreeFolderStyles } from "./TreeFolderStyles"
+import {
+  applyMove,
+  descendantIds,
+  findNode,
+  findPath,
+  toBreadcrumb,
+} from "./treeFolderUtils"
+import type {
+  TreeFolderIconResolver,
+  TreeFolderMoveArgs,
+  TreeFolderNode,
+  TreeFolderVisibleRow,
+} from "./types"
+import { useTreeFolderDnD } from "./useTreeFolderDnD"
+
+export type TreeFolderProps = {
+  data: TreeFolderNode[]
+  selectedId?: string | null
+  defaultSelectedId?: string | null
+  onSelectionChange?: (id: string | null) => void
+
+  expandedIds?: string[]
+  defaultExpanded?: "all" | "roots" | "none" | string[]
+  onExpandedChange?: (ids: string[]) => void
+
+  dndEnabled?: boolean
+  onMove?: (args: TreeFolderMoveArgs) => void
+  onDataChange?: (next: TreeFolderNode[]) => void
+
+  iconFor?: TreeFolderIconResolver
+
+  title?: string
+  showBreadcrumb?: boolean
+  showHeader?: boolean
+  highlightAncestors?: boolean
+  highlightSubtree?: boolean
+  headerAccessory?: ReactNode
+  emptyState?: ReactNode
+
+  rowHeight?: number
+  indent?: number
+  /** Optional. If set, the row strip will be at least this wide (in px) — useful
+   *  when you want the band to extend across a wider canvas regardless of content. */
+  contentMinWidth?: number
+
+  className?: string
+  theme?: Themes
+}
+
+export type TreeFolderHandle = {
+  selectId: (id: string | null) => void
+  expandAll: () => void
+  collapseAll: () => void
+  scrollToId: (id: string) => void
+}
+
+const ROW_HEIGHT_DEFAULT = 28
+const INDENT_DEFAULT = 14
+
+function collectIds(nodes: TreeFolderNode[], out: string[] = []): string[] {
+  for (const n of nodes) {
+    out.push(n.id)
+    if (n.children) collectIds(n.children, out)
+  }
+  return out
+}
+
+function rootIds(nodes: TreeFolderNode[]): string[] {
+  return nodes.map((n) => n.id)
+}
+
+function flattenVisible(
+  data: TreeFolderNode[],
+  expanded: Set<string>,
+): TreeFolderVisibleRow[] {
+  const out: TreeFolderVisibleRow[] = []
+  const walk = (
+    nodes: TreeFolderNode[],
+    level: number,
+    parentId: string | null,
+  ) => {
+    nodes.forEach((node, idx) => {
+      const isInternal = !!(node.children && node.children.length > 0)
+      const isOpen = isInternal && expanded.has(node.id)
+      out.push({ node, level, parentId, childIndex: idx, isOpen, isInternal })
+      if (isOpen && node.children) walk(node.children, level + 1, node.id)
+    })
+  }
+  walk(data, 0, null)
+  return out
+}
+
+export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
+  function TreeFolder(props, ref) {
+    const {
+      data,
+      selectedId: controlledSelected,
+      defaultSelectedId = null,
+      onSelectionChange,
+      expandedIds: controlledExpanded,
+      defaultExpanded = "roots",
+      onExpandedChange,
+      dndEnabled = true,
+      onMove,
+      onDataChange,
+      iconFor,
+      title = "Layers",
+      showBreadcrumb = true,
+      showHeader = true,
+      highlightAncestors = true,
+      highlightSubtree = true,
+      headerAccessory,
+      emptyState,
+      rowHeight = ROW_HEIGHT_DEFAULT,
+      indent = INDENT_DEFAULT,
+      contentMinWidth,
+      className,
+      theme,
+    } = props
+
+    const scrollRef = useRef<HTMLDivElement | null>(null)
+
+    // ---- Selection state ----
+    const [internalSelected, setInternalSelected] = useState<string | null>(
+      defaultSelectedId,
+    )
+    const selectedId =
+      controlledSelected !== undefined ? controlledSelected : internalSelected
+    const isSelectionControlled = controlledSelected !== undefined
+
+    // ---- Expansion state ----
+    const [internalExpanded, setInternalExpanded] = useState<string[]>(() => {
+      if (Array.isArray(defaultExpanded)) return defaultExpanded
+      if (defaultExpanded === "all") return collectIds(data)
+      if (defaultExpanded === "none") return []
+      return rootIds(data)
+    })
+    const expandedIds = controlledExpanded ?? internalExpanded
+    const isExpansionControlled = controlledExpanded !== undefined
+    const expandedSet = useMemo(() => new Set(expandedIds), [expandedIds])
+
+    // ---- Visible rows ----
+    const visibleRows = useMemo(
+      () => flattenVisible(data, expandedSet),
+      [data, expandedSet],
+    )
+    const rowsById = useMemo(() => {
+      const m = new Map<string, TreeFolderVisibleRow>()
+      for (const r of visibleRows) m.set(r.node.id, r)
+      return m
+    }, [visibleRows])
+
+    // ---- Ancestor + subtree highlight ----
+    const ancestorPath = useMemo(
+      () => (selectedId ? findPath(data, selectedId) : null),
+      [data, selectedId],
+    )
+    const ancestorIdSet = useMemo(
+      () => new Set((ancestorPath ?? []).slice(0, -1).map((n) => n.id)),
+      [ancestorPath],
+    )
+    const isAncestorFn = useCallback(
+      (id: string) => highlightAncestors && ancestorIdSet.has(id),
+      [highlightAncestors, ancestorIdSet],
+    )
+
+    const descendantIdSet = useMemo(() => {
+      if (!highlightSubtree || !selectedId) return new Set<string>()
+      const node = findNode(data, selectedId)
+      if (!node) return new Set<string>()
+      return descendantIds(node, false)
+    }, [data, selectedId, highlightSubtree])
+    const isDescendantOfSelected = useCallback(
+      (id: string) => descendantIdSet.has(id),
+      [descendantIdSet],
+    )
+
+    const breadcrumbItems = useMemo(
+      () => (ancestorPath ? toBreadcrumb(ancestorPath) : []),
+      [ancestorPath],
+    )
+
+    // ---- Handlers ----
+    const handleSelect = useCallback(
+      (id: string | null) => {
+        if (!isSelectionControlled) setInternalSelected(id)
+        onSelectionChange?.(id)
+      },
+      [isSelectionControlled, onSelectionChange],
+    )
+
+    const handleToggle = useCallback(
+      (id: string) => {
+        const next = expandedIds.includes(id)
+          ? expandedIds.filter((x) => x !== id)
+          : [...expandedIds, id]
+        if (!isExpansionControlled) setInternalExpanded(next)
+        onExpandedChange?.(next)
+      },
+      [expandedIds, isExpansionControlled, onExpandedChange],
+    )
+
+    const handleMoveInternal = useCallback(
+      (args: TreeFolderMoveArgs) => {
+        onMove?.(args)
+        if (onDataChange) onDataChange(applyMove(data, args))
+      },
+      [data, onMove, onDataChange],
+    )
+
+    const scrollToId = useCallback((id: string) => {
+      const el = scrollRef.current?.querySelector<HTMLElement>(
+        `[data-row-id="${CSS.escape(id)}"]`,
+      )
+      el?.scrollIntoView({ block: "nearest", behavior: "smooth" })
+    }, [])
+
+    // ---- DnD ----
+    const { dragIds, dropTarget, getRowDragHandlers } = useTreeFolderDnD({
+      data,
+      rowsById,
+      scrollContainerRef: scrollRef,
+      enabled: dndEnabled,
+      onMove: handleMoveInternal,
+      canDrop: ({ parentId }) => {
+        // Honor per-node `droppable: false` on the resolved parent.
+        if (parentId == null) return true
+        const target = findNode(data, parentId)
+        if (!target) return false
+        if (target.disabled || target.droppable === false) return false
+        return true
+      },
+    })
+    const dragIdSet = useMemo(() => new Set(dragIds), [dragIds])
+
+    // ---- Imperative handle ----
+    useImperativeHandle(
+      ref,
+      () => ({
+        selectId: (id: string | null) => {
+          if (!isSelectionControlled) setInternalSelected(id)
+          onSelectionChange?.(id)
+          if (id) scrollToId(id)
+        },
+        expandAll: () => {
+          const all = collectIds(data)
+          if (!isExpansionControlled) setInternalExpanded(all)
+          onExpandedChange?.(all)
+        },
+        collapseAll: () => {
+          if (!isExpansionControlled) setInternalExpanded([])
+          onExpandedChange?.([])
+        },
+        scrollToId,
+      }),
+      [
+        data,
+        isSelectionControlled,
+        isExpansionControlled,
+        onSelectionChange,
+        onExpandedChange,
+        scrollToId,
+      ],
+    )
+
+    const isEmpty = data.length === 0
+    const stripStyle = contentMinWidth
+      ? { minWidth: contentMinWidth }
+      : undefined
+
+    return (
+      <div
+        data-theme={theme}
+        className={cn(
+          "flex h-full w-full flex-col bg-background-presentation-body-overlay-primary text-content-presentation-global-primary",
+          className,
+        )}
+      >
+        {showHeader && (
+          <div className="px-3 py-2 border-b border-border-presentation-global-primary flex items-center justify-between gap-2 shrink-0">
+            <span className="text-xs font-semibold text-content-presentation-global-secondary uppercase tracking-wide truncate">
+              {title}
+            </span>
+            {headerAccessory}
+          </div>
+        )}
+
+        {showBreadcrumb && (
+          <div className="border-b border-border-presentation-global-primary shrink-0">
+            <TreeFolderBreadcrumb
+              items={breadcrumbItems}
+              onSelect={(id) => {
+                handleSelect(id)
+                scrollToId(id)
+              }}
+            />
+          </div>
+        )}
+
+        <TreeFolderStyles />
+        <div
+          ref={scrollRef}
+          role="tree"
+          className="tf-scroll flex-1 min-h-0 overflow-auto"
+        >
+          {isEmpty ? (
+            emptyState ?? (
+              <div className="text-xs text-content-presentation-global-tertiary p-3">
+                Nothing here yet.
+              </div>
+            )
+          ) : (
+            <div className="min-w-max" style={stripStyle}>
+              {visibleRows.map((row, idx) => {
+                const prevRow = visibleRows[idx - 1]
+                const nextRow = visibleRows[idx + 1]
+                const isSelected = selectedId === row.node.id
+                const isDescendant = isDescendantOfSelected(row.node.id) && !isSelected
+                const inBand = isSelected || isDescendant
+
+                // Neighbour-aware band rounding: a row is "in-band" if it's the selected
+                // node itself or one of its descendants. The Set lookup handles deep nesting.
+                const prevInBand =
+                  inBand &&
+                  !!prevRow &&
+                  (prevRow.node.id === selectedId ||
+                    descendantIdSet.has(prevRow.node.id))
+                const nextInBand =
+                  inBand &&
+                  !!nextRow &&
+                  (nextRow.node.id === selectedId ||
+                    descendantIdSet.has(nextRow.node.id))
+
+                const isDragging = dragIdSet.has(row.node.id)
+                const isDropTargetInside =
+                  dropTarget?.rowId === row.node.id && dropTarget.position === "inside"
+                const isDropBefore =
+                  dropTarget?.rowId === row.node.id && dropTarget.position === "before"
+                const isDropAfter =
+                  dropTarget?.rowId === row.node.id && dropTarget.position === "after"
+
+                return (
+                  <TreeFolderRow
+                    key={row.node.id}
+                    row={row}
+                    rowHeight={rowHeight}
+                    indent={indent}
+                    iconFor={iconFor}
+                    isSelected={isSelected}
+                    isAncestor={isAncestorFn(row.node.id) && !isSelected}
+                    isDescendantOfSelected={isDescendant}
+                    isPrevInBand={prevInBand}
+                    isNextInBand={nextInBand}
+                    isDragging={isDragging}
+                    isDropTargetInside={isDropTargetInside}
+                    isDropBefore={isDropBefore}
+                    isDropAfter={isDropAfter}
+                    dndEnabled={dndEnabled}
+                    onSelect={handleSelect}
+                    onToggle={handleToggle}
+                    dragHandlers={getRowDragHandlers(row.node.id)}
+                  />
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  },
+)