@dora-cell/sdk-react 0.1.1-beta.3 → 0.1.1-beta.7

package/README.md

@@ -22,6 +22,35 @@ pnpm add @dora-cell/sdk @dora-cell/sdk-react jssip
 
 ## Quick Start
 
+### Authentication
+
+You can authenticate using either an API Token (recommended for production) or Direct SIP Credentials (useful for testing/development).
+
+#### Option 1: API Token (Production)
+The SDK will fetch SIP credentials from your backend using the token.
+```tsx
+const config = {
+  auth: {
+    type: 'api-token',
+    apiToken: 'YOUR_API_TOKEN',
+    // apiBaseUrl: 'https://api.your-backend.com' (Optional)
+  }
+};
+```
+
+#### Option 2: Extension Authentication (Plug & Play)
+You can connect using just your extension number. The SDK handles the server configuration automatically.
+
+```tsx
+const config = {
+  auth: {
+    type: 'extension',
+    extension: '1000',
+    // password: '...' // Optional override (default: 1234)
+  }
+};
+```
+
 ### 1. Wrap your app with DoraCellProvider
 
 ```tsx
@@ -191,6 +220,47 @@ sdk.on('call:incoming', (call) => {
 });
 ```
 
+### UI Components
+
+The SDK includes pre-built UI components for typical call flows.
+
+#### CallInterface
+A complete active call modal that handles ringing, connecting, and ongoing call states.
+
+```tsx
+import { CallInterface } from '@dora-cell/sdk-react';
+
+function MyApp() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <CallInterface 
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        onCallEnded={() => console.log('Call ended')}
+      />
+    </>
+  );
+}
+```
+
+#### Dialpad
+A dialpad component for entering phone numbers and placing calls.
+
+```tsx
+import { Dialpad } from '@dora-cell/sdk-react';
+
+function MyApp() {
+  return (
+    <Dialpad 
+      onCallInitiated={(number) => console.log('Calling:', number)}
+      initialNumber=""
+    />
+  );
+}
+```
+
 ## Advanced Usage
 
 ### Handling Incoming Calls

package/dist/index.d.mts

@@ -2,6 +2,56 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { DoraCellConfig, CallStatus, Call, ConnectionStatus, DoraCell } from '@dora-cell/sdk';
 
+interface CallInterfaceProps {
+    /**
+     * Whether the interface is open/visible
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when visibility changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback when call ends (useful for invalidating queries)
+     */
+    onCallEnded?: () => void;
+    /**
+     * Custom maximize icon component
+     */
+    maximizeIcon?: React.ReactNode;
+    /**
+     * Custom minimize icon component
+     */
+    minimizeIcon?: React.ReactNode;
+}
+declare function CallInterface({ isOpen, onOpenChange, onCallEnded, maximizeIcon, minimizeIcon, }: CallInterfaceProps): react_jsx_runtime.JSX.Element | null;
+
+interface DialpadProps {
+    /**
+     * Callback when call is initiated
+     */
+    onCallInitiated?: (number: string) => void;
+    /**
+     * Initial number to populate
+     */
+    initialNumber?: string;
+    /**
+     * Whether to show the dialpad keys (0-9)
+     */
+    showKeys?: boolean;
+    /**
+     * Custom class name for the container
+     */
+    className?: string;
+    availableExtensions?: Array<{
+        label: string;
+        value: string;
+    }>;
+    selectedExtension?: string;
+    onExtensionChange?: (ext: string) => void;
+}
+declare function Dialpad({ onCallInitiated, initialNumber, showKeys, className, availableExtensions, selectedExtension, onExtensionChange, }: DialpadProps): react_jsx_runtime.JSX.Element;
+
 interface DoraCellContextValue {
     sdk: DoraCell | null;
     connectionStatus: ConnectionStatus;
@@ -33,6 +83,7 @@ declare function useCall(): {
     call: (phoneNumber: string, extension?: string) => Promise<void>;
     hangup: () => void;
     toggleMute: () => void;
+    answerCall: () => void;
     callStatus: CallStatus;
     callDuration: string;
     isMuted: boolean;
@@ -48,4 +99,4 @@ declare function useConnectionStatus(): {
     error: Error | null;
 };
 
-export { DoraCellProvider, type DoraCellProviderProps, useCall, useConnectionStatus, useDoraCell };
+export { CallInterface, Dialpad, DoraCellProvider, type DoraCellProviderProps, useCall, useConnectionStatus, useDoraCell };

package/dist/index.d.ts

@@ -2,6 +2,56 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { DoraCellConfig, CallStatus, Call, ConnectionStatus, DoraCell } from '@dora-cell/sdk';
 
+interface CallInterfaceProps {
+    /**
+     * Whether the interface is open/visible
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when visibility changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback when call ends (useful for invalidating queries)
+     */
+    onCallEnded?: () => void;
+    /**
+     * Custom maximize icon component
+     */
+    maximizeIcon?: React.ReactNode;
+    /**
+     * Custom minimize icon component
+     */
+    minimizeIcon?: React.ReactNode;
+}
+declare function CallInterface({ isOpen, onOpenChange, onCallEnded, maximizeIcon, minimizeIcon, }: CallInterfaceProps): react_jsx_runtime.JSX.Element | null;
+
+interface DialpadProps {
+    /**
+     * Callback when call is initiated
+     */
+    onCallInitiated?: (number: string) => void;
+    /**
+     * Initial number to populate
+     */
+    initialNumber?: string;
+    /**
+     * Whether to show the dialpad keys (0-9)
+     */
+    showKeys?: boolean;
+    /**
+     * Custom class name for the container
+     */
+    className?: string;
+    availableExtensions?: Array<{
+        label: string;
+        value: string;
+    }>;
+    selectedExtension?: string;
+    onExtensionChange?: (ext: string) => void;
+}
+declare function Dialpad({ onCallInitiated, initialNumber, showKeys, className, availableExtensions, selectedExtension, onExtensionChange, }: DialpadProps): react_jsx_runtime.JSX.Element;
+
 interface DoraCellContextValue {
     sdk: DoraCell | null;
     connectionStatus: ConnectionStatus;
@@ -33,6 +83,7 @@ declare function useCall(): {
     call: (phoneNumber: string, extension?: string) => Promise<void>;
     hangup: () => void;
     toggleMute: () => void;
+    answerCall: () => void;
     callStatus: CallStatus;
     callDuration: string;
     isMuted: boolean;
@@ -48,4 +99,4 @@ declare function useConnectionStatus(): {
     error: Error | null;
 };
 
-export { DoraCellProvider, type DoraCellProviderProps, useCall, useConnectionStatus, useDoraCell };
+export { CallInterface, Dialpad, DoraCellProvider, type DoraCellProviderProps, useCall, useConnectionStatus, useDoraCell };