@exxatdesignux/ui 0.2.18 → 0.3.0

package/template/components/table-properties/filter-card.tsx

@@ -1,251 +1 @@
-"use client"
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Tip } from "@/components/ui/tip"
-import { FilterDateCalendar } from "@/components/data-table/filter-date-calendar"
-import { FilterTextValueInput } from "@/components/data-table/filter-text-value-input"
-import {
-  type ActiveFilter,
-  type ConditionalRule,
-  type FilterFieldDef,
-  type FilterOperator,
-  OPERATOR_LABELS,
-  RULE_COLORS,
-} from "./types"
-
-type DrawerFilterCardBaseProps = {
-  fieldDef: FilterFieldDef
-  expanded: boolean
-  onToggleExpand: () => void
-  onRemove: (id: string) => void
-  renderOptionLabel?: (value: string) => React.ReactNode
-}
-
-export type DrawerFilterCardProps =
-  | (DrawerFilterCardBaseProps & {
-      variant?: "filter"
-      filter: ActiveFilter
-      onUpdate: (id: string, patch: Partial<ActiveFilter>) => void
-    })
-  | (DrawerFilterCardBaseProps & {
-      variant: "conditional"
-      filter: ConditionalRule
-      onUpdate: (id: string, patch: Partial<ConditionalRule>) => void
-    })
-
-/** Inline filter card used inside the Table Properties drawer (filter or conditional rule). */
-export function DrawerFilterCard(props: DrawerFilterCardProps) {
-  const {
-    fieldDef,
-    expanded,
-    onToggleExpand,
-    onRemove,
-    renderOptionLabel,
-  } = props
-
-  const isCond = props.variant === "conditional"
-  const filter = props.filter
-  const filterId = filter.id
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const onUpdate = props.onUpdate as (id: string, patch: any) => void
-
-  const [optSearch, setOptSearch] = React.useState("")
-  const options = fieldDef.options ?? []
-  const showSearch = options.length > 8
-  const filteredOpts = optSearch
-    ? options.filter(o => o.label.toLowerCase().includes(optSearch.toLowerCase()))
-    : options
-
-  const values = filter.values
-
-  React.useEffect(() => {
-    if (fieldDef.type !== "select" && fieldDef.type !== "date") return
-    if (filter.operator !== "is" && filter.operator !== "is_not") {
-      onUpdate(filterId, { operator: "is" })
-    }
-  }, [filter.operator, filter.id, fieldDef.type, filterId, onUpdate])
-
-  function toggleValue(val: string) {
-    const next = values.includes(val) ? values.filter(v => v !== val) : [...values, val]
-    onUpdate(filterId, { values: next })
-  }
-
-  function cycleOperator() {
-    const ops = fieldDef.operators
-    const idx = ops.indexOf(filter.operator as FilterOperator)
-    const i = idx === -1 ? 0 : idx
-    onUpdate(filterId, { operator: ops[(i + 1) % ops.length] })
-  }
-
-  const removeLabel = isCond ? "rule" : "filter"
-  const rule = isCond ? (props.filter as ConditionalRule) : null
-
-  return (
-    <div className="rounded-lg border border-border overflow-hidden">
-      <div>
-      {/* Card header */}
-      <div
-        className="flex items-start justify-between px-3 pt-2.5 pb-2 gap-2 cursor-pointer"
-        role="button"
-        tabIndex={0}
-        aria-label={expanded ? `Collapse ${fieldDef.label}` : `Expand ${fieldDef.label}`}
-        onClick={onToggleExpand}
-        onKeyDown={e => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault()
-            onToggleExpand()
-          }
-        }}
-      >
-        <div className="flex-1 min-w-0">
-          <p className="text-sm font-semibold text-foreground">{fieldDef.label}</p>
-          <Button
-            type="button"
-            variant="ghost"
-            size="xs"
-            aria-label={`Operator: ${OPERATOR_LABELS[filter.operator as FilterOperator]} — click to cycle`}
-            onClick={e => {
-              e.stopPropagation()
-              cycleOperator()
-            }}
-            className="h-auto py-0 px-1 -ms-1 text-xs text-muted-foreground font-normal"
-          >
-            {OPERATOR_LABELS[filter.operator as FilterOperator]}
-            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
-          </Button>
-        </div>
-        <div className="flex items-center gap-0.5 shrink-0 self-start">
-          <Tip label={`Remove ${fieldDef.label} ${removeLabel}`} side="top">
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              aria-label={`Remove ${fieldDef.label} ${removeLabel}`}
-              className="text-muted-foreground hover:text-destructive"
-              onClick={e => {
-                e.stopPropagation()
-                onRemove(filterId)
-              }}
-            >
-              <i className="fa-light fa-trash text-xs" aria-hidden="true" />
-            </Button>
-          </Tip>
-          <i
-            className={`fa-light ${expanded ? "fa-chevron-up" : "fa-chevron-down"} text-xs text-muted-foreground mt-2`}
-            aria-hidden="true"
-          />
-        </div>
-      </div>
-
-      {/* Expanded body */}
-      {expanded && (
-        <div className="border-t border-border">
-          {fieldDef.type === "select" ? (
-            <>
-              {showSearch && (
-                <div className="px-3 pt-2 pb-1">
-                  <Input placeholder="Search…" value={optSearch} onChange={e => setOptSearch(e.target.value)} className="h-7 text-xs" />
-                </div>
-              )}
-              <div role="listbox" aria-multiselectable="true" aria-label={`${fieldDef.label} options`} className="py-1 max-h-52 overflow-y-auto">
-                {filteredOpts.map(opt => {
-                  const checked = values.includes(opt.value)
-                  return (
-                    <div
-                      key={opt.value}
-                      role="option"
-                      aria-selected={checked}
-                      tabIndex={0}
-                      onClick={() => toggleValue(opt.value)}
-                      onKeyDown={e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleValue(opt.value) } }}
-                      className="flex items-center gap-2.5 px-3 py-2 text-sm hover:bg-interactive-hover cursor-pointer select-none focus-visible:outline-none focus-visible:bg-interactive-hover"
-                    >
-                      <span aria-hidden="true" data-slot="checkbox" data-state={checked ? "checked" : "unchecked"} className={cn(
-                        "inline-flex items-center justify-center size-3.5 shrink-0 rounded-[3px] border transition-colors",
-                        checked ? "bg-primary border-primary text-primary-foreground" : "border-input bg-background"
-                      )}>
-                        {checked && <i className="fa-solid fa-check text-current" style={{ fontSize: "7px" }} />}
-                      </span>
-                      {renderOptionLabel
-                        ? renderOptionLabel(opt.value)
-                        : <span className="text-foreground">{opt.label}</span>
-                      }
-                    </div>
-                  )
-                })}
-                {filteredOpts.length === 0 && (
-                  <p className="px-3 py-2 text-xs text-muted-foreground">No options found</p>
-                )}
-              </div>
-            </>
-          ) : fieldDef.type === "date" ? (
-            <div className="p-2">
-              <FilterDateCalendar
-                label={`${fieldDef.label} — choose date`}
-                valueYmd={filter.values[0]}
-                onChangeYmd={(ymd) =>
-                  onUpdate(filterId, { values: ymd ? [ymd] : [] })
-                }
-              />
-            </div>
-          ) : fieldDef.type === "text" ? (
-            <div className="p-3">
-              <FilterTextValueInput
-                mask={fieldDef.textMask}
-                aria-label={`${fieldDef.label} value`}
-                placeholder={`Enter ${fieldDef.label.toLowerCase()}…`}
-                value={values[0] ?? ""}
-                onValueChange={next => onUpdate(filterId, { values: [next] })}
-                className="text-sm"
-                autoFocus
-              />
-            </div>
-          ) : null}
-          {values.length > 0 ? (
-            <div className="sticky bottom-0 border-t border-border bg-card p-2">
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                onClick={() => onUpdate(filterId, { values: [] })}
-                className="w-full justify-center gap-1.5 text-xs text-muted-foreground"
-              >
-                <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
-                Clear selection
-              </Button>
-            </div>
-          ) : null}
-        </div>
-      )}
-
-      {/* Highlight color — conditional rules only */}
-      {isCond && rule && (
-        <div className="border-t border-border px-3 py-2.5">
-          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-            Highlight color
-          </p>
-          <div className="flex flex-wrap gap-1.5">
-            {RULE_COLORS.map(c => (
-              <Button
-                key={c.name}
-                type="button"
-                size="icon-xs"
-                variant="outline"
-                aria-label={c.name}
-                className={cn(
-                  "rounded-md border-2 p-0 transition-all",
-                  rule.bgColor === c.bg ? "border-foreground scale-110" : "border-transparent hover:scale-105",
-                )}
-                style={{ background: c.bg }}
-                onClick={() => onUpdate(filterId, { bgColor: c.bg })}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-      </div>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/table-properties/filter-card"

package/template/components/table-properties/sort-card.tsx

@@ -1,59 +1 @@
-"use client"
-import * as React from "react"
-import { Tip } from "@/components/ui/tip"
-import { DragHandleGripIcon } from "@/components/ui/drag-handle-grip"
-import { type SortRule, COLUMNS } from "./types"
-
-/** Sort rule card inside the Sort drawer panel */
-export type DrawerSortCardProps = {
-  rule: SortRule
-  /** When the active table uses dynamic columns (e.g. placements), pass the resolved label. */
-  fieldLabel?: string
-  isPrimary: boolean
-  onRemove: () => void
-  onToggleDir: () => void
-}
-
-export function DrawerSortCard(props: DrawerSortCardProps) {
-  const { rule, fieldLabel, isPrimary, onRemove, onToggleDir } = props
-  const col = COLUMNS.find(c => c.key === rule.fieldKey)
-  const label = fieldLabel ?? col?.label ?? rule.fieldKey
-  if (!label) return null
-  return (
-    <div className="rounded-lg border border-border bg-background overflow-hidden">
-      <div className="flex items-center gap-2 px-3 py-2.5">
-        <DragHandleGripIcon className="text-[13px] text-muted-foreground/40" />
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-1.5">
-            {isPrimary && (
-              <span className="text-xs font-bold text-accent-foreground bg-accent rounded px-1 py-0.5 leading-none uppercase tracking-wide shrink-0">
-                Primary
-              </span>
-            )}
-            <p className="text-sm font-medium text-foreground truncate">{label}</p>
-          </div>
-          <button
-            type="button"
-            aria-label={`Direction: ${rule.direction === "asc" ? "Ascending" : "Descending"} — click to toggle`}
-            onClick={onToggleDir}
-            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors mt-0.5"
-          >
-            <i className={`fa-light ${rule.direction === "asc" ? "fa-arrow-up-a-z" : "fa-arrow-down-a-z"} text-xs`} aria-hidden="true" />
-            {rule.direction === "asc" ? "Ascending" : "Descending"}
-            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
-          </button>
-        </div>
-        <Tip label={`Remove ${label} sort`} side="top">
-          <button
-            type="button"
-            aria-label={`Remove ${label} sort`}
-            onClick={onRemove}
-            className="inline-flex items-center justify-center size-7 rounded text-muted-foreground hover:text-destructive hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0"
-          >
-            <i className="fa-light fa-trash text-xs" aria-hidden="true" />
-          </button>
-        </Tip>
-      </div>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/table-properties/sort-card"

package/template/components/table-properties/types.ts

@@ -1,42 +1,33 @@
-"use client"
+/**
+ * Table Properties types + Placements seed data.
+ *
+ * Generic filter / sort / conditional-rule types live in
+ * `@exxatdesignux/ui/lib/table-properties-types` so other apps consuming
+ * the design system can build their own filter / sort drawers without
+ * inheriting Placements-specific column lists.
+ *
+ * `FILTER_FIELDS` and `COLUMNS` below are **product data**, not
+ * design-system primitives — they encode the columns + filter operators
+ * of the Placements hub. Other hubs (Team, Compliance, Question bank)
+ * compose their own arrays and pass them into the drawer.
+ */
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Shared types for table-properties components
-// ─────────────────────────────────────────────────────────────────────────────
+export {
+  OPERATOR_LABELS,
+  RULE_COLORS,
+  type ActiveFilter,
+  type ColDef,
+  type ConditionalRule,
+  type FilterFieldDef,
+  type FilterOperator,
+  type FilterTextMask,
+  type SortRule,
+} from "@exxatdesignux/ui/lib/table-properties-types"
 
-export type FilterOperator = "is" | "is_not" | "contains" | "not_contains"
-
-/** Input mask for `type: "text"` filters — [Shadcn Studio input-mask](https://shadcnstudio.com/docs/components/input-mask). */
-export type FilterTextMask = "phone" | "zip" | "dateMDY"
-
-export interface FilterFieldDef {
-  key: string
-  label: string
-  icon: string
-  type: "select" | "text" | "date"
-  operators: FilterOperator[]
-  /** Select options, or for `date` fields used by conditional rules (exact row strings). */
-  options?: { value: string; label: string }[]
-  /** When `type` is `text`, optional `use-mask-input` pattern for the value field. */
-  textMask?: FilterTextMask
-}
-
-export interface ActiveFilter {
-  id: string
-  fieldKey: string
-  operator: FilterOperator
-  values: string[]
-}
-
-export interface SortRule {
-  id: string
-  fieldKey: string
-  direction: "asc" | "desc"
-}
-
-export const OPERATOR_LABELS: Record<FilterOperator, string> = {
-  is: "is", is_not: "is not", contains: "contains", not_contains: "does not contain",
-}
+import type {
+  ColDef,
+  FilterFieldDef,
+} from "@exxatdesignux/ui/lib/table-properties-types"
 
 /** Default filter field list (placement table uses column-derived defs via `filterFields` prop). */
 export const FILTER_FIELDS: FilterFieldDef[] = [
@@ -77,40 +68,6 @@ export const FILTER_FIELDS: FilterFieldDef[] = [
   { key: "supervisor", label: "Supervisor", icon: "fa-user-tie",  type: "text", operators: ["contains", "not_contains"] },
 ]
 
-// Column definitions — shared with drawer
-export interface ColDef {
-  key: string
-  label: string
-  sortable: boolean
-  sortKey?: string
-  minWidth: number
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Conditional formatting rules
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface ConditionalRule {
-  id: string
-  /** Column key to evaluate */
-  fieldKey: string
-  operator: FilterOperator
-  /** Selected option values (select) or text (single entry) when operator needs values */
-  values: string[]
-  /** Resolved CSS background color string */
-  bgColor: string
-}
-
-/** Predefined palette for conditional rule backgrounds */
-export const RULE_COLORS: { name: string; bg: string }[] = [
-  { name: "Green",  bg: "var(--conditional-rule-green)" },
-  { name: "Yellow", bg: "var(--conditional-rule-yellow)" },
-  { name: "Blue",   bg: "var(--conditional-rule-blue)" },
-  { name: "Red",    bg: "var(--conditional-rule-red)" },
-  { name: "Purple", bg: "var(--conditional-rule-purple)" },
-  { name: "Orange", bg: "var(--conditional-rule-orange)" },
-]
-
 export const COLUMNS: ColDef[] = [
   { key: "select",     label: "",            sortable: false, minWidth: 40  },
   { key: "student",    label: "Student",     sortable: true,  minWidth: 180, sortKey: "student"  },