@np-dev/ui-ai-anotation 0.1.0

package/README.md

@@ -0,0 +1,245 @@
+# react-ai-anotation
+
+AI-powered annotation toolkit for React and React Native apps. Enables component inspection, annotation, and screenshot capture for AI-assisted development workflows.
+
+## Features
+
+- 🔍 **Component Inspector** - Hover/tap to identify React components
+- 📝 **Annotations** - Add notes to components for AI context
+- 📷 **Screenshots** - Capture component screenshots (web + native)
+- 🖱️ **Draggable Toolbar** - Non-intrusive floating UI
+- 🌐 **Cross-platform** - Works on Web, iOS, and Android
+- 🧩 **Chrome Extension** - Annotate any website!
+
+## Installation
+
+```bash
+# Using npm
+npm install react-ai-anotation
+
+# Using yarn
+yarn add react-ai-anotation
+
+# Using bun
+bun add react-ai-anotation
+```
+
+### Additional dependencies
+
+**For Web:**
+```bash
+npm install framer-motion html2canvas lucide-react
+```
+
+**For React Native:**
+```bash
+npm install react-native-view-shot
+
+# Optional for clipboard support
+npm install expo-clipboard
+
+# Optional for saving to camera roll
+npm install expo-media-library
+```
+
+## Usage
+
+### Web (React)
+
+```tsx
+import { AiAnnotationProvider } from 'react-ai-anotation';
+
+function App() {
+  return (
+    <AiAnnotationProvider>
+      <YourApp />
+    </AiAnnotationProvider>
+  );
+}
+```
+
+### React Native
+
+```tsx
+import { AiAnnotationProvider } from 'react-ai-anotation/native';
+// or
+import { AiAnnotationProvider } from 'react-ai-anotation';
+
+function App() {
+  return (
+    <AiAnnotationProvider>
+      <YourApp />
+    </AiAnnotationProvider>
+  );
+}
+```
+
+## API
+
+### Components
+
+#### `AiAnnotationProvider`
+
+Wraps your app to provide annotation functionality.
+
+```tsx
+<AiAnnotationProvider>
+  {children}
+</AiAnnotationProvider>
+```
+
+#### `Toolbar`
+
+The floating toolbar with annotation controls. Automatically rendered by the provider.
+
+#### `Highlighter`
+
+Component inspector overlay. Highlights components on hover (web) or tap (native).
+
+**Native-specific props:**
+```tsx
+interface HighlighterProps {
+  onInspect?: (event: GestureResponderEvent) => {
+    name: string;
+    rect: { x: number; y: number; width: number; height: number };
+  } | null;
+}
+```
+
+### Hooks
+
+#### `useAiAnnotation()`
+
+Access annotation state and dispatch actions.
+
+```tsx
+const { state, dispatch } = useAiAnnotation();
+
+// State shape
+interface State {
+  mode: 'disabled' | 'inspecting';
+  annotations: Annotation[];
+  hoveredElement: any;
+  hoveredComponentInfo: { name: string } | null;
+  isMinimized: boolean;
+  showList: boolean;
+}
+
+// Actions
+dispatch({ type: 'SET_MODE', payload: 'inspecting' });
+dispatch({ type: 'ADD_ANNOTATION', payload: { id, componentName, note, timestamp } });
+dispatch({ type: 'REMOVE_ANNOTATION', payload: annotationId });
+dispatch({ type: 'CLEAR_ALL_ANNOTATIONS' });
+dispatch({ type: 'TOGGLE_MINIMIZED' });
+dispatch({ type: 'TOGGLE_LIST' });
+```
+
+### Utilities
+
+#### `captureScreenshot(element, options)`
+
+Capture a screenshot of an element/view.
+
+**Web:**
+```tsx
+import { captureScreenshot } from 'react-ai-anotation';
+
+const result = await captureScreenshot(htmlElement, {
+  scale: 2,
+  copyToClipboard: true,
+  download: false,
+});
+```
+
+**Native:**
+```tsx
+import { captureScreenshot } from 'react-ai-anotation/native';
+
+const viewRef = useRef<View>(null);
+
+const result = await captureScreenshot(viewRef, {
+  scale: 2,
+  format: 'png',
+  copyToClipboard: true,
+  saveToCameraRoll: false,
+});
+```
+
+#### Platform Detection
+
+```tsx
+import { isWeb, isNative, getPlatform, isTauriEnv } from 'react-ai-anotation';
+
+if (isWeb) {
+  // Web-specific code
+}
+
+if (isNative) {
+  // React Native-specific code
+}
+
+const platform = getPlatform(); // 'web' | 'ios' | 'android' | 'native'
+```
+
+## Toolbar Controls
+
+| Button | Description |
+|--------|-------------|
+| ⋮⋮ | Drag handle - move the toolbar |
+| 👆/🚫 | Toggle inspection mode |
+| 📋 | View annotation list |
+| 📋 | Copy annotations as JSON |
+| ➖/⬜ | Minimize/expand toolbar |
+
+## Workflow
+
+1. **Enable Inspection** - Click the inspection toggle
+2. **Select Component** - Hover (web) or tap (native) on a component
+3. **Lock Selection** - Click to lock the selection (web)
+4. **Add Annotation** - Click the + button to add a note
+5. **Copy Annotations** - Copy all annotations as JSON for AI context
+
+## Tauri Support
+
+The package includes special handling for Tauri apps (web apps running in Tauri):
+
+```tsx
+import { isTauriEnv, captureScreenshot } from 'react-ai-anotation';
+
+if (isTauriEnv()) {
+  // Uses @tauri-apps/plugin-clipboard-manager for clipboard
+}
+```
+
+## Chrome Extension
+
+Use the annotation toolkit on any website as a Chrome extension!
+
+### Build the Extension
+
+```bash
+cd packages/react-ai-anotation
+bun install
+bun run build:extension
+```
+
+### Install in Chrome
+
+1. Go to `chrome://extensions/`
+2. Enable **Developer mode** (toggle in top right)
+3. Click **Load unpacked**
+4. Select the `dist/` folder
+
+### Usage
+
+1. Click the extension icon to open the popup
+2. Toggle "Enable Inspector" to activate on the current page
+3. Hover over elements to highlight them
+4. Click to add annotations
+5. Use the floating toolbar to manage annotations
+
+See [extension/README.md](extension/README.md) for more details.
+
+## License
+
+MIT