@exxatdesignux/ui 0.0.5 → 0.0.7

package/template/components/system-banner-slot.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+/**
+ * SystemBannerSlot — the live banner rendered at the top of the app shell.
+ * Reads from `SystemBannerContext` so toggling / editing from Settings
+ * updates the banner in real time (and cross-tab via the storage listener).
+ */
+
+import * as React from "react"
+import Link from "next/link"
+import { SystemBanner } from "@/components/ui/banner"
+import { AiThinkingOverlay } from "@/components/ui/ai-thinking-surface"
+import { useSystemBanner } from "@/contexts/system-banner-context"
+
+export function SystemBannerSlot() {
+  const { config, setEnabled } = useSystemBanner()
+  const [mounted, setMounted] = React.useState(false)
+  React.useEffect(() => setMounted(true), [])
+  if (!config.enabled) return null
+
+  // Banner surface matches SidebarInset + sidebar-gap (inset variant):
+  //   expanded: gap = --sidebar-width, inset ms-0 → align at gap edge (no extra ps).
+  //   collapsed: gap = icon + spacing(4), inset ms-2 → match packages/ui sidebar gap + 0.5rem.
+  // Below md: px-2 matches SidebarInset horizontal inset (high zoom / narrow viewports).
+  // md+: left padding follows the sidebar gap so the banner aligns with the main content area.
+  return (
+    <div className="shrink-0 px-2 pt-1.5 transition-[padding] duration-200 ease-linear md:ps-[var(--sidebar-width)] md:pe-2 md:pt-2 md:group-data-[state=collapsed]/sidebar-wrapper:ps-[calc(var(--sidebar-width-icon)+1rem+0.5rem)]">
+      <SystemBanner
+        variant={config.variant}
+        emphasis={config.emphasis}
+        title={config.title || undefined}
+        dismissible={config.dismissible}
+        onDismiss={() => setEnabled(false)}
+        decorativeOverlay={
+          config.variant === "promo" && mounted ? (
+            <AiThinkingOverlay
+              active
+              cloudCount={2}
+              cloudRadius={340}
+              gridSize={13}
+              dotRadius={1.15}
+              fillClassName="fill-brand/30 dark:fill-brand/38"
+            />
+          ) : undefined
+        }
+        action={
+          config.actionLabel
+            ? { label: config.actionLabel, href: config.actionHref || "#" }
+            : undefined
+        }
+      >
+        {/* Fall back gracefully if message was cleared — still show title-only banner. */}
+        {config.message || (config.title ? "" : <LinkAccent href="#">Details</LinkAccent>)}
+      </SystemBanner>
+    </div>
+  )
+}
+
+/** Tiny local link helper so the fallback above still uses next/link. */
+function LinkAccent({ href, children }: { href: string; children: React.ReactNode }) {
+  return (
+    <Link href={href} className="underline">
+      {children}
+    </Link>
+  )
+}

package/template/components/table-properties/column-row.tsx

