@handled-ai/design-system 0.8.0 → 0.9.0

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

@@ -0,0 +1,124 @@
+"use client"
+
+import * as React from "react"
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type SortingState,
+} from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ArrowUpDown, SearchX } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+export interface SimpleDataTableProps<TData> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: ColumnDef<TData, any>[]
+  data: TData[]
+  onRowClick?: (row: TData) => void
+  emptyIcon?: React.ReactNode
+  emptyMessage?: string
+  emptyDescription?: string
+  className?: string
+}
+
+export function SimpleDataTable<TData>({
+  columns,
+  data,
+  onRowClick,
+  emptyIcon,
+  emptyMessage = "No rows found",
+  emptyDescription = "Try adjusting your filters",
+  className,
+}: SimpleDataTableProps<TData>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+
+  return (
+    <div className={cn("w-full", className)}>
+      <table className="w-full border-collapse text-sm">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr
+              key={headerGroup.id}
+              className="border-b border-border/50 hover:bg-transparent"
+            >
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className="h-9 px-3 text-left align-middle text-xs font-medium text-muted-foreground whitespace-nowrap"
+                >
+                  {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-0 group-hover:opacity-50" />
+                      )}
+                    </button>
+                  ) : (
+                    flexRender(header.column.columnDef.header, header.getContext())
+                  )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.length > 0 ? (
+            table.getRowModel().rows.map((row) => (
+              <tr
+                key={row.id}
+                onClick={() => onRowClick?.(row.original)}
+                className={cn(
+                  "group border-none transition-colors",
+                  onRowClick && "cursor-pointer",
+                )}
+              >
+                {row.getVisibleCells().map((cell, cellIdx) => (
+                  <td
+                    key={cell.id}
+                    className={cn(
+                      "px-3 py-3 align-middle whitespace-nowrap group-hover:bg-muted/50",
+                      cellIdx === 0 && "rounded-l-lg",
+                      cellIdx === row.getVisibleCells().length - 1 && "rounded-r-lg",
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td colSpan={columns.length} className="h-52 px-4 text-center">
+                <div className="flex flex-col items-center gap-1 text-muted-foreground">
+                  {emptyIcon ?? <SearchX className="h-7 w-7 opacity-40" />}
+                  <p className="text-sm font-medium">{emptyMessage}</p>
+                  <p className="text-xs">{emptyDescription}</p>
+                </div>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/components/skeleton.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/status-badge.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export type StatusType = "success" | "warning" | "error" | "neutral"
+
+export interface StatusBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  status: string
+  statusMap?: Record<string, StatusType>
+}
+
+const DEFAULT_STATUS_MAP: Record<string, StatusType> = {}
+
+const STATUS_KEYWORDS: Record<StatusType, string[]> = {
+  success: ["active", "hired", "completed", "success", "shortlist", "approved", "resolved", "done"],
+  warning: ["pending", "new", "scheduled", "screening", "draft", "paused", "in_progress", "review"],
+  error: ["rejected", "failed", "cancelled", "error", "no_answer", "dropped", "blocked"],
+  neutral: [],
+}
+
+function inferStatusType(status: string, statusMap: Record<string, StatusType>): StatusType {
+  const lower = status.toLowerCase()
+  if (statusMap[lower]) return statusMap[lower]
+
+  for (const [type, keywords] of Object.entries(STATUS_KEYWORDS) as [StatusType, string[]][]) {
+    if (keywords.some((kw) => lower.includes(kw))) return type
+  }
+
+  return "neutral"
+}
+
+const STATUS_STYLES: Record<StatusType, string> = {
+  success: "bg-green-100 text-green-950 dark:bg-green-950 dark:text-green-100",
+  warning: "bg-yellow-100 text-yellow-950 dark:bg-yellow-950 dark:text-yellow-100",
+  error: "bg-red-100 text-red-950 dark:bg-red-950 dark:text-red-100",
+  neutral: "bg-muted text-foreground",
+}
+
+function formatStatus(status: string): string {
+  return status
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ")
+}
+
+export function StatusBadge({ status, statusMap = DEFAULT_STATUS_MAP, className, ...props }: StatusBadgeProps) {
+  const type = inferStatusType(status, statusMap)
+  return (
+    <div
+      data-slot="status-badge"
+      data-status={type}
+      className={cn(
+        "inline-flex items-center justify-center rounded-full px-2.5 h-6 text-xs font-medium transition-colors",
+        STATUS_STYLES[type],
+        className
+      )}
+      {...props}
+    >
+      {formatStatus(status)}
+    </div>
+  )
+}

package/src/components/styled-bar-list.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+export interface StyledBarItem {
+  name: string
+  value: number
+  href?: string
+  subtitle?: string
+}
+
+export interface StyledBarListProps {
+  data: StyledBarItem[]
+  valueFormatter?: (value: number) => string
+  className?: string
+  showAnimation?: boolean
+  showSubtitle?: boolean
+  barColor?: string
+  barStyle?: React.CSSProperties
+}
+
+export function StyledBarList({
+  data,
+  valueFormatter = (value) => value.toString(),
+  className,
+  showAnimation = true,
+  showSubtitle = false,
+  barColor = "bg-emerald-500/30",
+  barStyle,
+}: StyledBarListProps) {
+  const maxValue = Math.max(...data.map((item) => item.value))
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {data.map((item, index) => {
+        const percentage = (item.value / maxValue) * 100
+
+        return (
+          <div key={index} className={showSubtitle ? "space-y-1" : ""}>
+            <div className="relative h-9 overflow-hidden rounded-md">
+              <div
+                className={cn(
+                  "absolute inset-y-0 left-0 rounded-md",
+                  !barStyle && barColor,
+                  showAnimation && "transition-all duration-300",
+                )}
+                style={{ width: `${percentage}%`, ...(barStyle || {}) }}
+              />
+              <div className="relative flex h-full items-center justify-between px-3">
+                <span className="truncate pr-2 text-sm font-medium text-foreground">
+                  {item.name}
+                </span>
+                <span className="ml-auto shrink-0 text-sm font-semibold text-foreground">
+                  {valueFormatter(item.value)}
+                </span>
+              </div>
+            </div>
+            {showSubtitle && item.subtitle ? (
+              <div className="pl-3 text-xs text-muted-foreground">
+                {item.subtitle}
+              </div>
+            ) : null}
+          </div>
+        )
+      })}
+    </div>
+  )
+}