primus-saas-react 1.0.0

package/README.md

@@ -0,0 +1,82 @@
+# @primus-saas/react
+
+Premium React UI components for building modern SaaS applications with the Primus Framework.
+
+## Installation
+
+```bash
+npm install @primus-saas/react
+```
+
+## Quick Start
+
+```tsx
+import { PrimusProvider, PrimusLogin } from '@primus-saas/react';
+
+function App() {
+  return (
+    <PrimusProvider authority="https://your-auth.com" clientId="your-client-id">
+      <PrimusLogin allowSocial />
+    </PrimusProvider>
+  );
+}
+```
+
+## Components
+
+### Platform
+| Component | Description |
+|-----------|-------------|
+| `<PrimusLogin />` | Universal login form with social providers |
+| `<UserProfile />` | User profile display with avatar |
+| `<NotificationFeed />` | Real-time notification list |
+| `<CheckoutForm />` | Payment checkout with card input |
+| `<DocumentViewer />` | Universal document viewer (PDF, images) |
+
+### Banking
+| Component | Description |
+|-----------|-------------|
+| `<CreditCardVisual />` | 3D credit card display |
+| `<TransactionHistory />` | Transaction list with filters |
+
+### Insurance
+| Component | Description |
+|-----------|-------------|
+| `<PolicyCard />` | Insurance policy summary |
+| `<ClaimStatusTracker />` | Claim progress tracker |
+
+## Props Reference
+
+### PrimusLogin
+| Prop | Type | Description |
+|------|------|-------------|
+| `allowSocial` | `boolean` | Enable Google/GitHub login |
+| `onSuccess` | `(user) => void` | Login success callback |
+
+### CreditCardVisual
+| Prop | Type | Description |
+|------|------|-------------|
+| `cardHolder` | `string` | Name on card |
+| `last4` | `string` | Last 4 digits |
+| `expiry` | `string` | MM/YY format |
+| `variant` | `'black' \| 'gold' \| 'platinum'` | Card theme |
+| `brand` | `'visa' \| 'mastercard'` | Card network |
+
+### CheckoutForm
+| Prop | Type | Description |
+|------|------|-------------|
+| `amount` | `number` | Charge amount (required) |
+| `onSubmit` | `() => Promise<void>` | Submit handler |
+
+### PolicyCard
+| Prop | Type | Description |
+|------|------|-------------|
+| `policyNumber` | `string` | Policy ID |
+| `type` | `string` | Auto, Home, Life, etc. |
+| `status` | `'active' \| 'pending' \| 'expired'` | Status |
+| `coverageAmount` | `number` | Coverage limit |
+| `premiumAmount` | `number` | Monthly cost |
+
+## License
+
+MIT © Primus SaaS Framework

package/dist/index.d.mts

