galadrim-feedback 0.0.91 → 1.0.0

package/README.md

@@ -1,26 +1,112 @@
-# Installation Guide for Galadrim Feedback
+# Galadrim Feedback
 
-## Prérequis
+## Project Configuration
 
-Avant d'installer **Galadrim Feedback**, assurez-vous d'avoir **axios** installé dans votre projet.
+Go to https://feedback.galadrim.ovh/admin
+
+Log in with credentials from Passbolt: Back-Office - Galadrim Feedback
+
+Create a project
+
+Copy the project ID
+
+## Installation
+
+### 🚀 Super Quick Install (Recommended)
+
+Use our CLI to automatically copy the installation prompt:
+
+```bash
+npx galadrim-feedback cursor-init --project-id="project_id"
+```
+
+This will copy the complete installation prompt to your clipboard. Then simply paste it into Cursor and let it handle the installation automatically!
+
+<details>
+<summary><h3>🤖 Quick Install with Cursor</h3></summary>
+
+```
+Install and configure Galadrim Feedback in this React project:
+
+1. Install dependencies:
+   - Run: yarn add axios galadrim-feedback
+
+2. Detect and configure Babel plugin based on project setup:
+   - First, check if this project uses React Router by looking for @react-router dependencies in package.json
+   - If React Router is detected:
+     * Install: yarn add babel-plugin-react-generate-paths vite-plugin-babel
+     * Create/update .babelrc with:
+       {
+         "presets": ["@babel/preset-typescript"],
+         "plugins": ["babel-plugin-react-generate-paths"]
+       }
+     * Update vite.config.ts to add babel plugin:
+       import babel from "vite-plugin-babel";
+       Add babel plugin with include: ["./app/**/*.tsx", "./app/**/*.ts"], filter: (name) => name.endsWith(".tsx")
+   - Else if vite.config.ts exists:
+     * Update vite.config.ts to add babel-plugin-react-generate-paths to the react plugin configuration
+   - Else if .babelrc exists:
+     * Add "babel-plugin-react-generate-paths" to the plugins array in .babelrc
+
+3. Configure FeedbackRoot component:
+   - Run `pwd` command in the frontend root directory and use this absolute path for rootDir prop
+   - Detect navigation package used in the project:
+     * If using React Router (react-router-dom):
+       - Import: import { useNavigate } from "react-router-dom";
+       - Hook: const navigate = useNavigate();
+       - Navigate prop: navigate={(path) => navigate(path)}
+     * If using Next.js router (next/router):
+       - Import: import { useRouter } from "next/router";
+       - Hook: const router = useRouter();
+       - Navigate prop: navigate={(path) => router.push(path)}
+     * If using Next.js app router (next/navigation):
+       - Import: import { useRouter } from "next/navigation";
+       - Hook: const router = useRouter();
+       - Navigate prop: navigate={(path) => router.push(path)}
+   - Add FeedbackRoot to the main App component with:
+     * Import FeedbackRoot from "galadrim-feedback"
+     * Import "galadrim-feedback/dist/styles.css"
+     * Add <FeedbackRoot> component with these props:
+       - rootDir="{absolute path from pwd command}"
+       - projectId="your-project-id" (placeholder - user needs to get this from admin)
+       - navigate={(path) => navigate(path)} (using detected navigation method)
+       - position="bottom-right"
+     * Place it inside the router context but outside main content areas
+
+4. Verification:
+   - Show all modified files
+   - Confirm the navigation setup works with the detected router
+   - List any manual steps needed (like getting projectId from admin)
+
+Be very specific about file paths and exact code to add. Show the complete import statements and component setup.
+```
+
+</details>
+
+<details>
+<summary><h3>Manual Installation</h3></summary>
+
+### Prerequisites
+
+Before installing **Galadrim Feedback**, make sure you have **axios** installed in your project.
 
 ```bash
 yarn add axios
 ```
 
-Ensuite, installez **Galadrim Feedback** :
+Then, install **Galadrim Feedback**:
 
 ```bash
 yarn add galadrim-feedback
 ```
 
-## Configuration Babel
+### Babel Configuration
 
-Ajoutez le plugin **babel-plugin-react-generate-paths** dans votre configuration Babel.
+Add the **babel-plugin-react-generate-paths** plugin to your Babel configuration.
 
-### Option 1: Dans `vite.config.ts`
+#### Option 1: In `vite.config.ts`
 
