torch-glare 2.1.1 → 2.1.3

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

@@ -0,0 +1,353 @@
+"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,
+): any {
+  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}
+        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

@@ -0,0 +1,49 @@
+"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

@@ -0,0 +1,285 @@
+"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 "enum-badge" 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>
+  )
+}