hocmai-feedback-widget 0.1.14 → 0.2.1

package/README.md

@@ -5,6 +5,7 @@ A React library for collecting user feedback with screenshot capabilities, conte
 ## Features
 - **Context-Aware**: Support for multiple questions/items on a single page.
 - **Screenshot Capture**: Automatic viewport capture with cropping/highlighting.
+- **Auto-Upload**: Screenshots are automatically uploaded to S3 and returned as URLs.
 - **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.
@@ -37,13 +38,13 @@ Wrap your root component (or the section of the app that needs feedback) with `F
 ```tsx
 import { FeedbackProvider, type FeedbackData } from 'hocmai-feedback-widget';
 // If styles are not automatically injected by your bundler, you might need:
-// import '@antigravity/feedback-widget/dist/style.css';
+// import 'hocmai-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.listImage contains URLs of uploaded images
     // data.deviceInfo contains browser/OS info
     // data.errorType contains the selected category
   };
@@ -69,7 +70,7 @@ const QuestionItem = ({ id, content }) => {
     <div className="card">
       <p>{content}</p>
       <button 
-        onClick={() => openFeedback(id, { source: 'QuestionItem', extra: 'details' })}
+        onClick={() => openFeedback(id, { questionIdChild: 'optional-child-id', ...otherContext })}
       >
         Report Error
       </button>
@@ -78,8 +79,8 @@ const QuestionItem = ({ id, content }) => {
 };
 ```
 
-### 3. Standalone Component (Legacy)
-If you only need a single widget instance and manage state manually:
+### 3. Standalone Component
+If you need a single widget instance and manage state manually (legacy mode):
 
 ```tsx
 import { FeedbackWidget } from 'hocmai-feedback-widget';
@@ -89,6 +90,8 @@ import { FeedbackWidget } from 'hocmai-feedback-widget';
   isOpen={isOpen}
   onClose={() => setIsOpen(false)}
   onSubmit={handleSubmit}
+  isEnableCaptureFull={true}
+  isEnableCaptureElement={true}
 />
 ```
 
@@ -101,34 +104,41 @@ import { FeedbackWidget } from 'hocmai-feedback-widget';
 | `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, questionIdChild?: string | number, contextData?: any)`: Opens the form with the specified ID.
-
-### Close Feedback Hook
-Returns an object with:
-- `closeFeedback()`: Closes the form.
-
-### 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 'hocmai-feedback-widget';
-
-function App() {
-  const handleSubmit = async (data) => {
-    console.log('Feedback submitted:', data);
-  };
-
-  return (
-    <FeedbackProvider onSubmit={handleSubmit}>
-      <YourAppContent />
-    </FeedbackProvider>
-  );
+### FeedbackData Interface
+```ts
+interface FeedbackData {
+    idQuestion: string | number;
+    idChildQuestion?: string | number;
+    errorDescription: string;
+    errorType: string;
+    listImage: string[]; // Array of image URLs
+    deviceInfo: {
+        device: string;
+        os: string;
+        browser: string;
+        screen: string;
+        userAgent: string;
+    };
+    contextData?: any;
 }
 ```
 
-**Note**: You won't get autocomplete for props, but the functionality remains the same.
+### useFeedback Hook
+Returns an object with:
+- `openFeedback(questionId: string | number, contextData?: any)`: Opens the form. `contextData` can include `questionIdChild` which will pre-fill the child question ID field.
+- `closeFeedback()`: Closes the form.
 
-**Note**: You need to refer to and combine the documentation link below to prepare the question report.
-url: https://gist.github.com/haiduy/fe2b016af8f0c9d268d791b130dc64d2
+### FeedbackWidget Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `questionId` | `string \| number` | Required | Main ID of the item being reported. |
+| `onSubmit` | `function` | Required | Async callback receiving `FeedbackData`. |
+| `contextData` | `object` | - | Additional data passed to `FeedbackData`. |
+| `themeColor` | `string` | `#3b82f6` | Theme color. |
+| `isOpen` | `boolean` | - | Control visibility manually. |
+| `onClose` | `function` | - | Callback when closed. |
+| `isEnableCaptureFull` | `boolean` | `true` | Enable full screen capture button. |
+| `isEnableCaptureElement` | `boolean` | `true` | Enable crop/element capture button. |
+
+## License
+MIT

package/dist/components/FeedbackWidget.d.ts

@@ -11,7 +11,6 @@ export interface FeedbackData {
 }
 export interface FeedbackProps {
     questionId: string | number;
-    questionIdChild?: string | number;
     contextData?: Record<string, any>;
     onSubmit: (data: FeedbackData) => Promise<void>;
     themeColor?: string;
@@ -19,6 +18,8 @@ export interface FeedbackProps {
     isOpen?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
+    isEnableCaptureFull?: boolean;
+    isEnableCaptureElement?: boolean;
 }
 declare const FeedbackWidget: React.FC<FeedbackProps>;
 export default FeedbackWidget;

package/dist/context/FeedbackContext.d.ts

@@ -1,7 +1,7 @@
 import { default as React, ReactNode } from 'react';
 import { FeedbackData } from '../components/FeedbackWidget';
 interface FeedbackContextType {
-    openFeedback: (questionId: string | number, questionIdChild?: string | number | undefined, contextData?: any) => void;
+    openFeedback: (questionId: string | number, contextData?: any) => void;
     closeFeedback: () => void;
     isOpen: boolean;
     activeQuestionId: string | number | null;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export { default as FeedbackWidget } from './components/FeedbackWidget';
 export type { FeedbackData, FeedbackProps } from './components/FeedbackWidget';
 export { FeedbackProvider, useFeedback } from './context/FeedbackContext';
+export { captureScreenshot } from './utils/screenshot';
+export type { Rect, CaptureProgress } from './utils/screenshot/types';