vg-x07df 0.1.0

package/examples/demo/src/contexts/AuthContext.tsx

@@ -0,0 +1,105 @@
+import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import type { ReactNode } from 'react';
+import { AuthService } from '../services/auth.service';
+import type { AuthState, LoginCredentials } from '../types/auth.types';
+
+interface AuthContextValue extends AuthState {
+  login: (credentials: LoginCredentials) => Promise<{ success: boolean; error?: string }>;
+  logout: () => void;
+  clearError: () => void;
+}
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [authState, setAuthState] = useState<AuthState>({
+    isAuthenticated: false,
+    user: null,
+    token: null,
+    loading: true,
+    error: null,
+  });
+
+  // Initialize auth state on mount
+  useEffect(() => {
+    const token = AuthService.getToken();
+    const user = AuthService.getUser();
+    const isAuthenticated = AuthService.isAuthenticated();
+
+    console.log('AuthProvider: Initializing auth state', { isAuthenticated, hasToken: !!token, hasUser: !!user });
+
+    setAuthState({
+      isAuthenticated,
+      user,
+      token,
+      loading: false,
+      error: null,
+    });
+  }, []);
+
+  const login = useCallback(async (credentials: LoginCredentials) => {
+    console.log('AuthProvider: Starting login');
+    setAuthState(prev => ({ ...prev, loading: true, error: null }));
+
+    try {
+      const { token, user } = await AuthService.login(credentials);
+      
+      console.log('AuthProvider: Login successful', { hasToken: !!token, user });
+      
+      setAuthState({
+        isAuthenticated: true,
+        user,
+        token,
+        loading: false,
+        error: null,
+      });
+
+      return { success: true };
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Login failed';
+      
+      console.error('AuthProvider: Login failed', errorMessage);
+      
+      setAuthState(prev => ({
+        ...prev,
+        loading: false,
+        error: errorMessage,
+      }));
+
+      return { success: false, error: errorMessage };
+    }
+  }, []);
+
+  const logout = useCallback(() => {
+    console.log('AuthProvider: Logging out');
+    AuthService.logout();
+    setAuthState({
+      isAuthenticated: false,
+      user: null,
+      token: null,
+      loading: false,
+      error: null,
+    });
+  }, []);
+
+  const clearError = useCallback(() => {
+    setAuthState(prev => ({ ...prev, error: null }));
+  }, []);
+
+  const value: AuthContextValue = {
+    ...authState,
+    login,
+    logout,
+    clearError,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuthContext() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuthContext must be used within an AuthProvider');
+  }
+  return context;
+}

package/examples/demo/src/hooks/useAuth.ts

@@ -0,0 +1,5 @@
+import { useAuthContext } from '../contexts/AuthContext';
+
+export function useAuth() {
+  return useAuthContext();
+}

package/examples/demo/src/hooks/useCallTimer.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+import { useCallState } from 'vg-x07df';
+
+export function useCallTimer() {
+  const [duration, setDuration] = useState(0);
+  const { status } = useCallState();
+
+  useEffect(() => {
+    if (status !== 'ACTIVE') {
+      setDuration(0);
+      return;
+    }
+
+    // Start timer when call becomes active
+    const startTime = Date.now();
+    
+    const interval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - startTime) / 1000);
+      setDuration(elapsed);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [status]);
+
+  const formatDuration = (seconds: number): string => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+
+    if (hours > 0) {
+      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+    
+    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  return {
+    duration,
+    formattedDuration: formatDuration(duration),
+    isActive: status === 'ACTIVE',
+  };
+}

package/examples/demo/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/examples/demo/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/examples/demo/src/services/auth.service.ts

