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

package/README.md

@@ -5,10 +5,9 @@ React hooks and components for the Dora Cell VoIP SDK.
 ## Features
 
 ✅ **React Hooks** - Easy-to-use hooks for call management  
-✅ **Context Provider** - Simple setup with DoraCellProvider  
-✅ **TypeScript support** - Full type definitions included  
-✅ **Auto state management** - Automatic call state and connection tracking  
-✅ **React 18 & 19 compatible** - Works with latest React versions  
+✅ **Context Provider** - Simple setup with `DoraCellProvider`  
+✅ **Pre-built UI** - Includes `Dialpad` and `CallInterface` components  
+✅ **Auto state management** - Automatic call state and connection tracking
 
 ## Installation
 
@@ -25,284 +24,117 @@ pnpm add @dora-cell/sdk @dora-cell/sdk-react jssip
 ### 1. Wrap your app with DoraCellProvider
 
 ```tsx
-import { DoraCellProvider } from '@dora-cell/sdk-react';
+import { DoraCellProvider } from "@dora-cell/sdk-react";
 
 function App() {
   return (
     <DoraCellProvider
       config={{
         auth: {
-          type: 'api-token',
-          apiToken: 'your-api-token-here',
-          apiBaseUrl: 'https://api.usedora.com'
+          type: "extension",
+          extension: "1001",
         },
-        debug: true
+        debug: true,
       }}
+      autoInitialize={true}
     >
-      <YourApp />
+      <MainApp />
     </DoraCellProvider>
   );
 }
 ```
 
-### 2. Use hooks in your components
+### 2. Use Hooks in your components
 
 ```tsx
-import { useCall, useConnectionStatus } from '@dora-cell/sdk-react';
-
-function CallInterface() {
-  const { 
-    call, 
-    hangup, 
-    toggleMute, 
-    callStatus, 
-    callDuration, 
-    isMuted,
-    currentCall 
-  } = useCall();
-  
-  const { isConnected, status } = useConnectionStatus();
-  const [number, setNumber] = useState('');
-
-  const handleCall = async () => {
-    try {
-      await call(number);
-    } catch (error) {
-      console.error('Call failed:', error);
-    }
-  };
+import { useCall, useConnectionStatus } from "@dora-cell/sdk-react";
+
+function CallManager() {
+  const { call, callStatus, callDuration } = useCall();
+  const { isConnected } = useConnectionStatus();
 
   return (
     <div>
-      <p>Status: {isConnected ? 'Connected' : 'Disconnected'}</p>
-      
-      {callStatus === 'idle' && (
-        <>
-          <input
-            value={number}
-            onChange={(e) => setNumber(e.target.value)}
-            placeholder="Enter phone number"
-          />
-          <button onClick={handleCall} disabled={!isConnected}>
-            Call
-          </button>
-        </>
-      )}
-      
-      {callStatus === 'ongoing' && (
-        <>
-          <p>Call with: {currentCall?.remoteNumber}</p>
-          <p>Duration: {callDuration}</p>
-          <button onClick={toggleMute}>
-            {isMuted ? 'Unmute' : 'Mute'}
-          </button>
-          <button onClick={hangup}>Hang Up</button>
-        </>
-      )}
-      
-      {callStatus === 'ringing' && (
-        <p>Ringing...</p>
-      )}
+      <p>Status: {isConnected ? "Ready" : "Connecting..."}</p>
+      {callStatus === "ongoing" && <p>Talking: {callDuration}</p>}
+      <button onClick={() => call("08012345678")} disabled={!isConnected}>
+        Call Now
+      </button>
     </div>
   );
 }
 ```
 
