@arantic/bugpin-widget 0.1.1 → 0.1.2

package/README.md

@@ -15,22 +15,12 @@ Embeddable visual bug reporting widget for web applications. Capture screenshots
 
 ## 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
 ```
 
+## Usage
+
 ```javascript
 import BugPin from '@arantic/bugpin-widget';
 
@@ -40,9 +30,39 @@ BugPin.init({
 });
 ```
 
-## Quick Start
+## Configuration
+
+The widget automatically fetches its configuration from the BugPin server based on your API key. All visual settings (theme, position, colors, button text) are managed in the BugPin admin UI.
+
+### Required Options
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `apiKey` | `string` | Your project API key (from BugPin admin) |
+| `serverUrl` | `string` | Your BugPin server URL |
+
+
+## Framework Examples
+
+### React / Vite
+
+```jsx
+import { useEffect } from 'react';
+import BugPin from '@arantic/bugpin-widget';
+
+function App() {
+  useEffect(() => {
+    BugPin.init({
+      apiKey: import.meta.env.VITE_BUGPIN_API_KEY,
+      serverUrl: import.meta.env.VITE_BUGPIN_SERVER_URL
+    });
+  }, []);
+
+  return <div>Your app</div>;
+}
+```
 
-### React / Next.js
+### Next.js
 
 ```jsx
 import { useEffect } from 'react';
@@ -76,75 +96,6 @@ onMounted(() => {
 </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
@@ -166,38 +117,81 @@ export class AppComponent implements OnInit {
 }
 ```
 
-### Svelte
+### TypeScript / Vanilla JavaScript
 
-```svelte
-<script>
-  import { onMount } from 'svelte';
-  import BugPin from '@arantic/bugpin-widget';
+```typescript
+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
-    });
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  BugPin.init({
+    apiKey: 'your-api-key',
+    serverUrl: 'https://bugpin.example.com'
   });
-</script>
+});
 ```
 
-## Environment Variables
+### .NET / Blazor
 
-Store your API key securely using environment variables:
+```csharp
+// Services/BugPinService.cs
+public class BugPinService
+{
+    private readonly IJSRuntime _js;
 
-```bash
-# Next.js
-NEXT_PUBLIC_BUGPIN_API_KEY=bp_proj_abc123
-NEXT_PUBLIC_BUGPIN_SERVER_URL=https://bugs.example.com
+    public BugPinService(IJSRuntime js) => _js = js;
 
-# Vite
-VITE_BUGPIN_API_KEY=bp_proj_abc123
-VITE_BUGPIN_SERVER_URL=https://bugs.example.com
+    public async Task InitializeAsync(string apiKey, string serverUrl)
+    {
+        await _js.InvokeVoidAsync("eval",
+            $"import('@arantic/bugpin-widget').then(m => m.default.init({{apiKey: '{apiKey}', serverUrl: '{serverUrl}'}}))");
+    }
+}
+```
 
-# Vue CLI
-VUE_APP_BUGPIN_API_KEY=bp_proj_abc123
-VUE_APP_BUGPIN_SERVER_URL=https://bugs.example.com
+```csharp
+// Program.cs or Startup.cs
+builder.Services.AddScoped<BugPinService>();
+```
+
+```razor
+@inject BugPinService BugPin
+@inject IConfiguration Config
+
+@code {
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await BugPin.InitializeAsync(
+                Config["BugPin:ApiKey"],
+                Config["BugPin:ServerUrl"]
+            );
+        }
+    }
+}
+```
+
+## Environment Variables
+
+Store your API key in environment variables (see framework examples above for usage):
+
+```bash
+# Vite (React, Vue) - .env
+VITE_BUGPIN_API_KEY=your-api-key
+VITE_BUGPIN_SERVER_URL=https://bugpin.example.com
+
+# Next.js - .env.local
+NEXT_PUBLIC_BUGPIN_API_KEY=your-api-key
+NEXT_PUBLIC_BUGPIN_SERVER_URL=https://bugpin.example.com
+
+# .NET (appsettings.json)
+{
+  "BugPin": {
+    "ApiKey": "your-api-key",
+    "ServerUrl": "https://bugpin.example.com"
+  }
+}
 ```
 
 ## Getting Your API Key
@@ -218,5 +212,5 @@ MIT
 ## Support
 
 - [Documentation](https://docs.bugpin.io)
-- [Report Issues](https://github.com/bugpin/bugpin-ce/issues)
-- [Discussions](https://github.com/bugpin/bugpin-ce/discussions)
+- [Report Issues](https://github.com/bugpin/bugpin/issues)
+- [Discussions](https://github.com/bugpin/bugpin/discussions)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arantic/bugpin-widget",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Embeddable visual bug reporting widget - Capture screenshots, annotate issues, and submit bug reports",
   "type": "module",
   "main": "dist/widget.cjs.js",
@@ -31,12 +31,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/bugpin/bugpin-ce.git",
+    "url": "https://github.com/aranticlabs/bugpin.git",
     "directory": "src/widget"
   },
   "homepage": "https://bugpin.io",
   "bugs": {
-    "url": "https://github.com/bugpin/bugpin-ce/issues"
+    "url": "https://github.com/aranticlabs/bugpin/issues"
   },
   "publishConfig": {
     "access": "public"