torch-glare 2.1.1 → 2.1.2

package/apps/lib/components/DataViews/DataViewsLayout.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { List, LayoutGrid, Inbox as InboxIcon, Network } from "lucide-react";
+import type {
+  DynamicRecord,
+  DynamicColumnConfig,
+  DynamicFilterConfig,
+  FilterState,
+  FieldConfig,
+  InboxConfig,
+  TreeConfig,
+  ViewConfig,
+  ViewType,
+  ViewVisibility,
+} from "./types";
+import { TableView } from "./TableView";
+import { KanbanView } from "./KanbanView";
+import { InboxView } from "./InboxView";
+import { TreeView } from "./TreeView";
+import { DataViewsHeader, type DataViewsHeaderView } from "./DataViewsHeader";
+import { DataViewsConfigPanel } from "./DataViewsConfigPanel";
+import { useDataViewsState } from "../../hooks/useDataViewsState";
+import { cn } from "../../utils/cn";
+import type { Themes } from "../../utils/types";
+
+export type DataViewsLayoutProps = {
+  data?: DynamicRecord[];
+  config?: Partial<ViewConfig>;
+  title?: string;
+  description?: string;
+
+  fields?: FieldConfig[];
+  inboxConfig?: InboxConfig;
+  treeConfig?: TreeConfig;
+  kanbanGroupBy?: string;
+
+  views?: ViewVisibility;
+
+  columns?: Partial<DynamicColumnConfig>[];
+  filters?: DynamicFilterConfig[];
+
+  filterState?: FilterState;
+  onFilterChange?: (filters: FilterState) => void;
+
+  showFilters?: boolean;
+  showSettings?: boolean;
+  showTitle?: boolean;
+
+  onAddNew?: () => void;
+  addNewLabel?: string;
+
+  className?: string;
+  theme?: Themes;
+};
+
+const VIEW_META: Record<
+  ViewType,
+  { label: string; icon: DataViewsHeaderView["icon"] }
+> = {
+  table: { label: "List", icon: <List /> },
+  kanban: { label: "Board", icon: <LayoutGrid /> },
+  inbox: { label: "Inbox", icon: <InboxIcon /> },
+  tree: { label: "Tree", icon: <Network /> },
+};
+
+const VIEW_ORDER: ViewType[] = ["table", "kanban", "inbox", "tree"];
+
+export const DataViewsLayout = forwardRef<HTMLDivElement, DataViewsLayoutProps>(
+  function DataViewsLayout(props, ref) {
+    const {
+      title = "Data Views",
+      data,
+      config: initialConfig,
+      fields,
+      inboxConfig,
+      treeConfig,
+      kanbanGroupBy,
+      views,
+      columns,
+      filters,
+      filterState: externalFilterState,
+      onFilterChange,
+      // `showFilters` is retained on the public API but filters now live in the
+      // right-side config rail rather than an inline per-view panel.
+      showSettings = true,
+      showTitle = true,
+      onAddNew,
+      addNewLabel,
+      className,
+      theme,
+    } = props;
+
+    const {
+      items,
+      flatItems,
+      resolvedFields,
+      detectedColumns,
+      config,
+      setConfig,
+      currentView,
+      setCurrentView,
+      filterState,
+      setFilterState,
+      onDataUpdate,
+      enabledViews,
+    } = useDataViewsState({
+      data,
+      fields,
+      columns,
+      config: initialConfig,
+      treeConfig,
+      views,
+      filterState: externalFilterState,
+      onFilterChange,
+    });
+
+    // `panelOpen` drives intent; `panelMounted` keeps the panel in the tree
+    // through the close animation before unmounting.
+    const [panelOpen, setPanelOpen] = useState(false);
+    const [panelMounted, setPanelMounted] = useState(false);
+    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const openPanel = useCallback(() => {
+      if (closeTimer.current) {
+        clearTimeout(closeTimer.current);
+        closeTimer.current = null;
+      }
+      // Mount at width 0 first, then flip to open on the next frame so the
+      // width transition animates from 0 → 260px instead of snapping.
+      setPanelMounted(true);
+      requestAnimationFrame(() =>
+        requestAnimationFrame(() => setPanelOpen(true)),
+      );
+    }, []);
+
+    const closePanel = useCallback(() => {
+      setPanelOpen(false);
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+      // Keep mounted through the width/fade animation (300ms) before unmounting.
+      closeTimer.current = setTimeout(() => setPanelMounted(false), 300);
+    }, []);
+
+    const togglePanel = useCallback(() => {
+      if (panelOpen) closePanel();
+      else openPanel();
+    }, [panelOpen, openPanel, closePanel]);
+
+    useEffect(() => {
+      return () => {
+        if (closeTimer.current) clearTimeout(closeTimer.current);
+      };
+    }, []);
+
+    const effectiveKanbanGroupBy = kanbanGroupBy ?? config.kanbanGroupBy;
+    // Filters now live in the right-side rail, not as an inline per-view panel.
+    const effectiveConfig: ViewConfig = { ...config, showFilters: false };
+
+    const headerViews = useMemo<DataViewsHeaderView[]>(
+      () =>
+        VIEW_ORDER.filter((v) => enabledViews[v]).map((v) => ({
+          id: v,
+          label: VIEW_META[v].label,
+          icon: VIEW_META[v].icon,
+        })),
+      [enabledViews],
+    );
+
+    return (
+      <div
+        ref={ref}
+        data-theme={theme}
+        className={cn(
+          // Shell is always black (matches Figma): the dark header and config
+          // rail sit on it; the Master Container is the white surface inside.
+          "flex h-screen gap-2 bg-black p-2 text-content-presentation-global-primary",
+          className,
+        )}
+      >
+        {/* Left column: header + content. Shrinks as the panel expands. */}
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          {showTitle && (
+            <DataViewsHeader
+              title={title}
+              views={headerViews}
+              currentView={currentView}
+              onViewChange={setCurrentView}
+              showSettings={showSettings}
+              settingsOpen={panelOpen}
+              onToggleSettings={togglePanel}
+              onAddNew={onAddNew}
+              addNewLabel={addNewLabel}
+            />
+          )}
+
+          <main className="flex min-h-0 flex-1 overflow-hidden ">
+            {/* Master Container — white card, 16px radius, #D4D4D4 hairline
+                border. Fixed surface (matches header chrome). */}
+            <div className="flex flex-1 overflow-hidden rounded-[16px] border border-border-presentation-global-primary ">
+              {/* Clip the scrollable surface to the parent radius MINUS the 1px
+                  border (16 − 1 = 15px). Using the full 16px here let the
+                  opaque view background sit flush with the parent's outer edge
+                  and bleed past the border as a ~1px light line on the
+                  left/right straight sides. */}
+              <div className="flex-1 overflow-auto rounded-[15px]">
+                {currentView === "table" && enabledViews.table && (
+                  <TableView
+                    data={flatItems}
+                    columns={detectedColumns}
+                    fields={resolvedFields}
+                    config={effectiveConfig}
+                    onDataUpdate={onDataUpdate}
+                    onSortChange={(sortBy, sortOrder) =>
+                      setConfig({ sortBy, sortOrder })
+                    }
+                    filters={filters}
+                    filterState={filterState}
+                    onFilterChange={setFilterState}
+                    showFilters={false}
+                  />
+                )}
+                {currentView === "kanban" && enabledViews.kanban && (
+                  <KanbanView
+                    data={flatItems}
+                    columns={detectedColumns}
+                    fields={resolvedFields}
+                    config={effectiveConfig}
+                    onDataUpdate={onDataUpdate}
+                    groupByField={effectiveKanbanGroupBy}
+                  />
+                )}
+                {currentView === "inbox" && enabledViews.inbox && (
+                  <InboxView
+                    data={flatItems}
+                    columns={detectedColumns}
+                    fields={resolvedFields}
+                    inboxConfig={inboxConfig}
+                    config={effectiveConfig}
+                    onDataUpdate={onDataUpdate}
+                    filters={filters}
+                    filterState={filterState}
+                    onFilterChange={setFilterState}
+                    showFilters={false}
+                  />
+                )}
+                {currentView === "tree" && enabledViews.tree && (
+                  <TreeView
+                    data={items}
+                    columns={detectedColumns}
+                    fields={resolvedFields}
+                    treeConfig={treeConfig}
+                    config={effectiveConfig}
+                    onDataUpdate={onDataUpdate}
+                    filters={filters}
+                    filterState={filterState}
+                    onFilterChange={setFilterState}
+                    showFilters={false}
+                  />
+                )}
+              </div>
+            </div>
+          </main>
+        </div>
+
+        {/* Right rail: full-height sibling of the [header + content] column, so
+            opening it pushes the header as well as the content. The wrapper
+            animates its width so the left column reflows in sync with the
+            panel's slide-in. */}
+        {showSettings && panelMounted && (
+          <div
+            className={cn(
+              "shrink-0 overflow-hidden transition-[width] duration-300 ease-in-out",
+              panelOpen ? "w-[260px]" : "w-0",
+            )}
+          >
+            <DataViewsConfigPanel
+              state={panelOpen ? "open" : "closed"}
+              config={config}
+              onConfigChange={setConfig}
+              onClose={closePanel}
+              currentView={currentView}
+              fields={resolvedFields}
+              data={flatItems}
+              filterState={filterState}
+              onFilterChange={setFilterState}
+              filterConfig={filters}
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/apps/lib/components/DataViews/FilterPanel.tsx

@@ -0,0 +1,324 @@
+"use client"
+
+import { Button } from "../Button"
+import { Badge } from "../Badge"
+import { X } from "lucide-react"
+import { Checkbox } from "../Checkbox"
+import { Divider } from "../Divider"
+import { Label } from "../Label"
+import type {
+  DynamicRecord,
+  DynamicFilterConfig,
+  FieldConfig,
+  FieldType,
+  FilterState,
+  FilterValue,
+  NumericRangeFilter,
+  DateRangeFilter,
+} from "./types"
+import { getByPath, formatPathLabel } from "../../utils/dataViews/pathUtils"
+import {
+  computeNumericExtremes,
+  countActiveFilters,
+  inferStep,
+  isDateRange,
+  isNumericRange,
+  resolvePresets,
+} from "../../utils/dataViews/rangeUtils"
+import { RangeSliderWithInputs } from "./filters/RangeSliderWithInputs"
+import { DateRangePopover } from "./filters/DateRangePopover"
+import { PresetChips } from "./filters/PresetChips"
+import { resolveBadgeVariant } from "./badgeAdapter"
+
+type FilterPanelProps = {
+  data: DynamicRecord[]
+  fields: FieldConfig[]
+  filters: FilterState
+  onFilterChange: (path: string, value: FilterValue) => void
+  onClearAll: () => void
+  filterConfig?: DynamicFilterConfig[]
+}
+
+const NUMERIC_TYPES: FieldType[] = [
+  "number",
+  "number-format",
+  "currency",
+  "progress-bar",
+  "star-rating",
+]
+
+const DATE_TYPES: FieldType[] = ["date", "date-format"]
+
+type FilterKind = "categorical" | "numeric-range" | "date-range"
+
+type Entry = {
+  path: string
+  label: string
+  kind: FilterKind
+  field?: FieldConfig
+  legacy?: DynamicFilterConfig
+}
+
+function buildFilterableEntries(
+  data: DynamicRecord[],
+  fields: FieldConfig[],
+  legacy?: DynamicFilterConfig[],
+): Entry[] {
+  const legacyByPath = new Map(
+    (legacy ?? []).filter((f) => f.enabled !== false).map((f) => [f.id, f]),
+  )
+
+  const entries: Entry[] = []
+  const seen = new Set<string>()
+
+  for (const f of fields) {
+    if (f.type === "hidden") continue
+    if (f.filterable === false) continue
+
+    const isExplicit = f.filterable === true
+    const isCategoricalAuto =
+      f.type === "enum-badge" ||
+      f.type === "boolean" ||
+      f.type === "badge-array" ||
+      f.type === "icon-text"
+    const isNumeric = f.type != null && NUMERIC_TYPES.includes(f.type)
+    const isDate = f.type != null && DATE_TYPES.includes(f.type)
+
+    let include = isExplicit || isCategoricalAuto
+
+    if (!include) {
+      if (f.type !== "text" && f.type !== undefined) continue
+      const unique = new Set<string>()
+      for (const item of data) {
+        const v = getByPath(item, f.path)
+        if (v == null) continue
+        unique.add(String(v))
+        if (unique.size > 10) break
+      }
+      include = unique.size > 0 && unique.size <= 10
+    }
+
+    if (!include) continue
+
+    const kind: FilterKind = isNumeric ? "numeric-range" : isDate ? "date-range" : "categorical"
+
+    entries.push({
+      path: f.path,
+      label: f.filterLabel ?? f.label ?? formatPathLabel(f.path),
+      kind,
+      field: f,
+      legacy: legacyByPath.get(f.path),
+    })
+    seen.add(f.path)
+  }
+
+  for (const lf of legacyByPath.values()) {
+    if (seen.has(lf.id)) continue
+    entries.push({
+      path: lf.id,
+      label: lf.label ?? formatPathLabel(lf.id),
+      kind: "categorical",
+      legacy: lf,
+    })
+  }
+
+  return entries
+}
+
+function getCategoricalOptions(
+  data: DynamicRecord[],
+  path: string,
+  field?: FieldConfig,
+  legacy?: DynamicFilterConfig,
+): string[] {
+  if (field?.filterOptions && field.filterOptions.length > 0) {
+    return normalizeOptions(field.filterOptions)
+  }
+  if (legacy?.options && legacy.options.length > 0) {
+    return normalizeOptions(legacy.options)
+  }
+  if (field?.variants) {
+    const fromMap = Object.keys(field.variants)
+    const fromData = collectUnique(data, path)
+    return Array.from(new Set([...fromMap, ...fromData]))
+  }
+  return collectUnique(data, path)
+}
+
+function normalizeOptions(opts: NonNullable<FieldConfig["filterOptions"]>): string[] {
+  if (opts.length === 0) return []
+  if (typeof opts[0] === "string") return opts as string[]
+  return (opts as { label: string; value: string }[]).map((o) => o.value)
+}
+
+function collectUnique(data: DynamicRecord[], path: string): string[] {
+  const set = new Set<string>()
+  for (const item of data) {
+    const v = getByPath(item, path)
+    if (v == null) continue
+    if (Array.isArray(v)) {
+      for (const x of v) set.add(String(x))
+    } else {
+      set.add(String(v))
+    }
+  }
+  return Array.from(set).sort()
+}
+
+export function FilterPanel({
+  data,
+  fields,
+  filters,
+  onFilterChange,
+  onClearAll,
+  filterConfig,
+}: FilterPanelProps) {
+  const entries = buildFilterableEntries(data, fields, filterConfig)
+
+  const setFilter = (path: string, value: FilterValue) => {
+    onFilterChange(path, value)
+    const field = fields.find((f) => f.path === path)
+    field?.onFilterChange?.(value)
+    if (Array.isArray(value)) {
+      const legacy = filterConfig?.find((f) => f.id === path)
+      legacy?.onChange?.(value)
+    }
+  }
+
+  const toggleCategorical = (path: string, option: string) => {
+    const current = filters[path]
+    const arr = Array.isArray(current) ? current : []
+    const next = arr.includes(option) ? arr.filter((v) => v !== option) : [...arr, option]
+    setFilter(path, next)
+  }
+
+  const totalFilters = countActiveFilters(filters)
+
+  if (entries.length === 0) return null
+
+  const countBadge = resolveBadgeVariant("gray")
+
+  return (
+    <div className="w-64 border-r border-border-presentation-global-primary bg-background-presentation-body-overlay-primary p-4 overflow-y-auto">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold text-content-presentation-global-primary">Filters</h3>
+          {totalFilters > 0 && (
+            <Badge
+              {...countBadge}
+              label={String(totalFilters)}
+              className="h-5 min-w-[20px] rounded-full p-0 text-xs"
+              size="XS"
+             
+            />
+          )}
+        </div>
+        {totalFilters > 0 && (
+          <Button variant="PrimeStyle" size="M" onClick={onClearAll} className="h-7 gap-1 text-xs">
+            <X className="h-3 w-3" />
+            Clear
+          </Button>
+        )}
+      </div>
+
+      <div className="space-y-4">
+        {entries.map((entry, index) => (
+          <div key={entry.path}>
+            {index > 0 && <Divider className="mb-4" />}
+            <div className="space-y-2">
+              <Label className="text-content-presentation-global-primary">{entry.label}</Label>
+              <FilterBody
+                entry={entry}
+                data={data}
+                value={filters[entry.path]}
+                onCategoricalToggle={(opt) => toggleCategorical(entry.path, opt)}
+                onSetFilter={(v) => setFilter(entry.path, v)}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function FilterBody({
+  entry,
+  data,
+  value,
+  onCategoricalToggle,
+  onSetFilter,
+}: {
+  entry: Entry
+  data: DynamicRecord[]
+  value: FilterValue | undefined
+  onCategoricalToggle: (option: string) => void
+  onSetFilter: (next: FilterValue) => void
+}) {
+  if (entry.kind === "numeric-range" && entry.field) {
+    const extremes = computeNumericExtremes(data, entry.path)
+    if (!extremes || extremes.min === extremes.max) {
+      return <div className="text-xs text-content-presentation-global-tertiary">No range to filter.</div>
+    }
+    const step = inferStep(entry.field, extremes)
+    const presets = resolvePresets(entry.field)
+    const numericValue: NumericRangeFilter | undefined = isNumericRange(value) ? value : undefined
+    return (
+      <div className="space-y-3">
+        {presets.length > 0 && (
+          <PresetChips presets={presets} current={value} onSelect={onSetFilter} />
+        )}
+        <RangeSliderWithInputs
+          field={entry.field}
+          extremes={extremes}
+          step={step}
+          value={numericValue}
+          onChange={onSetFilter}
+        />
+      </div>
+    )
+  }
+
+  if (entry.kind === "date-range" && entry.field) {
+    const presets = resolvePresets(entry.field)
+    const dateValue: DateRangeFilter | undefined = isDateRange(value) ? value : undefined
+    return (
+      <DateRangePopover
+        value={dateValue}
+        onChange={onSetFilter}
+        presets={presets.length > 0 ? presets : undefined}
+      />
+    )
+  }
+
+  const opts = getCategoricalOptions(data, entry.path, entry.field, entry.legacy)
+  const selected = Array.isArray(value) ? value : []
+  return (
+    <div className="space-y-2">
+      {opts.map((opt) => {
+        const isSelected = selected.includes(opt)
+        const variant = entry.field?.variants?.[opt]
+        const badgeProps = variant ? resolveBadgeVariant(variant) : null
+        return (
+          <div key={opt} className="flex items-center space-x-2">
+            <Checkbox
+              id={`${entry.path}-${opt}`}
+              checked={isSelected}
+              onCheckedChange={() => onCategoricalToggle(opt)}
+            />
+            <label
+              htmlFor={`${entry.path}-${opt}`}
+              className="text-sm text-content-presentation-global-primary cursor-pointer leading-none flex-1"
+            >
+              {entry.legacy?.render
+                ? entry.legacy.render(opt, isSelected)
+                : badgeProps
+                  ? <Badge {...badgeProps} label={opt} size="XS" />
+                  : opt}
+            </label>
+          </div>
+        )
+      })}
+    </div>
+  )
+}