vg-x07df 0.1.0

package/README.md

@@ -0,0 +1,215 @@
+# CallPad Web SDK
+
+A Turborepo monorepo containing the CallPad Web SDK and related packages.
+
+## Project Structure
+
+This monorepo includes the following packages:
+
+### Packages
+
+- `packages/sdk` - CallPad SDK (`vg-x07df`) - Production-ready headless SDK for CallPad audio/video calls
+- `examples/demo` - Demo application showcasing CallPad SDK features
+
+### Tools & Configuration
+
+- **Turborepo** for build orchestration and monorepo management
+- **pnpm** as the package manager
+- **TypeScript** for type checking
+- **Biome** for code linting and formatting
+- **Changesets** for version management and publishing
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js ≥18
+- pnpm ≥9.0.0
+
+### Installation
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build all packages
+pnpm build
+
+# Run type checking
+pnpm check-types
+
+# Run linting
+pnpm lint
+```
+
+### Development
+
+```bash
+# Start development mode
+pnpm dev
+
+# Start development for SDK only
+pnpm dev --filter=vg-x07df
+
+# Start demo application
+pnpm dev --filter=callpad-demo
+```
+
+### Building
+
+```bash
+# Build all packages
+pnpm build
+
+# Build SDK only
+pnpm build --filter=vg-x07df
+
+# Build with type checking
+pnpm build && pnpm check-types
+```
+
+## Publishing Packages
+
+This project uses [Changesets](https://github.com/changesets/changesets) for version management and publishing. The main publishable package is the CallPad SDK (`vg-x07df`).
+
+### Prerequisites for Publishing
+
+1. **NPM Authentication**: Ensure you have npm access and authentication configured
+   ```bash
+   npm login
+   # or set NPM_TOKEN in your .env file
+   ```
+
+2. **Environment Setup**: Create a `.env` file in the root with your npm token:
+   ```bash
+   NPM_TOKEN=your_npm_token_here
+   ```
+
+### Publishing Workflow
+
+#### 1. Create a Changeset
+
+When you make changes that should be included in the next release, create a changeset:
+
+```bash
+# Create a new changeset (interactive)
+pnpm changeset
+```
+
+This will:
+- Prompt you to select which packages to include
+- Ask for the type of change (major, minor, patch)
+- Request a summary of the changes
+
+#### 2. Version Packages
+
+When you're ready to release, update package versions based on changesets:
+
+```bash
+# Process changesets and bump versions
+pnpm version
+```
+
+This will:
+- Update package.json versions according to changesets
+- Update CHANGELOG.md files
+- Remove processed changeset files
+
+#### 3. Publish to npm
+
+Publish the updated packages:
+
+```bash
+# Build, type-check, and publish to npm
+pnpm publish
+
+# Or test the publishing process first
+pnpm publish:dry
+```
+
+This command:
+- Builds only the SDK package (`--filter=vg-x07df`)
+- Runs type checking to ensure code quality
+- Publishes to npm registry with proper authentication
+
+### Changeset Types
+
+- **Patch** (`1.0.0 → 1.0.1`): Bug fixes, small updates
+- **Minor** (`1.0.0 → 1.1.0`): New features, backward-compatible changes
+- **Major** (`1.0.0 → 2.0.0`): Breaking changes
+
+### Example Publishing Flow
+
+```bash
+# 1. Make your changes to the SDK
+# 2. Create a changeset
+pnpm changeset
+# Select packages: vg-x07df
+# Change type: patch/minor/major
+# Summary: "Add new useCallQuality hook"
+
+# 3. Commit your changes
+git add .
+git commit -m "feat: add useCallQuality hook"
+
+# 4. When ready to release, process changesets
+pnpm version
+
+# 5. Publish to npm
+pnpm publish
+
+# 6. Push the version changes
+git push && git push --tags
+```
+
+### CI/CD Publishing
+
+The Azure pipeline (`.azure-pipelines/publish.yml`) automatically publishes when:
+- Changes are pushed to the `main` branch
+- The `NPM_TOKEN` environment variable is configured in Azure DevOps
+
+### Remote Caching
+
+> [!TIP]
+> Vercel Remote Cache is free for all plans. Get started today at [vercel.com](https://vercel.com/signup?/signup?utm_source=remote-cache-sdk&utm_campaign=free_remote_cache).
+
+Turborepo can use a technique known as [Remote Caching](https://turborepo.com/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
+
+By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup?utm_source=turborepo-examples), then enter the following commands:
+
+```
+cd my-turborepo
+
+# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
+turbo login
+
+# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
+npx turbo login
+yarn exec turbo login
+pnpm exec turbo login
+```
+
+This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
+
+Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
+
+```
+# With [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation) installed (recommended)
+turbo link
+
+# Without [global `turbo`](https://turborepo.com/docs/getting-started/installation#global-installation), use your package manager
+npx turbo link
+yarn exec turbo link
+pnpm exec turbo link
+```
+
+## Useful Links
+
+Learn more about the power of Turborepo:
+
+- [Tasks](https://turborepo.com/docs/crafting-your-repository/running-tasks)
+- [Caching](https://turborepo.com/docs/crafting-your-repository/caching)
+- [Remote Caching](https://turborepo.com/docs/core-concepts/remote-caching)
+- [Filtering](https://turborepo.com/docs/crafting-your-repository/running-tasks#using-filters)
+- [Configuration Options](https://turborepo.com/docs/reference/configuration)
+- [CLI Usage](https://turborepo.com/docs/reference/command-line-reference)

package/biome.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.0/schema.json",
+  "files": {
+    "include": [
+      "packages/**/*.ts",
+      "packages/**/*.tsx",
+      "packages/**/*.js",
+      "packages/**/*.jsx"
+    ],
+    "ignore": [
+      "node_modules/**/*",
+      "**/dist/**/*",
+      "**/.turbo/**/*",
+      "**/generated/**/*"
+    ]
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": {
+        "noUnusedTemplateLiteral": "error"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "warn"
+      },
+      "suspicious": {
+        "noExplicitAny": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "always",
+      "trailingCommas": "es5"
+    }
+  }
+}

package/examples/demo/.env.example

@@ -0,0 +1,19 @@
+# CallPad SDK Demo Configuration
+# Copy this file to .env.local and update with your actual values
+
+# API Configuration
+VITE_API_BASE_URL=http://localhost:8080
+
+# Socket.IO Configuration
+VITE_SOCKET_URL=http://localhost:3001/
+
+# LiveKit Configuration
+VITE_LIVEKIT_URL=ws://localhost:7880
+
+# Optional: Enable debug logging
+VITE_DEBUG=true
+
+# Demo Authentication (for testing)
+# These are sample credentials - replace with actual test accounts
+VITE_DEMO_EMAIL=samuel.mashok@voyatekgroup.com
+VITE_DEMO_PASSWORD=Holi$day1

package/examples/demo/CHANGELOG.md

@@ -0,0 +1,22 @@
+# callpad-demo
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - vg-x07df@1.0.2
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - vg-x07df@1.0.1
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies
+  - vg-x07df@1.0.0

package/examples/demo/README.md

@@ -0,0 +1,72 @@
+# CallPad SDK Demo
+
+A simple React demo application showcasing the CallPad SDK features.
+
+## Features
+
+This demo includes placeholder components for:
+
+- **Video Call Interface**: Main video container for call display
+- **Participant Management**: List of call participants with status indicators
+- **Call Controls**: Mute, camera, screen share, and leave call buttons
+- **Connection Status**: Real-time connection quality monitoring
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ (compatible with current Node.js 21.6.2)
+- pnpm
+
+### Installation
+
+```bash
+pnpm install
+```
+
+### Development
+
+Start the development server:
+
+```bash
+pnpm dev
+```
+
+The demo will be available at http://localhost:3000
+
+### Build
+
+Build the production version:
+
+```bash
+pnpm build
+```
+
+### Type Checking
+
+Run TypeScript type checking:
+
+```bash
+pnpm check-types
+```
+
+## Next Steps
+
+Once the CallPad SDK is ready, you can:
+
+1. Install the SDK: `pnpm add callpad-sdk`
+2. Replace placeholder components with actual SDK integration
+3. Connect to real video calls and test SDK functionality
+
+## Project Structure
+
+```
+src/
+├── components/
+│   ├── Header.tsx          # App header with branding
+│   ├── CallDemo.tsx        # Main video call interface
+│   ├── ParticipantsPanel.tsx  # Participant list and status
+│   └── ControlsPanel.tsx   # Call control buttons
+├── App.tsx                 # Main app component
+└── main.tsx               # App entry point
+```

package/examples/demo/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/examples/demo/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CallPad SDK Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/examples/demo/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "callpad-demo",
+  "private": true,
+  "version": "0.0.3",
+  "type": "module",
+  "description": "Demo application showcasing CallPad SDK features",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "check-types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vg-x07df": "workspace:*",
+    "livekit-client": "^2.8.0",
+    "socket.io-client": "^4.7.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^5.0.3",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.4.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.44.0",
+    "vite": "^6.0.0"
+  }
+}