@cyguin/feedback 0.1.0

package/dist/types-CMsn8uhD.d.cts

@@ -0,0 +1,49 @@
+type FeedbackType = 'thumbs' | 'rating' | 'text';
+interface FeedbackRecord {
+    id: string;
+    userId?: string;
+    type: FeedbackType;
+    body: string;
+    url: string;
+    createdAt: number;
+    reviewed: boolean;
+}
+interface FeedbackAdapter {
+    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>;
+}
+interface FeedbackWidgetProps {
+    type: 'thumbs' | 'rating' | 'text';
+    url?: string;
+    userId?: string;
+    theme?: 'light' | 'dark';
+    className?: string;
+    onSubmit?: (feedback: FeedbackData) => void;
+    maxStars?: number;
+    placeholder?: string;
+}
+interface FeedbackData {
+    id: string;
+    userId?: string;
+    type: FeedbackType;
+    body: string;
+    url: string;
+    createdAt: number;
+    reviewed: boolean;
+}
+
+export type { FeedbackAdapter as F, FeedbackData as a, FeedbackRecord as b, FeedbackType as c, FeedbackWidgetProps as d };

package/dist/types-CMsn8uhD.d.ts

@@ -0,0 +1,49 @@
+type FeedbackType = 'thumbs' | 'rating' | 'text';
+interface FeedbackRecord {
+    id: string;
+    userId?: string;
+    type: FeedbackType;
+    body: string;
+    url: string;
+    createdAt: number;
+    reviewed: boolean;
+}
+interface FeedbackAdapter {
+    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>;
+}
+interface FeedbackWidgetProps {
+    type: 'thumbs' | 'rating' | 'text';
+    url?: string;
+    userId?: string;
+    theme?: 'light' | 'dark';
+    className?: string;
+    onSubmit?: (feedback: FeedbackData) => void;
+    maxStars?: number;
+    placeholder?: string;
+}
+interface FeedbackData {
+    id: string;
+    userId?: string;
+    type: FeedbackType;
+    body: string;
+    url: string;
+    createdAt: number;
+    reviewed: boolean;
+}
+
+export type { FeedbackAdapter as F, FeedbackData as a, FeedbackRecord as b, FeedbackType as c, FeedbackWidgetProps as d };

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@cyguin/feedback",
+  "version": "0.1.0",
+  "description": "Drop-in user feedback widget for Next.js \u2014 thumbs, rating, or text",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cyguin/feedback"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./server": {
+      "import": "./dist/server.js",
+      "types": "./dist/server.d.ts"
+    },
+    "./react": {
+      "import": "./dist/components/index.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./adapters/in-memory": {
+      "import": "./dist/adapters/in-memory.js",
+      "types": "./dist/adapters/in-memory.d.ts"
+    },
+    "./adapters/supabase": {
+      "import": "./dist/adapters/supabase.js",
+      "types": "./dist/adapters/supabase.d.ts"
+    }
+  },
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "next": ">=14",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@supabase/supabase-js": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@supabase/supabase-js": "^2.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "next": "^14.0.0",
+    "react": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.5.0"
+  },
+  "dependencies": {
+    "nanoid": "^5.0.7"
+  }
+}

package/src/adapters/in-memory.ts

