torch-glare 2.1.1 → 2.1.2

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

@@ -0,0 +1,242 @@
+"use client"
+
+import type React from "react"
+import { useMemo, useState } from "react"
+import { Badge } from "../Badge"
+import { Plus, MoreHorizontal } from "lucide-react"
+import type {
+  DynamicRecord,
+  ViewConfig,
+  DynamicColumnConfig,
+  FieldConfig,
+} from "./types"
+import { Button } from "../Button"
+import { Card, CardContent, CardHeader } from "../Card"
+import { getByPath, setByPath } from "../../utils/dataViews/pathUtils"
+import { renderField } from "./fieldRenderers"
+import { visibleFields } from "../../utils/dataViews/fieldUtils"
+import { useIsMobile } from "../../hooks/useIsMobile"
+import { resolveBadgeVariant } from "./badgeAdapter"
+
+export type KanbanViewProps = {
+  data: DynamicRecord[]
+  columns?: DynamicColumnConfig[]
+  fields: FieldConfig[]
+  config: ViewConfig
+  onDataUpdate?: (data: DynamicRecord[]) => void
+  groupByField?: string
+}
+
+type KanbanColumn = {
+  id: string
+  title: string
+  color: string
+  items: DynamicRecord[]
+}
+
+const COLUMN_COLORS = [
+  "bg-background-presentation-badge-gray-primary",
+  "bg-background-presentation-badge-blue-primary",
+  "bg-background-presentation-badge-purple-primary",
+  "bg-background-presentation-badge-success-primary",
+  "bg-background-presentation-badge-yellow-primary",
+  "bg-background-presentation-badge-red-primary",
+]
+
+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",
+}: KanbanViewProps) {
+  const isMobile = useIsMobile()
+  const [draggedItem, setDraggedItem] = useState<{ item: DynamicRecord; columnId: 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> = {}
+
+    if (groupField?.variants) {
+      Object.keys(groupField.variants).forEach((value, index) => {
+        groups[value] = {
+          id: value,
+          title: value,
+          color: COLUMN_COLORS[index % COLUMN_COLORS.length],
+          items: [],
+        }
+      })
+    }
+
+    let nextColorIdx = Object.keys(groups).length
+    for (const item of data) {
+      const value = String(getByPath(item, groupByField) ?? "Uncategorized")
+      if (!groups[value]) {
+        groups[value] = {
+          id: value,
+          title: value,
+          color: COLUMN_COLORS[nextColorIdx++ % COLUMN_COLORS.length],
+          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) => {
+    e.preventDefault()
+  }
+
+  const idPath = displayFields[0]?.path
+
+  const handleDrop = (targetColumnId: string) => {
+    if (!draggedItem) 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)
+  }
+
+  const renderCard = (item: DynamicRecord, idx: number) => {
+    const itemId = getId(item, idPath, idx)
+    const titleField = displayFields[0]
+    const descField = displayFields[1]
+    const titleValue = titleField ? getByPath(item, titleField.path) : ""
+    const descValue = descField ? getByPath(item, descField.path) : null
+
+    return (
+      <Card
+        key={itemId}
+        draggable={!isMobile}
+        onDragStart={!isMobile ? () => handleDragStart(item, String(getByPath(item, groupByField) ?? "Uncategorized")) : undefined}
+        className={isMobile ? "cursor-pointer" : "cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"}
+      >
+        <CardHeader>
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex-1">
+              {titleField && renderField(titleValue, titleField, item)}
+            </div>
+            <Button variant="BorderStyle" buttonType="icon" className="h-6 w-6 -mt-1 -mr-1">
+              <MoreHorizontal className="h-3 w-3" />
+            </Button>
+          </div>
+          {descField && descValue != null && (
+            <div className="text-xs text-content-presentation-global-tertiary leading-relaxed">
+              {renderField(descValue, descField, item)}
+            </div>
+          )}
+        </CardHeader>
+        <CardContent className="space-y-3 pt-0">
+          <div className="space-y-2">
+            {displayFields.slice(2).map((field) => {
+              if (field.path === groupByField) return null
+              const value = getByPath(item, field.path)
+              if (value == null) return null
+              return (
+                <div key={field.path} className="flex items-center justify-between text-xs">
+                  <span className="text-content-presentation-global-tertiary">{field.label}:</span>
+                  {renderField(value, field, item)}
+                </div>
+              )
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  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} />
+              <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-6 bg-background-presentation-body-primary">
+      <div className="flex h-full gap-4 pb-4" style={{ minWidth: "max-content" }}>
+        {kanbanColumns.map((column) => (
+          <div
+            key={column.id}
+            className="flex w-80 flex-col gap-3"
+            onDragOver={handleDragOver}
+            onDrop={() => handleDrop(column.id)}
+          >
+            <ColumnHeader column={column} />
+            <div className="flex flex-col gap-3 overflow-y-auto">
+              {column.items.map((item, idx) => renderCard(item, idx))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ColumnHeader({ column }: { column: KanbanColumn }) {
+  const countBadge = resolveBadgeVariant("gray")
+  return (
+    <div className="flex items-center justify-between rounded-lg p-3 border border-border-presentation-global-primary bg-background-presentation-body-overlay-primary">
+      <div className="flex items-center gap-2">
+        <div className={`h-2 w-2 rounded-full ${column.color}`} />
+        <h3 className="font-semibold text-content-presentation-global-primary">{column.title}</h3>
+        <Badge
+          {...countBadge}
+          label={String(column.items.length)}
+          className="h-5 rounded-full p-0 text-xs"
+          size="XS"
+         
+        />
+      </div>
+      <div className="flex items-center gap-1">
+        <Button variant="BorderStyle" buttonType="icon" className="h-7 w-7">
+          <Plus className="h-4 w-4" />
+        </Button>
+        <Button variant="BorderStyle" buttonType="icon" className="h-7 w-7">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,80 @@
+"use client";
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Switch } from "../Switch";
+import { cn } from "../../utils/cn";
+
+/**
+ * DataViews config-panel form controls.
+ *
+ * These are intentionally NOT shared library components. The panel chrome is
+ * always-dark (Figma `Cun` = #000000) and hardcodes Figma hex values, which
+ * conflicts with the design-system token / `data-theme` convention used by the
+ * public components. They live colocated with the panel so the always-dark
+ * Figma styling stays internal to DataViews. Not re-exported from index.ts.
+ */
+
+/**
+ * Saved View / Default Sort radio row, built from the raw Radix primitive to
+ * match Figma node 1612:30021. The shared <Radio>/<Label> components impose
+ * their own circle size, color tokens, line-height reset and wrapper flex
+ * layout that fight this panel's always-dark Figma spec, so the row is
+ * hand-built here instead.
+ *
+ * The whole row IS the Radix Item, so the entire area (circle + label +
+ * padding) is one click target. The circle/label are non-interactive visuals.
+ *
+ */
+export function RadioRow({ value, label }: { value: string; label: string }) {
+  return (
+    <RadioGroupPrimitive.Item
+      value={value}
+      className={cn(
+        "group flex w-full items-center gap-1.5 py-1 pl-2",
+        "cursor-pointer rounded-[8px] text-left outline-none transition-colors",
+        "hover:bg-white/[0.04] focus-visible:bg-white/[0.04]",
+      )}
+    >
+      <span
+        className={cn(
+          "flex h-[14px] w-[14px] shrink-0 items-center justify-center rounded-full",
+          "border border-[#626467] bg-[rgba(255,255,255,0.05)] transition-colors",
+          "group-data-[state=checked]:border-transparent",
+          "group-data-[state=checked]:bg-[#005ECC]",
+        )}
+      >
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+          <span className="h-[6px] w-[6px] rounded-full bg-white" />
+        </RadioGroupPrimitive.Indicator>
+      </span>
+      <span className="text-[14px] font-normal leading-[1.475] text-white">
+        {label}
+      </span>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+// 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>
+  )
+}