astra-sdk-web 1.0.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astra-sdk-web",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Official Astra SDK for JavaScript/TypeScript",
   "type": "module",
   "main": "./dist/astra-sdk.cjs.js",
@@ -11,6 +11,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/astra-sdk.es.js",
       "require": "./dist/astra-sdk.cjs.js"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.es.js",
+      "require": "./dist/components.cjs.js"
     }
   },
   "files": [
@@ -28,7 +33,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "build:lib": "tsc && vite build",
+    "build:lib": "tsup && node scripts/copy-assets.mjs",
     "lint": "eslint .",
     "preview": "vite preview",
     "type-check": "tsc --noEmit"
@@ -39,14 +44,31 @@
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "cross-env": "^10.1.0",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.19",
     "terser": "^5.44.1",
+    "tsup": "^8.5.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.3.0"
+  },
+  "dependencies": {
+    "@mediapipe/camera_utils": "^0.3.1675466862",
+    "@mediapipe/drawing_utils": "^0.3.1675466124",
+    "@mediapipe/face_detection": "^0.4.1646425229",
+    "@mediapipe/face_mesh": "^0.4.1633559619",
+    "qrcode.react": "^4.2.0",
+    "react-router-dom": "^7.11.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   }
 }

package/src/App.tsx

@@ -1,13 +1,17 @@
-
-import './App.css'
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import QRCodePage from './pages/QRCodePage';
+import MobileRoute from './pages/MobileRoute';
 
 function App() {
-
   return (
-    <>
-      <h1>Hello World</h1>
-    </>
-  )
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Navigate to="/qr" replace />} />
+        <Route path="/qr" element={<QRCodePage />} />
+        <Route path="/mobileroute" element={<MobileRoute />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
-export default App
+export default App;

package/src/components/KycFlow.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { KycProvider } from '../contexts/KycContext';
+import MobileRoute from '../pages/MobileRoute';
+import QRCodePage from '../pages/QRCodePage';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+
+export interface KycFlowProps {
+  apiBaseUrl: string;
+  sessionId: string;
+  serverKey: string;
+  deviceType?: string;
+  startAtQr?: boolean;
+  onClose?: () => void;
+}
+
+export const KycFlow: React.FC<KycFlowProps> = ({
+  apiBaseUrl,
+  sessionId,
+  serverKey,
+  deviceType,
+  startAtQr = true,
+  onClose,
+}) => {
+  return (
+    <KycProvider
+      apiBaseUrl={apiBaseUrl}
+      sessionId={sessionId}
+      serverKey={serverKey}
+      deviceType={deviceType}
+    >
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Navigate to={startAtQr ? "/qr" : "/mobileroute"} replace />} />
+          <Route path="/qr" element={<QRCodePage onClose={onClose} />} />
+          <Route path="/mobileroute" element={<MobileRoute onClose={onClose} />} />
+        </Routes>
+      </BrowserRouter>
+    </KycProvider>
+  );
+};
+

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export { KycFlow } from './KycFlow';
+export type { KycFlowProps } from './KycFlow';
+

package/src/contexts/KycContext.tsx

@@ -0,0 +1,66 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { KycApiService, type KycApiConfig } from '../services/kycApiService';
+
+interface KycContextValue {
+  apiService: KycApiService | null;
+  setApiConfig: (config: KycApiConfig) => void;
+}
+
+const KycContext = createContext<KycContextValue>({
+  apiService: null,
+  setApiConfig: () => {},
+});
+
+export const useKycContext = () => {
+  const context = useContext(KycContext);
+  if (!context) {
+    throw new Error('useKycContext must be used within KycProvider');
+  }
+  return context;
+};
+
+interface KycProviderProps {
+  children: ReactNode;
+  apiBaseUrl: string;
+  sessionId: string;
+  serverKey: string;
+  deviceType?: string;
+}
+
+export const KycProvider: React.FC<KycProviderProps> = ({
+  children,
+  apiBaseUrl,
+  sessionId,
+  serverKey,
+  deviceType,
+}) => {
+  const [apiService, setApiService] = React.useState<KycApiService | null>(null);
+
+  React.useEffect(() => {
+    if (apiBaseUrl && sessionId && serverKey) {
+      const service = new KycApiService({
+        apiBaseUrl,
+        sessionId,
+        serverKey,
+        deviceType,
+      });
+      setApiService(service);
+    }
+  }, [apiBaseUrl, sessionId, serverKey, deviceType]);
+
+  const setApiConfig = React.useCallback((config: KycApiConfig) => {
+    if (apiService) {
+      apiService.updateConfig(config);
+    } else {
+      const service = new KycApiService(config);
+      setApiService(service);
+    }
+  }, [apiService]);
+
+  return (
+    <KycContext.Provider value={{ apiService, setApiConfig }}>
+      {children}
+    </KycContext.Provider>
+  );
+};
+

package/src/features/documentUpload/hooks/useDocumentUpload.ts

