galadrim-feedback 1.0.30 → 1.0.32

package/README.md

@@ -25,36 +25,99 @@ This will copy the complete installation prompt to your clipboard. Then simply p
 <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
+yarn add axios galadrim-feedback
+
+2. Configure Path Generation Plugin:
+Galadrim Feedback requires a plugin to add file path data to your components. We recommend using the SWC plugin for performance, but a Babel plugin is also available for older projects.
+
+#### SWC Configuration (Recommended)
+1.  Install the necessary packages:
+    `yarn add -D swc-plugin-react-generate-paths`
+
+2.  Configure your build tool:
+    **For Vite:**
+    Install `@vitejs/plugin-react-swc` and update your `vite.config.ts`:
+    ```typescript
+    // vite.config.ts
+    import { defineConfig } from "vite";
+    import react from "@vitejs/plugin-react-swc";
+
+    export default defineConfig({
+      plugins: [
+        react({
+          plugins: [["swc-plugin-react-generate-paths", {}]],
+        }),
+      ],
+    });
+    ```
+
+    **For Next.js (Turbopack):**
+    Update your `next.config.js`:
+    ```javascript
+    // next.config.js
+    module.exports = {
+      experimental: {
+        swcPlugins: [
+          [
+            "swc-plugin-react-generate-paths",
+            {
+              displayName: true,
+              ssr: true,
+            },
+          ],
+        ],
+      },
+    };
+    ```
+
+#### Babel Configuration
+If your project uses Babel, you can use the Babel plugin instead.
+
+1.  Install the plugin:
+    `yarn add -D babel-plugin-react-generate-paths`
+
+2.  Configure your build tool:
+    **For Vite:**
+    ```typescript
+    // vite.config.ts
+    import { defineConfig } from "vite";
+    import react from "@vitejs/plugin-react";
+
+    export default defineConfig({
+      plugins: [
+        react({
+          babel: {
+            plugins: [["babel-plugin-react-generate-paths"]],
+          },
+        }),
+      ],
+    });
+    ```
+
+    **For other Babel setups (e.g. `.babelrc`):**
+    ```json
+    {
+      "plugins": ["babel-plugin-react-generate-paths"]
+    }
+    ```
+
 
 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):
+     * If using React Router Dom (react-router-dom):
        - Import: import { useNavigate } from "react-router-dom";
        - Hook: const navigate = useNavigate();
        - Navigate prop: navigate={(path) => navigate(path)}
+
+    * If using React Router (react-router):
+       - Import: import { useNavigate } from "react-router";
+       - 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();
@@ -68,19 +131,19 @@ Install and configure Galadrim Feedback in this React project:
      * 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)
+       - projectId="${PROJECT_ID}"
        - navigate={(path) => navigate(path)} (using detected navigation method)
        - position="bottom-right"
-       - notionDatabaseId=... (ask the user to give you this, if the kanban is on Notion)
-     * Place it inside the router context but outside main content areas
+       - notionDatabaseId="${NOTION_DATABASE_ID}"
+     * Place it inside the router context but outside main content areas, if needed you can wrap it in a layout component that is parent to the rest of the app
 
 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)
+   - 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.
-```
+````
 
 </details>
 
@@ -227,6 +290,16 @@ import "galadrim-feedback/dist/styles.css"; // Don't forget to import the CSS st
 
 This concludes the installation of **Galadrim Feedback** in your project!
 
+### Kanban Integration
+
+Once **Galadrim Feedback** is installed and configured, you can connect to a kanban board to manage your feedback:
+
+- **Notion Integration**: If you provide a `notionDatabaseId` prop to the FeedbackRoot component, you'll be able to connect to a Notion kanban board through the settings menu. The Notion token is linked to the specific project for that particular kanban database.
+
+- **Trello Integration**: If no `notionDatabaseId` is provided, you'll be able to connect to Trello instead through the settings menu. You can choose which Trello board to link with the project. Unlike Notion, the Trello token is linked to your account, so once you connect Trello for the first time, you only need to select the board for other projects without re-authenticating.
+
+The kanban integration allows you to link feedback items to tickets/cards in your project management tool, creating a seamless workflow from feedback collection to task management.
+
 </details>
 
 ## Account Creation