@fayz-ai/ui 0.9.0 → 0.10.0

package/src/dashboard/OnboardingWidget.tsx

@@ -1,140 +0,0 @@
-import * as React from 'react'
-import { Check, Circle } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../primitives/card'
-import { Button } from '../primitives/button'
-import { Skeleton } from '../primitives/skeleton'
-import { renderIcon } from './icon'
-import type { IconRef } from './types'
-
-export interface OnboardingStepInput {
-  id: string
-  title: string
-  description?: string
-  icon?: IconRef
-  /** Async check: resolves true when the step is already complete. */
-  check?: () => Promise<boolean>
-  /** Pre-resolved completion (takes precedence over `check`). */
-  done?: boolean
-  /** Route string (uses onNavigate) or a callback. */
-  action?: string | (() => void)
-  actionLabel?: string
-}
-
-export interface OnboardingWidgetProps {
-  title?: string
-  subtitle?: string
-  steps: OnboardingStepInput[]
-  onNavigate?: (path: string) => void
-  /** Hide the whole widget once every step is complete. Default: true. */
-  hideWhenComplete?: boolean
-  className?: string
-}
-
-/** Placeholder mirroring the widget's layout while the async checks resolve. */
-function OnboardingSkeleton({ rows, className }: { rows: number; className?: string }) {
-  return (
-    <Card className={className} aria-busy="true">
-      <CardHeader>
-        <Skeleton className="h-5 w-40" />
-        <Skeleton className="mt-1.5 h-3.5 w-64 max-w-full" />
-        <div className="mt-2 flex items-center gap-3">
-          <Skeleton className="h-1.5 flex-1 rounded-full" />
-          <Skeleton className="h-3 w-8" />
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-1 pt-0">
-        {Array.from({ length: Math.max(rows, 1) }).map((_, i) => (
-          <div key={i} className="flex items-center gap-3 px-2 py-2.5">
-            <Skeleton className="h-7 w-7 shrink-0 rounded-full" />
-            <div className="min-w-0 flex-1 space-y-1.5">
-              <Skeleton className="h-3.5 w-1/2" />
-              <Skeleton className="h-3 w-3/4" />
-            </div>
-          </div>
-        ))}
-      </CardContent>
-    </Card>
-  )
-}
-
-/** Getting-started checklist ("first steps to set up") with progress. */
-export function OnboardingWidget({
-  title = 'Getting started', subtitle, steps, onNavigate, hideWhenComplete = true, className,
-}: OnboardingWidgetProps) {
-  const [completed, setCompleted] = React.useState<Record<string, boolean>>(() =>
-    Object.fromEntries(steps.map((s) => [s.id, Boolean(s.done)])),
-  )
-  // Async checks start unresolved: don't paint until they settle, or an
-  // already-onboarded tenant flashes the checklist for the query round-trip
-  // before allDone hides it (mount → visible 0/N → resolve → null).
-  const [resolved, setResolved] = React.useState(() => steps.every((s) => s.done != null || !s.check))
-
-  React.useEffect(() => {
-    let cancelled = false
-    Promise.all(steps.map(async (s) => {
-      if (s.done != null) return [s.id, s.done] as const
-      if (!s.check) return [s.id, false] as const
-      try { return [s.id, await s.check()] as const } catch { return [s.id, false] as const }
-    })).then((entries) => {
-      if (cancelled) return
-      setCompleted(Object.fromEntries(entries))
-      setResolved(true)
-    })
-    return () => { cancelled = true }
-  }, [steps])
-
-  const doneCount = steps.filter((s) => completed[s.id]).length
-  const allDone = doneCount === steps.length
-  // Hold the card's real shape while the checks settle. Painting the resolved
-  // checklist here would flash 0/N at an already-onboarded tenant, and painting
-  // nothing collapsed the row and shifted the dashboard on resolve.
-  if (!resolved) return <OnboardingSkeleton rows={steps.length} className={className} />
-  if (allDone && hideWhenComplete) return null
-
-  const runAction = (action: OnboardingStepInput['action']) => {
-    if (!action) return
-    if (typeof action === 'string') onNavigate?.(action)
-    else action()
-  }
-
-  return (
-    <Card className={className}>
-      <CardHeader>
-        <CardTitle>{title}</CardTitle>
-        {subtitle ? <CardDescription>{subtitle}</CardDescription> : null}
-        <div className="mt-2 flex items-center gap-3">
-          <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
-            <div className="h-full rounded-full bg-primary transition-all"
-              style={{ width: `${steps.length ? (doneCount / steps.length) * 100 : 0}%` }} />
-          </div>
-          <span className="text-xs font-medium text-muted-foreground">{doneCount}/{steps.length}</span>
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-1 pt-0">
-        {steps.map((step) => {
-          const isDone = completed[step.id]
-          return (
-            <div key={step.id} className="flex items-center gap-3 rounded-lg px-2 py-2.5 hover:bg-muted/50">
-              <span className={cn(
-                'flex h-7 w-7 shrink-0 items-center justify-center rounded-full',
-                isDone ? 'bg-emerald-100 text-emerald-600' : 'bg-muted text-muted-foreground',
-              )}>
-                {isDone ? <Check className="h-4 w-4" /> : (renderIcon(step.icon, 'h-4 w-4') ?? <Circle className="h-4 w-4" />)}
-              </span>
-              <div className="min-w-0 flex-1">
-                <p className={cn('text-sm font-medium', isDone && 'text-muted-foreground line-through')}>{step.title}</p>
-                {step.description ? <p className="truncate text-xs text-muted-foreground">{step.description}</p> : null}
-              </div>
-              {!isDone && step.action ? (
-                <Button size="sm" variant="outline" onClick={() => runAction(step.action)}>
-                  {step.actionLabel ?? 'Start'}
-                </Button>
-              ) : null}
-            </div>
-          )
-        })}
-      </CardContent>
-    </Card>
-  )
-}

