Shared Component Library

shared/src/
  api/                  # 16 API client modules
    client.ts           # Base ApiClient class
    bi.ts               # BIApiClient
    query.ts            # QueryApiClient
    semantic.ts         # SemanticApiClient
    ai.ts               # AIApiClient
    ml.ts               # MLApiClient
    data.ts             # DataApiClient
    pipeline.ts         # PipelineApiClient
    dbt.ts              # DbtApiClient
    dataQuality.ts      # DataQualityApiClient
    governance.ts       # GovernanceApiClient
    ontology.ts         # OntologyApiClient
    render.ts           # RenderApiClient
    opsAgent.ts         # OpsAgentApiClient
    agentStudio.ts      # AgentStudioApiClient
    notification.ts     # NotificationApiClient
    billing.ts          # BillingApiClient
  components/           # 102 reusable components in 33 directories
    Auth/               # Authentication (AuthGuard, LoginForm, ProtectedRoute, etc.)
    Navigation/         # Navigation (Sidebar, TopNavigation, GlobalSearch, etc.)
    ErrorBoundary/      # Error handling (ErrorBoundary, WidgetErrorBoundary)
    Loading/            # Loading states (Skeleton, LoadingSpinner, LoadingOverlay)
    MonacoEditor/       # Code editors (SqlEditor)
    Collaboration/      # Multi-user (PresenceIndicator, CommentsPanel, ShareDialog)
    Toast/              # Notifications (Toast, ToastProvider)
    Lineage/            # Data lineage (LineageGraph, LineageNode, LineageEdge)
    Portal/             # Dashboard portal (WelcomeHeader, QuickActions, etc.)
    StatusPanel/        # Status displays (StatusBar, SLAPanel, etc.)
    ... (20+ more)
  hooks/                # 28+ custom React hooks
  stores/               # Zustand stores
  state/                # Custom store framework
  realtime/             # WebSocket, SSE, presence
  observability/        # Frontend telemetry
  services/             # Offline, semantic cache
  styles/               # Design tokens
  types/                # Canonical types
  utils/                # Shared utilities

import { ObservabilityProvider } from '@matih/shared';
 
export function App() {
  return (
    <ObservabilityProvider appName="bi-workbench">
      <ErrorBoundary name="BiWorkbench">
        {/* App content */}
      </ErrorBoundary>
    </ObservabilityProvider>
  );
}