torch-glare 2.1.1 → 2.1.2

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

@@ -0,0 +1,198 @@
+import type {
+  DynamicRecord,
+  FieldConfig,
+  FieldType,
+  DynamicColumnConfig,
+  InboxConfig,
+} from "../../components/DataViews/types"
+import { findFirstDefined, formatPathLabel, getByPath } from "./pathUtils"
+import { isPlainObject, isCurrencyField, isRatingField } from "./nestedDataUtils"
+
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}/
+
+const KEY_HINTS: Array<[RegExp, FieldType]> = [
+  [/(^|[._])status$/i, "enum-badge"],
+  [/(^|[._])priority$/i, "enum-badge"],
+  [/(^|[._])avatar(url)?$/i, "avatar"],
+  [/(^|[._])email$/i, "link"],
+  [/(^|[._])phone$/i, "link"],
+  [/(^|[._])url$|website$|homepage$/i, "link"],
+  [/(^|[._])(image|thumbnail|photo|picture)$/i, "image"],
+  [/(^|[._])tags?$|labels?$/i, "badge-array"],
+  [/(date|time)$/i, "date-format"],
+]
+
+export function inferFieldType(path: string, value: any): FieldType {
+  for (const [re, type] of KEY_HINTS) {
+    if (re.test(path)) return type
+  }
+
+  if (isCurrencyField(path)) return "currency"
+  if (isRatingField(path) && typeof value === "number" && value <= 5) return "star-rating"
+
+  if (value === null || value === undefined) return "text"
+  if (typeof value === "boolean") return "boolean"
+  if (typeof value === "number") return "number"
+  if (Array.isArray(value)) return "badge-array"
+  if (typeof value === "string") {
+    if (ISO_DATE.test(value) && !isNaN(Date.parse(value))) return "date-format"
+    return "text"
+  }
+  return "text"
+}
+
+export function detectFields(data: DynamicRecord[]): FieldConfig[] {
+  if (!data || data.length === 0) return []
+
+  const allKeys = new Set<string>()
+  for (const item of data) {
+    if (item && typeof item === "object") {
+      for (const k of Object.keys(item)) allKeys.add(k)
+    }
+  }
+
+  const fields: FieldConfig[] = []
+  let order = 0
+
+  for (const key of allKeys) {
+    if (key.startsWith("_")) continue
+
+    const sample = findFirstDefined(data, key)
+    if (isPlainObject(sample)) continue
+    if (Array.isArray(sample) && sample.length > 0 && isPlainObject(sample[0])) continue
+
+    fields.push({
+      path: key,
+      label: formatPathLabel(key),
+      type: inferFieldType(key, sample),
+      visible: true,
+      order: order++,
+    })
+  }
+
+  return fields
+    .sort((a, b) => {
+      if (a.path === "id") return -1
+      if (b.path === "id") return 1
+      return (a.label || "").localeCompare(b.label || "")
+    })
+    .map((f, i) => ({ ...f, order: i }))
+}
+
+export function mergeFields(
+  detected: FieldConfig[],
+  custom?: FieldConfig[],
+): FieldConfig[] {
+  if (!custom || custom.length === 0) return detected
+
+  const out = [...detected]
+  const byPath = new Map(out.map((f, i) => [f.path, i]))
+
+  for (const c of custom) {
+    if (!c.path) continue
+    const existing = byPath.get(c.path)
+    if (existing != null) {
+      out[existing] = { ...out[existing], ...c }
+    } else {
+      out.push({
+        ...c,
+        path: c.path,
+        label: c.label ?? formatPathLabel(c.path),
+        visible: c.visible ?? true,
+        order: c.order ?? out.length,
+      })
+      byPath.set(c.path, out.length - 1)
+    }
+  }
+
+  return out
+    .map((f, i) => ({ ...f, order: f.order ?? i }))
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+}
+
+export function visibleFields(fields: FieldConfig[]): FieldConfig[] {
+  return fields.filter((f) => f.type !== "hidden" && f.visible !== false)
+}
+
+export function fieldToColumn(field: FieldConfig, idx = 0): DynamicColumnConfig & {
+  __field: FieldConfig
+} {
+  const legacyType = mapFieldTypeToColumnType(field.type)
+  return {
+    id: field.path,
+    label: field.label ?? formatPathLabel(field.path),
+    visible: field.visible !== false && field.type !== "hidden",
+    order: field.order ?? idx,
+    type: legacyType,
+    render: field.render,
+    __field: field,
+  }
+}
+
+function mapFieldTypeToColumnType(t?: FieldType): DynamicColumnConfig["type"] {
+  switch (t) {
+    case "number":
+    case "currency":
+    case "number-format":
+    case "progress-bar":
+    case "star-rating":
+      return "number"
+    case "date":
+    case "date-format":
+      return "date"
+    case "enum-badge":
+    case "icon-text":
+    case "two-line":
+    case "link":
+      return "badge"
+    case "badge-array":
+      return "array"
+    case "boolean":
+      return "boolean"
+    default:
+      return "text"
+  }
+}
+
+const STARRED_PATTERNS = ["isStarred", "starred", "favorite", "isFavorite", "pinned"]
+const READ_PATTERNS = ["isRead", "read", "seen", "viewed"]
+const ATTACHMENT_PATTERNS = ["hasAttachment", "hasAttachments", "attachments", "files"]
+const PRIORITY_PATTERNS = ["priority", "urgency", "level", "importance"]
+
+function pickField(sample: DynamicRecord, patterns: string[]): string | null {
+  for (const p of patterns) {
+    if (p in sample) return p
+  }
+  return null
+}
+
+export function resolveInboxConfig(
+  data: DynamicRecord[],
+  user?: InboxConfig,
+): Required<Omit<InboxConfig, "titlePath" | "previewPath">> & Pick<InboxConfig, "titlePath" | "previewPath"> {
+  const sample = data?.[0] && typeof data[0] === "object" ? data[0] : {}
+
+  const auto = {
+    starredField: pickField(sample, STARRED_PATTERNS),
+    readField: pickField(sample, READ_PATTERNS),
+    attachmentField: pickField(sample, ATTACHMENT_PATTERNS),
+    priorityField: pickField(sample, PRIORITY_PATTERNS),
+  }
+
+  return {
+    starredField: user?.starredField !== undefined ? user.starredField : auto.starredField,
+    readField: user?.readField !== undefined ? user.readField : auto.readField,
+    attachmentField: user?.attachmentField !== undefined ? user.attachmentField : auto.attachmentField,
+    priorityField: user?.priorityField !== undefined ? user.priorityField : auto.priorityField,
+    titlePath: user?.titlePath,
+    previewPath: user?.previewPath,
+  }
+}
+
+export function readInboxField(
+  item: DynamicRecord,
+  field: string | null | undefined,
+): any {
+  if (!field) return undefined
+  return getByPath(item, field)
+}