package/src/dashboard/TableWidget.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { Card, CardContent, CardHeader, CardTitle } from '../primitives/card'
-import { DataTable } from '../primitives/data-table'
-import { renderIcon } from './icon'
-import type { IconRef } from './types'
-
-export interface TableWidgetProps<TData> {
-  title?: string
-  icon?: IconRef
-  columns: ColumnDef<TData, unknown>[]
-  data: TData[]
-  loading?: boolean
-  emptyMessage?: string
-  onRowClick?: (row: TData) => void
-  /** Right-aligned header content (e.g. a "view all" link). */
-  headerAction?: React.ReactNode
-  className?: string
-}
-
-/** "Recent N" table in a Card — wraps the shared DataTable primitive. */
-export function TableWidget<TData>({
-  title, icon, columns, data, loading, emptyMessage, onRowClick, headerAction, className,
-}: TableWidgetProps<TData>) {
-  return (
-    <Card className={className}>
-      {(title || headerAction) && (
-        <CardHeader className="flex-row items-center justify-between space-y-0">
-          {title ? (
-            <CardTitle className="flex items-center gap-2">
-              {renderIcon(icon)}
-              {title}
-            </CardTitle>
-          ) : <span />}
-          {headerAction}
-        </CardHeader>
-      )}
-      <CardContent className="p-0">
-        <DataTable
-          columns={columns}
-          data={data}
-          loading={loading}
-          emptyMessage={emptyMessage}
-          onRowClick={onRowClick}
-          variant="flat"
-          compact
-        />
-      </CardContent>
-    </Card>
-  )
-}

package/src/dashboard/define.ts

