feedtack 0.2.1 → 0.3.1

package/README.md

@@ -74,6 +74,96 @@ class MySupabaseAdapter implements FeedtackAdapter {
 }
 ```
 
+## Adapter recipes
+
+The `FeedtackAdapter` interface has five methods. Here are copy-paste implementations for common backends.
+
+### Disk / JSON files (Node.js)
+
+Git-trackable feedback — each submission becomes a JSON file in `.feedback/`.
+
+```ts
+import type { FeedtackAdapter, FeedbackItem, FeedtackPayload } from 'feedtack'
+import { readdir, readFile, writeFile, mkdir } from 'node:fs/promises'
+import { join } from 'node:path'
+
+const DIR = '.feedback'
+
+class DiskAdapter implements FeedtackAdapter {
+  async submit(payload: FeedtackPayload) {
+    await mkdir(DIR, { recursive: true })
+    const item: FeedbackItem = { payload, replies: [], resolutions: [], archives: [] }
+    await writeFile(join(DIR, `${payload.id}.json`), JSON.stringify(item, null, 2))
+  }
+
+  async reply(feedbackId: string, reply: Omit<FeedbackItem['replies'][0], 'id' | 'feedbackId'>) {
+    const item = await this.read(feedbackId)
+    item.replies.push({ ...reply, id: crypto.randomUUID(), feedbackId })
+    await this.write(feedbackId, item)
+  }
+
+  async resolve(feedbackId: string, resolution: Omit<FeedbackItem['resolutions'][0], 'feedbackId'>) {
+    const item = await this.read(feedbackId)
+    item.resolutions.push({ ...resolution, feedbackId })
+    await this.write(feedbackId, item)
+  }
+
+  async archive(feedbackId: string, userId: string) {
+    const item = await this.read(feedbackId)
+    item.archives.push({ feedbackId, archivedBy: { id: userId, name: '', role: '' }, timestamp: new Date().toISOString() })
+    await this.write(feedbackId, item)
+  }
+
+  async loadFeedback() {
+    await mkdir(DIR, { recursive: true })
+    const files = (await readdir(DIR)).filter((f) => f.endsWith('.json'))
+    return Promise.all(files.map(async (f) => JSON.parse(await readFile(join(DIR, f), 'utf-8')) as FeedbackItem))
+  }
+
+  private async read(id: string) { return JSON.parse(await readFile(join(DIR, `${id}.json`), 'utf-8')) as FeedbackItem }
+  private async write(id: string, item: FeedbackItem) { await writeFile(join(DIR, `${id}.json`), JSON.stringify(item, null, 2)) }
+}
+```
+
+### Supabase
+
+```ts
+import type { FeedtackAdapter, FeedbackItem, FeedtackFilter, FeedtackPayload } from 'feedtack'
+import type { SupabaseClient } from '@supabase/supabase-js'
+
+class SupabaseAdapter implements FeedtackAdapter {
+  constructor(private supabase: SupabaseClient) {}
+
+  async submit(payload: FeedtackPayload) {
+    await this.supabase.from('feedtack_submissions').insert({ id: payload.id, data: payload })
+  }
+
+  async reply(feedbackId: string, reply: Omit<FeedbackItem['replies'][0], 'id' | 'feedbackId'>) {
+    await this.supabase.from('feedtack_replies').insert({ feedback_id: feedbackId, ...reply })
+  }
+
+  async resolve(feedbackId: string, resolution: Omit<FeedbackItem['resolutions'][0], 'feedbackId'>) {
+    await this.supabase.from('feedtack_resolutions').insert({ feedback_id: feedbackId, ...resolution })
+  }
+
+  async archive(feedbackId: string, userId: string) {
+    await this.supabase.from('feedtack_archives').insert({ feedback_id: feedbackId, user_id: userId })
+  }
+
+  async loadFeedback(filter?: FeedtackFilter): Promise<FeedbackItem[]> {
+    let query = this.supabase.from('feedtack_submissions').select('*, feedtack_replies(*), feedtack_resolutions(*), feedtack_archives(*)')
+    if (filter?.pathname) query = query.eq('data->>page->>pathname', filter.pathname)
+    const { data } = await query
+    return (data ?? []).map((row) => ({
+      payload: row.data,
+      replies: row.feedtack_replies ?? [],
+      resolutions: row.feedtack_resolutions ?? [],
+      archives: row.feedtack_archives ?? [],
+    }))
+  }
+}
+```
+
 ## The payload
 
 Every pin emits a versioned JSON payload:

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { F as FeedtackAdapter, o as FeedtackUser, n as FeedtackTheme } from '../theme-C-uctIoI.js';
+import { F as FeedtackAdapter, o as FeedtackUser, n as FeedtackTheme, e as FeedbackItem } from '../theme-C-uctIoI.js';
 
 interface FeedtackClasses {
     button?: string;
@@ -24,8 +24,10 @@ interface FeedtackProviderProps {
     sentimentLabels?: FeedtackSentimentLabels;
     onError?: (err: Error) => void;
     disabled?: boolean;
+    /** Render custom content inside a submitted pin marker. Receives the feedback item. */
+    renderPinIcon?: (item: FeedbackItem) => React.ReactNode;
 }
-declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, disabled, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
+declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, disabled, renderPinIcon, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
 
 interface FeedtackContextValue {
     activatePinMode: () => void;

package/dist/react/index.js

@@ -66,17 +66,27 @@ function CommentForm({
       className: cx("feedtack-form", classes.form),
       style: { position: "fixed", ...formPos },
       children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "feedtack-comment", className: "feedtack-sr-only", children: "Feedback comment" }),
         /* @__PURE__ */ jsx(
           "textarea",
           {
+            id: "feedtack-comment",
             className: commentError ? "error" : "",
             placeholder: "What's the issue? (required)",
             value: comment,
             onChange: (e) => onCommentChange(e.target.value),
-            ref: (el) => el?.focus()
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                onSubmit();
+              }
+            },
+            ref: (el) => el?.focus(),
+            "aria-describedby": commentError ? "feedtack-comment-error" : void 0,
+            "aria-invalid": commentError || void 0
           }
         ),
-        commentError && /* @__PURE__ */ jsx("span", { className: "feedtack-error-msg", children: "Comment is required" }),
+        commentError && /* @__PURE__ */ jsx("span", { id: "feedtack-comment-error", className: "feedtack-error-msg", children: "Comment is required" }),
         /* @__PURE__ */ jsxs("div", { className: "feedtack-sentiment", children: [
           /* @__PURE__ */ jsx(
             "button",
@@ -161,7 +171,7 @@ function ThreadPanel({
         item.replies.map((r) => /* @__PURE__ */ jsxs2(
           "div",
           {
-            style: { borderTop: "1px solid #f3f4f6", paddingTop: 8 },
+            style: { borderTop: "1px solid var(--ft-border)", paddingTop: 8 },
             children: [
               /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
               /* @__PURE__ */ jsx2("p", { style: { fontSize: 12 }, children: r.body })
@@ -180,7 +190,7 @@ function ThreadPanel({
               fontSize: 12,
               padding: 6,
               borderRadius: 6,
-              border: "1px solid #e5e7eb",
+              border: "1px solid var(--ft-border)",
               marginTop: 4
             }
           }
@@ -308,6 +318,22 @@ var FEEDTACK_STYLES = `
     pointer-events: all;
   }
 
