@nibssplc/cams-sdk-react 0.0.1-beta.55 → 0.0.1-beta.58

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nibssplc/cams-sdk-react",
-  "version": "0.0.1-beta.55",
+  "version": "0.0.1-beta.58",
   "description": "React hooks and components for NIBSS CAMS SDK",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -29,8 +29,24 @@
   "author": "NIBSS PLC, Caleb Boluwade",
   "license": "MIT",
   "dependencies": {
-    "@nibssplc/cams-sdk": "^0.0.1-beta.33",
-    "tslib": "^2.6.0"
+    "@hookform/resolvers": "^5.2.2",
+    "@nibssplc/cams-sdk": "^0.0.1-beta.35",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "axios": "^1.12.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.22",
+    "input-otp": "^1.4.2",
+    "ldrs": "^1.1.7",
+    "lucide-react": "^0.544.0",
+    "react-hook-form": "^7.63.0",
+    "sonner": "^2.0.7",
+    "tailwind": "^4.0.0",
+    "tailwind-merge": "^3.3.1",
+    "tslib": "^2.6.0",
+    "zod": "^4.1.11"
   },
   "optionalDependencies": {
     "@azure/msal-browser": "^3.0.0",
@@ -42,6 +58,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@testing-library/jest-dom": "^6.8.0",
@@ -50,9 +67,11 @@
     "@types/react-dom": "^19",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rollup": "^4.21.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "ts-jest": "^29.4.4",
     "typescript": "^5.4.5"
   },

package/README.md