@@ -1,53 +0,0 @@
-import type { DashboardWidgetDef, DashboardWidgetKind, DashboardSurface } from '@fayz-ai/core'
-
-// ---------------------------------------------------------------------------
-// Widget-definition builders. Each sets the right `kind` + default `span` so a
-// plugin author writes data, not layout. The widget's component renders the
-// presentational primitives (KpiCard, ChartWidget, TableWidget, ...).
-// ---------------------------------------------------------------------------
-
-export interface DefineWidgetInput {
-  id: string
-  title: string
-  component: React.ComponentType<unknown>
-  description?: string
-  icon?: string
-  domain?: string
-  span?: 1 | 2 | 3 | 4
-  defaultVisible?: boolean
-  defaultOrder?: number
-  surfaces?: DashboardSurface[]
-  verticalId?: DashboardWidgetDef['verticalId']
-  permission?: DashboardWidgetDef['permission']
-  props?: Record<string, unknown>
-}
-
-function build(kind: DashboardWidgetKind, defaultSpan: 1 | 2 | 3 | 4, input: DefineWidgetInput): DashboardWidgetDef {
-  return {
-    kind,
-    span: input.span ?? defaultSpan,
-    defaultVisible: input.defaultVisible ?? true,
-    id: input.id,
-    title: input.title,
-    description: input.description,
-    icon: input.icon,
-    domain: input.domain,
-    defaultOrder: input.defaultOrder,
-    surfaces: input.surfaces,
-    verticalId: input.verticalId,
-    permission: input.permission,
-    component: input.component,
-    props: input.props,
-  }
-}
-
-/** KPI card widget — spans 1 column (forms the 4-up top row). */
-export const defineKpiWidget = (input: DefineWidgetInput): DashboardWidgetDef => build('kpi', 1, input)
-/** Chart widget — spans 2 columns by default. */
-export const defineChartWidget = (input: DefineWidgetInput): DashboardWidgetDef => build('chart', 2, input)
-/** Table widget — spans the full row by default. */
-export const defineTableWidget = (input: DefineWidgetInput): DashboardWidgetDef => build('table', 4, input)
-/** Onboarding checklist widget — spans half the row (2 cols) by default. */
-export const defineOnboardingWidget = (input: DefineWidgetInput): DashboardWidgetDef => build('onboarding', 2, input)
-/** Custom client-provided widget — spans 2 columns by default. */
-export const defineCustomWidget = (input: DefineWidgetInput): DashboardWidgetDef => build('custom', 2, input)

package/src/dashboard/icon.ts

@@ -1,13 +0,0 @@
-import * as React from 'react'
-import { getLucideIcon } from '../icons'
-import type { IconRef } from './types'
-
-/** Resolve an IconRef (lucide name or component) to a renderable element. */
-export function renderIcon(icon: IconRef | undefined, className = 'h-4 w-4'): React.ReactNode {
-  if (!icon) return null
-  if (typeof icon === 'string') {
-    const Comp = getLucideIcon(icon)
-    return Comp ? React.createElement(Comp, { className }) : null
-  }
-  return React.createElement(icon, { className })
-}

package/src/dashboard/index.ts

@@ -1,38 +0,0 @@
-// Dashboard widget kit — rendering engine + presentational primitives + builders.
-export {
-  DashboardCanvas,
-  WidgetGrid,
-  DashboardNavigateProvider,
-  useDashboardNavigate,
-  type DashboardCanvasProps,
-} from './DashboardCanvas'
-export { resolveDashboardLayout, type LaidOutWidget } from './layout'
-export { useDashboardPreferences, type DashboardPreferencesState } from './preferences'
-export { DashboardCustomizeMenu, type DashboardCustomizeMenuProps } from './DashboardCustomizeMenu'
-export { DashboardGrid, type DashboardGridItem, type DashboardGridProps } from './DashboardGrid'
-export { GoldCard, type GoldCardProps } from './GoldCard'
-export {
-  DashboardRangeProvider,
-  DashboardRangeControl,
-  useDashboardRange,
-  DEFAULT_RANGE_OPTIONS,
-  type DashboardRange,
-  type DashboardRangeProviderProps,
-} from './DashboardRange'
-export type { DashboardRangeOptions } from './DashboardCanvas'
-export { KpiCard, formatKpiValue, type KpiCardProps } from './KpiCard'
-export { ChartWidget, type ChartWidgetProps } from './ChartWidget'
-export { TableWidget, type TableWidgetProps } from './TableWidget'
-export { OnboardingWidget, type OnboardingStepInput, type OnboardingWidgetProps } from './OnboardingWidget'
-export { renderIcon } from './icon'
-export {
-  defineKpiWidget,
-  defineChartWidget,
-  defineTableWidget,
-  defineOnboardingWidget,
-  defineCustomWidget,
-  type DefineWidgetInput,
-} from './define'
-export type {
-  KpiFormat, KpiTrend, KpiValue, KpiCurrency, IconRef, ChartType, ChartSeries,
-} from './types'