+  .feedtack-pin-resolved { opacity: 0.6; }
+
+  .feedtack-pin-icon {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: rotate(45deg);
+    font-size: 12px;
+    font-weight: 700;
+    color: #fff;
+    line-height: 1;
+    pointer-events: none;
+  }
+
   .feedtack-pin-badge {
     position: absolute;
     top: -4px;
@@ -455,6 +481,11 @@ var FEEDTACK_STYLES = `
     gap: 10px;
   }
 
+  .feedtack-sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
+  }
+
   .feedtack-loading {
     position: fixed;
     bottom: 70px;
@@ -503,7 +534,12 @@ function useFeedtackDom(theme, disabled) {
 
 // src/react/usePinMode.ts
 import { useCallback, useEffect as useEffect2, useState } from "react";
-function usePinMode({ hotkey, onDeactivate, disabled }) {
+function usePinMode({
+  hotkey,
+  onDeactivate,
+  disabled,
+  isModalOpen
+}) {
   const [isActive, setIsActive] = useState(false);
   const [pendingPins, setPendingPins] = useState([]);
   const [selectedColor, setSelectedColor] = useState(PIN_PALETTE[0]);
@@ -532,7 +568,7 @@ function usePinMode({ hotkey, onDeactivate, disabled }) {
       if (e.key === "Escape") {
         deactivate();
       }
-      if (isActive && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+      if (isActive && !isModalOpen && !showForm && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
         e.preventDefault();
         setSelectedColor((prev) => {
           const idx = PIN_PALETTE.indexOf(prev);
@@ -543,7 +579,7 @@ function usePinMode({ hotkey, onDeactivate, disabled }) {
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [hotkey, deactivate, isActive, disabled]);
+  }, [hotkey, deactivate, isActive, disabled, isModalOpen, showForm]);
   const handlePageClick = useCallback(
     (e) => {
       if (!isActive) return;
@@ -626,6 +662,7 @@ function useFeedtackState({
   const pinMode = usePinMode({
     hotkey,
     disabled,
+    isModalOpen: openThreadId !== null,
     onDeactivate: () => {
       resetForm();
       setOpenThreadId(null);
@@ -772,7 +809,8 @@ function FeedtackProvider({
   classes = {},
   sentimentLabels = {},
   onError,
-  disabled = false
+  disabled = false,
+  renderPinIcon
 }) {
   const state = useFeedtackState({
     adapter,
@@ -809,6 +847,8 @@ function FeedtackProvider({
             ),
             onClick: () => state.isPinModeActive ? state.deactivatePinMode() : state.activatePinMode(),
             title: "Toggle feedback pin mode",
+            "aria-label": "Toggle feedback pin mode",
+            "aria-pressed": state.isPinModeActive,
             children: [
               "Drop Pin [Shift+",
               hotkey.toUpperCase(),
@@ -864,11 +904,15 @@ function FeedtackProvider({
         ),
         !state.loading && state.feedbackItems.filter((item) => item.payload.page.pathname === state.pathname).filter((item) => !state.isArchivedForUser(item)).filter((item) => state.hasValidPins(item)).map((item) => {
           const pin = item.payload.pins[0];
-          return /* @__PURE__ */ jsx3(
+          return /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
-              className: cx("feedtack-pin-marker", classes.pinMarker),
+              className: cx(
+                "feedtack-pin-marker",
+                item.resolutions.length > 0 && "feedtack-pin-resolved",
+                classes.pinMarker
+              ),
               style: {
                 background: pin.color,
                 left: pin.x,
@@ -879,7 +923,18 @@ function FeedtackProvider({
               onClick: () => state.setOpenThreadId(
                 state.openThreadId === item.payload.id ? null : item.payload.id
               ),
-              children: state.hasUnread(item) && /* @__PURE__ */ jsx3("div", { className: "feedtack-pin-badge" })
+              children: [
+                renderPinIcon ? /* @__PURE__ */ jsx3("span", { className: "feedtack-pin-icon", children: renderPinIcon(item) }) : item.resolutions.length > 0 && /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: "feedtack-pin-icon",
+                    role: "img",
+                    "aria-label": "Resolved",
+                    children: "\u2713"
+                  }
+                ),
+                state.hasUnread(item) && /* @__PURE__ */ jsx3("div", { className: "feedtack-pin-badge" })
+              ]
             },
             item.payload.id
           );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedtack",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Click anywhere. Drop a pin. Get a payload a developer can act on.",
   "type": "module",
   "license": "MIT",