galadrim-feedback 1.0.63 → 1.0.65

package/README.md

@@ -47,12 +47,14 @@ Galadrim Feedback requires a plugin to add file path data to your components. We
     // vite.config.ts
     import { defineConfig } from "vite";
     import react from "@vitejs/plugin-react-swc";
+    import { includeGitSha } from "galadrim-feedback/vite";
 
     export default defineConfig({
       plugins: [
         react({
           plugins: [["swc-plugin-react-generate-paths", {}]],
         }),
+        includeGitSha(),
       ],
     });
     ```
@@ -88,6 +90,7 @@ If your project uses Babel, you can use the Babel plugin instead.
     // vite.config.ts
     import { defineConfig } from "vite";
     import react from "@vitejs/plugin-react";
+    import { includeGitSha } from "galadrim-feedback/vite";
 
     export default defineConfig({
       plugins: [
@@ -96,6 +99,7 @@ If your project uses Babel, you can use the Babel plugin instead.
             plugins: [["babel-plugin-react-generate-paths"]],
           },
         }),
+        includeGitSha(),
       ],
     });
     ```
@@ -108,7 +112,24 @@ If your project uses Babel, you can use the Babel plugin instead.
     ```
 
 
-3. Configure FeedbackRoot component:
+3. Configure Git SHA tracking:
+Feedbacks automatically record the git commit SHA of the deployed app — no prop is needed on FeedbackRoot. Pick the integration matching the project's build tool:
+   - **Vite**: already handled by the `includeGitSha()` plugin added above (it injects a `<meta name="git-sha">` tag at build time).
+   - **Next.js** (webpack or Turbopack): wrap the config in `next.config.js`:
+     ```javascript
+     const { withGitSha } = require("galadrim-feedback/next");
+     module.exports = withGitSha({ /* existing next config */ });
+     ```
+     (On Vercel this is optional: `NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA` is detected automatically when system environment variables are exposed.)
+   - **CRA / custom webpack**: add the webpack plugin (via craco/react-app-rewired for CRA):
+     ```javascript
+     const GitShaPlugin = require("galadrim-feedback/webpack");
+     // in the webpack config: plugins: [new GitShaPlugin()]
+     ```
+   - **Any other React setup**: add `npx galadrim-feedback inject-git-sha` to the build/deploy script, right after the build — it patches the built HTML files with the `<meta name="git-sha">` tag.
+   - **Docker builds**: the .git folder is usually absent from the build context, so pass the SHA explicitly: `docker build --build-arg GIT_SHA=$(git rev-parse HEAD)` with `ARG GIT_SHA` and `ENV GIT_SHA=$GIT_SHA` in the Dockerfile.
+
+4. 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 Dom (react-router-dom):
@@ -139,7 +160,7 @@ If your project uses Babel, you can use the Babel plugin instead.
        - 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:
+5. 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)
@@ -187,12 +208,14 @@ Galadrim Feedback requires a plugin to add file path data to your components.
     // vite.config.ts
     import { defineConfig } from "vite";
     import react from "@vitejs/plugin-react-swc";
+    import { includeGitSha } from "galadrim-feedback/vite";
 
     export default defineConfig({
       plugins: [
         react({
           plugins: [["swc-plugin-react-generate-paths", {}]],
         }),
+        includeGitSha(),
       ],
     });
     ```
@@ -240,6 +263,7 @@ If your project uses Babel, you can use the Babel plugin instead.
     // vite.config.ts
     import { defineConfig } from "vite";
     import react from "@vitejs/plugin-react";
+    import { includeGitSha } from "galadrim-feedback/vite";
 
     export default defineConfig({
       plugins: [
@@ -248,6 +272,7 @@ If your project uses Babel, you can use the Babel plugin instead.
             plugins: [["babel-plugin-react-generate-paths"]],
           },
         }),
+        includeGitSha(),
       ],
     });
     ```
@@ -260,6 +285,10 @@ If your project uses Babel, you can use the Babel plugin instead.
     }
     ```
 