@@ -0,0 +1,90 @@
+"use client"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Tip } from "@/components/ui/tip"
+import { DragHandleGripIcon } from "@/components/ui/drag-handle-grip"
+import { ToggleSwitch } from "@/components/ui/toggle-switch"
+
+export interface ColumnRowProps {
+  label: string
+  isFirst: boolean
+  isLast: boolean
+  visible: boolean
+  onToggleVisible: () => void
+  onMoveUp: () => void
+  onMoveDown: () => void
+  // drag-and-drop props spread from useDraggableList
+  draggable: true
+  onDragStart: React.DragEventHandler
+  onDragOver: React.DragEventHandler
+  onDrop: React.DragEventHandler
+  onDragEnd: React.DragEventHandler
+  isDragging: boolean
+  isOver: boolean
+}
+
+export function ColumnRow({
+  label,
+  isFirst,
+  isLast,
+  visible,
+  onToggleVisible,
+  onMoveUp,
+  onMoveDown,
+  draggable,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  isDragging,
+  isOver,
+}: ColumnRowProps) {
+  return (
+    <div
+      role="listitem"
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+      className={cn(
+        "flex items-center gap-2 px-2 py-2 rounded-lg group hover:bg-interactive-hover-subtle transition-colors cursor-grab active:cursor-grabbing",
+        isDragging && "opacity-40",
+        isOver && "ring-2 ring-ring bg-accent/30",
+      )}
+    >
+      <DragHandleGripIcon className="text-[13px] text-muted-foreground/40 transition-colors group-hover:text-muted-foreground" />
+      <span className="flex-1 text-sm text-foreground">{label}</span>
+      {/* Up / Down priority buttons */}
+      <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+        <Tip label={`Move ${label} up`} side="top">
+          <button
+            type="button"
+            aria-label={`Move ${label} up`}
+            disabled={isFirst}
+            onClick={onMoveUp}
+            className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <i className="fa-light fa-chevron-up text-xs" aria-hidden="true" />
+          </button>
+        </Tip>
+        <Tip label={`Move ${label} down`} side="top">
+          <button
+            type="button"
+            aria-label={`Move ${label} down`}
+            disabled={isLast}
+            onClick={onMoveDown}
+            className="inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
+          </button>
+        </Tip>
+      </div>
+      {/* Visibility toggle */}
+      <ToggleSwitch
+        checked={visible}
+        onChange={onToggleVisible}
+      />
+    </div>
+  )
+}

package/template/components/table-properties/draggable-list.ts

@@ -0,0 +1,49 @@
+import * as React from "react"
+
+export interface DraggableListHandle {
+  dragId: string | null
+  overId: string | null
+  getItemProps: (id: string) => {
+    draggable: true
+    onDragStart: (e: React.DragEvent) => void
+    onDragOver: (e: React.DragEvent) => void
+    onDrop: (e: React.DragEvent) => void
+    onDragEnd: () => void
+    "data-dragging": boolean
+    "data-over": boolean
+  }
+}
+
+export function useDraggableList<T>(
+  items: T[],
+  getId: (item: T) => string,
+  onReorder: (newItems: T[]) => void,
+): DraggableListHandle {
+  const [dragId, setDragId] = React.useState<string | null>(null)
+  const [overId, setOverId] = React.useState<string | null>(null)
+
+  function getItemProps(id: string) {
+    return {
+      draggable: true as const,
+      onDragStart: (e: React.DragEvent) => { e.dataTransfer.effectAllowed = "move"; setDragId(id) },
+      onDragOver: (e: React.DragEvent) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setOverId(id) },
+      onDrop: (e: React.DragEvent) => {
+        e.preventDefault()
+        if (!dragId || dragId === id) { setDragId(null); setOverId(null); return }
+        const from = items.findIndex(i => getId(i) === dragId)
+        const to   = items.findIndex(i => getId(i) === id)
+        if (from === -1 || to === -1) { setDragId(null); setOverId(null); return }
+        const next = [...items]
+        const [moved] = next.splice(from, 1)
+        next.splice(to, 0, moved)
+        onReorder(next)
+        setDragId(null); setOverId(null)
+      },
+      onDragEnd: () => { setDragId(null); setOverId(null) },
+      "data-dragging": dragId === id,
+      "data-over": overId === id && dragId !== id,
+    }
+  }
+
+  return { dragId, overId, getItemProps }
+}

package/template/components/table-properties/drawer-button.tsx

