@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/src/components/workspace/ComponentRegistry.tsx

@@ -1,402 +0,0 @@
-import * as React from "react";
-import {
-  MetricCard,
-  TableCard,
-  ChartCard,
-  D3Chart,
-  D3ChartTemplates,
-  StatusCard,
-  UIButton,
-  UIChip
-} from "@/components/library";
-
-export interface Metric {
-  label: string;
-  value: string | number;
-  trend?: string | number | null;
-}
-
-export interface MetricsStripProps {
-  metrics?: Metric[];
-  title?: string;
-  collapsible?: boolean;
-  collapsed?: boolean;
-}
-
-export interface ListItem {
-  id?: string;
-  title?: string;
-  name?: string;
-  description?: string;
-  status?: "critical" | "warning" | string;
-  actions?: Array<string | { label: string }>;
-}
-
-export interface ItemListProps {
-  items?: ListItem[];
-  title?: string;
-  onItemClick?: (item: ListItem) => void;
-}
-
-export interface TableColumn {
-  key: string;
-  label: string;
-}
-
-export interface DataTableProps {
-  title?: string;
-  subtitle?: string;
-  columns?: TableColumn[];
-  data?: any[];
-  rows?: any[];
-  searchable?: boolean;
-  sortable?: boolean;
-  paginated?: boolean;
-  pageSize?: number;
-}
-
-export interface DataPoint {
-  x: number;
-  y: number;
-  [key: string]: any;
-}
-
-export interface DataChartProps {
-  title?: string;
-  subtitle?: string;
-  chartType?: string;
-  data?: DataPoint[];
-  height?: number;
-}
-
-export interface MetricCardComponentProps {
-  title?: string;
-  label?: string;
-  value?: string | number;
-  trend?: string | number;
-  change?: string | number;
-  changeType?: string;
-  color?: string;
-  icon?: React.ReactNode;
-  description?: string;
-}
-
-export interface StatusCardComponentProps {
-  title?: string;
-  subtitle?: string;
-  status?: string;
-  items?: any[];
-  layout?: string;
-  showProgress?: boolean;
-  showTimestamp?: boolean;
-}
-
-export interface ActionListProps {
-  actions?: Array<string | { label: string }>;
-  title?: string;
-  onAction?: (action: string | { label: string }) => void;
-}
-
-export interface CalloutCardProps {
-  title?: string;
-  message?: string;
-  tone?: "neutral" | "success" | "warning" | "danger";
-}
-
-export interface SpacerProps {
-  size?: "sm" | "md" | "lg";
-}
-
-export interface NarrativeSummaryProps {
-  summary?: string;
-  title?: string;
-}
-
-export interface SchemaComponent {
-  id?: string;
-  type: string;
-  props?: Record<string, any>;
-}
-
-const BUILTIN_COMPONENTS = {
-  NarrativeSummary({ summary, title }: NarrativeSummaryProps) {
-    return (
-      <div className="text-sm text-slate-600 dark:text-slate-300">
-        {title && <div className="mb-1 font-medium text-slate-900 dark:text-slate-50">{title}</div>}
-        {summary}
-      </div>
-    );
-  },
-
-  MetricsStrip({ metrics = [], title, collapsible = false, collapsed: initialCollapsed = false }: MetricsStripProps) {
-    const [collapsed, setCollapsed] = React.useState(initialCollapsed);
-
-    const items = metrics.length ? metrics : [
-      { label: "Metric A", value: "—", trend: null },
-      { label: "Metric B", value: "—", trend: null },
-      { label: "Metric C", value: "—", trend: null }
-    ];
-
-    if (collapsible && collapsed) {
-      return (
-        <button
-          type="button"
-          onClick={() => setCollapsed(false)}
-          className="flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-xs text-slate-500 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800"
-        >
-          <span>{title ?? "Metrics"}: {items.map(m => `${m.label} ${m.value}`).join(" · ")}</span>
-          <span>▸</span>
-        </button>
-      );
-    }
-
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900">
-        {(title || collapsible) && (
-          <div className="mb-2 flex items-center justify-between">
-            <span className="text-xs font-medium text-slate-500 dark:text-slate-400">{title ?? "Metrics"}</span>
-            {collapsible && (
-              <button
-                type="button"
-                onClick={() => setCollapsed(true)}
-                className="text-xs text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
-              >
-                Collapse
-              </button>
-            )}
-          </div>
-        )}
-        <div className="flex flex-wrap gap-4">
-          {items.map((m) => (
-            <div key={m.label} className="min-w-[80px]">
-              <div className="text-xs text-slate-400 dark:text-slate-500">{m.label}</div>
-              <div className="flex items-baseline gap-1.5">
-                <span className="text-sm font-semibold text-slate-700 dark:text-slate-200">{m.value}</span>
-                {m.trend && (
-                  <span className={`text-xs ${String(m.trend).startsWith?.("+") || (typeof m.trend === "number" && m.trend > 0) ? "text-red-500" : "text-emerald-500"}`}>
-                    {typeof m.trend === "number" ? (m.trend > 0 ? `+${m.trend}` : m.trend) : m.trend}
-                  </span>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-
-  ItemList({ items = [], title, onItemClick }: ItemListProps) {
-    const [expanded, setExpanded] = React.useState<string | number | null>(null);
-    if (!items.length) {
-      return <div className="text-sm text-slate-500 dark:text-slate-400">No items.</div>;
-    }
-    return (
-      <div className="space-y-2">
-        {title && (
-          <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-slate-900 dark:text-slate-50">{title}</span>
-            <span className="text-xs text-slate-400 dark:text-slate-500">{items.length} items</span>
-          </div>
-        )}
-        <div className="space-y-1.5">
-          {items.map((item, idx) => (
-            <div key={item.id ?? idx} className="rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
-              <button
-                type="button"
-                onClick={() => {
-                  setExpanded(expanded === (item.id ?? idx) ? null : (item.id ?? idx));
-                  onItemClick?.(item);
-                }}
-                className="flex w-full items-start justify-between gap-3 p-3 text-left"
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-start justify-between gap-2">
-                    <div className="text-sm font-medium text-slate-900 dark:text-slate-50">
-                      {item.title ?? item.name ?? `Item ${idx + 1}`}
-                    </div>
-                    {item.status && (
-                      <UIChip tone={item.status === "critical" ? "danger" : item.status === "warning" ? "warning" : "neutral"} className="shrink-0">
-                        {item.status}
-                      </UIChip>
-                    )}
-                  </div>
-                  {item.description && (
-                    <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">{item.description}</div>
-                  )}
-                </div>
-              </button>
-              {expanded === (item.id ?? idx) && item.actions && (
-                <div className="border-t border-slate-100 px-3 py-2 dark:border-slate-800">
-                  <div className="flex flex-wrap gap-1.5">
-                    {item.actions.map((action, i) => (
-                      <button
-                        key={typeof action === "string" ? action : action.label}
-                        type="button"
-                        className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
-                          i === 0
-                            ? "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200"
-                            : "bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
-                        }`}
-                      >
-                        {typeof action === "string" ? action : action.label}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-
-  DataTable({ title, subtitle, columns = [], data = [], rows, searchable = true, sortable = true, paginated = true, pageSize = 5 }: DataTableProps) {
-    const tableData = data.length ? data : (rows ?? []);
-    const cols = columns.length ? columns : [
-      { key: "name", label: "Name" },
-      { key: "status", label: "Status" },
-      { key: "value", label: "Value" }
-    ];
-    return (
-      <TableCard
-        title={title ?? "Data"}
-        subtitle={subtitle}
-        columns={cols}
-        data={tableData}
-        searchable={searchable}
-        sortable={sortable}
-        paginated={paginated}
-        pageSize={pageSize}
-      />
-    );
-  },
-
-  DataChart({ title, subtitle, chartType = "line", data = [], height = 200 }: DataChartProps) {
-    const series = data.length ? data : Array.from({ length: 12 }, (_, i) => ({ x: i, y: Math.random() * 100 }));
-    return (
-      <ChartCard
-        title={title ?? "Trend"}
-        subtitle={subtitle ?? "Data visualization"}
-        chartType={chartType}
-        height={height}
-        chart={
-          <D3Chart
-            data={series as any}
-            responsive
-            height={height}
-            ariaLabel={title}
-            renderChart={(svg, d, dims, opts) => D3ChartTemplates.lineChart(svg, d as any, dims, opts)}
-            options={{ xKey: "x", yKey: "y", showGrid: true, showAxes: true }}
-          />
-        }
-      />
-    );
-  },
-
-  MetricCard({ title, label, value, trend, change, changeType, color, icon, description }: MetricCardComponentProps) {
-    return (
-      <MetricCard
-        title={(title ?? label) as any}
-        value={value ?? "—"}
-        trend={trend as any}
-        change={change as any}
-        changeType={changeType as any}
-        color={color as any}
-        icon={icon}
-        subtitle={description}
-      />
-    );
-  },
-
-  StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }: StatusCardComponentProps) {
-    return (
-      <StatusCard
-        title={title}
-        subtitle={subtitle}
-        status={status}
-        items={items}
-        layout={layout as any}
-        showProgress={showProgress}
-        showTimestamp={showTimestamp}
-      />
-    );
-  },
-
-  ActionList({ actions = [], title, onAction }: ActionListProps) {
-    return (
-      <div className="rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
-        {title && <div className="mb-3 text-sm font-medium text-slate-900 dark:text-slate-50">{title}</div>}
-        <div className="flex flex-wrap gap-2">
-          {actions.map((action, i) => (
-            <UIButton
-              key={i}
-              size="sm"
-              variant={i === 0 ? "primary" : "outline"}
-              onClick={() => onAction?.(action)}
-            >
-              {typeof action === "string" ? action : action.label}
-            </UIButton>
-          ))}
-        </div>
-      </div>
-    );
-  },
-
-  CalloutCard({ title, message, tone = "neutral" }: CalloutCardProps) {
-    const toneClasses = {
-      neutral: "border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200",
-      success: "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200",
-      warning: "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200",
-      danger: "border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200"
-    };
-    return (
-      <div className={`rounded-xl border p-4 ${toneClasses[tone] ?? toneClasses.neutral}`}>
-        {title && <div className="mb-1 text-sm font-semibold">{title}</div>}
-        <div className="text-sm">{message}</div>
-      </div>
-    );
-  },
-
-  Divider() {
-    return <div className="h-px bg-slate-200 dark:bg-slate-800" />;
-  },
-
-  Spacer({ size = "md" }: SpacerProps) {
-    const heights = { sm: "h-2", md: "h-4", lg: "h-6" };
-    return <div className={heights[size] ?? heights.md} />;
-  }
-};
-
-let _registry: Record<string, React.ComponentType<any>> = { ...BUILTIN_COMPONENTS };
-
-export function getComponentRegistry(): Record<string, React.ComponentType<any>> {
-  return _registry;
-}
-
-export function registerComponent(type: string, Component: React.ComponentType<any>): void {
-  _registry = { ..._registry, [type]: Component };
-}
-
-export function registerComponents(map: Record<string, React.ComponentType<any>>): void {
-  _registry = { ..._registry, ...map };
-}
-
-export function renderSchemaComponent(component: SchemaComponent, index: number): React.ReactElement {
-  const registry = getComponentRegistry();
-  const Component = registry[component.type];
-  if (!Component) {
-    return (
-      <div key={index} className="rounded-lg border border-dashed border-slate-300 p-3 text-xs text-slate-500 dark:border-slate-700">
-        Unknown component: {component.type}
-      </div>
-    );
-  }
-  return <Component key={component.id ?? index} {...(component.props ?? {})} />;
-}
-
-export function renderSchema(components: SchemaComponent[] = []): React.ReactElement[] {
-  return components.map((c, i) => renderSchemaComponent(c, i));
-}
-
-export default BUILTIN_COMPONENTS;

package/src/lib/index.ts

@@ -1 +0,0 @@
-export * from './utils';

package/src/lib/utils.ts

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

package/src/templates/config/routes.tsx.template

@@ -1,33 +0,0 @@
-import type { RouteObject } from 'react-router';
-import AppLayout from './appLayout';
-import Home from './pages/Home';
-import AccountSearch from './features/object-search/__examples__/pages/AccountSearch';
-import AccountObjectDetailPage from './features/object-search/__examples__/pages/AccountObjectDetailPage';
-import NotFound from './pages/NotFound';
-
-export const routes: RouteObject[] = [
-  {
-    path: "/",
-    element: <AppLayout />,
-    children: [
-      {
-        index: true,
-        element: <Home />,
-        handle: { showInNavigation: true, label: "Home" }
-      },
-      {
-        path: 'accounts',
-        element: <AccountSearch />,
-        handle: { showInNavigation: true, label: "Accounts" }
-      },
-      {
-        path: 'accounts/:recordId',
-        element: <AccountObjectDetailPage />
-      },
-      {
-        path: '*',
-        element: <NotFound />
-      }
-    ]
-  }
-];

package/src/templates/pages/BlankDashboard.tsx.template

@@ -1,15 +0,0 @@
-import { RocketLaunchIcon } from "@heroicons/react/24/outline";
-import { EmptyState } from "@/components/library";
-
-export default function BlankDashboard() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-950 transition-colors">
-      <EmptyState
-        size="lg"
-        icon={<RocketLaunchIcon className="h-14 w-14" />}
-        heading="Bespoke App Template"
-        body="Component library loaded and ready to go."
-      />
-    </div>
-  );
-}

package/src/templates/pages/Home.tsx.template

@@ -1,58 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import UIInput from '@/components/library/ui/UIInput';
-import UIButton from '@/components/library/ui/UIButton';
-import { Search } from "lucide-react";
-
-export default function HomePage() {
-	const [searchQuery, setSearchQuery] = useState("");
-	const navigate = useNavigate();
-
-	const handleSearch = () => {
-		const trimmed = searchQuery.trim();
-		if (trimmed) {
-			navigate(`/accounts?search=${encodeURIComponent(trimmed)}`);
-		} else {
-			navigate('/accounts');
-		}
-	};
-
-	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-		if (e.key === "Enter") {
-			e.preventDefault();
-			handleSearch();
-		}
-	};
-
-	return (
-		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
-			<div className="w-full max-w-4xl">
-				<div className="text-center mb-8">
-					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
-					<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
-				</div>
-				<div className="flex flex-col gap-4">
-					<div className="relative">
-						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
-						<UIInput
-							type="text"
-							value={searchQuery}
-							onChange={(e) => setSearchQuery(e.target.value)}
-							onKeyDown={handleKeyDown}
-							placeholder="Search..."
-							className="pl-10 w-full"
-						/>
-					</div>
-					<div className="flex gap-3 justify-center">
-						<UIButton onClick={handleSearch} variant="primary">
-							Search
-						</UIButton>
-						<UIButton onClick={() => navigate('/accounts')} variant="secondary">
-							Browse All
-						</UIButton>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}

package/src/templates/pages/NotFound.tsx.template

@@ -1,19 +0,0 @@
-import { useNavigate } from "react-router";
-import UIButton from '@/components/library/ui/UIButton';
-
-export default function NotFound() {
-	const navigate = useNavigate();
-
-	return (
-		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8">
-			<div className="w-full max-w-2xl text-center">
-				<h1 className="text-6xl font-bold text-slate-900 dark:text-slate-50 mb-4">404</h1>
-				<h2 className="text-2xl font-semibold text-slate-700 dark:text-slate-300 mb-4">Page Not Found</h2>
-				<p className="text-lg text-slate-600 dark:text-slate-400 mb-8">
-					The page you're looking for doesn't exist.
-				</p>
-				<UIButton onClick={() => navigate("/")}>Go Home</UIButton>
-			</div>
-		</div>
-	);
-}

package/src/templates/pages/Search.tsx.template

@@ -1,13 +0,0 @@
-export default function Search() {
-	return (
-		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
-			<div className="w-full max-w-4xl">
-				<div className="text-center mb-8">
-					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
-					<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
-				</div>
-				<p className="text-center text-slate-500 dark:text-slate-400">Search functionality coming soon...</p>
-			</div>
-		</div>
-	);
-}

package/src/templates/workspace/CommandCenter.tsx.template

@@ -1,15 +0,0 @@
-import AppThemeProvider from "@/components/library/theme/AppThemeProvider";
-import DataModeProvider from "@/components/library/data/DataModeProvider";
-import { Toaster } from "sonner";
-import BlankDashboard from "../pages/BlankDashboard";
-
-export default function CommandCenter() {
-  return (
-    <AppThemeProvider initialMode="light">
-      <DataModeProvider initialMode="sample">
-        <BlankDashboard />
-        <Toaster position="bottom-right" />
-      </DataModeProvider>
-    </AppThemeProvider>
-  );
-}

package/src/types/conversation.ts

@@ -1,48 +0,0 @@
-/**
- * Type definitions for Agentforce Conversation Client
- */
-
-export interface ResolvedEmbedOptions {
-  salesforceOrigin?: string;
-  frontdoorUrl?: string;
-}
-
-export interface RenderingConfig {
-  mode?: 'inline' | 'modal' | 'sidebar' | 'floating';
-  theme?: 'light' | 'dark' | 'auto';
-  width?: string | number;
-  height?: string | number;
-  headerEnabled?: boolean;
-}
-
-export interface AgentforceClientConfig {
-  agentId?: string;
-  devName?: string;
-  renderingConfig?: RenderingConfig;
-  locale?: string;
-  styleTokens?: Record<string, string>;
-  [key: string]: any;
-}
-
-/**
- * Props interface for AgentforceConversationClient component.
- * Uses flat props that get normalized to AgentforceClientConfig internally.
- */
-export interface AgentforceConversationClientProps {
-  /** Agent ID to load */
-  agentId?: string;
-  /** Whether to render inline (true) or floating (false) */
-  inline?: boolean;
-  /** Whether to show the header in the conversation UI */
-  headerEnabled?: boolean;
-  /** Width of the conversation UI */
-  width?: string | number;
-  /** Height of the conversation UI */
-  height?: string | number;
-  /** Custom style tokens for theming */
-  styleTokens?: Record<string, string>;
-  /** Salesforce origin URL */
-  salesforceOrigin?: string;
-  /** Frontdoor URL for authentication */
-  frontdoorUrl?: string;
-}