@@ -0,0 +1,153 @@
+import type { LoginCredentials, AuthUser } from '../types/auth.types';
+
+const AUTH_URL = 'https://gopaddibackend.vgtechdemo.com/api/v1/auth/login';
+const TOKEN_STORAGE_KEY = 'callpad_demo_token';
+const USER_STORAGE_KEY = 'callpad_demo_user';
+
+// Function to decode JWT without verification (copied from get-token.ts)
+function decodeJWT(token: string): any {
+  const parts = token.split('.');
+  if (parts.length !== 3) {
+    return null;
+  }
+
+  try {
+    const decodedPayload = JSON.parse(
+      atob(parts[1].replace(/-/g, '+').replace(/_/g, '/'))
+    );
+    return decodedPayload;
+  } catch (e) {
+    return null;
+  }
+}
+
+// Extract user info from JWT token
+function extractUserFromToken(token: string): AuthUser | null {
+  const decoded = decodeJWT(token);
+  if (!decoded) return null;
+
+  return {
+    id: decoded.sub || decoded.userId || decoded.id,
+    email: decoded.email,
+    firstName: decoded.firstName || decoded.first_name,
+    lastName: decoded.lastName || decoded.last_name,
+    avatarUrl: decoded.avatarUrl || decoded.avatar_url,
+    exp: decoded.exp,
+    iat: decoded.iat,
+  };
+}
+
+export class AuthService {
+  // Login function using the same logic as fetchTokenSilent from get-token.ts
+  static async login(credentials: LoginCredentials): Promise<{ token: string; user: AuthUser }> {
+    const response = await fetch(AUTH_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify({
+        email: credentials.email,
+        password: credentials.password,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      let errorMessage = `Authentication failed: ${response.status} ${response.statusText}`;
+      
+      try {
+        const errorJson = JSON.parse(errorText);
+        errorMessage = errorJson.message || errorJson.error || errorMessage;
+      } catch {
+        if (errorText) {
+          errorMessage += ` - ${errorText}`;
+        }
+      }
+      
+      throw new Error(errorMessage);
+    }
+
+    const data = (await response.json()) as any;
+    
+    // Debug: Log the actual response structure
+    console.log('Login response:', data);
+    
+    // Extract token from response - try multiple possible locations
+    const token = data.token || 
+                  data.access_token || 
+                  data.jwt || 
+                  data.data?.token ||
+                  data.data?.access_token ||
+                  data.data?.jwt ||
+                  data.data?.user_details?.token ||
+                  data.data?.user_details?.access_token;
+
+    console.log('Extracted token:', token ? 'Found token' : 'No token found');
+
+    if (!token) {
+      console.error('Full response structure:', JSON.stringify(data, null, 2));
+      throw new Error('No token found in response');
+    }
+
+    // Extract user info from token
+    const user = extractUserFromToken(token);
+    if (!user) {
+      throw new Error('Invalid token format');
+    }
+
+    // Store token and user info
+    localStorage.setItem(TOKEN_STORAGE_KEY, token);
+    localStorage.setItem(USER_STORAGE_KEY, JSON.stringify(user));
+
+    return { token, user };
+  }
+
+  // Get stored token
+  static getToken(): string | null {
+    return localStorage.getItem(TOKEN_STORAGE_KEY);
+  }
+
+  // Get stored user
+  static getUser(): AuthUser | null {
+    const userJson = localStorage.getItem(USER_STORAGE_KEY);
+    if (!userJson) return null;
+    
+    try {
+      return JSON.parse(userJson);
+    } catch {
+      return null;
+    }
+  }
+
+  // Check if user is authenticated and token is valid
+  static isAuthenticated(): boolean {
+    const token = this.getToken();
+    const user = this.getUser();
+    
+    if (!token || !user) return false;
+
+    // Check token expiration if available
+    if (user.exp) {
+      const now = Math.floor(Date.now() / 1000);
+      if (now >= user.exp) {
+        this.logout();
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  // Logout and clear storage
+  static logout(): void {
+    localStorage.removeItem(TOKEN_STORAGE_KEY);
+    localStorage.removeItem(USER_STORAGE_KEY);
+  }
+
+  // Get authorization header for API calls
+  static getAuthHeader(): { Authorization: string } | {} {
+    const token = this.getToken();
+    return token ? { Authorization: `Bearer ${token}` } : {};
+  }
+}

package/examples/demo/src/types/auth.types.ts

@@ -0,0 +1,31 @@
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+export interface AuthUser {
+  id: string;
+  email: string;
+  firstName?: string;
+  lastName?: string;
+  avatarUrl?: string;
+  exp?: number;
+  iat?: number;
+}
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  user: AuthUser | null;
+  token: string | null;
+  loading: boolean;
+  error: string | null;
+}
+
+export interface AuthResponse {
+  token?: string;
+  access_token?: string;
+  jwt?: string;
+  data?: {
+    token: string;
+  };
+}

package/examples/demo/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/examples/demo/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/examples/demo/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": [],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/examples/demo/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    host: true,
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+})

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "vg-x07df",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "turbo run build",
+    "dev": "turbo run dev",
+    "lint": "biome check .",
+    "format": "biome format --write .",
+    "lint:fix": "biome check --apply .",
+    "check": "biome check --fix --unsafe",
+    "check-types": "turbo run check-types",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "publish:dev": "turbo run build check-types --filter=vg-x07df && dotenv -- changeset publish",
+    "publish:dry": "turbo run build check-types --filter=vg-x07df && dotenv -- changeset publish --dry-run"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.8.0",
+    "@changesets/cli": "^2.29.7",
+    "dotenv-cli": "^10.0.0",
+    "turbo": "^2.5.8",
+    "typescript": "5.9.2"
+  },
+  "packageManager": "pnpm@9.0.0",
+  "engines": {
+    "node": ">=18"
+  }
+}