package/src/dashboard/layout.ts

@@ -1,50 +0,0 @@
-import type { DashboardLayoutConfig, DashboardWidgetDef } from '@fayz-ai/core'
-
-export interface LaidOutWidget {
-  def: DashboardWidgetDef
-  /** Effective span after applying overrides (1–4). */
-  span: number
-  order: number
-}
-
-/**
- * Resolve the widgets to render on a surface, in order, applying three layers:
- *   1. registration defaults (defaultVisible / defaultOrder / span)
- *   2. app config (the app curates the home surface)
- *   3. user preferences (show/hide/reorder — read but currently empty)
- *
- * Later layers win. Returns only visible widgets, sorted by effective order.
- * Accepts any DashboardWidgetDef (registry-resolved or shim-built).
- */
-export function resolveDashboardLayout(
-  registered: DashboardWidgetDef[],
-  appConfig?: DashboardLayoutConfig,
-  userPrefs?: DashboardLayoutConfig,
-  /** When true, widgets are visible by default regardless of their
-   *  `defaultVisible` (used on a plugin-home to show everything; the global
-   *  home leaves this false so `defaultVisible:false` curates the start set). */
-  forceVisibleByDefault = false,
-): LaidOutWidget[] {
-  type Override = { visible?: boolean; order?: number; span?: number }
-  const overrides = new Map<string, Override>()
-  const merge = (cfg?: DashboardLayoutConfig) => {
-    for (const w of cfg?.widgets ?? []) {
-      overrides.set(w.id, { ...overrides.get(w.id), ...w })
-    }
-  }
-  merge(appConfig)
-  merge(userPrefs)
-
-  return registered
-    .map((def, index) => {
-      const o = overrides.get(def.id)
-      const baseVisible = forceVisibleByDefault ? true : (def.defaultVisible ?? true)
-      const visible = o?.visible ?? baseVisible
-      const order = o?.order ?? def.defaultOrder ?? index
-      const span = Math.min(Math.max(o?.span ?? def.span ?? 1, 1), 4)
-      return { def, visible, order, span }
-    })
-    .filter((x) => x.visible)
-    .sort((a, b) => a.order - b.order)
-    .map(({ def, span, order }) => ({ def, span, order }))
-}

package/src/dashboard/preferences.ts

@@ -1,71 +0,0 @@
-import * as React from 'react'
-import type { DashboardLayoutConfig, DashboardSurface } from '@fayz-ai/core'
-
-export interface DashboardPreferencesState {
-  /** User-level layout overrides for this surface (null when none saved). */
-  prefs: DashboardLayoutConfig | null
-  /** Persist updated overrides. */
-  save: (next: DashboardLayoutConfig) => void
-  /** Toggle a single widget's visibility and persist. */
-  setVisible: (widgetId: string, visible: boolean) => void
-  /** Clear all overrides (reset to registration + app defaults). */
-  reset: () => void
-}
-
-const KEY = (surface: DashboardSurface, scope: string) => `fayz.dashboard.prefs.${scope}.${surface}`
-
-function read(key: string): DashboardLayoutConfig | null {
-  if (typeof window === 'undefined') return null
-  try {
-    const raw = window.localStorage.getItem(key)
-    return raw ? (JSON.parse(raw) as DashboardLayoutConfig) : null
-  } catch {
-    return null
-  }
-}
-
-/**
- * Per-user dashboard preferences, persisted to localStorage.
- *
- * `scope` lets a plugin-home keep its own prefs separate from the global home
- * (pass the domain). A future pass can swap the storage for the tenant/plugin
- * binding store without touching callers — `resolveDashboardLayout` already
- * consumes whatever this returns as the `userPrefs` layer.
- */
-export function useDashboardPreferences(surface: DashboardSurface, scope = 'home'): DashboardPreferencesState {
-  const key = KEY(surface, scope)
-  const [prefs, setPrefs] = React.useState<DashboardLayoutConfig | null>(() => read(key))
-
-  // Re-read when the target surface/scope changes.
-  React.useEffect(() => { setPrefs(read(key)) }, [key])
-
-  const save = React.useCallback((next: DashboardLayoutConfig) => {
-    setPrefs(next)
-    if (typeof window !== 'undefined') {
-      try { window.localStorage.setItem(key, JSON.stringify(next)) } catch { /* ignore quota/availability */ }
-    }
-  }, [key])
-
-  const setVisible = React.useCallback((widgetId: string, visible: boolean) => {
-    setPrefs((cur) => {
-      const widgets = [...(cur?.widgets ?? [])]
-      const i = widgets.findIndex((w) => w.id === widgetId)
-      if (i >= 0) widgets[i] = { ...widgets[i]!, visible }
-      else widgets.push({ id: widgetId, visible })
-      const next = { ...cur, widgets }
-      if (typeof window !== 'undefined') {
-        try { window.localStorage.setItem(key, JSON.stringify(next)) } catch { /* ignore */ }
-      }
-      return next
-    })
-  }, [key])
-
-  const reset = React.useCallback(() => {
-    setPrefs(null)
-    if (typeof window !== 'undefined') {
-      try { window.localStorage.removeItem(key) } catch { /* ignore */ }
-    }
-  }, [key])
-
-  return { prefs, save, setVisible, reset }
-}

