{"_id":"@biowilli/issue-reporter","_rev":"3-1f13cccd7b2190b74b499a0ab9a5304a","name":"@biowilli/issue-reporter","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@biowilli/issue-reporter","version":"0.1.0","keywords":["feedback","screenshot","gitlab","github","jira","issue-tracker","bug-report","react","vue","angular","user-feedback","framework-agnostic"],"author":{"name":"biowilli"},"license":"MIT","_id":"@biowilli/issue-reporter@0.1.0","maintainers":[{"name":"biowilli","email":"mr.monz.philipp@gmail.com"}],"homepage":"https://github.com/fairkom/issue-reporter#readme","bugs":{"url":"https://github.com/fairkom/issue-reporter/issues"},"dist":{"shasum":"b2b129cc4a88ac1078378239d0e59e152c17a6ee","tarball":"https://registry.npmjs.org/@biowilli/issue-reporter/-/issue-reporter-0.1.0.tgz","fileCount":29,"integrity":"sha512-WGljaPWMg1SsKQ0XQlOoCEfiIcrnH9JdZUyOeAEC0Bhtvi8UH5Sjh2GBIK5WoOKE+0wJRC0cLAYmewlXCPqXyw==","signatures":[{"sig":"MEYCIQDAjPwaa5fY6SE5fdvL15HeqrDR8enE9W9xaGODBeW33gIhAMO8M19gmSC95bs63aA3SNt8DBUCe2ofuqCVadl4zGUx","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":410816},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"838dfd0906fdbd61f023c52aea1f64fe2d7bd555","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"biowilli","email":"mr.monz.philipp@gmail.com"},"repository":{"url":"git+https://github.com/fairkom/issue-reporter.git","type":"git"},"_npmVersion":"10.8.2","description":"Framework-agnostic feedback reporter with screenshot capture for GitLab, GitHub, Jira and custom issue trackers","directories":{},"_nodeVersion":"20.19.2","dependencies":{"dom-to-image-more":"^3.7.2"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rollup":"^4.30.1","typescript":"^5.7.2","@types/react":"^18.3.18","@types/react-dom":"^18.3.5","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.2","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^15.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/issue-reporter_0.1.0_1766071863681_0.45843479561944234","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@biowilli/issue-reporter","version":"0.1.1","keywords":["feedback","screenshot","gitlab","github","jira","issue-tracker","bug-report","react","vue","angular","user-feedback","framework-agnostic"],"author":{"name":"biowilli"},"license":"MIT","_id":"@biowilli/issue-reporter@0.1.1","maintainers":[{"name":"biowilli","email":"mr.monz.philipp@gmail.com"}],"homepage":"https://github.com/fairkom/issue-reporter#readme","bugs":{"url":"https://github.com/fairkom/issue-reporter/issues"},"dist":{"shasum":"539f4f84321f572b1a7cde7c13930687a07643f8","tarball":"https://registry.npmjs.org/@biowilli/issue-reporter/-/issue-reporter-0.1.1.tgz","fileCount":29,"integrity":"sha512-oOJbha1vyZakJPomd9tFvw5GJfIf+XWOPU3rvCQ0YOhSJh+KKAtn4FGQyEPKYKtETNvb3uAyV7x7j/S+ZkVHgA==","signatures":[{"sig":"MEYCIQC2ywG4q4bmYs8vbn4e7eReA2FYQjuN2OY7BpPPx94UYgIhAOb8nt7Mlc52gOgst/kbkc4k80RnlUPinb5IJZqlV5Qw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":431165},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"34c71ae86b15ddf00679340f371d62cf4022397a","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"biowilli","email":"mr.monz.philipp@gmail.com"},"repository":{"url":"git+https://github.com/fairkom/issue-reporter.git","type":"git"},"_npmVersion":"10.8.2","description":"Framework-agnostic feedback reporter with screenshot capture for GitLab, GitHub, Jira and custom issue trackers","directories":{},"_nodeVersion":"20.19.2","dependencies":{"dom-to-image-more":"^3.7.2"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rollup":"^4.30.1","typescript":"^5.7.2","@types/react":"^18.3.18","@types/react-dom":"^18.3.5","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.2","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^15.3.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/issue-reporter_0.1.1_1766406178086_0.44658956722965515","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@biowilli/issue-reporter","version":"0.1.2","type":"module","description":"Framework-agnostic feedback reporter with screenshot capture for GitLab, GitHub, Jira and custom issue trackers","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"jest","lint":"eslint src --ext .ts,.tsx","prepublishOnly":"npm run build"},"keywords":["feedback","screenshot","gitlab","github","jira","issue-tracker","bug-report","react","vue","angular","user-feedback","framework-agnostic"],"author":{"name":"biowilli"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/fairkom/issue-reporter.git"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"devDependencies":{"@rollup/plugin-commonjs":"^28.0.2","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^12.1.2","@types/react":"^18.3.18","@types/react-dom":"^18.3.5","rollup":"^4.30.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","tslib":"^2.8.1","typescript":"^5.7.2"},"dependencies":{"dom-to-image-more":"^3.7.2"},"gitHead":"3b73e1618de4c11da43ccd9b1a5b36855cedf452","_id":"@biowilli/issue-reporter@0.1.2","bugs":{"url":"https://github.com/fairkom/issue-reporter/issues"},"homepage":"https://github.com/fairkom/issue-reporter#readme","_nodeVersion":"25.8.2","_npmVersion":"11.11.1","dist":{"integrity":"sha512-o6IMqSPUUOrw8XFvpfXSbTzRqq/YzwGZb6g2pN48mJmrsMgdZt7DhvU/GswKjHuI4xpTHfL2gZulmTmcVUNLFg==","shasum":"4f73cd6b85ba8443a5bda9695f906ce5b7c0effd","tarball":"https://registry.npmjs.org/@biowilli/issue-reporter/-/issue-reporter-0.1.2.tgz","fileCount":29,"unpackedSize":429998,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCKi0LGafosl5BJocJZ5gfeCzt1LsJMbyQWmr04RRqhegIgZermWvokJ0LSIIFFADBcY4nOmMaCyoL74wp8uDPxYFc="}]},"_npmUser":{"name":"biowilli","email":"mr.monz.philipp@gmail.com"},"directories":{},"maintainers":[{"name":"biowilli","email":"mr.monz.philipp@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/issue-reporter_0.1.2_1784889241953_0.25214345074575406"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-18T15:31:03.523Z","modified":"2026-07-24T10:34:02.205Z","0.1.0":"2025-12-18T15:31:03.889Z","0.1.1":"2025-12-22T12:22:58.223Z","0.1.2":"2026-07-24T10:34:02.081Z"},"bugs":{"url":"https://github.com/fairkom/issue-reporter/issues"},"author":{"name":"biowilli"},"license":"MIT","homepage":"https://github.com/fairkom/issue-reporter#readme","keywords":["feedback","screenshot","gitlab","github","jira","issue-tracker","bug-report","react","vue","angular","user-feedback","framework-agnostic"],"repository":{"type":"git","url":"git+https://github.com/fairkom/issue-reporter.git"},"description":"Framework-agnostic feedback reporter with screenshot capture for GitLab, GitHub, Jira and custom issue trackers","maintainers":[{"name":"biowilli","email":"mr.monz.philipp@gmail.com"}],"readme":"# @biowilli/issue-reporter\n\nA powerful, framework-agnostic feedback reporter with automatic screenshot capture and annotation tools for GitLab, GitHub, Jira and custom issue trackers.\n\nTurn user feedback into actionable issues with just one click!\n\n\n\n## Features\n\n- **Automatic Screenshot Capture** - Uses dom-to-image-more to capture the current page\n- **Screenshot Editor** - Built-in annotation tools (arrows, rectangles, circles, pen) with multiple colors\n- **Framework Agnostic** - Works with React, Vue, Angular, or vanilla JavaScript\n- **Pluggable Adapters** - Built-in support for GitLab and GitHub, easily extend for other platforms\n- **Highly Customizable** - Customize colors, text labels, button styles, and modal appearance\n- **System Metadata** - Automatically includes comprehensive browser and system information\n- **TypeScript Support** - Fully typed for better developer experience\n- **i18n Ready** - All text labels are customizable for any language\n\n## Installation\n\n```bash\nnpm install @biowilli/issue-reporter\n```\n\nOr with yarn:\n\n```bash\nyarn add @biowilli/issue-reporter\n```\n\n## Quick Start\n\n### React\n\n```tsx\nimport { FeedbackButton, GitLabAdapter } from '@biowilli/issue-reporter';\n\n// 1. Create an adapter for your issue tracker (GitLab example)\nconst feedbackAdapter = new GitLabAdapter({\n baseUrl: 'https://gitlab.com', // Your GitLab instance URL\n projectId: '1234', // Your GitLab project ID\n accessToken: import.meta.env.VITE_GITLAB_ACCESS_TOKEN, // Access token from environment\n labels: ['user-feedback', 'bug'], // Labels to add to issues\n});\n\nfunction App() {\n return (\n \n
My App
\n\n {/* 2. Add the feedback button anywhere in your app */}\n {\n console.log('Issue created:', response.url);\n alert(`Thank you! Issue created: ${response.url}`);\n }}\n />\n \n );\n}\n```\n\n**That's it!** Users can now click the button to report issues with automatic screenshots.\n\n### Vanilla JavaScript\n\n```javascript\nimport { createFeedbackReporter, GitLabAdapter } from '@biowilli/issue-reporter';\n\n// Create adapter\nconst adapter = new GitLabAdapter({\n baseUrl: 'https://gitlab.com',\n projectId: '1234',\n accessToken: 'your-gitlab-token',\n});\n\n// Create reporter\nconst reporter = createFeedbackReporter({\n adapter,\n includeMetadata: true,\n onSuccess: (response) => {\n console.log('Issue created:', response.url);\n },\n});\n\n// Render the button\nreporter.renderButton({\n text: 'Report Bug',\n position: 'bottom-right',\n});\n```\n\n## Adapters\n\n### GitLab Adapter\n\nThe GitLab adapter allows you to create issues directly in your GitLab projects.\n\n```typescript\nimport { GitLabAdapter } from '@biowilli/issue-reporter';\n\nconst adapter = new GitLabAdapter({\n baseUrl: 'https://gitlab.com', // Your GitLab instance (gitlab.com or self-hosted)\n projectId: '1234', // Your project ID (found in project settings)\n accessToken: 'glpat-xxxxxxxxxxxx', // Your GitLab access token\n labels: ['user-feedback', 'bug'], // Optional: labels to add to issues\n assigneeIds: [123], // Optional: user IDs to auto-assign issues\n});\n```\n\n#### Setting Up GitLab Access Token\n\nTo use the GitLab adapter, you need to create an access token with the right permissions:\n\n**Required Scopes:**\n- `api` - For creating issues and uploading files\n\n**OR** (minimal permissions):\n- `write_repository` - For uploading screenshots\n- `api` or `write_api` - For creating issues\n\n**Creating a Project Access Token (Recommended):**\n\n1. Go to your GitLab project: `https://gitlab.com/your-project`\n2. Navigate to **Settings** → **Access Tokens**\n3. Create a new **Project Access Token**:\n - **Name**: `issue-reporter-frontend`\n - **Role**: `Reporter` (sufficient for creating issues) or `Developer`\n - **Scopes**: Select `api`\n - **Expiration**: Set an appropriate expiration date (optional)\n4. Click **Create project access token**\n5. Copy the token and store it securely in your environment variables\n\n**Minimum Project Role:**\nThe token/user needs at least **Reporter** role in the project to:\n- Create issues\n- Upload files (screenshots)\n\n**Security Best Practices:**\n- **⚠️ IMPORTANT: Never store GitLab/GitHub tokens in your frontend code.** For production applications, implement a backend proxy API that securely stores credentials on the server and forwards requests to the issue tracker. This prevents exposing sensitive tokens to users.\n- Use **Project Access Tokens** instead of Personal Access Tokens\n- Store tokens in environment variables (`.env.local`), never commit them\n- Use the minimum required scopes\n- Set an expiration date for tokens\n- Rotate tokens regularly\n\n### GitHub Adapter\n\nThe GitHub adapter creates issues in your GitHub repositories.\n\n```typescript\nimport { GitHubAdapter } from '@biowilli/issue-reporter';\n\nconst adapter = new GitHubAdapter({\n baseUrl: 'https://api.github.com',\n projectId: '', // Not used for GitHub\n owner: 'your-username', // Repository owner\n repo: 'your-repo', // Repository name\n accessToken: 'ghp_xxxxxxxxxxxx', // GitHub personal access token\n labels: ['user-feedback', 'bug'], // Optional: issue labels\n assignees: ['username'], // Optional: GitHub usernames to assign\n});\n```\n\n**GitHub Token:** Create a Personal Access Token at https://github.com/settings/tokens with `repo` scope.\n\n### Custom Adapter\n\nYou can create your own adapter for any issue tracker (Jira, Linear, Asana, etc.):\n\n```typescript\nimport { IssueTrackerAdapter, FeedbackData, IssueResponse } from '@biowilli/issue-reporter';\n\nclass MyCustomAdapter implements IssueTrackerAdapter {\n async createIssue(feedback: FeedbackData): Promise {\n // 1. Upload screenshot if provided\n let screenshotUrl = null;\n if (feedback.screenshot) {\n screenshotUrl = await this.uploadScreenshot(feedback.screenshot);\n }\n\n // 2. Create issue in your system\n const response = await fetch('https://your-api.com/issues', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n title: feedback.title,\n description: feedback.description,\n screenshot: screenshotUrl,\n metadata: feedback.metadata,\n }),\n });\n\n const data = await response.json();\n\n // 3. Return issue details\n return {\n id: data.id,\n url: data.url,\n title: data.title,\n };\n }\n\n async uploadScreenshot(screenshot: Blob): Promise {\n // Optional: Upload screenshot to your storage\n const formData = new FormData();\n formData.append('file', screenshot);\n\n const response = await fetch('https://your-api.com/upload', {\n method: 'POST',\n body: formData,\n });\n\n const data = await response.json();\n return data.url;\n }\n}\n\n// Use your custom adapter\nconst adapter = new MyCustomAdapter();\n```\n\n## API Reference\n\n### React Components\n\n#### ``\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `adapter` | `IssueTrackerAdapter` | *required* | Issue tracker adapter instance |\n| `position` | `'bottom-right' \\| 'bottom-left' \\| 'top-right' \\| 'top-left' \\| 'none'` | `'bottom-right'` | Button position |\n| `buttonClassName` | `string` | `undefined` | Custom CSS class for the button |\n| `includeMetadata` | `boolean` | `true` | Include system metadata in reports |\n| `labels` | `string[]` | `[]` | Labels to add to issues |\n| `textLabels` | `TextLabels` | `{}` | Customize all text labels (see below) |\n| `buttonStyles` | `ButtonStyles` | `{}` | Customize button appearance (see below) |\n| `modalStyles` | `ModalStyles` | `{}` | Customize modal appearance (see below) |\n| `onSuccess` | `(response: IssueResponse) => void` | `undefined` | Called when issue is created |\n| `onError` | `(error: Error) => void` | `undefined` | Called on error |\n\n### Customization Options\n\n#### Text Labels (`textLabels`)\n\nAll text labels can be customized for internationalization:\n\n```typescript\ntextLabels={{\n buttonText: 'Report Issue',\n modalTitle: 'Report an Issue',\n titleLabel: 'Title',\n titlePlaceholder: 'Brief description of the issue',\n descriptionLabel: 'Description',\n descriptionPlaceholder: 'Detailed description of the issue...',\n screenshotLabel: 'Screenshot (optional)',\n screenshotHint: 'Upload a screenshot or paste from clipboard',\n includeScreenshotLabel: 'Include screenshot',\n editButtonText: 'Edit',\n removeButtonText: 'Remove',\n cancelButtonText: 'Cancel',\n submitButtonText: 'Submit Issue',\n submittingButtonText: 'Submitting...',\n capturingButtonText: 'Capturing...',\n}}\n```\n\n#### Button Styles (`buttonStyles`)\n\nCustomize the feedback button appearance:\n\n```typescript\nbuttonStyles={{\n backgroundColor: '#0070B7',\n color: 'white',\n hoverBackgroundColor: '#005a92',\n hoverColor: 'white',\n borderRadius: '8px',\n padding: '10px 16px',\n fontSize: '14px',\n fontWeight: '600',\n border: 'none',\n boxShadow: '0 2px 8px rgba(0, 112, 183, 0.3)',\n}}\n```\n\n#### Modal Styles (`modalStyles`)\n\nCustomize the feedback modal appearance:\n\n```typescript\nmodalStyles={{\n overlayBackgroundColor: 'rgba(0, 0, 0, 0.5)',\n backgroundColor: 'white',\n borderRadius: '12px',\n padding: '24px',\n maxWidth: '600px',\n boxShadow: '0 4px 20px rgba(0,0,0,0.15)',\n headerColor: '#002e49',\n labelColor: '#00446e',\n inputBorderColor: '#E6EDF1',\n inputFocusBorderColor: '#0070B7',\n primaryButtonColor: '#0070B7',\n primaryButtonHoverColor: '#005a92',\n secondaryButtonColor: '#E6EDF1',\n dangerButtonColor: '#dc2626',\n dangerButtonHoverColor: '#b91c1c',\n}}\n```\n\n### Complete Customization Example\n\n```tsx\n {\n console.log('Issue created:', response.url);\n }}\n/>\n```\n\n### Vanilla JS Functions\n\n#### `createFeedbackReporter(config)`\n\nCreates a feedback reporter instance.\n\n```typescript\nconst reporter = createFeedbackReporter({\n adapter: new GitLabAdapter({...}),\n includeMetadata: true,\n onSuccess: (response) => {},\n onError: (error) => {},\n});\n```\n\n**Methods:**\n\n- `renderButton(options)` - Renders the feedback button\n- `openModal()` - Programmatically opens the feedback modal\n- `destroy()` - Removes the button and cleans up\n\n## Environment Variables\n\nFor security, store your access tokens in environment variables:\n\n```env\n# .env\nVITE_GITLAB_ACCESS_TOKEN=your-token-here\nVITE_GITLAB_PROJECT_ID=1234\n\n# or for React\nREACT_APP_GITLAB_TOKEN=your-token-here\n```\n\n## System Metadata\n\nWhen `includeMetadata` is enabled, the following information is automatically collected:\n\n**Browser Information:**\n- Browser name and version (Chrome, Firefox, Safari, Edge)\n- User Agent string\n\n**Operating System:**\n- OS name (Windows, macOS, Linux, Android, iOS)\n- Platform details\n\n**Language & Location:**\n- Browser language(s)\n- Timezone\n- Date and time (ISO timestamp and localized)\n\n**Screen & Display:**\n- Screen resolution\n- Viewport size\n- Device pixel ratio (for Retina displays)\n- Color depth\n\n**Page Information:**\n- Current URL\n- Page title\n- Referrer\n\n**Connection & Performance:**\n- Online/Offline status\n- Connection type (4G, WiFi, etc.)\n\n**Hardware (if available):**\n- Available RAM (Chrome only)\n- CPU cores\n- Touch support\n- Cookies enabled\n\n## How It Works\n\n1. **Button Click** - User clicks the feedback button\n2. **Screenshot Capture** - Automatically captures the current page using dom-to-image-more\n3. **Screenshot Editing** - User can annotate the screenshot with arrows, shapes, and pen\n4. **Feedback Form** - User fills in title and description\n5. **Metadata Collection** - Comprehensive system info is collected automatically\n6. **Issue Creation** - Screenshot is uploaded and issue is created via adapter\n7. **Success** - User receives confirmation with issue URL\n\n## Real-World Example\n\nHere's a complete example with German labels and custom styling:\n\n```tsx\nimport { FeedbackButton, GitLabAdapter } from '@biowilli/issue-reporter';\n\nconst feedbackAdapter = new GitLabAdapter({\n baseUrl: 'https://git.fairkom.net',\n projectId: '123',\n accessToken: import.meta.env.VITE_GITLAB_ACCESS_TOKEN,\n labels: ['User-Feedback', 'Frontend'],\n});\n\n {\n alert(`Issue created: ${response.url}`);\n }}\n/>\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Build the package\nnpm run build\n\n# Watch mode for development\nnpm run dev\n\n# Publish to npm\nnpm version patch # or minor/major\nnpm publish --access public\n```\n\n## Links\n\n- **npm Package:** https://www.npmjs.com/package/@biowilli/issue-reporter\n- **Issues:** https://github.com/fairkom/issue-reporter/issues\n\n## License\n\nMIT © biowilli\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n","readmeFilename":"README.md"}