+### Git SHA / Version Tracking
+
+Each feedback records the git commit SHA of the deployed app — see the [Git SHA Setup](#git-sha-setup) section below for the integration matching your build tool.
+
 ### FeedbackRoot Integration
 
 Add the **FeedbackRoot** component to the root of your application. It must be placed inside the **router**.
@@ -309,6 +338,80 @@ The kanban integration allows you to link feedback items to tickets/cards in you
 
 </details>
 
+## Git SHA Setup
+
+Each feedback records the git commit SHA of the app it was created on, so it can be traced back to the exact deployed version. Detection is fully automatic — nothing to pass to `FeedbackRoot`. All integrations resolve the SHA the same way: from `GIT_SHA`, `VERCEL_GIT_COMMIT_SHA`, `CF_PAGES_COMMIT_SHA`, `GITHUB_SHA` or `CI_COMMIT_SHA` env vars, falling back to `git rev-parse HEAD`.
+
+### Vite
+
+Add the plugin to `vite.config.ts`. It injects a `<meta name="git-sha">` tag at each build (dev server included):
+
+```typescript
+import { includeGitSha } from "galadrim-feedback/vite";
+
+export default defineConfig({
+  plugins: [react(), includeGitSha()],
+});
+```
+
+### Next.js
+
+Works with webpack and Turbopack — wrap your config; the SHA is exposed as `NEXT_PUBLIC_GIT_SHA` and inlined into the client bundle:
+
+```javascript
+// next.config.js
+const { withGitSha } = require("galadrim-feedback/next");
+
+module.exports = withGitSha({
+  // your existing next config
+});
+```
+
+On Vercel this is optional: `NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA` is picked up automatically (with "Automatically expose System Environment Variables" enabled).
+
+### CRA / custom webpack
+
+Add the webpack plugin (via craco or react-app-rewired for CRA):
+
+```javascript
+const GitShaPlugin = require("galadrim-feedback/webpack");
+
+// in the webpack config
+plugins: [new GitShaPlugin()],
+```
+
+### Any other React setup
+
+Run the CLI right after the build; it patches the built HTML files with the `<meta name="git-sha">` tag:
+
+```bash
+npx galadrim-feedback inject-git-sha        # auto-detects dist/, build/ or out/
+npx galadrim-feedback inject-git-sha dist   # or pass the output dir explicitly
+```
+
+### Docker builds
+
+The `.git` folder is usually absent from the build context, so pass the SHA in explicitly:
+
+```bash
+docker build --build-arg GIT_SHA=$(git rev-parse HEAD) .
+```
+
+```dockerfile
+ARG GIT_SHA
+ENV GIT_SHA=$GIT_SHA
+```
+
+### Manual override
+
+Expose a `<meta name="git-sha" content="...">` tag or a `window.__GIT_SHA__` global at deploy time, or pass the `gitSha` prop to `FeedbackRoot`.
+
+## Modals and focus traps
+
+Galadrim Feedback works on top of modal dialogs (Radix, Headless UI, MUI, react-focus-lock…) without any configuration on your side: you don't need `modal={false}`, `onInteractOutside`, `onOpenAutoFocus` or any other escape hatch on your dialogs.
+
+The widget renders in a shadow root and stops its own events from reaching `document`, so the focus traps and "click outside" layers of your app never mistake it for an outside interaction — leaving a feedback on a modal keeps it open and keeps the comment field focusable.
+
 ## Account Creation
 
 Once it's installed, you can sign up and then in the Galadmin, you add yourself as a collaborator on the project

package/bin/cli.js

@@ -1,6 +1,9 @@
 #!/usr/bin/env node
 
 import { spawn } from "child_process";
+import { existsSync, readdirSync, readFileSync, statSync, writeFileSync } from "fs";
+import { join } from "path";
+import { resolveGitSha } from "../resolveGitSha.cjs";
 
 const PROJECT_ID = process.argv
   .find((arg) => arg.startsWith("--project-id="))
@@ -31,12 +34,14 @@ Galadrim Feedback requires a plugin to add file path data to your components. We
     // vite.config.ts
     import { defineConfig } from "vite";
     import react from "@vitejs/plugin-react-swc";
+    import { includeGitSha } from "galadrim-feedback/vite";
 
     export default defineConfig({
       plugins: [
         react({
           plugins: [["swc-plugin-react-generate-paths", {}]],
         }),
+        includeGitSha(),
       ],
     });
     \`\`\`
@@ -72,6 +77,7 @@ If your project uses Babel, you can use the Babel plugin instead.
     // vite.config.ts
     import { defineConfig } from "vite";
     import react from "@vitejs/plugin-react";
+    import { includeGitSha } from "galadrim-feedback/vite";
 
     export default defineConfig({
       plugins: [
@@ -80,6 +86,7 @@ If your project uses Babel, you can use the Babel plugin instead.
             plugins: [["babel-plugin-react-generate-paths"]],
           },
         }),
+        includeGitSha(),
       ],
     });
     \`\`\`
@@ -92,7 +99,24 @@ If your project uses Babel, you can use the Babel plugin instead.
     \`\`\`
 
 
-3. Configure FeedbackRoot component:
+3. Configure Git SHA tracking:
+Feedbacks automatically record the git commit SHA of the deployed app — no prop is needed on FeedbackRoot. Pick the integration matching the project's build tool:
+   - **Vite**: already handled by the \`includeGitSha()\` plugin added above (it injects a \`<meta name="git-sha">\` tag at build time).
+   - **Next.js** (webpack or Turbopack): wrap the config in \`next.config.js\`:
+     \`\`\`javascript
+     const { withGitSha } = require("galadrim-feedback/next");
+     module.exports = withGitSha({ /* existing next config */ });
+     \`\`\`
+     (On Vercel this is optional: \`NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA\` is detected automatically when system environment variables are exposed.)
+   - **CRA / custom webpack**: add the webpack plugin (via craco/react-app-rewired for CRA):
+     \`\`\`javascript
+     const GitShaPlugin = require("galadrim-feedback/webpack");
+     // in the webpack config: plugins: [new GitShaPlugin()]
+     \`\`\`
+   - **Any other React setup**: add \`npx galadrim-feedback inject-git-sha\` to the build/deploy script, right after the build — it patches the built HTML files with the \`<meta name="git-sha">\` tag.
+   - **Docker builds**: the .git folder is usually absent from the build context, so pass the SHA explicitly: \`docker build --build-arg GIT_SHA=$(git rev-parse HEAD)\` with \`ARG GIT_SHA\` and \`ENV GIT_SHA=$GIT_SHA\` in the Dockerfile.
+
+4. 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 Dom (react-router-dom):
@@ -123,7 +147,7 @@ If your project uses Babel, you can use the Babel plugin instead.
        - 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:
+5. 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)
@@ -138,15 +162,85 @@ Usage:
   npx galadrim-feedback <command> [--project-id=<project-id>] [--notion-database-id=<notion-database-id>]
 
 Commands:
-  cursor-init    Send the installation prompt directly to Cursor/VS Code
-  help          Show this help message
+  cursor-init       Send the installation prompt directly to Cursor/VS Code
+  inject-git-sha    Inject the git commit SHA as <meta name="git-sha"> into
+                    built HTML files (run after your build, before deploying).
+                    Optional argument: output dir or HTML file (defaults to
+                    dist/, build/ or out/)
+  help              Show this help message
 
 Examples:
   npx galadrim-feedback cursor-init --project-id=<project-id> --notion-database-id=<notion-database-id>
+  npx galadrim-feedback inject-git-sha
+  npx galadrim-feedback inject-git-sha dist
   npx galadrim-feedback help
 `);
 }
 