@@ -0,0 +1,58 @@
+import type { FeedbackAdapter, FeedbackRecord } from '../types.js';
+import { nanoid } from 'nanoid';
+
+export class InMemoryFeedbackAdapter implements FeedbackAdapter {
+  private store: Map<string, FeedbackRecord> = new Map();
+
+  async list(opts?: {
+    url?: string;
+    reviewed?: boolean;
+    limit?: number;
+  }): Promise<{ data: FeedbackRecord[]; total: number }> {
+    let records = Array.from(this.store.values());
+
+    if (opts?.url !== undefined) {
+      records = records.filter((r) => r.url === opts.url);
+    }
+    if (opts?.reviewed !== undefined) {
+      records = records.filter((r) => r.reviewed === opts.reviewed);
+    }
+
+    records.sort((a, b) => b.createdAt - a.createdAt);
+
+    if (opts?.limit !== undefined) {
+      records = records.slice(0, opts.limit);
+    }
+
+    return { data: records, total: records.length };
+  }
+
+  async create(record: {
+    userId?: string;
+    type: import('../types.js').FeedbackType;
+    body: string;
+    url: string;
+    createdAt: number;
+  }): Promise<FeedbackRecord> {
+    const feedbackRecord: FeedbackRecord = {
+      id: nanoid(),
+      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: string, reviewed: boolean): Promise<FeedbackRecord> {
+    const record = this.store.get(id);
+    if (!record) {
+      throw new Error(`Feedback record ${id} not found`);
+    }
+    record.reviewed = reviewed;
+    return record;
+  }
+}

package/src/adapters/index.ts

@@ -0,0 +1,2 @@
+export { InMemoryFeedbackAdapter } from './in-memory.js';
+export { SupabaseFeedbackAdapter } from './supabase.js';

package/src/adapters/supabase.ts

@@ -0,0 +1,88 @@
+import type { FeedbackAdapter, FeedbackRecord } from '../types.js';
+import type { SupabaseClient } from '@supabase/supabase-js';
+import { nanoid } from 'nanoid';
+
+export class SupabaseFeedbackAdapter implements FeedbackAdapter {
+  private client: SupabaseClient;
+  private tableName: string;
+
+  constructor(client: SupabaseClient, tableName = 'feedback') {
+    this.client = client;
+    this.tableName = tableName;
+  }
+
+  private mapRow(row: Record<string, unknown>): FeedbackRecord {
+    return {
+      id: row.id as string,
+      userId: row.user_id as string | undefined,
+      type: row.type as import('../types.js').FeedbackType,
+      body: row.body as string,
+      url: row.url as string,
+      createdAt: row.created_at as number,
+      reviewed: Boolean(row.reviewed),
+    };
+  }
+
+  async list(opts?: {
+    url?: string;
+    reviewed?: boolean;
+    limit?: number;
+  }): Promise<{ data: FeedbackRecord[]; total: number }> {
+    let query = this.client.from(this.tableName).select('*', { count: 'exact' });
+
+    if (opts?.url !== undefined) {
+      query = query.eq('url', opts.url);
+    }
+    if (opts?.reviewed !== undefined) {
+      query = query.eq('reviewed', opts.reviewed ? 1 : 0);
+    }
+
+    query = query.order('created_at', { ascending: false });
+
+    if (opts?.limit !== undefined) {
+      query = query.limit(opts.limit);
+    }
+
+    const { data, count, error } = await query;
+
+    if (error) throw error;
+    return { data: (data ?? []).map((r: Record<string, unknown>) => this.mapRow(r)), total: count ?? 0 };
+  }
+
+  async create(record: {
+    userId?: string;
+    type: import('../types.js').FeedbackType;
+    body: string;
+    url: string;
+    createdAt: number;
+  }): Promise<FeedbackRecord> {
+    const { data, error } = await this.client
+      .from(this.tableName)
+      .insert({
+        id: nanoid(),
+        user_id: record.userId ?? null,
+        type: record.type,
+        body: record.body,
+        url: record.url,
+        created_at: record.createdAt,
+        reviewed: 0,
+      })
+      .select()
+      .single();
+
+    if (error) throw error;
+    return this.mapRow(data as Record<string, unknown>);
+  }
+
+  async setReviewed(id: string, reviewed: boolean): Promise<FeedbackRecord> {
+    const { data, error } = await this.client
+      .from(this.tableName)
+      .update({ reviewed: reviewed ? 1 : 0 })
+      .eq('id', id)
+      .select()
+      .single();
+
+    if (error) throw error;
+    return this.mapRow(data as Record<string, unknown>);
+  }
+}

package/src/app/api/feedback/[...cyguin]/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createFeedbackHandler } from '../../handlers/route.js';
+import { InMemoryFeedbackAdapter } from '../../adapters/in-memory.js';
+
+const adapter = new InMemoryFeedbackAdapter();
+const secret = process.env.FEEDBACK_SECRET ?? '';
+
+const handler = createFeedbackHandler({ adapter, secret });
+
+export async function GET(req: NextRequest) {
+  return handler(req);
+}
+
+export async function POST(req: NextRequest) {
+  return handler(req);
+}
+
+export async function PATCH(req: NextRequest) {
+  return handler(req);
+}

