@bbearai/react 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +178 -0
- package/dist/index.d.mts +71 -0
- package/dist/index.d.ts +71 -0
- package/dist/index.js +885 -0
- package/dist/index.mjs +854 -0
- package/package.json +56 -0
package/README.md
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
# @bbearai/react
|
|
2
|
+
|
|
3
|
+
React components for integrating BugBear QA into your web application.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @bbearai/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
### 1. Wrap your app with BugBearProvider
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { BugBearProvider, BugBearPanel } from '@bbearai/react';
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
return (
|
|
20
|
+
<BugBearProvider
|
|
21
|
+
config={{
|
|
22
|
+
projectId: 'your-project-id', // Get this from BugBear dashboard
|
|
23
|
+
getCurrentUser: async () => {
|
|
24
|
+
// Return your logged-in user's info
|
|
25
|
+
const user = await yourAuthMethod();
|
|
26
|
+
if (!user) return null;
|
|
27
|
+
return {
|
|
28
|
+
id: user.id,
|
|
29
|
+
email: user.email, // Must match email in BugBear testers list
|
|
30
|
+
};
|
|
31
|
+
},
|
|
32
|
+
}}
|
|
33
|
+
>
|
|
34
|
+
<YourApp />
|
|
35
|
+
<BugBearPanel />
|
|
36
|
+
</BugBearProvider>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 2. Add testers in BugBear dashboard
|
|
42
|
+
|
|
43
|
+
The widget only appears for users whose email is registered as a tester in your BugBear project.
|
|
44
|
+
|
|
45
|
+
## Configuration Options
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
interface BugBearConfig {
|
|
49
|
+
// Required
|
|
50
|
+
projectId: string;
|
|
51
|
+
getCurrentUser: () => Promise<{ id: string; email: string } | null>;
|
|
52
|
+
|
|
53
|
+
// Optional
|
|
54
|
+
supabaseUrl?: string; // Only for self-hosted BugBear
|
|
55
|
+
supabaseAnonKey?: string; // Only for self-hosted BugBear
|
|
56
|
+
|
|
57
|
+
// Callbacks
|
|
58
|
+
onReportSubmitted?: (report: BugBearReport) => void;
|
|
59
|
+
onNavigate?: (route: string) => void; // For deep linking from test cases
|
|
60
|
+
|
|
61
|
+
// Context
|
|
62
|
+
getNavigationHistory?: () => string[]; // Custom navigation tracking
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Components
|
|
67
|
+
|
|
68
|
+
### BugBearProvider
|
|
69
|
+
|
|
70
|
+
Wraps your app and provides BugBear context to child components.
|
|
71
|
+
|
|
72
|
+
### BugBearPanel
|
|
73
|
+
|
|
74
|
+
The floating widget UI. Renders a button that opens the bug report panel.
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
<BugBearPanel
|
|
78
|
+
position="bottom-right" // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
|
|
79
|
+
/>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### BugBearErrorBoundary
|
|
83
|
+
|
|
84
|
+
Automatically captures React errors and offers to report them.
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
import { BugBearErrorBoundary } from '@bbearai/react';
|
|
88
|
+
|
|
89
|
+
<BugBearErrorBoundary>
|
|
90
|
+
<YourComponent />
|
|
91
|
+
</BugBearErrorBoundary>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Hooks
|
|
95
|
+
|
|
96
|
+
### useBugBear
|
|
97
|
+
|
|
98
|
+
Access BugBear state and methods from any component.
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import { useBugBear } from '@bbearai/react';
|
|
102
|
+
|
|
103
|
+
function MyComponent() {
|
|
104
|
+
const {
|
|
105
|
+
client, // BugBear client instance
|
|
106
|
+
isTester, // Is current user a tester?
|
|
107
|
+
isQAEnabled, // Is QA mode enabled for this project?
|
|
108
|
+
shouldShowWidget, // Should the widget be visible?
|
|
109
|
+
testerInfo, // Current tester's info
|
|
110
|
+
assignments, // Test cases assigned to this tester
|
|
111
|
+
isLoading, // Loading state
|
|
112
|
+
} = useBugBear();
|
|
113
|
+
|
|
114
|
+
// Submit a report programmatically
|
|
115
|
+
const handleReport = async () => {
|
|
116
|
+
await client?.submitReport({
|
|
117
|
+
type: 'bug',
|
|
118
|
+
description: 'Something went wrong',
|
|
119
|
+
severity: 'high',
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## How It Works
|
|
126
|
+
|
|
127
|
+
1. **User logs in** to your app
|
|
128
|
+
2. **BugBear checks** if the user's email is in the testers list
|
|
129
|
+
3. **Widget appears** only for registered testers when QA mode is enabled
|
|
130
|
+
4. **Testers submit** bug reports, feedback, or test results
|
|
131
|
+
5. **Reports appear** in your BugBear dashboard
|
|
132
|
+
|
|
133
|
+
## Example: Next.js App Router
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
// app/providers.tsx
|
|
137
|
+
'use client';
|
|
138
|
+
|
|
139
|
+
import { BugBearProvider, BugBearPanel } from '@bbearai/react';
|
|
140
|
+
import { useAuth } from './auth'; // Your auth hook
|
|
141
|
+
|
|
142
|
+
export function Providers({ children }) {
|
|
143
|
+
const { user } = useAuth();
|
|
144
|
+
|
|
145
|
+
return (
|
|
146
|
+
<BugBearProvider
|
|
147
|
+
config={{
|
|
148
|
+
projectId: process.env.NEXT_PUBLIC_BUGBEAR_PROJECT_ID!,
|
|
149
|
+
getCurrentUser: async () => {
|
|
150
|
+
if (!user) return null;
|
|
151
|
+
return { id: user.id, email: user.email };
|
|
152
|
+
},
|
|
153
|
+
}}
|
|
154
|
+
>
|
|
155
|
+
{children}
|
|
156
|
+
<BugBearPanel />
|
|
157
|
+
</BugBearProvider>
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
// app/layout.tsx
|
|
162
|
+
import { Providers } from './providers';
|
|
163
|
+
|
|
164
|
+
export default function RootLayout({ children }) {
|
|
165
|
+
return (
|
|
166
|
+
<html>
|
|
167
|
+
<body>
|
|
168
|
+
<Providers>{children}</Providers>
|
|
169
|
+
</body>
|
|
170
|
+
</html>
|
|
171
|
+
);
|
|
172
|
+
}
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
## Support
|
|
176
|
+
|
|
177
|
+
- Dashboard: https://bugbear.dev (coming soon)
|
|
178
|
+
- GitHub: https://github.com/Bear-Eddy/bugbear
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, Component, ErrorInfo } from 'react';
|
|
3
|
+
import * as _bbearai_core from '@bbearai/core';
|
|
4
|
+
import { BugBearConfig, BugBearClient, TesterInfo, TestAssignment, AppContext, captureError } from '@bbearai/core';
|
|
5
|
+
export { AppContext, BugBearConfig, BugBearReport, ConsoleLogEntry, DeviceInfo, EnhancedBugContext, NetworkRequest, QATrack, ReportType, Severity, TestAssignment, TestTemplate, TesterInfo, captureError, contextCapture } from '@bbearai/core';
|
|
6
|
+
|
|
7
|
+
interface BugBearContextValue {
|
|
8
|
+
client: BugBearClient | null;
|
|
9
|
+
isTester: boolean;
|
|
10
|
+
isQAEnabled: boolean;
|
|
11
|
+
shouldShowWidget: boolean;
|
|
12
|
+
testerInfo: TesterInfo | null;
|
|
13
|
+
assignments: TestAssignment[];
|
|
14
|
+
currentAssignment: TestAssignment | null;
|
|
15
|
+
refreshAssignments: () => Promise<void>;
|
|
16
|
+
isLoading: boolean;
|
|
17
|
+
/** Navigate to a route/screen (for deep linking from test cases) */
|
|
18
|
+
onNavigate?: (route: string) => void;
|
|
19
|
+
}
|
|
20
|
+
declare function useBugBear(): BugBearContextValue;
|
|
21
|
+
interface BugBearProviderProps {
|
|
22
|
+
config: BugBearConfig;
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
}
|
|
25
|
+
declare function BugBearProvider({ config, children }: BugBearProviderProps): react_jsx_runtime.JSX.Element;
|
|
26
|
+
|
|
27
|
+
interface BugBearPanelProps {
|
|
28
|
+
/** Get current app context */
|
|
29
|
+
getAppContext?: () => AppContext;
|
|
30
|
+
/** Position of the panel */
|
|
31
|
+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
32
|
+
/** Initially collapsed */
|
|
33
|
+
defaultCollapsed?: boolean;
|
|
34
|
+
/** Enable dragging (default: true) */
|
|
35
|
+
draggable?: boolean;
|
|
36
|
+
}
|
|
37
|
+
declare function BugBearPanel({ getAppContext, position, defaultCollapsed, draggable, }: BugBearPanelProps): react_jsx_runtime.JSX.Element | null;
|
|
38
|
+
|
|
39
|
+
interface Props {
|
|
40
|
+
children: ReactNode;
|
|
41
|
+
/** Fallback UI to show when an error occurs */
|
|
42
|
+
fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
|
|
43
|
+
/** Called when an error is captured */
|
|
44
|
+
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
|
45
|
+
/** Whether to automatically show BugBear report modal on error */
|
|
46
|
+
showReportOnError?: boolean;
|
|
47
|
+
}
|
|
48
|
+
interface State {
|
|
49
|
+
hasError: boolean;
|
|
50
|
+
error: Error | null;
|
|
51
|
+
errorInfo: ErrorInfo | null;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Error boundary that captures React errors and integrates with BugBear
|
|
55
|
+
*/
|
|
56
|
+
declare class BugBearErrorBoundary extends Component<Props, State> {
|
|
57
|
+
constructor(props: Props);
|
|
58
|
+
static getDerivedStateFromError(error: Error): Partial<State>;
|
|
59
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
60
|
+
reset: () => void;
|
|
61
|
+
render(): ReactNode;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Hook to get current error context for manual error reporting
|
|
65
|
+
*/
|
|
66
|
+
declare function useErrorContext(): {
|
|
67
|
+
captureError: typeof captureError;
|
|
68
|
+
getEnhancedContext: () => _bbearai_core.EnhancedBugContext;
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export { BugBearErrorBoundary, BugBearPanel, BugBearProvider, useBugBear, useErrorContext };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, Component, ErrorInfo } from 'react';
|
|
3
|
+
import * as _bbearai_core from '@bbearai/core';
|
|
4
|
+
import { BugBearConfig, BugBearClient, TesterInfo, TestAssignment, AppContext, captureError } from '@bbearai/core';
|
|
5
|
+
export { AppContext, BugBearConfig, BugBearReport, ConsoleLogEntry, DeviceInfo, EnhancedBugContext, NetworkRequest, QATrack, ReportType, Severity, TestAssignment, TestTemplate, TesterInfo, captureError, contextCapture } from '@bbearai/core';
|
|
6
|
+
|
|
7
|
+
interface BugBearContextValue {
|
|
8
|
+
client: BugBearClient | null;
|
|
9
|
+
isTester: boolean;
|
|
10
|
+
isQAEnabled: boolean;
|
|
11
|
+
shouldShowWidget: boolean;
|
|
12
|
+
testerInfo: TesterInfo | null;
|
|
13
|
+
assignments: TestAssignment[];
|
|
14
|
+
currentAssignment: TestAssignment | null;
|
|
15
|
+
refreshAssignments: () => Promise<void>;
|
|
16
|
+
isLoading: boolean;
|
|
17
|
+
/** Navigate to a route/screen (for deep linking from test cases) */
|
|
18
|
+
onNavigate?: (route: string) => void;
|
|
19
|
+
}
|
|
20
|
+
declare function useBugBear(): BugBearContextValue;
|
|
21
|
+
interface BugBearProviderProps {
|
|
22
|
+
config: BugBearConfig;
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
}
|
|
25
|
+
declare function BugBearProvider({ config, children }: BugBearProviderProps): react_jsx_runtime.JSX.Element;
|
|
26
|
+
|
|
27
|
+
interface BugBearPanelProps {
|
|
28
|
+
/** Get current app context */
|
|
29
|
+
getAppContext?: () => AppContext;
|
|
30
|
+
/** Position of the panel */
|
|
31
|
+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
32
|
+
/** Initially collapsed */
|
|
33
|
+
defaultCollapsed?: boolean;
|
|
34
|
+
/** Enable dragging (default: true) */
|
|
35
|
+
draggable?: boolean;
|
|
36
|
+
}
|
|
37
|
+
declare function BugBearPanel({ getAppContext, position, defaultCollapsed, draggable, }: BugBearPanelProps): react_jsx_runtime.JSX.Element | null;
|
|
38
|
+
|
|
39
|
+
interface Props {
|
|
40
|
+
children: ReactNode;
|
|
41
|
+
/** Fallback UI to show when an error occurs */
|
|
42
|
+
fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
|
|
43
|
+
/** Called when an error is captured */
|
|
44
|
+
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
|
45
|
+
/** Whether to automatically show BugBear report modal on error */
|
|
46
|
+
showReportOnError?: boolean;
|
|
47
|
+
}
|
|
48
|
+
interface State {
|
|
49
|
+
hasError: boolean;
|
|
50
|
+
error: Error | null;
|
|
51
|
+
errorInfo: ErrorInfo | null;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* Error boundary that captures React errors and integrates with BugBear
|
|
55
|
+
*/
|
|
56
|
+
declare class BugBearErrorBoundary extends Component<Props, State> {
|
|
57
|
+
constructor(props: Props);
|
|
58
|
+
static getDerivedStateFromError(error: Error): Partial<State>;
|
|
59
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
60
|
+
reset: () => void;
|
|
61
|
+
render(): ReactNode;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Hook to get current error context for manual error reporting
|
|
65
|
+
*/
|
|
66
|
+
declare function useErrorContext(): {
|
|
67
|
+
captureError: typeof captureError;
|
|
68
|
+
getEnhancedContext: () => _bbearai_core.EnhancedBugContext;
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export { BugBearErrorBoundary, BugBearPanel, BugBearProvider, useBugBear, useErrorContext };
|