{"_id":"@adhix11/clientdesk-react","name":"@adhix11/clientdesk-react","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@adhix11/clientdesk-react","version":"1.0.0","description":"A client-facing React SDK for SaaS products to collect support tickets, bug reports, service requests, and change management requests with user context, attachments, and configurable API endpoints.","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"scripts":{"build":"tsup","dev":"tsup --watch","prepublishOnly":"npm run build"},"keywords":["react","sdk","ticketing","support","change-request","change-management","bug-report","client-desk","saas","widget","helpdesk","service-request","issue-tracker","reporting","client-facing"],"author":{"name":"adhix11"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/adhix11/clientdesk-react.git"},"homepage":"https://github.com/adhix11/clientdesk-react#readme","bugs":{"url":"https://github.com/adhix11/clientdesk-react/issues"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@types/react":"^18.2.0","@types/react-dom":"^18.2.0","react":"^18.2.0","react-dom":"^18.2.0","tsup":"^8.0.0","typescript":"^5.3.0"},"_id":"@adhix11/clientdesk-react@1.0.0","_nodeVersion":"22.19.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-9e9LZbFXoILgR5w/DfKARNrlIxhNB7l/RRLg1kRyC7ecNbVlFgOSZSF1XxXahX92CJMP/j3BWYDyQP8mTQJLGw==","shasum":"480e217115bd8769c2b98183a1752ba8d6292a80","tarball":"https://registry.npmjs.org/@adhix11/clientdesk-react/-/clientdesk-react-1.0.0.tgz","fileCount":9,"unpackedSize":480521,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC1+tasjzWA3ke0IuNxDVZGGEIX9jm/BoXKkHuOYaJz+QIgEkxY9v38ANYpCNbfiP64OrgBf56/GqRxTjjDKtwLjjg="}]},"_npmUser":{"name":"adhix11","email":"adhix11@gmail.com"},"directories":{},"maintainers":[{"name":"adhix11","email":"adhix11@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/clientdesk-react_1.0.0_1782747503927_0.0840305669431769"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-29T15:38:23.735Z","1.0.0":"2026-06-29T15:38:24.061Z","modified":"2026-06-29T15:38:24.300Z"},"maintainers":[{"name":"adhix11","email":"adhix11@gmail.com"}],"description":"A client-facing React SDK for SaaS products to collect support tickets, bug reports, service requests, and change management requests with user context, attachments, and configurable API endpoints.","homepage":"https://github.com/adhix11/clientdesk-react#readme","keywords":["react","sdk","ticketing","support","change-request","change-management","bug-report","client-desk","saas","widget","helpdesk","service-request","issue-tracker","reporting","client-facing"],"repository":{"type":"git","url":"git+https://github.com/adhix11/clientdesk-react.git"},"author":{"name":"adhix11"},"bugs":{"url":"https://github.com/adhix11/clientdesk-react/issues"},"license":"MIT","readme":"# @adhix11/clientdesk-react\n\n> A client-facing React SDK for SaaS products to collect support tickets, bug reports, service requests, and change management requests with user context, attachments, and configurable API endpoints.\n\n[![npm version](https://img.shields.io/npm/v/@adhix11/clientdesk-react)](https://www.npmjs.com/package/@adhix11/clientdesk-react)\n[![license](https://img.shields.io/npm/l/@adhix11/clientdesk-react)](./LICENSE)\n\n---\n\n## What is ClientDesk React?\n\n**ClientDesk React** is a **client-facing ticket and change request submission SDK** — not a full ticketing system.\n\nIt lets SaaS products add a polished, branded reporting widget so users can:\n- 🐛 Report bugs and issues\n- 🎫 Raise support tickets\n- 🔄 Request feature/workflow/configuration changes\n- 📎 Upload screenshots and file attachments\n\nYour SDK captures **rich user context** (browser, device, page URL, timezone) automatically and sends everything as structured data to **your own API**.\n\n> **Important:** This SDK does **not** manage admin workflows, assignment, SLA, internal comments, escalation, or approvals. It only captures and submits structured client requests.\n\n---\n\n## Installation\n\n```bash\nnpm install @adhix11/clientdesk-react\n```\n\n**Peer dependencies:** `react >= 17`, `react-dom >= 17`\n\n---\n\n## Quick Start\n\n### Both Ticketing + Change Requests\n\n```tsx\nimport { ClientDeskProvider, ClientRequestWidget } from \"@adhix11/clientdesk-react\";\n\nfunction App() {\n  return (\n    <ClientDeskProvider\n      config={{\n        apiUrl: \"https://api.your-saas.com\",\n        clientKey: \"public_client_key\",\n        mode: \"both\",\n      }}\n    >\n      <ClientRequestWidget />\n    </ClientDeskProvider>\n  );\n}\n```\n\n### Ticketing Only\n\n```tsx\nimport { ClientDeskProvider, TicketReporter } from \"@adhix11/clientdesk-react\";\n\nfunction App() {\n  return (\n    <ClientDeskProvider\n      config={{\n        apiUrl: \"https://api.example.com\",\n        clientKey: \"client_key\",\n        mode: \"ticket\",\n      }}\n    >\n      <TicketReporter />\n    </ClientDeskProvider>\n  );\n}\n```\n\n### Change Management Only\n\n```tsx\nimport { ClientDeskProvider, ChangeRequestReporter } from \"@adhix11/clientdesk-react\";\n\nfunction App() {\n  return (\n    <ClientDeskProvider\n      config={{\n        apiUrl: \"https://api.example.com\",\n        clientKey: \"client_key\",\n        mode: \"change\",\n      }}\n    >\n      <ChangeRequestReporter />\n    </ClientDeskProvider>\n  );\n}\n```\n\n---\n\n## Components\n\n| Component | Purpose |\n|-----------|---------|\n| `<ClientDeskProvider />` | Global config: API URL, key, user, theme |\n| `<ClientRequestWidget />` | Floating button/modal with ticket + change options |\n| `<TicketReporter />` | Ticket submission form |\n| `<ChangeRequestReporter />` | Change request submission form |\n| `<MyRequests />` | Client-side list of user's own submitted requests |\n| `<AttachmentUploader />` | Image/file upload helper |\n\n---\n\n## Component API\n\n### `<ClientDeskProvider />`\n\nWrap your app or a subtree with this provider.\n\n```tsx\n<ClientDeskProvider\n  config={{\n    apiUrl: \"https://api.example.com\",      // Required\n    clientKey: \"public_client_key\",          // Required\n    mode: \"both\",                            // \"ticket\" | \"change\" | \"both\"\n    endpoints: {                             // Custom API paths\n      createTicket: \"/client/tickets\",\n      createChangeRequest: \"/client/change-requests\",\n      uploadAttachment: \"/client/attachments\",\n      listMyRequests: \"/client/requests/me\",\n    },\n    user: {                                  // User info\n      id: \"user_123\",\n      name: \"John Doe\",\n      email: \"john@example.com\",\n      companyId: \"company_456\",\n      role: \"Manager\",\n    },\n    theme: {                                 // Theme customization\n      primaryColor: \"#6366f1\",\n      accentColor: \"#8b5cf6\",\n      mode: \"light\",                         // \"light\" | \"dark\"\n      borderRadius: 12,\n    },\n    getAuthToken: () => localStorage.getItem(\"token\"),\n    appName: \"MyApp\",\n    appVersion: \"2.1.0\",\n    environment: \"production\",\n  }}\n>\n  {children}\n</ClientDeskProvider>\n```\n\n### `<ClientRequestWidget />`\n\nFloating action button with a modal menu.\n\n```tsx\n<ClientRequestWidget\n  position=\"bottom-right\"           // \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\"\n  ticketCustomFields={[...]}        // Custom fields for ticket form\n  changeCustomFields={[...]}        // Custom fields for change form\n  onSuccess={(data) => console.log(data)}\n  onError={(err) => console.error(err)}\n/>\n```\n\n### `<TicketReporter />`\n\n```tsx\n// Inline\n<TicketReporter />\n\n// Button trigger (opens modal)\n<TicketReporter trigger=\"button\" buttonText=\"Report Issue\" />\n\n// With custom fields\n<TicketReporter\n  customFields={[\n    { name: \"assetId\", label: \"Asset ID\", type: \"text\" },\n    { name: \"location\", label: \"Location\", type: \"select\", options: [\"Chennai\", \"Salem\", \"Bangalore\"] },\n  ]}\n  onSuccess={(data) => console.log(data)}\n/>\n```\n\n### `<ChangeRequestReporter />`\n\n```tsx\n// Inline\n<ChangeRequestReporter />\n\n// Button trigger\n<ChangeRequestReporter trigger=\"button\" buttonText=\"Request Change\" />\n```\n\n### `<MyRequests />`\n\n```tsx\n<MyRequests\n  limit={10}\n  onRequestClick={(request) => console.log(request)}\n/>\n```\n\n### `<AttachmentUploader />`\n\n```tsx\nconst [files, setFiles] = useState([]);\n\n<AttachmentUploader\n  files={files}\n  onChange={setFiles}\n  maxFileSize={10 * 1024 * 1024}  // 10MB\n  maxFiles={5}\n/>\n```\n\n---\n\n## Custom Fields\n\nEvery SaaS product has different needs. Add custom fields to any form:\n\n```tsx\n<TicketReporter\n  customFields={[\n    { name: \"assetId\", label: \"Asset ID\", type: \"text\", required: true },\n    { name: \"location\", label: \"Location\", type: \"select\", options: [\"Chennai\", \"Salem\", \"Bangalore\"] },\n    { name: \"tags\", label: \"Tags\", type: \"multi-select\", options: [\"Urgent\", \"Frontend\", \"Backend\", \"Data\"] },\n    { name: \"deadline\", label: \"Deadline\", type: \"date\" },\n    { name: \"count\", label: \"Affected Users\", type: \"number\" },\n    { name: \"critical\", label: \"Is Critical?\", type: \"checkbox\" },\n    { name: \"env\", label: \"Environment\", type: \"radio\", options: [\"Production\", \"Staging\", \"Dev\"] },\n    { name: \"notes\", label: \"Additional Notes\", type: \"textarea\" },\n    { name: \"logFile\", label: \"Log File\", type: \"file\" },\n  ]}\n/>\n```\n\n**Supported types:** `text`, `textarea`, `select`, `multi-select`, `date`, `number`, `checkbox`, `radio`, `file`\n\n---\n\n## Auto-Captured Context\n\nEvery submission automatically includes:\n\n| Field | Source |\n|-------|--------|\n| Page URL | `window.location.href` |\n| Browser | User agent parsing |\n| Browser Version | User agent parsing |\n| Operating System | User agent parsing |\n| Device Type | User agent parsing |\n| Screen Size | `window.innerWidth/Height` |\n| Timezone | `Intl.DateTimeFormat` |\n| Timestamp | `new Date().toISOString()` |\n| Language | `navigator.language` |\n| App Name | Config |\n| App Version | Config |\n| Module Name | Config |\n| Environment | Config |\n\n---\n\n## API Configuration\n\nEndpoints are fully configurable — works with any REST backend:\n\n```tsx\n<ClientDeskProvider\n  config={{\n    apiUrl: \"https://api.example.com\",\n    clientKey: \"public_client_key\",\n    endpoints: {\n      createTicket: \"/client/tickets\",\n      createChangeRequest: \"/client/change-requests\",\n      uploadAttachment: \"/client/attachments\",\n      listMyRequests: \"/client/requests/me\",\n    },\n  }}\n>\n```\n\nCompatible with: **LoopBack 4**, **Express**, **NestJS**, **Laravel**, **Django**, **Spring Boot**, or any REST API.\n\n---\n\n## Authentication\n\nThe `clientKey` is a **public project/client identifier** (not a secret). For secure apps, inject auth tokens:\n\n```tsx\n// Dynamic token\n<ClientDeskProvider\n  config={{\n    apiUrl: \"https://api.example.com\",\n    clientKey: \"public_client_key\",\n    getAuthToken: () => localStorage.getItem(\"token\"),\n  }}\n>\n\n// Static headers\n<ClientDeskProvider\n  config={{\n    apiUrl: \"https://api.example.com\",\n    clientKey: \"public_client_key\",\n    headers: {\n      Authorization: \"Bearer your_token_here\",\n    },\n  }}\n>\n```\n\nThe backend should verify the real user/session. The frontend key only identifies the SaaS client/project.\n\n---\n\n## Theme Customization\n\n```tsx\n<ClientDeskProvider\n  config={{\n    ...config,\n    theme: {\n      primaryColor: \"#6366f1\",\n      accentColor: \"#8b5cf6\",\n      backgroundColor: \"#f8fafc\",\n      surfaceColor: \"#ffffff\",\n      textColor: \"#0f172a\",\n      mutedColor: \"#64748b\",\n      borderColor: \"#e2e8f0\",\n      successColor: \"#10b981\",\n      errorColor: \"#ef4444\",\n      warningColor: \"#f59e0b\",\n      fontFamily: \"'Inter', sans-serif\",\n      borderRadius: 12,\n      mode: \"dark\",  // \"light\" | \"dark\"\n    },\n  }}\n>\n```\n\n---\n\n## Ticket Form Fields\n\n| Field | Type |\n|-------|------|\n| Subject | text (required) |\n| Description | textarea (required) |\n| Issue Type | select: Bug, Support, Access Issue, Performance Issue, Data Issue, Payment Issue, Other |\n| Category/Module | text |\n| Priority | select: Low, Medium, High, Critical |\n| Severity | select: Minor, Major, Critical, Blocker |\n| Steps to Reproduce | textarea |\n| Expected Result | textarea |\n| Actual Result | textarea |\n| Attachments | file upload |\n\n## Change Request Form Fields\n\n| Field | Type |\n|-------|------|\n| Change Title | text (required) |\n| Description | textarea (required) |\n| Change Type | select: Feature, Configuration, Workflow, Report, User Access, Data, Integration, Other |\n| Business Reason | textarea (required) |\n| Affected Module | text |\n| Expected Outcome | textarea |\n| Urgency | select: Low, Medium, High, Critical |\n| Impact Level | select: Low, Medium, High, Enterprise-Wide |\n| Preferred Date | date |\n| Attachments | file upload |\n\n---\n\n## UI Modes\n\n```tsx\n// Floating widget (default)\n<ClientRequestWidget position=\"bottom-right\" />\n\n// Inline form\n<TicketReporter />\n\n// Modal button\n<TicketReporter trigger=\"button\" buttonText=\"Report Issue\" />\n```\n\n---\n\n## Hook: useClientDesk\n\nAccess config, theme, and API client programmatically:\n\n```tsx\nimport { useClientDesk } from \"@adhix11/clientdesk-react\";\n\nfunction MyComponent() {\n  const { config, theme, apiClient } = useClientDesk();\n  // ...\n}\n```\n\n---\n\n## TypeScript\n\nFully typed. Import any type you need:\n\n```tsx\nimport type {\n  ClientDeskConfig,\n  TicketFormData,\n  ChangeRequestFormData,\n  CustomField,\n  CapturedContext,\n  ApiResponse,\n} from \"@adhix11/clientdesk-react\";\n```\n\n---\n\n## License\n\nMIT © [adhix11](https://github.com/adhix11)\n","readmeFilename":"README.md","_rev":"1-1d757a87361813c296fa8bed84647e0c"}