@cyguin/feedback 0.1.0

package/.github/workflows/publish.yml

@@ -0,0 +1,27 @@
+name: Publish to npm
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+      - name: Build
+        run: npm run build
+      - name: Publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npm publish --provenance --access public

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2026 cyguin.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,136 @@
+# @cyguin/feedback
+
+Drop-in user feedback widget for Next.js — capture thumbs, star ratings, or free-text feedback from inside any page.
+
+## Install
+
+```bash
+npm install @cyguin/feedback
+```
+
+## Setup
+
+### 1. Create the API route
+
+Create `app/api/feedback/[...cyguin]/route.ts` in your Next.js app:
+
+```ts
+import { createFeedbackHandler } from '@cyguin/feedback/server';
+import { createInMemoryAdapter } from '@cyguin/feedback/adapters/in-memory';
+
+const adapter = createInMemoryAdapter();
+const handler = createFeedbackHandler({ adapter });
+
+export { handler as GET, handler as POST, handler as PATCH };
+```
+
+For production with Supabase:
+
+```ts
+import { createFeedbackHandler } from '@cyguin/feedback/server';
+import { createSupabaseAdapter } from '@cyguin/feedback/adapters/supabase';
+
+const adapter = createSupabaseAdapter(supabaseClient);
+const handler = createFeedbackHandler({ adapter });
+
+export { handler as GET, handler as POST, handler as PATCH };
+```
+
+### 2. Run migrations
+
+```sql
+CREATE TABLE feedback (
+  id TEXT PRIMARY KEY,
+  user_id TEXT,
+  type TEXT NOT NULL,
+  body TEXT NOT NULL,
+  url TEXT NOT NULL,
+  created_at INTEGER NOT NULL,
+  reviewed INTEGER NOT NULL DEFAULT 0
+);
+```
+
+### 3. Add the widget
+
+```tsx
+import { FeedbackWidget } from '@cyguin/feedback/react';
+
+// Thumbs mode
+<FeedbackWidget type="thumbs" />
+
+// Star rating mode (default 5 stars)
+<FeedbackWidget type="rating" maxStars={5} />
+
+// Free text mode
+<FeedbackWidget type="text" placeholder="Share your feedback..." />
+```
+
+All three modes submit to your API and show a "Thanks for your feedback!" message for 3 seconds.
+
+## Theming
+
+Use `--cyguin-*` CSS custom properties on a parent element or `:root`:
+
+```css
+.feedback-widget {
+  --cyguin-bg: #ffffff;
+  --cyguin-bg-subtle: #f5f5f5;
+  --cyguin-border: #e5e5e5;
+  --cyguin-border-focus: #f5a800;
+  --cyguin-fg: #0a0a0a;
+  --cyguin-fg-muted: #888888;
+  --cyguin-accent: #f5a800;
+  --cyguin-accent-dark: #c47f00;
+  --cyguin-accent-fg: #0a0a0a;
+  --cyguin-radius: 6px;
+  --cyguin-shadow: 0 1px 4px rgba(0,0,0,0.08);
+}
+```
+
+Switch to dark theme with the `theme` prop:
+
+```tsx
+<FeedbackWidget type="thumbs" theme="dark" />
+```
+
+Dark theme applies these overrides automatically:
+
+```css
+--cyguin-bg: #0a0a0a;
+--cyguin-bg-subtle: #1a1a1a;
+--cyguin-border: #2a2a2a;
+--cyguin-fg: #f5f5f5;
+--cyguin-shadow: 0 1px 4px rgba(0,0,0,0.4);
+```
+
+## Supabase Adapter Setup
+
+```ts
+import { createFeedbackHandler } from '@cyguin/feedback/server';
+import { createSupabaseAdapter } from '@cyguin/feedback/adapters/supabase';
+import { createClient } from '@supabase/supabase-js';
+
+const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!);
+const adapter = createSupabaseAdapter(supabase);
+
+const handler = createFeedbackHandler({
+  adapter,
+  secret: process.env.FEEDBACK_SECRET,
+});
+
+export { handler as GET, handler as POST, handler as PATCH };
+```
+
+Required environment variable: `FEEDBACK_SECRET` — Bearer token for admin API access.
+
+## API Routes
+
+| Method | Route | Description |
+|--------|-------|-------------|
+| GET | `/api/feedback` | List feedback (admin, requires Bearer token) |
+| POST | `/api/feedback` | Submit new feedback |
+| PATCH | `/api/feedback/:id/reviewed` | Toggle reviewed flag |
+
+## License
+
+MIT

