@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

package/src/components/library/chat/index.tsx

@@ -1,26 +0,0 @@
-export { default as ChatPanel } from "./ChatPanel";
-export { default as ChatBar } from "./ChatBar";
-export { default as ChatMessageList } from "./ChatMessageList";
-export { default as ChatMessage } from "./ChatMessage";
-export { default as ChatInput } from "./ChatInput";
-export { default as ChatTypingIndicator } from "./ChatTypingIndicator";
-export { default as ChatSuggestions } from "./ChatSuggestions";
-export { default as ChatToolCall } from "./ChatToolCall";
-export { default as ChatWelcome } from "./ChatWelcome";
-export { default as useChatState } from "./useChatState";
-
-export type { ChatPanelProps } from "./ChatPanel";
-export type { ChatBarProps } from "./ChatBar";
-export type { ChatMessageListProps } from "./ChatMessageList";
-export type { ChatMessageProps, ChatMessageData } from "./ChatMessage";
-export type { ChatInputProps } from "./ChatInput";
-export type { ChatTypingIndicatorProps } from "./ChatTypingIndicator";
-export type { ChatSuggestionsProps } from "./ChatSuggestions";
-export type { ChatToolCallProps, ToolCall } from "./ChatToolCall";
-export type { ChatWelcomeProps } from "./ChatWelcome";
-export type {
-  UseChatStateOptions,
-  UseChatStateReturn,
-  ChatMessage as ChatMessageType,
-  ChatStateHelpers,
-} from "./useChatState";

package/src/components/library/chat/useChatState.tsx