@@ -0,0 +1,231 @@
+"use client"
+
+/**
+ * TablePropertiesDrawerButton — reusable Properties button + drawer combo.
+ *
+ * Centralises the "sliders" icon button and the full `TablePropertiesDrawer` that was
+ * previously duplicated per hub (TeamDrawerToolbar, ComplianceDrawerToolbar, …).
+ *
+ * Pass any `useTableState<T>` return object as `state` — the component only reads
+ * display-agnostic fields so it is compatible with any row shape.
+ */
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Button } from "@/components/ui/button"
+import { TablePropertiesDrawer } from "./drawer"
+import type { ActiveFilter, ConditionalRule, FilterFieldDef, SortRule } from "./types"
+import type { RowHeight } from "@/lib/row-height"
+import type { DataListViewType } from "@/lib/data-list-view"
+import type { DataListDisplayOptions } from "@/lib/data-list-display-options"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// State interface
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Structural interface over the fields consumed from `useTableState`.
+ * Any `ReturnType<typeof useTableState<T>>` is assignable to this type because:
+ *  - All non-row fields have the same shape regardless of `T`.
+ *  - `rows: T[]` is assignable to `rows: { length: number }` (arrays expose `.length`).
+ */
+export interface TablePropertiesDrawerButtonState {
+  sheetOpen: boolean
+  setSheetOpen: (v: boolean) => void
+  showGridlines: boolean
+  setShowGridlines: (v: boolean) => void
+  rowHeight: RowHeight
+  setRowHeight: (v: RowHeight) => void
+  activeFilters: ActiveFilter[]
+  addFilter: (fieldKey: string, fromDrawer?: boolean) => void
+  updateFilter: (id: string, patch: Partial<ActiveFilter>) => void
+  removeFilter: (id: string) => void
+  getConnector: (leftFilterId: string) => "and" | "or"
+  toggleConnector: (leftFilterId: string) => void
+  filterBarVisible: boolean
+  setFilterBarVisible: (v: boolean) => void
+  drawerExpandedFilters: Set<string>
+  setDrawerExpandedFilters: React.Dispatch<React.SetStateAction<Set<string>>>
+  /** Only `.length` is read — compatible with any `T[]`. */
+  rows: { length: number }
+  sortRules: SortRule[]
+  setSortRules: (rules: SortRule[]) => void
+  addSortRule: (fieldKey: string) => void
+  removeSortRule: (id: string) => void
+  toggleSortDir: (id: string) => void
+  colOrder: string[]
+  setColOrder: (order: string[]) => void
+  hiddenCols: Set<string>
+  toggleColVisibility: (key: string) => void
+  moveCol: (key: string, dir: "up" | "down") => void
+  groupBy: string | null
+  setGroupBy: (key: string | null) => void
+  sortKey?: string
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface TablePropertiesDrawerButtonProps {
+  /** Pass any `useTableState<T>` return value. */
+  state: TablePropertiesDrawerButtonState
+  totalRows: number
+  filterFields: FilterFieldDef[]
+  /** Column definitions for the drawer's Sort / Group / Columns panels. */
+  fieldDefinitions?: { key: string; label: string; sortable?: boolean }[]
+  resolveColumnLabel?: (key: string) => string
+  displayOptions: DataListDisplayOptions
+  onDisplayOptionsChange: (patch: Partial<DataListDisplayOptions>) => void
+  conditionalRules: ConditionalRule[]
+  onAddConditionalRule: (rule: Omit<ConditionalRule, "id">) => void
+  onRemoveConditionalRule: (id: string) => void
+  onUpdateConditionalRule: (id: string, patch: Partial<ConditionalRule>) => void
+  /**
+   * Whether pagination is enabled. Defaults to `false`.
+   * Placements passes `true` because it supports server-side pagination.
+   */
+  pagination?: boolean
+  onPaginationChange?: (v: boolean) => void
+  /** View type shown in the drawer header tile grid. */
+  currentView?: DataListViewType
+  onViewChange?: (v: DataListViewType) => void
+  /** Shown below the "Properties" title in the drawer header (e.g. "Team", "Compliance"). */
+  lifecycleTabLabel?: string
+  /**
+   * When the active view is Board and more than one entry is provided, the drawer renders
+   * a selector for which field splits the board into swimlane columns.
+   */
+  boardGroupByColumnOptions?: { key: string; label: string }[]
+  /** Extra controls rendered before the Properties button (e.g. a dashboard-edit button). */
+  extraActions?: React.ReactNode
+  /** Optional custom option renderer for filter values (e.g. status chips). */
+  renderFilterOptionValue?: (fieldKey: string, value: string) => React.ReactNode
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function TablePropertiesDrawerButton({
+  state,
+  totalRows,
+  filterFields,
+  fieldDefinitions,
+  resolveColumnLabel,
+  displayOptions,
+  onDisplayOptionsChange,
+  conditionalRules,
+  onAddConditionalRule,
+  onRemoveConditionalRule,
+  onUpdateConditionalRule,
+  pagination = false,
+  onPaginationChange,
+  currentView,
+  onViewChange,
+  lifecycleTabLabel,
+  boardGroupByColumnOptions,
+  extraActions,
+  renderFilterOptionValue,
+}: TablePropertiesDrawerButtonProps) {
+  const {
+    sheetOpen, setSheetOpen,
+    showGridlines, setShowGridlines,
+    rowHeight, setRowHeight,
+    activeFilters, addFilter, updateFilter, removeFilter,
+    getConnector, toggleConnector,
+    filterBarVisible, setFilterBarVisible,
+    drawerExpandedFilters, setDrawerExpandedFilters,
+    rows,
+    sortRules, setSortRules, addSortRule, removeSortRule, toggleSortDir,
+    colOrder, setColOrder,
+    hiddenCols, toggleColVisibility,
+    moveCol,
+    groupBy, setGroupBy,
+    sortKey,
+  } = state
+
+  return (
+    <>
+      {extraActions}
+
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Properties"
+              onClick={() => setSheetOpen(true)}
+              className={cn(
+                sheetOpen
+                  ? "bg-accent text-accent-foreground"
+                  : "text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover",
+              )}
+            >
+              <i className="fa-light fa-sliders text-[13px]" aria-hidden="true" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">Properties</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <TablePropertiesDrawer
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        showGridlines={showGridlines}
+        onShowGridlinesChange={setShowGridlines}
+        rowHeight={rowHeight}
+        onRowHeightChange={setRowHeight}
+        pagination={pagination}
+        onPaginationChange={onPaginationChange ?? (() => {})}
+        activeFilters={activeFilters}
+        onAddFilter={fieldKey => addFilter(fieldKey, true)}
+        onUpdateFilter={updateFilter}
+        onRemoveFilter={removeFilter}
+        getFilterConnector={getConnector}
+        onToggleFilterConnector={toggleConnector}
+        filterBarVisible={filterBarVisible}
+        onFilterBarVisibleChange={setFilterBarVisible}
+        drawerExpandedFilters={drawerExpandedFilters}
+        onDrawerExpandedFiltersChange={setDrawerExpandedFilters}
+        totalRows={totalRows}
+        filteredRows={rows.length}
+        sortRules={sortRules}
+        onSortRulesChange={setSortRules}
+        onAddSortRule={addSortRule}
+        onRemoveSortRule={removeSortRule}
+        onToggleSortDir={toggleSortDir}
+        colOrder={colOrder}
+        onColOrderChange={setColOrder}
+        hiddenCols={hiddenCols}
+        onToggleColVisibility={toggleColVisibility}
+        onMoveCol={moveCol}
+        groupBy={groupBy}
+        onGroupByChange={setGroupBy}
+        primarySortKey={sortKey}
+        conditionalRules={conditionalRules}
+        onAddConditionalRule={onAddConditionalRule}
+        onRemoveConditionalRule={onRemoveConditionalRule}
+        onUpdateConditionalRule={onUpdateConditionalRule}
+        filterFields={filterFields}
+        lifecycleTabLabel={lifecycleTabLabel}
+        fieldDefinitions={fieldDefinitions}
+        resolveColumnLabel={resolveColumnLabel}
+        displayOptions={displayOptions}
+        onDisplayOptionsChange={onDisplayOptionsChange}
+        currentView={currentView}
+        onViewChange={onViewChange}
+        boardGroupByColumnOptions={boardGroupByColumnOptions}
+        renderFilterOptionValue={renderFilterOptionValue}
+      />
+    </>
+  )
+}