package/src/dashboard/types.ts

@@ -1,41 +0,0 @@
-import type React from 'react'
-
-// ---------------------------------------------------------------------------
-// Shared, dependency-free types for the dashboard widget kit. These mirror the
-// shapes in plugin-dashboard but live here so plugins can render widgets
-// without depending on plugin-dashboard.
-// ---------------------------------------------------------------------------
-
-export type KpiFormat = 'number' | 'currency' | 'percent' | 'duration'
-export type KpiTrend = 'up' | 'down' | 'neutral'
-
-export interface KpiValue {
-  value: number
-  /** Comparison value used to derive the trend chip. */
-  previousValue?: number
-  /** Unit suffix (e.g. 'min'). */
-  unit?: string
-  trend?: KpiTrend
-  /** Optional series (oldest → newest) rendered as an inline sparkline. */
-  spark?: number[]
-}
-
-export interface KpiCurrency {
-  code?: string
-  locale?: string
-  symbol?: string
-}
-
-/** A lucide icon name (resolved at render) or a React component. */
-export type IconRef = string | React.ComponentType<{ className?: string }>
-
-export type ChartType = 'line' | 'bar' | 'area' | 'pie'
-
-export interface ChartSeries {
-  /** Key into each data row. */
-  dataKey: string
-  /** Display label (legend/tooltip). */
-  label?: string
-  /** Explicit color; falls back to the theme palette. */
-  color?: string
-}

package/src/icons.ts