+function collectHtmlFiles(target) {
+  if (statSync(target).isFile()) return [target];
+  const found = [];
+  const walk = (dir) => {
+    for (const entry of readdirSync(dir)) {
+      if (entry === "node_modules" || entry.startsWith(".")) continue;
+      const fullPath = join(dir, entry);
+      if (statSync(fullPath).isDirectory()) walk(fullPath);
+      else if (entry.endsWith(".html")) found.push(fullPath);
+    }
+  };
+  walk(target);
+  return found;
+}
+
+function injectMetaTag(html, sha) {
+  const meta = `<meta name="git-sha" content="${sha}">`;
+  const existing = /<meta\s+name=["']git-sha["'][^>]*\/?>/i;
+  if (existing.test(html)) return html.replace(existing, meta);
+  if (/<\/head>/i.test(html)) return html.replace(/<\/head>/i, `${meta}</head>`);
+  return null;
+}
+
+function handleInjectGitSha(targetArg) {
+  const sha = resolveGitSha();
+  if (!sha) {
+    console.error(
+      "❌ Could not resolve the git SHA (no CI env var and `git rev-parse HEAD` failed).",
+    );
+    console.error(
+      "💡 In Docker builds, pass it in: --build-arg GIT_SHA=$(git rev-parse HEAD)",
+    );
+    process.exit(1);
+  }
+
+  const target =
+    targetArg || ["dist", "build", "out"].find((dir) => existsSync(dir));
+  if (!target || !existsSync(target)) {
+    console.error(
+      "❌ No build output found (tried dist/, build/, out/). Pass a path: npx galadrim-feedback inject-git-sha <dir-or-file>",
+    );
+    process.exit(1);
+  }
+
+  const htmlFiles = collectHtmlFiles(target);
+  let patched = 0;
+  for (const file of htmlFiles) {
+    const html = readFileSync(file, "utf8");
+    const updated = injectMetaTag(html, sha);
+    if (updated && updated !== html) {
+      writeFileSync(file, updated);
+      patched++;
+    }
+  }
+
+  if (patched === 0) {
+    console.error(`❌ No HTML file with a </head> tag found under "${target}".`);
+    process.exit(1);
+  }
+  console.log(
+    `✅ Injected git-sha ${sha.slice(0, 7)} into ${patched} HTML file(s) under "${target}"`,
+  );
+}
+
 function copyToClipboard(text) {
   return new Promise((resolve, reject) => {
     let copyCommand;
@@ -227,6 +321,9 @@ function main() {
     case "cursor-init":
       handleCursorInit();
       break;
+    case "inject-git-sha":
+      handleInjectGitSha(args[1]);
+      break;
     case "help":
     case "--help":
     case "-h":

package/dist/assets/icons/info-circle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>