@exxatdesignux/ui 0.2.19 → 0.3.0

package/template/components/question-bank-folder-columns-panel.tsx

@@ -1,104 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { cn } from "@/lib/utils"
-import { ListPageFolderColumnsPanel } from "@/components/data-views/list-page-folder-columns-panel"
-import { FolderDetailsShell } from "@/components/folder-details-shell"
-import type { QuestionBankItem } from "@/lib/mock/question-bank"
-import {
-  type QuestionBankFolder,
-  QUESTION_BANK_FOLDER_COLOR_STYLES,
-  QUESTION_BANK_FOLDER_ICON_COLORS,
-} from "@/lib/mock/question-bank-folders"
-
-function isQuestionBankFolder(
-  item: QuestionBankFolder | QuestionBankItem,
-): item is QuestionBankFolder {
-  return "parentId" in item && !("stem" in item)
-}
-
-export interface QuestionBankFolderColumnsPanelProps {
-  folders: QuestionBankFolder[]
-  rows: QuestionBankItem[]
-  panelRenderDetail: (row: QuestionBankItem) => React.ReactNode
-  onAddFolder: (parentId: string | null) => void
-  onAddQuestion: (parentId: string | null) => void
-  onCustomizeFolder?: (folder: QuestionBankFolder) => void
-}
-
-/** Question bank **panel** view — Miller columns over folders + questions. */
-export function QuestionBankFolderColumnsPanel({
-  folders,
-  rows,
-  panelRenderDetail,
-  onAddFolder,
-  onAddQuestion,
-  onCustomizeFolder,
-}: QuestionBankFolderColumnsPanelProps) {
-  return (
-    <ListPageFolderColumnsPanel<QuestionBankFolder, QuestionBankItem>
-      folders={folders}
-      items={rows}
-      isFolder={isQuestionBankFolder}
-      getFolderParentId={f => f.parentId}
-      getFolderName={f => f.name}
-      getItemFolderId={i => i.folderId}
-      getItemLabel={i => i.stem}
-      renderItemDetail={panelRenderDetail}
-      onAddFolder={onAddFolder}
-      onAddItem={onAddQuestion}
-      addItemAriaLabel="Add question"
-      renderFolderDetail={(folder, { folders: allFolders, items }) => (
-        <FolderDetailsShell folder={folder} folders={allFolders} questions={items} />
-      )}
-      renderFolderRowClassName={(folder, { isSelected, depth }) =>
-        !isSelected && folder.colorKey && depth > 0
-          ? QUESTION_BANK_FOLDER_COLOR_STYLES[folder.colorKey]?.tile
-          : undefined
-      }
-      renderFolderIcon={(folder, { isSelected }) => (
-        <i
-          className={cn(
-            "fa-folder shrink-0 text-sm",
-            isSelected ? "fa-solid" : "fa-light",
-            folder.colorKey && QUESTION_BANK_FOLDER_ICON_COLORS[folder.colorKey],
-          )}
-          aria-hidden="true"
-        />
-      )}
-      renderItemMeta={(item, { isSelected }) =>
-        item.type === "multiple_choice"
-          ? "MCQ"
-          : item.difficulty?.charAt(0).toUpperCase() ?? ""
-      }
-      renderFolderActions={folder => (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              size="icon-xs"
-              variant="ghost"
-              aria-label={`Actions for folder ${folder.name}`}
-              className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
-            >
-              <i className="fa-light fa-ellipsis text-xs" aria-hidden="true" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onSelect={() => onCustomizeFolder?.(folder)}>
-              <i className="fa-light fa-wand-magic-sparkles text-xs" aria-hidden="true" />
-              Customize
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-    />
-  )
-}

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

@@ -1,53 +0,0 @@
-"use client"
-
-import type { QuestionBankItem } from "@/lib/mock/question-bank"
-import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
-import { DataRowList } from "@/components/data-views/data-row-list"
-import { formatDateUS } from "@/lib/date-filter"
-import {
-  QuestionBankFavoriteButton,
-  QUESTION_BANK_FAVORITE_HOVER_GROUP,
-} from "@/components/question-bank-favorite-button"
-
-export function QuestionBankListView({
-  rows,
-  onToggleFavorite,
-  onRowActivate,
-}: {
-  rows: QuestionBankItem[]
-  onToggleFavorite: (row: QuestionBankItem) => void
-  /** When set (e.g. table selection), clicking a row toggles the same selection as the grid. */
-  onRowActivate?: (row: QuestionBankItem) => void
-}) {
-  return (
-    <DataRowList<QuestionBankItem>
-      rows={rows}
-      getRowId={row => row.id}
-      emptyState="No questions match your filters."
-      ariaLabel="Questions"
-      renderRow={row => (
-        <ListPageBoardCard
-          className={QUESTION_BANK_FAVORITE_HOVER_GROUP}
-          layout="row"
-          rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
-          onClick={onRowActivate ? () => onRowActivate(row) : undefined}
-          rowEnd={
-            <div className="flex shrink-0 items-center gap-1">
-              <QuestionBankFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
-              <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="font-mono text-xs text-muted-foreground">{row.questionId}</p>
-            <p className="text-xs text-muted-foreground">
-              {row.topic} · Updated {formatDateUS(row.updatedAt)}
-            </p>
-            <p className="text-xs text-muted-foreground">{row.author}</p>
-          </div>
-        </ListPageBoardCard>
-      )}
-    />
-  )
-}

package/template/components/secondary-panel/nav-link-rows.tsx

@@ -1,83 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { Tip } from "@/components/ui/tip"
-import { cn } from "@/lib/utils"
-
-export function SecondaryPanelNavRow({
-  href,
-  active,
-  iconClass,
-  label,
-  onClick,
-}: {
-  href: string
-  active: boolean
-  iconClass: string
-  label: string
-  onClick?: () => void
-}) {
-  return (
-    <li className="min-w-0">
-      <Tip label={label} side="right">
-        <Link
-          href={href}
-          scroll={false}
-          onClick={() => onClick?.()}
-          aria-current={active ? "page" : undefined}
-          className={cn(
-            "flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-            active
-              ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
-              : "text-sidebar-foreground hover:bg-sidebar-accent/50",
-          )}
-        >
-          <span className="size-4 shrink-0 text-center text-[13px] leading-none" aria-hidden>
-            <i className={cn(active ? "fa-solid" : "fa-light", iconClass)} aria-hidden />
-          </span>
-          <span className="min-w-0 flex-1 truncate">{label}</span>
-        </Link>
-      </Tip>
-    </li>
-  )
-}
-
-/** Icon-rail row — matches primary sidebar collapsed hit target (`size-9`). */
-export function SecondaryPanelIconNavRow({
-  href,
-  active,
-  iconClass,
-  label,
-  onClick,
-}: {
-  href: string
-  active: boolean
-  iconClass: string
-  label: string
-  onClick?: () => void
-}) {
-  return (
-    <li className="flex w-full justify-center" role="none">
-      <Tip label={label} side="right">
-        <Link
-          href={href}
-          scroll={false}
-          onClick={() => onClick?.()}
-          aria-current={active ? "page" : undefined}
-          className={cn(
-            "flex size-9 shrink-0 items-center justify-center rounded-md transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-            active
-              ? "bg-sidebar-accent text-sidebar-accent-foreground"
-              : "text-sidebar-foreground hover:bg-sidebar-accent/50",
-          )}
-        >
-          <span className="text-center text-[15px] leading-none" aria-hidden>
-            <i className={cn(active ? "fa-solid" : "fa-light", iconClass)} aria-hidden />
-          </span>
-        </Link>
-      </Tip>
-    </li>
-  )
-}

package/template/components/secondary-panels/list-hub-panel.tsx

@@ -1,39 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { Tip } from "@/components/ui/tip"
-import { ListHubSecondaryNav } from "@/components/list-hub-secondary-nav"
-import { useSecondaryPanel } from "@/components/secondary-panel"
-
-export function ListHubPanel() {
-  const { collapseActiveSecondaryPanel, secondaryPanelCompact } = useSecondaryPanel()
-
-  if (secondaryPanelCompact) {
-    return <ListHubSecondaryNav />
-  }
-
-  return (
-    <>
-      <div className="flex items-center justify-between gap-2 px-4 pt-4 pb-2">
-        <h2
-          className="text-xl font-semibold leading-tight text-sidebar-foreground"
-          style={{ fontFamily: "var(--font-heading)" }}
-        >
-          Directory
-        </h2>
-        <Tip label="Collapse to icons" side="bottom">
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            onClick={() => collapseActiveSecondaryPanel()}
-            aria-label="Collapse to icons"
-          >
-            <i className="fa-light fa-angles-left" aria-hidden="true" />
-          </Button>
-        </Tip>
-      </div>
-      <ListHubSecondaryNav />
-    </>
-  )
-}

package/template/components/secondary-panels/question-bank-panel.tsx

@@ -1,39 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import { Tip } from "@/components/ui/tip"
-import { QuestionBankSecondaryNav } from "@/components/question-bank-secondary-nav"
-import { useSecondaryPanel } from "@/components/secondary-panel"
-
-export function QuestionBankPanel() {
-  const { collapseActiveSecondaryPanel, secondaryPanelCompact } = useSecondaryPanel()
-
-  if (secondaryPanelCompact) {
-    return <QuestionBankSecondaryNav />
-  }
-
-  return (
-    <>
-      <div className="flex items-center justify-between gap-2 px-4 pt-4 pb-2">
-        <h2
-          className="text-xl font-semibold leading-tight text-sidebar-foreground"
-          style={{ fontFamily: "var(--font-heading)" }}
-        >
-          Library
-        </h2>
-        <Tip label="Collapse to icons" side="bottom">
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            onClick={() => collapseActiveSecondaryPanel()}
-            aria-label="Collapse to icons"
-          >
-            <i className="fa-light fa-angles-left" aria-hidden="true" />
-          </Button>
-        </Tip>
-      </div>
-      <QuestionBankSecondaryNav />
-    </>
-  )
-}

package/template/components/secondary-panels/registry.tsx

@@ -1,15 +0,0 @@
-import type * as React from "react"
-
-import { ListHubPanel } from "@/components/secondary-panels/list-hub-panel"
-import { QuestionBankPanel } from "@/components/secondary-panels/question-bank-panel"
-
-/**
- * Secondary panel bodies keyed by `NavLinkItem.secondaryPanel` / `useAutoPanel(panelId)`.
- * Add a new entry here + nav `secondaryPanel` id + route layout — do not extend Question bank files.
- */
-export const SECONDARY_PANELS: Record<string, React.FC> = {
-  "question-bank": QuestionBankPanel,
-  "list-hub": ListHubPanel,
-}
-
-export type SecondaryPanelId = keyof typeof SECONDARY_PANELS

package/template/components/section-cards.tsx

@@ -1,106 +0,0 @@
-"use client"
-
-import { Badge } from "@/components/ui/badge"
-import {
-  Card,
-  CardAction,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-
-export function SectionCards() {
-  return (
-    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Total Revenue</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            $1,250.00
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <i className="fa-light fa-arrow-trend-up" aria-hidden="true" />
-              +12.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Trending up this month{" "}
-            <i className="fa-light fa-arrow-trend-up size-4" aria-hidden="true" />
-          </div>
-          <div className="text-muted-foreground">
-            Visitors for the last 6 months
-          </div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>New Customers</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            1,234
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <i className="fa-light fa-arrow-trend-down" aria-hidden="true" />
-              -20%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Down 20% this period{" "}
-            <i className="fa-light fa-arrow-trend-down size-4" aria-hidden="true" />
-          </div>
-          <div className="text-muted-foreground">
-            Acquisition needs attention
-          </div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Active Accounts</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            45,678
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <i className="fa-light fa-arrow-trend-up" aria-hidden="true" />
-              +12.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Strong user retention{" "}
-            <i className="fa-light fa-arrow-trend-up size-4" aria-hidden="true" />
-          </div>
-          <div className="text-muted-foreground">Engagement exceed targets</div>
-        </CardFooter>
-      </Card>
-      <Card className="@container/card">
-        <CardHeader>
-          <CardDescription>Growth Rate</CardDescription>
-          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-            4.5%
-          </CardTitle>
-          <CardAction>
-            <Badge variant="outline">
-              <i className="fa-light fa-arrow-trend-up" aria-hidden="true" />
-              +4.5%
-            </Badge>
-          </CardAction>
-        </CardHeader>
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
-          <div className="line-clamp-1 flex gap-2 font-medium">
-            Steady performance increase{" "}
-            <i className="fa-light fa-arrow-trend-up size-4" aria-hidden="true" />
-          </div>
-          <div className="text-muted-foreground">Meets growth projections</div>
-        </CardFooter>
-      </Card>
-    </div>
-  )
-}