@geenius/feedback 0.1.0 → 0.3.0

package/packages/react-css/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "@geenius-feedback/react-css",
-  "version": "0.1.0",
-  "description": "Geenius Feedback — React components & hooks (vanilla CSS variant)",
-  "type": "module",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "restricted"
-  },
-  "main": "./src/index.tsx",
-  "types": "./src/index.tsx",
-  "exports": {
-    ".": "./src/index.tsx"
-  },
-  "scripts": {
-    "type-check": "tsc --noEmit"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
-  "dependencies": {
-    "@geenius-feedback/shared": "workspace:*"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.7",
-    "@types/react-dom": "^19.0.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "~6.0.2"
-  },
-  "author": "Antigravity HQ",
-  "engines": {
-    "node": ">=20.0.0"
-  }
-}

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

@@ -1,5 +0,0 @@
-// @geenius-feedback/react — src/components/index.ts
-
-export { FeedbackForm, type FeedbackFormProps } from './FeedbackForm'
-export { FeedbackWidget, type FeedbackWidgetProps } from './FeedbackWidget'
-export { FeedbackButton, type FeedbackButtonProps } from './FeedbackButton'

package/packages/react-css/src/components/index.tsx

@@ -1,107 +0,0 @@
-import React, { useState } from 'react'
-import type { FeedbackItem, FeedbackType, FeedbackStatus, FeedbackPriority, NPSResponse } from '@geenius-feedback/shared'
-import { STATUS_CONFIG, PRIORITY_CONFIG, TYPE_CONFIG, FEEDBACK_TYPES, formatRelativeTime, calcNPSStats, getNPSCategory } from '@geenius-feedback/shared'
-import type { RuleOperator } from '@geenius-feedback/shared'
-
-export function StatusBadge({ status }: { status: FeedbackStatus }) {
-  return <span className={`feedback__status-badge feedback__status-badge--${status}`}>{STATUS_CONFIG[status].emoji} {STATUS_CONFIG[status].label}</span>
-}
-
-export function PriorityBadge({ priority }: { priority: FeedbackPriority }) {
-  return <span className={`feedback__priority-badge feedback__priority-badge--${priority}`}>{PRIORITY_CONFIG[priority].label}</span>
-}
-
-export function TypeBadge({ type }: { type: FeedbackType }) {
-  return <span className={`feedback__type-badge feedback__type-badge--${type}`}>{TYPE_CONFIG[type].icon} {TYPE_CONFIG[type].label}</span>
-}
-
-export function FeedbackCard({ item, onVote, hasVoted, onClick }: { item: FeedbackItem; onVote?: (id: string) => void; hasVoted?: boolean; onClick?: (id: string) => void }) {
-  return (
-    <div className={`feedback__card feedback__card--${item.type}`} onClick={() => onClick?.(item.id)}>
-      {onVote && (
-        <button type="button" className={`feedback__vote-btn ${hasVoted ? 'feedback__vote-btn--active' : 'feedback__vote-btn--inactive'}`} onClick={e => { e.stopPropagation(); onVote(item.id) }}>
-          <span className="feedback__vote-btn-arrow">{hasVoted ? '▲' : '△'}</span>
-          <span>{item.votes}</span>
-        </button>
-      )}
-      <div className="feedback__card-info">
-        <div className="feedback__card-badges"><TypeBadge type={item.type} /><StatusBadge status={item.status} /><PriorityBadge priority={item.priority} /></div>
-        <div className="feedback__card-title">{item.title}</div>
-        <div className="feedback__card-desc">{item.description}</div>
-        <div className="feedback__card-meta">{item.userName && <span>{item.userName}</span>}<span>{formatRelativeTime(item.createdAt)}</span>{item.tags.map(t => <span key={t} className="feedback__tag">{t}</span>)}</div>
-      </div>
-    </div>
-  )
-}
-
-export function FeedbackTypeSelector({ value, onChange }: { value: FeedbackType; onChange: (t: FeedbackType) => void }) {
-  return (
-    <div className="feedback__type-selector">
-      {FEEDBACK_TYPES.map(t => <button key={t} type="button" onClick={() => onChange(t)}
-        className={`feedback__type-tab ${value === t ? '' : 'feedback__type-tab--inactive'}`}
-        style={value === t ? { background: TYPE_CONFIG[t].color, color: 'white' } : undefined}>{TYPE_CONFIG[t].icon} {TYPE_CONFIG[t].label}</button>)}
-    </div>
-  )
-}
-
-export function FeedbackForm({ onSubmit, onClose }: { onSubmit: (data: { type: FeedbackType; title: string; description: string }) => Promise<string>; onClose?: () => void }) {
-  const [type, setType] = useState<FeedbackType>('general')
-  const [title, setTitle] = useState(''); const [desc, setDesc] = useState('')
-  const [submitting, setSubmitting] = useState(false); const [error, setError] = useState<string | null>(null); const [success, setSuccess] = useState(false)
-  const submit = async () => {
-    if (!title.trim()) { setError('Title required'); return }; if (desc.length < 10) { setError('10+ chars'); return }
-    setSubmitting(true); setError(null); try { await onSubmit({ type, title, description: desc }); setSuccess(true) } catch (e) { setError(String(e)) } finally { setSubmitting(false) }
-  }
-  if (success) return <div className="feedback__success"><div className="feedback__success-icon">🎉</div><div className="feedback__success-text">Thank you!</div><div className="feedback__success-sub">Feedback submitted</div></div>
-  return (
-    <div className="feedback__form">
-      <FeedbackTypeSelector value={type} onChange={setType} />
-      <input type="text" className="feedback__form-input" placeholder="Title…" value={title} onChange={e => setTitle(e.target.value)} />
-      <textarea className="feedback__form-input feedback__form-textarea" placeholder="Description…" value={desc} onChange={e => setDesc(e.target.value)} />
-      {error && <div className="feedback__form-error">{error}</div>}
-      <div className="feedback__form-actions">
-        {onClose && <button type="button" className="feedback__btn feedback__btn--outline" onClick={onClose}>Cancel</button>}
-        <button type="button" className="feedback__btn feedback__btn--primary" onClick={submit} disabled={submitting}>{submitting ? 'Submitting…' : 'Submit'}</button>
-      </div>
-    </div>
-  )
-}
-
-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 (<>
-    <button type="button" className="feedback__widget-trigger" onClick={() => setIsOpen(true)}>Feedback</button>
-    {isOpen && <div className="feedback__widget-overlay" onClick={() => setIsOpen(false)}>
-      <div className="feedback__widget-backdrop" />
-      <div className="feedback__widget-panel" onClick={e => e.stopPropagation()}>
-        <div className="feedback__widget-header"><span className="feedback__widget-title">Send Feedback</span><button type="button" className="feedback__close-btn" onClick={() => setIsOpen(false)}>✕</button></div>
-        <FeedbackForm onSubmit={onSubmit} onClose={() => setIsOpen(false)} />
-      </div>
-    </div>}
-  </>)
-}
-
-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')
-  return (
-    <div className="feedback__nps">
-      {step === 'score' && <div><div className="feedback__nps-header"><span className="feedback__nps-title">How likely to recommend us?</span><button type="button" className="feedback__close-btn" onClick={onDismiss}>✕</button></div><div className="feedback__nps-subtitle">0 = Not at all · 10 = Extremely likely</div>
-        <div className="feedback__nps-scores">{Array.from({length:11}).map((_,i) => <button key={i} type="button" className="feedback__nps-score-btn" onClick={() => { setScore(i); setStep('comment') }}>{i}</button>)}</div><div className="feedback__nps-labels"><span>Not likely</span><span>Very likely</span></div></div>}
-      {step === 'comment' && <div><div className="feedback__nps-title" style={{marginBottom: '0.75rem'}}>Score: {score}</div><textarea className="feedback__form-input feedback__form-textarea" value={comment} onChange={e => setComment(e.target.value)} placeholder="Optional…" /><button type="button" className="feedback__btn feedback__btn--primary" style={{width:'100%',marginTop:'0.75rem'}} onClick={() => { onSubmit(score!, comment||undefined); setStep('thanks') }}>Submit</button></div>}
-      {step === 'thanks' && <div className="feedback__success"><div className="feedback__success-icon">🎉</div><div className="feedback__success-text">Thank you!</div></div>}
-    </div>
-  )
-}
-
-export function NPSResults({ responses }: { responses: NPSResponse[] }) {
-  const stats = calcNPSStats(responses); const total = stats.totalResponses || 1
-  const color = stats.npsScore >= 50 ? 'oklch(0.72 0.18 155)' : stats.npsScore >= 0 ? 'oklch(0.72 0.18 60)' : 'oklch(0.60 0.25 25)'
-  return (
-    <div className="feedback__nps-results">
-      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'0.5rem'}}><span>NPS Score</span><span className="feedback__nps-results-score" style={{color}}>{stats.npsScore}</span></div>
-      <div className="feedback__nps-bar"><div className="feedback__nps-bar-detractors" style={{width:`${(stats.detractors/total)*100}%`}} /><div className="feedback__nps-bar-passives" style={{width:`${(stats.passives/total)*100}%`}} /><div className="feedback__nps-bar-promoters" style={{width:`${(stats.promoters/total)*100}%`}} /></div>
-      <div className="feedback__nps-breakdown"><div><span style={{color:'oklch(0.60 0.25 25)',fontWeight:700}}>{stats.detractors}</span><br/><span style={{color:'oklch(1 0 0/0.3)'}}>Detractors</span></div><div><span style={{color:'oklch(0.72 0.18 60)',fontWeight:700}}>{stats.passives}</span><br/><span style={{color:'oklch(1 0 0/0.3)'}}>Passives</span></div><div><span style={{color:'oklch(0.72 0.18 155)',fontWeight:700}}>{stats.promoters}</span><br/><span style={{color:'oklch(1 0 0/0.3)'}}>Promoters</span></div></div>
-      <div style={{marginTop:'0.75rem',paddingTop:'0.75rem',borderTop:'1px solid oklch(1 0 0/0.05)',display:'flex',justifyContent:'space-between',fontSize:'0.6875rem',color:'oklch(1 0 0/0.4)'}}><span>Avg: {stats.averageScore}/10</span><span>{stats.totalResponses} responses</span></div>
-    </div>
-  )
-}

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