-## API Reference
-
-### DoraCellProvider
-
-Wrap your app with this provider to enable SDK functionality.
-
-```tsx
-<DoraCellProvider
-  config={{
-    auth: {
-      type: 'api-token',
-      apiToken: string,
-      apiBaseUrl?: string
-    },
-    turnServers?: RTCIceServer[],
-    debug?: boolean,
-    autoSelectExtension?: boolean
-  }}
->
-  {children}
-</DoraCellProvider>
-```
-
-### useCall()
-
-Hook for managing calls.
-
-```typescript
-const {
-  // Methods
-  call: (phoneNumber: string) => Promise<void>,
-  hangup: () => void,
-  answerCall: () => void,
-  toggleMute: () => void,
-  
-  // State
-  callStatus: 'idle' | 'ringing' | 'ongoing',
-  callDuration: string, // Formatted as "MM:SS"
-  isMuted: boolean,
-  currentCall: Call | null,
-  error: Error | null
-} = useCall();
-```
-
-**Methods:**
-- `call(phoneNumber)` - Make an outbound call
-- `hangup()` - End the current call
-- `answerCall()` - Answer an incoming call
-- `toggleMute()` - Toggle mute/unmute
-
-**State:**
-- `callStatus` - Current call status
-- `callDuration` - Formatted call duration (e.g., "01:23")
-- `isMuted` - Whether the call is muted
-- `currentCall` - Current call object with details
-- `error` - Any call-related errors
-
-### useConnectionStatus()
-
-Hook for monitoring connection status.
-
-```typescript
-const {
-  isConnected: boolean,
-  status: 'disconnected' | 'connecting' | 'connected' | 'error',
-  error: Error | null
-} = useConnectionStatus();
-```
-
-### useDoraCell()
-
-Access the underlying SDK instance directly.
-
-```typescript
-const sdk = useDoraCell();
-
-// Use SDK methods directly
-sdk.getExtensions();
-sdk.on('call:incoming', (call) => {
-  console.log('Incoming call from:', call.remoteNumber);
-});
-```
-
-## Advanced Usage
+## UI Components
 
-### Handling Incoming Calls
+We provide high-level components that match the Dora Cell design language.
 
-```tsx
-function IncomingCallHandler() {
-  const { currentCall, answerCall, hangup, callStatus } = useCall();
-  const sdk = useDoraCell();
-
-  useEffect(() => {
-    const handleIncoming = (call) => {
-      // Show notification or UI for incoming call
-      console.log('Incoming call from:', call.remoteNumber);
-    };
-
-    sdk.on('call:incoming', handleIncoming);
-    return () => sdk.off('call:incoming', handleIncoming);
-  }, [sdk]);
-
-  if (callStatus === 'ringing' && currentCall?.direction === 'inbound') {
-    return (
-      <div>
-        <p>Incoming call from {currentCall.remoteNumber}</p>
-        <button onClick={answerCall}>Answer</button>
-        <button onClick={hangup}>Decline</button>
-      </div>
-    );
-  }
-
-  return null;
-}
-```
+### `CallInterface`
 
-### Custom Extension Selection
+A slide-over interface that handles the entire call lifecycle (Ringing, Connecting, Ongoing, Mute controls).
 
 ```tsx
-function CallWithExtension() {
-  const sdk = useDoraCell();
-  const [selectedExtension, setSelectedExtension] = useState('');
+import { CallInterface } from "@dora-cell/sdk-react";
 
-  const extensions = sdk.getExtensions();
-
-  const makeCall = async (number: string) => {
-    await sdk.call(number, { extension: selectedExtension });
-  };
+function Dashboard() {
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div>
-      <select 
-        value={selectedExtension} 
-        onChange={(e) => setSelectedExtension(e.target.value)}
-      >
-        {extensions.map(ext => (
-          <option key={ext} value={ext}>{ext}</option>
-        ))}
-      </select>
-      {/* Rest of your call UI */}
-    </div>
+    <>
+      {/* This should be rendered globally to handle incoming calls */}
+      <CallInterface isOpen={isOpen} onOpenChange={setIsOpen} />
+    </>
   );
 }
 ```
 
-### Error Handling
+### `Dialpad`
+
+A flexible keypad for entering numbers and initiating calls.
 
 ```tsx
-function CallWithErrorHandling() {
-  const { call, error, callStatus } = useCall();
-  const [number, setNumber] = useState('');
-
-  const handleCall = async () => {
-    try {
-      await call(number);
-    } catch (err) {
-      console.error('Call failed:', err);
-      // Show error to user
-    }
-  };
+import { Dialpad } from "@dora-cell/sdk-react";
 
+function DialerModal() {
   return (
-    <div>
-      {error && <div className="error">{error.message}</div>}
-      {/* Rest of your UI */}
-    </div>
+    <Dialpad
+      showKeys={true}
+      onCallInitiated={(number) => console.log("Placing call to:", number)}
+    />
   );
 }
 ```
 
