primus-saas-react 1.0.3 → 1.0.5

package/INTEGRATION.md

@@ -1,702 +0,0 @@
-# Primus UI Components - Integration Guide
-
-## Overview
-
-This guide shows developers **exactly how** to integrate Primus UI components into their React applications.
-
----
-
-## Quick Start (5 Minutes)
-
-### Step 1: Install the Package
-
-```bash
-npm install @primus-saas/react
-```
-
-### Step 2: Wrap Your App
-
-```tsx
-// src/main.tsx or src/index.tsx
-import { PrimusProvider } from '@primus-saas/react';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <PrimusProvider 
-    authority="https://your-backend-api.com"
-    clientId="your-app-id"
-  >
-    <App />
-  </PrimusProvider>
-);
-```
-
-### Step 3: Use Components
-
-```tsx
-// src/pages/LoginPage.tsx
-import { PrimusLogin } from '@primus-saas/react';
-
-function LoginPage() {
-  return <PrimusLogin allowSocial />;
-}
-```
-
-**Done!** You now have a working login form.
-
----
-
-## Component Catalog
-
-### 🔐 Authentication Components
-
-#### `<PrimusLogin />`
-
-**Purpose:** Complete login form with email/password and social login options.
-
-**Installation:**
-```bash
-npm install @primus-saas/react
-```
-
-**Basic Usage:**
-```tsx
-import { PrimusLogin } from '@primus-saas/react';
-
-function LoginPage() {
-  return (
-    <PrimusLogin 
-      allowSocial 
-      onSuccess={(user) => console.log('Logged in!', user)}
-    />
-  );
-}
-```
-
-**With Navigation:**
-```tsx
-import { PrimusLogin } from '@primus-saas/react';
-import { useNavigate } from 'react-router-dom';
-
-function LoginPage() {
-  const navigate = useNavigate();
-  
-  return (
-    <PrimusLogin 
-      allowSocial
-      logo="/logo.png"
-      title="Welcome to MyApp"
-      onSuccess={(user) => {
-        console.log('User logged in:', user);
-        navigate('/dashboard');
-      }}
-      onError={(error) => {
-        console.error('Login failed:', error);
-        alert('Login failed: ' + error);
-      }}
-    />
-  );
-}
-```
-
-**Props:**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `allowSocial` | `boolean` | `true` | Show Google/GitHub buttons |
-| `logo` | `string` | `undefined` | URL to logo image |
-| `title` | `string` | `"Sign in to Primus SaaS"` | Form title |
-| `onSuccess` | `(user, token) => void` | `undefined` | Called after successful login |
-| `onError` | `(error) => void` | `undefined` | Called on login failure |
-| `showLoadingOverlay` | `boolean` | `true` | Show loading spinner |
-
-**Social Login Configuration:**
-
-The social login buttons (Google, GitHub) will call your backend's OAuth endpoints. You need to configure these in your backend:
-
-```csharp
-// Backend: Program.cs
-builder.Services.AddPrimusIdentity(opts => {
-    opts.Issuers = new[] {
-        new IssuerConfig {
-            Name = "Google",
-            Type = "Google",
-            ClientId = "your-google-client-id",
-            ClientSecret = "your-google-secret"
-        },
-        new IssuerConfig {
-            Name = "GitHub",
-            Type = "GitHub",
-            ClientId = "your-github-client-id",
-            ClientSecret = "your-github-secret"
-        }
-    };
-});
-```
-
----
-
-#### `<UserProfile />`
-
-**Purpose:** Display user information with avatar.
-
-**Usage:**
-```tsx
-import { UserProfile, usePrimusAuth } from '@primus-saas/react';
-
-function Dashboard() {
-  const { user } = usePrimusAuth();
-  
-  return (
-    <UserProfile 
-      name={user?.name || 'Guest'}
-      email={user?.email}
-      avatar="/avatar.jpg"
-    />
-  );
-}
-```
-
-**Props:**
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `name` | `string` | User's display name |
-| `email` | `string` | User's email |
-| `avatar` | `string` | Avatar image URL |
-| `role` | `string` | User's role (optional) |
-
----
-
-### 💳 Payment Components
-
-#### `<CheckoutForm />`
-
-**Purpose:** Complete payment form with card input.
-
-**Usage:**
-```tsx
-import { CheckoutForm } from '@primus-saas/react';
-
-function CheckoutPage() {
-  const handlePayment = async (paymentDetails) => {
-    const response = await fetch('/api/payments/charge', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        amount: 99.99,
-        ...paymentDetails
-      })
-    });
-    
-    if (response.ok) {
-      alert('Payment successful!');
-    }
-  };
-  
-  return (
-    <CheckoutForm 
-      amount={99.99}
-      currency="USD"
-      onSubmit={handlePayment}
-    />
-  );
-}
-```
-
-**Props:**
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `amount` | `number` | Amount to charge (required) |
-| `currency` | `string` | Currency code (default: "USD") |
-| `onSubmit` | `(details) => Promise<void>` | Payment handler |
-
-**Backend Integration:**
-
-```csharp
-// Backend: PaymentsController.cs
-[HttpPost("charge")]
-public async Task<IActionResult> Charge([FromBody] ChargeRequest request)
-{
-    var result = await _stripeService.ChargeAsync(
-        request.Amount,
-        request.CardToken
-    );
-    
-    return Ok(new { success = true, chargeId = result.Id });
-}
-```
-
----
-
-### 🏦 Banking Components
-
-#### `<CreditCardVisual />`
-
-**Purpose:** 3D credit card display.
-
-**Usage:**
-```tsx
-import { CreditCardVisual } from '@primus-saas/react';
-
-function WalletPage() {
-  return (
-    <CreditCardVisual 
-      cardHolder="JOHN DOE"
-      last4="4242"
-      expiry="12/28"
-      variant="platinum"
-      brand="visa"
-    />
-  );
-}
-```
-
-**Props:**
-
-| Prop | Type | Options | Description |
-|------|------|---------|-------------|
-| `cardHolder` | `string` | - | Name on card |
-| `last4` | `string` | - | Last 4 digits |
-| `expiry` | `string` | - | MM/YY format |
-| `variant` | `string` | `'black'`, `'gold'`, `'platinum'` | Card theme |
-| `brand` | `string` | `'visa'`, `'mastercard'` | Card network |
-
----
-
-#### `<TransactionHistory />`
-
-**Purpose:** List of transactions with filters.
-
-**Usage:**
-```tsx
-import { TransactionHistory } from '@primus-saas/react';
-
-function TransactionsPage() {
-  const transactions = [
-    {
-      id: '1',
-      description: 'Coffee Shop',
-      amount: -4.50,
-      date: '2024-01-15',
-      category: 'Food'
-    },
-    {
-      id: '2',
-      description: 'Salary Deposit',
-      amount: 5000.00,
-      date: '2024-01-01',
-      category: 'Income'
-    }
-  ];
-  
-  return <TransactionHistory transactions={transactions} />;
-}
-```
-
-**Props:**
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `transactions` | `Transaction[]` | Array of transaction objects |
-| `onFilter` | `(filter) => void` | Filter callback |
-
----
-
-### 🏥 Insurance Components
-
-#### `<PolicyCard />`
-
-**Purpose:** Insurance policy summary card.
-
-**Usage:**
-```tsx
-import { PolicyCard } from '@primus-saas/react';
-
-function PoliciesPage() {
-  return (
-    <PolicyCard 
-      policyNumber="POL-2024-001"
-      type="Auto Insurance"
-      status="active"
-      coverageAmount={50000}
-      premiumAmount={150}
-      renewalDate="2024-12-31"
-    />
-  );
-}
-```
-
-**Props:**
-
-| Prop | Type | Options | Description |
-|------|------|---------|-------------|
-| `policyNumber` | `string` | - | Policy ID |
-| `type` | `string` | - | Policy type (Auto, Home, Life) |
-| `status` | `string` | `'active'`, `'pending'`, `'expired'` | Status |
-| `coverageAmount` | `number` | - | Coverage limit |
-| `premiumAmount` | `number` | - | Monthly premium |
-| `renewalDate` | `string` | - | Renewal date |
-
----
-
-#### `<ClaimStatusTracker />`
-
-**Purpose:** Visual claim progress tracker.
-
-**Usage:**
-```tsx
-import { ClaimStatusTracker } from '@primus-saas/react';
-
-function ClaimPage() {
-  return (
-    <ClaimStatusTracker 
-      claimNumber="CLM-2024-001"
-      currentStatus="under_review"
-      estimatedCompletion="2024-02-15"
-    />
-  );
-}
-```
-
----
-
-### 📧 Notification Components
-
-#### `<NotificationFeed />`
-
-**Purpose:** Real-time notification list.
-
-**Usage:**
-```tsx
-import { NotificationFeed } from '@primus-saas/react';
-
-function DashboardPage() {
-  const notifications = [
-    {
-      id: '1',
-      title: 'Payment Received',
-      message: 'Your payment of $99.99 was processed',
-      timestamp: '2024-01-15T10:30:00Z',
-      read: false
-    }
-  ];
-  
-  return (
-    <NotificationFeed 
-      notifications={notifications}
-      onMarkAsRead={(id) => console.log('Mark as read:', id)}
-    />
-  );
-}
-```
-
----
-
-### 📄 Document Components
-
-#### `<DocumentViewer />`
-
-**Purpose:** PDF and image viewer.
-
-**Usage:**
-```tsx
-import { DocumentViewer } from '@primus-saas/react';
-
-function InvoicePage() {
-  return (
-    <DocumentViewer 
-      url="/invoices/2024-001.pdf"
-      type="pdf"
-      title="Invoice #2024-001"
-    />
-  );
-}
-```
-
----
-
-## Complete Integration Example
-
-### Scenario: Add Login to Existing React App
-
-**Your Existing App:**
-```
-my-react-app/
-├── src/
-│   ├── App.tsx
-│   ├── pages/
-│   │   ├── HomePage.tsx
-│   │   └── DashboardPage.tsx
-│   └── main.tsx
-└── package.json
-```
-
-### Step 1: Install Package
-
-```bash
-npm install @primus-saas/react react-router-dom
-```
-
-### Step 2: Update `main.tsx`
-
-```tsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import { PrimusProvider } from '@primus-saas/react';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <PrimusProvider 
-        authority="http://localhost:5000"
-        clientId="my-app"
-        onLoginSuccess={(user, token) => {
-          console.log('User logged in:', user);
-          localStorage.setItem('token', token);
-        }}
-        onLoginError={(error) => {
-          console.error('Login failed:', error);
-        }}
-      >
-        <App />
-      </PrimusProvider>
-    </BrowserRouter>
-  </React.StrictMode>
-);
-```
-
-### Step 3: Create `LoginPage.tsx`
-
-```tsx
-import { PrimusLogin } from '@primus-saas/react';
-import { useNavigate } from 'react-router-dom';
-
-export function LoginPage() {
-  const navigate = useNavigate();
-  
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <PrimusLogin 
-        allowSocial
-        logo="/logo.png"
-        title="Welcome to MyApp"
-        onSuccess={() => navigate('/dashboard')}
-      />
-    </div>
-  );
-}
-```
-
-### Step 4: Update `App.tsx` with Routes
-
-```tsx
-import { Routes, Route, Navigate } from 'react-router-dom';
-import { usePrimusAuth } from '@primus-saas/react';
-import { LoginPage } from './pages/LoginPage';
-import { DashboardPage } from './pages/DashboardPage';
-
-function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const { isAuthenticated } = usePrimusAuth();
-  return isAuthenticated ? <>{children}</> : <Navigate to="/login" />;
-}
-
-function App() {
-  return (
-    <Routes>
-      <Route path="/login" element={<LoginPage />} />
-      <Route 
-        path="/dashboard" 
-        element={
-          <ProtectedRoute>
-            <DashboardPage />
-          </ProtectedRoute>
-        } 
-      />
-      <Route path="/" element={<Navigate to="/dashboard" />} />
-    </Routes>
-  );
-}
-
-export default App;
-```
-
-### Step 5: Use Auth State in Dashboard
-
-```tsx
-import { usePrimusAuth, UserProfile } from '@primus-saas/react';
-
-export function DashboardPage() {
-  const { user, logout } = usePrimusAuth();
-  
-  return (
-    <div>
-      <header>
-        <UserProfile 
-          name={user?.name || 'Guest'}
-          email={user?.email}
-        />
-        <button onClick={logout}>Logout</button>
-      </header>
-      
-      <main>
-        <h1>Welcome, {user?.name}!</h1>
-      </main>
-    </div>
-  );
-}
-```
-
-**Done!** Your app now has authentication.
-
----
-
-## Framework-Specific Guides
-
-### Next.js Integration
-
-```tsx
-// app/providers.tsx
-'use client';
-
-import { PrimusProvider } from '@primus-saas/react';
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <PrimusProvider authority={process.env.NEXT_PUBLIC_API_URL!} clientId="nextjs-app">
-      {children}
-    </PrimusProvider>
-  );
-}
-```
-
-```tsx
-// app/layout.tsx
-import { Providers } from './providers';
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html>
-      <body>
-        <Providers>{children}</Providers>
-      </body>
-    </html>
-  );
-}
-```
-
-### Vite Integration
-
-```tsx
-// src/main.tsx
-import { PrimusProvider } from '@primus-saas/react';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <PrimusProvider authority={import.meta.env.VITE_API_URL} clientId="vite-app">
-    <App />
-  </PrimusProvider>
-);
-```
-
----
-
-## Styling & Customization
-
-### Using Tailwind CSS (Recommended)
-
-Primus components use Tailwind CSS. Install it:
-
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-```js
-// tailwind.config.js
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/@primus-saas/react/**/*.{js,ts,jsx,tsx}"
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'primus-600': '#646cff',
-        'primus-700': '#535bf2',
-      }
-    }
-  }
-}
-```
-
-### Custom Styling
-
-```tsx
-<PrimusLogin 
-  className="custom-login-form"
-  style={{ maxWidth: '400px' }}
-/>
-```
-
----
-
-## TypeScript Support
-
-All components have full TypeScript definitions:
-
-```tsx
-import type { PrimusLoginProps, PrimusUser } from '@primus-saas/react';
-
-const loginProps: PrimusLoginProps = {
-  allowSocial: true,
-  onSuccess: (user: PrimusUser, token: string) => {
-    console.log(user.email);
-  }
-};
-```
-
----
-
-## Troubleshooting
-
-### "Module not found: @primus-saas/react"
-
-**Solution:** Install the package:
-```bash
-npm install @primus-saas/react
-```
-
-### "usePrimusAuth must be used within PrimusProvider"
-
-**Solution:** Wrap your app with `<PrimusProvider>`:
-```tsx
-<PrimusProvider authority="..." clientId="...">
-  <App />
-</PrimusProvider>
-```
-
-### Social login buttons don't work
-
-**Solution:** Configure OAuth providers in your backend:
-```csharp
-builder.Services.AddPrimusIdentity(opts => {
-    opts.Issuers = new[] {
-        new IssuerConfig { Name = "Google", Type = "Google", ... }
-    };
-});
-```
-
----
-
-## Next Steps
-
-1. ✅ Install `@primus-saas/react`
-2. ✅ Wrap app with `<PrimusProvider>`
-3. ✅ Add `<PrimusLogin />` to login page
-4. ✅ Use `usePrimusAuth()` hook for auth state
-5. ✅ Add other components as needed
-
-**Need help?** Check the [Integration Guide](INTEGRATION_GUIDE.md) or [GitHub Issues](https://github.com/primussoft/Primus-SaaS-Framework/issues).

package/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
-}