@@ -0,0 +1,226 @@
+import { useState, useRef, useEffect } from 'react';
+import type { DocumentUploadCallbacks } from '../types';
+import type { DocumentUploadState } from '../types';
+
+export interface DocumentUploadHookCallbacks extends DocumentUploadCallbacks {
+  onDocumentUpload?: (blob: Blob, docType: string) => Promise<void>;
+}
+
+export function useDocumentUpload(callbacks?: DocumentUploadHookCallbacks) {
+  const [state, setState] = useState<DocumentUploadState>({
+    docType: 'CNIC',
+    isDocScanMode: false,
+    docPreviewUrl: null,
+    docFileName: '',
+    loading: false,
+  });
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const docVideoRef = useRef<HTMLVideoElement>(null);
+  const docStreamRef = useRef<MediaStream | null>(null);
+  const docPendingBlobRef = useRef<Blob | null>(null);
+
+  const getRearStream = async (): Promise<MediaStream> => {
+    const attempts: MediaStreamConstraints[] = [
+      { video: { facingMode: { exact: 'environment' }, width: { ideal: 1280 }, height: { ideal: 1920 } }, audio: false } as MediaStreamConstraints,
+      { video: { facingMode: 'environment', width: { ideal: 1280 }, height: { ideal: 1920 } }, audio: false } as unknown as MediaStreamConstraints,
+      { video: { facingMode: { exact: 'environment' }, width: { ideal: 720 }, height: { ideal: 1280 } }, audio: false } as MediaStreamConstraints,
+      { video: { facingMode: 'environment', width: { ideal: 720 }, height: { ideal: 1280 } }, audio: false } as unknown as MediaStreamConstraints,
+    ];
+
+    for (const c of attempts) {
+      try { return await navigator.mediaDevices.getUserMedia(c); } catch { /* continue */ }
+    }
+
+    let temp: MediaStream | null = null;
+    try {
+      temp = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+    } catch (e) {
+      throw e;
+    } finally {
+      try { temp?.getTracks().forEach(t => t.stop()); } catch {}
+    }
+
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const videoInputs = devices.filter(d => d.kind === 'videoinput');
+    const rear = videoInputs.find(d => /back|rear|environment/i.test(d.label));
+    const chosen = rear || videoInputs.find(d => !/front|user|face/i.test(d.label)) || videoInputs[0];
+    if (!chosen) throw new Error('No video input devices found');
+
+    const byDeviceAttempts: MediaStreamConstraints[] = [
+      { video: { deviceId: { exact: chosen.deviceId }, width: { ideal: 1280 }, height: { ideal: 1920 } }, audio: false },
+      { video: { deviceId: { exact: chosen.deviceId }, width: { ideal: 720 }, height: { ideal: 1280 } }, audio: false },
+      { video: { deviceId: { exact: chosen.deviceId } }, audio: false } as MediaStreamConstraints,
+    ];
+    for (const c of byDeviceAttempts) {
+      try { return await navigator.mediaDevices.getUserMedia(c); } catch { /* continue */ }
+    }
+
+    return await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+  };
+
+  const startDocCamera = async () => {
+    try {
+      if (docStreamRef.current) {
+        try { docStreamRef.current.getTracks().forEach(t => t.stop()); } catch {}
+        docStreamRef.current = null;
+      }
+      const stream = await getRearStream();
+      if (docVideoRef.current) {
+        docVideoRef.current.srcObject = stream;
+        await docVideoRef.current.play().catch(() => {});
+      }
+      docStreamRef.current = stream;
+    } catch (e: any) {
+      console.error('Could not start document camera:', e);
+      setState(prev => ({ ...prev, isDocScanMode: false }));
+      if (callbacks?.onError) {
+        callbacks.onError(e);
+      }
+    }
+  };
+
+  const handleDocumentUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (state.loading) return;
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setState(prev => ({ ...prev, docFileName: file.name || '' }));
+    try {
+      const objectUrl = URL.createObjectURL(file);
+      setState(prev => ({ ...prev, docPreviewUrl: objectUrl }));
+      docPendingBlobRef.current = file;
+    } catch (err: any) {
+      console.error('Could not preview document:', err);
+      if (callbacks?.onError) {
+        callbacks.onError(err);
+      }
+    }
+  };
+
+  const handleConfirmDocumentUpload = async () => {
+    if (state.loading || !docPendingBlobRef.current) return;
+    setState(prev => ({ ...prev, loading: true }));
+    try {
+      const file = docPendingBlobRef.current as File;
+      
+      // Upload document if callback provided
+      if (callbacks?.onDocumentUpload) {
+        try {
+          await callbacks.onDocumentUpload(file, state.docType);
+        } catch (uploadError: any) {
+          throw new Error(uploadError.message || 'Failed to upload document');
+        }
+      }
+      
+      if (callbacks?.onUpload) {
+        callbacks.onUpload(file, state.docType);
+      }
+      
+      setState(prev => ({
+        ...prev,
+        docPreviewUrl: null,
+        docFileName: '',
+        loading: false,
+      }));
+      docPendingBlobRef.current = null;
+    } catch (err: any) {
+      console.error('Document upload failed:', err);
+      setState(prev => ({ ...prev, loading: false }));
+      if (callbacks?.onError) {
+        callbacks.onError(err);
+      }
+    }
+  };
+
+  const handleManualCapture = async () => {
+    if (!docVideoRef.current || state.loading) return;
+    
+    setState(prev => ({ ...prev, loading: true }));
+    try {
+      const video = docVideoRef.current;
+      
+      // Create canvas and capture current frame
+      const canvas = document.createElement('canvas');
+      const width = video.videoWidth || 1280;
+      const height = video.videoHeight || 720;
+      canvas.width = width;
+      canvas.height = height;
+      
+      const ctx = canvas.getContext('2d');
+      if (!ctx) throw new Error('Canvas not supported');
+      
+      // Draw video frame to canvas
+      ctx.drawImage(video, 0, 0, width, height);
+      
+      // Convert to blob
+      const blob = await new Promise<Blob>((resolve) => {
+        canvas.toBlob((blob: Blob | null) => {
+          resolve(blob || new Blob());
+        }, 'image/jpeg', 0.92);
+      });
+      
+      const file = new File([blob], 'document.jpg', { type: 'image/jpeg' });
+      
+      // Upload document if callback provided
+      if (callbacks?.onDocumentUpload) {
+        try {
+          await callbacks.onDocumentUpload(file, state.docType);
+        } catch (uploadError: any) {
+          throw new Error(uploadError.message || 'Failed to upload document');
+        }
+      }
+      
+      // Create preview URL
+      const objectUrl = URL.createObjectURL(file);
+      setState(prev => ({
+        ...prev,
+        docPreviewUrl: objectUrl,
+        isDocScanMode: false,
+        loading: false,
+      }));
+      
+      docPendingBlobRef.current = file;
+      
+      // Stop camera
+      if (docStreamRef.current) {
+        docStreamRef.current.getTracks().forEach((t) => t.stop());
+        docStreamRef.current = null;
+      }
+      
+      if (callbacks?.onScan) {
+        callbacks.onScan(file, state.docType);
+      }
+    } catch (err: any) {
+      console.error('Capture failed:', err);
+      setState(prev => ({ ...prev, loading: false }));
+      if (callbacks?.onError) {
+        callbacks.onError(err);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (state.isDocScanMode) {
+      startDocCamera();
+    }
+    
+    return () => {
+      if (docStreamRef.current) {
+        docStreamRef.current.getTracks().forEach((t) => t.stop());
+        docStreamRef.current = null;
+      }
+    };
+  }, [state.isDocScanMode]);
+
+  return {
+    state,
+    setState,
+    fileInputRef,
+    docVideoRef,
+    handleDocumentUpload,
+    handleConfirmDocumentUpload,
+    handleManualCapture,
+    startDocCamera,
+  };
+}
+