package/dist/adapters/in-memory.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk5Q4LNXS7cjs = require('../chunk-5Q4LNXS7.cjs');
+
+
+exports.InMemoryFeedbackAdapter = _chunk5Q4LNXS7cjs.InMemoryFeedbackAdapter;

package/dist/adapters/in-memory.d.cts

@@ -0,0 +1,23 @@
+import { F as FeedbackAdapter, b as FeedbackRecord, c as FeedbackType } from '../types-CMsn8uhD.cjs';
+
+declare class InMemoryFeedbackAdapter implements FeedbackAdapter {
+    private store;
+    list(opts?: {
+        url?: string;
+        reviewed?: boolean;
+        limit?: number;
+    }): Promise<{
+        data: FeedbackRecord[];
+        total: number;
+    }>;
+    create(record: {
+        userId?: string;
+        type: FeedbackType;
+        body: string;
+        url: string;
+        createdAt: number;
+    }): Promise<FeedbackRecord>;
+    setReviewed(id: string, reviewed: boolean): Promise<FeedbackRecord>;
+}
+
+export { InMemoryFeedbackAdapter };

package/dist/adapters/in-memory.d.ts

@@ -0,0 +1,23 @@
+import { F as FeedbackAdapter, b as FeedbackRecord, c as FeedbackType } from '../types-CMsn8uhD.js';
+
+declare class InMemoryFeedbackAdapter implements FeedbackAdapter {
+    private store;
+    list(opts?: {
+        url?: string;
+        reviewed?: boolean;
+        limit?: number;
+    }): Promise<{
+        data: FeedbackRecord[];
+        total: number;
+    }>;
+    create(record: {
+        userId?: string;
+        type: FeedbackType;
+        body: string;
+        url: string;
+        createdAt: number;
+    }): Promise<FeedbackRecord>;
+    setReviewed(id: string, reviewed: boolean): Promise<FeedbackRecord>;
+}
+
+export { InMemoryFeedbackAdapter };

package/dist/adapters/in-memory.js

@@ -0,0 +1,6 @@
+import {
+  InMemoryFeedbackAdapter
+} from "../chunk-NKCO24NR.js";
+export {
+  InMemoryFeedbackAdapter
+};

package/dist/adapters/supabase.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkSRH4NGARcjs = require('../chunk-SRH4NGAR.cjs');
+
+
+exports.SupabaseFeedbackAdapter = _chunkSRH4NGARcjs.SupabaseFeedbackAdapter;

package/dist/adapters/supabase.d.cts

@@ -0,0 +1,27 @@
+import { F as FeedbackAdapter, b as FeedbackRecord, c as FeedbackType } from '../types-CMsn8uhD.cjs';
+import { SupabaseClient } from '@supabase/supabase-js';
+
+declare class SupabaseFeedbackAdapter implements FeedbackAdapter {
+    private client;
+    private tableName;
+    constructor(client: SupabaseClient, tableName?: string);
+    private mapRow;
+    list(opts?: {
+        url?: string;
+        reviewed?: boolean;
+        limit?: number;
+    }): Promise<{
+        data: FeedbackRecord[];
+        total: number;
+    }>;
+    create(record: {
+        userId?: string;
+        type: FeedbackType;
+        body: string;
+        url: string;
+        createdAt: number;
+    }): Promise<FeedbackRecord>;
+    setReviewed(id: string, reviewed: boolean): Promise<FeedbackRecord>;
+}
+
+export { SupabaseFeedbackAdapter };

package/dist/adapters/supabase.d.ts

@@ -0,0 +1,27 @@
+import { F as FeedbackAdapter, b as FeedbackRecord, c as FeedbackType } from '../types-CMsn8uhD.js';
+import { SupabaseClient } from '@supabase/supabase-js';
+
+declare class SupabaseFeedbackAdapter implements FeedbackAdapter {
+    private client;
+    private tableName;
+    constructor(client: SupabaseClient, tableName?: string);
+    private mapRow;
+    list(opts?: {
+        url?: string;
+        reviewed?: boolean;
+        limit?: number;
+    }): Promise<{
+        data: FeedbackRecord[];
+        total: number;
+    }>;
+    create(record: {
+        userId?: string;
+        type: FeedbackType;
+        body: string;
+        url: string;
+        createdAt: number;
+    }): Promise<FeedbackRecord>;
+    setReviewed(id: string, reviewed: boolean): Promise<FeedbackRecord>;
+}
+
+export { SupabaseFeedbackAdapter };

package/dist/adapters/supabase.js

@@ -0,0 +1,6 @@
+import {
+  SupabaseFeedbackAdapter
+} from "../chunk-KXORPGTI.js";
+export {
+  SupabaseFeedbackAdapter
+};

