@handled-ai/design-system 0.8.0 → 0.9.0

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

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { ListFilter, Search } from "lucide-react"
+
+import { Button } from "./button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+
+export interface DataTableFilterCategory {
+  id: string
+  label: string
+  icon: React.ComponentType<{ className?: string }>
+  options: string[]
+}
+
+interface DataTableFilterProps {
+  categories: DataTableFilterCategory[]
+  selectedFilters: Record<string, string[]>
+  onToggleFilter: (categoryId: string, option: string) => void
+}
+
+export function DataTableFilter({
+  categories,
+  selectedFilters,
+  onToggleFilter,
+}: DataTableFilterProps) {
+  const [query, setQuery] = React.useState("")
+
+  const visibleCategories = React.useMemo(() => {
+    const normalized = query.trim().toLowerCase()
+    if (!normalized) {
+      return categories
+    }
+
+    return categories.filter((category) => {
+      if (category.label.toLowerCase().includes(normalized)) {
+        return true
+      }
+
+      return category.options.some((option) =>
+        option.toLowerCase().includes(normalized)
+      )
+    })
+  }, [categories, query])
+
+  const activeCount = React.useMemo(
+    () =>
+      Object.values(selectedFilters).reduce(
+        (count, selected) => count + selected.length,
+        0
+      ),
+    [selectedFilters]
+  )
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50"
+        >
+          <ListFilter className="h-3.5 w-3.5" />
+          Filter
+          {activeCount > 0 ? (
+            <span className="rounded bg-muted px-1.5 py-0 text-[10px] font-semibold">
+              {activeCount}
+            </span>
+          ) : null}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[240px] p-0">
+        <div className="sticky top-0 z-10 border-b border-border bg-popover p-2">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+            <input
+              className="h-8 w-full rounded-md bg-muted/50 py-1 pr-2 pl-7 text-xs outline-none transition-colors placeholder:text-muted-foreground/70 focus:bg-muted"
+              placeholder="Search filters..."
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={(event) => event.stopPropagation()}
+            />
+          </div>
+        </div>
+
+        <div className="max-h-[320px] overflow-y-auto p-1">
+          {visibleCategories.map((category) => (
+            <DropdownMenuSub key={category.id}>
+              <DropdownMenuSubTrigger className="cursor-pointer py-1.5 text-xs">
+                <category.icon className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
+                {category.label}
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="w-52 p-1">
+                {category.options.map((option) => {
+                  const selected =
+                    selectedFilters[category.id]?.includes(option) ?? false
+
+                  return (
+                    <DropdownMenuItem
+                      key={option}
+                      className="cursor-pointer justify-between text-xs"
+                      onSelect={(event) => {
+                        event.preventDefault()
+                        onToggleFilter(category.id, option)
+                      }}
+                    >
+                      {option}
+                      {selected ? (
+                        <span className="text-[10px] font-semibold text-brand-purple">
+                          Applied
+                        </span>
+                      ) : null}
+                    </DropdownMenuItem>
+                  )
+                })}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          ))}
+
+          {visibleCategories.length === 0 ? (
+            <div className="p-2 text-center text-xs text-muted-foreground">
+              No filters found
+            </div>
+          ) : null}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/data-table-quick-views.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown, X } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+
+export type DataTableQuickViewValue = string | null
+
+interface DataTableQuickViewsProps {
+  quickViews: string[]
+  moreViews: string[]
+  activeView: DataTableQuickViewValue
+  onViewChange: (next: DataTableQuickViewValue) => void
+  className?: string
+}
+
+export function DataTableQuickViews({
+  quickViews,
+  moreViews,
+  activeView,
+  onViewChange,
+  className,
+}: DataTableQuickViewsProps) {
+  const isMoreActive = Boolean(activeView && moreViews.includes(activeView))
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 overflow-x-auto border-b border-border px-4 pb-3 pt-2",
+        className
+      )}
+    >
+      <span className="mr-1 shrink-0 text-xs font-medium text-muted-foreground/80">
+        Quick views:
+      </span>
+
+      {quickViews.map((view) => {
+        const isActive = activeView === view
+        return (
+          <button
+            key={view}
+            onClick={() => onViewChange(isActive ? null : view)}
+            className={cn(
+              "whitespace-nowrap rounded-full border px-3 py-1 text-xs transition-colors",
+              isActive
+                ? "border-brand-purple/30 bg-brand-purple/10 font-medium text-brand-purple"
+                : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground"
+            )}
+          >
+            {view}
+          </button>
+        )
+      })}
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            className={cn(
+              "flex items-center gap-1 whitespace-nowrap rounded-full border px-3 py-1 text-xs transition-colors",
+              isMoreActive
+                ? "border-brand-purple/30 bg-brand-purple/10 font-medium text-brand-purple"
+                : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground"
+            )}
+          >
+            {isMoreActive ? activeView : "More..."}
+            <ChevronDown className="h-3 w-3 opacity-60" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-56">
+          {moreViews.map((view) => (
+            <DropdownMenuItem
+              key={view}
+              className={cn(
+                "cursor-pointer text-xs",
+                activeView === view && "bg-brand-purple/5 font-medium text-brand-purple"
+              )}
+              onSelect={() => onViewChange(view)}
+            >
+              {view}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {activeView ? (
+        <button
+          onClick={() => onViewChange(null)}
+          className="ml-auto flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          <X className="h-3 w-3" />
+          Clear
+        </button>
+      ) : null}
+    </div>
+  )
+}

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

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import type { SortingState } from "@tanstack/react-table"
+
+import {
+  DataTableFilter,
+  type DataTableFilterCategory,
+} from "./data-table-filter"
+import {
+  DataTableDisplay,
+  type DataTableDisplayColumn,
+} from "./data-table-display"
+
+interface DataTableToolbarProps {
+  categories: DataTableFilterCategory[]
+  selectedFilters: Record<string, string[]>
+  onToggleFilter: (categoryId: string, option: string) => void
+  sorting: SortingState
+  onSortingChange: (next: SortingState) => void
+  displayColumns: DataTableDisplayColumn[]
+  onToggleColumn: (columnId: string) => void
+  onResetDisplay: () => void
+}
+
+export function DataTableToolbar({
+  categories,
+  selectedFilters,
+  onToggleFilter,
+  sorting,
+  onSortingChange,
+  displayColumns,
+  onToggleColumn,
+  onResetDisplay,
+}: DataTableToolbarProps) {
+  return (
+    <div className="flex items-center justify-between gap-2 border-b border-border px-4 py-2">
+      <div className="flex items-center gap-2">
+        <DataTableFilter
+          categories={categories}
+          selectedFilters={selectedFilters}
+          onToggleFilter={onToggleFilter}
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <DataTableDisplay
+          sorting={sorting}
+          onSortingChange={onSortingChange}
+          columns={displayColumns}
+          onToggleColumn={onToggleColumn}
+          onReset={onResetDisplay}
+        />
+      </div>
+    </div>
+  )
+}