@geenius/feedback 0.1.0 → 0.3.0

package/packages/convex/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src",
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler"
-  },
-  "include": [
-    "src"
-  ]
-}

package/packages/convex/tsup.config.ts

@@ -1,17 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
-    entry: {
-        index: 'src/index.ts',
-    },
-    format: ['esm'],
-    dts: true,
-    clean: true,
-    sourcemap: true,
-    external: [
-        'convex',
-        'convex/server',
-        'convex/values',
-        'convex/react',
-    ],
-})

package/packages/react/package.json

@@ -1,49 +0,0 @@
-{
-  "name": "@geenius-feedback/react",
-  "version": "0.1.0",
-  "private": false,
-  "type": "module",
-  "description": "Geenius Feedback — React components & hooks",
-  "author": "Antigravity HQ",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "clean": "rm -rf dist",
-    "type-check": "tsc --noEmit",
-    "prepublishOnly": "pnpm clean && pnpm build"
-  },
-  "dependencies": {
-    "@geenius-feedback/shared": "workspace:*"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "tsup": "^8.5.1",
-    "typescript": "~6.0.2"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "engines": {
-    "node": ">=20.0.0"
-  }
-}

package/packages/react/src/components/FeedbackCard.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import type { FeedbackStatus, FeedbackPriority, FeedbackType, FeedbackItem } from '@geenius-feedback/shared'
-import { STATUS_CONFIG, PRIORITY_CONFIG, TYPE_CONFIG, formatRelativeTime } from '@geenius-feedback/shared'
-
-export function StatusBadge({ status }: { status: FeedbackStatus }) {
-  const cfg = STATUS_CONFIG[status]
-  return <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[10px] font-medium" style={{ background: `${cfg.color}22`, color: cfg.color }}><span>{cfg.emoji}</span>{cfg.label}</span>
-}
-
-export function PriorityBadge({ priority }: { priority: FeedbackPriority }) {
-  const cfg = PRIORITY_CONFIG[priority]
-  return <span className="rounded-full px-2 py-0.5 text-[10px] font-medium" style={{ background: `${cfg.color}22`, color: cfg.color }}>{cfg.label}</span>
-}
-
-export function TypeBadge({ type }: { type: FeedbackType }) {
-  const cfg = TYPE_CONFIG[type]
-  return <span className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium" style={{ background: `${cfg.color}22`, color: cfg.color }}><span>{cfg.icon}</span>{cfg.label}</span>
-}
-
-export function FeedbackCard({ item, onVote, onClick, hasVoted }: { item: FeedbackItem; onVote?: (id: string) => void; onClick?: (id: string) => void; hasVoted?: boolean }) {
-  return (
-    <div className="group flex gap-3 rounded-xl border border-white/8 bg-white/[0.02] p-4 transition-all hover:border-indigo-500/20 hover:bg-white/[0.04] cursor-pointer" onClick={() => onClick?.(item.id)}>
-      {onVote && (
-        <button type="button" onClick={e => { e.stopPropagation(); onVote(item.id) }}
-          className={`flex flex-col items-center gap-0.5 rounded-lg px-2 py-1.5 text-xs font-bold transition-colors ${hasVoted ? 'bg-indigo-500/15 text-indigo-400' : 'bg-white/5 text-white/30 hover:bg-white/10 hover:text-white/50'}`}>
-          <span className="text-sm">{hasVoted ? '▲' : '△'}</span>
-          <span className="tabular-nums">{item.votes}</span>
-        </button>
-      )}
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2 mb-1 flex-wrap">
-          <TypeBadge type={item.type} />
-          <StatusBadge status={item.status} />
-          <PriorityBadge priority={item.priority} />
-        </div>
-        <h3 className="text-sm font-semibold text-white/90 mb-0.5 truncate">{item.title}</h3>
-        <p className="text-xs text-white/40 line-clamp-2">{item.description}</p>
-        <div className="mt-2 flex items-center gap-3 text-[10px] text-white/25">
-          {item.userName && <span>{item.userName}</span>}
-          <span>{formatRelativeTime(item.createdAt)}</span>
-          {item.tags.length > 0 && item.tags.map(t => <span key={t} className="rounded bg-white/5 px-1.5 py-0.5">{t}</span>)}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function FeedbackList({ items, onVote, votedIds, onStatusChange }: { items: FeedbackItem[]; onVote?: (id: string) => void; votedIds?: string[]; onStatusChange?: (id: string, status: FeedbackStatus) => void }) {
-  if (items.length === 0) return <div className="flex flex-col items-center py-16"><div className="mb-3 text-5xl opacity-20">💬</div><p className="text-sm text-white/40">No feedback yet</p></div>
-  return <div className="space-y-2">{items.map(item => <FeedbackCard key={item.id} item={item} onVote={onVote} hasVoted={votedIds?.includes(item.id)} />)}</div>
-}

package/packages/react/src/components/FeedbackForm.tsx

@@ -1,43 +0,0 @@
-import React, { useState } from 'react'
-import type { FeedbackType } from '@geenius-feedback/shared'
-import { TYPE_CONFIG, FEEDBACK_TYPES } from '@geenius-feedback/shared'
-import { useFeedbackForm } from '../hooks/useFeedbackForm'
-
-export function FeedbackTypeSelector({ value, onChange }: { value: FeedbackType; onChange: (t: FeedbackType) => void }) {
-  return (
-    <div className="flex gap-1.5">
-      {FEEDBACK_TYPES.map(t => {
-        const cfg = TYPE_CONFIG[t]
-        return <button key={t} type="button" onClick={() => onChange(t)}
-          className={`flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-medium transition-all ${value === t ? 'text-white' : 'bg-white/5 text-white/50 hover:bg-white/10'}`}
-          style={value === t ? { background: cfg.color } : undefined}><span>{cfg.icon}</span>{cfg.label}</button>
-      })}
-    </div>
-  )
-}
-
-export function FeedbackForm({ onSubmit, onClose }: { onSubmit: (data: { type: FeedbackType; title: string; description: string }) => Promise<string>; onClose?: () => void }) {
-  const form = useFeedbackForm(onSubmit)
-
-  if (form.success) return (
-    <div className="flex flex-col items-center py-8 text-center"><div className="mb-3 text-4xl">🎉</div><h3 className="text-base font-semibold text-white/90 mb-1">Thank you!</h3><p className="text-sm text-white/50 mb-4">Your feedback has been submitted.</p>
-      <button type="button" onClick={() => { form.reset(); onClose?.() }} className="rounded-lg bg-indigo-600 px-4 py-2 text-xs font-medium text-white">Done</button>
-    </div>
-  )
-
-  return (
-    <div className="space-y-4">
-      <FeedbackTypeSelector value={form.formData.type} onChange={t => form.setFormData(d => ({ ...d, type: t }))} />
-      <input type="text" placeholder="Short title for your feedback…" value={form.formData.title} onChange={e => form.setFormData(d => ({ ...d, title: e.target.value }))}
-        className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40" />
-      <textarea placeholder="Describe your feedback in detail…" value={form.formData.description} onChange={e => form.setFormData(d => ({ ...d, description: e.target.value }))} rows={4}
-        className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40 resize-none" />
-      {form.error && <p className="text-xs text-red-400">{form.error}</p>}
-      <div className="flex justify-end gap-2">
-        {onClose && <button type="button" onClick={onClose} className="rounded-lg border border-white/10 px-4 py-2 text-xs text-white/50 hover:bg-white/5">Cancel</button>}
-        <button type="button" onClick={form.submit} disabled={form.isSubmitting}
-          className="rounded-lg bg-indigo-600 px-5 py-2 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50">{form.isSubmitting ? 'Submitting…' : 'Submit'}</button>
-      </div>
-    </div>
-  )
-}

package/packages/react/src/components/FeedbackWidget.tsx

@@ -1,32 +0,0 @@
-import React, { useState } from 'react'
-import type { FeedbackType } from '@geenius-feedback/shared'
-import { FeedbackForm } from './FeedbackForm'
-
-export function FeedbackWidget({ onSubmit, position = 'right' }: { onSubmit: (data: { type: FeedbackType; title: string; description: string }) => Promise<string>; position?: 'left' | 'right' }) {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <>
-      {/* Floating trigger tab */}
-      <button type="button" onClick={() => setIsOpen(true)}
-        className={`fixed top-1/2 -translate-y-1/2 z-40 rounded-l-xl bg-indigo-600 px-2 py-4 text-white shadow-lg hover:bg-indigo-500 transition-all ${position === 'right' ? 'right-0' : 'left-0 rounded-l-none rounded-r-xl'}`}
-        style={{ writingMode: 'vertical-rl' }}>
-        <span className="text-xs font-medium tracking-wider">Feedback</span>
-      </button>
-
-      {/* Slide-out panel */}
-      {isOpen && (
-        <div className="fixed inset-0 z-50 flex justify-end" onClick={() => setIsOpen(false)}>
-          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
-          <div className="relative w-full max-w-md bg-[#0f0f17] border-l border-white/10 p-6 overflow-y-auto" onClick={e => e.stopPropagation()}>
-            <div className="mb-6 flex items-center justify-between">
-              <h2 className="text-lg font-bold text-white">Send Feedback</h2>
-              <button type="button" onClick={() => setIsOpen(false)} className="rounded-lg p-1.5 text-white/30 hover:bg-white/5 hover:text-white/50">✕</button>
-            </div>
-            <FeedbackForm onSubmit={onSubmit} onClose={() => setIsOpen(false)} />
-          </div>
-        </div>
-      )}
-    </>
-  )
-}

package/packages/react/src/components/NPSSurvey.tsx

@@ -1,62 +0,0 @@
-import React, { useState } from 'react'
-import type { NPSResponse, NPSStats } from '@geenius-feedback/shared'
-import { getNPSCategory, calcNPSStats } from '@geenius-feedback/shared'
-
-export function NPSSurvey({ onSubmit, onDismiss }: { onSubmit: (score: number, comment?: string) => void; onDismiss: () => void }) {
-  const [score, setScore] = useState<number | null>(null)
-  const [comment, setComment] = useState('')
-  const [step, setStep] = useState<'score' | 'comment' | 'thanks'>('score')
-
-  const handleScore = (s: number) => { setScore(s); setStep('comment') }
-  const handleSubmit = () => { if (score !== null) { onSubmit(score, comment || undefined); setStep('thanks') } }
-
-  return (
-    <div className="fixed bottom-6 right-6 z-50 w-96 rounded-2xl border border-white/10 bg-[#111118] p-6 shadow-2xl">
-      {step === 'score' && (
-        <div>
-          <div className="mb-1 flex items-center justify-between"><h3 className="text-sm font-semibold text-white/90">How likely are you to recommend us?</h3><button type="button" onClick={onDismiss} className="text-white/20 hover:text-white/40">✕</button></div>
-          <p className="text-xs text-white/40 mb-4">0 = Not at all, 10 = Extremely likely</p>
-          <div className="flex gap-1">{Array.from({ length: 11 }).map((_, i) => (
-            <button key={i} type="button" onClick={() => handleScore(i)}
-              className={`flex-1 rounded-lg py-2.5 text-xs font-bold transition-all ${i <= 6 ? 'hover:bg-red-500/20 hover:text-red-400' : i <= 8 ? 'hover:bg-amber-500/20 hover:text-amber-400' : 'hover:bg-emerald-500/20 hover:text-emerald-400'} bg-white/5 text-white/50`}>{i}</button>
-          ))}</div>
-          <div className="mt-2 flex justify-between text-[10px] text-white/20"><span>Not likely</span><span>Very likely</span></div>
-        </div>
-      )}
-      {step === 'comment' && (
-        <div>
-          <h3 className="text-sm font-semibold text-white/90 mb-1">Thanks! Any additional thoughts?</h3>
-          <p className="text-xs text-white/40 mb-3">Score: <span className={`font-bold ${score! <= 6 ? 'text-red-400' : score! <= 8 ? 'text-amber-400' : 'text-emerald-400'}`}>{score}</span></p>
-          <textarea value={comment} onChange={e => setComment(e.target.value)} placeholder="Optional feedback…" rows={3} className="w-full rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-white placeholder-white/30 outline-none resize-none mb-3" />
-          <div className="flex gap-2"><button type="button" onClick={handleSubmit} className="flex-1 rounded-lg bg-indigo-600 py-2 text-xs font-medium text-white hover:bg-indigo-500">Submit</button><button type="button" onClick={() => { onSubmit(score!, undefined); setStep('thanks') }} className="rounded-lg border border-white/10 px-3 py-2 text-xs text-white/50">Skip</button></div>
-        </div>
-      )}
-      {step === 'thanks' && (
-        <div className="text-center py-4"><div className="text-3xl mb-2">🎉</div><p className="text-sm font-semibold text-white/80">Thank you for your feedback!</p></div>
-      )}
-    </div>
-  )
-}
-
-export function NPSResults({ responses }: { responses: NPSResponse[] }) {
-  const stats = calcNPSStats(responses)
-  const total = stats.totalResponses || 1
-  const scoreColor = stats.npsScore >= 50 ? 'text-emerald-400' : stats.npsScore >= 0 ? 'text-amber-400' : 'text-red-400'
-
-  return (
-    <div className="rounded-xl border border-white/8 bg-white/[0.02] p-5">
-      <div className="mb-4 flex items-center justify-between"><h4 className="text-sm font-semibold text-white/80">NPS Score</h4><span className={`text-3xl font-black tabular-nums ${scoreColor}`}>{stats.npsScore}</span></div>
-      <div className="mb-4 flex h-5 overflow-hidden rounded-full">
-        <div className="bg-red-500/70" style={{ width: `${(stats.detractors / total) * 100}%` }} title={`Detractors: ${stats.detractors}`} />
-        <div className="bg-amber-500/70" style={{ width: `${(stats.passives / total) * 100}%` }} title={`Passives: ${stats.passives}`} />
-        <div className="bg-emerald-500/70" style={{ width: `${(stats.promoters / total) * 100}%` }} title={`Promoters: ${stats.promoters}`} />
-      </div>
-      <div className="grid grid-cols-3 gap-2 text-center text-xs">
-        <div><span className="block text-red-400 font-bold">{stats.detractors}</span><span className="text-white/30">Detractors</span></div>
-        <div><span className="block text-amber-400 font-bold">{stats.passives}</span><span className="text-white/30">Passives</span></div>
-        <div><span className="block text-emerald-400 font-bold">{stats.promoters}</span><span className="text-white/30">Promoters</span></div>
-      </div>
-      <div className="mt-3 pt-3 border-t border-white/5 flex justify-between text-xs text-white/40"><span>Avg: {stats.averageScore}/10</span><span>{stats.totalResponses} responses</span></div>
-    </div>
-  )
-}

package/packages/react/src/components/index.ts

@@ -1,4 +0,0 @@
-export { StatusBadge, PriorityBadge, TypeBadge, FeedbackCard, FeedbackList } from './FeedbackCard'
-export { FeedbackTypeSelector, FeedbackForm } from './FeedbackForm'
-export { FeedbackWidget } from './FeedbackWidget'
-export { NPSSurvey, NPSResults } from './NPSSurvey'

package/packages/react/src/hooks/index.ts

@@ -1,5 +0,0 @@
-export { useFeedback } from './useFeedback'
-export type { FeedbackFilter } from './useFeedback'
-export { useFeedbackForm } from './useFeedbackForm'
-export { useNPS } from './useNPS'
-export { useFeedbackAdmin } from './useFeedbackAdmin'

package/packages/react/src/hooks/useFeedback.ts

@@ -1,23 +0,0 @@
-import { useMemo, useState } from 'react'
-import type { FeedbackItem, FeedbackType, FeedbackStatus, FeedbackPriority, FeedbackStats } from '@geenius-feedback/shared'
-import { calcFeedbackStats } from '@geenius-feedback/shared'
-
-export interface FeedbackFilter { type?: FeedbackType; status?: FeedbackStatus; priority?: FeedbackPriority; search?: string; sort?: 'newest' | 'votes' }
-
-export function useFeedback(items: FeedbackItem[] | undefined) {
-  const [filter, setFilter] = useState<FeedbackFilter>({ sort: 'newest' })
-  const isLoading = items === undefined
-  const stats = useMemo<FeedbackStats>(() => calcFeedbackStats(items ?? []), [items])
-
-  const filteredItems = useMemo(() => {
-    let result = items ?? []
-    if (filter.type) result = result.filter(i => i.type === filter.type)
-    if (filter.status) result = result.filter(i => i.status === filter.status)
-    if (filter.priority) result = result.filter(i => i.priority === filter.priority)
-    if (filter.search) { const q = filter.search.toLowerCase(); result = result.filter(i => i.title.toLowerCase().includes(q) || i.description.toLowerCase().includes(q)) }
-    if (filter.sort === 'votes') result = [...result].sort((a, b) => b.votes - a.votes)
-    return result
-  }, [items, filter])
-
-  return { items: filteredItems, allItems: items ?? [], stats, filter, setFilter, isLoading }
-}

package/packages/react/src/hooks/useFeedbackAdmin.ts

@@ -1,24 +0,0 @@
-import { useMemo, useState } from 'react'
-import type { FeedbackItem, FeedbackStatus, FeedbackPriority } from '@geenius-feedback/shared'
-import { calcFeedbackStats } from '@geenius-feedback/shared'
-
-export function useFeedbackAdmin(
-  items: FeedbackItem[] | undefined,
-  mutations: {
-    updateStatus: (id: string, status: FeedbackStatus, note?: string) => Promise<void>
-    updatePriority: (id: string, priority: FeedbackPriority) => Promise<void>
-    deleteFeedback: (id: string) => Promise<void>
-  }
-) {
-  const [search, setSearch] = useState('')
-  const isLoading = items === undefined
-  const stats = useMemo(() => calcFeedbackStats(items ?? []), [items])
-
-  const filteredItems = useMemo(() => {
-    if (!search) return items ?? []
-    const q = search.toLowerCase()
-    return (items ?? []).filter(i => i.title.toLowerCase().includes(q) || i.description.toLowerCase().includes(q) || i.userEmail?.toLowerCase().includes(q))
-  }, [items, search])
-
-  return { items: filteredItems, allItems: items ?? [], stats, search, setSearch, isLoading, ...mutations }
-}

package/packages/react/src/hooks/useFeedbackForm.ts

@@ -1,35 +0,0 @@
-import { useState, useCallback } from 'react'
-import type { FeedbackType } from '@geenius-feedback/shared'
-
-interface FormData { type: FeedbackType; title: string; description: string; url?: string }
-
-export function useFeedbackForm(submitFn: (data: FormData & { browser?: string; os?: string }) => Promise<string>) {
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [success, setSuccess] = useState(false)
-  const [formData, setFormData] = useState<FormData>({ type: 'general', title: '', description: '' })
-
-  const validate = useCallback((): string | null => {
-    if (!formData.title.trim()) return 'Title is required'
-    if (formData.title.trim().length < 3) return 'Title must be at least 3 characters'
-    if (!formData.description.trim()) return 'Description is required'
-    if (formData.description.trim().length < 10) return 'Description must be at least 10 characters'
-    return null
-  }, [formData])
-
-  const submit = useCallback(async () => {
-    const err = validate()
-    if (err) { setError(err); return }
-    setIsSubmitting(true); setError(null)
-    try {
-      const browser = typeof navigator !== 'undefined' ? navigator.userAgent : undefined
-      await submitFn({ ...formData, browser, url: formData.url || (typeof window !== 'undefined' ? window.location.href : undefined) })
-      setSuccess(true); setFormData({ type: 'general', title: '', description: '' })
-    } catch (e) { setError(e instanceof Error ? e.message : 'Submission failed') }
-    finally { setIsSubmitting(false) }
-  }, [formData, submitFn, validate])
-
-  const reset = useCallback(() => { setFormData({ type: 'general', title: '', description: '' }); setError(null); setSuccess(false) }, [])
-
-  return { formData, setFormData, submit, isSubmitting, error, success, reset, validate }
-}

package/packages/react/src/hooks/useNPS.ts

@@ -1,26 +0,0 @@
-import { useState, useCallback, useEffect } from 'react'
-
-const NPS_STORAGE_KEY = 'geenius-nps-last-shown'
-
-export function useNPS(submitFn: (score: number, comment?: string) => Promise<void>, intervalDays = 90) {
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [showSurvey, setShowSurvey] = useState(false)
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    const last = localStorage.getItem(NPS_STORAGE_KEY)
-    if (!last) { setShowSurvey(true); return }
-    const daysSince = (Date.now() - Number(last)) / (1000 * 60 * 60 * 24)
-    if (daysSince >= intervalDays) setShowSurvey(true)
-  }, [intervalDays])
-
-  const submit = useCallback(async (score: number, comment?: string) => {
-    setIsSubmitting(true)
-    try { await submitFn(score, comment); localStorage.setItem(NPS_STORAGE_KEY, String(Date.now())); setShowSurvey(false) }
-    finally { setIsSubmitting(false) }
-  }, [submitFn])
-
-  const dismiss = useCallback(() => { setShowSurvey(false); localStorage.setItem(NPS_STORAGE_KEY, String(Date.now())) }, [])
-
-  return { submit, isSubmitting, showSurvey, dismiss }
-}

