@toolr/ui-design 0.1.0

package/components/sections/report-bug/report-bug-form.tsx

@@ -0,0 +1,282 @@
+/**
+ * ReportBugForm — Self-contained issue reporting form
+ *
+ * Part of: Sections > Report a Bug
+ *
+ * This is the main "drop in and it works" component. Provide configuration
+ * (worker URL, system info function, Linear team) and it handles the full
+ * submission flow including screenshots, error logs, and status feedback.
+ *
+ * Usage:
+ *   <ReportBugForm
+ *     workerUrl="https://your-worker.workers.dev"
+ *     getSystemInfo={getSystemInfo}
+ *     linearTeamId="your-team-uuid"
+ *     onSuccess={(result) => showToast(`Created ${result.issueId}`)}
+ *     onError={(msg) => showToast(msg, 'error')}
+ *   />
+ *
+ * AI agent notes:
+ * - This component manages all form state internally via useReportBug hook
+ * - It renders: issue type pills, title/description inputs, email, screenshot
+ *   uploader, optional "include logs" checkbox, and submit/cancel buttons
+ * - Error data (errorReport, errorCount, warnCount) is optional — when provided,
+ *   a checkbox lets the user include captured logs with their submission
+ * - The submitFn prop overrides the default API call for testing/mocking
+ * - Consuming apps handle success/error feedback via callbacks (modals, toasts, etc.)
+ * - Uses ui-design components (Input, ResizableTextarea, Checkbox) for consistency
+ */
+
+import { Loader2, Send } from 'lucide-react'
+import { cn } from '../../lib/cn.ts'
+import { Input } from '../../ui/input.tsx'
+import { ResizableTextarea } from '../../ui/resizable-textarea.tsx'
+import { Checkbox } from '../../ui/checkbox.tsx'
+import { ScreenshotUploader } from './screenshot-uploader.tsx'
+import { useReportBug, type UseReportBugOptions } from './use-report-bug.ts'
+import { ISSUE_TYPES, type IssueType, type IssueReport, type IssueReportResult, type SystemInfo } from './issue-reporter-api.ts'
+import type { TrackedError } from './error-logger.ts'
+
+export interface ReportBugFormProps {
+  /** URL of the issue reporter worker endpoint */
+  workerUrl: string
+  /** Function that returns system info. Each app provides its own implementation. */
+  getSystemInfo: () => Promise<SystemInfo>
+  /** Linear team ID — routes issues to the correct team */
+  linearTeamId?: string
+  /** Linear project ID — associates issues with a project */
+  linearProjectId?: string
+  /** Pre-formatted error report to optionally include (from error logger) */
+  errorReport?: string
+  /** Error fingerprint for duplicate detection */
+  errorFingerprint?: string
+  /** Number of captured errors (shown in checkbox label) */
+  errorCount?: number
+  /** Number of captured warnings */
+  warnCount?: number
+  /** Captured error entries to display when "include logs" is checked */
+  capturedErrors?: TrackedError[]
+  /** Called after successful submission */
+  onSuccess?: (result: IssueReportResult) => void
+  /** Called on submission failure */
+  onError?: (message: string) => void
+  /** Called when user clicks cancel (hidden if not provided) */
+  onCancel?: () => void
+  /** Called when error logs are included in a successful submission */
+  onErrorsSubmitted?: () => void
+  /** Override default API submission (for testing/mocking) */
+  submitFn?: (report: IssueReport) => Promise<IssueReportResult>
+  className?: string
+}
+
+export function ReportBugForm({
+  workerUrl,
+  getSystemInfo,
+  linearTeamId,
+  linearProjectId,
+  errorReport,
+  errorFingerprint,
+  errorCount,
+  warnCount,
+  capturedErrors,
+  onSuccess,
+  onError,
+  onCancel,
+  onErrorsSubmitted,
+  submitFn,
+  className,
+}: ReportBugFormProps) {
+  const hookOptions: UseReportBugOptions = {
+    workerUrl,
+    getSystemInfo,
+    linearTeamId,
+    linearProjectId,
+    errorReport,
+    errorFingerprint,
+    onSuccess,
+    onError,
+    onErrorsSubmitted,
+    submitFn,
+  }
+
+  const {
+    issueType,
+    setIssueType,
+    title,
+    setTitle,
+    description,
+    setDescription,
+    email,
+    setEmail,
+    screenshots,
+    setScreenshots,
+    includeLogs,
+    setIncludeLogs,
+    isSubmitting,
+    submissionStatus,
+    emailHasError,
+    canSubmit,
+    handleSubmit,
+  } = useReportBug(hookOptions)
+
+  const hasErrors = (errorCount ?? 0) > 0 || (warnCount ?? 0) > 0
+
+  return (
+    <div className={cn('rounded-lg border border-neutral-700 bg-neutral-800', className)}>
+      <div className="border-b border-neutral-700 px-4 py-3">
+        <h3 className="text-sm font-medium text-neutral-200">Report a Bug</h3>
+      </div>
+
+      <div className="space-y-4 p-4">
+        {/* Issue type pills */}
+        <div>
+          <label className="mb-2 block text-xs text-neutral-400">Issue Type</label>
+          <div className="flex flex-wrap gap-2">
+            {ISSUE_TYPES.map((type) => (
+              <button
+                key={type.value}
+                type="button"
+                onClick={() => setIssueType(type.value as IssueType)}
+                className={cn(
+                  'px-3 py-1.5 text-xs font-medium rounded-md transition-all',
+                  issueType === type.value
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-neutral-700 text-neutral-400 hover:bg-neutral-600 hover:text-neutral-200',
+                )}
+              >
+                {type.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Title */}
+        <div>
+          <label className="mb-1.5 block text-xs text-neutral-400">
+            Title <span className="text-red-400">*</span>
+          </label>
+          <Input
+            value={title}
+            onChange={setTitle}
+            placeholder="Brief summary of the issue"
+            size="md"
+          />
+        </div>
+
+        {/* Description */}
+        <div>
+          <label className="mb-1.5 block text-xs text-neutral-400">
+            Description <span className="text-red-400">*</span>
+          </label>
+          <ResizableTextarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Describe the issue in detail. Include steps to reproduce if applicable."
+            rows={6}
+            className="w-full px-3 py-1.5 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none min-h-[120px]"
+          />
+        </div>
+
+        {/* Email */}
+        <div>
+          <label className="mb-1.5 block text-xs text-neutral-400">Email (optional)</label>
+          <Input
+            type="text"
+            value={email}
+            onChange={setEmail}
+            placeholder="Your email for follow-up"
+            error={emailHasError ? 'Please enter a valid email address' : undefined}
+            size="md"
+          />
+        </div>
+
+        {/* Screenshots */}
+        <div>
+          <label className="mb-2 block text-xs text-neutral-400">
+            Screenshots (optional, max 20MB total)
+          </label>
+          <ScreenshotUploader
+            screenshots={screenshots}
+            onChange={setScreenshots}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        {/* Include logs checkbox */}
+        {hasErrors && errorReport && (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2.5">
+              <Checkbox checked={includeLogs} onChange={setIncludeLogs} />
+              <span
+                className="text-sm text-neutral-400 cursor-pointer select-none"
+                onClick={() => setIncludeLogs(!includeLogs)}
+              >
+                Include error logs
+                {errorCount ? (
+                  <span className="text-orange-400 ml-1">
+                    ({errorCount} error{errorCount !== 1 ? 's' : ''} captured)
+                  </span>
+                ) : null}
+              </span>
+            </div>
+
+            {/* Captured errors list */}
+            {includeLogs && capturedErrors && capturedErrors.length > 0 && (
+              <div className="rounded-md border border-neutral-700 bg-neutral-900/50">
+                <div className="px-3 py-2 border-b border-neutral-700">
+                  <span className="text-xs font-medium text-neutral-400">Captured Errors</span>
+                </div>
+                <div className="max-h-[200px] overflow-y-auto divide-y divide-neutral-800">
+                  {capturedErrors.map((error) => (
+                    <div key={error.fingerprint} className="px-3 py-2 text-xs">
+                      <div className="flex items-start gap-2">
+                        {error.count > 1 && (
+                          <span className="shrink-0 text-orange-400 font-mono font-medium">
+                            ×{error.count}
+                          </span>
+                        )}
+                        <span className="text-neutral-300 break-all font-mono leading-relaxed">
+                          {error.firstMessage}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-end gap-2 border-t border-neutral-700 px-4 py-3">
+        {isSubmitting && submissionStatus && (
+          <span className="text-xs text-neutral-400 mr-auto">{submissionStatus}</span>
+        )}
+        {onCancel && (
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={isSubmitting}
+            className="rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-sm text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-200 disabled:opacity-50"
+          >
+            Cancel
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={handleSubmit}
+          disabled={!canSubmit}
+          className="flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {isSubmitting ? (
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+          ) : (
+            <Send className="w-3.5 h-3.5" />
+          )}
+          Submit
+        </button>
+      </div>
+    </div>
+  )
+}

package/components/sections/report-bug/screenshot-uploader.tsx

@@ -0,0 +1,228 @@
+/**
+ * ScreenshotUploader — Drag & drop multi-image upload
+ *
+ * Part of: Sections > Report a Bug
+ * Also usable standalone for any image upload scenario.
+ *
+ * Features:
+ * - Drag & drop or click to select images
+ * - Base64 encoding for API submission
+ * - Preview thumbnails in a 3-column grid
+ * - Total size limit enforcement (default 20MB)
+ * - Individual screenshot removal
+ *
+ * AI agent notes:
+ * - Fully controlled component: parent owns the screenshots array
+ * - Screenshot.data is base64 without the data URL prefix
+ * - The Screenshot type (with id, size) is for UI management;
+ *   ScreenshotAttachment (without id, size) is what gets sent to the API
+ * - Used by ReportBugForm but exported independently
+ */
+
+import { useCallback, useRef, useState } from 'react'
+import { ImagePlus, X, AlertCircle } from 'lucide-react'
+import { cn } from '../../lib/cn.ts'
+
+export interface Screenshot {
+  id: string
+  filename: string
+  data: string
+  contentType: string
+  size: number
+}
+
+export interface ScreenshotUploaderProps {
+  screenshots: Screenshot[]
+  onChange: (screenshots: Screenshot[]) => void
+  maxTotalSize?: number
+  disabled?: boolean
+  className?: string
+}
+
+const DEFAULT_MAX_SIZE = 20 * 1024 * 1024
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+export function ScreenshotUploader({
+  screenshots,
+  onChange,
+  maxTotalSize = DEFAULT_MAX_SIZE,
+  disabled = false,
+  className,
+}: ScreenshotUploaderProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const totalSize = screenshots.reduce((sum, s) => sum + s.size, 0)
+  const remainingSize = maxTotalSize - totalSize
+
+  const processFiles = useCallback(
+    async (files: FileList | File[]) => {
+      setError(null)
+      const imageFiles = Array.from(files).filter((f) => f.type.startsWith('image/'))
+      if (imageFiles.length === 0) {
+        setError('Please select image files only')
+        return
+      }
+
+      const newFilesSize = imageFiles.reduce((sum, f) => sum + f.size, 0)
+      if (totalSize + newFilesSize > maxTotalSize) {
+        setError(`Total size would exceed ${formatFileSize(maxTotalSize)} limit`)
+        return
+      }
+
+      const newScreenshots: Screenshot[] = await Promise.all(
+        imageFiles.map(
+          (file) =>
+            new Promise<Screenshot>((resolve, reject) => {
+              const reader = new FileReader()
+              reader.onload = () => {
+                const base64 = (reader.result as string).split(',')[1]
+                resolve({
+                  id: Math.random().toString(36).substring(2, 9),
+                  filename: file.name,
+                  data: base64,
+                  contentType: file.type,
+                  size: file.size,
+                })
+              }
+              reader.onerror = reject
+              reader.readAsDataURL(file)
+            }),
+        ),
+      )
+
+      onChange([...screenshots, ...newScreenshots])
+    },
+    [screenshots, onChange, totalSize, maxTotalSize],
+  )
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files.length > 0) processFiles(e.target.files)
+      e.target.value = ''
+    },
+    [processFiles],
+  )
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsDragging(false)
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) processFiles(e.dataTransfer.files)
+    },
+    [processFiles],
+  )
+
+  const removeScreenshot = useCallback(
+    (id: string) => {
+      onChange(screenshots.filter((s) => s.id !== id))
+      setError(null)
+    },
+    [screenshots, onChange],
+  )
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      <div
+        onClick={() => !disabled && fileInputRef.current?.click()}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={cn(
+          'relative flex flex-col items-center justify-center gap-2 p-4 border border-dashed rounded-lg transition-all cursor-pointer',
+          isDragging
+            ? 'border-blue-500 bg-blue-500/10'
+            : disabled
+              ? 'border-neutral-700 bg-neutral-900/50 cursor-not-allowed opacity-50'
+              : 'border-neutral-600 hover:border-neutral-500 hover:bg-neutral-800/30',
+        )}
+      >
+        <ImagePlus className={cn('w-6 h-6', isDragging ? 'text-blue-400' : 'text-neutral-500')} />
+        <div className="text-center">
+          <p className="text-sm text-neutral-400">
+            {isDragging ? 'Drop images here' : 'Click or drag images to attach'}
+          </p>
+          <p className="text-xs text-neutral-500 mt-1">
+            {formatFileSize(remainingSize)} remaining of {formatFileSize(maxTotalSize)}
+          </p>
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          onChange={handleFileSelect}
+          className="hidden"
+          disabled={disabled}
+        />
+      </div>
+
+      {error && (
+        <div className="flex items-center gap-2 text-sm text-red-400">
+          <AlertCircle className="w-4 h-4 flex-shrink-0" />
+          <span>{error}</span>
+        </div>
+      )}
+
+      {screenshots.length > 0 && (
+        <div className="grid grid-cols-3 gap-2">
+          {screenshots.map((s) => (
+            <div
+              key={s.id}
+              className="relative group aspect-video bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden"
+            >
+              <img
+                src={`data:${s.contentType};base64,${s.data}`}
+                alt={s.filename}
+                className="w-full h-full object-cover"
+              />
+              <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2">
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    removeScreenshot(s.id)
+                  }}
+                  disabled={disabled}
+                  className="self-end w-5 h-5 flex items-center justify-center rounded bg-red-500/80 hover:bg-red-500 text-white transition-colors"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+                <span className="text-xs text-white truncate">{s.filename}</span>
+              </div>
+              <div className="absolute bottom-1 right-1 px-1.5 py-0.5 bg-black/70 rounded text-xs text-neutral-400">
+                {formatFileSize(s.size)}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {screenshots.length > 0 && (
+        <div className="flex items-center justify-between text-xs text-neutral-500">
+          <span>{screenshots.length} image{screenshots.length !== 1 ? 's' : ''} attached</span>
+          <span>Total: {formatFileSize(totalSize)}</span>
+        </div>
+      )}
+    </div>
+  )
+}

package/components/sections/report-bug/use-report-bug.ts

@@ -0,0 +1,170 @@
+/**
+ * useReportBug — Form state and submission hook
+ *
+ * Part of: Sections > Report a Bug
+ *
+ * Manages all form state (issue type, title, description, email, screenshots,
+ * include-logs toggle) and the async submission flow with status updates.
+ *
+ * AI agent notes:
+ * - This hook is used internally by ReportBugForm but can also be used
+ *   standalone for custom form UIs
+ * - Uses callbacks (onSuccess/onError) instead of alert modals for flexibility
+ * - Error data (errorReport, errorFingerprint) comes as options, not from
+ *   an imported error logger — keeps the hook decoupled
+ * - The hook resets the form on successful submission
+ * - submitFn can override the default API call (useful for testing/mocking)
+ */
+
+import { useState, useCallback } from 'react'
+import {
+  submitIssueReport,
+  type IssueType,
+  type IssueReport,
+  type IssueReportResult,
+  type SystemInfo,
+  type ScreenshotAttachment,
+} from './issue-reporter-api.ts'
+import type { Screenshot } from './screenshot-uploader.tsx'
+
+export interface UseReportBugOptions {
+  /** Issue reporter worker endpoint URL */
+  workerUrl: string
+  /** Returns system info (OS, version, etc.) — each app provides its own */
+  getSystemInfo: () => Promise<SystemInfo>
+  /** Linear team to route issues to */
+  linearTeamId?: string
+  /** Linear project to associate issues with */
+  linearProjectId?: string
+  /** Pre-formatted error report string (from error logger or custom source) */
+  errorReport?: string
+  /** Combined error fingerprint for duplicate detection */
+  errorFingerprint?: string
+  /** Called after successful submission */
+  onSuccess?: (result: IssueReportResult) => void
+  /** Called on submission failure */
+  onError?: (message: string) => void
+  /** Called when error logs are included in a successful submission */
+  onErrorsSubmitted?: () => void
+  /** Override default API submission (useful for testing/mocking) */
+  submitFn?: (report: IssueReport) => Promise<IssueReportResult>
+}
+
+export interface UseReportBugReturn {
+  issueType: IssueType
+  setIssueType: (type: IssueType) => void
+  title: string
+  setTitle: (title: string) => void
+  description: string
+  setDescription: (desc: string) => void
+  email: string
+  setEmail: (email: string) => void
+  screenshots: Screenshot[]
+  setScreenshots: (screenshots: Screenshot[]) => void
+  includeLogs: boolean
+  setIncludeLogs: (include: boolean) => void
+  isSubmitting: boolean
+  submissionStatus: string
+  emailHasError: boolean
+  canSubmit: boolean
+  handleSubmit: () => Promise<void>
+}
+
+const isValidEmail = (email: string) => {
+  if (!email.trim()) return true
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+}
+
+export function useReportBug(options: UseReportBugOptions): UseReportBugReturn {
+  const [issueType, setIssueType] = useState<IssueType>('bug')
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [email, setEmail] = useState('')
+  const [screenshots, setScreenshots] = useState<Screenshot[]>([])
+  const [includeLogs, setIncludeLogs] = useState(true)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [submissionStatus, setSubmissionStatus] = useState('')
+
+  const emailHasError = email.trim() !== '' && !isValidEmail(email)
+  const canSubmit = !isSubmitting && !!title.trim() && !!description.trim() && !emailHasError
+
+  const handleSubmit = useCallback(async () => {
+    if (!title.trim() || !description.trim()) return
+
+    setIsSubmitting(true)
+    try {
+      setSubmissionStatus('Gathering system info...')
+      const systemInfo = await options.getSystemInfo()
+
+      const screenshotAttachments: ScreenshotAttachment[] = screenshots.map((s: Screenshot) => ({
+        filename: s.filename,
+        data: s.data,
+        contentType: s.contentType,
+      }))
+
+      if (screenshotAttachments.length > 0) {
+        setSubmissionStatus(
+          `Uploading ${screenshotAttachments.length} screenshot${screenshotAttachments.length > 1 ? 's' : ''}...`,
+        )
+      } else {
+        setSubmissionStatus('Submitting issue...')
+      }
+
+      const report: IssueReport = {
+        title: title.trim(),
+        description: description.trim(),
+        type: issueType,
+        systemInfo,
+        userEmail: email.trim() || undefined,
+        stackTrace: includeLogs ? options.errorReport : undefined,
+        errorFingerprint: includeLogs ? options.errorFingerprint : undefined,
+        screenshots: screenshotAttachments.length > 0 ? screenshotAttachments : undefined,
+        linearTeamId: options.linearTeamId,
+        linearProjectId: options.linearProjectId,
+      }
+
+      const submitFn = options.submitFn ?? ((r: IssueReport) => submitIssueReport(options.workerUrl, r))
+      const result = await submitFn(report)
+
+      if (result.success) {
+        if (includeLogs && options.errorReport) {
+          options.onErrorsSubmitted?.()
+        }
+        options.onSuccess?.(result)
+        setIssueType('bug')
+        setTitle('')
+        setDescription('')
+        setEmail('')
+        setScreenshots([])
+        setSubmissionStatus('')
+      } else {
+        options.onError?.(result.message)
+      }
+    } catch (error) {
+      options.onError?.(`An error occurred: ${error}`)
+    } finally {
+      setIsSubmitting(false)
+      setSubmissionStatus('')
+    }
+  }, [title, description, issueType, email, screenshots, includeLogs, options])
+
+  return {
+    issueType,
+    setIssueType,
+    title,
+    setTitle,
+    description,
+    setDescription,
+    email,
+    setEmail,
+    screenshots,
+    setScreenshots,
+    includeLogs,
+    setIncludeLogs,
+    isSubmitting,
+    submissionStatus,
+    emailHasError,
+    canSubmit,
+    handleSubmit,
+  }
+}