-## TypeScript Support
+## API Reference
 
-All hooks and components are fully typed. Import types as needed:
+### `useCall()`
 
-```typescript
-import type { Call, CallStatus, ConnectionStatus } from '@dora-cell/sdk';
-import type { DoraCellConfig } from '@dora-cell/sdk-react';
-```
+Returns methods and state for the active call.
 
-## Examples
+- `call(number)`: Initiate a call.
+- `hangup()`: End current call.
+- `answerCall()`: Answer incoming call.
+- `toggleMute()`: Toggle microphone.
+- `callStatus`: `'idle' | 'connecting' | 'ringing' | 'ongoing' | 'ended'`.
+- `callDuration`: Formatted string `"00:00"`.
+- `isMuted`: Boolean state.
 
-See the `/examples` directory in the main repository for complete working examples:
-- `react-app/` - React application with hooks
-- `nextjs-app/` - Next.js application
+### `useConnectionStatus()`
 
-## Requirements
+Returns the SIP registration state.
 
-- React 18.0.0 or higher (including React 19)
-- @dora-cell/sdk (peer dependency)
-- jssip (peer dependency)
+- `isConnected`: `true` when registered and ready.
+- `connectionStatus`: `'disconnected' | 'connecting' | 'connected' | 'registered' | 'registrationFailed'`.
+- `error`: Any connection error object.
 
-## License
+## Styling
 
-MIT
+The components use Tailwind CSS internally. You can import our styles in your main entry file:
 
-## Related Packages
+```javascript
+import "@dora-cell/sdk-react/dist/styles.css";
+```
+
+## License
 
-- [@dora-cell/sdk](https://www.npmjs.com/package/@dora-cell/sdk) - Core VoIP SDK
+MIT

package/dist/index.d.mts

@@ -2,6 +2,29 @@ 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 {
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onCallEnded?: () => void;
+    maximizeIcon?: React.ReactNode;
+    minimizeIcon?: React.ReactNode;
+}
+declare function CallInterface({ isOpen, onOpenChange, onCallEnded, maximizeIcon, minimizeIcon, }: CallInterfaceProps): react_jsx_runtime.JSX.Element | null;
+
+interface DialpadProps {
+    onCallInitiated?: (number: string) => void;
+    initialNumber?: string;
+    showKeys?: boolean;
+    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,10 +56,12 @@ declare function useCall(): {
     call: (phoneNumber: string, extension?: string) => Promise<void>;
     hangup: () => void;
     toggleMute: () => void;
+    answerCall: () => void;
     callStatus: CallStatus;
     callDuration: string;
     isMuted: boolean;
     currentCall: Call | null;
+    callError: string | undefined;
 };
 /**
  * Hook for connection status
@@ -48,4 +73,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,29 @@ 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 {
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onCallEnded?: () => void;
+    maximizeIcon?: React.ReactNode;
+    minimizeIcon?: React.ReactNode;
+}
+declare function CallInterface({ isOpen, onOpenChange, onCallEnded, maximizeIcon, minimizeIcon, }: CallInterfaceProps): react_jsx_runtime.JSX.Element | null;
+
+interface DialpadProps {
+    onCallInitiated?: (number: string) => void;
+    initialNumber?: string;
+    showKeys?: boolean;
+    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,10 +56,12 @@ declare function useCall(): {
     call: (phoneNumber: string, extension?: string) => Promise<void>;
     hangup: () => void;
     toggleMute: () => void;
+    answerCall: () => void;
     callStatus: CallStatus;
     callDuration: string;
     isMuted: boolean;
     currentCall: Call | null;
+    callError: string | undefined;
 };
 /**
  * Hook for connection status
@@ -48,4 +73,4 @@ declare function useConnectionStatus(): {
     error: Error | null;
 };
 
-export { DoraCellProvider, type DoraCellProviderProps, useCall, useConnectionStatus, useDoraCell };
+export { CallInterface, Dialpad, DoraCellProvider, type DoraCellProviderProps, useCall, useConnectionStatus, useDoraCell };