open-index/open-npm huggingface dataset:
npm package: @janpelepeeps/bug-reporter-widget
Description: A lightweight, embeddable bug reporting widget for React apps. It renders a floating button that opens a modal for reporting bugs with a rich-text description, inline image paste, and severity selection.
Latest version: 0.1.0

# Bug Reporter Widget

A lightweight, embeddable bug reporting widget for React apps. It renders a floating button that opens a modal for reporting bugs with a rich-text description, inline image paste, and severity selection.

Default API base URL:
- https://bug-tracker-ja7j.onrender.com

## Features
- Floating button + modal UI
- Rich-text editor with image paste/upload (stored as base64 HTML)
- Required fields: title, description, severity
- Works with any REST API endpoint
- TypeScript strict mode types

## Installation
```bash
npm install @janpelepeeps/bug-reporter-widget
# or
pnpm add @janpelepeeps/bug-reporter-widget
# or
yarn add @janpelepeeps/bug-reporter-widget
```

## Tailwind Requirement
This package uses Tailwind utility classes (shadcn-style). Your host app must have Tailwind configured.

Make sure your Tailwind `content` includes the package so classes are not purged:
```ts
// tailwind.config.ts
export default {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@janpelepeeps/bug-reporter-widget/dist/**/*.{js,ts,tsx}',
  ],
  theme: { extend: {} },
  plugins: [],
}
```

## Basic Usage
```tsx
import { BugReporter } from '@janpelepeeps/bug-reporter-widget'

export default function App() {
  return (
    <>
      <MainApp />
      <BugReporter />
    </>
  )
}
```

By default, the widget posts to `POST /api/bugs/` on `https://bug-tracker-ja7j.onrender.com`.

## Custom Endpoint
```tsx
<BugReporter apiBaseUrl="https://your-api.com" endpoint="/api/v1/bugs/" />
```

## Custom Submit Handler
```tsx
<BugReporter
  onSubmit={async (payload) => {
    await fetch('https://your-api.com/api/bugs/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    })
  }}
/>
```

## Props
`BugReporter`
- `apiBaseUrl?: string` Base URL for your API.
- `endpoint?: string` Endpoint path (defaults to `/api/bugs/`).
- `onSubmit?: (payload) => Promise<void>` Override submission.
- `className?: string` Optional wrapper class.

## Payload Shape
```ts
interface BugReportPayload {
  title: string
  description: string // HTML string (rich text with embedded images)
  severity: 'low' | 'medium' | 'high' | 'critical'
}
```

## Build (for local development)
```bash
pnpm install
pnpm build
```

## Publish
```bash
npm login
npm publish --access public
```

## Notes
- Images pasted into the editor are embedded as base64 in the HTML string.
- For security, sanitize HTML on the server if you plan to render it.