hocmai-feedback-widget 0.1.0

package/README.md

@@ -0,0 +1,129 @@
+# Support Feedback Widget
+
+A React library for collecting user feedback with screenshot capabilities, context support, and interactive region cropping.
+
+## Features
+- **Context-Aware**: Support for multiple questions/items on a single page.
+- **Screenshot Capture**: Automatic viewport capture with cropping/highlighting.
+- **Image Protection**: Prevents right-click/download on sensitive screenshots.
+- **Responsive**: Mobile-friendly "bottom sheet" style on small screens.
+- **Customizable**: Theme colors, context data, and error types.
+
+## Installation
+
+### Via NPM/Yarn
+```bash
+npm install @antigravity/feedback-widget
+# or
+yarn add @antigravity/feedback-widget
+```
+
+### Local Installation
+1. Build and pack the project:
+   ```bash
+   npm run build
+   npm pack
+   ```
+2. Install the generated `.tgz` file in your target project:
+   ```bash
+   npm install ./path/to/antigravity-feedback-widget-0.1.0.tgz
+   ```
+
+## Usage
+
+### 1. Wrap your application
+Wrap your root component (or the section of the app that needs feedback) with `FeedbackProvider`.
+
+```tsx
+import { FeedbackProvider, type FeedbackData } from '@antigravity/feedback-widget';
+// If styles are not automatically injected by your bundler, you might need:
+// import '@antigravity/feedback-widget/dist/style.css';
+
+function App() {
+  const handleSubmit = async (data: FeedbackData) => {
+    // Send data to your API
+    console.log('Feedback submitted:', data);
+    // data.screenshots contains base64 images
+    // data.deviceInfo contains browser/OS info
+    // data.errorType contains the selected category
+  };
+
+  return (
+    <FeedbackProvider onSubmit={handleSubmit} themeColor="#3b82f6">
+      <YourAppContent />
+    </FeedbackProvider>
+  );
+}
+```
+
+### 2. Trigger Feedback Form
+Use the `useFeedback` hook anywhere in your child components to open the widget for a specific item.
+
+```tsx
+import { useFeedback } from '@antigravity/feedback-widget';
+
+const QuestionItem = ({ id, content }) => {
+  const { openFeedback } = useFeedback();
+
+  return (
+    <div className="card">
+      <p>{content}</p>
+      <button 
+        onClick={() => openFeedback(id, { source: 'QuestionItem', extra: 'details' })}
+      >
+        Report Error
+      </button>
+    </div>
+  );
+};
+```
+
+### 3. Standalone Component (Legacy)
+If you only need a single widget instance and manage state manually:
+
+```tsx
+import { FeedbackWidget } from '@antigravity/feedback-widget';
+
+<FeedbackWidget 
+  questionId="123"
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  onSubmit={handleSubmit}
+/>
+```
+
+## Props & Configuration
+
+### FeedbackProvider
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `onSubmit` | `(data: FeedbackData) => Promise<void>` | Yes | Callback when feedback is sent. |
+| `themeColor` | `string` | No | Primary color for buttons/highlights. Default: `#3b82f6`. |
+| `children` | `ReactNode` | Yes | Your application content. |
+
+### useFeedback Hook
+Returns an object with:
+- `openFeedback(questionId: string | number, contextData?: any)`: Opens the form with the specified ID.
+### 4. Using with JavaScript (No TypeScript)
+This library is fully compatible with standard JavaScript projects. The usage is identical, just without type annotations.
+
+```jsx
+import { FeedbackProvider, useFeedback } from '@antigravity/feedback-widget';
+
+function App() {
+  const handleSubmit = async (data) => {
+    console.log('Feedback submitted:', data);
+  };
+
+  return (
+    <FeedbackProvider onSubmit={handleSubmit}>
+      <YourAppContent />
+    </FeedbackProvider>
+  );
+}
+```
+
+**Note**: You won't get autocomplete for props, but the functionality remains the same.
+
+<!-- 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
+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 -->

package/dist/components/CropOverlay.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface CropOverlayProps {
+    onConfirm: (rect: Rect) => void;
+    onCancel: () => void;
+}
+declare const CropOverlay: React.FC<CropOverlayProps>;
+export default CropOverlay;

package/dist/components/FeedbackWidget.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { getDeviceInfo } from '../utils/device';
+export interface FeedbackData {
+    idQuestion: string | number;
+    idChildQuestion?: string | number;
+    errorDescription: string;
+    errorType: string;
+    listImage: string[];
+    deviceInfo: ReturnType<typeof getDeviceInfo>;
+    contextData?: any;
+}
+export interface FeedbackProps {
+    questionId: string | number;
+    questionIdChild?: string | number;
+    contextData?: Record<string, any>;
+    onSubmit: (data: FeedbackData) => Promise<void>;
+    themeColor?: string;
+    triggerComponent?: React.ReactNode;
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+declare const FeedbackWidget: React.FC<FeedbackProps>;
+export default FeedbackWidget;

package/dist/context/FeedbackContext.d.ts

@@ -0,0 +1,16 @@
+import { default as React, ReactNode } from 'react';
+import { FeedbackData } from '../components/FeedbackWidget';
+interface FeedbackContextType {
+    openFeedback: (questionId: string | number, contextData?: any) => void;
+    closeFeedback: () => void;
+    isOpen: boolean;
+    activeQuestionId: string | number | null;
+}
+export declare const useFeedback: () => FeedbackContextType;
+interface FeedbackProviderProps {
+    children: ReactNode;
+    onSubmit: (data: FeedbackData) => Promise<void>;
+    themeColor?: string;
+}
+export declare const FeedbackProvider: React.FC<FeedbackProviderProps>;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FeedbackWidget } from './components/FeedbackWidget';
+export type { FeedbackData, FeedbackProps } from './components/FeedbackWidget';
+export { FeedbackProvider, useFeedback } from './context/FeedbackContext';