@exxatdesignux/ui 0.3.0 → 0.4.1

package/template/components/{question-bank-table.tsx → library-table.tsx}

@@ -1,7 +1,7 @@
 "use client"
 
 /**
- * Question bank — thin wrapper around the centralized `<HubTable>`. Owns column defs,
+ * Library — thin wrapper around the centralized `<HubTable>`. Owns column defs,
  * folder/panel/tree-panel custom views, the new-folder + customize-folder sheet, and
  * forwards URL search via `HubTable.syncedSearchFromUrl`.
  *
@@ -21,7 +21,7 @@ import {
   type HubTableRenderers,
   type HubTableRendererArgs,
 } from "@/components/data-views"
-import { QUESTION_BANK_SUPPORTED_VIEWS } from "@/lib/question-bank-supported-views"
+import { LIBRARY_SUPPORTED_VIEWS } from "@/lib/library-supported-views"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -48,14 +48,14 @@ import {
   LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
 } from "@/components/data-views/list-page-split-hub-tokens"
 import { ListPageTreeColumnHeader } from "@/components/data-views/list-page-tree-column-header"
-import { QuestionBankBoardView, QUESTION_BANK_BOARD_GROUP_OPTIONS } from "@/components/question-bank-board-view"
+import { LibraryBoardView, LIBRARY_BOARD_GROUP_OPTIONS } from "@/components/library-board-view"
 import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
 import {
-  QuestionBankFavoriteButton,
-  QUESTION_BANK_FAVORITE_HOVER_GROUP,
-} from "@/components/question-bank-favorite-button"
-import { QuestionBankOsFolderView } from "@/components/question-bank-os-folder-view"
-import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folder-sheet"
+  LibraryFavoriteButton,
+  LIBRARY_FAVORITE_HOVER_GROUP,
+} from "@/components/library-favorite-button"
+import { LibraryOsFolderView } from "@/components/library-os-folder-view"
+import { LibraryNewFolderSheet } from "@/components/library-new-folder-sheet"
 import { FolderDetailsShell } from "@/components/folder-details-shell"
 import { HubTreePanelView } from "@/components/hub-tree-panel-view"
 import { AvatarInitials } from "@/components/ui/avatar"
@@ -63,29 +63,29 @@ import { cn } from "@/lib/utils"
 import { formatDateUS } from "@/lib/date-filter"
 import { initialsFromDisplayName } from "@/lib/initials-from-name"
 import {
-  newQuestionBankQuestionId,
-  type QuestionBankDifficulty,
-  type QuestionBankItem,
-  type QuestionBankType,
-} from "@/lib/mock/question-bank"
+  newLibraryQuestionId,
+  type LibraryLevel,
+  type LibraryItem,
+  type LibraryItemType,
+} from "@/lib/mock/library"
 import {
-  type QuestionBankFolder,
-  QUESTION_BANK_FOLDER_COLOR_STYLES,
-  QUESTION_BANK_FOLDER_ICON_COLORS,
-} from "@/lib/mock/question-bank-folders"
+  type LibraryFolder,
+  LIBRARY_FOLDER_COLOR_STYLES,
+  LIBRARY_FOLDER_ICON_COLORS,
+} from "@/lib/mock/library-folders"
 import {
-  toggleQuestionBankItemFavorite,
-  applyQuestionBankHubDisplayFilters,
-  type QuestionBankLandingFilterState,
-  type QuestionBankNavState,
-} from "@/lib/question-bank-nav"
+  toggleLibraryItemFavorite,
+  applyLibraryHubDisplayFilters,
+  type LibraryLandingFilterState,
+  type LibraryNavState,
+} from "@/lib/library-nav"
 
 // ─── Dynamic dashboard charts section ────────────────────────────────────────
 
-const QuestionBankDashboardChartsSection = dynamic(
+const LibraryDashboardChartsSection = dynamic(
   () =>
-    import("@/components/question-bank-dashboard-charts").then(mod => ({
-      default: mod.QuestionBankDashboardChartsSection,
+    import("@/components/library-dashboard-charts").then(mod => ({
+      default: mod.LibraryDashboardChartsSection,
     })),
   {
     ssr: false,
@@ -114,46 +114,46 @@ const QuestionBankDashboardChartsSection = dynamic(
 
 // ─── Constants ───────────────────────────────────────────────────────────────
 
-const TYPE_LABEL: Record<QuestionBankType, string> = {
-  multiple_choice: "Multiple choice",
-  true_false: "True / false",
-  short_answer: "Short answer",
+const TYPE_LABEL: Record<LibraryItemType, string> = {
+  multiple_choice: "Type 1",
+  true_false: "Type 2",
+  short_answer: "Type 3",
 }
 
-const DIFFICULTY_LABEL: Record<QuestionBankDifficulty, string> = {
-  easy: "Easy",
-  medium: "Medium",
-  hard: "Hard",
+const DIFFICULTY_LABEL: Record<LibraryLevel, string> = {
+  easy: "Low",
+  medium: "Normal",
+  hard: "High",
 }
 
-const TYPE_FILTER_OPTS = (Object.keys(TYPE_LABEL) as QuestionBankType[]).map(k => ({
+const TYPE_FILTER_OPTS = (Object.keys(TYPE_LABEL) as LibraryItemType[]).map(k => ({
   value: k,
   label: TYPE_LABEL[k],
 }))
 
-const DIFFICULTY_FILTER_OPTS = (Object.keys(DIFFICULTY_LABEL) as QuestionBankDifficulty[]).map(k => ({
+const DIFFICULTY_FILTER_OPTS = (Object.keys(DIFFICULTY_LABEL) as LibraryLevel[]).map(k => ({
   value: k,
   label: DIFFICULTY_LABEL[k],
 }))
 
-function newQuestionBankItemId() {
+function newLibraryItemId() {
   return `q-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`
 }
 
-function defaultFolderIdForColumnParent(parentId: string | null, folders: QuestionBankFolder[]): string | null {
+function defaultFolderIdForColumnParent(parentId: string | null, folders: LibraryFolder[]): string | null {
   if (parentId !== null) return parentId
   const roots = [...folders].filter(f => f.parentId === null).sort((a, b) => a.name.localeCompare(b.name))
   return roots[0]?.id ?? null
 }
 
-function uniqueTopics(items: QuestionBankItem[]) {
+function uniqueTopics(items: LibraryItem[]) {
   return [...new Set(items.map(i => i.topic))].sort().map(t => ({ value: t, label: t }))
 }
 
-function buildQuestionBankColumns(
-  items: QuestionBankItem[],
-  opts: { onToggleFavorite: (row: QuestionBankItem) => void },
-): ColumnDef<QuestionBankItem>[] {
+function buildLibraryColumns(
+  items: LibraryItem[],
+  opts: { onToggleFavorite: (row: LibraryItem) => void },
+): ColumnDef<LibraryItem>[] {
   const topicOpts = uniqueTopics(items)
   const { onToggleFavorite } = opts
   return [
@@ -168,12 +168,12 @@ function buildQuestionBankColumns(
       defaultPin: "left",
       filter: { type: "text", icon: "fa-file-lines", operators: ["contains", "not_contains"] },
       cell: row => (
-        <div className={cn(QUESTION_BANK_FAVORITE_HOVER_GROUP, "flex min-w-0 items-start gap-2")}>
+        <div className={cn(LIBRARY_FAVORITE_HOVER_GROUP, "flex min-w-0 items-start gap-2")}>
           <div className="flex min-w-0 flex-1 flex-col gap-0.5 pe-1">
             <span className="line-clamp-2 text-sm font-medium text-foreground">{row.stem}</span>
             <span className="font-mono text-xs text-muted-foreground">{row.questionId}</span>
           </div>
-          <QuestionBankFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
+          <LibraryFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
         </div>
       ),
     },
@@ -283,21 +283,21 @@ function buildQuestionBankColumns(
 // ─── Folder columns panel (custom multi-column miller view) ─────────────────
 
 interface HubFolderColumnsPanelProps {
-  folders: QuestionBankFolder[]
-  rows: QuestionBankItem[]
-  panelRenderDetail: (row: QuestionBankItem) => React.ReactNode
+  folders: LibraryFolder[]
+  rows: LibraryItem[]
+  panelRenderDetail: (row: LibraryItem) => React.ReactNode
   onAddFolder: (parentId: string | null) => void
   onAddQuestion: (parentId: string | null) => void
-  onCustomizeFolder?: (folder: QuestionBankFolder) => void
+  onCustomizeFolder?: (folder: LibraryFolder) => void
 }
 
-type HierarchyItem = QuestionBankFolder | QuestionBankItem
+type HierarchyItem = LibraryFolder | LibraryItem
 
-function isFolder(item: HierarchyItem): item is QuestionBankFolder {
+function isFolder(item: HierarchyItem): item is LibraryFolder {
   return "parentId" in item
 }
 
-function isQuestion(item: HierarchyItem): item is QuestionBankItem {
+function isQuestion(item: HierarchyItem): item is LibraryItem {
   return "stem" in item
 }
 
@@ -332,7 +332,7 @@ function HubFolderColumnsPanel({
     if (isFirstRenderRef.current && selectedPath.length > 0) {
       const lastItem = selectedPath[selectedPath.length - 1]
       if (isFolder(lastItem)) {
-        const folder = lastItem as QuestionBankFolder
+        const folder = lastItem as LibraryFolder
         const subfolders = folders.filter(f => f.parentId === folder.id).sort((a, b) => a.name.localeCompare(b.name))
         const questionsInFolder = rows.filter(r => r.folderId === folder.id)
         const items: HierarchyItem[] = [...subfolders, ...questionsInFolder]
@@ -362,8 +362,8 @@ function HubFolderColumnsPanel({
   }, [selectedPath, rootFolders, folders, rows])
 
   const selectedLeaf = selectedPath.length > 0 ? selectedPath.at(-1)! : null
-  const selectedQuestion = selectedLeaf && isQuestion(selectedLeaf) ? (selectedLeaf as QuestionBankItem) : null
-  const selectedFolderLeaf = selectedLeaf && isFolder(selectedLeaf) ? (selectedLeaf as QuestionBankFolder) : null
+  const selectedQuestion = selectedLeaf && isQuestion(selectedLeaf) ? (selectedLeaf as LibraryItem) : null
+  const selectedFolderLeaf = selectedLeaf && isFolder(selectedLeaf) ? (selectedLeaf as LibraryFolder) : null
 
   return (
     <ResizablePanelGroup direction="horizontal" className="flex h-full min-h-0 w-full flex-1 overflow-hidden">
@@ -381,7 +381,7 @@ function HubFolderColumnsPanel({
                 depth === 0
                   ? "Categories"
                   : selectedPath[depth - 1] && isFolder(selectedPath[depth - 1])
-                    ? (selectedPath[depth - 1] as QuestionBankFolder).name
+                    ? (selectedPath[depth - 1] as LibraryFolder).name
                     : "Items"
               }
               trailing={
@@ -442,7 +442,7 @@ function HubFolderColumnsPanel({
                         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
                         isSelected ? "bg-accent text-accent-foreground" : "text-foreground",
                         isFolder_ && !isSelected && folder?.colorKey && depth > 0
-                          ? QUESTION_BANK_FOLDER_COLOR_STYLES[folder.colorKey]?.tile
+                          ? LIBRARY_FOLDER_COLOR_STYLES[folder.colorKey]?.tile
                           : "",
                       )}
                       aria-selected={isSelected}
@@ -453,7 +453,7 @@ function HubFolderColumnsPanel({
                           className={cn(
                             "fa-folder text-sm shrink-0",
                             isSelected ? "fa-solid" : "fa-light",
-                            folder?.colorKey && QUESTION_BANK_FOLDER_ICON_COLORS[folder.colorKey],
+                            folder?.colorKey && LIBRARY_FOLDER_ICON_COLORS[folder.colorKey],
                           )}
                           aria-hidden="true"
                         />
@@ -472,7 +472,7 @@ function HubFolderColumnsPanel({
                         {isFolder_
                           ? itemCount
                           : question?.type === "multiple_choice"
-                            ? "MCQ"
+                            ? "T1"
                             : question?.difficulty?.charAt(0).toUpperCase()}
                       </span>
                     </button>
@@ -529,7 +529,7 @@ function HubFolderColumnsPanel({
 
 // ─── Detail renderer reused by panel + tree-panel ───────────────────────────
 
-function questionBankPanelDetail(row: QuestionBankItem) {
+function libraryPanelDetail(row: LibraryItem) {
   return (
     <div className="flex min-w-0 flex-col gap-4">
       <div>
@@ -579,27 +579,27 @@ function questionBankPanelDetail(row: QuestionBankItem) {
 
 // ─── Public component ───────────────────────────────────────────────────────
 
-export type QuestionBankTableHandle = HubTableHandle
+export type LibraryTableHandle = HubTableHandle
 
-export interface QuestionBankTableProps {
-  items: QuestionBankItem[]
+export interface LibraryTableProps {
+  items: LibraryItem[]
   /** When set, table / board / tree rows are limited to this nav scope (secondary sidebar). */
