@limekex/bugreport-widget-react 0.2.0

package/README.md

@@ -0,0 +1,130 @@
+# @limekex/bugreport-widget-react
+
+React wrapper for the BugReport Widget SDK. Provides a declarative `<BugReporter>` component with React hooks and SSR support.
+
+## Installation
+
+```bash
+npm install @limekex/bugreport-widget-react
+# or
+pnpm add @limekex/bugreport-widget-react
+# or
+yarn add @limekex/bugreport-widget-react
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { BugReporter } from '@limekex/bugreport-widget-react';
+
+function App() {
+  return (
+    <>
+      <h1>My App</h1>
+      
+      <BugReporter
+        apiBaseUrl="https://gitreport.betait.no"
+        environment="production"
+        appVersion="1.2.3"
+        commitSha="abc123def"
+      />
+    </>
+  );
+}
+```
+
+### With Current User
+
+```tsx
+<BugReporter
+  apiBaseUrl="https://gitreport.betait.no"
+  environment="staging"
+  currentUser={{
+    id: 'user-123',
+    email: 'john@example.com',
+    name: 'John Doe',
+    role: 'admin'
+  }}
+/>
+```
+
+### With Theme Customization
+
+```tsx
+<BugReporter
+  apiBaseUrl="https://gitreport.betait.no"
+  environment="production"
+  theme={{
+    primaryColor: '#3b82f6',
+    buttonPosition: 'bottom-left',
+    zIndex: 9999
+  }}
+/>
+```
+
+### Disabled in Development
+
+```tsx
+<BugReporter
+  apiBaseUrl="https://gitreport.betait.no"
+  environment={process.env.NODE_ENV}
+  enabled={process.env.NODE_ENV !== 'development'}
+/>
+```
+
+## Props
+
+All props from the vanilla SDK are supported:
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `apiBaseUrl` | `string` | ✅ | Base URL of your bugreport-api service |
+| `environment` | `string` | ✅ | Environment name (e.g., "production", "staging") |
+| `enabled` | `boolean` | ❌ | Whether the widget is active (default: `true`) |
+| `appVersion` | `string` | ❌ | Your app version string |
+| `commitSha` | `string` | ❌ | Git commit SHA of the running build |
+| `buildNumber` | `string` | ❌ | CI build number |
+| `currentUser` | `object` | ❌ | Currently authenticated user |
+| `getTraceContext` | `function` | ❌ | Function returning trace context (OpenTelemetry, Sentry) |
+| `theme` | `object` | ❌ | Theme customization options |
+
+## SSR Support
+
+This component is **SSR-safe** and will only initialize on the client side. Safe to use with:
+
+- Next.js (App Router & Pages Router)
+- Remix
+- Gatsby
+- Any React SSR framework
+
+No special configuration needed!
+
+## TypeScript
+
+Full TypeScript support with type definitions included.
+
+```tsx
+import { BugReporter, type BugReporterConfig } from '@limekex/bugreport-widget-react';
+
+const config: BugReporterConfig = {
+  apiBaseUrl: 'https://gitreport.betait.no',
+  environment: 'production',
+  appVersion: '1.0.0'
+};
+
+<BugReporter {...config} />
+```
+
+## How It Works
+
+The component:
+1. Checks if running in a browser (`typeof window !== 'undefined'`)
+2. Initializes the vanilla SDK on mount
+3. Destroys the widget on unmount
+4. Re-initializes if props change
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+/**
+ * React wrapper for the BugReport Widget SDK
+ *
+ * Provides a declarative <BugReporter> component with SSR support.
+ */
+import { type BugReporterConfig } from '@limekex/bugreport-widget-sdk';
+export type { BugReporterConfig } from '@limekex/bugreport-widget-sdk';
+export interface BugReporterProps extends BugReporterConfig {
+    /**
+     * Optional className for custom styling (applied to the button container if needed)
+     */
+    className?: string;
+}
+/**
+ * BugReporter React Component
+ *
+ * Renders a floating bug report button that opens a modal when clicked.
+ * SSR-safe: will only initialize on the client side.
+ *
+ * @example
+ * ```tsx
+ * <BugReporter
+ *   apiBaseUrl="https://gitreport.betait.no"
+ *   environment="production"
+ *   appVersion="1.2.3"
+ * />
+ * ```
+ */
+export declare function BugReporter(props: BugReporterProps): null;
+/**
+ * Hook for programmatic access to the widget (advanced usage)
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { openModal } = useBugReporter({
+ *     apiBaseUrl: "https://gitreport.betait.no",
+ *     environment: "production"
+ *   });
+ *
+ *   return <button onClick={openModal}>Report Bug</button>;
+ * }
+ * ```
+ */
+export declare function useBugReporter(config: BugReporterConfig): {
+    /**
+     * Programmatically open the bug report modal
+     */
+    openModal: () => void;
+    /**
+     * Programmatically close the bug report modal
+     */
+    closeModal: () => void;
+};
+export default BugReporter;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAExF,YAAY,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;IACzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,QAsClD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,iBAAiB;IA2BpD;;OAEG;;IAIH;;OAEG;;EAKN;AAED,eAAe,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,113 @@
+/**
+ * React wrapper for the BugReport Widget SDK
+ *
+ * Provides a declarative <BugReporter> component with SSR support.
+ */
+import { useEffect, useRef } from 'react';
+import { initBugReporter } from '@limekex/bugreport-widget-sdk';
+/**
+ * BugReporter React Component
+ *
+ * Renders a floating bug report button that opens a modal when clicked.
+ * SSR-safe: will only initialize on the client side.
+ *
+ * @example
+ * ```tsx
+ * <BugReporter
+ *   apiBaseUrl="https://gitreport.betait.no"
+ *   environment="production"
+ *   appVersion="1.2.3"
+ * />
+ * ```
+ */
+export function BugReporter(props) {
+    const { className, ...config } = props;
+    const widgetRef = useRef(null);
+    useEffect(() => {
+        // SSR safety: only initialize in browser environment
+        if (typeof window === 'undefined') {
+            return;
+        }
+        // Skip if disabled
+        if (config.enabled === false) {
+            return;
+        }
+        // Initialize widget
+        try {
+            widgetRef.current = initBugReporter(config);
+        }
+        catch (err) {
+            console.error('[BugReporter] Initialization failed:', err);
+        }
+        // Cleanup on unmount
+        return () => {
+            if (widgetRef.current) {
+                try {
+                    widgetRef.current.destroy();
+                    widgetRef.current = null;
+                }
+                catch (err) {
+                    console.error('[BugReporter] Cleanup failed:', err);
+                }
+            }
+        };
+    }, [config.apiBaseUrl, config.environment, config.enabled]);
+    // This component doesn't render anything visible
+    // The SDK injects the button and modal into the DOM
+    return null;
+}
+/**
+ * Hook for programmatic access to the widget (advanced usage)
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { openModal } = useBugReporter({
+ *     apiBaseUrl: "https://gitreport.betait.no",
+ *     environment: "production"
+ *   });
+ *
+ *   return <button onClick={openModal}>Report Bug</button>;
+ * }
+ * ```
+ */
+export function useBugReporter(config) {
+    const widgetRef = useRef(null);
+    useEffect(() => {
+        if (typeof window === 'undefined' || config.enabled === false) {
+            return;
+        }
+        try {
+            widgetRef.current = initBugReporter(config);
+        }
+        catch (err) {
+            console.error('[useBugReporter] Initialization failed:', err);
+        }
+        return () => {
+            if (widgetRef.current) {
+                try {
+                    widgetRef.current.destroy();
+                    widgetRef.current = null;
+                }
+                catch (err) {
+                    console.error('[useBugReporter] Cleanup failed:', err);
+                }
+            }
+        };
+    }, [config]);
+    return {
+        /**
+         * Programmatically open the bug report modal
+         */
+        openModal: () => {
+            widgetRef.current?.open();
+        },
+        /**
+         * Programmatically close the bug report modal
+         */
+        closeModal: () => {
+            widgetRef.current?.close();
+        },
+    };
+}
+export default BugReporter;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@limekex/bugreport-widget-react",
+  "version": "0.2.0",
+  "description": "React wrapper for the BugReport Widget SDK",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "dev": "tsc --watch --project tsconfig.json"
+  },
+  "keywords": [
+    "bug-report",
+    "bug-reporter",
+    "issue-tracker",
+    "react",
+    "react-component",
+    "github-issues"
+  ],
+  "author": "limekex",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/limekex/bugreport-platform.git",
+    "directory": "packages/widget-react"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@limekex/bugreport-widget-sdk": "^0.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "typescript": "^5.9.3"
+  }
+}