@exxatdesignux/ui 0.2.19 → 0.3.0

package/template/components/table-properties/filter-card.tsx

@@ -1,251 +1 @@
-"use client"
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Tip } from "@/components/ui/tip"
-import { FilterDateCalendar } from "@/components/data-table/filter-date-calendar"
-import { FilterTextValueInput } from "@/components/data-table/filter-text-value-input"
-import {
-  type ActiveFilter,
-  type ConditionalRule,
-  type FilterFieldDef,
-  type FilterOperator,
-  OPERATOR_LABELS,
-  RULE_COLORS,
-} from "./types"
-
-type DrawerFilterCardBaseProps = {
-  fieldDef: FilterFieldDef
-  expanded: boolean
-  onToggleExpand: () => void
-  onRemove: (id: string) => void
-  renderOptionLabel?: (value: string) => React.ReactNode
-}
-
-export type DrawerFilterCardProps =
-  | (DrawerFilterCardBaseProps & {
-      variant?: "filter"
-      filter: ActiveFilter
-      onUpdate: (id: string, patch: Partial<ActiveFilter>) => void
-    })
-  | (DrawerFilterCardBaseProps & {
-      variant: "conditional"
-      filter: ConditionalRule
-      onUpdate: (id: string, patch: Partial<ConditionalRule>) => void
-    })
-
-/** Inline filter card used inside the Table Properties drawer (filter or conditional rule). */
-export function DrawerFilterCard(props: DrawerFilterCardProps) {
-  const {
-    fieldDef,
-    expanded,
-    onToggleExpand,
-    onRemove,
-    renderOptionLabel,
-  } = props
-
-  const isCond = props.variant === "conditional"
-  const filter = props.filter
-  const filterId = filter.id
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const onUpdate = props.onUpdate as (id: string, patch: any) => void
-
-  const [optSearch, setOptSearch] = React.useState("")
-  const options = fieldDef.options ?? []
-  const showSearch = options.length > 8
-  const filteredOpts = optSearch
-    ? options.filter(o => o.label.toLowerCase().includes(optSearch.toLowerCase()))
-    : options
-
-  const values = filter.values
-
-  React.useEffect(() => {
-    if (fieldDef.type !== "select" && fieldDef.type !== "date") return
-    if (filter.operator !== "is" && filter.operator !== "is_not") {
-      onUpdate(filterId, { operator: "is" })
-    }
-  }, [filter.operator, filter.id, fieldDef.type, filterId, onUpdate])
-
-  function toggleValue(val: string) {
-    const next = values.includes(val) ? values.filter(v => v !== val) : [...values, val]
-    onUpdate(filterId, { values: next })
-  }
-
-  function cycleOperator() {
-    const ops = fieldDef.operators
-    const idx = ops.indexOf(filter.operator as FilterOperator)
-    const i = idx === -1 ? 0 : idx
-    onUpdate(filterId, { operator: ops[(i + 1) % ops.length] })
-  }
-
-  const removeLabel = isCond ? "rule" : "filter"
-  const rule = isCond ? (props.filter as ConditionalRule) : null
-
-  return (
-    <div className="rounded-lg border border-border overflow-hidden">
-      <div>
-      {/* Card header */}
-      <div
-        className="flex items-start justify-between px-3 pt-2.5 pb-2 gap-2 cursor-pointer"
-        role="button"
-        tabIndex={0}
-        aria-label={expanded ? `Collapse ${fieldDef.label}` : `Expand ${fieldDef.label}`}
-        onClick={onToggleExpand}
-        onKeyDown={e => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault()
-            onToggleExpand()
-          }
-        }}
-      >
-        <div className="flex-1 min-w-0">
-          <p className="text-sm font-semibold text-foreground">{fieldDef.label}</p>
-          <Button
-            type="button"
-            variant="ghost"
-            size="xs"
-            aria-label={`Operator: ${OPERATOR_LABELS[filter.operator as FilterOperator]} — click to cycle`}
-            onClick={e => {
-              e.stopPropagation()
-              cycleOperator()
-            }}
-            className="h-auto py-0 px-1 -ms-1 text-xs text-muted-foreground font-normal"
-          >
-            {OPERATOR_LABELS[filter.operator as FilterOperator]}
-            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
-          </Button>
-        </div>
-        <div className="flex items-center gap-0.5 shrink-0 self-start">
-          <Tip label={`Remove ${fieldDef.label} ${removeLabel}`} side="top">
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              aria-label={`Remove ${fieldDef.label} ${removeLabel}`}
-              className="text-muted-foreground hover:text-destructive"
-              onClick={e => {
-                e.stopPropagation()
-                onRemove(filterId)
-              }}
-            >
-              <i className="fa-light fa-trash text-xs" aria-hidden="true" />
-            </Button>
-          </Tip>
-          <i
-            className={`fa-light ${expanded ? "fa-chevron-up" : "fa-chevron-down"} text-xs text-muted-foreground mt-2`}
-            aria-hidden="true"
-          />
-        </div>
-      </div>
-
-      {/* Expanded body */}
-      {expanded && (
-        <div className="border-t border-border">
-          {fieldDef.type === "select" ? (
-            <>
-              {showSearch && (
-                <div className="px-3 pt-2 pb-1">
-                  <Input placeholder="Search…" value={optSearch} onChange={e => setOptSearch(e.target.value)} className="h-7 text-xs" />
-                </div>
-              )}
-              <div role="listbox" aria-multiselectable="true" aria-label={`${fieldDef.label} options`} className="py-1 max-h-52 overflow-y-auto">
-                {filteredOpts.map(opt => {
-                  const checked = values.includes(opt.value)
-                  return (
-                    <div
-                      key={opt.value}
-                      role="option"
-                      aria-selected={checked}
-                      tabIndex={0}
-                      onClick={() => toggleValue(opt.value)}
-                      onKeyDown={e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleValue(opt.value) } }}
-                      className="flex items-center gap-2.5 px-3 py-2 text-sm hover:bg-interactive-hover cursor-pointer select-none focus-visible:outline-none focus-visible:bg-interactive-hover"
-                    >
-                      <span aria-hidden="true" data-slot="checkbox" data-state={checked ? "checked" : "unchecked"} className={cn(
-                        "inline-flex items-center justify-center size-3.5 shrink-0 rounded-[3px] border transition-colors",
-                        checked ? "bg-primary border-primary text-primary-foreground" : "border-input bg-background"
-                      )}>
-                        {checked && <i className="fa-solid fa-check text-current" style={{ fontSize: "7px" }} />}
-                      </span>
-                      {renderOptionLabel
-                        ? renderOptionLabel(opt.value)
-                        : <span className="text-foreground">{opt.label}</span>
-                      }
-                    </div>
-                  )
-                })}
-                {filteredOpts.length === 0 && (
-                  <p className="px-3 py-2 text-xs text-muted-foreground">No options found</p>
-                )}
-              </div>
-            </>
-          ) : fieldDef.type === "date" ? (
-            <div className="p-2">
-              <FilterDateCalendar
-                label={`${fieldDef.label} — choose date`}
-                valueYmd={filter.values[0]}
-                onChangeYmd={(ymd) =>
-                  onUpdate(filterId, { values: ymd ? [ymd] : [] })
-                }
-              />
-            </div>
-          ) : fieldDef.type === "text" ? (
-            <div className="p-3">
-              <FilterTextValueInput
-                mask={fieldDef.textMask}
-                aria-label={`${fieldDef.label} value`}
-                placeholder={`Enter ${fieldDef.label.toLowerCase()}…`}
-                value={values[0] ?? ""}
-                onValueChange={next => onUpdate(filterId, { values: [next] })}
-                className="text-sm"
-                autoFocus
-              />
-            </div>
-          ) : null}
-          {values.length > 0 ? (
-            <div className="sticky bottom-0 border-t border-border bg-card p-2">
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={() => onUpdate(filterId, { values: [] })}
-                className="w-full justify-center gap-1.5 text-xs text-muted-foreground"
-              >
-                <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
-                Clear selection
-              </Button>
-            </div>
-          ) : null}
-        </div>
-      )}
-
-      {/* Highlight color — conditional rules only */}
-      {isCond && rule && (
-        <div className="border-t border-border px-3 py-2.5">
-          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-            Highlight color
-          </p>
-          <div className="flex flex-wrap gap-1.5">
-            {RULE_COLORS.map(c => (
-              <Button
-                key={c.name}
-                type="button"
-                size="icon-xs"
-                variant="outline"
-                aria-label={c.name}
-                className={cn(
-                  "rounded-md border-2 p-0 transition-all",
-                  rule.bgColor === c.bg ? "border-foreground scale-110" : "border-transparent hover:scale-105",
-                )}
-                style={{ background: c.bg }}
-                onClick={() => onUpdate(filterId, { bgColor: c.bg })}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-      </div>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/table-properties/filter-card"

package/template/components/table-properties/sort-card.tsx

@@ -1,59 +1 @@
-"use client"
-import * as React from "react"
-import { Tip } from "@/components/ui/tip"
-import { DragHandleGripIcon } from "@/components/ui/drag-handle-grip"
-import { type SortRule, COLUMNS } from "./types"
-
-/** Sort rule card inside the Sort drawer panel */
-export type DrawerSortCardProps = {
-  rule: SortRule
-  /** When the active table uses dynamic columns (e.g. placements), pass the resolved label. */
-  fieldLabel?: string
-  isPrimary: boolean
-  onRemove: () => void
-  onToggleDir: () => void
-}
-
-export function DrawerSortCard(props: DrawerSortCardProps) {
-  const { rule, fieldLabel, isPrimary, onRemove, onToggleDir } = props
-  const col = COLUMNS.find(c => c.key === rule.fieldKey)
-  const label = fieldLabel ?? col?.label ?? rule.fieldKey
-  if (!label) return null
-  return (
-    <div className="rounded-lg border border-border bg-background overflow-hidden">
-      <div className="flex items-center gap-2 px-3 py-2.5">
-        <DragHandleGripIcon className="text-[13px] text-muted-foreground/40" />
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-1.5">
-            {isPrimary && (
-              <span className="text-xs font-bold text-accent-foreground bg-accent rounded px-1 py-0.5 leading-none uppercase tracking-wide shrink-0">
-                Primary
-              </span>
-            )}
-            <p className="text-sm font-medium text-foreground truncate">{label}</p>
-          </div>
-          <button
-            type="button"
-            aria-label={`Direction: ${rule.direction === "asc" ? "Ascending" : "Descending"} — click to toggle`}
-            onClick={onToggleDir}
-            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors mt-0.5"
-          >
-            <i className={`fa-light ${rule.direction === "asc" ? "fa-arrow-up-a-z" : "fa-arrow-down-a-z"} text-xs`} aria-hidden="true" />
-            {rule.direction === "asc" ? "Ascending" : "Descending"}
-            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
-          </button>
-        </div>
-        <Tip label={`Remove ${label} sort`} side="top">
-          <button
-            type="button"
-            aria-label={`Remove ${label} sort`}
-            onClick={onRemove}
-            className="inline-flex items-center justify-center size-7 rounded text-muted-foreground hover:text-destructive hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0"
-          >
-            <i className="fa-light fa-trash text-xs" aria-hidden="true" />
-          </button>
-        </Tip>
-      </div>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/table-properties/sort-card"

package/template/components/table-properties/types.ts

@@ -1,42 +1,33 @@
-"use client"
+/**
+ * Table Properties types + Placements seed data.
+ *
+ * Generic filter / sort / conditional-rule types live in
+ * `@exxatdesignux/ui/lib/table-properties-types` so other apps consuming
+ * the design system can build their own filter / sort drawers without
+ * inheriting Placements-specific column lists.
+ *
+ * `FILTER_FIELDS` and `COLUMNS` below are **product data**, not
+ * design-system primitives — they encode the columns + filter operators
+ * of the Placements hub. Other hubs (Team, Compliance, Question bank)
+ * compose their own arrays and pass them into the drawer.
+ */
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Shared types for table-properties components
-// ─────────────────────────────────────────────────────────────────────────────
+export {
+  OPERATOR_LABELS,
+  RULE_COLORS,
+  type ActiveFilter,
+  type ColDef,
+  type ConditionalRule,
+  type FilterFieldDef,
+  type FilterOperator,
+  type FilterTextMask,
+  type SortRule,
+} from "@exxatdesignux/ui/lib/table-properties-types"
 
-export type FilterOperator = "is" | "is_not" | "contains" | "not_contains"
-
-/** Input mask for `type: "text"` filters — [Shadcn Studio input-mask](https://shadcnstudio.com/docs/components/input-mask). */
-export type FilterTextMask = "phone" | "zip" | "dateMDY"
-
-export interface FilterFieldDef {
-  key: string
-  label: string
-  icon: string
-  type: "select" | "text" | "date"
-  operators: FilterOperator[]
-  /** Select options, or for `date` fields used by conditional rules (exact row strings). */
-  options?: { value: string; label: string }[]
-  /** When `type` is `text`, optional `use-mask-input` pattern for the value field. */
-  textMask?: FilterTextMask
-}
-
-export interface ActiveFilter {
-  id: string
-  fieldKey: string
-  operator: FilterOperator
-  values: string[]
-}
-
-export interface SortRule {
-  id: string
-  fieldKey: string
-  direction: "asc" | "desc"
-}
-
-export const OPERATOR_LABELS: Record<FilterOperator, string> = {
-  is: "is", is_not: "is not", contains: "contains", not_contains: "does not contain",
-}
+import type {
+  ColDef,
+  FilterFieldDef,
+} from "@exxatdesignux/ui/lib/table-properties-types"
 
 /** Default filter field list (placement table uses column-derived defs via `filterFields` prop). */
 export const FILTER_FIELDS: FilterFieldDef[] = [
@@ -77,40 +68,6 @@ export const FILTER_FIELDS: FilterFieldDef[] = [
   { key: "supervisor", label: "Supervisor", icon: "fa-user-tie",  type: "text", operators: ["contains", "not_contains"] },
 ]
 
-// Column definitions — shared with drawer
-export interface ColDef {
-  key: string
-  label: string
-  sortable: boolean
-  sortKey?: string
-  minWidth: number
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Conditional formatting rules
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface ConditionalRule {
-  id: string
-  /** Column key to evaluate */
-  fieldKey: string
-  operator: FilterOperator
-  /** Selected option values (select) or text (single entry) when operator needs values */
-  values: string[]
-  /** Resolved CSS background color string */
-  bgColor: string
-}
-
-/** Predefined palette for conditional rule backgrounds */
-export const RULE_COLORS: { name: string; bg: string }[] = [
-  { name: "Green",  bg: "var(--conditional-rule-green)" },
-  { name: "Yellow", bg: "var(--conditional-rule-yellow)" },
-  { name: "Blue",   bg: "var(--conditional-rule-blue)" },
-  { name: "Red",    bg: "var(--conditional-rule-red)" },
-  { name: "Purple", bg: "var(--conditional-rule-purple)" },
-  { name: "Orange", bg: "var(--conditional-rule-orange)" },
-]
-
 export const COLUMNS: ColDef[] = [
   { key: "select",     label: "",            sortable: false, minWidth: 40  },
   { key: "student",    label: "Student",     sortable: true,  minWidth: 180, sortKey: "student"  },

package/template/components/team-board-view.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+/**
+ * Team board — kanban by member status or role. Column layout from `ListPageBoardTemplate`.
+ */
+
+import * as React from "react"
+import {
+  TEAM_MEMBER_STATUS_BADGE_CLASS,
+  TEAM_MEMBER_STATUS_ICON,
+  TEAM_MEMBER_STATUS_LABEL,
+} from "@/lib/list-status-badges"
+import type { TeamMember } from "@/lib/mock/team"
+import { BoardCardTwoLineBlock } from "@/components/data-views/board-card-primitives"
+import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
+import {
+  ListPageBoardCard,
+  ListPageBoardCardAvatar,
+  ListPageBoardCardBadgeRow,
+  ListPageBoardCardBody,
+  ListPageBoardCardHeader,
+  ListPageBoardCardTitleRow,
+} from "@/components/data-views/list-page-board-card"
+import {
+  ListPageBoardTemplate,
+  type ListPageBoardColumnDef,
+} from "@/components/data-views/list-page-board-template"
+
+const NEUTRAL_COUNT_BADGE = "bg-muted/90 text-foreground"
+
+const STATUS_BOARD_COLUMNS: ListPageBoardColumnDef<TeamMember>[] = [
+  { id: "active", label: "Active", description: "On the team", filter: m => m.status === "active" },
+  { id: "away", label: "Away", description: "Temporarily away", filter: m => m.status === "away" },
+  { id: "invited", label: "Invited", description: "Pending acceptance", filter: m => m.status === "invited" },
+]
+
+function roleBoardColumns(members: TeamMember[]): {
+  columns: ListPageBoardColumnDef<TeamMember>[]
+  badgeMap: Record<string, string>
+} {
+  const roles = [...new Set(members.map(m => m.role))].sort((a, b) => a.localeCompare(b))
+  const columns: ListPageBoardColumnDef<TeamMember>[] = roles.map(role => ({
+    id: `role:${role}`,
+    label: role,
+    filter: (m: TeamMember) => m.role === role,
+  }))
+  const badgeMap = Object.fromEntries(roles.map(r => [`role:${r}`, NEUTRAL_COUNT_BADGE]))
+  return { columns, badgeMap }
+}
+
+function useTeamBoardModel(members: TeamMember[], groupByColumnKey: string) {
+  return React.useMemo(() => {
+    if (groupByColumnKey === "role") {
+      const { columns, badgeMap } = roleBoardColumns(members)
+      return { columns, badgeMap }
+    }
+    return {
+      columns: STATUS_BOARD_COLUMNS,
+      badgeMap: TEAM_MEMBER_STATUS_BADGE_CLASS as Record<string, string>,
+    }
+  }, [members, groupByColumnKey])
+}
+
+function TeamBoardCard({
+  member,
+  onRowActivate,
+}: {
+  member: TeamMember
+  onRowActivate?: (member: TeamMember) => void
+}) {
+  return (
+    <ListPageBoardCard className="w-full" onClick={onRowActivate ? () => onRowActivate(member) : undefined}>
+      <ListPageBoardCardHeader>
+        <ListPageBoardCardTitleRow
+          title={member.name}
+          titleClassName="truncate"
+          trailing={<ListPageBoardCardAvatar initials={member.initials} />}
+        />
+        <ListPageBoardCardBadgeRow>
+          <ListHubStatusBadge
+            surface="board"
+            label={TEAM_MEMBER_STATUS_LABEL[member.status]}
+            tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
+            icon={TEAM_MEMBER_STATUS_ICON[member.status]}
+          />
+        </ListPageBoardCardBadgeRow>
+        <ListPageBoardCardBody>
+          <BoardCardTwoLineBlock iconClass="fa-briefcase" line1={member.role} line2={member.email} />
+        </ListPageBoardCardBody>
+      </ListPageBoardCardHeader>
+    </ListPageBoardCard>
+  )
+}
+
+export const TEAM_BOARD_GROUP_OPTIONS = [
+  { key: "status", label: "Status" },
+  { key: "role", label: "Role" },
+] as const
+
+export function TeamBoardView({
+  members,
+  groupByColumnKey,
+  onRowActivate,
+}: {
+  members: TeamMember[]
+  groupByColumnKey: string
+  onRowActivate?: (member: TeamMember) => void
+}) {
+  const key = groupByColumnKey === "role" ? "role" : "status"
+  const { columns, badgeMap } = useTeamBoardModel(members, key)
+
+  return (
+    <ListPageBoardTemplate
+      columns={columns}
+      rows={members}
+      getRowKey={m => m.id}
+      columnCountBadgeClassName={badgeMap}
+      emptyColumnLabel="No members"
+      renderCard={member => <TeamBoardCard member={member} onRowActivate={onRowActivate} />}
+    />
+  )
+}

package/template/components/team-client.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+/**
+ * Team page — primary list template: ListPageTemplate + KeyMetrics + TeamTable (same composition as PlacementsClient).
+ * Imports from `@/components/data-views` for shared list-page + view types.
+ */
+
+import * as React from "react"
+import {
+  ListPageTemplate,
+  type ViewTab,
+  dataListViewIcon,
+  type DataListViewType,
+} from "@/components/data-views"
+import { TeamPageHeader } from "@/components/team-page-header"
+import { TeamTable, type TeamTableHandle } from "@/components/team-table"
+import { KeyMetrics } from "@/components/key-metrics"
+import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
+import { TEAM_MEMBERS } from "@/lib/mock/team"
+import { teamKpiInsight, teamKpiMetrics } from "@/lib/mock/team-kpi"
+
+const DEFAULT_TEAM_TABS: ViewTab[] = [
+  {
+    id: "members",
+    label: "Members",
+    viewType: "table",
+    icon: "fa-table",
+    filterId: "all",
+  },
+  {
+    id: "panel",
+    label: "Panel",
+    viewType: "panel",
+    icon: "fa-sidebar",
+    filterId: "all",
+  },
+]
+
+export function TeamClient() {
+  const [exportOpen, setExportOpen] = React.useState(false)
+  const [showMetrics, setShowMetrics] = React.useState(true)
+  const tableRef = React.useRef<TeamTableHandle>(null)
+  const memberCount = TEAM_MEMBERS.length
+
+  const metrics = React.useMemo(() => teamKpiMetrics(TEAM_MEMBERS), [])
+  const insight = React.useMemo(() => teamKpiInsight(TEAM_MEMBERS), [])
+
+  useAskLeoPageContext(
+    React.useMemo(
+      () => ({
+        title: "Team",
+        description: `${memberCount} members in this directory.`,
+        suggestions: [
+          "Who owns the most active placements?",
+          "Summarize workload by program",
+        ],
+      }),
+      [memberCount],
+    ),
+  )
+
+  return (
+    <ListPageTemplate
+      defaultTabs={DEFAULT_TEAM_TABS}
+      getTabCount={() => memberCount}
+      tablePropertiesRef={tableRef}
+      header={
+        <TeamPageHeader
+          memberCount={memberCount}
+          onInvite={() => {}}
+          onExport={() => setExportOpen(true)}
+          showMetrics={showMetrics}
+          onToggleMetrics={() => setShowMetrics(v => !v)}
+        />
+      }
+      metrics={
+        <KeyMetrics
+          variant="flat"
+          metrics={metrics}
+          insight={insight}
+          showHeader={false}
+          metricsSingleRow
+        />
+      }
+      showMetrics={showMetrics}
+      exportOpen={exportOpen}
+      onExportOpenChange={setExportOpen}
+      exportTotalRows={memberCount}
+      renderContent={(tab, updateTab) => (
+        <TeamTable
+          key={tab.id}
+          ref={tableRef}
+          members={TEAM_MEMBERS}
+          view={tab.viewType}
+          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+        />
+      )}
+    />
+  )
+}