connectcore-sdk-ui

The connectcore-sdk-ui is a plug-and-play React library that provides high-aesthetic communication components for the ConnectCore platform.

🚀 Features

• One-line Integration: Get a full chat and call dashboard with minimal code.
• Glassmorphism Design: Modern, premium UI out of the box.
• Hybrid Modes: Choose between a fullscreen Dashboard or a floating Widget.
• Cross-Framework: Includes a Web Component wrapper for Angular, Vue, and Vanilla JS.
• Fully Customizable: Override styles via CSS variables or override components via React props.

📦 Installation

npm install connectcore-sdk connectcore-sdk-ui

🛠️ Usage (React)

Option 1: Zero-Effort Widget

import { ConnectCoreProvider, ConnectCoreWidget } from 'connectcore-sdk-ui';
import 'connectcore-sdk-ui/style.css';

const config = {
  serverUrl: 'ws://your-backend:8080/ws',
  appId: 'your-app-id',
  userId: 'alice'
};

function App() {
  return (
    <ConnectCoreProvider config={config}>
      <ConnectCoreWidget mode="floating" />
    </ConnectCoreProvider>
  );
}

Option 2: Headless (Custom UI)

import { useConnectCore } from 'connectcore-sdk-ui';

function CustomUI() {
  const { onlineUsers, startCall } = useConnectCore();
  
  return (
    <div>
      {onlineUsers.map(user => (
        <button onClick={() => startCall(user)}>Call {user}</button>
      ))}
    </div>
  );
}

🌐 Usage (Web Component)

Drop this into any HTML, Angular, or Vue file:

<script src="path/to/connect-core-ui.global.js"></script>
<connectcore-widget 
  config='{"serverUrl":"ws://localhost:8080/ws","appId":"demo","userId":"bob"}'
  mode="floating">
</connectcore-widget>

🎨 Theming

Override global styles using CSS variables:

:root {
  --cc-primary: #ff4757;
  --cc-glass-blur: 20px;
  --cc-radius: 4px;
}

🧩 Component Overrides

Inject your own UI for specific parts of the platform:

<ConnectCoreProvider components={{
    ChatWindow: MyCustomChatWindow
}}>
  <ConnectCoreWidget />
</ConnectCoreProvider>

📄 License

MIT