-Si vous utilisez Vite, ajoutez le plugin dans le fichier `vite.config.ts` comme suit :
+If you're using Vite, add the plugin in the `vite.config.ts` file as follows:
 
 ```typescript
 import { defineConfig } from "vite";
@@ -38,9 +124,9 @@ export default defineConfig({
 });
 ```
 
-### Option 2: Dans `.babelrc`
+#### Option 2: In `.babelrc`
 
-Si vous utilisez un fichier `.babelrc`, ajoutez le plugin dans la section `plugins` :
+If you're using a `.babelrc` file, add the plugin to the `plugins` section:
 
 ```json
 {
@@ -48,7 +134,7 @@ Si vous utilisez un fichier `.babelrc`, ajoutez le plugin dans la section `plugi
 }
 ```
 
-### Pour React router :
+#### For React Router:
 
 ```typescript
 // vite.config.ts
@@ -78,28 +164,117 @@ export default defineConfig({
 }
 ```
 
-## Intégration de FeedbackRoot
+### FeedbackRoot Integration
 
-Ajoutez le composant **FeedbackRoot** à la racine de votre application. Il doit être placé à l'intérieur du **router**.
+Add the **FeedbackRoot** component to the root of your application. It must be placed inside the **router**.
 
 ```javascript
 import FeedbackRoot from "galadrim-feedback";
-import "galadrim-feedback/dist/styles.css"; // N'oubliez pas d'importer les styles CSS
+import "galadrim-feedback/dist/styles.css"; // Don't forget to import the CSS styles
 
-// Ajoutez FeedbackRoot à votre application
+// Add FeedbackRoot to your application
 <FeedbackRoot
   rootDir="/path/to/your/project"
-  projectId="your-project-id" // L'id de votre projet dans Galadmin
-  navigate={(path) => navigate(path)} // Fonction de navigation pour utiliser votre router
-  position="bottom-right" // Position du bouton pour ouvrir le mode Feedback (bottom-right, bottom-left, top-right, top-left)
+  projectId="your-project-id" // Your project ID in Galadmin
+  navigate={(path) => navigate(path)} // Navigation function to use your router
+  position="bottom-right" // Position of the button to open Feedback mode (bottom-right, bottom-left, top-right, top-left)
 />;
 ```
 
-### Explication des Props :
+#### Props Explanation:
+
+- **rootDir**: The path to your project root up to src (feedbacks will be linked to components with the path `src/path/to/your/component` which is combined with rootDir to open them in VSCode).
+- **projectId**: Your project identifier in **Galadmin**. (request from an administrator)
+- **navigate**: A function that takes a path and allows you to navigate using your **router**.
+- **position**: The position of the button to open Feedback mode (bottom-right, bottom-left, top-right, top-left)
+
+This concludes the installation of **Galadrim Feedback** in your project!
+
+</details>
+
+## Account Creation
+
+Once it's installed, you can sign up and then in the galadmin, you add yourself as a collaborator on the project
+
+## Galadrim Feedback MCP Server
+
+A Model Context Protocol (MCP) server for the Galadrim feedback system. This server provides tools to fetch and manage feedbacks from a project via the backend API.
+
+### Cursor Configuration
+
+To add this MCP server to Cursor, you need to configure it in your Cursor settings.
+
+Add the following to your Cursor MCP settings:
+
+```json
+{
+  "mcpServers": {
+    "galadrim-feedback": {
+      "command": "npx",
+      "args": ["galadrim-feedback-mcp@latest"]
+    }
+  }
+}
+```
+
+### Available Tools
+
+#### `get_feedbacks`
+
+Fetches all feedbacks for a specific project from the Galadrim feedback backend API.
+
+#### `mark_as_resolved`
+
+Marks a feedback as resolved.
+
+#### `mark_multiple_as_resolved`
+
+Marks multiple feedbacks as resolved.
+
+## CLI Commands
+
+Galadrim Feedback includes a CLI tool for easier setup and management.
+
+### Available Commands
+
+#### `cursor-init`
+
+Automatically sends the installation prompt directly to your IDE or copies it to clipboard.
+
+```bash
+npx galadrim-feedback cursor-init
+```
+
+**What it does:**
+
+- 🔍 **Auto-detects** running IDEs (Cursor, VS Code)
+- 🚀 **Direct integration**:
+  - **macOS**: Uses AppleScript to interact directly with IDE
+  - **All platforms**: Creates temporary file with formatted prompt
+  - **Fallback**: Copies to clipboard if direct methods fail
+- 📝 **Smart formatting**: Creates markdown file with copy-ready prompt
+- 🧹 **Clean workflow**: Temporary files can be deleted after use
+
+**Integration Methods:**
+
+1. **AppleScript (macOS)**: Attempts to open AI chat and paste prompt directly
+2. **File creation**: Opens a formatted `.md` file in your IDE
+3. **Clipboard fallback**: Traditional copy-to-clipboard as backup
+
+#### `help`
+
+Shows all available CLI commands and usage information.
+
+```bash
+npx galadrim-feedback help
+```
+
+### Cross-Platform Support
+
+The CLI automatically detects your operating system and uses the appropriate clipboard command:
 
-- **rootDir** : Le chemin vers la racine de votre projet jusqu'à src (les feedbacks seront liés au composant avec le chemin `src/path/to/your/component` auquel on ajoute le rootDir pour pouvoir les ouvrir dans VScode).
-- **projectId** : L'identifiant de votre projet dans **Galadmin**. (demandé à un administrateur)
-- **navigate** : Une fonction qui prend un chemin et vous permet de naviguer en utilisant votre **router**.
-- **position** : La position du bouton pour ouvrir le mode Feedback (bottom-right, bottom-left, top-right, top-left)
+- **macOS**: `pbcopy`
+- **Linux**: `xclip`
+- **Windows**: `clip`
 
-Cela conclut l'installation de **Galadrim Feedback** dans votre projet !
+If clipboard operations fail, the CLI will display the prompt text for manual copying.

package/bin/cli.js

@@ -0,0 +1,189 @@
+#!/usr/bin/env node
+
+import { readFileSync, existsSync } from "fs";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+import { spawn, exec } from "child_process";
+import { promisify } from "util";
+import * as vscode from "vscode-test";
+
+const execAsync = promisify(exec);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const PROJECT_ID = process.argv
+  .find((arg) => arg.startsWith("--project-id="))
+  ?.split("=")[1]
+  .trim();
+
+const CURSOR_PROMPT = `Install and configure Galadrim Feedback in this React project:
+
+1. Install dependencies:
+   - Run: yarn add axios galadrim-feedback
+
+2. Detect and configure Babel plugin based on project setup:
+   - First, check if this project uses React Router by looking for @react-router dependencies in package.json
+   - If React Router is detected:
+     * Install: yarn add babel-plugin-react-generate-paths vite-plugin-babel
+     * Create/update .babelrc with:
+       {
+         "presets": ["@babel/preset-typescript"],
+         "plugins": ["babel-plugin-react-generate-paths"]
+       }
+     * Update vite.config.ts to add babel plugin:
+       import babel from "vite-plugin-babel";
+       Add babel plugin with include: ["./app/**/*.tsx", "./app/**/*.ts"], filter: (name) => name.endsWith(".tsx")
+   - Else if vite.config.ts exists:
+     * Update vite.config.ts to add babel-plugin-react-generate-paths to the react plugin configuration
+   - Else if .babelrc exists:
+     * Add "babel-plugin-react-generate-paths" to the plugins array in .babelrc
+
+3. Configure FeedbackRoot component:
+   - Run \`pwd\` command in the frontend root directory and use this absolute path for rootDir prop
+   - Detect navigation package used in the project:
+     * If using React Router (react-router-dom):
+       - Import: import { useNavigate } from "react-router-dom";
+       - Hook: const navigate = useNavigate();
+       - Navigate prop: navigate={(path) => navigate(path)}
+     * If using Next.js router (next/router):
+       - Import: import { useRouter } from "next/router";
+       - Hook: const router = useRouter();
+       - Navigate prop: navigate={(path) => router.push(path)}
+     * If using Next.js app router (next/navigation):
+       - Import: import { useRouter } from "next/navigation";
+       - Hook: const router = useRouter();
+       - Navigate prop: navigate={(path) => router.push(path)}
+   - Add FeedbackRoot to the main App component with:
+     * Import FeedbackRoot from "galadrim-feedback"
+     * Import "galadrim-feedback/dist/styles.css"
+     * Add <FeedbackRoot> component with these props:
+       - rootDir="{absolute path from pwd command}"
+       - projectId="${PROJECT_ID}"
+       - navigate={(path) => navigate(path)} (using detected navigation method)
+       - position="bottom-right"
+     * Place it inside the router context but outside main content areas
+
+4. Verification:
+   - Show all modified files
+   - Confirm the navigation setup works with the detected router
+   - List any manual steps needed (like getting projectId from admin) (see https://feedback.galadrim.ovh/admin)
+
+Be very specific about file paths and exact code to add. Show the complete import statements and component setup.`;
+
+function showHelp() {
+  console.log(`
+🚀 Galadrim Feedback CLI
+
+Usage:
+  npx galadrim-feedback <command> [--project-id <project-id>]
+
+Commands:
+  cursor-init    Send the installation prompt directly to Cursor/VS Code
+  help          Show this help message
+
+Examples:
+  npx galadrim-feedback cursor-init --project-id <project-id>
+  npx galadrim-feedback help
+`);
+}
+
+function copyToClipboard(text) {
+  return new Promise((resolve, reject) => {
+    let copyCommand;
+
+    // Detect platform and use appropriate command
+    if (process.platform === "darwin") {
+      copyCommand = spawn("pbcopy", [], {
+        stdio: ["pipe", "inherit", "inherit"],
+      });
+    } else if (process.platform === "linux") {
+      copyCommand = spawn("xclip", ["-selection", "clipboard"], {
+        stdio: ["pipe", "inherit", "inherit"],
+      });
+    } else if (process.platform === "win32") {
+      copyCommand = spawn("clip", [], {
+        stdio: ["pipe", "inherit", "inherit"],
+      });
+    } else {
+      reject(new Error("Unsupported platform for clipboard operations"));
+      return;
+    }
+
+    copyCommand.stdin.write(text);
+    copyCommand.stdin.end();
+
+    copyCommand.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Copy command failed with code ${code}`));
+      }
+    });
+
+    copyCommand.on("error", (err) => {
+      reject(err);
+    });
+  });
+}
+
+async function handleCursorInit() {
+  try {
+    // Fallback to clipboard
+    console.log(
+      "📋 Copying Galadrim Feedback installation prompt to clipboard..."
+    );
+
+    await copyToClipboard(CURSOR_PROMPT);
+
+    console.log("✅ Installation prompt copied to clipboard!");
+    console.log("");
+    console.log("🎯 Next steps:");
+    console.log("1. Open Cursor or VS Code in your React project");
+    console.log("2. Paste the prompt (Cmd+V / Ctrl+V) into the AI chat");
+    console.log(
+      "3. Let your AI assistant automatically configure Galadrim Feedback!"
+    );
+    console.log("");
+    console.log(
+      '💡 Make sure to replace "your-project-id" with your actual project ID from Galadmin.'
+    );
+  } catch (error) {
+    console.error("❌ Failed to copy to clipboard:", error.message);
+    console.log("");
+    console.log("📝 Manual copy - use this prompt in your AI assistant:");
+    console.log("");
+    console.log("```");
+    console.log(CURSOR_PROMPT);
+    console.log("```");
+    process.exit(1);
+  }
+}
+
+function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+
+  switch (command) {
+    case "cursor-init":
+      handleCursorInit();
+      break;
+    case "help":
+    case "--help":
+    case "-h":
+      showHelp();
+      break;
+    case undefined:
+      console.log(
+        '❌ No command specified. Use "help" to see available commands.'
+      );
+      showHelp();
+      process.exit(1);
+      break;
+    default:
+      console.log(`❌ Unknown command: ${command}`);
+      showHelp();
+      process.exit(1);
+  }
+}
+
+main();

package/index.d.ts

@@ -6,7 +6,7 @@ export interface FeedbackRootProps {
   githubUrl?: string;
   rootDir: string;
   projectId: string;
-  navigate: (path: string) => Promise<void>;
+  navigate: (path: string) => Promise<void> | void;
   position?: Position;
   pathname?: string;
 }

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "galadrim-feedback",
   "private": false,
-  "version": "0.0.91",
+  "version": "1.0.0",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.es",
   "types": "dist/index.d.ts",
+  "bin": {
+    "galadrim-feedback": "./bin/cli.js"
+  },
   "files": [
     "src",
     "dist",
+    "bin",
     "package.json",
     "*.d.ts",
     "libs",
@@ -22,11 +26,14 @@
   "dependencies": {
     "@babel/core": "^7.26.10",
     "@tanstack/react-query": "^5.59.19",
+    "@types/vscode": "^1.101.0",
     "babel-plugin-react-generate-paths": "^0.0.2",
     "moment": "^2.30.1",
     "react-spinners": "^0.17.0",
     "sse.js": "^2.6.0",
-    "styled-components": "^6.1.17"
+    "styled-components": "^6.1.17",
+    "vscode": "^1.1.37",
+    "vscode-test": "^1.6.1"
   },
   "peerDependencies": {
     "axios": ">=1.8.4",