@@ -1,2 +0,0 @@
-export { useFeedback, useFeedbackForm, useNPS, useFeedbackAdmin } from '@geenius-feedback/react'
-export type { FeedbackFilter } from '@geenius-feedback/react'

package/packages/react-css/src/index.tsx

@@ -1,5 +0,0 @@
-export { useFeedback, useFeedbackForm, useNPS, useFeedbackAdmin } from './hooks'
-export type { FeedbackFilter } from './hooks'
-export { StatusBadge, PriorityBadge, TypeBadge, FeedbackCard, FeedbackTypeSelector, FeedbackForm, FeedbackWidget, NPSSurvey, NPSResults } from './components'
-import './styles.css'
-export type { FeedbackItem, NPSResponse, FeedbackConfig, FeedbackStats, NPSStats, FeedbackType, FeedbackStatus, FeedbackPriority } from '@geenius-feedback/shared'

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

@@ -1,112 +0,0 @@
-import React from 'react';
-import '../styles.css';
-
-const FeedbackAdminPage: React.FC = () => {
-  return (
-    <div style={{ padding: '1.5rem' }}>
-      <div className="feedback__breadcrumb">
-        <span className="feedback__breadcrumb-item">Feedback</span>
-        <span className="feedback__breadcrumb-sep">/</span>
-        <span className="feedback__breadcrumb-item--active">Admin</span>
-      </div>
-
-      <div className="feedback__stats-grid">
-        <div className="feedback__stat-card">
-          <div className="feedback__stat-icon">📊</div>
-          <div className="feedback__stat-value">7.8</div>
-          <div className="feedback__stat-label">NPS Score</div>
-        </div>
-        <div className="feedback__stat-card">
-          <div className="feedback__stat-icon">⭐</div>
-          <div className="feedback__stat-value">4.2</div>
-          <div className="feedback__stat-label">Avg Rating</div>
-        </div>
-        <div className="feedback__stat-card">
-          <div className="feedback__stat-icon">⏱️</div>
-          <div className="feedback__stat-value">2.1h</div>
-          <div className="feedback__stat-label">Avg Response</div>
-        </div>
-      </div>
-
-      <div className="feedback__filter-panel">
-        <div className="feedback__filter-section">
-          <div className="feedback__filter-section-title">Status</div>
-          <div className="feedback__filter-options">
-            <label className="feedback__filter-option">
-              <input type="checkbox" defaultChecked />
-              <span className="feedback__filter-option-label">Open</span>
-            </label>
-            <label className="feedback__filter-option">
-              <input type="checkbox" defaultChecked />
-              <span className="feedback__filter-option-label">Under Review</span>
-            </label>
-            <label className="feedback__filter-option">
-              <input type="checkbox" defaultChecked />
-              <span className="feedback__filter-option-label">Planned</span>
-            </label>
-          </div>
-        </div>
-        <div className="feedback__filter-section">
-          <div className="feedback__filter-section-title">Priority</div>
-          <div className="feedback__filter-options">
-            <label className="feedback__filter-option">
-              <input type="checkbox" defaultChecked />
-              <span className="feedback__filter-option-label">Critical</span>
-            </label>
-            <label className="feedback__filter-option">
-              <input type="checkbox" defaultChecked />
-              <span className="feedback__filter-option-label">High</span>
-            </label>
-            <label className="feedback__filter-option">
-              <input type="checkbox" />
-              <span className="feedback__filter-option-label">Low</span>
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <div style={{ marginTop: '2rem' }}>
-        <h3 style={{ fontSize: '0.875rem', fontWeight: '600', marginBottom: '1rem', color: 'oklch(1 0 0 / 0.8)' }}>
-          Recent Activity
-        </h3>
-        <table className="feedback__admin-table">
-          <thead>
-            <tr>
-              <th>Item</th>
-              <th>Status</th>
-              <th>Priority</th>
-              <th>Votes</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Add Dark Mode</td>
-              <td>
-                <select className="feedback__admin-select">
-                  <option>In Progress</option>
-                  <option>Planned</option>
-                  <option>Open</option>
-                </select>
-              </td>
-              <td>High</td>
-              <td>42</td>
-            </tr>
-            <tr>
-              <td>Login Timeout Issue</td>
-              <td>
-                <select className="feedback__admin-select">
-                  <option>Open</option>
-                  <option>In Progress</option>
-                </select>
-              </td>
-              <td>Critical</td>
-              <td>12</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};
-
-export default FeedbackAdminPage;

package/packages/react-css/src/pages/FeedbackPage.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import '../styles.css';
-
-const FeedbackPage: React.FC = () => {
-  const feedbackItems = [
-    { id: 1, title: 'Add Dark Mode', type: 'feature', status: 'in-progress', votes: 42, priority: 'high' },
-    { id: 2, title: 'Bug: Login timeout issue', type: 'bug', status: 'open', votes: 12, priority: 'critical' },
-    { id: 3, title: 'Improve API documentation', type: 'suggestion', status: 'planned', votes: 28, priority: 'medium' },
-  ];
-
-  return (
-    <div style={{ padding: '1.5rem' }}>
-      <div className="feedback__breadcrumb">
-        <span className="feedback__breadcrumb-item">Feedback</span>
-        <span className="feedback__breadcrumb-sep">/</span>
-        <span className="feedback__breadcrumb-item--active">View All</span>
-      </div>
-
-      <div className="feedback__stats-grid">
-        <div className="feedback__stat-card">
-          <div className="feedback__stat-icon">💬</div>
-          <div className="feedback__stat-value">145</div>
-          <div className="feedback__stat-label">Total Feedback</div>
-        </div>
-        <div className="feedback__stat-card">
-          <div className="feedback__stat-icon">👍</div>
-          <div className="feedback__stat-value">89</div>
-          <div className="feedback__stat-label">In Progress</div>
-        </div>
-        <div className="feedback__stat-card">
-          <div className="feedback__stat-icon">✅</div>
-          <div className="feedback__stat-value">34</div>
-          <div className="feedback__stat-label">Implemented</div>
-        </div>
-      </div>
-
-      <div className="feedback__filter-tabs" style={{ marginBottom: '1.5rem' }}>
-        <button className="feedback__filter-tab feedback__filter-tab--active">All</button>
-        <button className="feedback__filter-tab feedback__filter-tab--inactive">Features</button>
-        <button className="feedback__filter-tab feedback__filter-tab--inactive">Bugs</button>
-        <button className="feedback__filter-tab feedback__filter-tab--inactive">Suggestions</button>
-      </div>
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-        {feedbackItems.map(item => (
-          <div key={item.id} className={`feedback__card feedback__card--${item.type}`}>
-            <div className="feedback__vote-btn feedback__vote-btn--inactive">
-              <span className="feedback__vote-btn-arrow">▲</span>
-              <span>{item.votes}</span>
-            </div>
-            <div className="feedback__card-info">
-              <div className="feedback__card-badges">
-                <span className={`feedback__type-badge feedback__type-badge--${item.type}`}>{item.type}</span>
-                <span className={`feedback__status-badge feedback__status-badge--${item.status}`}>{item.status}</span>
-                <span className="feedback__priority-badge feedback__priority-badge--high">{item.priority}</span>
-              </div>
-              <div className="feedback__card-title">{item.title}</div>
-              <div className="feedback__card-meta">
-                <span>Posted by user</span>
-                <span>2 days ago</span>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="feedback__pagination">
-        <button className="feedback__pagination-btn">Previous</button>
-        <span className="feedback__pagination-info">Page 1 of 5</span>
-        <button className="feedback__pagination-btn">Next</button>
-      </div>
-    </div>
-  );
-};
-
-export default FeedbackPage;