@exxatdesignux/ui 0.2.19 → 0.3.0

package/template/components/onboarding/index.ts

@@ -1,3 +1,12 @@
+export {
+  GettingStarted,
+  GettingStartedProgressCard,
+  GettingStartedVariantView,
+  renderGettingStartedVariant,
+  GETTING_STARTED_STORAGE_KEY,
+} from "./getting-started"
+export type { GettingStartedVariant } from "./getting-started"
+
 export { Onboarding01 } from "./onboarding-01"
 export { Onboarding02 } from "./onboarding-02"
 export { Onboarding03 } from "./onboarding-03"

package/template/components/onboarding/onboarding-01.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { GettingStartedVariantView } from "@/components/getting-started"
+import { GettingStartedVariantView } from "./getting-started"
 
 export function Onboarding01() {
   return <GettingStartedVariantView variant="checklist" />

package/template/components/onboarding/onboarding-02.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { GettingStartedVariantView } from "@/components/getting-started"
+import { GettingStartedVariantView } from "./getting-started"
 
 export function Onboarding02() {
   return <GettingStartedVariantView variant="workspace" />

package/template/components/onboarding/onboarding-03.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { GettingStartedVariantView } from "@/components/getting-started"
+import { GettingStartedVariantView } from "./getting-started"
 
 export function Onboarding03() {
   return <GettingStartedVariantView variant="numbered" />

package/template/components/onboarding/onboarding-04.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { GettingStartedVariantView } from "@/components/getting-started"
+import { GettingStartedVariantView } from "./getting-started"
 
 export function Onboarding04() {
   return <GettingStartedVariantView variant="quickstart" />

package/template/components/page-header.tsx

@@ -1,226 +1,8 @@
-"use client"
-
-/**
- * PageHeader — Full-width content area header
- *
- * Sits at the top of a page's main content, BELOW the breadcrumb/topbar.
- * Uses Ivy Presto (Adobe Fonts) for the title via font-heading CSS variable.
- *
- * **Variant `collaboration`** — optional access line + collaborator faces (or **Add collaborator**
- * when the roster is empty) ahead of the primary `actions` slot; **Invite people** stays in **⋯ More**.
- *
- * WCAG 2.1 AA:
- *  ✓ <h1> landmark — one per page (WCAG 1.3.1)
- *  ✓ Sufficient colour contrast ≥ 4.5:1 on title + subtitle (SC 1.4.3)
- *  ✓ Face row: `role="group"` + aggregate `aria-label`; each face has a `Tooltip` name
- */
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import {
-  COLLABORATION_HEADER_ADD_LABEL,
-  type CollaboratorAccessRole,
-} from "@/lib/collaborator-access"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import { Separator } from "@/components/ui/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-export type PageHeaderVariant = "default" | "collaboration"
-
-export interface PageHeaderCollaborator {
-  id: string
-  name: string
-  imageUrl?: string | null
-  initials?: string
-  email?: string
-  access?: CollaboratorAccessRole
-  /** Org / directory role tags (e.g. Faculty, Program coordinator). */
-  roles?: string[]
-}
-
-export interface PageHeaderProps {
-  /** Primary page title — rendered as <h1> in Ivy Presto serif */
-  title: string
-  /** Short descriptor or date shown below the title (and below `accessInfo` when set) */
-  subtitle?: React.ReactNode
-  /** Layout preset — `collaboration` enables access line + face row ahead of `actions`. */
-  variant?: PageHeaderVariant
-  /**
-   * Role / access copy or badges — rendered between the title and subtitle when
-   * `variant="collaboration"` (e.g. lock icon + “Editors can modify”).
-   */
-  accessInfo?: React.ReactNode
-  /** People with access — shown as a horizontal row of faces when `variant="collaboration"`. */
-  collaborators?: PageHeaderCollaborator[]
-  /** Max faces before a `+N` chip — default 3 */
-  collaboratorDisplayLimit?: number
-  /** Opens the invite collaborators sheet when a face, overflow chip, or empty-state CTA is activated. */
-  onCollaboratorsOpen?: () => void
-  /** Label for the empty-roster header control — default **Add collaborator**. */
-  addCollaboratorLabel?: string
-  /** Optional slot for right-aligned actions (buttons, selectors, etc.) */
-  actions?: React.ReactNode
-  /** Extra className for the outer wrapper */
-  className?: string
-  /** When false, the title + subtitle are visually hidden (actions remain). */
-  showTitleBlock?: boolean
-}
-
-function PageHeaderCollaborationAccess({
-  people,
-  limit,
-  onOpenCollaborators,
-  addCollaboratorLabel,
-}: {
-  people: PageHeaderCollaborator[]
-  limit: number
-  onOpenCollaborators?: () => void
-  addCollaboratorLabel: string
-}) {
-  if (people.length === 0) {
-    return (
-      <div
-        role="group"
-        aria-label="People with access"
-        className="flex shrink-0 items-center"
-      >
-        <Button
-          type="button"
-          variant="outline"
-          size="lg"
-          onClick={onOpenCollaborators}
-          disabled={!onOpenCollaborators}
-        >
-          <i className="fa-light fa-user-plus" aria-hidden="true" />
-          {addCollaboratorLabel}
-        </Button>
-      </div>
-    )
-  }
-
-  const visible = people.slice(0, limit)
-  const overflow = Math.max(0, people.length - visible.length)
-  const names = people.map(p => p.name).join(", ")
-
-  return (
-    <div
-      role="group"
-      aria-label={names ? `People with access: ${names}` : "People with access"}
-      className="flex shrink-0 items-center gap-2 sm:gap-2.5"
-    >
-      <div className="flex shrink-0 items-center gap-1.5">
-        {visible.map(c => (
-          <Tooltip key={c.id}>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                className="relative shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-                aria-label={`Open collaborators — ${c.name}`}
-                onClick={onOpenCollaborators}
-                disabled={!onOpenCollaborators}
-              >
-                <Avatar size="sm" shape="circle" className="pointer-events-none">
-                  {c.imageUrl ? (
-                    <AvatarImage src={c.imageUrl} alt="" referrerPolicy="no-referrer" />
-                  ) : null}
-                  <AvatarFallback className="text-xs font-semibold">
-                    {(c.initials ?? c.name.slice(0, 2)).toUpperCase()}
-                  </AvatarFallback>
-                </Avatar>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">{c.name}</TooltipContent>
-          </Tooltip>
-        ))}
-        {overflow > 0 && (
-          <button
-            type="button"
-            className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-semibold tabular-nums text-muted-foreground ring-1 ring-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-            aria-label={`Open collaborators — ${overflow} more people with access`}
-            onClick={onOpenCollaborators}
-            disabled={!onOpenCollaborators}
-          >
-            +{overflow}
-          </button>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export function PageHeader({
-  title,
-  subtitle,
-  variant = "default",
-  accessInfo,
-  collaborators,
-  collaboratorDisplayLimit = 3,
-  onCollaboratorsOpen,
-  addCollaboratorLabel = COLLABORATION_HEADER_ADD_LABEL,
-  actions,
-  className,
-  showTitleBlock = true,
-}: PageHeaderProps) {
-  const isCollaboration = variant === "collaboration"
-  const showAccess = Boolean(isCollaboration && accessInfo)
-  const showCollaborationAccess = isCollaboration
-  const showActionsColumn = Boolean(actions) || showCollaborationAccess
-  const showCollaboratorActionsSeparator =
-    showCollaborationAccess && Boolean(actions)
-
-  return (
-    <div
-      className={cn(
-        "flex flex-col gap-1 px-4 pt-2 pb-4 lg:px-6",
-        "sm:flex-row sm:items-end sm:gap-4",
-        showTitleBlock ? "sm:justify-between" : "sm:justify-end",
-        className,
-      )}
-    >
-      {/* Title block — hidden visually when showTitleBlock is false; keep h1 for a11y */}
-      <div className={cn("flex min-w-0 flex-col gap-0.5", !showTitleBlock && "sr-only")}>
-        <h1
-          className="text-2xl font-semibold tracking-tight leading-tight text-foreground"
-          style={{ fontFamily: "var(--font-heading)" }}
-          suppressHydrationWarning
-        >
-          {title}
-        </h1>
-        {showAccess && (
-          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-muted-foreground">
-            {accessInfo}
-          </div>
-        )}
-        {subtitle && (
-          <p className="text-sm text-muted-foreground leading-none">{subtitle}</p>
-        )}
-      </div>
-
-      {showActionsColumn && (
-        <div className="flex flex-wrap items-center gap-2 sm:gap-3 shrink-0 sm:ms-auto sm:justify-end">
-          {showCollaborationAccess ? (
-            <PageHeaderCollaborationAccess
-              people={collaborators ?? []}
-              limit={collaboratorDisplayLimit}
-              onOpenCollaborators={onCollaboratorsOpen}
-              addCollaboratorLabel={addCollaboratorLabel}
-            />
-          ) : null}
-          {showCollaboratorActionsSeparator ? (
-            <Separator
-              orientation="vertical"
-              decorative
-              className="h-8 shrink-0"
-            />
-          ) : null}
-          {actions}
-        </div>
-      )}
-    </div>
-  )
-}
+// PageHeader was promoted to `@exxatdesignux/ui` on 2026-05-20 so
+// non-Next consumers (Vite, Remix, docs sites) can compose hub headers
+// without duplicating collaboration variants and face-row a11y wiring.
+//
+// This shim keeps every existing `import … from "@/components/page-header"`
+// site working. Apps/web-specific helpers (label constants, role icon
+// maps) still live in `lib/collaborator-access.ts`.
+export * from "@exxatdesignux/ui/components/page-header"

package/template/components/placement-board-card.tsx

@@ -0,0 +1,250 @@
+"use client"
+
+/**
+ * Placement-specific board card — composes shared board primitives with
+ * column defs and shared layout helpers (no lifecycle parameterisation).
+ */
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import type { Placement } from "@/lib/mock/placements"
+import { StatusBadge } from "@/components/placements-table-cells"
+import { AvatarInitials } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import {
+  ListPageBoardCard,
+  ListPageBoardCardBadgeRow,
+  ListPageBoardCardBody,
+  ListPageBoardCardHeader,
+  ListPageBoardCardSecondary,
+  ListPageBoardCardTitleRow,
+} from "@/components/data-views/list-page-board-card"
+import type { BoardLineCount } from "@/lib/data-list-display-options"
+import {
+  filterColumnsForBoardCard,
+  isBoardFieldActive,
+  remainingBodyColumns,
+} from "@/lib/placement-board-card-layout"
+import { getConditionalRowBackground } from "@/lib/conditional-rule-match"
+import type { ConditionalRule } from "@/components/table-properties/types"
+import type { CellContext, ColumnDef } from "@/components/data-table/types"
+import {
+  BoardCardIconRow,
+  BoardCardTwoLineBlock,
+  lineClampClass,
+} from "@/components/data-views/board-card-primitives"
+
+const BOARD_CELL_CTX: CellContext<Placement> = {
+  rowIndex: 0,
+  selected: false,
+  onSelect: () => {},
+}
+
+function columnIconClass(col: ColumnDef<Placement>): string {
+  if (col.filter?.icon) return col.filter.icon
+  const fallbacks: Record<string, string> = {
+    specialization: "fa-stethoscope",
+    site: "fa-hospital",
+    internship: "fa-briefcase",
+    supervisor: "fa-user-tie",
+    start: "fa-calendar-days",
+    compliance: "fa-shield-check",
+    daysUntilStart: "fa-calendar-days",
+    readiness: "fa-flag",
+    progressWeeksDone: "fa-chart-line",
+    endDate: "fa-calendar-xmark",
+    lastCheckin: "fa-calendar-clock",
+    completionDate: "fa-calendar-check",
+    finalStatus: "fa-circle-check",
+    rating: "fa-star",
+    suggestedToHire: "fa-user-check",
+    duration: "fa-clock",
+    program: "fa-graduation-cap",
+    student: "fa-user",
+    status: "fa-circle-dot",
+  }
+  return fallbacks[col.key] ?? "fa-tag"
+}
+
+function boardCellContent(row: Placement, col: ColumnDef<Placement>): React.ReactNode {
+  if (col.key === "status") return <StatusBadge status={row.status} surface="board" />
+  if (col.cell) return col.cell(row, BOARD_CELL_CTX)
+  return <span className="text-foreground/90">{String(row[col.key as keyof Placement] ?? "")}</span>
+}
+
+function renderScheduleSection(
+  row: Placement,
+  hiddenColKeys: Set<string>,
+  boardColumns: ColumnDef<Placement>[],
+): React.ReactNode {
+  const phase = row.placementPhase
+  const aStart = isBoardFieldActive("start", hiddenColKeys, boardColumns)
+  const aDur = isBoardFieldActive("duration", hiddenColKeys, boardColumns)
+  const aDays = isBoardFieldActive("daysUntilStart", hiddenColKeys, boardColumns)
+  const aProg = isBoardFieldActive("progressWeeksDone", hiddenColKeys, boardColumns)
+  const aEnd = isBoardFieldActive("endDate", hiddenColKeys, boardColumns)
+  const aComp = isBoardFieldActive("completionDate", hiddenColKeys, boardColumns)
+  const aFinal = isBoardFieldActive("finalStatus", hiddenColKeys, boardColumns)
+
+  if (phase === "upcoming" && (aStart || aDays)) {
+    const line2 =
+      aDays && row.daysUntilStart > 0
+        ? `Starts in ${row.daysUntilStart} days`
+        : aDays && row.daysUntilStart === 0
+          ? "Starts today"
+          : aDur
+            ? row.duration
+            : "—"
+    return (
+      <BoardCardTwoLineBlock
+        iconClass="fa-calendar-days"
+        line1={aStart ? row.start : "—"}
+        line2={line2}
+      />
+    )
+  }
+  if (phase === "ongoing" && (aProg || aEnd)) {
+    return (
+      <BoardCardTwoLineBlock
+        iconClass="fa-calendar-days"
+        line1={aProg ? `${row.progressWeeksDone} / ${row.progressWeeksTotal} wks` : "—"}
+        line2={aEnd ? row.endDate : "—"}
+      />
+    )
+  }
+  if (phase === "completed" && (aComp || aFinal)) {
+    const finalCol = boardColumns.find(c => c.key === "finalStatus")
+    return (
+      <BoardCardTwoLineBlock
+        iconClass="fa-calendar-check"
+        line1={aComp ? row.completionDate : "—"}
+        line2={
+          aFinal && finalCol ? (
+            <span className="inline-flex min-w-0 max-w-full [&_span]:text-xs">
+              {boardCellContent(row, finalCol)}
+            </span>
+          ) : aFinal ? (
+            row.finalStatus
+          ) : (
+            "—"
+          )
+        }
+        line2ClassName={aFinal && finalCol ? "text-xs" : undefined}
+      />
+    )
+  }
+  if (aStart || aDur) {
+    return (
+      <BoardCardTwoLineBlock
+        iconClass="fa-calendar-days"
+        line1={aStart ? row.start : "—"}
+        line2={aDur ? row.duration : "—"}
+      />
+    )
+  }
+  return null
+}
+
+export function BoardPlacementCard({
+  row,
+  hiddenColKeys,
+  lineCount,
+  conditionalRules,
+  boardColumns,
+  onOpen,
+}: {
+  row: Placement
+  hiddenColKeys: Set<string>
+  lineCount: BoardLineCount
+  conditionalRules: ConditionalRule[] | undefined
+  boardColumns: ColumnDef<Placement>[]
+  onOpen: (id: number) => void
+}) {
+  const lc = lineClampClass(lineCount)
+  const ruleBg = getConditionalRowBackground(row, conditionalRules, boardColumns)
+
+  const visibleCols = boardColumns.filter(c => !hiddenColKeys.has(c.key))
+  const showStudent = visibleCols.some(c => c.key === "student")
+  const cardCols = filterColumnsForBoardCard(visibleCols)
+  const remainingCols = remainingBodyColumns(cardCols)
+
+  const showStatus = isBoardFieldActive("status", hiddenColKeys, boardColumns)
+  const showSite = isBoardFieldActive("site", hiddenColKeys, boardColumns)
+  const siteCol = boardColumns.find(c => c.key === "site")
+
+  const cardShell = (className: string, children: React.ReactNode) => (
+    <ListPageBoardCard
+      className={className}
+      style={ruleBg ? { background: ruleBg } : undefined}
+      isNew={row.isNew}
+      onClick={() => onOpen(row.id)}
+    >
+      {children}
+    </ListPageBoardCard>
+  )
+
+  if (visibleCols.length === 0) {
+    return cardShell(
+      "cursor-pointer",
+      <ListPageBoardCardHeader className="gap-1 pb-2">
+        <ListPageBoardCardTitleRow title={`Placement #${row.id}`} />
+        <ListPageBoardCardSecondary>
+          Unhide columns in Properties → Columns to show card fields.
+        </ListPageBoardCardSecondary>
+      </ListPageBoardCardHeader>,
+    )
+  }
+
+  const titlePrimary = showStudent ? row.student : `Placement ${row.id}`
+  const headerBadgeRow = showStatus || row.isNew
+
+  return cardShell(
+    "cursor-pointer",
+    <ListPageBoardCardHeader>
+      <ListPageBoardCardTitleRow
+        title={titlePrimary}
+        titleClassName={lc}
+        trailing={
+          showStudent ? (
+            <AvatarInitials
+              initials={row.initials}
+              className="size-7 shrink-0 text-xs"
+              fallbackClassName="text-xs"
+            />
+          ) : undefined
+        }
+      />
+
+      {headerBadgeRow ? (
+        <ListPageBoardCardBadgeRow>
+          {showStatus ? <StatusBadge status={row.status} surface="board" /> : null}
+          {row.isNew ? (
+            <Badge variant="secondary" className="h-6 px-2 text-xs font-medium">
+              New
+            </Badge>
+          ) : null}
+        </ListPageBoardCardBadgeRow>
+      ) : null}
+
+      <ListPageBoardCardBody>
+        {showSite && siteCol ? (
+          <BoardCardIconRow iconClass="fa-hospital">
+            <div className={cn(lc, "[&_.text-sm]:text-xs")}>{boardCellContent(row, siteCol)}</div>
+          </BoardCardIconRow>
+        ) : null}
+
+        {renderScheduleSection(row, hiddenColKeys, boardColumns)}
+
+        {remainingCols.length > 0 ? (
+          <div className="flex flex-col gap-2">
+            {remainingCols.map(col => (
+              <BoardCardIconRow key={col.key} iconClass={columnIconClass(col)}>
+                <div className={cn(lc)}>{boardCellContent(row, col)}</div>
+              </BoardCardIconRow>
+            ))}
+          </div>
+        ) : null}
+      </ListPageBoardCardBody>
+    </ListPageBoardCardHeader>,
+  )
+}