@exxatdesignux/ui 0.2.17 → 0.2.19

package/template/components/placements-list-view.tsx

@@ -1,171 +0,0 @@
-"use client"
-
-/**
- * PlacementsListView — full-width row layout for the data list (vs table grid / board columns).
- * Shares column visibility + lifecycle rules with Table Properties via the same board column model.
- *
- * Shell (empty state + virtualization above 80 rows) comes from the generic
- * `DataRowList` primitive in `components/data-views/`. This file owns only
- * the placement-specific row body (column-driven field visibility).
- */
-
-import * as React from "react"
-import { useRouter } from "next/navigation"
-import type { Placement } from "@/lib/mock/placements"
-import { StatusBadge } from "@/components/placements-table-cells"
-import { Badge } from "@/components/ui/badge"
-import { ListPageBoardCard, ListPageBoardCardAvatar } from "@/components/data-views/list-page-board-card"
-import { DataRowList } from "@/components/data-views/data-row-list"
-import {
-  type BoardCardLifecycleTabId,
-  isBoardFieldActive,
-  scheduleKeysForTab,
-} from "@/lib/placement-board-card-layout"
-import { getConditionalRowBackground } from "@/lib/conditional-rule-match"
-import type { ConditionalRule } from "@/components/table-properties/types"
-import type { ColumnDef } from "@/components/data-table/types"
-
-/** Above this count, `DataRowList` virtualizes against the window scroll. */
-const VIRTUAL_ROWS_THRESHOLD = 80
-/** Initial row height guess (px); `measureElement` refines for variable content. */
-const ESTIMATE_ROW_PX = 100
-
-function scheduleSummary(row: Placement, tab: BoardCardLifecycleTabId): string | null {
-  switch (tab) {
-    case "all":
-      return [row.start, row.duration].filter(Boolean).join(" · ") || null
-    case "upcoming":
-      return row.daysUntilStart > 0
-        ? `${row.start} · Starts in ${row.daysUntilStart} days`
-        : row.start
-    case "ongoing":
-      return `${row.progressWeeksDone} / ${row.progressWeeksTotal} wks · Ends ${row.endDate}`
-    case "completed":
-      return [row.completionDate, row.finalStatus].filter(v => v && v !== "—").join(" · ") || null
-    default:
-      return null
-  }
-}
-
-function PlacementListRowContent({
-  row,
-  tab,
-  hiddenColKeys,
-  boardColumns,
-  conditionalRules,
-  onOpen,
-}: {
-  row: Placement
-  tab: BoardCardLifecycleTabId
-  hiddenColKeys: Set<string>
-  boardColumns: ColumnDef<Placement>[]
-  conditionalRules: ConditionalRule[] | undefined
-  onOpen: (id: number) => void
-}) {
-  const ruleBg = getConditionalRowBackground(row, conditionalRules)
-  const showStudent = isBoardFieldActive("student", tab, hiddenColKeys, boardColumns)
-  const showStatus = isBoardFieldActive("status", tab, hiddenColKeys, boardColumns)
-  const showSite = isBoardFieldActive("site", tab, hiddenColKeys, boardColumns)
-  const showSpec = isBoardFieldActive("specialization", tab, hiddenColKeys, boardColumns)
-  const showInternship = isBoardFieldActive("internship", tab, hiddenColKeys, boardColumns)
-  const sk = scheduleKeysForTab(tab)
-  const showSchedule = sk.some(k => isBoardFieldActive(k, tab, hiddenColKeys, boardColumns))
-  const schedule = showSchedule ? scheduleSummary(row, tab) : null
-
-  const title = showStudent ? row.student : `Placement ${row.id}`
-
-  const leading = showStudent ? (
-    <ListPageBoardCardAvatar initials={row.initials} className="size-9" />
-  ) : (
-    <span className="size-9 shrink-0 rounded-full bg-muted/80" aria-hidden />
-  )
-
-  const rowEnd = showStatus ? (
-    <div className="flex shrink-0 items-center gap-2 pt-0.5">
-      <StatusBadge status={row.status} surface="board" />
-      <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden />
-    </div>
-  ) : (
-    <i className="fa-light fa-chevron-right mt-1 shrink-0 text-xs text-muted-foreground" aria-hidden />
-  )
-
-  return (
-    <ListPageBoardCard
-      layout="row"
-      leading={leading}
-      rowEnd={rowEnd}
-      isNew={row.isNew}
-      style={ruleBg ? { background: ruleBg } : undefined}
-      onClick={() => onOpen(row.id)}
-    >
-      <div className="space-y-1">
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="text-sm font-semibold text-foreground">{title}</span>
-          {row.isNew ? (
-            <Badge variant="secondary" className="h-5 px-1.5 text-xs font-medium">
-              New
-            </Badge>
-          ) : null}
-        </div>
-        {showSite ? (
-          <p className="text-xs text-foreground/90">
-            <span className="font-medium">{row.site}</span>
-            {row.siteAddress ? (
-              <span className="text-muted-foreground"> · {row.siteAddress}</span>
-            ) : null}
-          </p>
-        ) : null}
-        {(showSpec || showInternship) ? (
-          <p className="text-xs text-muted-foreground">
-            {[showSpec ? row.specialization : null, showInternship ? row.internship : null]
-              .filter(Boolean)
-              .join(" · ")}
-          </p>
-        ) : null}
-        {schedule ? <p className="text-xs text-muted-foreground tabular-nums">{schedule}</p> : null}
-      </div>
-    </ListPageBoardCard>
-  )
-}
-
-export interface PlacementsListViewProps {
-  rows: Placement[]
-  lifecycleTabId: BoardCardLifecycleTabId
-  hiddenColKeys: Set<string>
-  boardColumns: ColumnDef<Placement>[]
-  conditionalRules?: ConditionalRule[]
-  emptyCopy: string
-}
-
-export function PlacementsListView({
-  rows,
-  lifecycleTabId,
-  hiddenColKeys,
-  boardColumns,
-  conditionalRules,
-  emptyCopy,
-}: PlacementsListViewProps) {
-  const router = useRouter()
-  const onOpen = React.useCallback((id: number) => router.push(`/data-list/${id}`), [router])
-
-  return (
-    <DataRowList<Placement>
-      rows={rows}
-      getRowId={row => row.id}
-      emptyState={emptyCopy}
-      ariaLabel="Placements"
-      virtualizeThreshold={VIRTUAL_ROWS_THRESHOLD}
-      estimatedRowHeight={ESTIMATE_ROW_PX}
-      renderRow={row => (
-        <PlacementListRowContent
-          row={row}
-          tab={lifecycleTabId}
-          hiddenColKeys={hiddenColKeys}
-          boardColumns={boardColumns}
-          conditionalRules={conditionalRules}
-          onOpen={onOpen}
-        />
-      )}
-    />
-  )
-}