@@ -1,182 +0,0 @@
-import { useState, useCallback, useRef } from "react";
-import { ToolCall } from "./ChatToolCall";
-import type { SchemaComponent } from "@/components/workspace/ComponentRegistry";
-
-let _nextId = 1;
-function uid(): string {
-  return `msg-${Date.now()}-${_nextId++}`;
-}
-
-export interface ChatMessage {
-  id: string;
-  role: "user" | "assistant" | "system";
-  content?: string;
-  timestamp: string;
-  components?: SchemaComponent[];
-  toolCalls?: ToolCall[];
-  isError?: boolean;
-  isStreaming?: boolean;
-}
-
-export interface ChatStateHelpers {
-  addMessage: (msg: Partial<ChatMessage>) => string;
-  updateMessage: (id: string, updates: Partial<ChatMessage>) => void;
-  appendChunk: (id: string, chunk: string) => void;
-  setStreaming: (streaming: boolean) => void;
-}
-
-export interface UseChatStateOptions {
-  initialMessages?: Partial<ChatMessage>[];
-  onSend?: (
-    userMessage: ChatMessage,
-    allMessages: ChatMessage[],
-    helpers: ChatStateHelpers
-  ) => Promise<Partial<ChatMessage> | void>;
-}
-
-export interface UseChatStateReturn {
-  messages: ChatMessage[];
-  isLoading: boolean;
-  isStreaming: boolean;
-  error: string | null;
-  sendMessage: (content: string, extra?: Partial<ChatMessage>) => Promise<void>;
-  addMessage: (msg: Partial<ChatMessage>) => string;
-  updateMessage: (id: string, updates: Partial<ChatMessage>) => void;
-  appendChunk: (id: string, chunk: string) => void;
-  removeMessage: (id: string) => void;
-  clearMessages: () => void;
-  retryLast: () => void;
-  setError: (error: string | null) => void;
-}
-
-/**
- * Core state management hook for AI chat.
- *
- * @example
- * const chat = useChatState({
- *   onSend: async (msg, history) => {
- *     const res = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ messages: history }) });
- *     const data = await res.json();
- *     return { role: "assistant", content: data.reply, components: data.components };
- *   },
- * });
- */
-export default function useChatState({ initialMessages = [], onSend }: UseChatStateOptions = {}): UseChatStateReturn {
-  const [messages, setMessages] = useState<ChatMessage[]>(() =>
-    initialMessages.map((m) => ({
-      id: uid(),
-      timestamp: new Date().toISOString(),
-      role: m.role || "user",
-      ...m
-    } as ChatMessage))
-  );
-  const [isLoading, setIsLoading] = useState(false);
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const onSendRef = useRef(onSend);
-  onSendRef.current = onSend;
-
-  const addMessage = useCallback((msg: Partial<ChatMessage>): string => {
-    const full: ChatMessage = {
-      id: uid(),
-      timestamp: new Date().toISOString(),
-      role: msg.role || "assistant",
-      ...msg
-    } as ChatMessage;
-    setMessages((prev) => [...prev, full]);
-    return full.id;
-  }, []);
-
-  const updateMessage = useCallback((id: string, updates: Partial<ChatMessage>) => {
-    setMessages((prev) =>
-      prev.map((m) => (m.id === id ? { ...m, ...updates } : m))
-    );
-  }, []);
-
-  const appendChunk = useCallback((id: string, chunk: string) => {
-    setMessages((prev) =>
-      prev.map((m) =>
-        m.id === id ? { ...m, content: (m.content ?? "") + chunk } : m
-      )
-    );
-  }, []);
-
-  const removeMessage = useCallback((id: string) => {
-    setMessages((prev) => prev.filter((m) => m.id !== id));
-  }, []);
-
-  const clearMessages = useCallback(() => {
-    setMessages([]);
-    setError(null);
-  }, []);
-
-  const sendMessage = useCallback(
-    async (content: string, extra: Partial<ChatMessage> = {}) => {
-      if (!content?.trim()) return;
-      setError(null);
-
-      const userMsg: ChatMessage = {
-        role: "user",
-        content: content.trim(),
-        ...extra,
-        id: uid(),
-        timestamp: new Date().toISOString()
-      } as ChatMessage;
-
-      setMessages((prev) => [...prev, userMsg]);
-      setIsLoading(true);
-
-      try {
-        const allMsgs = [...messages, userMsg];
-        const result = await onSendRef.current?.(userMsg, allMsgs, {
-          addMessage,
-          updateMessage,
-          appendChunk,
-          setStreaming: setIsStreaming,
-        });
-
-        if (result && typeof result === "object" && result.role) {
-          addMessage(result);
-        }
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Failed to send message";
-        setError(errorMessage);
-        addMessage({
-          role: "system",
-          content: err instanceof Error ? err.message : "Something went wrong. Please try again.",
-          isError: true,
-        });
-      } finally {
-        setIsLoading(false);
-        setIsStreaming(false);
-      }
-    },
-    [messages, addMessage, updateMessage, appendChunk]
-  );
-
-  const retryLast = useCallback(() => {
-    const lastUser = [...messages].reverse().find((m) => m.role === "user");
-    if (!lastUser) return;
-
-    const idx = messages.lastIndexOf(lastUser);
-    setMessages(messages.slice(0, idx));
-    setError(null);
-
-    sendMessage(lastUser.content || "");
-  }, [messages, sendMessage]);
-
-  return {
-    messages,
-    isLoading,
-    isStreaming,
-    error,
-    sendMessage,
-    addMessage,
-    updateMessage,
-    appendChunk,
-    removeMessage,
-    clearMessages,
-    retryLast,
-    setError,
-  };
-}

package/src/components/library/data/DataModeProvider.tsx

@@ -1,84 +0,0 @@
-import React from "react";
-
-export type DataMode = "sample" | "live";
-
-export interface DataModeContextValue {
-  mode: DataMode;
-  isSample: boolean;
-  isLive: boolean;
-  toggle: () => void;
-  setMode: (mode: DataMode) => void;
-}
-
-const DataModeContext = React.createContext<DataModeContextValue>({
-  mode: "sample",
-  isSample: true,
-  isLive: false,
-  toggle: () => {},
-  setMode: () => {},
-});
-
-const STORAGE_KEY = "app-data-mode";
-const VALID_MODES: DataMode[] = ["sample", "live"];
-
-/**
- * Read the current data mode from any component.
- *
- * @returns {{ mode: "sample"|"live", isSample: boolean, isLive: boolean, toggle: () => void, setMode: (mode) => void }}
- */
-export function useDataMode(): DataModeContextValue {
-  return React.useContext(DataModeContext);
-}
-
-export interface DataModeProviderProps {
-  initialMode?: DataMode;
-  children: React.ReactNode;
-}
-
-/**
- * Provides global data-mode state (sample vs live) to the component tree.
- * Persists to localStorage so the choice survives page reloads.
- *
- * Wrap once in _app.js alongside AppThemeProvider.
- */
-export default function DataModeProvider({ initialMode = "sample", children }: DataModeProviderProps) {
-  const [mode, setModeState] = React.useState<DataMode>(initialMode);
-
-  React.useEffect(() => {
-    try {
-      const stored = window.localStorage.getItem(STORAGE_KEY);
-      if (stored && VALID_MODES.includes(stored as DataMode)) {
-        setModeState(stored as DataMode);
-      }
-    } catch {
-      // SSR or storage unavailable
-    }
-  }, []);
-
-  React.useEffect(() => {
-    try {
-      window.localStorage.setItem(STORAGE_KEY, mode);
-    } catch {
-      // ignore
-    }
-  }, [mode]);
-
-  const setMode = React.useCallback((m: DataMode) => {
-    if (VALID_MODES.includes(m)) setModeState(m);
-  }, []);
-
-  const value = React.useMemo<DataModeContextValue>(
-    () => ({
-      mode,
-      isSample: mode === "sample",
-      isLive: mode === "live",
-      toggle: () => setModeState((m) => (m === "sample" ? "live" : "sample")),
-      setMode,
-    }),
-    [mode, setMode]
-  );
-
-  return (
-    <DataModeContext.Provider value={value}>{children}</DataModeContext.Provider>
-  );
-}