package/apps/lib/utils/dataViews/nestedDataUtils.tsx

@@ -0,0 +1,364 @@
+import type { ReactElement } from "react"
+import { Badge } from "../../components/Badge"
+import { Divider } from "../../components/Divider"
+import { cn } from "../cn"
+import type { DynamicRecord, DynamicColumnConfig } from "../../components/DataViews/types"
+
+export type NestedFieldMetadata = {
+  key: string
+  label: string
+  type: 'object' | 'array' | 'primitive'
+  valueType?: 'string' | 'number' | 'boolean' | 'date'
+  isArrayOfObjects?: boolean
+  depth: number
+}
+
+export function isPlainObject(value: any): boolean {
+  return value !== null &&
+         typeof value === 'object' &&
+         !Array.isArray(value) &&
+         !(value instanceof Date) &&
+         Object.keys(value).length > 0
+}
+
+export function formatFieldName(fieldName: string): string {
+  if (fieldName.includes("_")) {
+    return fieldName
+      .split("_")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ")
+  }
+
+  return fieldName
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (str) => str.toUpperCase())
+    .trim()
+}
+
+export function analyzeNestedFields(
+  item: DynamicRecord,
+  visibleColumnIds: Set<string> = new Set(),
+  excludeKeys: string[] = ['id', 'isRead', 'isStarred', 'hasAttachment', 'priority']
+): NestedFieldMetadata[] {
+  const nestedFields: NestedFieldMetadata[] = []
+
+  Object.entries(item).forEach(([key, value]) => {
+    if (visibleColumnIds.has(key) || excludeKeys.includes(key)) {
+      return
+    }
+
+    if (isPlainObject(value)) {
+      nestedFields.push({
+        key,
+        label: formatFieldName(key),
+        type: 'object',
+        depth: 0
+      })
+    } else if (Array.isArray(value) && value.length > 0) {
+      nestedFields.push({
+        key,
+        label: formatFieldName(key),
+        type: 'array',
+        isArrayOfObjects: isPlainObject(value[0]),
+        depth: 0
+      })
+    }
+  })
+
+  return nestedFields
+}
+
+export function isCurrencyField(key: string): boolean {
+  const lowerKey = key.toLowerCase()
+  return lowerKey.includes('salary') ||
+         lowerKey.includes('price') ||
+         lowerKey.includes('cost') ||
+         lowerKey.includes('amount') ||
+         lowerKey.includes('pay') ||
+         lowerKey.includes('fee')
+}
+
+export function isRatingField(key: string): boolean {
+  const lowerKey = key.toLowerCase()
+  return lowerKey.includes('rating') ||
+         lowerKey.includes('score')
+}
+
+export function renderPrimitiveValue(
+  key: string,
+  value: any,
+  options: {
+    showLabel?: boolean
+    labelClassName?: string
+    valueClassName?: string
+  } = {}
+): ReactElement | null {
+  const {
+    showLabel = true,
+    labelClassName = "text-content-presentation-global-tertiary",
+    valueClassName = "text-content-presentation-global-primary"
+  } = options
+
+  if (value == null) return null
+
+  const label = showLabel ? formatFieldName(key) : null
+
+  if (typeof value === 'boolean') {
+    return (
+      <div className="flex items-center gap-2">
+        {label && <span className={labelClassName}>{label}:</span>}
+        <Badge
+          color={value ? "green" : "gray"}
+          badgeStyle={value ? "solid" : "subtle"}
+          label={value ? "Yes" : "No"}
+          size="XS"
+         
+        />
+      </div>
+    )
+  }
+
+  if (typeof value === 'number') {
+    const isCurrency = isCurrencyField(key)
+    const isRating = isRatingField(key)
+
+    if (isRating && value <= 5) {
+      return (
+        <div className="flex items-center gap-2">
+          {label && <span className={labelClassName}>{label}:</span>}
+          <div className="flex items-center gap-2">
+            <div className="flex">
+              {[...Array(5)].map((_, i) => (
+                <span key={i} className={i < Math.floor(value) ? 'text-yellow-500' : 'text-gray-300'}>
+                  ⭐
+                </span>
+              ))}
+            </div>
+            <span className="font-semibold text-sm">{value}</span>
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex items-center gap-2">
+        {label && <span className={labelClassName}>{label}:</span>}
+        <span className={cn(
+          valueClassName,
+          isCurrency && "font-semibold text-green-600"
+        )}>
+          {isCurrency ? `$${value.toLocaleString()}` : value.toLocaleString()}
+        </span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      {label && <span className={labelClassName}>{label}:</span>}
+      <span className={valueClassName}>{String(value)}</span>
+    </div>
+  )
+}
+
+export function renderArrayValue(
+  key: string,
+  value: any[],
+  options: {
+    showLabel?: boolean
+    maxItems?: number
+    renderItem?: (item: any, index: number) => ReactElement
+  } = {}
+): ReactElement | null {
+  const { showLabel = true, maxItems, renderItem } = options
+
+  if (!Array.isArray(value) || value.length === 0) return null
+
+  const label = showLabel ? formatFieldName(key) : null
+  const displayItems = maxItems ? value.slice(0, maxItems) : value
+
+  if (isPlainObject(value[0])) {
+    return (
+      <div className="space-y-2">
+        {label && (
+          <div className="text-xs font-semibold text-content-presentation-global-primary uppercase tracking-wide">
+            {label} ({value.length})
+          </div>
+        )}
+        <div className="space-y-2">
+          {displayItems.map((item: any, idx: number) => {
+            if (renderItem) {
+              return renderItem(item, idx)
+            }
+            return (
+              <div key={idx} className="p-2 rounded bg-background-presentation-form-field-primary">
+                {renderNestedObject(item, 1)}
+              </div>
+            )
+          })}
+          {maxItems && value.length > maxItems && (
+            <div className="text-xs text-content-presentation-global-tertiary">
+              +{value.length - maxItems} more
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-start gap-2">
+      {label && <span className="text-content-presentation-global-tertiary">{label}:</span>}
+      <div className="flex flex-wrap gap-1">
+        {displayItems.map((item: any, idx: number) => (
+          <Badge key={idx} color="blue" badgeStyle="solid" label={String(item)} size="XS" />
+        ))}
+        {maxItems && value.length > maxItems && (
+          <Badge color="gray" badgeStyle="subtle" label={`+${value.length - maxItems}`} size="XS" />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function renderNestedObject(
+  obj: any,
+  depth: number = 0,
+  options: {
+    maxDepth?: number
+    showSeparators?: boolean
+  } = {}
+): ReactElement {
+  const { maxDepth = 3 } = options
+
+  if (depth >= maxDepth) {
+    return <div className="text-xs text-content-presentation-global-tertiary">...</div>
+  }
+
+  return (
+    <div className="space-y-2 text-sm">
+      {Object.entries(obj).map(([key, value]) => {
+        if (isPlainObject(value)) {
+          return (
+            <div key={key} className="space-y-1">
+              <div className="text-xs font-semibold text-content-presentation-global-primary uppercase tracking-wide">
+                {formatFieldName(key)}
+              </div>
+              <div className="pl-3 border-l-2 border-border-presentation-global-primary">
+                {renderNestedObject(value, depth + 1, options)}
+              </div>
+            </div>
+          )
+        }
+
+        if (Array.isArray(value)) {
+          return <div key={key}>{renderArrayValue(key, value)}</div>
+        }
+
+        return <div key={key}>{renderPrimitiveValue(key, value)}</div>
+      })}
+    </div>
+  )
+}
+
+export function renderDetailView(
+  selectedItem: DynamicRecord,
+  visibleColumns: DynamicColumnConfig[],
+  renderCellValue: (value: any, column: DynamicColumnConfig, row: DynamicRecord) => React.ReactNode
+): ReactElement {
+  const visibleColumnIds = new Set(visibleColumns.map(col => col.id))
+  const nestedFields = analyzeNestedFields(selectedItem, visibleColumnIds)
+
+  return (
+    <div className="space-y-6">
+      {visibleColumns.slice(2).length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {visibleColumns.slice(2).map((col) => {
+            const value = selectedItem[col.id]
+            if (value == null && value !== 0 && value !== false) return null
+            return (
+              <div key={col.id} className="space-y-1">
+                <dt className="text-xs font-medium text-content-presentation-global-tertiary uppercase tracking-wide">
+                  {col.label}
+                </dt>
+                <dd className="text-sm text-content-presentation-global-primary">
+                  {renderCellValue(value, col, selectedItem)}
+                </dd>
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {nestedFields.map((field, index) => {
+        const value = selectedItem[field.key]
+
+        if (field.type === 'object' && isPlainObject(value)) {
+          return (
+            <div key={field.key}>
+              {index > 0 && <Divider />}
+              <div>
+                <h3 className="text-sm font-semibold text-content-presentation-global-primary mb-3">
+                  {field.label}
+                </h3>
+                {renderNestedObject(value)}
+              </div>
+            </div>
+          )
+        }
+
+        if (field.type === 'array' && Array.isArray(value)) {
+          return (
+            <div key={field.key}>
+              {index > 0 && <Divider />}
+              <div>
+                <h3 className="text-sm font-semibold text-content-presentation-global-primary mb-3">
+                  {field.label}
+                </h3>
+                {renderArrayValue(field.key, value, { showLabel: false })}
+              </div>
+            </div>
+          )
+        }
+
+        return null
+      })}
+    </div>
+  )
+}
+
+export function getDataStructureSummary(data: DynamicRecord[]): {
+  totalFields: number
+  nestedFields: string[]
+  arrayFields: string[]
+  primitiveFields: string[]
+} {
+  if (!data || data.length === 0) {
+    return { totalFields: 0, nestedFields: [], arrayFields: [], primitiveFields: [] }
+  }
+
+  const allKeys = new Set<string>()
+  const nestedKeys = new Set<string>()
+  const arrayKeys = new Set<string>()
+  const primitiveKeys = new Set<string>()
+
+  data.forEach(item => {
+    Object.entries(item).forEach(([key, value]) => {
+      allKeys.add(key)
+      if (isPlainObject(value)) {
+        nestedKeys.add(key)
+      } else if (Array.isArray(value)) {
+        arrayKeys.add(key)
+      } else {
+        primitiveKeys.add(key)
+      }
+    })
+  })
+
+  return {
+    totalFields: allKeys.size,
+    nestedFields: Array.from(nestedKeys),
+    arrayFields: Array.from(arrayKeys),
+    primitiveFields: Array.from(primitiveKeys)
+  }
+}

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

@@ -0,0 +1,132 @@
+export type Path = string
+
+const PATH_CACHE = new Map<string, string[]>()
+
+function splitPath(path: Path): string[] {
+  const cached = PATH_CACHE.get(path)
+  if (cached) return cached
+  const parts = path.split(".")
+  PATH_CACHE.set(path, parts)
+  return parts
+}
+
+export function getByPath(obj: unknown, path: Path | undefined | null): any {
+  if (obj == null || path == null || path === "") return undefined
+  if (typeof obj !== "object") return undefined
+
+  const parts = splitPath(path)
+  let cur: any = obj
+  for (let i = 0; i < parts.length; i++) {
+    if (cur == null) return undefined
+    cur = cur[parts[i]]
+  }
+  return cur
+}
+
+export function setByPath<T extends Record<string, any>>(
+  obj: T,
+  path: Path,
+  value: any,
+): T {
+  if (!path) return obj
+  const parts = splitPath(path)
+  if (parts.length === 0) return obj
+
+  const root: any = Array.isArray(obj) ? [...obj] : { ...obj }
+  let cur: any = root
+
+  for (let i = 0; i < parts.length - 1; i++) {
+    const key = parts[i]
+    const next = cur[key]
+    const cloned = next != null && typeof next === "object" && !Array.isArray(next)
+      ? { ...next }
+      : Array.isArray(next)
+        ? [...next]
+        : {}
+    cur[key] = cloned
+    cur = cloned
+  }
+
+  cur[parts[parts.length - 1]] = value
+  return root
+}
+
+export function hasPath(obj: unknown, path: Path | undefined | null): boolean {
+  return getByPath(obj, path) !== undefined
+}
+
+export function formatPathLabel(path: Path): string {
+  if (!path) return ""
+  const tail = path.includes(".") ? path.split(".").pop()! : path
+
+  if (tail.includes("_")) {
+    return tail
+      .split("_")
+      .filter(Boolean)
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(" ")
+  }
+
+  return tail
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (s) => s.toUpperCase())
+    .trim()
+}
+
+export function findFirstDefined(data: any[], path: Path): any {
+  for (const item of data) {
+    const v = getByPath(item, path)
+    if (v != null) return v
+  }
+  return undefined
+}
+
+export function matchesFilterValues(
+  item: unknown,
+  path: Path,
+  filter: string[] | { kind: "number"; min?: number; max?: number } | { kind: "date"; from?: string; to?: string } | undefined,
+): boolean {
+  if (filter == null) return true
+
+  if (Array.isArray(filter)) {
+    if (filter.length === 0) return true
+    const value = getByPath(item, path)
+    if (Array.isArray(value)) {
+      const set = new Set(value.map((v) => String(v)))
+      return filter.some((s) => set.has(s))
+    }
+    if (typeof value === "boolean") {
+      return filter.includes(value ? "true" : "false")
+    }
+    return filter.includes(String(value ?? ""))
+  }
+
+  if (filter.kind === "number") {
+    if (filter.min == null && filter.max == null) return true
+    const raw = getByPath(item, path)
+    const n = typeof raw === "number" ? raw : Number(raw)
+    if (!Number.isFinite(n)) return false
+    if (filter.min != null && n < filter.min) return false
+    if (filter.max != null && n > filter.max) return false
+    return true
+  }
+
+  if (filter.kind === "date") {
+    if (filter.from == null && filter.to == null) return true
+    const raw = getByPath(item, path)
+    if (raw == null) return false
+    const ms = raw instanceof Date ? raw.getTime() : Date.parse(String(raw))
+    if (!Number.isFinite(ms)) return false
+    if (filter.from != null) {
+      const fromMs = Date.parse(filter.from)
+      if (Number.isFinite(fromMs) && ms < fromMs) return false
+    }
+    if (filter.to != null) {
+      const toMs = Date.parse(filter.to)
+      if (Number.isFinite(toMs) && ms > toMs + 24 * 60 * 60 * 1000 - 1) return false
+    }
+    return true
+  }
+
+  return true
+}