package/template/components/placements-page-header.tsx

@@ -1,166 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/components/ui/button"
-import { Kbd, KbdGroup } from "@/components/ui/kbd"
-import { PageHeader } from "@/components/page-header"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  Shortcut,
-} from "@/components/ui/dropdown-menu"
-import { Tip } from "@/components/ui/tip"
-import { useAltKeyLabel, useModKeyLabel } from "@/hooks/use-mod-key-label"
-import { isEditableTarget } from "@/lib/editable-target"
-
-export interface PlacementsPageHeaderProps {
-  /** Main heading in the page header */
-  title?: string
-  /** Primary button label */
-  primaryCtaLabel?: string
-  /** Shown under the page title */
-  subtitle?: string
-  onNewPlacement: () => void
-  onExport: () => void
-  showMetrics: boolean
-  onToggleMetrics: () => void
-  /** When false, title + subtitle are hidden visually (Display options). */
-  showTitleBlock?: boolean
-  className?: string
-}
-
-/**
- * List hub shell header — title, primary CTA, overflow menu (export, metrics).
- * Reusable for any route that needs the same chrome.
- */
-export function PlacementsPageHeader({
-  title = "Sample records",
-  primaryCtaLabel = "New row",
-  subtitle = "24 demo rows · Last updated now",
-  onNewPlacement,
-  onExport,
-  showMetrics,
-  onToggleMetrics,
-  showTitleBlock = true,
-  className,
-}: PlacementsPageHeaderProps) {
-  const mod = useModKeyLabel()
-  const alt = useAltKeyLabel()
-  const [moreOpen, setMoreOpen] = React.useState(false)
-
-  /** ⌘⌥N / Ctrl+Alt+N — avoids ⌘⇧N / Ctrl+Shift+N (private/incognito windows). */
-  React.useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (!e.altKey || (!e.metaKey && !e.ctrlKey)) return
-      if (e.key.toLowerCase() !== "n") return
-      if (isEditableTarget(e.target)) return
-      e.preventDefault()
-      onNewPlacement()
-    }
-    document.addEventListener("keydown", onKey)
-    return () => document.removeEventListener("keydown", onKey)
-  }, [onNewPlacement])
-
-  /** ⌘⌥M / Ctrl+Alt+M — avoids ⌘⇧O / Ctrl+Shift+O (bookmark manager in Chromium). */
-  React.useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (!e.altKey || (!e.metaKey && !e.ctrlKey)) return
-      if (e.key.toLowerCase() !== "m") return
-      if (isEditableTarget(e.target)) return
-      e.preventDefault()
-      setMoreOpen(o => !o)
-    }
-    document.addEventListener("keydown", onKey)
-    return () => document.removeEventListener("keydown", onKey)
-  }, [])
-
-  return (
-    <>
-      <Shortcut keys="⌘⇧E" onInvoke={onExport} />
-      <Shortcut keys="⌘⌥H" onInvoke={onToggleMetrics} />
-    <PageHeader
-      title={title}
-      subtitle={subtitle}
-      className={className}
-      showTitleBlock={showTitleBlock}
-      actions={
-        <div className="flex items-center gap-2" role="group" aria-label="Primary list actions">
-          <Tip
-            side="bottom"
-            label={
-              <>
-                <span>{primaryCtaLabel}</span>
-                <KbdGroup>
-                  <Kbd>{mod}</Kbd>
-                  <Kbd>{alt}</Kbd>
-                  <Kbd>N</Kbd>
-                </KbdGroup>
-              </>
-            }
-          >
-            <Button size="lg" onClick={onNewPlacement}>
-              <i className="fa-light fa-plus" aria-hidden="true" />
-              {primaryCtaLabel}
-            </Button>
-          </Tip>
-          <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
-            <Tip
-              side="bottom"
-              label={
-                <>
-                  <span>More actions</span>
-                  <KbdGroup>
-                    <Kbd>{mod}</Kbd>
-                    <Kbd>{alt}</Kbd>
-                    <Kbd>M</Kbd>
-                  </KbdGroup>
-                </>
-              }
-            >
-              <DropdownMenuTrigger asChild>
-                <Button
-                  size="lg"
-                  variant="outline"
-                  className="aspect-square px-0"
-                  aria-label="More actions"
-                >
-                  <i className="fa-light fa-ellipsis text-base" aria-hidden="true" />
-                </Button>
-              </DropdownMenuTrigger>
-            </Tip>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem
-                shortcut="⌘⇧E"
-                onSelect={() => {
-                  /* Defer past Radix menu close + focus restore so Export Sheet mounts reliably. */
-                  window.setTimeout(() => onExport(), 0)
-                }}
-              >
-                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-                Export
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                shortcut="⌘⌥H"
-                onSelect={() => {
-                  window.setTimeout(() => onToggleMetrics(), 0)
-                }}
-              >
-                <i
-                  className={`fa-light ${showMetrics ? "fa-eye-slash" : "fa-eye"}`}
-                  aria-hidden="true"
-                />
-                {showMetrics ? "Hide metric section" : "Show metric section"}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      }
-    />
-    </>
-  )
-}
-

