@exxatdesignux/ui 0.0.5 → 0.0.7

package/template/components/product-switcher.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import { ExxatProductLogo, ExxatProductMark } from "@/components/exxat-product-logo"
+import { useProduct, type Product } from "@/contexts/product-context"
+
+const PRODUCTS: { id: Product; label: string }[] = [
+  { id: "exxat-one",   label: "Exxat One"   },
+  { id: "exxat-prism", label: "Exxat Prism" },
+]
+
+export function ProductSwitcher() {
+  const { product, setProduct } = useProduct()
+  const { state, isMobile } = useSidebar()
+
+  const current = PRODUCTS.find(p => p.id === product) ?? PRODUCTS[0]
+  const iconRail = state === "collapsed" && !isMobile
+  const expandedOrMobile = state === "expanded" || isMobile
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className={cn(
+                "items-start py-2 text-sidebar-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+                expandedOrMobile &&
+                  "h-auto min-h-12 overflow-x-clip overflow-y-visible",
+                "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center",
+                iconRail &&
+                  "group-data-[collapsible=icon]:!size-9 group-data-[collapsible=icon]:!min-h-9 group-data-[collapsible=icon]:!max-h-9 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:overflow-visible",
+              )}
+              aria-label={`Current product: ${current.label}. Switch product`}
+              suppressHydrationWarning
+            >
+              {iconRail ? (
+                <span className="flex size-8 shrink-0 items-center justify-center">
+                  <ExxatProductMark
+                    product={current.id}
+                    className="size-7 max-h-none"
+                  />
+                </span>
+              ) : (
+                <>
+                  <span
+                    className="mt-0.5 flex min-h-8 min-w-0 flex-1 items-center overflow-x-clip overflow-y-visible"
+                    aria-hidden="true"
+                  >
+                    <ExxatProductLogo
+                      product={current.id}
+                      variant="mutedSuffix"
+                      className="h-7 w-auto max-w-[min(100%,260px)] object-left object-contain"
+                    />
+                  </span>
+                  <i
+                    className="fa-light fa-chevron-down ms-auto mt-1 inline-flex size-6 shrink-0 items-center justify-center text-xs text-muted-foreground"
+                    aria-hidden="true"
+                  />
+                </>
+              )}
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            className="w-56"
+            align="start"
+            side="bottom"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Switch product
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {PRODUCTS.map(p => (
+              <DropdownMenuItem
+                key={p.id}
+                onClick={() => setProduct(p.id)}
+                className="gap-2 py-2"
+                aria-current={p.id === product ? "true" : undefined}
+              >
+                <ExxatProductLogo
+                  product={p.id}
+                  variant="mutedSuffix"
+                  className="h-7 w-auto shrink-0 max-w-[min(100%,200px)]"
+                />
+                {p.id === product && (
+                  <i
+                    className="fa-solid fa-check ml-auto text-brand text-xs"
+                    aria-hidden="true"
+                  />
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/template/components/question-bank-board-view.tsx

@@ -0,0 +1,205 @@
+"use client"
+
+import * as React from "react"
+import { initialsFromDisplayName } from "@/lib/initials-from-name"
+import type {
+  QuestionBankDifficulty,
+  QuestionBankItem,
+  QuestionBankType,
+} from "@/lib/mock/question-bank"
+import {
+  LIST_HUB_STATUS_TINT_DANGER,
+  LIST_HUB_STATUS_TINT_INFO,
+  LIST_HUB_STATUS_TINT_NEUTRAL,
+  LIST_HUB_STATUS_TINT_SUCCESS,
+  LIST_HUB_STATUS_TINT_WARNING,
+  QUESTION_BANK_STATUS_BADGE_CLASS,
+  QUESTION_BANK_STATUS_ICON,
+  QUESTION_BANK_STATUS_LABEL,
+} from "@/lib/list-status-badges"
+import { BoardCardTwoLineBlock } from "@/components/data-views/board-card-primitives"
+import {
+  ListPageBoardCard,
+  ListPageBoardCardAvatar,
+  ListPageBoardCardBadgeRow,
+  ListPageBoardCardBody,
+  ListPageBoardCardHeader,
+  ListPageBoardCardTitleRow,
+} from "@/components/data-views/list-page-board-card"
+import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
+import {
+  ListPageBoardTemplate,
+  type ListPageBoardColumnDef,
+} from "@/components/data-views/list-page-board-template"
+
+const NEUTRAL_COUNT_BADGE = "bg-muted/90 text-foreground"
+
+const TYPE_LABEL: Record<QuestionBankType, string> = {
+  multiple_choice: "Multiple choice",
+  true_false: "True / false",
+  short_answer: "Short answer",
+}
+
+const DIFF_LABEL: Record<QuestionBankDifficulty, string> = {
+  easy: "Easy",
+  medium: "Medium",
+  hard: "Hard",
+}
+
+const DIFF_BADGE: Record<QuestionBankDifficulty, string> = {
+  easy: LIST_HUB_STATUS_TINT_SUCCESS,
+  medium: LIST_HUB_STATUS_TINT_WARNING,
+  hard: LIST_HUB_STATUS_TINT_DANGER,
+}
+
+const TYPE_BADGE: Record<QuestionBankType, string> = {
+  multiple_choice: LIST_HUB_STATUS_TINT_NEUTRAL,
+  true_false: LIST_HUB_STATUS_TINT_INFO,
+  short_answer: LIST_HUB_STATUS_TINT_WARNING,
+}
+
+const STATUS_BOARD_COLUMNS: ListPageBoardColumnDef<QuestionBankItem>[] = [
+  {
+    id: "published",
+    label: "Published",
+    description: "Live in bank",
+    filter: r => r.status === "published",
+  },
+  {
+    id: "draft",
+    label: "Draft",
+    description: "Work in progress",
+    filter: r => r.status === "draft",
+  },
+  {
+    id: "in_review",
+    label: "In review",
+    description: "Awaiting approval",
+    filter: r => r.status === "in_review",
+  },
+]
+
+const DIFF_ORDER: QuestionBankDifficulty[] = ["easy", "medium", "hard"]
+const TYPE_ORDER: QuestionBankType[] = ["multiple_choice", "true_false", "short_answer"]
+
+function topicBoardColumns(rows: QuestionBankItem[]): {
+  columns: ListPageBoardColumnDef<QuestionBankItem>[]
+  badgeMap: Record<string, string>
+} {
+  const topics = [...new Set(rows.map(r => r.topic))].sort((a, b) => a.localeCompare(b))
+  const columns: ListPageBoardColumnDef<QuestionBankItem>[] = topics.map(topic => ({
+    id: `topic:${topic}`,
+    label: topic,
+    filter: (r: QuestionBankItem) => r.topic === topic,
+  }))
+  const badgeMap = Object.fromEntries(topics.map(t => [`topic:${t}`, NEUTRAL_COUNT_BADGE]))
+  return { columns, badgeMap }
+}
+
+function difficultyBoardColumns(): {
+  columns: ListPageBoardColumnDef<QuestionBankItem>[]
+  badgeMap: Record<string, string>
+} {
+  const columns: ListPageBoardColumnDef<QuestionBankItem>[] = DIFF_ORDER.map(d => ({
+    id: d,
+    label: DIFF_LABEL[d],
+    filter: (r: QuestionBankItem) => r.difficulty === d,
+  }))
+  const badgeMap = Object.fromEntries(DIFF_ORDER.map(d => [d, DIFF_BADGE[d]]))
+  return { columns, badgeMap }
+}
+
+function typeBoardColumns(): {
+  columns: ListPageBoardColumnDef<QuestionBankItem>[]
+  badgeMap: Record<string, string>
+} {
+  const columns: ListPageBoardColumnDef<QuestionBankItem>[] = TYPE_ORDER.map(t => ({
+    id: t,
+    label: TYPE_LABEL[t],
+    filter: (r: QuestionBankItem) => r.type === t,
+  }))
+  const badgeMap = Object.fromEntries(TYPE_ORDER.map(t => [t, TYPE_BADGE[t]]))
+  return { columns, badgeMap }
+}
+
+function useQuestionBankBoardModel(rows: QuestionBankItem[], groupByColumnKey: string) {
+  return React.useMemo(() => {
+    if (groupByColumnKey === "topic") {
+      const { columns, badgeMap } = topicBoardColumns(rows)
+      return { columns, badgeMap }
+    }
+    if (groupByColumnKey === "difficulty") {
+      const { columns, badgeMap } = difficultyBoardColumns()
+      return { columns, badgeMap }
+    }
+    if (groupByColumnKey === "type") {
+      const { columns, badgeMap } = typeBoardColumns()
+      return { columns, badgeMap }
+    }
+    return {
+      columns: STATUS_BOARD_COLUMNS,
+      badgeMap: QUESTION_BANK_STATUS_BADGE_CLASS as Record<string, string>,
+    }
+  }, [rows, groupByColumnKey])
+}
+
+function QuestionBankBoardCard({ row }: { row: QuestionBankItem }) {
+  const initials = initialsFromDisplayName(row.author)
+  return (
+    <ListPageBoardCard className="w-full">
+      <ListPageBoardCardHeader>
+        <ListPageBoardCardTitleRow
+          title={row.stem}
+          titleClassName="line-clamp-2"
+          trailing={<ListPageBoardCardAvatar initials={initials} />}
+        />
+        <ListPageBoardCardBadgeRow>
+          <ListHubStatusBadge
+            surface="board"
+            label={QUESTION_BANK_STATUS_LABEL[row.status]}
+            tintClassName={QUESTION_BANK_STATUS_BADGE_CLASS[row.status]}
+            icon={QUESTION_BANK_STATUS_ICON[row.status]}
+          />
+        </ListPageBoardCardBadgeRow>
+        <ListPageBoardCardBody>
+          <BoardCardTwoLineBlock
+            iconClass="fa-tag"
+            line1={row.topic}
+            line2={row.type.replace(/_/g, " ")}
+          />
+          <BoardCardTwoLineBlock iconClass="fa-calendar-days" line1={row.updatedAt} line2="Updated" />
+        </ListPageBoardCardBody>
+      </ListPageBoardCardHeader>
+    </ListPageBoardCard>
+  )
+}
+
+export const QUESTION_BANK_BOARD_GROUP_OPTIONS = [
+  { key: "status", label: "Status" },
+  { key: "topic", label: "Topic" },
+  { key: "difficulty", label: "Difficulty" },
+  { key: "type", label: "Type" },
+] as const
+
+export function QuestionBankBoardView({
+  rows,
+  groupByColumnKey,
+}: {
+  rows: QuestionBankItem[]
+  groupByColumnKey: string
+}) {
+  const allowed = QUESTION_BANK_BOARD_GROUP_OPTIONS.some(o => o.key === groupByColumnKey)
+  const key = allowed ? groupByColumnKey : "status"
+  const { columns, badgeMap } = useQuestionBankBoardModel(rows, key)
+
+  return (
+    <ListPageBoardTemplate
+      columns={columns}
+      rows={rows}
+      getRowKey={r => r.id}
+      columnCountBadgeClassName={badgeMap}
+      emptyColumnLabel="No questions"
+      renderCard={row => <QuestionBankBoardCard row={row} />}
+    />
+  )
+}

package/template/components/question-bank-client.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+/**
+ * Question bank hub — ListPageTemplate + KeyMetrics + QuestionBankTable (Team / Compliance pattern).
+ */
+
+import * as React from "react"
+import {
+  ListPageTemplate,
+  type ViewTab,
+  dataListViewIcon,
+  type DataListViewType,
+} from "@/components/data-views"
+import { QuestionBankPageHeader } from "@/components/question-bank-page-header"
+import { QuestionBankTable, type QuestionBankTableHandle } from "@/components/question-bank-table"
+import { KeyMetrics } from "@/components/key-metrics"
+import { QUESTION_BANK_ITEMS } from "@/lib/mock/question-bank"
+import { questionBankKpiInsight, questionBankKpiMetrics } from "@/lib/mock/question-bank-kpi"
+
+const DEFAULT_TABS: ViewTab[] = [
+  {
+    id: "questions",
+    label: "Questions",
+    viewType: "table",
+    icon: "fa-table",
+    filterId: "all",
+  },
+]
+
+export function QuestionBankClient() {
+  const [exportOpen, setExportOpen] = React.useState(false)
+  const [showMetrics, setShowMetrics] = React.useState(true)
+  const tableRef = React.useRef<QuestionBankTableHandle>(null)
+  const count = QUESTION_BANK_ITEMS.length
+
+  const metrics = React.useMemo(() => questionBankKpiMetrics(QUESTION_BANK_ITEMS), [])
+  const insight = React.useMemo(() => questionBankKpiInsight(QUESTION_BANK_ITEMS), [])
+
+  return (
+    <ListPageTemplate
+      defaultTabs={DEFAULT_TABS}
+      getTabCount={() => count}
+      tablePropertiesRef={tableRef}
+      header={(
+        <QuestionBankPageHeader
+          questionCount={count}
+          onNewQuestion={() => {}}
+          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={count}
+      renderContent={(tab, updateTab) => (
+        <QuestionBankTable
+          key={tab.id}
+          ref={tableRef}
+          items={QUESTION_BANK_ITEMS}
+          view={tab.viewType}
+          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+        />
+      )}
+    />
+  )
+}

package/template/components/question-bank-list-view.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import type { QuestionBankItem } from "@/lib/mock/question-bank"
+import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
+import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+import {
+  QUESTION_BANK_STATUS_BADGE_CLASS,
+  QUESTION_BANK_STATUS_ICON,
+  QUESTION_BANK_STATUS_LABEL,
+} from "@/lib/list-status-badges"
+
+function QuestionBankListRow({ row }: { row: QuestionBankItem }) {
+  return (
+    <li>
+      <ListPageBoardCard
+        layout="row"
+        rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
+        rowEnd={
+          <div className="flex shrink-0 items-center gap-2">
+            <ListHubStatusBadge
+              surface="board"
+              label={QUESTION_BANK_STATUS_LABEL[row.status]}
+              tintClassName={QUESTION_BANK_STATUS_BADGE_CLASS[row.status]}
+              icon={QUESTION_BANK_STATUS_ICON[row.status]}
+            />
+            <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+          </div>
+        }
+      >
+        <div className="space-y-0.5">
+          <p className="line-clamp-2 text-sm font-semibold text-foreground">{row.stem}</p>
+          <p className="text-xs text-muted-foreground">
+            {row.topic} · Updated {row.updatedAt}
+          </p>
+          <p className="text-xs text-muted-foreground">{row.author}</p>
+        </div>
+      </ListPageBoardCard>
+    </li>
+  )
+}
+
+export function QuestionBankListView({ rows }: { rows: QuestionBankItem[] }) {
+  if (rows.length === 0) {
+    return (
+      <div className="px-4 py-16 text-center lg:px-6">
+        <p className="text-sm text-muted-foreground">No questions match your filters.</p>
+      </div>
+    )
+  }
+
+  return (
+    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
+      {rows.map(row => (
+        <QuestionBankListRow key={row.id} row={row} />
+      ))}
+    </ul>
+  )
+}

package/template/components/question-bank-page-header.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { PageHeader } from "@/components/page-header"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Tip } from "@/components/ui/tip"
+
+export interface QuestionBankPageHeaderProps {
+  questionCount: number
+  onNewQuestion: () => void
+  onExport: () => void
+  showMetrics: boolean
+  onToggleMetrics: () => void
+  showTitleBlock?: boolean
+}
+
+export function QuestionBankPageHeader({
+  questionCount,
+  onNewQuestion,
+  onExport,
+  showMetrics,
+  onToggleMetrics,
+  showTitleBlock = true,
+}: QuestionBankPageHeaderProps) {
+  const [moreOpen, setMoreOpen] = React.useState(false)
+  const countLine = `${questionCount} ${questionCount === 1 ? "question" : "questions"} · Last updated now`
+
+  return (
+    <PageHeader
+      title="Question bank"
+      subtitle={countLine}
+      showTitleBlock={showTitleBlock}
+      actions={(
+        <div className="flex items-center gap-2" role="group" aria-label="Question bank actions">
+          <Tip side="bottom" label="Create a new question (demo)">
+            <Button type="button" size="lg" onClick={onNewQuestion}>
+              <i className="fa-light fa-plus" aria-hidden="true" />
+              New question
+            </Button>
+          </Tip>
+          <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
+            <Tip side="bottom" label="More actions">
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="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" className="w-52">
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onExport(), 0)
+                }}
+              >
+                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+                Export
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                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>
+      )}
+    />
+  )
+}