package/dist/chunk-3CF2TRVK.js

@@ -0,0 +1,202 @@
+// src/components/FeedbackWidget.tsx
+import { useState, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var THUMBS_UP = "thumbs_up";
+var THUMBS_DOWN = "thumbs_down";
+function ThumbsUpIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M7 10v12" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" })
+  ] });
+}
+function ThumbsDownIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M17 14V2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" })
+  ] });
+}
+function StarIcon({ filled }) {
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) });
+}
+var lightTheme = {
+  "--cyguin-bg": "#ffffff",
+  "--cyguin-bg-subtle": "#f5f5f5",
+  "--cyguin-border": "#e5e5e5",
+  "--cyguin-border-focus": "#f5a800",
+  "--cyguin-fg": "#0a0a0a",
+  "--cyguin-fg-muted": "#888888",
+  "--cyguin-accent": "#f5a800",
+  "--cyguin-accent-dark": "#c47f00",
+  "--cyguin-accent-fg": "#0a0a0a",
+  "--cyguin-radius": "6px",
+  "--cyguin-shadow": "0 1px 4px rgba(0,0,0,0.08)"
+};
+var darkTheme = {
+  "--cyguin-bg": "#0a0a0a",
+  "--cyguin-bg-subtle": "#1a1a1a",
+  "--cyguin-border": "#2a2a2a",
+  "--cyguin-border-focus": "#f5a800",
+  "--cyguin-fg": "#f5f5f5",
+  "--cyguin-fg-muted": "#888888",
+  "--cyguin-accent": "#f5a800",
+  "--cyguin-accent-dark": "#c47f00",
+  "--cyguin-accent-fg": "#0a0a0a",
+  "--cyguin-radius": "6px",
+  "--cyguin-shadow": "0 1px 4px rgba(0,0,0,0.4)"
+};
+function FeedbackWidget({
+  type,
+  url: urlProp,
+  userId,
+  theme = "light",
+  className = "",
+  onSubmit,
+  maxStars = 5,
+  placeholder = "Share your feedback..."
+}) {
+  const [submitted, setSubmitted] = useState(false);
+  const [textValue, setTextValue] = useState("");
+  const [loading, setLoading] = useState(false);
+  const getUrl = () => {
+    if (urlProp) return urlProp;
+    if (typeof window !== "undefined") return window.location.href;
+    return "";
+  };
+  const handleSubmit = useCallback(
+    async (body) => {
+      setLoading(true);
+      try {
+        const res = await fetch("/api/feedback", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ type, body, url: getUrl(), userId })
+        });
+        const json = await res.json();
+        if (res.ok && json.data) {
+          setSubmitted(true);
+          onSubmit?.(json.data);
+          setTimeout(() => setSubmitted(false), 3e3);
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [type, userId, onSubmit]
+  );
+  if (submitted) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-theme": theme,
+        className,
+        style: { ...theme === "dark" ? darkTheme : lightTheme, padding: "12px", borderRadius: "var(--cyguin-radius)", background: "var(--cyguin-bg)", border: "1px solid var(--cyguin-border)", boxShadow: "var(--cyguin-shadow)", fontFamily: "system-ui, sans-serif", color: "var(--cyguin-fg)", textAlign: "center" },
+        children: "Thanks for your feedback!"
+      }
+    );
+  }
+  if (type === "thumbs") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-theme": theme,
+        className,
+        style: { ...theme === "dark" ? darkTheme : lightTheme, display: "flex", gap: "8px", padding: "12px", borderRadius: "var(--cyguin-radius)", background: "var(--cyguin-bg)", border: "1px solid var(--cyguin-border)", boxShadow: "var(--cyguin-shadow)", fontFamily: "system-ui, sans-serif" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => handleSubmit(THUMBS_UP),
+              disabled: loading,
+              "aria-label": "Thumbs up",
+              style: { background: "none", border: "none", cursor: "pointer", color: "var(--cyguin-fg)", padding: "4px", borderRadius: "var(--cyguin-radius)", display: "flex", alignItems: "center", justifyContent: "center" },
+              children: /* @__PURE__ */ jsx(ThumbsUpIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => handleSubmit(THUMBS_DOWN),
+              disabled: loading,
+              "aria-label": "Thumbs down",
+              style: { background: "none", border: "none", cursor: "pointer", color: "var(--cyguin-fg)", padding: "4px", borderRadius: "var(--cyguin-radius)", display: "flex", alignItems: "center", justifyContent: "center" },
+              children: /* @__PURE__ */ jsx(ThumbsDownIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (type === "rating") {
+    const [selected, setSelected] = useState(null);
+    const handleStarClick = (star) => {
+      setSelected(star);
+      handleSubmit(String(star));
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-theme": theme,
+        className,
+        style: { ...theme === "dark" ? darkTheme : lightTheme, display: "flex", gap: "4px", padding: "12px", borderRadius: "var(--cyguin-radius)", background: "var(--cyguin-bg)", border: "1px solid var(--cyguin-border)", boxShadow: "var(--cyguin-shadow)", fontFamily: "system-ui, sans-serif" },
+        children: Array.from({ length: maxStars }, (_, i) => {
+          const star = i + 1;
+          const filled = selected !== null && star <= selected;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => handleStarClick(star),
+              disabled: loading,
+              "aria-label": `${star} star${star > 1 ? "s" : ""}`,
+              style: { background: "none", border: "none", cursor: "pointer", color: filled ? "var(--cyguin-accent)" : "var(--cyguin-fg-muted)", padding: "2px", borderRadius: "var(--cyguin-radius)", display: "flex", alignItems: "center", transition: "color 0.15s" },
+              children: /* @__PURE__ */ jsx(StarIcon, { filled })
+            },
+            star
+          );
+        })
+      }
+    );
+  }
+  if (type === "text") {
+    const handleTextSubmit = (e) => {
+      e.preventDefault();
+      if (textValue.trim()) {
+        handleSubmit(textValue.trim());
+        setTextValue("");
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-theme": theme,
+        className,
+        style: { ...theme === "dark" ? darkTheme : lightTheme, padding: "12px", borderRadius: "var(--cyguin-radius)", background: "var(--cyguin-bg)", border: "1px solid var(--cyguin-border)", boxShadow: "var(--cyguin-shadow)", fontFamily: "system-ui, sans-serif" },
+        children: /* @__PURE__ */ jsxs("form", { onSubmit: handleTextSubmit, style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: textValue,
+              onChange: (e) => setTextValue(e.target.value),
+              placeholder,
+              rows: 3,
+              style: { width: "100%", padding: "8px", borderRadius: "var(--cyguin-radius)", border: "1px solid var(--cyguin-border)", background: "var(--cyguin-bg-subtle)", color: "var(--cyguin-fg)", fontSize: "14px", resize: "vertical", outline: "none", boxSizing: "border-box", fontFamily: "inherit" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: loading || !textValue.trim(),
+              style: { alignSelf: "flex-end", padding: "6px 16px", borderRadius: "var(--cyguin-radius)", border: "none", background: "var(--cyguin-accent)", color: "var(--cyguin-accent-fg)", fontWeight: 600, fontSize: "14px", cursor: "pointer", opacity: loading || !textValue.trim() ? 0.5 : 1 },
+              children: loading ? "Sending..." : "Submit"
+            }
+          )
+        ] })
+      }
+    );
+  }
+  return null;
+}
+
+export {
+  FeedbackWidget
+};

