@handled-ai/design-system 0.8.0 → 0.9.0

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>
+  )
+}

package/src/prototype/prototype-config.ts

@@ -0,0 +1,243 @@
+import * as React from "react"
+import type { SidebarNavSection } from "../components/quick-action-sidebar-nav"
+import type { ScoreFactor } from "../components/score-breakdown"
+import type { SuggestedAction, SuggestedContact } from "../components/suggested-actions"
+import type { SourceDef } from "../components/detail-view"
+import type { InboxFilterCategory } from "../components/inbox-toolbar"
+import type { DataTableFilterCategory } from "../components/data-table-filter"
+import type { DataRow } from "../components/data-table"
+import type { MetricCardProps } from "../components/metric-card"
+import type {
+  PipelineStage,
+  PipelineStageMetrics,
+  PipelineStageTiming,
+} from "../charts/pipeline-overview"
+import type { TimelineEvent } from "../components/timeline-activity"
+import type { LucideIcon } from "lucide-react"
+
+// ---------------------------------------------------------------------------
+// Shared
+// ---------------------------------------------------------------------------
+
+export interface PrototypeBrandConfig {
+  name: string
+  logo?: string
+  assistantName?: string
+}
+
+export interface QueueItem {
+  id: string
+  title: string
+  details: string
+  statusColor: string
+  time: string
+  company: string
+  tag1: string
+}
+
+export interface SignalScoreData {
+  score: number
+  factors: ScoreFactor[]
+  whyNow: string
+  evidence: string[]
+  confidence: number
+  onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
+  onApproveFeedback?: (reasons: string[], detail: string) => void
+  onDismissFeedback?: (reasons: string[], detail: string) => void
+}
+
+// ---------------------------------------------------------------------------
+// Inbox
+// ---------------------------------------------------------------------------
+
+export interface InboxDetailSections {
+  signalBrief?: boolean
+  suggestedActions?: boolean
+  timeline?: boolean
+}
+
+export interface InboxViewConfig {
+  items: QueueItem[]
+  filterCategories?: InboxFilterCategory[]
+  detailSections?: InboxDetailSections
+  accountContacts?: SuggestedContact[]
+  buildAccountContacts?: (item: QueueItem) => SuggestedContact[]
+  emailSignature?: string | React.ReactNode
+  buildSuggestedActions?: (item: QueueItem) => SuggestedAction[]
+  buildSourceItems?: (item: QueueItem) => SourceDef[]
+  getSignalScore?: (company: string) => SignalScoreData
+  getTimelineEvents?: (item: QueueItem) => TimelineEvent[]
+  iconMap?: Record<string, string>
+  hideToolbarActions?: boolean
+  hideHoverActions?: boolean
+  onSuggestedActionFeedback?: (actionId: number | string, feedback: string, actionTitle?: string) => void
+  buildEntityChips?: (item: QueueItem) => Array<{ id: string; label: string; avatarLetter: string; onClick?: () => void }>
+  quickFilterTabs?: Array<{ id: string; label: string; matchValue?: string; count?: number }>
+  hideAccountsButton?: boolean
+  accountDetailsLabel?: string
+  signalLabels?: {
+    approveButton?: string
+    dismissButton?: string
+    approvedStatus?: string
+    dismissedStatus?: string
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Insights
+// ---------------------------------------------------------------------------
+
+export interface InsightsCustomTab {
+  id: string
+  label: string
+  icon?: React.ComponentType<{ className?: string }>
+  content: React.ReactNode
+}
+
+export interface InsightsViewConfig {
+  customTabs?: InsightsCustomTab[]
+  tabs?: {
+    overview?: boolean
+    analytics?: boolean
+  }
+  coaching?: {
+    enabled?: boolean
+    message?: string
+  }
+  metrics?: MetricCardProps[]
+  expandedMetrics?: MetricCardProps[]
+  dashboardCards?: {
+    topTasks?: boolean
+    upcomingMeetings?: boolean
+    recentlyCompleted?: boolean
+    checkIns?: boolean
+  }
+  analytics?: {
+    pipeline?: {
+      stages: PipelineStage[]
+      stageMetrics: Record<string, PipelineStageMetrics>
+      stageTimings: (PipelineStageTiming | null)[]
+      filterBreakdowns?: Record<
+        string,
+        Record<string, Record<string, number>>
+      >
+    }
+    volumeChart?: {
+      data: Record<string, unknown>[]
+      dataKeys: Array<{ key: string; color: string }>
+      filterOptions?: Array<{ label: string; value: string }>
+    }
+    donutChart?: {
+      data: Array<{ name: string; value: number; color: string }>
+      centerLabel?: number
+    }
+    trendChart?: {
+      data: Record<string, unknown>[]
+      series: Array<{ dataKey: string; color: string }>
+      xAxisKey?: string
+      height?: number
+      toggleOptions?: string[]
+    }
+    barChart?: {
+      data: Record<string, unknown>[]
+      bars: Array<{
+        dataKey: string
+        color: string
+        name: string
+        icon?: LucideIcon
+      }>
+    }
+    barList?: {
+      data: Array<{ name: string; value: number }>
+      valueFormatter?: (v: number) => string
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Accounts
+// ---------------------------------------------------------------------------
+
+export interface AccountFilterTab {
+  label: string
+  count?: number
+  variant?: "default" | "attention" | "ghost"
+}
+
+export interface AccountsViewConfig {
+  filterTabs?: AccountFilterTab[]
+  rows?: DataRow[]
+  filterCategories?: DataTableFilterCategory[]
+  quickViews?: string[]
+  moreQuickViews?: string[]
+  quickViewFilters?: Record<string, (row: DataRow) => boolean>
+  iconMap?: { salesforce?: string }
+  entityUrlBuilder?: (row: DataRow) => string
+  onScoreFactorFeedback?: (account: string, scoreType: string, factorKey: string, type: "up" | "down" | null, detail?: string) => void
+  onScoreApproveFeedback?: (account: string, scoreType: string, reasons: string[], detail: string) => void
+  onScoreDismissFeedback?: (account: string, scoreType: string, reasons: string[], detail: string) => void
+}
+
+// ---------------------------------------------------------------------------
+// Work Queue
+// ---------------------------------------------------------------------------
+
+export interface WorkQueueViewConfig {
+  // Extensible – ItemList manages its own data internally for now.
+  [key: string]: unknown
+}
+
+// ---------------------------------------------------------------------------
+// Admin
+// ---------------------------------------------------------------------------
+
+export interface AdminTab {
+  id: string
+  label: string
+  icon?: React.ComponentType<{ className?: string }>
+  content: React.ReactNode
+}
+
+export interface AdminViewConfig {
+  /** View title displayed in the header. Defaults to "Admin". */
+  title?: string
+  /** Icon displayed next to the title. */
+  icon?: React.ComponentType<{ className?: string }>
+  tabs: AdminTab[]
+  /** Which tab is active initially. Defaults to first tab's id. */
+  defaultTab?: string
+}
+
+// ---------------------------------------------------------------------------
+// Entity Panel
+// ---------------------------------------------------------------------------
+
+export interface EntityPanelSection {
+  type: "details" | "contacts" | "recentActivity" | "connectedApps" | "systemActivity"
+  props?: Record<string, unknown>
+}
+
+export interface EntityPanelConfig {
+  sections?: EntityPanelSection[]
+  icons?: Record<string, string>
+}
+
+// ---------------------------------------------------------------------------
+// Top-level config
+// ---------------------------------------------------------------------------
+
+export interface PrototypeConfig {
+  brand?: PrototypeBrandConfig
+  sidebar: SidebarNavSection[]
+  views: {
+    inbox?: InboxViewConfig
+    insights?: InsightsViewConfig
+    accounts?: AccountsViewConfig
+    workQueue?: WorkQueueViewConfig
+    admin?: AdminViewConfig
+  }
+  defaultView: string
+  entityPanel?: EntityPanelConfig
+  /** Sidebar item IDs that trigger view navigation. Defaults to keys of `views`. */
+  navigableViews?: string[]
+}