package/template/components/placements-table-cells.test.tsx

@@ -1,22 +0,0 @@
-import { describe, expect, it } from "vitest"
-import { render, screen } from "@testing-library/react"
-
-import { HireBadge, ReadinessBadge, StatusBadge } from "./placements-table-cells"
-
-describe("placements-table-cells", () => {
-  it("renders StatusBadge label for confirmed", () => {
-    render(<StatusBadge status="confirmed" />)
-    expect(screen.getByText("Confirmed")).toBeInTheDocument()
-  })
-
-  it("ReadinessBadge uses destructive variant for risk copy", () => {
-    const { container } = render(<ReadinessBadge value="At risk" />)
-    expect(container.querySelector("[data-slot='badge']")).toBeTruthy()
-    expect(screen.getByText("At risk")).toBeInTheDocument()
-  })
-
-  it("HireBadge shows em dash for empty", () => {
-    render(<HireBadge value="" />)
-    expect(screen.getByText("—")).toBeInTheDocument()
-  })
-})

package/template/components/placements-table-cells.tsx

@@ -1,173 +0,0 @@
-"use client"
-
-/**
- * Placement table cell primitives — extracted from placements-table for reuse and easier testing.
- */
-
-import * as React from "react"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Tip } from "@/components/ui/tip"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
-import {
-  PLACEMENT_STATUS_BADGE_CLASS,
-  PLACEMENT_STATUS_ICON,
-  PLACEMENT_STATUS_LABEL,
-} from "@/lib/list-status-badges"
-import { AvatarInitials } from "@/components/ui/avatar"
-import type { Placement, Status } from "@/lib/mock/placements"
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Placement status — same maps + shell as other list hubs (`list-status-badges`)
-// ─────────────────────────────────────────────────────────────────────────────
-
-function isPlacementStatus(v: string): v is Status {
-  return v in PLACEMENT_STATUS_LABEL
-}
-
-export function StatusBadge({
-  status,
-  surface = "table",
-}: {
-  status: Status | string
-  surface?: "table" | "board"
-}) {
-  if (!isPlacementStatus(status)) {
-    return (
-      <Badge variant="outline" className="text-xs shrink-0">
-        {String(status)}
-      </Badge>
-    )
-  }
-  return (
-    <ListHubStatusBadge
-      surface={surface}
-      label={PLACEMENT_STATUS_LABEL[status]}
-      tintClassName={PLACEMENT_STATUS_BADGE_CLASS[status]}
-      icon={PLACEMENT_STATUS_ICON[status]}
-    />
-  )
-}
-
-export function AvatarCircle({ initials }: { initials: string }) {
-  return (
-    <AvatarInitials
-      initials={initials}
-      className="size-7 shrink-0 text-xs"
-      fallbackClassName="text-xs"
-    />
-  )
-}
-
-export function WeeksProgressCell({ row }: { row: Placement }) {
-  const { progressWeeksDone, progressWeeksTotal } = row
-  const total = Math.max(1, progressWeeksTotal)
-  const pct = Math.min(100, Math.round((progressWeeksDone / total) * 100))
-  return (
-    <div className="flex min-w-[128px] max-w-[200px] flex-col gap-1.5">
-      <div className="h-2 overflow-hidden rounded-full bg-muted">
-        <div
-          className="h-full rounded-full bg-primary transition-[width]"
-          style={{ width: `${pct}%` }}
-        />
-      </div>
-      <span className="text-xs tabular-nums text-muted-foreground">
-        {progressWeeksDone} / {progressWeeksTotal} wks
-      </span>
-    </div>
-  )
-}
-
-export function ReadinessBadge({ value }: { value: string }) {
-  const lower = value.toLowerCase()
-  const variant =
-    lower.includes("risk") || lower.includes("blocked")
-      ? "destructive"
-      : lower.includes("review")
-        ? "secondary"
-        : "outline"
-  return (
-    <Badge variant={variant} className="h-6 px-2 py-1 text-xs font-medium leading-none">
-      {value}
-    </Badge>
-  )
-}
-
-export function HireBadge({ value }: { value: string }) {
-  if (value === "—" || !value) return <span className="text-sm text-muted-foreground">—</span>
-  const yes = value.toLowerCase() === "yes"
-  return (
-    <Badge
-      variant={yes ? "default" : "secondary"}
-      className="h-6 border-0 px-2 py-1 text-xs font-medium leading-none"
-    >
-      {value}
-    </Badge>
-  )
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Row actions
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface RowActionDef {
-  label: string
-  icon: string
-  onClick: (row: Placement) => void
-  variant?: "destructive"
-}
-
-export const PLACEMENT_ROW_ACTIONS: RowActionDef[] = [
-  { label: "Edit",   icon: "fa-pen-to-square", onClick: _row => {}   },
-  { label: "Open",   icon: "fa-arrow-up-right", onClick: _row => {}  },
-  { label: "Delete", icon: "fa-trash",          onClick: _row => {}, variant: "destructive" },
-]
-
-export function RowActions({ row, actions }: { row: Placement; actions: RowActionDef[] }) {
-  if (!actions.length) return null
-
-  if (actions.length === 1) {
-    const a = actions[0]
-    return (
-      <Tip label={a.label} side="top">
-        <Button size="icon-sm" variant="ghost" aria-label={`${a.label} ${row.student}`}
-          onClick={() => a.onClick(row)}>
-          <i className={`fa-light ${a.icon} text-sm`} aria-hidden="true" />
-        </Button>
-      </Tip>
-    )
-  }
-
-  return (
-    <DropdownMenu>
-      <Tip label={`More options for ${row.student}`} side="top">
-        <DropdownMenuTrigger asChild>
-          <Button size="icon-sm" variant="ghost" aria-label={`More options for ${row.student}`}>
-            <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
-          </Button>
-        </DropdownMenuTrigger>
-      </Tip>
-      <DropdownMenuContent align="end">
-        {actions.map((a, i) => (
-          <React.Fragment key={a.label}>
-            {a.variant === "destructive" && i > 0 && <DropdownMenuSeparator />}
-            <DropdownMenuItem
-              onClick={() => a.onClick(row)}
-              className={a.variant === "destructive" ? "text-destructive focus:text-destructive" : ""}
-            >
-              <i className={`fa-light ${a.icon}`} aria-hidden="true" />
-              {a.label}
-            </DropdownMenuItem>
-          </React.Fragment>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}