@arantic/bugpin-widget 0.1.1 → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arantic Digital
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -15,34 +15,53 @@ 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';
 
 BugPin.init({
   apiKey: 'your-project-api-key',
-  serverUrl: 'https://your-bugpin-server.com'
+  serverUrl: 'https://your-bugpin-server.com',
 });
 ```
 
-## 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 portal.
 
-### React / Next.js
+### 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>;
+}
+```
+
+### Next.js
 
 ```jsx
 import { useEffect } from 'react';
@@ -52,7 +71,7 @@ function App() {
   useEffect(() => {
     BugPin.init({
       apiKey: process.env.NEXT_PUBLIC_BUGPIN_API_KEY,
-      serverUrl: process.env.NEXT_PUBLIC_BUGPIN_SERVER_URL
+      serverUrl: process.env.NEXT_PUBLIC_BUGPIN_SERVER_URL,
     });
   }, []);
 
@@ -70,81 +89,12 @@ 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
+    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
@@ -154,58 +104,103 @@ import BugPin from '@arantic/bugpin-widget';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
 })
 export class AppComponent implements OnInit {
   ngOnInit() {
     BugPin.init({
       apiKey: environment.bugpinApiKey,
-      serverUrl: environment.bugpinServerUrl
+      serverUrl: environment.bugpinServerUrl,
     });
   }
 }
 ```
 
-### 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-project-api-key",
+    "ServerUrl": "https://bugpin.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
+You need an API key from your BugPin server to initialize the widget.
+
+1. Deploy BugPin server on your infrastructure (e.g. using [Docker](https://docs.bugpin.io/installation/docker))
+2. Log in to the BugPin admin portal
+3. Open **Projects**, create a new project or select an existing one
+4. Copy the API key (shown in the project card or in **Project Settings**)
 
 ## Documentation
 
@@ -218,5 +213,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)