@arantic/bugpin-widget 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,222 @@
+# BugPin Widget
+
+Embeddable visual bug reporting widget for web applications. Capture screenshots, annotate issues, and submit bug reports with ease.
+
+## Features
+
+- **Screenshot Capture** - Full page or visible area
+- **Annotation Tools** - Draw, highlight, blur, and add text
+- **Privacy First** - Self-hosted, your data stays on your servers
+- **Customizable** - Match your brand colors and style
+- **Lightweight** - Under 130KB gzipped
+- **Dark Mode** - Automatic theme detection
+- **Responsive** - Works on all devices
+- **Framework Agnostic** - Works with React, Vue, Angular, Svelte, .NET, and more
+
+## Installation
+
+### Script Tag (Recommended)
+
+```html
+<script
+  src="https://your-bugpin-server.com/widget.js"
+  data-api-key="your-project-api-key"
+  async
+></script>
+```
+
+### npm Package
+
+```bash
+npm install @arantic/bugpin-widget
+```
+
+```javascript
+import BugPin from '@arantic/bugpin-widget';
+
+BugPin.init({
+  apiKey: 'your-project-api-key',
+  serverUrl: 'https://your-bugpin-server.com'
+});
+```
+
+## Quick Start
+
+### React / Next.js
+
+```jsx
+import { useEffect } from 'react';
+import BugPin from '@arantic/bugpin-widget';
+
+function App() {
+  useEffect(() => {
+    BugPin.init({
+      apiKey: process.env.NEXT_PUBLIC_BUGPIN_API_KEY,
+      serverUrl: process.env.NEXT_PUBLIC_BUGPIN_SERVER_URL
+    });
+  }, []);
+
+  return <div>Your app</div>;
+}
+```
+
+### Vue / Nuxt
+
+```vue
+<script setup>
+import { onMounted } from 'vue';
+import BugPin from '@arantic/bugpin-widget';
+
+onMounted(() => {
+  BugPin.init({
+    apiKey: import.meta.env.VITE_BUGPIN_API_KEY,
+    serverUrl: import.meta.env.VITE_BUGPIN_SERVER_URL
+  });
+});
+</script>
+```
+
+### TypeScript
+
+```typescript
+import BugPin, { type WidgetConfig } from '@arantic/bugpin-widget';
+
+const config: Partial<WidgetConfig> & { apiKey: string } = {
+  apiKey: 'your-api-key',
+  serverUrl: 'https://bugs.example.com',
+  position: 'bottom-right',
+  theme: 'auto'
+};
+
+BugPin.init(config);
+```
+
+## Configuration
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `apiKey` | `string` | **Required** | Your project API key |
+| `serverUrl` | `string` | **Required** | BugPin server URL |
+| `position` | `string` | `'bottom-right'` | Widget position: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |
+| `theme` | `string` | `'auto'` | Theme: `'light'`, `'dark'`, or `'auto'` |
+| `buttonText` | `string` | `'Found a bug?'` | Button text |
+
+## API Methods
+
+### `BugPin.init(config)`
+
+Initialize the widget with your configuration.
+
+```javascript
+BugPin.init({
+  apiKey: 'bp_proj_abc123',
+  serverUrl: 'https://bugs.example.com'
+});
+```
+
+### `BugPin.open()`
+
+Programmatically open the bug report dialog.
+
+```javascript
+document.getElementById('report-bug').addEventListener('click', () => {
+  BugPin.open();
+});
+```
+
+### `BugPin.close()`
+
+Programmatically close the bug report dialog.
+
+```javascript
+BugPin.close();
+```
+
+## Framework Examples
+
+### .NET / Blazor
+
+```html
+<!-- In _Layout.cshtml or wwwroot/index.html -->
+<script
+  src="@Configuration["BugPin:ServerUrl"]/widget.js"
+  data-api-key="@Configuration["BugPin:ApiKey"]"
+  async
+></script>
+```
+
+### Angular
+
+```typescript
+// app.component.ts
+import { Component, OnInit } from '@angular/core';
+import BugPin from '@arantic/bugpin-widget';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent implements OnInit {
+  ngOnInit() {
+    BugPin.init({
+      apiKey: environment.bugpinApiKey,
+      serverUrl: environment.bugpinServerUrl
+    });
+  }
+}
+```
+
+### Svelte
+
+```svelte
+<script>
+  import { onMount } from 'svelte';
+  import BugPin from '@arantic/bugpin-widget';
+
+  onMount(() => {
+    BugPin.init({
+      apiKey: import.meta.env.VITE_BUGPIN_API_KEY,
+      serverUrl: import.meta.env.VITE_BUGPIN_SERVER_URL
+    });
+  });
+</script>
+```
+
+## Environment Variables
+
+Store your API key securely using environment variables:
+
+```bash
+# Next.js
+NEXT_PUBLIC_BUGPIN_API_KEY=bp_proj_abc123
+NEXT_PUBLIC_BUGPIN_SERVER_URL=https://bugs.example.com
+
+# Vite
+VITE_BUGPIN_API_KEY=bp_proj_abc123
+VITE_BUGPIN_SERVER_URL=https://bugs.example.com
+
+# Vue CLI
+VUE_APP_BUGPIN_API_KEY=bp_proj_abc123
+VUE_APP_BUGPIN_SERVER_URL=https://bugs.example.com
+```
+
+## Getting Your API Key
+
+1. Deploy BugPin server (self-hosted or use the official Docker image)
+2. Log in to the BugPin admin panel
+3. Create a new project or select an existing one
+4. Copy the API key from the project settings
+
+## Documentation
+
+For complete documentation, visit: [BugPin Documentation](https://docs.bugpin.io)
+
+## License
+
+MIT
+
+## Support
+
+- [Documentation](https://docs.bugpin.io)
+- [Report Issues](https://github.com/bugpin/bugpin-ce/issues)
+- [Discussions](https://github.com/bugpin/bugpin-ce/discussions)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arantic/bugpin-widget",
-  "version": "0.1.0",
-  "description": "BugPin widget - Preact embeddable bug reporter (<50KB)",
+  "version": "0.1.1",
+  "description": "Embeddable visual bug reporting widget - Capture screenshots, annotate issues, and submit bug reports",
   "type": "module",
   "main": "dist/widget.cjs.js",
   "module": "dist/widget.esm.js",
@@ -13,8 +13,31 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
+  "keywords": [
+    "bug-reporting",
+    "feedback",
+    "screenshot",
+    "annotation",
+    "widget",
+    "issue-tracker",
+    "visual-feedback",
+    "bugpin",
+    "self-hosted"
+  ],
+  "author": "Arantic Digital",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bugpin/bugpin-ce.git",
+    "directory": "src/widget"
+  },
+  "homepage": "https://bugpin.io",
+  "bugs": {
+    "url": "https://github.com/bugpin/bugpin-ce/issues"
+  },
   "publishConfig": {
     "access": "public"
   },