@@ -1,66 +0,0 @@
-import type { LucideIcon } from 'lucide-react'
-import {
-  Activity, AlertTriangle, Apple, ArrowDownCircle, ArrowDownRight, ArrowLeftRight, ArrowUpCircle, ArrowUpRight,
-  Award, BadgeDollarSign, Ban, Banknote, BarChart3, Bell, Bike, BookOpen,
-  BookOpenCheck, Box, Boxes, Briefcase, Building2, Calendar, CalendarCheck, CalendarCheck2,
-  CalendarClock, CalendarDays, CalendarPlus, CalendarX, Camera, Cat, Check, CheckCircle,
-  CheckSquare, ChefHat, ChevronsUpDown, Circle, CircleCheck, CircleDollarSign, Clapperboard, ClipboardList,
-  Clock, Clock3, Command, Compass, Contact, CreditCard, Disc3, Dog,
-  DollarSign, DoorOpen, Egg, ExternalLink, Eye, FileCheck2, FileDown,
-  FileText, Filter, Flame, FolderOpen, Globe, GraduationCap, Handshake, Heart,
-  Home, Image, Inbox, Instagram, Landmark, Layers, LayoutDashboard, LayoutTemplate,
-  Leaf, LeafyGreen, Link, List, ListChecks, ListMusic, ListPlus, Lock,
-  Mail, Map, MapPin, Megaphone, MessageCircle, MessageSquare, Mic, MoreHorizontal,
-  MousePointerClick, Music, Newspaper, Package, PackageCheck, Palette, PartyPopper, PawPrint,
-  Pencil, Percent, Phone, PieChart, Plug, Plus, PlusCircle, Puzzle, Radio,
-  Receipt, Repeat, RotateCcw, Ruler, Search, Send, Settings, Shield,
-  ShieldCheck, ShoppingBag, ShoppingCart, Sigma, SlidersHorizontal, Sparkles, Star, Tag,
-  Tags, Target, ToggleLeft, TreePalm, TrendingDown, TrendingUp, Trophy, Truck,
-  User, UserCheck, UserCog, UserPlus, UserX, Users, UsersRound, Utensils,
-  UtensilsCrossed, Wallet, Warehouse, Wheat, Workflow, Wrench, X, XCircle,
-  Zap,
-} from 'lucide-react'
-
-// ---------------------------------------------------------------------------
-// Central lucide icon registry. The SDK's manifest-driven surfaces resolve
-// icons by string name; a namespace import (`import * as LucideIcons`) defeats
-// tree-shaking and drags all ~1,500 icons (~500 KB min) into every bundle, so
-// the SDK ships this curated set instead — the union of every icon name the
-// SDK, plugins, and app templates reference. Apps using names outside the set
-// call registerIcons({ Name: Component }) with their own named imports.
-// ---------------------------------------------------------------------------
-
-const registry: Record<string, LucideIcon> = {
-  Activity, AlertTriangle, Apple, ArrowDownCircle, ArrowDownRight, ArrowLeftRight, ArrowUpCircle, ArrowUpRight,
-  Award, BadgeDollarSign, Ban, Banknote, BarChart3, Bell, Bike, BookOpen,
-  BookOpenCheck, Box, Boxes, Briefcase, Building2, Calendar, CalendarCheck, CalendarCheck2,
-  CalendarClock, CalendarDays, CalendarPlus, CalendarX, Camera, Cat, Check, CheckCircle,
-  CheckSquare, ChefHat, ChevronsUpDown, Circle, CircleCheck, CircleDollarSign, Clapperboard, ClipboardList,
-  Clock, Clock3, Command, Compass, Contact, CreditCard, Disc3, Dog,
-  DollarSign, DoorOpen, Egg, ExternalLink, Eye, FileCheck2, FileDown,
-  FileText, Filter, Flame, FolderOpen, Globe, GraduationCap, Handshake, Heart,
-  Home, Image, Inbox, Instagram, Landmark, Layers, LayoutDashboard, LayoutTemplate,
-  Leaf, LeafyGreen, Link, List, ListChecks, ListMusic, ListPlus, Lock,
-  Mail, Map, MapPin, Megaphone, MessageCircle, MessageSquare, Mic, MoreHorizontal,
-  MousePointerClick, Music, Newspaper, Package, PackageCheck, Palette, PartyPopper, PawPrint,
-  Pencil, Percent, Phone, PieChart, Plug, Plus, PlusCircle, Puzzle, Radio,
-  Receipt, Repeat, RotateCcw, Ruler, Search, Send, Settings, Shield,
-  ShieldCheck, ShoppingBag, ShoppingCart, Sigma, SlidersHorizontal, Sparkles, Star, Tag,
-  Tags, Target, ToggleLeft, TreePalm, TrendingDown, TrendingUp, Trophy, Truck,
-  User, UserCheck, UserCog, UserPlus, UserX, Users, UsersRound, Utensils,
-  UtensilsCrossed, Wallet, Warehouse, Wheat, Workflow, Wrench, X, XCircle,
-  Zap,
-}
-
-/** Add or override icons resolvable by string name (e.g. from app manifests). */
-export function registerIcons(icons: Record<string, LucideIcon>): void {
-  Object.assign(registry, icons)
-}
-
-/** Resolve a lucide icon by name; undefined when not registered. */
-export function getLucideIcon(name: string): LucideIcon | undefined {
-  return registry[name]
-}
-
-/** The registered icon map (live reference — do not mutate directly). */
-export const ICON_MAP = registry