@@ -1,397 +0,0 @@
-# NIBSS CAMS SDK - React
-
-React hooks and components for NIBSS CAMS SDK with support for popup authentication and Azure AD MSAL integration.
-
-## Installation
-
-```bash
-npm install @nibssplc/cams-sdk-react
-
-# For Azure AD MSAL support (optional)
-npm install @azure/msal-browser @azure/msal-react
-```
-
-## Usage
-
-### Popup Authentication (Default)
-
-```tsx
-import { CAMSProvider, useCAMSContext } from '@nibssplc/cams-sdk-react';
-
-function App() {
-  return (
-    <CAMSProvider appCode="your-app-code" storageKey="CAMS-AUTH-SDK">
-      <LoginComponent />
-    </CAMSProvider>
-  );
-}
-
-function LoginComponent() {
-  const { login, logout, isAuthenticated, isLoading, userProfile, error } = useCAMSContext();
-
-  const handleLogin = async () => {
-    try {
-      await login({
-        camsUrl: 'https://your-cams-instance.com/auth',
-        messageOrigin: 'your-cams-instance.com',
-        windowWidth: 500,
-        windowHeight: 600,
-      });
-    } catch (err) {
-      console.error('Login failed:', err);
-    }
-  };
-
-  if (error) {
-    return <div>Error: {error.message}</div>;
-  }
-
-  if (isAuthenticated) {
-    return (
-      <div>
-        <p>Welcome, {userProfile?.name}!</p>
-        <button onClick={logout}>Logout</button>
-      </div>
-    );
-  }
-
-  return (
-    <button onClick={handleLogin} disabled={isLoading}>
-      {isLoading ? 'Logging in...' : 'Login'}
-    </button>
-  );
-}
-```
-
-### Direct Hook Usage
-
-```tsx
-import { useCAMSAuth } from '@nibssplc/cams-sdk-react';
-
-function LoginComponent() {
-  const { 
-    login, 
-    logout, 
-    isAuthenticated, 
-    isLoading, 
-    error, 
-    token, 
-    profile 
-  } = useCAMSAuth({
-    appCode: 'your-app-code',
-    storageKey: 'CAMS-AUTH-SDK',
-    onAuthSuccess: (token) => console.log('Login successful'),
-    onAuthError: (error) => console.error('Login failed:', error),
-  });
-
-  const handleLogin = async () => {
-    await login({
-      camsUrl: 'https://your-cams-instance.com/auth',
-      messageOrigin: 'your-cams-instance.com',
-      windowWidth: 500,
-      windowHeight: 600,
-    });
-  };
-
-  return (
-    <div>
-      {isAuthenticated ? (
-        <div>
-          <p>Welcome, {profile?.name}!</p>
-          <p>Token: {token}</p>
-          <button onClick={logout}>Logout</button>
-        </div>
-      ) : (
-        <button onClick={handleLogin} disabled={isLoading}>
-          {isLoading ? 'Logging in...' : 'Login'}
-        </button>
-      )}
-      {error && <div>Error: {error.message}</div>}
-    </div>
-  );
-}
-```
-
-### Azure AD MSAL Integration with MFA
-
-```tsx
-import { CAMSMSALProvider, useCAMSMSALContext } from '@nibssplc/cams-sdk-react';
-import { Configuration } from '@azure/msal-browser';
-
-const msalConfig: Configuration = {
-  auth: {
-    clientId: 'your-client-id',
-    authority: 'https://login.microsoftonline.com/your-tenant-id',
-    redirectUri: window.location.origin,
-  },
-};
-
-function App() {
-  return (
-    <CAMSMSALProvider 
-      msalConfig={msalConfig}
-      mfaUrl="/auth/multi-factor"
-      storageKey="CAMS-MSAL-AUTH-SDK"
-      scopes={['openid', 'profile', 'email']}
-      onAuthSuccess={(token) => console.log('Auth complete:', token)}
-      onAuthError={(error) => console.error('Auth failed:', error)}
-    >
-      <LoginComponent />
-    </CAMSMSALProvider>
-  );
-}
-
-function LoginComponent() {
-  const { 
-    login, 
-    logout, 
-    isAuthenticated, 
-    isLoading, 
-    error,
-    userProfile,
-    accessToken,
-    idToken
-  } = useCAMSMSALContext();
-
-  if (error) {
-    return <div>Error: {error.message}</div>;
-  }
-
-  if (isAuthenticated) {
-    return (
-      <div>
-        <p>Welcome, {userProfile?.name}!</p>
-        <p>Access Token: {accessToken}</p>
-        <button onClick={logout}>Logout</button>
-      </div>
-    );
-  }
-
-  return (
-    <button onClick={login} disabled={isLoading}>
-      {isLoading ? 'Logging in...' : 'Login with Azure AD'}
-    </button>
-  );
-}
-```
-
-### Direct MSAL Hook Usage
-
-```tsx
-import { useCAMSMSALAuth } from '@nibssplc/cams-sdk-react';
-import { useMsal } from '@azure/msal-react';
-
-function LoginComponent() {
-  const { 
-    login, 
-    logout, 
-    isAuthenticated, 
-    isLoading, 
-    error,
-    accessToken,
-    idToken,
-    appCode
-  } = useCAMSMSALAuth({
-    mfaUrl: '/auth/multi-factor',
-    storageKey: 'CAMS-MSAL-AUTH-SDK',
-    scopes: ['openid', 'profile', 'email'],
-    onAuthSuccess: (token) => console.log('Login successful'),
-    onAuthError: (error) => console.error('Login failed:', error),
-  });
-
-  return (
-    <div>
-      {isAuthenticated ? (
-        <div>
-          <p>Access Token: {accessToken}</p>
-          <p>ID Token: {idToken}</p>
-          <button onClick={logout}>Logout</button>
-        </div>
-      ) : (
-        <button onClick={login} disabled={isLoading}>
-          {isLoading ? 'Logging in...' : 'Login with Azure AD'}
-        </button>
-      )}
-      {error && <div>Error: {error.message}</div>}
-    </div>
-  );
-}
-```
-
-## API Reference
-
-### useCAMSAuth
-
-Hook for popup-based CAMS authentication.
-
-```tsx
-const {
-  login,           // (config: CAMSConfig) => Promise<void>
-  logout,          // () => Promise<void>
-  isAuthenticated, // boolean
-  isLoading,       // boolean
-  error,           // CAMSError | null
-  token,           // string | null
-  profile,         // Profile | null
-  appCode,         // string
-  storageKey,      // string
-} = useCAMSAuth(options);
-```
-
-**Options:**
-- `appCode: string` - Application code (required)
-- `storageKey?: string` - Storage key (default: "CAMS-AUTH-SDK")
-- `onAuthSuccess?: (token: string) => void` - Success callback
-- `onAuthError?: (error: CAMSError) => void` - Error callback
-- `onTokenExpired?: () => void` - Token expiration callback
-
-### useCAMSMSALAuth
-
-Hook for Azure AD MSAL authentication with MFA support.
-
-```tsx
-const {
-  login,           // () => Promise<void>
-  logout,          // () => Promise<void>
-  isAuthenticated, // boolean
-  isLoading,       // boolean
-  error,           // CAMSError | null
-  idToken,         // string
-  accessToken,     // string
-  appCode,         // string
-  storageKey,      // string
-} = useCAMSMSALAuth(options);
-```
-
-**Options:**
-- `mfaUrl?: string` - MFA URL (default: "/auth/multi-factor")
-- `storageKey?: string` - Storage key (default: "CAMS-MSAL-AUTH-SDK")
-- `scopes?: string[]` - MSAL scopes (default: ["openid", "profile", "email"])
-- `prompt?: string` - MSAL prompt (default: "login")
-- `allowedOrigins?: string[]` - Allowed message origins
-- `messageOrigin?: string` - Expected message origin
-- `onAuthSuccess?: (token: string) => void` - Success callback
-- `onAuthError?: (error: CAMSError) => void` - Error callback
-
-### CAMSProvider
-
-Provider component for popup-based authentication.
-
-```tsx
-<CAMSProvider 
-  appCode="your-app-code" 
-  storageKey="CAMS-AUTH-SDK"
-  onAuthSuccess={(token) => console.log('Success')}
-  onAuthError={(error) => console.error('Error:', error)}
-  onTokenExpired={() => console.log('Token expired')}
->
-  {children}
-</CAMSProvider>
-```
-
-### CAMSMSALProvider
-
-Provider component for Azure AD MSAL integration.
-
-```tsx
-<CAMSMSALProvider 
-  msalConfig={config} 
-  msalInstance={instance}
-  mfaUrl="/auth/multi-factor"
-  storageKey="CAMS-MSAL-AUTH-SDK"
-  scopes={['openid', 'profile', 'email']}
-  onAuthSuccess={(token) => console.log('Success')}
-  onAuthError={(error) => console.error('Error:', error)}
->
-  {children}
-</CAMSMSALProvider>
-```
-
-**Props:**
-- `msalConfig: Configuration` - MSAL configuration object (required)
-- `msalInstance?: PublicClientApplication` - Optional pre-configured MSAL instance
-- `children: ReactNode` - Child components
-- All `UseCAMSMSALAuthOptions` are also supported as props
-
-### Context Hooks
-
-#### useCAMSContext
-
-Access CAMS authentication context (must be used within `CAMSProvider`).
-
-```tsx
-const {
-  login, logout, isAuthenticated, isLoading, error, token, profile,
-  userProfile, setUserProfile, appCode, storageKey
-} = useCAMSContext();
-```
-
-#### useCAMSMSALContext
-
-Access CAMS MSAL authentication context (must be used within `CAMSMSALProvider`).
-
-```tsx
-const {
-  login, logout, isAuthenticated, isLoading, error, 
-  idToken, accessToken, appCode, storageKey,
-  userProfile, setUserProfile
-} = useCAMSMSALContext();
-```
-
-### Components
-
-#### ProtectedRoute
-
-Route component that requires authentication.
-
-```tsx
-<ProtectedRoute fallback={<LoginPage />}>
-  <Dashboard />
-</ProtectedRoute>
-```
-
-#### ClientOnly
-
-Wrapper component for client-side only rendering (useful for SSR).
-
-```tsx
-<ClientOnly fallback={<div>Loading...</div>}>
-  <CAMSProvider>
-    <App />
-  </CAMSProvider>
-</ClientOnly>
-```
-
-## Types
-
-### Profile
-
-```typescript
-interface Profile {
-  userProfile: {
-    name: string;
-    image?: string | null;
-    tokens: {
-      Bearer: string;
-    };
-  };
-}
-```
-
-### CAMSError
-
-```typescript
-class CAMSError extends Error {
-  constructor(public type: CAMSErrorType, message: string);
-}
-
-enum CAMSErrorType {
-  POPUP_BLOCKED = "POPUP_BLOCKED",
-  TIMEOUT = "TIMEOUT",
-  INVALID_ORIGIN = "INVALID_ORIGIN",
-  USER_CANCELLED = "USER_CANCELLED",
-  INVALID_URL = "INVALID_URL",
-  MAX_RETRIES_EXCEEDED = "MAX_RETRIES_EXCEEDED",
-  API_VALIDATION_ERROR = "VALIDATION_ERROR",
-}
-```