@exxatdesignux/ui 0.2.18 → 0.3.0

package/template/components/data-view-dashboard-charts-compliance.tsx

@@ -564,7 +564,7 @@ function SortableComplianceDashboardCard({
             ]}
           />
         </div>
-        <div className="ml-auto flex shrink-0 items-center gap-1">
+        <div className="ms-auto flex shrink-0 items-center gap-1">
           <div
             className="pointer-events-none flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"
             role="group"
@@ -904,7 +904,7 @@ export function ComplianceDashboardChartsSection({
           </Button>
           <Tip side="bottom" label="Reset visibility, order, widths, and chart types">
             <Button type="button" size="sm" variant="ghost" className="h-8 px-2 text-xs" onClick={onResetLayout}>
-              <i className="fa-light fa-rotate-left mr-1 text-xs" aria-hidden="true" />
+              <i className="fa-light fa-rotate-left me-1 text-xs" aria-hidden="true" />
               Reset
             </Button>
           </Tip>

package/template/components/data-view-dashboard-charts-team.tsx

@@ -572,7 +572,7 @@ function SortableTeamDashboardCard({
             ]}
           />
         </div>
-        <div className="ml-auto flex shrink-0 items-center gap-1">
+        <div className="ms-auto flex shrink-0 items-center gap-1">
           <div
             className="pointer-events-none flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"
             role="group"
@@ -912,7 +912,7 @@ export function TeamDashboardChartsSection({
           </Button>
           <Tip side="bottom" label="Reset visibility, order, widths, and chart types">
             <Button type="button" size="sm" variant="ghost" className="h-8 px-2 text-xs" onClick={onResetLayout}>
-              <i className="fa-light fa-rotate-left mr-1 text-xs" aria-hidden="true" />
+              <i className="fa-light fa-rotate-left me-1 text-xs" aria-hidden="true" />
               Reset
             </Button>
           </Tip>

package/template/components/data-view-dashboard-charts.tsx

@@ -1097,7 +1097,7 @@ function SortableDashboardChartCard({
             ]}
           />
         </div>
-        <div className="ml-auto flex shrink-0 items-center gap-1">
+        <div className="ms-auto flex shrink-0 items-center gap-1">
           <div
             className="pointer-events-none flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"
             role="group"
@@ -1444,7 +1444,7 @@ export function PlacementsDashboardChartsSection({
           </Button>
           <Tip side="bottom" label="Reset visibility, order, widths, and chart types">
             <Button type="button" size="sm" variant="ghost" className="h-8 px-2 text-xs" onClick={onResetLayout}>
-              <i className="fa-light fa-rotate-left mr-1 text-xs" aria-hidden="true" />
+              <i className="fa-light fa-rotate-left me-1 text-xs" aria-hidden="true" />
               Reset
             </Button>
           </Tip>

package/template/components/data-views/board-card-primitives.tsx

@@ -1,93 +1 @@
-"use client"
-
-/**
- * Reusable building blocks for kanban / board cards (icon rows, two-line blocks, placeholders).
- */
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import type { BoardLineCount } from "@/lib/data-list-display-options"
-
-export function BoardCardIconRow({
-  iconClass,
-  children,
-}: {
-  iconClass: string
-  children: React.ReactNode
-}) {
-  return (
-    <div className="flex items-start gap-2">
-      <i
-        className={cn(
-          `fa-light ${iconClass} text-xs text-muted-foreground mt-0.5 w-4 shrink-0 text-center`,
-        )}
-        aria-hidden
-      />
-      <div className="min-w-0 flex-1 text-xs leading-snug [&_.text-sm]:text-xs [&_span]:text-xs [&_div]:text-xs">
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export function BoardCardTwoLineBlock({
-  iconClass,
-  line1,
-  line2,
-  line2ClassName,
-}: {
-  iconClass: string
-  line1: React.ReactNode
-  /** Omitted for a single-line row (same icon + primary alignment as Placements). */
-  line2?: React.ReactNode
-  /** Override default muted line-2 (e.g. badges / rich cells). */
-  line2ClassName?: string
-}) {
-  const showLine2 = line2 !== undefined && line2 !== null
-  return (
-    <div className="flex items-start gap-2">
-      <i
-        className={cn(
-          `fa-light ${iconClass} text-xs text-muted-foreground mt-0.5 w-4 shrink-0 text-center`,
-        )}
-        aria-hidden
-      />
-      <div className="min-w-0 flex-1">
-        <div className="truncate text-xs font-medium text-foreground leading-tight">{line1}</div>
-        {showLine2 ? (
-          <div
-            className={cn(
-              "mt-0.5 min-w-0 leading-tight",
-              line2ClassName ?? "truncate text-xs text-muted-foreground",
-            )}
-          >
-            {line2}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-export function lineClampClass(n: BoardLineCount): string {
-  const base = "min-w-0 overflow-hidden break-words"
-  if (n === 1) return cn(base, "line-clamp-1")
-  if (n === 2) return cn(base, "line-clamp-2")
-  return cn(base, "line-clamp-3")
-}
-
-export function BoardNewCardPlaceholder({ position }: { position: "above" | "below" }) {
-  return (
-    <button
-      type="button"
-      className={cn(
-        "flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border bg-background/50 py-2 text-xs font-medium text-muted-foreground transition-colors",
-        "hover:border-input hover:bg-muted/40 hover:text-foreground",
-        position === "above" ? "mb-2" : "mt-2",
-      )}
-    >
-      <i className="fa-light fa-plus text-xs" aria-hidden="true" />
-      New card
-    </button>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/board-card-primitives"

package/template/components/data-views/data-row-list.tsx

@@ -1,183 +1 @@
-"use client"
-
-/**
- * DataRowList — generic vertical-stack list view used by every hub's "list"
- * tab (placements, team, compliance, sites, question-bank, …). Replaces the
- * hand-rolled `<ul …flex-col gap-2 px-4 pb-8 pt-2 lg:px-6> {rows.map(<li>…)}`
- * shell that was duplicated across `*-list-view.tsx` files.
- *
- * Composition over inheritance: callers provide a `renderRow(row)` that
- * returns whatever ListPageBoardCard / link / chip-stack they need — this
- * component owns the chrome (spacing, empty state, virtualization), not the
- * row body.
- *
- * Auto-virtualises with `@tanstack/react-virtual` when the row count meets
- * `virtualizeThreshold` (default 100). Disable by passing `0`.
- */
-
-import * as React from "react"
-import { useWindowVirtualizer } from "@tanstack/react-virtual"
-import { cn } from "@/lib/utils"
-
-const DEFAULT_VIRTUALIZE_THRESHOLD = 100
-const DEFAULT_ESTIMATED_ROW_HEIGHT = 96
-const DEFAULT_OVERSCAN = 8
-
-export interface DataRowListProps<TRow> {
-  /** The filtered/sorted rows from `tableState.rows` (or wherever). */
-  rows: readonly TRow[]
-  /** Stable id used as the React `key` and (for virtualizer) the v-key. */
-  getRowId: (row: TRow, index: number) => string | number
-  /** Render the body of one row. Wrap with `<ListPageBoardCard layout="row">` etc. */
-  renderRow: (row: TRow, index: number) => React.ReactNode
-  /**
-   * Shown when `rows.length === 0`. Strings render as muted body copy; pass
-   * a `ReactNode` for richer empty states (illustration, CTA, etc.).
-   */
-  emptyState?: React.ReactNode
-  /**
-   * Auto-virtualise when `rows.length >= virtualizeThreshold`. Default 100.
-   * Pass `0` to never virtualise (preserves predictable layout for short
-   * lists like dashboards / pinned tabs).
-   */
-  virtualizeThreshold?: number
-  /** Hint for the virtualizer; clamps to measured size after first paint. */
-  estimatedRowHeight?: number
-  /** Override the default container padding / gap if needed. */
-  className?: string
-  /** Override the per-row `<li>` className (e.g. tighter spacing). */
-  rowClassName?: string
-  /** `aria-label` for the `<ul>` (screen-reader name for the list). */
-  ariaLabel?: string
-}
-
-const DEFAULT_OUTER_CLASS = "flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6"
-
-export function DataRowList<TRow>(props: DataRowListProps<TRow>) {
-  const {
-    rows,
-    getRowId,
-    renderRow,
-    emptyState,
-    virtualizeThreshold = DEFAULT_VIRTUALIZE_THRESHOLD,
-    estimatedRowHeight = DEFAULT_ESTIMATED_ROW_HEIGHT,
-    className,
-    rowClassName,
-    ariaLabel,
-  } = props
-
-  if (rows.length === 0) {
-    if (emptyState == null) return null
-    if (typeof emptyState === "string") {
-      return (
-        <div className="px-4 py-16 text-center lg:px-6">
-          <p className="text-sm text-muted-foreground">{emptyState}</p>
-        </div>
-      )
-    }
-    return <div className="px-4 py-16 text-center lg:px-6">{emptyState}</div>
-  }
-
-  if (virtualizeThreshold > 0 && rows.length >= virtualizeThreshold) {
-    return (
-      <DataRowListVirtualized
-        rows={rows}
-        getRowId={getRowId}
-        renderRow={renderRow}
-        estimatedRowHeight={estimatedRowHeight}
-        className={className}
-        rowClassName={rowClassName}
-        ariaLabel={ariaLabel}
-      />
-    )
-  }
-
-  return (
-    <ul aria-label={ariaLabel} className={cn(DEFAULT_OUTER_CLASS, className)}>
-      {rows.map((row, i) => (
-        <li key={getRowId(row, i)} className={rowClassName}>
-          {renderRow(row, i)}
-        </li>
-      ))}
-    </ul>
-  )
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Virtualised variant — keeps the DOM short on long lists (e.g. 1000+ rows).
-// Uses `useWindowVirtualizer` so the page scroll drives row recycling; this
-// is the right tool for hub-level lists (not nested-scroll containers).
-// ─────────────────────────────────────────────────────────────────────────────
-
-function DataRowListVirtualized<TRow>({
-  rows,
-  getRowId,
-  renderRow,
-  estimatedRowHeight,
-  className,
-  rowClassName,
-  ariaLabel,
-}: {
-  rows: readonly TRow[]
-  getRowId: (row: TRow, index: number) => string | number
-  renderRow: (row: TRow, index: number) => React.ReactNode
-  estimatedRowHeight: number
-  className?: string
-  rowClassName?: string
-  ariaLabel?: string
-}) {
-  const anchorRef = React.useRef<HTMLDivElement | null>(null)
-  // `scrollMargin` is read by the virtualizer during render, so it has to
-  // be state (not a ref). We measure with `useLayoutEffect` after the first
-  // paint and on resize so window-scroll math stays accurate when the page
-  // layout shifts (sidebar collapse, banner, etc.).
-  const [scrollMargin, setScrollMargin] = React.useState(0)
-
-  const updateScrollMargin = React.useCallback(() => {
-    const el = anchorRef.current
-    if (!el) return
-    setScrollMargin(el.getBoundingClientRect().top + window.scrollY)
-  }, [])
-
-  React.useLayoutEffect(() => {
-    updateScrollMargin()
-    window.addEventListener("resize", updateScrollMargin)
-    return () => window.removeEventListener("resize", updateScrollMargin)
-  }, [updateScrollMargin, rows.length])
-
-  const virtualizer = useWindowVirtualizer({
-    count: rows.length,
-    estimateSize: () => estimatedRowHeight,
-    overscan: DEFAULT_OVERSCAN,
-    scrollMargin,
-    getItemKey: i => String(getRowId(rows[i], i)),
-  })
-
-  const totalSize = virtualizer.getTotalSize()
-
-  return (
-    <div ref={anchorRef} className={cn("px-4 pb-8 pt-2 lg:px-6", className)}>
-      <ul
-        aria-label={ariaLabel}
-        className="relative m-0 w-full list-none p-0"
-        style={{ height: `${totalSize}px` }}
-      >
-        {virtualizer.getVirtualItems().map(vr => {
-          const row = rows[vr.index]
-          if (!row) return null
-          return (
-            <li
-              key={vr.key}
-              data-index={vr.index}
-              ref={virtualizer.measureElement}
-              className={cn("absolute left-0 top-0 w-full pb-2", rowClassName)}
-              style={{ transform: `translateY(${vr.start}px)` }}
-            >
-              {renderRow(row, vr.index)}
-            </li>
-          )
-        })}
-      </ul>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/data-row-list"