-  navState?: QuestionBankNavState
+  navState?: LibraryNavState
   /** URL toolbar search binding (`?q=`) — omit on search landing so hub `q` does not pre-fill the grid search. */
   urlListSearch?: string
   /** When true, dedicated search shell: hub landing row filters; table toolbar search stays independent of URL `q`. */
   searchLanding?: boolean
   /** Applied with nav filters before `useTableState` when {@link searchLanding} is true. */
-  landingFilters?: QuestionBankLandingFilterState | null
+  landingFilters?: LibraryLandingFilterState | null
   view?: DataListViewType
   onViewChange?: (v: DataListViewType) => void
-  folders: QuestionBankFolder[]
-  onFoldersChange: React.Dispatch<React.SetStateAction<QuestionBankFolder[]>>
-  onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
+  folders: LibraryFolder[]
+  onFoldersChange: React.Dispatch<React.SetStateAction<LibraryFolder[]>>
+  onItemsChange: React.Dispatch<React.SetStateAction<LibraryItem[]>>
 }
 
-export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, QuestionBankTableProps>(
-  function QuestionBankTable(
+export const LibraryTable = React.forwardRef<LibraryTableHandle, LibraryTableProps>(
+  function LibraryTable(
     {
       items,
       navState,
@@ -617,25 +617,25 @@ export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, Quest
     const tableSourceItems = React.useMemo(() => {
       const nav = navState ?? { scope: "all" as const, folderId: null }
       const landing = searchLanding ? (landingFilters ?? null) : null
-      return applyQuestionBankHubDisplayFilters(items, folders, nav, landing)
+      return applyLibraryHubDisplayFilters(items, folders, nav, landing)
     }, [items, folders, navState, searchLanding, landingFilters])
 
     const toggleFavorite = React.useCallback(
-      (row: QuestionBankItem) => {
-        onItemsChange(prev => prev.map(r => (r.id === row.id ? toggleQuestionBankItemFavorite(r) : r)))
+      (row: LibraryItem) => {
+        onItemsChange(prev => prev.map(r => (r.id === row.id ? toggleLibraryItemFavorite(r) : r)))
       },
       [onItemsChange],
     )
 
     const columns = React.useMemo(
-      () => buildQuestionBankColumns(tableSourceItems, { onToggleFavorite: toggleFavorite }),
+      () => buildLibraryColumns(tableSourceItems, { onToggleFavorite: toggleFavorite }),
       [tableSourceItems, toggleFavorite],
     )
 
     // ─ New-folder / customize-folder modal state (shared by panel + tree-panel) ────
     const [newFolderOpen, setNewFolderOpen] = React.useState(false)
     const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
-    const [customizingFolder, setCustomizingFolder] = React.useState<QuestionBankFolder | null>(null)
+    const [customizingFolder, setCustomizingFolder] = React.useState<LibraryFolder | null>(null)
 
     const openNewFolderForColumn = React.useCallback((parentId: string | null) => {
       setNewFolderParentId(parentId)
@@ -643,7 +643,7 @@ export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, Quest
       setNewFolderOpen(true)
     }, [])
 
-    const openCustomizeFolderSheet = React.useCallback((folder: QuestionBankFolder) => {
+    const openCustomizeFolderSheet = React.useCallback((folder: LibraryFolder) => {
       setCustomizingFolder(folder)
       setNewFolderOpen(true)
     }, [])
@@ -659,8 +659,8 @@ export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, Quest
         onItemsChange(prev => [
           ...prev,
           {
-            id: newQuestionBankItemId(),
-            questionId: newQuestionBankQuestionId(),
+            id: newLibraryItemId(),
+            questionId: newLibraryQuestionId(),
             stem: "New question",
             topic: "General",
             type: "short_answer",
@@ -685,16 +685,16 @@ export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, Quest
     )
 
     // ─ Renderers ──────────────────────────────────────────────────────────────
-    const renderers: HubTableRenderers<QuestionBankItem> = {
+    const renderers: HubTableRenderers<LibraryItem> = {
       "board-with-toolbar": ({ state, toolbarShell, displayOptions }) => {
-        const boardGroupKey = QUESTION_BANK_BOARD_GROUP_OPTIONS.some(
+        const boardGroupKey = LIBRARY_BOARD_GROUP_OPTIONS.some(
           o => o.key === displayOptions.boardGroupByColumnKey,
         )
           ? displayOptions.boardGroupByColumnKey
           : "topic"
         return toolbarShell(
-          <QuestionBankBoardView
-            rows={state.rows as QuestionBankItem[]}
+          <LibraryBoardView
+            rows={state.rows as LibraryItem[]}
             groupByColumnKey={boardGroupKey}
             onToggleFavorite={toggleFavorite}
             onRowActivate={row => state.toggleRow(row.id)}
@@ -703,20 +703,20 @@ export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, Quest
       },
       "folder-with-toolbar": ({ state, toolbarShell }) =>
         toolbarShell(
-          <QuestionBankOsFolderView
+          <LibraryOsFolderView
             folders={folders}
             onFoldersChange={onFoldersChange}
-            questions={state.rows as QuestionBankItem[]}
+            questions={state.rows as LibraryItem[]}
             onQuestionsChange={onItemsChange}
           />,
         ),
       "panel-with-toolbar": ({ state, toolbarShell }) =>
         toolbarShell(
-          <ListPageSplitHubChrome aria-label="Question bank folder columns">
+          <ListPageSplitHubChrome aria-label="Library folder columns">
             <HubFolderColumnsPanel
               folders={folders}
-              rows={state.rows as QuestionBankItem[]}
-              panelRenderDetail={questionBankPanelDetail}
+              rows={state.rows as LibraryItem[]}
+              panelRenderDetail={libraryPanelDetail}
               onAddFolder={openNewFolderForColumn}
               onAddQuestion={addQuestionInColumn}
               onCustomizeFolder={openCustomizeFolderSheet}
@@ -727,7 +727,7 @@ export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, Quest
         toolbarShell(
           <div className="flex min-h-0 flex-1 flex-col">
             <HubTreePanelView
-              items={state.rows as QuestionBankItem[]}
+              items={state.rows as LibraryItem[]}
               folders={folders}
               onItemsChange={onItemsChange}
               onFoldersChange={onFoldersChange}
@@ -737,39 +737,39 @@ export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, Quest
       "dashboard-with-toolbar": ({ state, toolbar }) => (
         <div className="flex min-h-0 flex-1 flex-col">
           {toolbar}
-          <QuestionBankDashboardChartsSection rows={state.rows as QuestionBankItem[]} />
+          <LibraryDashboardChartsSection rows={state.rows as LibraryItem[]} />
         </div>
       ),
     }
 
     return (
       <>
-        <HubTable<QuestionBankItem>
+        <HubTable<LibraryItem>
           rows={tableSourceItems}
           columns={columns}
           view={view}
           onViewChange={onViewChange}
-          supportedViewTypes={QUESTION_BANK_SUPPORTED_VIEWS}
-          hubLabel="Question bank"
-          lifecycleTabLabel="Question bank"
+          supportedViewTypes={LIBRARY_SUPPORTED_VIEWS}
+          hubLabel="Library"
+          lifecycleTabLabel="Library"
           searchAriaLabel="Search questions"
           getRowId={row => row.id}
           getRowSelectionLabel={row => row.stem}
           defaultSort={{ key: "updatedAt", dir: "desc" }}
           emptyState={<p className="text-sm text-muted-foreground">No questions in the bank.</p>}
-          boardGroupByColumnOptions={[...QUESTION_BANK_BOARD_GROUP_OPTIONS]}
+          boardGroupByColumnOptions={[...LIBRARY_BOARD_GROUP_OPTIONS]}
           renderFilterOptionValue={renderFilterOptionValue}
           syncedSearchFromUrl={searchLanding ? undefined : urlListSearch}
           listAriaLabel="Questions"
           listEmptyState="No questions match your filters."
           renderListRow={row => (
             <ListPageBoardCard
-              className={QUESTION_BANK_FAVORITE_HOVER_GROUP}
+              className={LIBRARY_FAVORITE_HOVER_GROUP}
               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-1">
-                  <QuestionBankFavoriteButton row={row} onToggleFavorite={toggleFavorite} />
+                  <LibraryFavoriteButton row={row} onToggleFavorite={toggleFavorite} />
                   <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
                 </div>
               }
@@ -801,7 +801,7 @@ export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, Quest
           renderers={renderers}
           handleRef={ref}
         />
-        <QuestionBankNewFolderSheet
+        <LibraryNewFolderSheet
           open={newFolderOpen}
           onOpenChange={setNewFolderOpen}
           parentFolderId={customizingFolder?.parentId ?? newFolderParentId}
@@ -836,4 +836,4 @@ export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, Quest
   },
 )
 
-QuestionBankTable.displayName = "QuestionBankTable"
+LibraryTable.displayName = "LibraryTable"

package/template/components/list-hub-status-badge.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 /**
- * Consistent status chip for list hubs (Team, Compliance, Question bank, future entities).
+ * Consistent status chip for list hubs (Team, Compliance, Library, future entities).
  * Pair label + tint + icon from `lib/list-status-badges.ts`; do not hand-roll Badge markup per page.
  */
 
@@ -9,7 +9,7 @@ import * as React from "react"
 import { Badge } from "@/components/ui/badge"
 import { cn } from "@/lib/utils"
 
-/** Table column + list view rows — same shell as Team / Compliance / Question bank grids. */
+/** Table column + list view rows — same shell as Team / Compliance / Library grids. */
 export const LIST_HUB_STATUS_BADGE_TABLE_SHELL =
   "inline-flex items-center gap-1 text-xs font-medium"