package/packages/react/src/index.tsx

@@ -1,13 +0,0 @@
-export { useFeedback } from './hooks/useFeedback'
-export type { FeedbackFilter } from './hooks/useFeedback'
-export { useFeedbackForm } from './hooks/useFeedbackForm'
-export { useNPS } from './hooks/useNPS'
-export { useFeedbackAdmin } from './hooks/useFeedbackAdmin'
-export { StatusBadge, PriorityBadge, TypeBadge, FeedbackCard, FeedbackList } from './components/FeedbackCard'
-export { FeedbackTypeSelector, FeedbackForm } from './components/FeedbackForm'
-export { FeedbackWidget } from './components/FeedbackWidget'
-export { NPSSurvey, NPSResults } from './components/NPSSurvey'
-export { FeedbackPublicPage } from './pages/FeedbackPublicPage'
-export { FeedbackAdminPage } from './pages/FeedbackAdminPage'
-export { FeedbackWidgetPage } from './pages/FeedbackWidgetPage'
-export type { FeedbackItem, NPSResponse, FeedbackConfig, FeedbackStats, NPSStats, FeedbackType, FeedbackStatus, FeedbackPriority, NPSCategory } from '@geenius-feedback/shared'

package/packages/react/src/pages/FeedbackAdminPage.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import type { FeedbackItem, FeedbackStatus, FeedbackPriority, NPSResponse } from '@geenius-feedback/shared'
-import { STATUS_CONFIG, PRIORITY_CONFIG, FEEDBACK_STATUSES, FEEDBACK_PRIORITIES, formatRelativeTime, TYPE_CONFIG } from '@geenius-feedback/shared'
-import { useFeedbackAdmin } from '../hooks/useFeedbackAdmin'
-import { StatusBadge, PriorityBadge, TypeBadge } from '../components/FeedbackCard'
-import { NPSResults } from '../components/NPSSurvey'
-
-interface FeedbackAdminPageProps {
-  items: FeedbackItem[] | undefined; npsResponses?: NPSResponse[]
-  mutations: Parameters<typeof useFeedbackAdmin>[1]
-}
-
-export function FeedbackAdminPage({ items, npsResponses, mutations }: FeedbackAdminPageProps) {
-  const admin = useFeedbackAdmin(items, mutations)
-
-  if (admin.isLoading) return (
-    <div className="min-h-screen bg-[#090a0f] px-6 py-12"><div className="mx-auto max-w-6xl">
-      <div className="mb-8 h-10 w-48 animate-pulse rounded-lg bg-white/5" />
-      <div className="mb-6 grid grid-cols-4 gap-4">{Array.from({ length: 4 }).map((_, i) => <div key={i} className="h-20 animate-pulse rounded-xl bg-white/5" />)}</div>
-      <div className="h-96 animate-pulse rounded-xl bg-white/5" />
-    </div></div>
-  )
-
-  return (
-    <div className="min-h-screen bg-[#090a0f] text-white"><div className="mx-auto max-w-6xl px-6 py-12">
-      <h1 className="text-2xl font-bold tracking-tight mb-8">Feedback Admin</h1>
-      <div className="mb-8 grid grid-cols-2 gap-4 md:grid-cols-5">
-        <StatCard label="Total" value={admin.stats.total} icon="📊" />
-        <StatCard label="Open" value={admin.stats.byStatus.open} icon="📬" color="text-blue-400" />
-        <StatCard label="Planned" value={admin.stats.byStatus.planned} icon="📋" color="text-purple-300" />
-        <StatCard label="In Progress" value={admin.stats.byStatus['in-progress']} icon="🚧" color="text-indigo-300" />
-        <StatCard label="Done" value={admin.stats.byStatus.done} icon="✅" color="text-emerald-400" />
-      </div>
-
-      <div className="grid gap-6 lg:grid-cols-3">
-        <div className="lg:col-span-2">
-          <div className="mb-4 flex items-center gap-3">
-            <input type="text" placeholder="Search…" value={admin.search} onChange={e => admin.setSearch(e.target.value)} className="w-64 rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40" />
-            <span className="text-xs text-white/30">{admin.items.length} items</span>
-          </div>
-          <div className="overflow-x-auto rounded-xl border border-white/8">
-            <table className="w-full text-sm"><thead><tr className="border-b border-white/8 bg-white/[0.02]"><th className="px-4 py-3 text-left text-xs font-medium text-white/40 uppercase">Type</th><th className="px-4 py-3 text-left text-xs font-medium text-white/40 uppercase">Title</th><th className="px-4 py-3 text-left text-xs font-medium text-white/40 uppercase">Status</th><th className="px-4 py-3 text-left text-xs font-medium text-white/40 uppercase">Priority</th><th className="px-4 py-3 text-left text-xs font-medium text-white/40 uppercase">Votes</th><th className="px-4 py-3 text-left text-xs font-medium text-white/40 uppercase">Date</th><th className="px-4 py-3 text-right text-xs font-medium text-white/40 uppercase">Actions</th></tr></thead>
-            <tbody className="divide-y divide-white/5">{admin.items.map(item => (
-              <tr key={item.id} className="group hover:bg-white/[0.02]">
-                <td className="px-4 py-3"><TypeBadge type={item.type} /></td>
-                <td className="px-4 py-3 max-w-xs truncate text-white/80 font-medium">{item.title}</td>
-                <td className="px-4 py-3"><select value={item.status} onChange={e => admin.updateStatus(item.id, e.target.value as FeedbackStatus)} className="rounded border border-white/10 bg-white/5 px-1.5 py-0.5 text-xs text-white outline-none">{FEEDBACK_STATUSES.map(s => <option key={s} value={s}>{STATUS_CONFIG[s].label}</option>)}</select></td>
-                <td className="px-4 py-3"><select value={item.priority} onChange={e => admin.updatePriority(item.id, e.target.value as FeedbackPriority)} className="rounded border border-white/10 bg-white/5 px-1.5 py-0.5 text-xs text-white outline-none">{FEEDBACK_PRIORITIES.map(p => <option key={p} value={p}>{PRIORITY_CONFIG[p].label}</option>)}</select></td>
-                <td className="px-4 py-3 tabular-nums text-white/50">{item.votes}</td>
-                <td className="px-4 py-3 text-xs text-white/30">{formatRelativeTime(item.createdAt)}</td>
-                <td className="px-4 py-3 text-right"><button type="button" onClick={() => admin.deleteFeedback(item.id)} className="rounded px-2 py-1 text-xs text-white/20 hover:text-red-400 hover:bg-red-500/10 opacity-0 group-hover:opacity-100">Delete</button></td>
-              </tr>
-            ))}</tbody></table>
-          </div>
-        </div>
-
-        <div className="space-y-6">
-          {npsResponses && <NPSResults responses={npsResponses} />}
-          <div className="rounded-xl border border-white/8 bg-white/[0.02] p-5">
-            <h4 className="text-sm font-semibold text-white/80 mb-3">By Type</h4>
-            {Object.entries(admin.stats.byType).map(([t, c]) => <div key={t} className="flex justify-between mb-1.5"><span className="text-xs text-white/50 capitalize">{TYPE_CONFIG[t as keyof typeof TYPE_CONFIG]?.icon} {t}</span><span className="text-xs font-bold text-white/70">{c}</span></div>)}
-          </div>
-        </div>
-      </div>
-    </div></div>
-  )
-}
-
-function StatCard({ label, value, icon, color }: { label: string; value: number; icon: string; color?: string }) {
-  return <div className="rounded-xl border border-white/8 bg-white/[0.02] p-4"><div className="mb-2 flex items-center justify-between"><span className="text-lg">{icon}</span><span className={`text-2xl font-bold tabular-nums ${color ?? 'text-white/90'}`}>{value}</span></div><p className="text-xs text-white/40">{label}</p></div>
-}