package/packages/sdk/CHANGELOG.md

@@ -0,0 +1,33 @@
+# vg-x07df
+
+## 1.0.2
+
+### Patch Changes
+
+- Update README documentation
+
+  - Enhanced README with improved examples and API reference
+  - Updated hook descriptions to match actual implementation
+  - Corrected usage examples for better clarity
+
+## 1.0.1
+
+### Patch Changes
+
+- Add comprehensive README and LICENSE files
+
+  - Added detailed README.md with installation, usage examples, and API reference
+  - Added MIT LICENSE file
+  - Fixed missing documentation on npm package page
+
+## 1.0.0
+
+### Major Changes
+
+- Initial release of CallPad SDK
+
+  - Production-ready headless SDK for CallPad audio/video calls
+  - React hooks for managing call state, participants, media controls
+  - LiveKit integration for real-time communication
+  - Socket.io support for call signaling
+  - TypeScript support with full type definitions

package/packages/sdk/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Voyatek Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/packages/sdk/README.md

@@ -0,0 +1,97 @@
+# CallPad SDK
+
+Production-ready headless SDK for CallPad audio/video calls with React integration.
+
+## Installation
+
+```bash
+npm install vg-x07df
+# or
+yarn add vg-x07df
+# or
+pnpm add vg-x07df
+```
+
+## Quick Start
+
+```tsx
+import { CallpadSdkProvider, useCallActions, useCallState } from 'vg-x07df';
+
+function App() {
+  return (
+    <CallpadSdkProvider config={{ apiUrl: 'your-api-url' }}>
+      <CallInterface />
+    </CallpadSdkProvider>
+  );
+}
+
+function CallInterface() {
+  const { initiate, accept, end } = useCallActions();
+  const { status, participants } = useCallState();
+
+  const handleStartCall = () => {
+    initiate(['user@example.com'], 'VIDEO');
+  };
+
+  return (
+    <div>
+      <h1>Call Status: {status}</h1>
+      <button onClick={handleStartCall}>Start Video Call</button>
+      <div>Participants: {participants.length}</div>
+    </div>
+  );
+}
+```
+
+## Features
+
+- 🎥 **Audio & Video Calls** - High-quality real-time communication
+- ⚡ **React Hooks** - Modern React integration with custom hooks
+- 🔧 **Headless UI** - Bring your own UI components
+- 📱 **Responsive** - Works across desktop and mobile
+- 🔒 **Secure** - End-to-end encrypted communications
+- 🎛️ **Media Controls** - Camera, microphone, and screen sharing
+- 👥 **Multi-participant** - Support for group calls
+- 📊 **Call Quality** - Real-time quality monitoring
+- 🔔 **Event System** - Comprehensive call event handling
+
+## API Reference
+
+### Providers
+
+- `CallpadSdkProvider` - Main provider component for SDK configuration
+
+### Hooks
+
+- `useCallActions()` - Actions for managing calls (initiate, accept, decline, end, cancel)
+- `useCallState()` - Current call state and session information
+- `useParticipants()` - Participant management and information
+- `useMediaControls()` - Camera, microphone, and screen sharing controls
+- `useDevices()` - Audio/video device selection
+- `useEvent()` - SDK event subscriptions  
+- `useCallQuality()` - Real-time call quality metrics
+- `useErrors()` - Error handling and management
+
+### LiveKit Integration
+
+```tsx
+import { LiveKitProvider, useTrack } from 'vg-x07df/livekit';
+
+// Access LiveKit room and tracks directly
+const track = useTrack();
+```
+
+## Requirements
+
+- React ≥18.0.0
+- React DOM ≥18.0.0
+- LiveKit Client ≥2.8.0
+- Socket.IO Client ≥4.7.0
+
+## TypeScript Support
+
+This package includes full TypeScript definitions. No additional @types packages needed.
+
+```tsx
+import type { CallState, Participant, CallQuality } from 'vg-x07df';
+```