@handled-ai/design-system 0.8.0 → 0.9.1

package/src/components/virtualized-data-table.tsx

@@ -0,0 +1,309 @@
+"use client"
+
+import * as React from "react"
+import { useVirtualizer } from "@tanstack/react-virtual"
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  type ColumnDef,
+  type SortingState,
+  type ColumnFiltersState,
+  type VisibilityState,
+  type OnChangeFn,
+} from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+export interface VirtualizedDataTableProps<TData> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: ColumnDef<TData, any>[]
+  data: TData[]
+
+  // Virtualization
+  height?: number | string
+  estimateRowHeight?: number
+  overscan?: number
+
+  // Row interaction
+  onRowClick?: (row: TData) => void
+  getRowId?: (original: TData, index: number) => string
+
+  // Infinite scroll
+  onReachBottom?: () => void
+  reachBottomThreshold?: number
+  hasMore?: boolean
+  isFetchingMore?: boolean
+
+  // Server-driven state (controlled) — omit for internal state
+  sorting?: SortingState
+  onSortingChange?: OnChangeFn<SortingState>
+  columnFilters?: ColumnFiltersState
+  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
+  columnVisibility?: VisibilityState
+  onColumnVisibilityChange?: OnChangeFn<VisibilityState>
+
+  // Empty state
+  emptyIcon?: React.ReactNode
+  emptyMessage?: string
+  emptyDescription?: string
+
+  // Styling
+  className?: string
+}
+
+export function VirtualizedDataTable<TData>({
+  columns,
+  data,
+  height = 600,
+  estimateRowHeight = 48,
+  overscan = 8,
+  onRowClick,
+  getRowId,
+  onReachBottom,
+  reachBottomThreshold = 5,
+  hasMore = true,
+  isFetchingMore,
+  sorting,
+  onSortingChange,
+  columnFilters,
+  onColumnFiltersChange,
+  columnVisibility,
+  onColumnVisibilityChange,
+  emptyIcon,
+  emptyMessage = "No rows found",
+  emptyDescription = "Try adjusting your filters",
+  className,
+}: VirtualizedDataTableProps<TData>) {
+  // Controlled/uncontrolled state for sorting
+  const [internalSorting, setInternalSorting] = React.useState<SortingState>([])
+  const resolvedSorting = sorting ?? internalSorting
+  const resolvedOnSortingChange = onSortingChange ?? setInternalSorting
+
+  // Controlled/uncontrolled state for column filters
+  const [internalColumnFilters, setInternalColumnFilters] =
+    React.useState<ColumnFiltersState>([])
+  const resolvedColumnFilters = columnFilters ?? internalColumnFilters
+  const resolvedOnColumnFiltersChange =
+    onColumnFiltersChange ?? setInternalColumnFilters
+
+  // Controlled/uncontrolled state for column visibility
+  const [internalColumnVisibility, setInternalColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility
+  const resolvedOnColumnVisibilityChange =
+    onColumnVisibilityChange ?? setInternalColumnVisibility
+
+  // TanStack Table setup
+  const table = useReactTable({
+    data,
+    columns,
+    ...(getRowId ? { getRowId } : {}),
+    state: {
+      sorting: resolvedSorting,
+      columnFilters: resolvedColumnFilters,
+      columnVisibility: resolvedColumnVisibility,
+    },
+    onSortingChange: resolvedOnSortingChange,
+    onColumnFiltersChange: resolvedOnColumnFiltersChange,
+    onColumnVisibilityChange: resolvedOnColumnVisibilityChange,
+    manualSorting: true,
+    manualFiltering: true,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  // Virtualizer setup
+  const scrollContainerRef = React.useRef<HTMLDivElement>(null)
+  const rows = table.getRowModel().rows
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => estimateRowHeight,
+    overscan,
+    measureElement: (element) => element.getBoundingClientRect().height,
+  })
+
+  // Infinite scroll detection
+  const lastTriggeredDataLengthRef = React.useRef<number>(0)
+
+  // Derive a stable primitive for the last visible virtual-item index so the
+  // effect below doesn't re-run on every render (getVirtualItems() returns a
+  // new array reference each call).
+  const virtualItems = virtualizer.getVirtualItems()
+  const lastVirtualItemIndex =
+    virtualItems.length > 0
+      ? virtualItems[virtualItems.length - 1].index
+      : -1
+
+  React.useEffect(() => {
+    if (!onReachBottom || isFetchingMore || hasMore === false) return
+    if (lastVirtualItemIndex < 0) return
+    if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return
+
+    // Prevent re-firing until data.length changes (i.e. new page loaded).
+    if (lastTriggeredDataLengthRef.current === data.length) return
+    lastTriggeredDataLengthRef.current = data.length
+
+    onReachBottom()
+  }, [
+    lastVirtualItemIndex,
+    rows.length,
+    data.length,
+    onReachBottom,
+    isFetchingMore,
+    hasMore,
+    reachBottomThreshold,
+  ])
+
+  return (
+    <div className={cn("w-full", className)}>
+      <div
+        ref={scrollContainerRef}
+        className="relative overflow-auto"
+        style={{
+          height: typeof height === "number" ? `${height}px` : height,
+          contain: "strict",
+        }}
+        role="table"
+        aria-rowcount={data.length}
+        aria-colcount={table.getVisibleLeafColumns().length}
+      >
+        {/* Sticky header */}
+        <div className="sticky top-0 z-10 bg-background" role="rowgroup">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <div
+              key={headerGroup.id}
+              className="flex w-max min-w-full border-b border-border/50"
+              role="row"
+            >
+              {headerGroup.headers.map((header, colIdx) => (
+                <div
+                  key={header.id}
+                  className="h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap"
+                  style={{
+                    width: header.getSize(),
+                    minWidth: header.getSize(),
+                  }}
+                  role="columnheader"
+                  aria-colindex={colIdx + 1}
+                  aria-sort={
+                    header.column.getIsSorted() === "asc"
+                      ? "ascending"
+                      : header.column.getIsSorted() === "desc"
+                        ? "descending"
+                        : header.column.getCanSort()
+                          ? "none"
+                          : undefined
+                  }
+                >
+                  {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                    <button
+                      type="button"
+                      className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                      {header.column.getIsSorted() === "asc" ? (
+                        <ArrowUp className="w-3 h-3" />
+                      ) : header.column.getIsSorted() === "desc" ? (
+                        <ArrowDown className="w-3 h-3" />
+                      ) : (
+                        <ArrowUpDown className="w-3 h-3 opacity-40" />
+                      )}
+                    </button>
+                  ) : (
+                    flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )
+                  )}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+
+        {/* Virtualized body or empty state */}
+        {rows.length > 0 ? (
+          <div
+            role="rowgroup"
+            style={{
+              height: virtualizer.getTotalSize(),
+              width: "100%",
+              position: "relative",
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualRow) => {
+              const row = rows[virtualRow.index]
+              return (
+                <div
+                  key={row.id}
+                  data-index={virtualRow.index}
+                  ref={virtualizer.measureElement}
+                  className={cn(
+                    "absolute left-0 w-max min-w-full flex group transition-colors",
+                    onRowClick && "cursor-pointer",
+                  )}
+                  style={{
+                    transform: `translateY(${virtualRow.start}px)`,
+                  }}
+                  role="row"
+                  aria-rowindex={virtualRow.index + 2}
+                  onClick={() => onRowClick?.(row.original)}
+                  tabIndex={onRowClick ? 0 : undefined}
+                  onKeyDown={
+                    onRowClick
+                      ? (e: React.KeyboardEvent) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault()
+                            onRowClick(row.original)
+                          }
+                        }
+                      : undefined
+                  }
+                >
+                  {row.getVisibleCells().map((cell, colIdx) => (
+                    <div
+                      key={cell.id}
+                      className="px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50"
+                      style={{
+                        width: cell.column.getSize(),
+                        minWidth: cell.column.getSize(),
+                      }}
+                      role="cell"
+                      aria-colindex={colIdx + 1}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )
+            })}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center gap-1 text-muted-foreground py-20">
+            {emptyIcon ?? <SearchX className="h-7 w-7 opacity-40" />}
+            <p className="text-sm font-medium">{emptyMessage}</p>
+            <p className="text-xs">{emptyDescription}</p>
+          </div>
+        )}
+
+        {/* Loading indicator */}
+        {isFetchingMore && (
+          <div className="flex items-center justify-center py-4">
+            <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/index.ts

@@ -0,0 +1,78 @@
+/**
+ * @handled-ai/design-system
+ * UI components and utilities (shadcn-style, New York)
+ */
+
+// Utilities
+export { cn } from "./lib/utils"
+export { BRAND_ICONS } from "./lib/icons"
+
+// Hooks
+export { useIsMobile } from "./hooks/use-mobile"
+
+// Components (light — no recharts/nivo/three transitive deps)
+export * from "./components/activity-detail"
+export * from "./components/activity-log"
+export * from "./components/agent-popover"
+export * from "./components/agent-widget"
+export * from "./components/avatar"
+export * from "./components/badge"
+export * from "./components/button"
+export * from "./components/card"
+export * from "./components/contact-list"
+export * from "./components/dashboard-cards"
+export * from "./components/data-table"
+export * from "./components/data-table-display"
+export * from "./components/data-table-filter"
+export * from "./components/data-table-quick-views"
+export * from "./components/data-table-toolbar"
+export * from "./components/detail-view"
+export * from "./components/dialog"
+export * from "./components/dropdown-menu"
+export * from "./components/entity-panel"
+export * from "./components/inbox-row"
+export * from "./components/inbox-toolbar"
+export * from "./components/input"
+export * from "./components/insights-filter-bar"
+export * from "./components/item-list"
+export * from "./components/item-list-display"
+export * from "./components/item-list-filter"
+export * from "./components/item-list-toolbar"
+export * from "./components/label"
+export * from "./components/message"
+export * from "./components/metric-card"
+export * from "./components/performance-metrics-table"
+export * from "./components/preview-list"
+export * from "./components/progress"
+export * from "./components/quick-action-chat-area"
+export {
+  QuickActionModal,
+  type QuickActionPriority,
+  type QuickActionTaskDraft,
+  type QuickActionTemplate,
+} from "./components/quick-action-modal"
+export * from "./components/quick-action-sidebar-nav"
+export * from "./components/recommended-actions-section"
+export * from "./components/report-card"
+export * from "./components/score-analysis-modal"
+export * from "./components/score-breakdown"
+export * from "./components/score-feedback"
+export * from "./components/score-ring"
+export * from "./components/scroll-area"
+export * from "./components/select"
+export * from "./components/separator"
+export * from "./components/sheet"
+export * from "./components/sidebar"
+export * from "./components/signal-feedback-inline"
+export * from "./components/simple-data-table"
+export * from "./components/virtualized-data-table"
+export * from "./components/skeleton"
+export * from "./components/status-badge"
+export * from "./components/styled-bar-list"
+export * from "./components/suggested-actions"
+export * from "./components/table"
+export * from "./components/tabs"
+export * from "./components/textarea"
+export * from "./components/timeline-activity"
+export * from "./components/tooltip"
+export * from "./components/view-mode-toggle"

package/src/lib/icons.ts

@@ -0,0 +1,18 @@
+const SUPABASE_ICONS = "https://bqvtedneuaozpgcgcxow.supabase.co/storage/v1/object/public/media/Icons";
+
+export const BRAND_ICONS = {
+  gdoc: `${SUPABASE_ICONS}/gdoc.a1.svg`,
+  gmail: {
+    icon: `${SUPABASE_ICONS}/gmail.icon.a1.svg`,
+    logo: `${SUPABASE_ICONS}/gmail.logo.a2.svg`,
+  },
+  gong: `${SUPABASE_ICONS}/gong.icon.a1.png`,
+  google: `${SUPABASE_ICONS}/google.icon.a1.svg`,
+  hubspot: `${SUPABASE_ICONS}/hubspot.icon.a1.svg`,
+  linkedin: `${SUPABASE_ICONS}/linkedin.icon.a1.svg`,
+  microsoft: `${SUPABASE_ICONS}/microsoft.icon.a1.svg`,
+  outlook: `${SUPABASE_ICONS}/outlook.icon.a2.svg`,
+  salesforce: `${SUPABASE_ICONS}/salesforce.icon.a1.svg`,
+  slack: `${SUPABASE_ICONS}/slack.icon.a1.svg`,
+  zendesk: `${SUPABASE_ICONS}/zendesk.icon.a1.svg`,
+} as const;

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/prototype/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @handled-ai/design-system/prototype
+ * Prototype template system (transitively depends on charts)
+ */
+export * from "./prototype-config"
+export * from "./prototype-shell"
+export * from "./prototype-inbox-view"
+export * from "./prototype-insights-view"
+export * from "./prototype-accounts-view"
+export * from "./prototype-admin-view"
+export * from "./prototype-work-queue-view"

package/src/prototype/prototype-accounts-view.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "../components/button"
+import { Badge } from "../components/badge"
+import { DataTable } from "../components/data-table"
+import type { AccountsViewConfig, AccountFilterTab } from "./prototype-config"
+import type { DataRow } from "../components/data-table"
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface PrototypeAccountsViewProps extends AccountsViewConfig {
+  headerActions?: React.ReactNode
+  onRowClick?: (row: DataRow) => void
+}
+
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+
+const DEFAULT_FILTER_TABS: AccountFilterTab[] = [
+  { label: "All Accounts", count: 6, variant: "default" },
+  { label: "Needs Attention", count: 11, variant: "attention" },
+  { label: "Recent", count: 7, variant: "ghost" },
+]
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function PrototypeAccountsView({
+  filterTabs,
+  headerActions,
+  onRowClick,
+  rows,
+  filterCategories,
+  quickViews,
+  moreQuickViews,
+  quickViewFilters,
+  iconMap,
+  entityUrlBuilder,
+  onScoreFactorFeedback,
+  onScoreApproveFeedback,
+  onScoreDismissFeedback,
+}: PrototypeAccountsViewProps) {
+  const tabs = filterTabs ?? DEFAULT_FILTER_TABS
+
+  return (
+    <div className="flex flex-col h-full w-full bg-background relative">
+      {headerActions && (
+        <div className="absolute top-4 right-4 z-10">{headerActions}</div>
+      )}
+
+      <div className="px-4 py-3 border-b border-border flex items-center gap-2 overflow-x-auto shrink-0 mt-2">
+        {tabs.map((tab, i) => {
+          if (tab.variant === "attention") {
+            return (
+              <Button key={i} size="sm" className="h-7 text-xs rounded-md bg-emerald-600 hover:bg-emerald-700 text-white font-medium">
+                {tab.label}
+                {tab.count != null && (
+                  <Badge variant="secondary" className="ml-2 h-4 px-1.5 text-[10px] bg-white/20 text-white border-transparent">
+                    {tab.count}
+                  </Badge>
+                )}
+              </Button>
+            )
+          }
+          if (tab.variant === "ghost") {
+            return (
+              <Button key={i} variant="ghost" size="sm" className="h-7 text-xs rounded-md border border-border bg-transparent font-medium">
+                {tab.label}
+                {tab.count != null && (
+                  <Badge variant="secondary" className="ml-2 h-4 px-1.5 text-[10px]">
+                    {tab.count}
+                  </Badge>
+                )}
+              </Button>
+            )
+          }
+          return (
+            <Button key={i} variant="secondary" size="sm" className="h-7 text-xs rounded-md bg-muted font-medium">
+              {tab.label}
+              {tab.count != null && (
+                <Badge variant="outline" className="ml-2 h-4 px-1.5 text-[10px]">
+                  {tab.count}
+                </Badge>
+              )}
+            </Button>
+          )
+        })}
+      </div>
+
+      <div className="flex-1 overflow-auto">
+        <DataTable
+          onRowClick={onRowClick}
+          rows={rows}
+          filterCategories={filterCategories}
+          quickViews={quickViews}
+          moreQuickViews={moreQuickViews}
+          quickViewFilters={quickViewFilters}
+          iconMap={iconMap}
+          entityUrlBuilder={entityUrlBuilder}
+          onScoreFactorFeedback={onScoreFactorFeedback}
+          onScoreApproveFeedback={onScoreApproveFeedback}
+          onScoreDismissFeedback={onScoreDismissFeedback}
+        />
+      </div>
+    </div>
+  )
+}

package/src/prototype/prototype-admin-view.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import * as React from "react"
+import { Settings } from "lucide-react"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../components/tabs"
+import type { AdminViewConfig } from "./prototype-config"
+
+export interface PrototypeAdminViewProps extends AdminViewConfig {
+  headerActions?: React.ReactNode
+}
+
+export function PrototypeAdminView({
+  title = "Admin",
+  icon: Icon = Settings,
+  tabs,
+  defaultTab,
+  headerActions,
+}: PrototypeAdminViewProps) {
+  const resolvedDefault = defaultTab ?? tabs[0]?.id
+
+  if (!tabs.length) return null
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden bg-background">
+      <div className="shrink-0 border-b border-border bg-background">
+        <div className="flex items-center justify-between px-6 py-4">
+          <div className="flex items-center gap-2 text-lg font-bold text-foreground">
+            <Icon className="h-5 w-5" />
+            <span>{title}</span>
+          </div>
+          {headerActions}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto p-8">
+        <div className="mx-auto max-w-6xl">
+          <Tabs defaultValue={resolvedDefault} className="w-full space-y-8">
+            <div className="flex justify-start">
+              <TabsList className="h-9 rounded-lg border border-border/50 bg-muted/50 p-1">
+                {tabs.map((tab) => (
+                  <TabsTrigger
+                    key={tab.id}
+                    value={tab.id}
+                    className="gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+                  >
+                    {tab.icon && <tab.icon className="h-3.5 w-3.5" />}
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+
+            {tabs.map((tab) => (
+              <TabsContent
+                key={tab.id}
+                value={tab.id}
+                className="space-y-6 focus-visible:outline-none"
+              >
+                {tab.content}
+              </TabsContent>
+            ))}
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  )
+}