torch-glare 2.4.4 → 2.5.0

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

@@ -1,336 +0,0 @@
-"use client";
-
-import type React from "react";
-import { Fragment, useMemo, useState } from "react";
-import { MoreHorizontal } from "lucide-react";
-import type {
-  DynamicRecord,
-  ViewConfig,
-  DynamicColumnConfig,
-  FieldConfig,
-  KanbanColumnColor,
-} from "./types";
-import { Button } from "../Button";
-import { DataViewCard, type DataViewCardRow } from "../../layouts/DataViewCard";
-import { getByPath, setByPath } from "../../utils/dataViews/pathUtils";
-import { renderField } from "./fieldRenderers";
-import { visibleFields } from "../../utils/dataViews/fieldUtils";
-import { useIsMobile } from "../../hooks/useIsMobile";
-import { cn } from "../../utils/cn";
-
-export type KanbanViewProps = {
-  data: DynamicRecord[];
-  columns?: DynamicColumnConfig[];
-  fields: FieldConfig[];
-  config: ViewConfig;
-  onDataUpdate?: (data: DynamicRecord[]) => void;
-  groupByField?: string;
-  // Path of the field to render as the card title. Defaults to the first
-  // visible non-group-by field. Use this to opt out of the "first field wins"
-  // heuristic when consumers want a specific field (e.g. "name", "id").
-  titleField?: string;
-  // Click handler for the column header's overflow button. When omitted the
-  // button is hidden so app-less columns stay clean.
-  onColumnAction?: (columnId: string) => void;
-};
-
-const COLUMN_PALETTE: readonly KanbanColumnColor[] = [
-  "gray",
-  "purple",
-  "orange",
-  "blue",
-  "green",
-  "red",
-] as const;
-type ColumnColor = KanbanColumnColor;
-
-// Figma kanban header pills use deeply saturated dark fills (#131415, #330C69,
-// #532200, #002F66). We match each to the closest existing raw-color token in
-// `glare-torch-mode`. Purple has no presentation-layer match close enough, so
-// we use the exact Figma hex inline.
-const COLUMN_BG: Record<ColumnColor, string> = {
-  gray: "bg-black-900",
-  purple: "bg-[#330C69]",
-  orange: "bg-orange-900",
-  blue: "bg-blue-sparkle-900",
-  green: "bg-green-cyan-900",
-  red: "bg-red-orange-900",
-};
-
-const colorIndexFor = (key: string) => {
-  let h = 0;
-  for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) | 0;
-  return Math.abs(h) % COLUMN_PALETTE.length;
-};
-
-type KanbanColumn = {
-  id: string;
-  title: string;
-  color: ColumnColor;
-  items: DynamicRecord[];
-};
-
-function getId(item: DynamicRecord, fallbackPath: string | undefined, idx: number): unknown {
-  if (item?.id != null) return item.id;
-  if (fallbackPath) {
-    const v = getByPath(item, fallbackPath);
-    if (v != null) return v;
-  }
-  return idx;
-}
-
-export function KanbanView({
-  data,
-  fields,
-  onDataUpdate,
-  groupByField = "status",
-  titleField,
-  onColumnAction,
-}: KanbanViewProps) {
-  const isMobile = useIsMobile();
-  const [draggedItem, setDraggedItem] = useState<{
-    item: DynamicRecord;
-    columnId: string;
-  } | null>(null);
-  const [dragOverColumnId, setDragOverColumnId] = useState<string | null>(null);
-
-  const displayFields = useMemo(
-    () => visibleFields(fields).sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
-    [fields],
-  );
-
-  const groupField = useMemo(
-    () => fields.find((f) => f.path === groupByField),
-    [fields, groupByField],
-  );
-
-  const kanbanColumns = useMemo<KanbanColumn[]>(() => {
-    const groups: Record<string, KanbanColumn> = {};
-    const overrides = groupField?.kanbanVariants;
-
-    // Resolve a column's visible title + pill color. Consumer-supplied
-    // `kanbanVariants[key]` wins; otherwise fall back to the raw key and the
-    // palette rotation.
-    const resolve = (key: string, paletteIdx: number) => ({
-      title: overrides?.[key]?.label ?? key,
-      color: overrides?.[key]?.color ?? COLUMN_PALETTE[paletteIdx % COLUMN_PALETTE.length],
-    });
-
-    if (groupField?.variants) {
-      Object.keys(groupField.variants).forEach((value, index) => {
-        groups[value] = {
-          id: value,
-          ...resolve(value, index),
-          items: [],
-        };
-      });
-    }
-
-    for (const item of data) {
-      const value = String(getByPath(item, groupByField) ?? "Uncategorized");
-      if (!groups[value]) {
-        groups[value] = {
-          id: value,
-          ...resolve(value, colorIndexFor(value)),
-          items: [],
-        };
-      }
-      groups[value].items.push(item);
-    }
-
-    return Object.values(groups);
-  }, [data, groupByField, groupField]);
-
-  const handleDragStart = (item: DynamicRecord, columnId: string) => {
-    setDraggedItem({ item, columnId });
-  };
-
-  const handleDragOver = (e: React.DragEvent, columnId: string) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-    if (dragOverColumnId !== columnId) setDragOverColumnId(columnId);
-  };
-
-  const handleDragLeave = (e: React.DragEvent, columnId: string) => {
-    // Only clear when the pointer actually exits this column — moving over a
-    // child element fires dragleave on the parent before dragenter on the child.
-    if (e.currentTarget.contains(e.relatedTarget as Node)) return;
-    if (dragOverColumnId === columnId) setDragOverColumnId(null);
-  };
-
-  const handleDragEnd = () => {
-    setDraggedItem(null);
-    setDragOverColumnId(null);
-  };
-
-  const idPath = displayFields[0]?.path;
-
-  const handleDrop = (targetColumnId: string) => {
-    if (!draggedItem) {
-      setDragOverColumnId(null);
-      return;
-    }
-    const draggedId = getId(draggedItem.item, idPath, -1);
-
-    const updatedData = data.map((item, idx) => {
-      const itemId = getId(item, idPath, idx);
-      if (itemId === draggedId) {
-        return setByPath(item, groupByField, targetColumnId);
-      }
-      return item;
-    });
-
-    onDataUpdate?.(updatedData);
-    setDraggedItem(null);
-    setDragOverColumnId(null);
-  };
-
-  // Resolve the title field: consumer-supplied `titleField` wins, else fall
-  // back to the first visible non-group-by field.
-  const resolvedTitleField = useMemo(() => {
-    if (titleField) return displayFields.find((f) => f.path === titleField);
-    return displayFields.find((f) => f.path !== groupByField);
-  }, [displayFields, titleField, groupByField]);
-
-  const renderCard = (item: DynamicRecord, idx: number) => {
-    const itemId = getId(item, idPath, idx);
-    const isDraggingThis = draggedItem != null && getId(draggedItem.item, idPath, -1) === itemId;
-    const titleFieldResolved = resolvedTitleField;
-    const titleValue = titleFieldResolved ? getByPath(item, titleFieldResolved.path) : "";
-    const bodyFields = displayFields.filter(
-      (f) => f.path !== groupByField && f.path !== titleFieldResolved?.path,
-    );
-
-    // Pair body fields two-per-row so the grid keeps its alternating rhythm
-    // even when one side is missing. If a pair has only one non-null value, the
-    // surviving cell spans both columns. Fully empty pairs are dropped so we
-    // don't render a phantom row with only hairlines.
-    const rows: DataViewCardRow[] = [];
-    for (let i = 0; i < bodyFields.length; i += 2) {
-      const left = bodyFields[i];
-      const right = bodyFields[i + 1];
-      const leftValue = left ? getByPath(item, left.path) : null;
-      const rightValue = right ? getByPath(item, right.path) : null;
-      const cells: DataViewCardRow = [];
-      if (left && leftValue != null) {
-        cells.push({
-          key: left.path,
-          label: left.label,
-          value: renderField(leftValue, left, item),
-        });
-      }
-      if (right && rightValue != null) {
-        cells.push({
-          key: right.path,
-          label: right.label,
-          value: renderField(rightValue, right, item),
-        });
-      }
-      if (cells.length > 0) rows.push(cells);
-    }
-
-    return (
-      <DataViewCard
-        key={itemId as string | number}
-        draggable={!isMobile}
-        onDragStart={
-          !isMobile
-            ? () => handleDragStart(item, String(getByPath(item, groupByField) ?? "Uncategorized"))
-            : undefined
-        }
-        onDragEnd={!isMobile ? handleDragEnd : undefined}
-        className={cn(
-          isMobile
-            ? "cursor-pointer"
-            : "cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow",
-          !isMobile && isDraggingThis && "opacity-40",
-        )}
-        title={titleFieldResolved && renderField(titleValue, titleFieldResolved, item)}
-        rows={rows}
-      />
-    );
-  };
-
-  if (isMobile) {
-    return (
-      <div className="h-full overflow-y-auto p-4 bg-background-presentation-body-primary">
-        <div className="flex flex-col gap-4">
-          {kanbanColumns.map((column) => (
-            <div key={column.id} className="flex flex-col gap-3">
-              <ColumnHeader column={column} onAction={onColumnAction} />
-              <div className="flex flex-col gap-3">
-                {column.items.map((item, idx) => renderCard(item, idx))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full overflow-x-auto p-2 bg-background-presentation-body-primary">
-      <div className="flex h-full gap-4" style={{ minWidth: "max-content" }}>
-        {kanbanColumns.map((column, i) => {
-          const isDropTarget = draggedItem != null && dragOverColumnId === column.id;
-          return (
-            <Fragment key={column.id}>
-              <div
-                className={cn(
-                  "flex w-[279px] flex-col gap-2 rounded-[12px] p-1 transition-colors duration-150 ease-in-out border-2 border-transparent",
-                  isDropTarget &&
-                    "bg-background-presentation-cardbutton-blue-hover border-dashed border-border-presentation-state-focus",
-                )}
-                onDragOver={(e) => handleDragOver(e, column.id)}
-                onDragLeave={(e) => handleDragLeave(e, column.id)}
-                onDrop={() => handleDrop(column.id)}
-              >
-                <ColumnHeader column={column} onAction={onColumnAction} />
-                <div className="flex flex-col gap-2 overflow-y-auto py-1">
-                  {column.items.map((item, idx) => renderCard(item, idx))}
-                </div>
-              </div>
-              {i < kanbanColumns.length - 1 && (
-                <div
-                  aria-hidden
-                  className="self-stretch mt-[42px] border-dashed border-l-[2px]  border-border-presentation-global-primary"
-                />
-              )}
-            </Fragment>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function ColumnHeader({
-  column,
-  onAction,
-}: {
-  column: KanbanColumn;
-  onAction?: (columnId: string) => void;
-}) {
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between rounded-[8px] px-[6px] py-[4px]",
-        COLUMN_BG[column.color],
-      )}
-    >
-      <h3 className="typography-headers-small-medium text-content-presentation-global-primary-light">
-        {column.title}
-      </h3>
-      {onAction && (
-        <Button
-          variant="BorderStyle"
-          buttonType="icon"
-          className="h-5 w-5 border-0 bg-transparent text-content-presentation-global-primary-light hover:bg-white/10"
-          onClick={() => onAction(column.id)}
-        >
-          <MoreHorizontal className="h-3.5 w-3.5" />
-        </Button>
-      )}
-    </div>
-  );
-}

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

@@ -1,39 +0,0 @@
-"use client";
-
-import { Switch } from "../Switch";
-import { DataViewRadio } from "./DataViewRadio";
-
-/**
- * DataViews config-panel form controls.
- *
- * The config panel is wrapped in `data-theme="dark"`, so theme-aware
- * components (DataViewRadio, Switch) render in dark mode automatically. The
- * green-checked Switch hex is the only thing this panel still hardcodes
- * because it sits outside the theme system.
- */
-
-/**
- * Saved View / Default Sort radio row.
- *
- * Thin wrapper around the reusable {@link DataViewRadio} so the config panel
- * keeps a stable name. The whole row IS the Radix Item, so the entire area
- * (circle + label + padding) is one click target.
- */
-export function RadioRow({ value, label }: { value: string; label: string }) {
-  return <DataViewRadio value={value} label={label} />;
-}
-
-// Shared <Switch> with the bright-green checked track (#0AC713) from the Figma
-// Switcher-1.0 "On" state, applied regardless of the panel's dark theme scope.
-const SWITCH_GREEN = "data-[state=checked]:bg-[#0AC713] data-[state=checked]:border-[#0AC713]";
-
-type DataViewsSwitchProps = {
-  checked: boolean;
-  onCheckedChange: () => void;
-};
-
-/** Column show/hide toggle: the library <Switch> pre-styled to the panel's
- *  Figma green-checked spec. */
-export function DataViewsSwitch({ checked, onCheckedChange }: DataViewsSwitchProps) {
-  return <Switch checked={checked} onCheckedChange={onCheckedChange} className={SWITCH_GREEN} />;
-}

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

@@ -1,279 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import { X, GripVertical, ArrowUp, ArrowDown, Minus } from "lucide-react";
-import type { ViewConfig, ViewType, FieldConfig } from "./types";
-import { Button } from "../Button";
-import { Switch } from "../Switch";
-import { Divider } from "../Divider";
-import { Label } from "../Label";
-import { RadioGroup, Radio } from "../Radio";
-
-type SettingsPanelProps = {
-  config: ViewConfig;
-  onConfigChange: (config: Partial<ViewConfig>) => void;
-  onClose: () => void;
-  currentView: ViewType;
-  fields: FieldConfig[];
-};
-
-export function SettingsPanel({
-  config,
-  onConfigChange,
-  onClose,
-  currentView,
-  fields,
-}: SettingsPanelProps) {
-  const visibleFields = useMemo(() => fields.filter((f) => f.type !== "hidden"), [fields]);
-
-  const groupableFields = useMemo(() => fields.filter((f) => f.type === "enum-badge"), [fields]);
-
-  const visiblePaths = useMemo(() => new Set(visibleFields.map((f) => f.path)), [visibleFields]);
-  const fieldByPath = useMemo(
-    () => new Map(visibleFields.map((f) => [f.path, f])),
-    [visibleFields],
-  );
-  const orderedColumns = useMemo(
-    () =>
-      [...config.tableColumns]
-        .filter((c) => visiblePaths.has(c.id))
-        .sort((a, b) => a.order - b.order),
-    [config.tableColumns, visiblePaths],
-  );
-
-  const toggleColumnVisibility = (path: string) => {
-    const next = config.tableColumns.map((c) =>
-      c.id === path ? { ...c, visible: !c.visible } : c,
-    );
-    onConfigChange({ tableColumns: next });
-  };
-
-  const [dragPath, setDragPath] = useState<string | null>(null);
-  const [dragOverPath, setDragOverPath] = useState<string | null>(null);
-
-  const reorderColumn = (sourcePath: string, targetPath: string) => {
-    if (sourcePath === targetPath) return;
-    const ids = orderedColumns.map((c) => c.id);
-    const from = ids.indexOf(sourcePath);
-    const to = ids.indexOf(targetPath);
-    if (from === -1 || to === -1) return;
-    const reordered = [...ids];
-    const [moved] = reordered.splice(from, 1);
-    reordered.splice(to, 0, moved);
-    const orderByPath = new Map(reordered.map((id, i) => [id, i]));
-    const next = config.tableColumns.map((c) => {
-      const newOrder = orderByPath.get(c.id);
-      return newOrder == null ? c : { ...c, order: newOrder };
-    });
-    onConfigChange({ tableColumns: next });
-  };
-
-  return (
-    <div className="w-80 border-l border-border-presentation-global-primary bg-background-presentation-body-overlay-primary overflow-y-auto">
-      <div className="sticky top-0 z-10 flex items-center justify-between border-b border-border-presentation-global-primary bg-background-presentation-body-overlay-primary p-4">
-        <h2 className="font-semibold text-content-presentation-global-primary">Settings</h2>
-        <Button variant="BorderStyle" buttonType="icon" onClick={onClose} className="h-8 w-8">
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-
-      <div className="space-y-6 p-4">
-        <div className="space-y-3">
-          <h3 className="text-sm font-medium text-content-presentation-global-primary">General</h3>
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <Label htmlFor="show-filters">Show Filters</Label>
-              <Switch
-                id="show-filters"
-                checked={config.showFilters}
-                onCheckedChange={(checked) => onConfigChange({ showFilters: checked })}
-              />
-            </div>
-          </div>
-        </div>
-
-        <Divider />
-
-        {currentView === "table" && (
-          <>
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-content-presentation-global-primary">
-                Table Columns
-              </h3>
-              <p className="text-xs text-content-presentation-global-tertiary">
-                Show or hide columns in table view
-              </p>
-              {orderedColumns.length === 0 ? (
-                <p className="text-xs text-content-presentation-global-tertiary">
-                  No fields detected.
-                </p>
-              ) : (
-                <div className="space-y-2">
-                  {orderedColumns.map((col) => {
-                    const field = fieldByPath.get(col.id);
-                    const isDragging = dragPath === col.id;
-                    const isDropTarget = dragOverPath === col.id && dragPath !== col.id;
-                    return (
-                      <div
-                        key={col.id}
-                        draggable
-                        onDragStart={(e) => {
-                          setDragPath(col.id);
-                          e.dataTransfer.effectAllowed = "move";
-                          e.dataTransfer.setData("text/plain", col.id);
-                        }}
-                        onDragOver={(e) => {
-                          e.preventDefault();
-                          e.dataTransfer.dropEffect = "move";
-                          if (dragOverPath !== col.id) setDragOverPath(col.id);
-                        }}
-                        onDragLeave={() => {
-                          if (dragOverPath === col.id) setDragOverPath(null);
-                        }}
-                        onDrop={(e) => {
-                          e.preventDefault();
-                          if (dragPath) reorderColumn(dragPath, col.id);
-                          setDragPath(null);
-                          setDragOverPath(null);
-                        }}
-                        onDragEnd={() => {
-                          setDragPath(null);
-                          setDragOverPath(null);
-                        }}
-                        className={
-                          "flex items-center gap-2 rounded-lg border p-2 cursor-grab active:cursor-grabbing transition-colors " +
-                          (isDragging
-                            ? "opacity-50 border-border-presentation-global-primary "
-                            : isDropTarget
-                              ? "border-content-presentation-action-light-primary bg-background-presentation-form-field-primary "
-                              : "border-border-presentation-global-primary ")
-                        }
-                      >
-                        <GripVertical className="h-4 w-4 text-content-presentation-global-tertiary" />
-                        <span className="flex-1 text-sm text-content-presentation-global-primary">
-                          {col.label || field?.label || col.id}
-                        </span>
-                        <Switch
-                          checked={col.visible}
-                          onCheckedChange={() => toggleColumnVisibility(col.id)}
-                        />
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-            <Divider />
-          </>
-        )}
-
-        {currentView === "kanban" && (
-          <>
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-content-presentation-global-primary">
-                Kanban Grouping
-              </h3>
-              <p className="text-xs text-content-presentation-global-tertiary">
-                Group cards by field
-              </p>
-              {groupableFields.length === 0 ? (
-                <p className="text-xs text-content-presentation-global-tertiary">
-                  No groupable fields detected. Declare a field with type &quot;enum-badge&quot; to
-                  enable grouping.
-                </p>
-              ) : (
-                <RadioGroup
-                  value={config.kanbanGroupBy}
-                  onValueChange={(value) => onConfigChange({ kanbanGroupBy: value })}
-                >
-                  {groupableFields.map((field) => (
-                    <div key={field.path} className="flex items-center space-x-2">
-                      <Radio value={field.path} id={`group-${field.path}`} />
-                      <Label htmlFor={`group-${field.path}`}>{field.label ?? field.path}</Label>
-                    </div>
-                  ))}
-                </RadioGroup>
-              )}
-            </div>
-            <Divider />
-          </>
-        )}
-
-        {currentView === "inbox" && (
-          <>
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-content-presentation-global-primary">
-                Inbox Layout
-              </h3>
-              <div className="flex items-center justify-between">
-                <Label htmlFor="preview-pane" className="text-sm">
-                  Show Preview Pane
-                </Label>
-                <Switch
-                  id="preview-pane"
-                  checked={config.showPreviewPane}
-                  onCheckedChange={(checked) => onConfigChange({ showPreviewPane: checked })}
-                />
-              </div>
-            </div>
-            <Divider />
-          </>
-        )}
-
-        {orderedColumns.length > 0 && (
-          <div className="space-y-3">
-            <h3 className="text-sm font-medium text-content-presentation-global-primary">Sort</h3>
-            <p className="text-xs text-content-presentation-global-tertiary">
-              Pick a column and direction. Only one column sorts at a time.
-            </p>
-            <div className="space-y-2">
-              {orderedColumns.map((col) => {
-                const field = fieldByPath.get(col.id);
-                const isActive = config.sortBy === col.id;
-                const dir: "asc" | "desc" | "none" = isActive ? config.sortOrder : "none";
-                const setDir = (next: "asc" | "desc" | "none") => {
-                  if (next === "none") {
-                    onConfigChange({ sortBy: "" });
-                  } else {
-                    onConfigChange({ sortBy: col.id, sortOrder: next });
-                  }
-                };
-                const btn = (mode: "none" | "asc" | "desc", Icon: typeof Minus, label: string) => (
-                  <button
-                    type="button"
-                    aria-label={`${label} ${col.label || col.id}`}
-                    aria-pressed={dir === mode}
-                    onClick={() => setDir(mode)}
-                    className={
-                      "flex h-7 w-7 items-center justify-center rounded-md border transition-colors " +
-                      (dir === mode
-                        ? "border-content-presentation-action-light-primary bg-background-presentation-form-field-primary text-content-presentation-global-primary"
-                        : "border-border-presentation-global-primary text-content-presentation-global-tertiary hover:text-content-presentation-global-primary")
-                    }
-                  >
-                    <Icon className="h-3.5 w-3.5" />
-                  </button>
-                );
-                return (
-                  <div
-                    key={col.id}
-                    className="flex items-center gap-2 rounded-lg border border-border-presentation-global-primary p-2"
-                  >
-                    <span className="flex-1 text-sm text-content-presentation-global-primary">
-                      {col.label || field?.label || col.id}
-                    </span>
-                    <div className="flex items-center gap-1">
-                      {btn("none", Minus, "No sort")}
-                      {btn("asc", ArrowUp, "Sort ascending")}
-                      {btn("desc", ArrowDown, "Sort descending")}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}