@exxatdesignux/ui 0.2.19 → 0.4.0

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

@@ -1,90 +1 @@
-"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>
-  )
-}
+export * from "@exxatdesignux/ui/components/table-properties/column-row"

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

@@ -1,49 +1 @@
-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 }
-}
+export * from "@exxatdesignux/ui/components/table-properties/draggable-list"

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

@@ -1,262 +1 @@
-"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 { dataListViewSelectionTilesForHub } from "@/lib/data-list-view-registry"
-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
-  /** When set, Properties view tiles match `ListPageTemplate` `supportedViewTypes`. */
-  supportedViewTypes?: readonly DataListViewType[]
-  /** 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,
-  supportedViewTypes,
-  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
-
-  // Sheet is portaled; keep latest handlers so sort/filter/conditional edits are not lost.
-  const stateRef = React.useRef(state)
-  stateRef.current = state
-  const ruleHandlersRef = React.useRef({
-    onAddConditionalRule,
-    onRemoveConditionalRule,
-    onUpdateConditionalRule,
-    onDisplayOptionsChange,
-    onPaginationChange,
-  })
-  ruleHandlersRef.current = {
-    onAddConditionalRule,
-    onRemoveConditionalRule,
-    onUpdateConditionalRule,
-    onDisplayOptionsChange,
-    onPaginationChange,
-  }
-
-  const viewTypeOptions = React.useMemo(
-    () =>
-      supportedViewTypes != null
-        ? dataListViewSelectionTilesForHub(supportedViewTypes)
-        : undefined,
-    [supportedViewTypes],
-  )
-
-  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={v => ruleHandlersRef.current.onPaginationChange?.(v)}
-        activeFilters={activeFilters}
-        onAddFilter={fieldKey => stateRef.current.addFilter(fieldKey, true)}
-        onUpdateFilter={(id, patch) => stateRef.current.updateFilter(id, patch)}
-        onRemoveFilter={id => stateRef.current.removeFilter(id)}
-        getFilterConnector={leftId => stateRef.current.getConnector(leftId)}
-        onToggleFilterConnector={leftId => stateRef.current.toggleConnector(leftId)}
-        filterBarVisible={filterBarVisible}
-        onFilterBarVisibleChange={v => stateRef.current.setFilterBarVisible(v)}
-        drawerExpandedFilters={drawerExpandedFilters}
-        onDrawerExpandedFiltersChange={stateRef.current.setDrawerExpandedFilters}
-        totalRows={totalRows}
-        filteredRows={rows.length}
-        sortRules={sortRules}
-        onSortRulesChange={rules => stateRef.current.setSortRules(rules)}
-        onAddSortRule={fieldKey => stateRef.current.addSortRule(fieldKey)}
-        onRemoveSortRule={id => stateRef.current.removeSortRule(id)}
-        onToggleSortDir={id => stateRef.current.toggleSortDir(id)}
-        colOrder={colOrder}
-        onColOrderChange={order => stateRef.current.setColOrder(order)}
-        hiddenCols={hiddenCols}
-        onToggleColVisibility={key => stateRef.current.toggleColVisibility(key)}
-        onMoveCol={(key, dir) => stateRef.current.moveCol(key, dir)}
-        groupBy={groupBy}
-        onGroupByChange={key => stateRef.current.setGroupBy(key)}
-        primarySortKey={sortKey}
-        conditionalRules={conditionalRules}
-        onAddConditionalRule={rule => ruleHandlersRef.current.onAddConditionalRule(rule)}
-        onRemoveConditionalRule={id => ruleHandlersRef.current.onRemoveConditionalRule(id)}
-        onUpdateConditionalRule={(id, patch) => ruleHandlersRef.current.onUpdateConditionalRule(id, patch)}
-        filterFields={filterFields}
-        lifecycleTabLabel={lifecycleTabLabel}
-        fieldDefinitions={fieldDefinitions}
-        resolveColumnLabel={resolveColumnLabel}
-        displayOptions={displayOptions}
-        onDisplayOptionsChange={patch => ruleHandlersRef.current.onDisplayOptionsChange(patch)}
-        currentView={currentView}
-        onViewChange={onViewChange}
-        viewTypeOptions={viewTypeOptions}
-        boardGroupByColumnOptions={boardGroupByColumnOptions}
-        renderFilterOptionValue={renderFilterOptionValue}
-      />
-    </>
-  )
-}
+export * from "@exxatdesignux/ui/components/table-properties/drawer-button"