package/src/components/FeedbackWidget.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import type { FeedbackWidgetProps, FeedbackData } from '../types.js';
+
+export type { FeedbackWidgetProps, FeedbackData };
+
+const THUMBS_UP = 'thumbs_up';
+const THUMBS_DOWN = 'thumbs_down';
+
+function ThumbsUpIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M7 10v12" />
+      <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" />
+    </svg>
+  );
+}
+
+function ThumbsDownIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M17 14V2" />
+      <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" />
+    </svg>
+  );
+}
+
+function StarIcon({ filled }: { filled: boolean }) {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill={filled ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <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" />
+    </svg>
+  );
+}
+
+const 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)',
+};
+
+const 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)',
+};
+
+export function FeedbackWidget({
+  type,
+  url: urlProp,
+  userId,
+  theme = 'light',
+  className = '',
+  onSubmit,
+  maxStars = 5,
+  placeholder = 'Share your feedback...',
+}: FeedbackWidgetProps) {
+  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: string) => {
+      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), 3000);
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [type, userId, onSubmit],
+  );
+
+  if (submitted) {
+    return (
+      <div
+        data-theme={theme}
+        className={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' }}
+      >
+        Thanks for your feedback!
+      </div>
+    );
+  }
+
+  if (type === 'thumbs') {
+    return (
+      <div
+        data-theme={theme}
+        className={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' }}
+      >
+        <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' }}
+        >
+          <ThumbsUpIcon />
+        </button>
+        <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' }}
+        >
+          <ThumbsDownIcon />
+        </button>
+      </div>
+    );
+  }
+
+  if (type === 'rating') {
+    const [selected, setSelected] = useState<number | null>(null);
+
+    const handleStarClick = (star: number) => {
+      setSelected(star);
+      handleSubmit(String(star));
+    };
+
+    return (
+      <div
+        data-theme={theme}
+        className={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' }}
+      >
+        {Array.from({ length: maxStars }, (_, i) => {
+          const star = i + 1;
+          const filled = selected !== null && star <= selected;
+          return (
+            <button
+              key={star}
+              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' }}
+            >
+              <StarIcon filled={filled} />
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  if (type === 'text') {
+    const handleTextSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      if (textValue.trim()) {
+        handleSubmit(textValue.trim());
+        setTextValue('');
+      }
+    };
+
+    return (
+      <div
+        data-theme={theme}
+        className={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' }}
+      >
+        <form onSubmit={handleTextSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <textarea
+            value={textValue}
+            onChange={(e) => setTextValue(e.target.value)}
+            placeholder={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' }}
+          />
+          <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 }}
+          >
+            {loading ? 'Sending...' : 'Submit'}
+          </button>
+        </form>
+      </div>
+    );
+  }
+
+  return null;
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { FeedbackWidget } from './FeedbackWidget.js';
+export type { FeedbackWidgetProps, FeedbackData } from './FeedbackWidget.js';

package/src/handlers/route.ts

@@ -0,0 +1,100 @@
+import { NextRequest, NextResponse } from 'next/server';
+import type { FeedbackAdapter, FeedbackType } from '../types.js';
+
+interface HandlerOptions {
+  adapter: FeedbackAdapter;
+  secret: string;
+}
+
+function parseJsonBody<T>(req: NextRequest): Promise<T> {
+  return req.json();
+}
+
+function bearerToken(req: NextRequest, secret: string): boolean {
+  const auth = req.headers.get('Authorization') ?? '';
+  return auth === `Bearer ${secret}`;
+}
+
+export function createFeedbackHandler({ adapter, secret }: HandlerOptions) {
+  return async function handler(req: NextRequest) {
+    const url = req.nextUrl.clone();
+    const pathname = url.pathname;
+    const segments = pathname.split('/').filter(Boolean);
+    const cyguinIndex = segments.indexOf('cyguin');
+
+    if (cyguinIndex === -1) {
+      return NextResponse.json({ error: 'Invalid route' }, { status: 400 });
+    }
+
+    const remaining = segments.slice(cyguinIndex + 1);
+
+    try {
+      if (req.method === 'GET') {
+        if (!bearerToken(req, secret)) {
+          return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const urlParam = url.searchParams.get('url') ?? undefined;
+        const reviewedParam = url.searchParams.get('reviewed');
+        const limitParam = url.searchParams.get('limit');
+
+        const reviewed =
+          reviewedParam !== null
+            ? reviewedParam === '1' || reviewedParam === 'true'
+            : undefined;
+        const limit = limitParam !== null ? parseInt(limitParam, 10) : undefined;
+
+        const result = await adapter.list({ url: urlParam, reviewed, limit });
+        return NextResponse.json({ data: result.data, total: result.total });
+      }
+
+      if (req.method === 'POST') {
+        if (!bearerToken(req, secret)) {
+          return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await parseJsonBody<{
+          type: FeedbackType;
+          body: string;
+          url: string;
+          userId?: string;
+        }>(req);
+
+        if (!body.type || !body.body || !body.url) {
+          return NextResponse.json(
+            { error: 'type, body, and url are required' },
+            { status: 400 }
+          );
+        }
+
+        const record = await adapter.create({
+          type: body.type,
+          body: body.body,
+          url: body.url,
+          userId: body.userId,
+          createdAt: Date.now(),
+        });
+        return NextResponse.json({ data: record }, { status: 201 });
+      }
+
+      if (req.method === 'PATCH') {
+        if (!bearerToken(req, secret)) {
+          return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        if (remaining.length < 1) {
+          return NextResponse.json({ error: 'id is required' }, { status: 400 });
+        }
+
+        const id = remaining[0];
+        await adapter.setReviewed(id, true);
+        return NextResponse.json({ data: { id, reviewed: true } });
+      }
+
+      return NextResponse.json({ error: 'Method not allowed' }, { status: 405 });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Unknown error';
+      return NextResponse.json({ error: message }, { status: 500 });
+    }
+  };
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export type {
+  FeedbackAdapter,
+  FeedbackRecord,
+  FeedbackType,
+} from './types.js';
+
+export { createFeedbackHandler } from './server.js';
+export { InMemoryFeedbackAdapter, SupabaseFeedbackAdapter } from './adapters/index.js';
+
+export { FeedbackWidget } from './components/FeedbackWidget.js';
+export type { FeedbackWidgetProps, FeedbackData } from './components/FeedbackWidget.js';

package/src/server.ts

@@ -0,0 +1 @@
+export { createFeedbackHandler } from './handlers/route.js';