@@ -0,0 +1,446 @@
+import React, { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const AccountDashboard: React.FC<{
+    apiUrl?: string;
+}>;
+
+declare const KYCVerification: React.FC<{
+    userId: string;
+    apiUrl?: string;
+}>;
+
+declare const LoanCalculator: React.FC<{
+    apiUrl?: string;
+}>;
+
+declare const CreditScoreCard: React.FC<{
+    userId: string;
+    apiUrl?: string;
+}>;
+
+declare const QuoteComparison: React.FC<{
+    apiUrl?: string;
+}>;
+
+declare const AgentDirectory: React.FC<{
+    apiUrl?: string;
+}>;
+
+declare const FraudDetectionDashboard: React.FC<{
+    apiUrl?: string;
+}>;
+
+declare const PremiumCalculator: React.FC<{
+    apiUrl?: string;
+}>;
+
+declare const AICopilot: React.FC<{
+    apiUrl?: string;
+}>;
+
+declare const FileUploader: React.FC<{
+    apiUrl?: string;
+    onUploadComplete?: (file: any) => void;
+}>;
+
+declare const SecurityDashboard: React.FC<{
+    apiUrl?: string;
+}>;
+
+interface PrimusLoginProps {
+    /** Custom logo URL */
+    logo?: string;
+    /** Login form title */
+    title?: string;
+    /** Show social login buttons */
+    allowSocial?: boolean;
+    /** Called after successful login */
+    onSuccess?: (user: any, token: string) => void;
+    /** Called on login failure */
+    onError?: (error: string) => void;
+    /** Show loading spinner overlay */
+    showLoadingOverlay?: boolean;
+}
+declare const PrimusLogin: React.FC<PrimusLoginProps>;
+
+interface PrimusUser {
+    id?: string;
+    name: string;
+    email: string;
+    roles?: string[];
+    claims?: Record<string, any>;
+}
+interface PrimusAuthContextType {
+    isAuthenticated: boolean;
+    user: PrimusUser | null;
+    login: (credentials: {
+        email: string;
+        password: string;
+    } | {
+        provider: 'auth0' | 'azure' | 'google' | 'github';
+    }) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    logout: () => Promise<void>;
+    token: string | null;
+    isLoading: boolean;
+}
+interface PrimusProviderProps {
+    children: React.ReactNode;
+    /** Base URL for authentication API (e.g., http://localhost:5221) */
+    authority: string;
+    clientId: string;
+    redirectUri?: string;
+    /** Called after successful login */
+    onLoginSuccess?: (user: PrimusUser, token: string) => void;
+    /** Called on login failure */
+    onLoginError?: (error: string) => void;
+}
+declare const PrimusProvider: React.FC<PrimusProviderProps>;
+declare const usePrimusAuth: () => PrimusAuthContextType;
+
+type PrimusTheme = 'light' | 'dark';
+interface ThemeColors {
+    bg: string;
+    bgSecondary: string;
+    bgTertiary: string;
+    bgHover: string;
+    border: string;
+    borderSecondary: string;
+    text: string;
+    textSecondary: string;
+    textMuted: string;
+    accent: string;
+    accentHover: string;
+    accentText: string;
+    badge: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+}
+declare const themeColors: Record<PrimusTheme, ThemeColors>;
+interface PrimusThemeContextValue {
+    theme: PrimusTheme;
+    colors: ThemeColors;
+    setTheme: (theme: PrimusTheme) => void;
+    toggleTheme: () => void;
+}
+interface PrimusThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: PrimusTheme;
+}
+/**
+ * PrimusThemeProvider - Global Theme Context for Primus UI Components
+ *
+ * Wrap your app with this provider to enable consistent theming across all Primus components.
+ *
+ * @example
+ * ```tsx
+ * <PrimusThemeProvider defaultTheme="dark">
+ *   <App />
+ * </PrimusThemeProvider>
+ * ```
+ */
+declare function PrimusThemeProvider({ children, defaultTheme }: PrimusThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * usePrimusTheme - Hook to access the current Primus theme
+ *
+ * @example
+ * ```tsx
+ * const { theme, colors, toggleTheme } = usePrimusTheme();
+ * ```
+ */
+declare function usePrimusTheme(): PrimusThemeContextValue;
+/**
+ * PrimusThemeToggle - A button to toggle between light and dark themes
+ */
+declare function PrimusThemeToggle(): react_jsx_runtime.JSX.Element;
+
+declare const NotificationFeed: React.FC;
+
+interface PrimusNotificationCenterProps {
+    /** Override the theme from context (optional) */
+    theme?: PrimusTheme;
+    /** Custom API URL (optional) */
+    apiUrl?: string;
+}
+/**
+ * PrimusNotificationCenter - Enterprise Notification Component
+ *
+ * Features:
+ * - Automatic theme inheritance from PrimusThemeProvider
+ * - Bell icon with animated badge
+ * - Admin panel for sending notifications
+ * - Real-time polling (3 second intervals)
+ * - Type-specific icons and colors
+ *
+ * @example
+ * ```tsx
+ * // With theme provider (recommended)
+ * <PrimusThemeProvider defaultTheme="dark">
+ *   <PrimusNotificationCenter />
+ * </PrimusThemeProvider>
+ *
+ * // With manual override
+ * <PrimusNotificationCenter theme="light" />
+ * ```
+ */
+declare function PrimusNotificationCenter({ theme: themeOverride, apiUrl }: PrimusNotificationCenterProps): react_jsx_runtime.JSX.Element;
+declare const NotificationBell: typeof PrimusNotificationCenter;
+declare const PrimusNotifications: typeof PrimusNotificationCenter;
+
+interface Notification {
+    id: string;
+    title: string;
+    message: string;
+    type: 'info' | 'success' | 'warning' | 'error';
+    timestamp: string;
+    read: boolean;
+}
+declare const useNotifications: (apiUrl?: string) => {
+    notifications: Notification[];
+    unreadCount: number;
+    loading: boolean;
+    markAsRead: (id: string) => void;
+    markAllAsRead: () => void;
+    refresh: () => Promise<void>;
+};
+
+interface PrimusNotification {
+    id: string;
+    title: string;
+    message: string;
+    type: 'info' | 'success' | 'warning' | 'error';
+    timestamp: string;
+    read: boolean;
+}
+interface UseRealtimeNotificationsOptions {
+    apiUrl: string;
+    pollInterval?: number;
+    userId?: string;
+}
+/**
+ * Hook for managing real-time notifications from Primus Backend.
+ * Supports both polling and SignalR (when available).
+ */
+declare const useRealtimeNotifications: (options: UseRealtimeNotificationsOptions) => {
+    notifications: PrimusNotification[];
+    unreadCount: number;
+    loading: boolean;
+    error: string | null;
+    sendNotification: (title: string, message: string, type?: "info" | "success" | "warning" | "error") => Promise<boolean>;
+    markAsRead: (id: string) => Promise<void>;
+    markAllAsRead: () => Promise<void>;
+    deleteNotification: (id: string) => Promise<void>;
+    refresh: () => Promise<void>;
+};
+
+interface CheckoutFormProps {
+    amount: number;
+    currency?: string;
+    apiUrl?: string;
+    onSuccess?: (result: any) => void;
+    onError?: (error: string) => void;
+}
+declare const CheckoutForm: React.FC<CheckoutFormProps>;
+
+interface Document {
+    id: string;
+    name: string;
+    type: 'pdf' | 'image' | 'text';
+    url: string;
+    size?: string;
+    date?: string;
+}
+interface DocumentViewerProps {
+    document: Document;
+    onClose?: () => void;
+    onDownload?: () => void;
+}
+declare const DocumentViewer: React.FC<DocumentViewerProps>;
+
+interface CreditCardProps {
+    cardHolder: string;
+    last4: string;
+    expiry: string;
+    brand?: 'visa' | 'mastercard' | 'amex';
+    variant?: 'black' | 'blue' | 'gold' | 'platinum';
+}
+declare const CreditCardVisual: React.FC<CreditCardProps>;
+
+interface Transaction {
+    id: string;
+    description: string;
+    amount: number;
+    date: string;
+    type: 'credit' | 'debit';
+    category?: 'shopping' | 'transfer' | 'food' | 'other';
+    status?: 'pending' | 'completed' | 'failed';
+}
+interface TransactionHistoryProps {
+    transactions: Transaction[];
+    onTransactionClick?: (id: string) => void;
+}
+declare const TransactionHistory: React.FC<TransactionHistoryProps>;
+
+interface PolicyProps {
+    policyNumber: string;
+    type: string;
+    status: 'active' | 'expired' | 'pending';
+    coverageAmount: number;
+    nextPaymentDate: string;
+    premiumAmount: number;
+}
+declare const PolicyCard: React.FC<PolicyProps>;
+
+interface ClaimStep {
+    id: string;
+    label: string;
+    status: 'completed' | 'current' | 'upcoming';
+    date?: string;
+}
+interface ClaimStatusTrackerProps {
+    claimId: string;
+    steps: ClaimStep[];
+}
+declare const ClaimStatusTracker: React.FC<ClaimStatusTrackerProps>;
+
+interface FeatureFlag {
+    name: string;
+    enabled: boolean;
+    description: string;
+    rolloutPercentage?: number;
+}
+declare const FeatureFlagToggle: React.FC<{
+    apiUrl?: string;
+}>;
+
+declare const LogViewer: React.FC<{
+    apiUrl?: string;
+}>;
+
+interface PrimusLayoutProps {
+    children: React.ReactNode;
+    sidebar?: React.ReactNode;
+    header?: React.ReactNode;
+    /** Dark mode */
+    darkMode?: boolean;
+}
+declare const PrimusLayout: React.FC<PrimusLayoutProps>;
+
+interface SidebarItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+    active?: boolean;
+    badge?: string | number;
+}
+interface PrimusSidebarProps {
+    /** App logo or title */
+    logo?: React.ReactNode;
+    /** Navigation items */
+    items: SidebarItem[];
+    /** Footer content */
+    footer?: React.ReactNode;
+    /** Callback when item clicked */
+    onItemClick?: (item: SidebarItem) => void;
+    /** Currently active item id */
+    activeId?: string;
+}
+declare const PrimusSidebar: React.FC<PrimusSidebarProps>;
+
+interface PrimusHeaderProps {
+    /** Page title */
+    title?: string;
+    /** Breadcrumb items */
+    breadcrumbs?: {
+        label: string;
+        href?: string;
+    }[];
+    /** Right side actions */
+    actions?: React.ReactNode;
+    /** User info/avatar */
+    user?: {
+        name: string;
+        email?: string;
+        avatar?: string;
+    };
+    /** On user click */
+    onUserClick?: () => void;
+}
+declare const PrimusHeader: React.FC<PrimusHeaderProps>;
+
+interface Column<T> {
+    key: keyof T | string;
+    header: string;
+    render?: (value: any, row: T) => React.ReactNode;
+    sortable?: boolean;
+    width?: string;
+}
+interface PrimusDataTableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    /** Row key field */
+    rowKey: keyof T;
+    /** Loading state */
+    loading?: boolean;
+    /** Enable row selection */
+    selectable?: boolean;
+    /** Selected row keys */
+    selectedKeys?: (string | number)[];
+    /** On selection change */
+    onSelectionChange?: (keys: (string | number)[]) => void;
+    /** On row click */
+    onRowClick?: (row: T) => void;
+    /** Actions column renderer */
+    actions?: (row: T) => React.ReactNode;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Search placeholder */
+    searchPlaceholder?: string;
+    /** Enable search */
+    searchable?: boolean;
+}
+declare function PrimusDataTable<T extends Record<string, any>>({ data, columns, rowKey, loading, selectable, selectedKeys, onSelectionChange, onRowClick, actions, emptyMessage, searchPlaceholder, searchable, }: PrimusDataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface PrimusModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+declare const PrimusModal: React.FC<PrimusModalProps>;
+
+interface StatCardProps {
+    title: string;
+    value: string | number;
+    change?: {
+        value: number;
+        type: 'increase' | 'decrease' | 'neutral';
+    };
+    icon?: React.ReactNode;
+    description?: string;
+    trend?: number[];
+}
+declare const PrimusStatCard: React.FC<StatCardProps>;
+interface PrimusDashboardProps {
+    children: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    actions?: React.ReactNode;
+}
+declare const PrimusDashboard: React.FC<PrimusDashboardProps>;
+interface DashboardGridProps {
+    children: React.ReactNode;
+    columns?: 1 | 2 | 3 | 4;
+}
+declare const DashboardGrid: React.FC<DashboardGridProps>;
+
+export { AICopilot, AccountDashboard, AgentDirectory, CheckoutForm, CheckoutFormProps, ClaimStatusTracker, ClaimStatusTrackerProps, ClaimStep, Column, CreditCardProps, CreditCardVisual, CreditScoreCard, DashboardGrid, DashboardGridProps, Document, DocumentViewer, DocumentViewerProps, FeatureFlag, FeatureFlagToggle, FileUploader, FraudDetectionDashboard, KYCVerification, LoanCalculator, LogViewer, Notification, NotificationBell, NotificationFeed, PolicyCard, PolicyProps, PremiumCalculator, PrimusDashboard, PrimusDashboardProps, PrimusDataTable, PrimusDataTableProps, PrimusHeader, PrimusHeaderProps, PrimusLayout, PrimusLayoutProps, PrimusLogin, PrimusLoginProps, PrimusModal, PrimusModalProps, PrimusNotification, PrimusNotificationCenter, PrimusNotifications, PrimusProvider, PrimusProviderProps, PrimusSidebar, PrimusSidebarProps, PrimusStatCard, PrimusTheme, PrimusThemeProvider, PrimusThemeToggle, QuoteComparison, SecurityDashboard, SidebarItem, StatCardProps, Transaction, TransactionHistory, TransactionHistoryProps, UseRealtimeNotificationsOptions, themeColors, useNotifications, usePrimusAuth, usePrimusTheme, useRealtimeNotifications };