torch-glare 2.4.4 → 2.5.0

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

@@ -1,212 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import { FilterPanel } from "./FilterPanel";
-import type {
-  DynamicRecord,
-  ViewConfig,
-  DynamicColumnConfig,
-  DynamicFilterConfig,
-  FilterState,
-  FilterValue,
-  FieldConfig,
-} from "./types";
-import { Card, CardContent, CardHeader } from "../Card";
-import { Checkbox } from "../Checkbox";
-import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCheckbox,
-} from "../Table";
-import { getByPath, matchesFilterValues } from "../../utils/dataViews/pathUtils";
-import { renderField } from "./fieldRenderers";
-import { visibleFields } from "../../utils/dataViews/fieldUtils";
-import { useIsMobile } from "../../hooks/useIsMobile";
-
-export type TableViewProps = {
-  data: DynamicRecord[];
-  columns?: DynamicColumnConfig[];
-  fields: FieldConfig[];
-  config: ViewConfig;
-  onDataUpdate?: (data: DynamicRecord[]) => void;
-  onSortChange?: (sortBy: string, sortOrder: "asc" | "desc") => void;
-  filters?: DynamicFilterConfig[];
-  filterState?: FilterState;
-  onFilterChange?: (filters: FilterState) => void;
-  showFilters?: boolean;
-};
-
-export function TableView({
-  data,
-  fields,
-  config,
-  onSortChange,
-  filters: filterConfig,
-  filterState: externalFilterState,
-  onFilterChange,
-  showFilters = true,
-}: TableViewProps) {
-  const isMobile = useIsMobile();
-  const [internalFilters, setInternalFilters] = useState<FilterState>({});
-
-  const activeFilters = externalFilterState ?? internalFilters;
-
-  const sortPath = config.sortBy || null;
-  const sortDirection: "asc" | "desc" = config.sortOrder ?? "asc";
-
-  const handleSort = (path: string) => {
-    if (!onSortChange) return;
-    if (sortPath === path) {
-      onSortChange(path, sortDirection === "asc" ? "desc" : "asc");
-    } else {
-      onSortChange(path, "asc");
-    }
-  };
-
-  const handleFilterChange = (path: string, value: FilterValue) => {
-    const newFilters: FilterState = { ...activeFilters, [path]: value };
-    if (onFilterChange) onFilterChange(newFilters);
-    else setInternalFilters(newFilters);
-  };
-
-  const clearAllFilters = () => {
-    if (onFilterChange) onFilterChange({});
-    else setInternalFilters({});
-  };
-
-  const filteredAndSortedData = useMemo(() => {
-    let filtered = data.filter((item) =>
-      Object.entries(activeFilters).every(([path, filterValues]) =>
-        matchesFilterValues(item, path, filterValues),
-      ),
-    );
-
-    if (sortPath) {
-      filtered = [...filtered].sort((a, b) => {
-        const aVal = getByPath(a, sortPath);
-        const bVal = getByPath(b, sortPath);
-        const modifier = sortDirection === "asc" ? 1 : -1;
-
-        if (aVal == null && bVal == null) return 0;
-        if (aVal == null) return 1;
-        if (bVal == null) return -1;
-
-        if (typeof aVal === "string" && typeof bVal === "string") {
-          return aVal.localeCompare(bVal) * modifier;
-        }
-        if (typeof aVal === "number" && typeof bVal === "number") {
-          return (aVal - bVal) * modifier;
-        }
-        return String(aVal).localeCompare(String(bVal)) * modifier;
-      });
-    }
-
-    return filtered;
-  }, [data, activeFilters, sortPath, sortDirection]);
-
-  const displayFields = useMemo(
-    () => visibleFields(fields).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
-    [fields],
-  );
-
-  const filtersEnabled = showFilters && config.showFilters !== false;
-
-  return (
-    <div className="flex h-full bg-background-presentation-form-base">
-      {filtersEnabled && !isMobile && (
-        <FilterPanel
-          data={data}
-          fields={fields}
-          filters={activeFilters}
-          onFilterChange={handleFilterChange}
-          onClearAll={clearAllFilters}
-          filterConfig={filterConfig}
-        />
-      )}
-
-      <div className="flex flex-1 flex-col gap-4  overflow-hidden">
-        {!isMobile ? (
-          <div className="flex-1 overflow-auto rounded-lg">
-            <Table className="w-full">
-              <TableHeader>
-                <TableRow>
-                  <TableHead isDummy className="w-12">
-                    <Checkbox />
-                  </TableHead>
-                  {displayFields.map((field) => (
-                    <TableHead
-                      key={field.path}
-                      size="M"
-                      sortType={sortPath === field.path ? sortDirection : undefined}
-                      onSort={() => handleSort(field.path)}
-                    >
-                      {field.label}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredAndSortedData.map((item, idx) => (
-                  <TableRow key={(item.id ?? idx) as string | number}>
-                    <TableCell isDummy className="w-12">
-                      <TableCheckbox id={`row-${item.id ?? idx}`} />
-                    </TableCell>
-                    {displayFields.map((field) => (
-                      <TableCell key={field.path}>
-                        {/* `isolate` confines the Badge's mix-blend-luminosity
-                            to a local stacking context and `transform-gpu`
-                            promotes it to its own layer, so the table's
-                            post-mount column reflow repaints cleanly instead
-                            of leaving a ghosted/doubled badge frame. */}
-                        <span className="isolate inline-flex transform-gpu">
-                          {renderField(getByPath(item, field.path), field, item)}
-                        </span>
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        ) : (
-          <div className="flex-1 overflow-auto">
-            <div className="grid gap-3">
-              {filteredAndSortedData.map((item, idx) => (
-                <Card key={(item.id ?? idx) as string | number} className="overflow-hidden">
-                  <CardHeader className="pb-3">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="flex items-start gap-3 flex-1">
-                        <Checkbox className="mt-1" />
-                        <div className="flex-1">
-                          {displayFields[0] && (
-                            <p className="font-medium">
-                              {String(getByPath(item, displayFields[0].path) ?? "")}
-                            </p>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="space-y-2 pt-0">
-                    {displayFields.slice(1).map((field) => (
-                      <div key={field.path} className="flex items-center justify-between text-sm">
-                        <span className="text-content-presentation-global-tertiary">
-                          {field.label}:
-                        </span>
-                        <span>{renderField(getByPath(item, field.path), field, item)}</span>
-                      </div>
-                    ))}
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,364 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import type {
-  DynamicRecord,
-  ViewConfig,
-  DynamicColumnConfig,
-  DynamicFilterConfig,
-  FieldConfig,
-  FilterState,
-  FilterValue,
-  TreeConfig,
-} from "./types";
-import {
-  applyMove,
-  autoDetectTreeShape,
-  buildTree,
-  findNodeById,
-  flatten,
-  initialExpansion,
-  pruneTree,
-  type TreeNode,
-} from "../../utils/dataViews/treeUtils";
-import { getByPath, matchesFilterValues } from "../../utils/dataViews/pathUtils";
-import { visibleFields } from "../../utils/dataViews/fieldUtils";
-import { renderField } from "./fieldRenderers";
-import { useIsMobile } from "../../hooks/useIsMobile";
-import { TableView } from "./TableView";
-import { FilterPanel } from "./FilterPanel";
-import { TreeSidebar } from "./tree/TreeSidebar";
-import { TreeDrawer, TreeDrawerTrigger } from "./tree/TreeDrawer";
-import { Card, CardContent, CardHeader } from "../Card";
-import { Table2, LayoutGrid } from "lucide-react";
-import { cn } from "../../utils/cn";
-
-export type TreeViewProps = {
-  data: DynamicRecord[];
-  columns?: DynamicColumnConfig[];
-  fields: FieldConfig[];
-  config: ViewConfig;
-  treeConfig?: TreeConfig;
-  onDataUpdate?: (data: DynamicRecord[]) => void;
-  filters?: DynamicFilterConfig[];
-  filterState?: FilterState;
-  onFilterChange?: (filters: FilterState) => void;
-  showFilters?: boolean;
-};
-
-export function TreeView({
-  data,
-  columns,
-  fields,
-  config,
-  treeConfig,
-  onDataUpdate,
-  filters: filterConfig,
-  filterState: externalFilterState,
-  onFilterChange,
-  showFilters = true,
-}: TreeViewProps) {
-  const isMobile = useIsMobile();
-  const [internalFilters, setInternalFilters] = useState<FilterState>({});
-  const activeFilters = externalFilterState ?? internalFilters;
-
-  const resolvedTree = useMemo(
-    () => autoDetectTreeShape(data, treeConfig ?? {}),
-    [data, treeConfig],
-  );
-
-  const display = useMemo(
-    () => visibleFields(fields).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
-    [fields],
-  );
-
-  const labelField: FieldConfig = useMemo(() => {
-    const path = resolvedTree.nodeLabel;
-    if (path) {
-      const f = fields.find((x) => x.path === path);
-      if (f) return f;
-      return { path, label: path, type: "text" };
-    }
-    return display[0] ?? { path: resolvedTree.idField, type: "text" };
-  }, [resolvedTree, fields, display]);
-
-  const fullForest = useMemo(() => buildTree(data, resolvedTree), [data, resolvedTree]);
-
-  const filterEntries = useMemo(() => Object.entries(activeFilters), [activeFilters]);
-
-  const visibleForest: TreeNode[] = useMemo(() => {
-    if (filterEntries.length === 0) return fullForest;
-    return pruneTree(fullForest, (record) =>
-      filterEntries.every(([path, value]) => matchesFilterValues(record, path, value)),
-    );
-  }, [fullForest, filterEntries]);
-
-  const [expanded, setExpanded] = useState<Set<string>>(() =>
-    initialExpansion(fullForest, resolvedTree.defaultExpanded),
-  );
-
-  useEffect(() => {
-    setExpanded(initialExpansion(fullForest, resolvedTree.defaultExpanded));
-  }, [fullForest, resolvedTree.defaultExpanded]);
-
-  const [selectedId, setSelectedId] = useState<string | null>(() => fullForest[0]?.id ?? null);
-
-  useEffect(() => {
-    if (selectedId && !findNodeById(visibleForest, selectedId)) {
-      setSelectedId(visibleForest[0]?.id ?? null);
-    }
-  }, [visibleForest, selectedId]);
-
-  const selectedNode = selectedId ? findNodeById(visibleForest, selectedId) : null;
-  const recordsForRightPane = useMemo(
-    () => (selectedNode ? flatten(selectedNode) : []),
-    [selectedNode],
-  );
-
-  const toggle = (id: string) =>
-    setExpanded((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-
-  const handleFilterChange = (path: string, value: FilterValue) => {
-    const next: FilterState = { ...activeFilters, [path]: value };
-    if (onFilterChange) onFilterChange(next);
-    else setInternalFilters(next);
-  };
-  const clearAllFilters = () => {
-    if (onFilterChange) onFilterChange({});
-    else setInternalFilters({});
-  };
-
-  const [drawerOpen, setDrawerOpen] = useState(false);
-
-  type RightPaneMode = "table" | "card";
-  const [rightPaneMode, setRightPaneMode] = useState<RightPaneMode>(
-    // "details" is a deprecated alias of "card".
-    treeConfig?.defaultRightPane === "details" ? "card" : (treeConfig?.defaultRightPane ?? "table"),
-  );
-
-  const dndEnabled = treeConfig?.dndEnabled !== false && !!onDataUpdate;
-
-  const handleMove = ({
-    dragIds,
-    parentId,
-    index,
-  }: {
-    dragIds: string[];
-    parentId: string | null;
-    index: number;
-  }) => {
-    if (!onDataUpdate) return;
-    const next = applyMove(data, resolvedTree, { dragIds, parentId, index });
-    onDataUpdate(next);
-  };
-
-  const treeContent = (
-    <TreeSidebar
-      roots={visibleForest}
-      expanded={expanded}
-      selectedId={selectedId}
-      labelField={labelField}
-      dndEnabled={dndEnabled}
-      onToggle={toggle}
-      onSelect={(id) => {
-        setSelectedId(id);
-        if (isMobile) setDrawerOpen(false);
-      }}
-      onMove={handleMove}
-    />
-  );
-
-  const filtersEnabled = showFilters && config.showFilters !== false;
-
-  return (
-    <div className="flex h-full gap-2">
-      {!isMobile && (
-        <div className="w-64 rounded-[16px] border border-border-presentation-global-primary bg-background-presentation-form-base overflow-hidden flex flex-col">
-          <div className="px-3 py-2 border-b border-border-presentation-global-primary">
-            <span
-              style={{ fontFeatureSettings: "'cv05' on" }}
-              className="typography-display-medium-medium uppercase text-content-presentation-global-primary"
-            >
-              categories
-            </span>
-          </div>
-          <div className="flex-1 overflow-hidden">{treeContent}</div>
-        </div>
-      )}
-
-      {!isMobile && filtersEnabled && (
-        <FilterPanel
-          data={data}
-          fields={fields}
-          filters={activeFilters}
-          onFilterChange={handleFilterChange}
-          onClearAll={clearAllFilters}
-          filterConfig={filterConfig}
-        />
-      )}
-
-      <div className="flex-1 flex flex-col overflow-hidden rounded-[16px] border border-border-presentation-global-primary bg-background-presentation-form-base">
-        <div className="flex items-center justify-between gap-2 px-3 py-2 border-b border-border-presentation-global-primary bg-background-presentation-form-base">
-          <div className="flex items-center gap-2 min-w-0">
-            {isMobile && <TreeDrawerTrigger onClick={() => setDrawerOpen(true)} />}
-            <span
-              style={{ fontFeatureSettings: "'cv05' on" }}
-              className="typography-display-medium-medium uppercase text-content-presentation-global-primary truncate"
-            >
-              {selectedNode
-                ? String(getByPath(selectedNode.record, labelField.path) ?? "Items")
-                : "Items"}
-            </span>
-            <div className="h-6 w-px bg-border-presentation-global-primary shrink-0" />
-            <span className="text-sm text-content-presentation-global-secondary truncate">
-              {selectedNode
-                ? `${recordsForRightPane.length} record${recordsForRightPane.length === 1 ? "" : "s"}`
-                : "Select an item"}
-            </span>
-          </div>
-
-          {/* Segmented switcher — same style as the main view switcher
-              (DataViewsHeader): #252729 track, white active pill, divider
-              between two inactive tabs only. */}
-          <div className="flex items-center gap-[2px] rounded-[10px] bg-background-presentation-body-primary p-[2px] shadow-[inset_0_0_4px_0_rgba(0,0,0,0.08)] shrink-0">
-            {(
-              [
-                { id: "table", label: "List", icon: <Table2 /> },
-                { id: "card", label: "Cards", icon: <LayoutGrid /> },
-              ] as const
-            ).map((tab, idx) => {
-              const active = rightPaneMode === tab.id;
-              const prevActive = idx > 0 && rightPaneMode === "table";
-              const showDivider = idx > 0 && !active && !prevActive;
-              return (
-                <div key={tab.id} className="flex items-center">
-                  {showDivider && <div className="mx-[3px] h-3 w-px bg-[#434446]" />}
-                  <button
-                    type="button"
-                    aria-label={`${tab.label} mode`}
-                    aria-pressed={active}
-                    onClick={() => setRightPaneMode(tab.id)}
-                    className={cn(
-                      "flex h-6 items-center gap-[6px] rounded-[8px] px-3 text-[14px] font-[510] leading-none transition-all duration-200 ease-in-out",
-                      active
-                        ? "bg-white text-black shadow-[0_0_10px_2px_rgba(0,0,0,0.25)]"
-                        : "bg-transparent text-content-presentation-global-primary hover:bg-white/5",
-                    )}
-                  >
-                    <span className="flex h-[14px] w-[14px] items-center justify-center [&_svg]:h-[14px] [&_svg]:w-[14px]">
-                      {tab.icon}
-                    </span>
-                    <span className="max-w-[80px] truncate">{tab.label}</span>
-                  </button>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-
-        <div className="flex-1 overflow-hidden">
-          {selectedNode ? (
-            rightPaneMode === "table" ? (
-              <TableView
-                data={recordsForRightPane}
-                columns={columns}
-                fields={fields}
-                config={{ ...config, showFilters: false }}
-                onDataUpdate={onDataUpdate}
-                filters={filterConfig}
-                filterState={activeFilters}
-                onFilterChange={(next) => {
-                  if (onFilterChange) onFilterChange(next);
-                  else setInternalFilters(next);
-                }}
-                showFilters={false}
-              />
-            ) : (
-              <CardGrid records={recordsForRightPane} fields={fields} labelField={labelField} />
-            )
-          ) : (
-            <div className="h-full flex items-center justify-center text-sm text-content-presentation-global-tertiary">
-              No node selected.
-            </div>
-          )}
-        </div>
-      </div>
-
-      {isMobile && (
-        <TreeDrawer open={drawerOpen} onOpenChange={setDrawerOpen}>
-          {treeContent}
-        </TreeDrawer>
-      )}
-    </div>
-  );
-}
-
-/**
- * Card mode for the Tree right pane: renders the same record set as Table
- * mode, one library <Card> per record. The label field is the card header;
- * the remaining visible fields are key/value rows in the card body.
- */
-function CardGrid({
-  records,
-  fields,
-  labelField,
-}: {
-  records: DynamicRecord[];
-  fields: FieldConfig[];
-  labelField: FieldConfig;
-}) {
-  const bodyFields = visibleFields(fields)
-    .filter((f) => f.path !== labelField.path)
-    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-
-  if (records.length === 0) {
-    return (
-      <div className="h-full flex items-center justify-center text-sm text-content-presentation-global-tertiary">
-        No records.
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full overflow-y-auto p-4 bg-background-presentation-body-primary">
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-        {records.map((record, idx) => {
-          const labelValue = getByPath(record, labelField.path);
-          return (
-            <Card key={(record.id ?? idx) as string | number} className="overflow-hidden">
-              <CardHeader className="pb-2">
-                <div className="text-xs uppercase tracking-wide text-content-presentation-global-tertiary">
-                  {labelField.label ?? labelField.path}
-                </div>
-                <div className="text-base font-semibold text-content-presentation-global-primary">
-                  {renderField(labelValue, labelField, record)}
-                </div>
-              </CardHeader>
-              <CardContent className="space-y-2 pt-0">
-                {bodyFields.map((f) => {
-                  const value = getByPath(record, f.path);
-                  if (value == null) return null;
-                  return (
-                    <div key={f.path} className="flex items-center justify-between gap-3 text-sm">
-                      <span className="text-content-presentation-global-tertiary">
-                        {f.label ?? f.path}
-                      </span>
-                      <span className="text-content-presentation-global-primary text-right">
-                        {renderField(value, f, record)}
-                      </span>
-                    </div>
-                  );
-                })}
-              </CardContent>
-            </Card>
-          );
-        })}
-      </div>
-    </div>
-  );
-}