feedtack 0.1.0 → 0.2.0

package/dist/react/index.d.ts

@@ -23,8 +23,9 @@ interface FeedtackProviderProps {
     classes?: FeedtackClasses;
     sentimentLabels?: FeedtackSentimentLabels;
     onError?: (err: Error) => void;
+    disabled?: boolean;
 }
-declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
+declare function FeedtackProvider({ children, adapter, currentUser, hotkey, adminOnly, theme, classes, sentimentLabels, onError, disabled, }: FeedtackProviderProps): react_jsx_runtime.JSX.Element;
 
 interface FeedtackContextValue {
     activatePinMode: () => void;

package/dist/react/index.js

@@ -24,16 +24,6 @@ var PIN_PALETTE = [
   // pink
 ];
 
-// src/react/context.ts
-import { createContext, useContext } from "react";
-var FeedtackContext = createContext(null);
-function useFeedtackContext() {
-  const ctx = useContext(FeedtackContext);
-  if (!ctx)
-    throw new Error("useFeedtack must be used inside <FeedtackProvider>");
-  return ctx;
-}
-
 // src/react/utils.ts
 function generateId() {
   return `ft_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
@@ -55,8 +45,98 @@ function cx(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 
-// src/react/ThreadPanel.tsx
+// src/react/CommentForm.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+function CommentForm({
+  comment,
+  commentError,
+  sentiment,
+  submitting,
+  formPos,
+  classes,
+  sentimentLabels,
+  onCommentChange,
+  onSentimentChange,
+  onSubmit,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("feedtack-form", classes.form),
+      style: { position: "fixed", ...formPos },
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: commentError ? "error" : "",
+            placeholder: "What's the issue? (required)",
+            value: comment,
+            onChange: (e) => onCommentChange(e.target.value),
+            ref: (el) => el?.focus()
+          }
+        ),
+        commentError && /* @__PURE__ */ jsx("span", { className: "feedtack-error-msg", children: "Comment is required" }),
+        /* @__PURE__ */ jsxs("div", { className: "feedtack-sentiment", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: sentiment === "satisfied" ? "selected" : "",
+              onClick: () => onSentimentChange(sentiment === "satisfied" ? null : "satisfied"),
+              children: sentimentLabels.satisfied ?? "\u{1F60A} Satisfied"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: sentiment === "dissatisfied" ? "selected" : "",
+              onClick: () => onSentimentChange(
+                sentiment === "dissatisfied" ? null : "dissatisfied"
+              ),
+              children: sentimentLabels.dissatisfied ?? "\u{1F61E} Dissatisfied"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "feedtack-form-actions", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-btn-cancel",
+              onClick: onCancel,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "feedtack-btn-submit",
+              onClick: onSubmit,
+              disabled: submitting,
+              children: submitting ? "Sending\u2026" : "Submit"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/context.ts
+import { createContext, useContext } from "react";
+var FeedtackContext = createContext(null);
+function useFeedtackContext() {
+  const ctx = useContext(FeedtackContext);
+  if (!ctx)
+    throw new Error("useFeedtack must be used inside <FeedtackProvider>");
+  return ctx;
+}
+
+// src/react/ThreadPanel.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ThreadPanel({
   item,
   replyBody,
@@ -69,26 +149,26 @@ function ThreadPanel({
 }) {
   const pin = item.payload.pins[0];
   const pos = getAnchoredPosition(pin.x, pin.y);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cx("feedtack-thread", className),
       style: { position: "fixed", ...pos },
       children: [
-        /* @__PURE__ */ jsx("strong", { style: { fontSize: 13 }, children: item.payload.submittedBy.name }),
-        /* @__PURE__ */ jsx("p", { style: { fontSize: 13 }, children: item.payload.comment }),
-        item.replies.map((r) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx2("strong", { style: { fontSize: 13 }, children: item.payload.submittedBy.name }),
+        /* @__PURE__ */ jsx2("p", { style: { fontSize: 13 }, children: item.payload.comment }),
+        item.replies.map((r) => /* @__PURE__ */ jsxs2(
           "div",
           {
             style: { borderTop: "1px solid #f3f4f6", paddingTop: 8 },
             children: [
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
-              /* @__PURE__ */ jsx("p", { style: { fontSize: 12 }, children: r.body })
+              /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, fontWeight: 600 }, children: r.author.name }),
+              /* @__PURE__ */ jsx2("p", { style: { fontSize: 12 }, children: r.body })
             ]
           },
           r.id
         )),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "textarea",
           {
             placeholder: "Reply\u2026",
@@ -104,8 +184,8 @@ function ThreadPanel({
             }
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -115,7 +195,7 @@ function ThreadPanel({
               children: "Reply"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -125,7 +205,7 @@ function ThreadPanel({
               children: "Mark Resolved"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -135,7 +215,7 @@ function ThreadPanel({
               children: "Archive"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -385,9 +465,10 @@ var FEEDTACK_STYLES = `
 `;
 
 // src/react/useFeedtackDom.ts
-function useFeedtackDom(theme) {
+function useFeedtackDom(theme, disabled) {
   const rootRef = useRef(null);
   useEffect(() => {
+    if (disabled) return;
     if (document.getElementById("feedtack-styles")) return;
     const style = document.createElement("style");
     style.id = "feedtack-styles";
@@ -396,8 +477,9 @@ function useFeedtackDom(theme) {
     return () => {
       style.remove();
     };
-  }, []);
+  }, [disabled]);
   useEffect(() => {
+    if (disabled) return;
     const root = document.createElement("div");
     root.id = "feedtack-root";
     document.body.appendChild(root);
@@ -405,21 +487,22 @@ function useFeedtackDom(theme) {
     return () => {
       root.remove();
     };
-  }, []);
+  }, [disabled]);
   useEffect(() => {
+    if (disabled) return;
     const root = document.getElementById("feedtack-root");
     if (!root || !theme) return;
     const tokens = themeToCSS(theme);
     for (const [k, v] of Object.entries(tokens)) {
       root.style.setProperty(k, v);
     }
-  }, [theme]);
+  }, [theme, disabled]);
   return rootRef;
 }
 
 // src/react/usePinMode.ts
 import { useCallback, useEffect as useEffect2, useState } from "react";
-function usePinMode({ hotkey, onDeactivate }) {
+function usePinMode({ hotkey, onDeactivate, disabled }) {
   const [isActive, setIsActive] = useState(false);
   const [pendingPins, setPendingPins] = useState([]);
   const [selectedColor, setSelectedColor] = useState(PIN_PALETTE[0]);
@@ -440,6 +523,7 @@ function usePinMode({ hotkey, onDeactivate }) {
     return () => document.documentElement.classList.remove("feedtack-crosshair");
   }, [isActive]);
   useEffect2(() => {
+    if (disabled) return;
     const handler = (e) => {
       if (e.key === hotkey.toUpperCase() && e.shiftKey) {
         setIsActive((prev) => !prev);
@@ -458,7 +542,7 @@ function usePinMode({ hotkey, onDeactivate }) {
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [hotkey, deactivate, isActive]);
+  }, [hotkey, deactivate, isActive, disabled]);
   const handlePageClick = useCallback(
     (e) => {
       if (!isActive) return;
@@ -480,9 +564,10 @@ function usePinMode({ hotkey, onDeactivate }) {
     [isActive, selectedColor]
   );
   useEffect2(() => {
+    if (disabled) return;
     document.addEventListener("click", handlePageClick, true);
     return () => document.removeEventListener("click", handlePageClick, true);
-  }, [handlePageClick]);
+  }, [handlePageClick, disabled]);
   return {
     isActive,
     activate,
@@ -500,9 +585,30 @@ function useFeedtackState({
   currentUser,
   hotkey,
   theme,
-  onError
+  onError,
+  disabled
 }) {
-  useFeedtackDom(theme);
+  useFeedtackDom(theme, disabled);
+  const [pathname, setPathname] = useState2(() => window.location.pathname);
+  useEffect3(() => {
+    const update = () => setPathname(window.location.pathname);
+    const origPush = history.pushState.bind(history);
+    const origReplace = history.replaceState.bind(history);
+    history.pushState = (...args) => {
+      origPush(...args);
+      update();
+    };
+    history.replaceState = (...args) => {
+      origReplace(...args);
+      update();
+    };
+    window.addEventListener("popstate", update);
+    return () => {
+      window.removeEventListener("popstate", update);
+      history.pushState = origPush;
+      history.replaceState = origReplace;
+    };
+  }, []);
   const [comment, setComment] = useState2("");
   const [sentiment, setSentiment] = useState2(null);
   const [commentError, setCommentError] = useState2(false);
@@ -518,6 +624,7 @@ function useFeedtackState({
   }, []);
   const pinMode = usePinMode({
     hotkey,
+    disabled,
     onDeactivate: () => {
       resetForm();
       setOpenThreadId(null);
@@ -525,8 +632,8 @@ function useFeedtackState({
   });
   useEffect3(() => {
     setLoading(true);
-    adapter.loadFeedback({ pathname: window.location.pathname }).then(setFeedbackItems).catch((err) => onError?.(err)).finally(() => setLoading(false));
-  }, [adapter, onError]);
+    adapter.loadFeedback({ pathname }).then(setFeedbackItems).catch((err) => onError?.(err)).finally(() => setLoading(false));
+  }, [adapter, onError, pathname]);
   const updateItem = (id, fn) => setFeedbackItems(
     (prev) => prev.map((i) => i.payload.id === id ? fn(i) : i)
   );
@@ -635,6 +742,7 @@ function useFeedtackState({
     commentError,
     setCommentError,
     submitting,
+    pathname,
     feedbackItems,
     loading,
     openThreadId,
@@ -651,7 +759,7 @@ function useFeedtackState({
 }
 
 // src/react/FeedtackProvider.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function FeedtackProvider({
   children,
   adapter,
@@ -661,30 +769,34 @@ function FeedtackProvider({
   theme,
   classes = {},
   sentimentLabels = {},
-  onError
+  onError,
+  disabled = false
 }) {
   const state = useFeedtackState({
     adapter,
     currentUser,
     hotkey,
     theme,
-    onError
+    onError,
+    disabled
   });
   const firstPin = state.pendingPins[0];
   const formPos = firstPin ? getAnchoredPosition(firstPin.x, firstPin.y) : {};
   const showButton = !adminOnly || currentUser.role === "admin";
   const openItem = state.openThreadId ? state.feedbackItems.find((i) => i.payload.id === state.openThreadId) : null;
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     FeedtackContext.Provider,
     {
       value: {
-        activatePinMode: state.activatePinMode,
-        deactivatePinMode: state.deactivatePinMode,
-        isPinModeActive: state.isPinModeActive
+        activatePinMode: disabled ? () => {
+        } : state.activatePinMode,
+        deactivatePinMode: disabled ? () => {
+        } : state.deactivatePinMode,
+        isPinModeActive: disabled ? false : state.isPinModeActive
       },
       children: [
         children,
-        showButton && /* @__PURE__ */ jsxs2(
+        !disabled && showButton && /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
@@ -702,7 +814,7 @@ function FeedtackProvider({
             ]
           }
         ),
-        state.isPinModeActive && /* @__PURE__ */ jsx2("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx2(
+        state.isPinModeActive && /* @__PURE__ */ jsx3("div", { className: cx("feedtack-color-picker", classes.colorPicker), children: PIN_PALETTE.map((color) => /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
@@ -716,7 +828,7 @@ function FeedtackProvider({
           },
           color
         )) }),
-        state.pendingPins.map((pin) => /* @__PURE__ */ jsx2(
+        state.pendingPins.map((pin) => /* @__PURE__ */ jsx3(
           "div",
           {
             className: cx("feedtack-pin-marker", classes.pinMarker),
@@ -729,77 +841,28 @@ function FeedtackProvider({
           },
           `${pin.x}-${pin.y}-${pin.color}`
         )),
-        state.showForm && /* @__PURE__ */ jsxs2(
-          "div",
+        state.showForm && /* @__PURE__ */ jsx3(
+          CommentForm,
           {
-            className: cx("feedtack-form", classes.form),
-            style: { position: "fixed", ...formPos },
-            children: [
-              /* @__PURE__ */ jsx2(
-                "textarea",
-                {
-                  className: state.commentError ? "error" : "",
-                  placeholder: "What's the issue? (required)",
-                  value: state.comment,
-                  onChange: (e) => {
-                    state.setComment(e.target.value);
-                    state.setCommentError(false);
-                  },
-                  ref: (el) => el?.focus()
-                }
-              ),
-              state.commentError && /* @__PURE__ */ jsx2("span", { className: "feedtack-error-msg", children: "Comment is required" }),
-              /* @__PURE__ */ jsxs2("div", { className: "feedtack-sentiment", children: [
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    className: state.sentiment === "satisfied" ? "selected" : "",
-                    onClick: () => state.setSentiment(
-                      state.sentiment === "satisfied" ? null : "satisfied"
-                    ),
-                    children: sentimentLabels.satisfied ?? "\u{1F60A} Satisfied"
-                  }
-                ),
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    className: state.sentiment === "dissatisfied" ? "selected" : "",
-                    onClick: () => state.setSentiment(
-                      state.sentiment === "dissatisfied" ? null : "dissatisfied"
-                    ),
-                    children: sentimentLabels.dissatisfied ?? "\u{1F61E} Dissatisfied"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs2("div", { className: "feedtack-form-actions", children: [
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    className: "feedtack-btn-cancel",
-                    onClick: state.deactivatePinMode,
-                    children: "Cancel"
-                  }
-                ),
-                /* @__PURE__ */ jsx2(
-                  "button",
-                  {
-                    type: "button",
-                    className: "feedtack-btn-submit",
-                    onClick: state.handleSubmit,
-                    disabled: state.submitting,
-                    children: state.submitting ? "Sending\u2026" : "Submit"
-                  }
-                )
-              ] })
-            ]
+            comment: state.comment,
+            commentError: state.commentError,
+            sentiment: state.sentiment,
+            submitting: state.submitting,
+            formPos,
+            classes,
+            sentimentLabels,
+            onCommentChange: (v) => {
+              state.setComment(v);
+              state.setCommentError(false);
+            },
+            onSentimentChange: state.setSentiment,
+            onSubmit: state.handleSubmit,
+            onCancel: state.deactivatePinMode
           }
         ),
-        !state.loading && state.feedbackItems.filter((item) => !state.isArchivedForUser(item)).map((item) => {
+        !state.loading && state.feedbackItems.filter((item) => item.payload.page.pathname === state.pathname).filter((item) => !state.isArchivedForUser(item)).map((item) => {
           const pin = item.payload.pins[0];
-          return /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -814,12 +877,12 @@ function FeedtackProvider({
               onClick: () => state.setOpenThreadId(
                 state.openThreadId === item.payload.id ? null : item.payload.id
               ),
-              children: state.hasUnread(item) && /* @__PURE__ */ jsx2("div", { className: "feedtack-pin-badge" })
+              children: state.hasUnread(item) && /* @__PURE__ */ jsx3("div", { className: "feedtack-pin-badge" })
             },
             item.payload.id
           );
         }),
-        openItem && /* @__PURE__ */ jsx2(
+        openItem && /* @__PURE__ */ jsx3(
           ThreadPanel,
           {
             item: openItem,
@@ -832,7 +895,7 @@ function FeedtackProvider({
             className: classes.thread
           }
         ),
-        state.loading && /* @__PURE__ */ jsx2("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
+        state.loading && /* @__PURE__ */ jsx3("div", { className: "feedtack-loading", children: "Loading feedback\u2026" })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feedtack",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Click anywhere. Drop a pin. Get a payload a developer can act on.",
   "type": "module",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "test:watch": "vitest",
     "lint": "biome check src/",
     "lint:fix": "biome check --fix src/",
-    "release": "release-it",
+    "release": "release-it --ci",
     "prepublishOnly": "pnpm test && pnpm build",
     "prepare": "husky"
   },