package/packages/react/src/pages/FeedbackPublicPage.tsx

@@ -1,42 +0,0 @@
-import React, { useState } from 'react'
-import type { FeedbackItem, FeedbackType } from '@geenius-feedback/shared'
-import { FEEDBACK_TYPES, TYPE_CONFIG, STATUS_CONFIG } from '@geenius-feedback/shared'
-import { useFeedback, type FeedbackFilter } from '../hooks/useFeedback'
-import { FeedbackList, FeedbackCard, StatusBadge } from '../components/FeedbackCard'
-
-export function FeedbackPublicPage({ items, onVote, votedIds }: { items: FeedbackItem[] | undefined; onVote?: (id: string) => void; votedIds?: string[] }) {
-  const feedback = useFeedback(items)
-  const [activeType, setActiveType] = useState<FeedbackType | 'all'>('all')
-
-  if (feedback.isLoading) return (
-    <div className="min-h-screen bg-[#090a0f] px-6 py-12"><div className="mx-auto max-w-3xl">
-      <div className="mb-8 h-10 w-48 animate-pulse rounded-lg bg-white/5" />
-      <div className="mb-6 flex gap-2">{Array.from({ length: 5 }).map((_, i) => <div key={i} className="h-9 w-24 animate-pulse rounded-lg bg-white/5" />)}</div>
-      <div className="space-y-3">{Array.from({ length: 4 }).map((_, i) => <div key={i} className="h-24 animate-pulse rounded-xl bg-white/5" />)}</div>
-    </div></div>
-  )
-
-  return (
-    <div className="min-h-screen bg-[#090a0f] text-white">
-      <div className="mx-auto max-w-3xl px-6 py-12">
-        <div className="mb-8"><h1 className="text-2xl font-bold tracking-tight mb-1">Feedback Board</h1><p className="text-sm text-white/40">{feedback.stats.total} submissions · {feedback.stats.byStatus.open} open</p></div>
-        <div className="mb-6 flex flex-wrap items-center gap-3">
-          <input type="text" placeholder="Search feedback…" value={feedback.filter.search ?? ''} onChange={e => feedback.setFilter({ ...feedback.filter, search: e.target.value || undefined })}
-            className="w-56 rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40" />
-          <div className="flex gap-1.5">
-            <button type="button" onClick={() => { setActiveType('all'); feedback.setFilter({ ...feedback.filter, type: undefined }) }}
-              className={`rounded-lg px-3 py-1.5 text-xs font-medium ${activeType === 'all' ? 'bg-indigo-600 text-white' : 'bg-white/5 text-white/50 hover:bg-white/10'}`}>All ({feedback.stats.total})</button>
-            {FEEDBACK_TYPES.map(t => <button key={t} type="button" onClick={() => { setActiveType(t); feedback.setFilter({ ...feedback.filter, type: t }) }}
-              className={`rounded-lg px-3 py-1.5 text-xs font-medium ${activeType === t ? 'text-white' : 'bg-white/5 text-white/50 hover:bg-white/10'}`}
-              style={activeType === t ? { background: TYPE_CONFIG[t].color } : undefined}>{TYPE_CONFIG[t].icon} {TYPE_CONFIG[t].label} ({feedback.stats.byType[t]})</button>)}
-          </div>
-          <div className="ml-auto flex gap-1.5">
-            <button type="button" onClick={() => feedback.setFilter({ ...feedback.filter, sort: 'newest' })} className={`rounded-lg px-3 py-1.5 text-xs ${feedback.filter.sort === 'newest' ? 'bg-white/10 text-white/80' : 'text-white/40'}`}>Newest</button>
-            <button type="button" onClick={() => feedback.setFilter({ ...feedback.filter, sort: 'votes' })} className={`rounded-lg px-3 py-1.5 text-xs ${feedback.filter.sort === 'votes' ? 'bg-white/10 text-white/80' : 'text-white/40'}`}>Top voted</button>
-          </div>
-        </div>
-        <FeedbackList items={feedback.items} onVote={onVote} votedIds={votedIds} />
-      </div>
-    </div>
-  )
-}