package/src/features/documentUpload/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export { useDocumentUpload } from './hooks/useDocumentUpload';
+

package/src/features/documentUpload/types.ts

@@ -0,0 +1,16 @@
+export type DocumentType = 'CNIC' | 'Passport' | 'DrivingLicense';
+
+export interface DocumentUploadState {
+  docType: DocumentType;
+  isDocScanMode: boolean;
+  docPreviewUrl: string | null;
+  docFileName: string;
+  loading: boolean;
+}
+
+export interface DocumentUploadCallbacks {
+  onUpload?: (file: File, docType: DocumentType) => void;
+  onScan?: (file: File, docType: DocumentType) => void;
+  onError?: (error: Error) => void;
+}
+

package/src/features/faceScan/hooks/useCamera.ts

@@ -0,0 +1,62 @@
+import { useRef, useState, useEffect } from 'react';
+
+export function useCamera() {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const [cameraReady, setCameraReady] = useState(false);
+
+  const startCamera = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ 
+        video: { 
+          facingMode: "user",
+          width: { ideal: 1280 },
+          height: { ideal: 720 }
+        }, 
+        audio: false 
+      });
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        await videoRef.current.play().catch(() => { });
+        requestAnimationFrame(() => {
+          try {
+            const v = videoRef.current!;
+            // Canvas will be synced separately
+          } catch { }
+        });
+      }
+      streamRef.current = stream;
+      setCameraReady(true);
+    } catch (e: any) {
+      console.error('Camera access error:', e);
+      setCameraReady(false);
+      throw e;
+    }
+  };
+
+  const stopCamera = () => {
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+    }
+    if (videoRef.current) {
+      videoRef.current.srcObject = null;
+    }
+    setCameraReady(false);
+  };
+
+  useEffect(() => {
+    startCamera();
+    return () => {
+      stopCamera();
+    };
+  }, []);
+
+  return {
+    videoRef,
+    cameraReady,
+    startCamera,
+    stopCamera,
+  };
+}
+