package/src/components/library/data/DataModeToggle.tsx

@@ -1,39 +0,0 @@
-import { useDataMode } from "./DataModeProvider";
-import { BeakerIcon, SignalIcon } from "@heroicons/react/24/outline";
-
-export interface DataModeToggleProps {
-  className?: string;
-}
-
-/**
- * Pill toggle for switching between sample and live data modes.
- * Place in the AppShell header next to the theme toggle.
- */
-export default function DataModeToggle({ className = "" }: DataModeToggleProps) {
-  const { mode, toggle } = useDataMode();
-  const isSample = mode === "sample";
-
-  return (
-    <button
-      type="button"
-      onClick={toggle}
-      className={[
-        "inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-semibold shadow-sm transition",
-        isSample
-          ? "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300 dark:hover:bg-amber-950/60"
-          : "border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300 dark:hover:bg-emerald-950/60",
-        className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
-      aria-label={`Data mode: ${mode}. Click to switch to ${isSample ? "live" : "sample"}.`}
-    >
-      {isSample ? (
-        <BeakerIcon className="h-3.5 w-3.5" aria-hidden="true" />
-      ) : (
-        <SignalIcon className="h-3.5 w-3.5" aria-hidden="true" />
-      )}
-      {isSample ? "Sample" : "Live"}
-    </button>
-  );
-}

package/src/components/library/data/chartDataProvider.tsx

@@ -1,105 +0,0 @@
-// Minimal semantic data provider (seed data + lookup helpers).
-// This is intentionally local/in-memory for now; later we can swap to API-backed providers.
-
-export type ChangeType = "positive" | "negative" | "neutral";
-export type MetricColor = "primary" | "success" | "warning" | "danger";
-export type ColumnType = "currency" | "percentage" | "number" | "text";
-
-export interface SemanticMetric {
-  metricId: string;
-  title: string;
-  subtitle: string;
-  value: string;
-  change?: string;
-  changeType?: ChangeType;
-  color?: MetricColor;
-  trend?: string;
-}
-
-export interface TableColumn {
-  key: string;
-  label: string;
-  type?: ColumnType;
-  sortable?: boolean;
-  mono?: boolean;
-}
-
-export interface TableRow {
-  id: number;
-  [key: string]: any;
-}
-
-export interface SemanticTable {
-  title: string;
-  subtitle: string;
-  columns: TableColumn[];
-  rows: TableRow[];
-}
-
-export interface SemanticDataset {
-  title: string;
-  metrics?: SemanticMetric[];
-  table?: SemanticTable;
-}
-
-export interface SemanticDatasets {
-  [key: string]: SemanticDataset;
-}
-
-const SEMANTIC_DATASETS: SemanticDatasets = {
-  sales_pipeline_qtr: {
-    title: "Sales Pipeline (Quarter)",
-    metrics: [
-      {
-        metricId: "pipeline_value",
-        title: "Pipeline",
-        subtitle: "This quarter",
-        value: "$1.28M",
-        change: "+6.2%",
-        changeType: "positive",
-        color: "primary",
-        trend: "vs last quarter"
-      },
-      {
-        metricId: "win_rate",
-        title: "Win rate",
-        subtitle: "Trailing 90 days",
-        value: "34%",
-        change: "+1.1%",
-        changeType: "positive",
-        color: "success"
-      }
-    ],
-    table: {
-      title: "Opportunities",
-      subtitle: "Pipeline opportunities",
-      columns: [
-        { key: "name", label: "Opportunity", sortable: true },
-        { key: "amount", label: "Amount", type: "currency", sortable: true, mono: true },
-        { key: "stage", label: "Stage", sortable: true },
-        { key: "owner", label: "Owner", sortable: true }
-      ],
-      rows: [
-        { id: 1, name: "Acme Renewal", amount: 125000, stage: "Negotiation", owner: "Sam" },
-        { id: 2, name: "Globex Expansion", amount: 420000, stage: "Discovery", owner: "Jules" },
-        { id: 3, name: "Initech New Logo", amount: 98000, stage: "Proposal", owner: "Riley" },
-        { id: 4, name: "Umbrella Upsell", amount: 56000, stage: "Qualification", owner: "Alex" }
-      ]
-    }
-  }
-};
-
-export function listSemanticIds(): string[] {
-  return Object.keys(SEMANTIC_DATASETS);
-}
-
-export function getSemanticDataset(semanticId: string): SemanticDataset | null {
-  if (!semanticId) return null;
-  return SEMANTIC_DATASETS[semanticId] ?? null;
-}
-
-export function getSemanticMetric(semanticId: string, metricId: string): SemanticMetric | null {
-  const ds = getSemanticDataset(semanticId);
-  if (!ds?.metrics) return null;
-  return ds.metrics.find((m) => m.metricId === metricId) ?? null;
-}

package/src/components/library/data/filterUtils.tsx

@@ -1,187 +0,0 @@
-/**
- * Pure data utilities for filtering, sorting, and searching.
- * Stateless — combine with usePageFilters hook for state management.
- */
-
-export type SortDirection = "asc" | "desc";
-
-export interface DateRange {
-  start?: Date | string;
-  end?: Date | string;
-}
-
-export type FilterType = "search" | "select" | "toggle" | "dateRange";
-
-export interface BaseFilterDefinition {
-  id: string;
-  type: FilterType;
-  defaultValue?: any;
-}
-
-export interface SearchFilterDefinition extends BaseFilterDefinition {
-  type: "search";
-  keys: string[];
-}
-
-export interface SelectFilterDefinition extends BaseFilterDefinition {
-  type: "select";
-  key: string;
-}
-
-export interface ToggleFilterDefinition extends BaseFilterDefinition {
-  type: "toggle";
-  key: string;
-  matchValue?: any;
-}
-
-export interface DateRangeFilterDefinition extends BaseFilterDefinition {
-  type: "dateRange";
-  key: string;
-}
-
-export type FilterDefinition =
-  | SearchFilterDefinition
-  | SelectFilterDefinition
-  | ToggleFilterDefinition
-  | DateRangeFilterDefinition;
-
-export interface FilterValues {
-  [key: string]: any;
-}
-
-/**
- * Text search across multiple keys.
- * @param {Array} data
- * @param {string} query — search string
- * @param {string[]} keys — object keys to search within
- * @returns {Array} filtered data
- */
-export function filterBySearch<T>(data: T[], query: string, keys: string[] = []): T[] {
-  if (!query || !query.trim()) return data;
-  const q = query.trim().toLowerCase();
-  return data.filter((row) =>
-    keys.some((key) => {
-      const val = (row as any)?.[key];
-      return val != null && String(val).toLowerCase().includes(q);
-    })
-  );
-}
-
-/**
- * Filter rows where key matches a specific value.
- * Pass "all" or "" to skip filtering.
- * @param {Array} data
- * @param {string} key — object key to match
- * @param {*} value — value to match (exact, case-insensitive for strings)
- * @returns {Array}
- */
-export function filterByValue<T>(data: T[], key: string, value: any): T[] {
-  if (value == null || value === "" || value === "all") return data;
-  return data.filter((row) => {
-    const v = (row as any)?.[key];
-    if (typeof v === "string" && typeof value === "string") {
-      return v.toLowerCase() === value.toLowerCase();
-    }
-    return v === value;
-  });
-}
-
-/**
- * Filter rows where a boolean condition is met.
- * When toggle is off, returns all data (no filtering).
- * @param {Array} data
- * @param {string} key — object key to check
- * @param {boolean} isActive — whether the toggle is on
- * @param {*} matchValue — value that key should equal when active (default: truthy check)
- * @returns {Array}
- */
-export function filterByToggle<T>(data: T[], key: string, isActive: boolean, matchValue?: any): T[] {
-  if (!isActive) return data;
-  return data.filter((row) => {
-    const v = (row as any)?.[key];
-    if (matchValue !== undefined) return v === matchValue;
-    return Boolean(v);
-  });
-}
-
-/**
- * Filter rows where a date field falls within a range.
- * @param {Array} data
- * @param {string} key — object key containing date (ISO string or Date)
- * @param {{ start?: Date|string, end?: Date|string }} range
- * @returns {Array}
- */
-export function filterByDateRange<T>(data: T[], key: string, range: DateRange | null): T[] {
-  if (!range) return data;
-  const start = range.start ? new Date(range.start) : null;
-  const end = range.end ? new Date(range.end) : null;
-  if (!start && !end) return data;
-
-  return data.filter((row) => {
-    const raw = (row as any)?.[key];
-    if (raw == null) return false;
-    const d = raw instanceof Date ? raw : new Date(raw);
-    if (Number.isNaN(d.getTime())) return false;
-    if (start && d < start) return false;
-    if (end && d > end) return false;
-    return true;
-  });
-}
-
-/**
- * Sort data by a key.
- * @param {Array} data
- * @param {string} key — object key to sort by
- * @param {"asc"|"desc"} direction
- * @returns {Array} new sorted array
- */
-export function sortByKey<T>(data: T[], key: string, direction: SortDirection = "asc"): T[] {
-  if (!key) return data;
-  const dir = direction === "desc" ? -1 : 1;
-  return [...data].sort((a, b) => {
-    const av = (a as any)?.[key];
-    const bv = (b as any)?.[key];
-    if (av == null && bv == null) return 0;
-    if (av == null) return -1 * dir;
-    if (bv == null) return 1 * dir;
-    if (typeof av === "number" && typeof bv === "number") return (av - bv) * dir;
-    return String(av).localeCompare(String(bv)) * dir;
-  });
-}
-
-/**
- * Apply a set of filter definitions to data.
- * Each filter in `filters` has { id, type, key/keys } and `values` holds the current state.
- *
- * @param {Array} data
- * @param {Array} filters — filter definitions [{ id, type, key?, keys? }]
- * @param {Object} values — current filter values keyed by filter id
- * @returns {Array} filtered data
- */
-export function applyFilters<T>(data: T[], filters: FilterDefinition[] = [], values: FilterValues = {}): T[] {
-  let result = data;
-
-  for (const filter of filters) {
-    const val = values[filter.id];
-    if (val === undefined || val === null) continue;
-
-    switch (filter.type) {
-      case "search":
-        result = filterBySearch(result, val, filter.keys ?? []);
-        break;
-      case "select":
-        result = filterByValue(result, filter.key, val);
-        break;
-      case "toggle":
-        result = filterByToggle(result, filter.key, val, filter.matchValue);
-        break;
-      case "dateRange":
-        result = filterByDateRange(result, filter.key, val);
-        break;
-      default:
-        break;
-    }
-  }
-
-  return result;
-}

package/src/components/library/data/useDataSource.tsx

@@ -1,40 +0,0 @@
-import { useMemo } from "react";
-import { useDataMode } from "./DataModeProvider";
-
-export type DataSourceValue<T> = T | (() => T);
-
-export interface UseDataSourceOptions<T> {
-  sample: DataSourceValue<T>;
-  live: DataSourceValue<T>;
-}
-
-/**
- * Select between sample and live data based on the global data mode.
- *
- * Values can be plain data or functions (lazy-evaluated only when active).
- *
- * @param {{ sample: any | () => any, live: any | () => any }} sources
- * @returns {any} the resolved value for the active mode
- *
- * @example
- * // Static data
- * const incidents = useDataSource({
- *   sample: sampleIncidents,
- *   live: fetchedIncidents,
- * });
- *
- * @example
- * // Lazy — factory only runs when that mode is active
- * const metrics = useDataSource({
- *   sample: () => generateSampleMetrics(),
- *   live: () => computeFromAPI(apiData),
- * });
- */
-export default function useDataSource<T>({ sample, live }: UseDataSourceOptions<T>): T {
-  const { mode } = useDataMode();
-
-  return useMemo(() => {
-    const source = mode === "sample" ? sample : live;
-    return typeof source === "function" ? (source as () => T)() : source;
-  }, [mode, sample, live]);
-}