@uxbertlabs/reportly 1.0.0

package/README.md

@@ -0,0 +1,162 @@
+# Reportly
+
+A simple JavaScript plugin that enables QA teams to report UI issues directly from any webpage with screenshots and annotations.
+
+## Features
+
+- **🐛 Floating Action Button** - Always accessible, non-intrusive
+- **📸 Auto Screenshot** - Captures the current page instantly
+- **✏️ Annotation Tools** - Draw, add arrows, and rectangles
+- **📱 Device Context** - Auto-captures browser, OS, and screen info
+- **📥 JSON Export** - Download complete issue reports locally
+
+## Quick Start
+
+### 1. Install Dependencies
+
+```bash
+npm install @uxbertlabs/reportly
+```
+
+### 2. Build the Plugin
+
+```bash
+npm run build
+```
+
+This creates `dist/reportly.js` and `dist/reportly.min.js`
+
+### 3. Try the Demo
+
+Open `demo.html` in your browser to see it in action!
+
+## Installation
+
+### Method 1: Script Tag (Recommended)
+
+```html
+<script src="dist/reportly.min.js"></script>
+<script>
+  Reportly.init({
+    ui: {
+      position: "bottom-right",
+      theme: "light",
+    },
+  });
+</script>
+```
+
+### Method 2: ES Module
+
+```javascript
+import Reportly from "./dist/reportly.js";
+
+Reportly.init();
+```
+
+## Configuration
+
+```javascript
+Reportly.init({
+  ui: {
+    position: "bottom-right", // 'bottom-left', 'top-right', 'top-left'
+    theme: "light", // or 'dark'
+  },
+  features: {
+    annotation: true,
+    deviceInfo: true,
+  },
+});
+```
+
+## API Reference
+
+```javascript
+// Open issue reporter manually
+Reportly.open();
+
+// Close issue reporter
+Reportly.close();
+
+// Update configuration
+Reportly.updateConfig({ ui: { theme: "dark" } });
+
+// Get saved issues
+const issues = Reportly.getSavedIssues();
+
+// Clear saved issues
+Reportly.clearSavedIssues();
+
+// Export all saved issues
+Reportly.exportAllIssues();
+
+// Listen to events
+Reportly.on("issue:created", (issue) => {
+  console.log("New issue:", issue);
+});
+
+// Destroy instance
+Reportly.destroy();
+```
+
+## Exported JSON Format
+
+```json
+{
+  "title": "Button alignment issue",
+  "description": "The submit button is cut off on mobile",
+  "priority": "High",
+  "screenshot": "data:image/png;base64,...",
+  "deviceInfo": {
+    "browser": "Chrome 120.0",
+    "os": "macOS",
+    "screenResolution": "1920x1080",
+    "viewport": "1440x900",
+    "url": "https://example.com",
+    "timestamp": "2025-10-12T10:30:00Z",
+    "userAgent": "Mozilla/5.0..."
+  },
+  "createdAt": "2025-10-12T10:30:00Z"
+}
+```
+
+## Development
+
+### Project Structure
+
+```
+reportly/
+├── src/
+│   ├── core/           # Core functionality
+│   ├── ui/             # UI components
+│   ├── features/       # Features (screenshot, annotation, etc.)
+│   └── utils/          # Utility functions
+├── dist/               # Built files
+├── demo.html           # Demo page
+└── package.json
+```
+
+### Build Commands
+
+```bash
+# Development mode (watch for changes)
+npm run dev
+
+# Production build
+npm run build
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.