package/dist/chunk-5Q4LNXS7.cjs

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/adapters/in-memory.ts
+var _nanoid = require('nanoid');
+var InMemoryFeedbackAdapter = class {
+  constructor() {
+    this.store = /* @__PURE__ */ new Map();
+  }
+  async list(opts) {
+    let records = Array.from(this.store.values());
+    if (_optionalChain([opts, 'optionalAccess', _ => _.url]) !== void 0) {
+      records = records.filter((r) => r.url === opts.url);
+    }
+    if (_optionalChain([opts, 'optionalAccess', _2 => _2.reviewed]) !== void 0) {
+      records = records.filter((r) => r.reviewed === opts.reviewed);
+    }
+    records.sort((a, b) => b.createdAt - a.createdAt);
+    if (_optionalChain([opts, 'optionalAccess', _3 => _3.limit]) !== void 0) {
+      records = records.slice(0, opts.limit);
+    }
+    return { data: records, total: records.length };
+  }
+  async create(record) {
+    const feedbackRecord = {
+      id: _nanoid.nanoid.call(void 0, ),
+      userId: record.userId,
+      type: record.type,
+      body: record.body,
+      url: record.url,
+      createdAt: record.createdAt,
+      reviewed: false
+    };
+    this.store.set(feedbackRecord.id, feedbackRecord);
+    return feedbackRecord;
+  }
+  async setReviewed(id, reviewed) {
+    const record = this.store.get(id);
+    if (!record) {
+      throw new Error(`Feedback record ${id} not found`);
+    }
+    record.reviewed = reviewed;
+    return record;
+  }
+};
+
+
+
+exports.InMemoryFeedbackAdapter = InMemoryFeedbackAdapter;