package/packages/react/src/pages/FeedbackWidgetPage.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import type { FeedbackType } from '@geenius-feedback/shared'
-import { FeedbackWidget } from '../components/FeedbackWidget'
-
-export function FeedbackWidgetPage({ onSubmit }: { onSubmit: (data: { type: FeedbackType; title: string; description: string }) => Promise<string> }) {
-  return (
-    <div className="min-h-screen bg-[#090a0f] text-white flex items-center justify-center">
-      <div className="text-center max-w-md">
-        <h1 className="text-2xl font-bold mb-2">Feedback Widget</h1>
-        <p className="text-sm text-white/40 mb-8">Click the floating "Feedback" tab on the right edge to open the feedback form.</p>
-        <div className="rounded-xl border border-white/8 bg-white/[0.02] p-6 text-left">
-          <h3 className="text-sm font-semibold text-white/80 mb-3">Features</h3>
-          <ul className="space-y-2 text-xs text-white/50">
-            <li className="flex items-center gap-2"><span className="text-emerald-400">✓</span> Floating edge tab trigger</li>
-            <li className="flex items-center gap-2"><span className="text-emerald-400">✓</span> Type selector (Bug/Feature/Suggestion/General)</li>
-            <li className="flex items-center gap-2"><span className="text-emerald-400">✓</span> Title + description form with validation</li>
-            <li className="flex items-center gap-2"><span className="text-emerald-400">✓</span> Auto-captures page URL + browser</li>
-            <li className="flex items-center gap-2"><span className="text-emerald-400">✓</span> Success confirmation</li>
-          </ul>
-        </div>
-      </div>
-      <FeedbackWidget onSubmit={onSubmit} />
-    </div>
-  )
-}

package/packages/react/src/pages/index.ts

@@ -1,3 +0,0 @@
-export { FeedbackPublicPage } from './FeedbackPublicPage'
-export { FeedbackAdminPage } from './FeedbackAdminPage'
-export { FeedbackWidgetPage } from './FeedbackWidgetPage'

package/packages/react/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src",
-    "jsx": "react-jsx",
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler"
-  },
-  "include": [
-    "src"
-  ]
-}

package/packages/react/tsup.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
-    entry: { index: 'src/index.tsx' },
-    outDir: 'dist',
-    format: ['esm'],
-    dts: false,
-    sourcemap: true,
-    clean: true,
-    treeshake: true,
-    external: ['react', 'react-dom'],
-})