@geenius/tools 0.1.0 → 0.3.0

package/packages/devtools/react/src/components/GitHubIssueDialog.tsx

@@ -1,402 +0,0 @@
-// @geenius-tools/devtools-react — src/components/GitHubIssueDialog.tsx
-
-import { useState, useCallback, useEffect, memo, useRef } from 'react'
-import { cn } from '@geenius-ui/react'
-import {
-    Bug,
-    Lightbulb,
-    ExternalLink,
-    AlertCircle,
-    CheckCircle2,
-    Github,
-    Component,
-} from 'lucide-react'
-import type { ComponentDetails } from '../context/DevModeContext'
-import { useGitHubLabels } from '../hooks/useGitHubLabels'
-import {
-    createGitHubIssue,
-    isGitHubConfigured,
-    type CreateIssueResponse,
-} from '../services/github-service'
-
-type IssueType = 'bug' | 'feature'
-
-interface FormState {
-    type: IssueType
-    title: string
-    description: string
-    selectedLabel: string
-}
-
-const initialFormState: FormState = {
-    type: 'feature',
-    title: '',
-    description: '',
-    selectedLabel: '',
-}
-
-export interface GitHubIssueDialogProps {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    initialType?: IssueType
-    initialDescription?: string
-    componentDetails?: ComponentDetails[]
-}
-
-export const GitHubIssueDialog = memo(function GitHubIssueDialog({
-    open,
-    onOpenChange,
-    initialType = 'feature',
-    initialDescription = '',
-    componentDetails,
-}: GitHubIssueDialogProps) {
-    const [form, setForm] = useState<FormState>({
-        ...initialFormState,
-        type: initialType,
-        description: initialDescription,
-    })
-    const [loading, setLoading] = useState(false)
-    const [success, setSuccess] = useState<CreateIssueResponse | null>(null)
-    const [error, setError] = useState<string | null>(null)
-    const { data: labels } = useGitHubLabels()
-    const configured = isGitHubConfigured()
-    const dialogRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        if (open) {
-            setForm({
-                ...initialFormState,
-                type: initialType,
-                description: initialDescription,
-            })
-            setError(null)
-            setSuccess(null)
-        }
-    }, [open, initialType, initialDescription])
-
-    // Close on Escape
-    useEffect(() => {
-        if (!open) return
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Escape') onOpenChange(false)
-        }
-        window.addEventListener('keydown', handleKeyDown)
-        return () => window.removeEventListener('keydown', handleKeyDown)
-    }, [open, onOpenChange])
-
-    const handleSubmit = useCallback(async () => {
-        if (!form.title.trim()) {
-            setError('Please provide a title for the issue.')
-            return
-        }
-
-        setLoading(true)
-        setError(null)
-
-        try {
-            const typePrefix =
-                form.type === 'bug' ? '🐛 Bug Report' : '✨ Feature Request'
-
-            let componentSection = ''
-            if (componentDetails && componentDetails.length > 0) {
-                componentSection = `\n### Components\n${componentDetails
-                    .map((detail, index) => {
-                        let propsBlock = ''
-                        if (detail.props) {
-                            try {
-                                propsBlock = `\n- **Props:**\n\`\`\`json\n${JSON.stringify(detail.props, null, 2)}\n\`\`\``
-                            } catch {
-                                propsBlock = '\n- **Props:** (Complex Object)'
-                            }
-                        }
-                        return `
-**Component ${index + 1}**
-- **Name:** \`${detail.name}\`
-${detail.key ? `- **Key:** \`${detail.key}\`` : ''}
-${detail.file ? `- **File:** \`${detail.file}\`` : ''}
-- **Selector:** \`${detail.selector}\`${propsBlock}
-`
-                    })
-                    .join('\n')}`
-            }
-
-            const descriptionSection = form.description
-                ? `## Description\n${form.description}`
-                : ''
-
-            const timestamp = new Date().toISOString()
-            const theme =
-                typeof document !== 'undefined' &&
-                    document.documentElement.classList.contains('dark')
-                    ? 'dark'
-                    : 'light'
-            const viewport =
-                typeof window !== 'undefined'
-                    ? `${window.innerWidth}x${window.innerHeight}`
-                    : 'unknown'
-            const userAgent =
-                typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown'
-            const url =
-                typeof window !== 'undefined' ? window.location.href : 'unknown'
-
-            const contextSection = `
------
-**Context Information**
-- **URL:** ${url}
-- **Time:** ${timestamp}
-- **Theme:** ${theme}
-- **Viewport:** ${viewport}
-- **User Agent:** ${userAgent}
-`.trim()
-
-            const body = [
-                `# ${typePrefix}`,
-                '',
-                descriptionSection,
-                componentSection,
-                '',
-                contextSection,
-            ]
-                .filter(Boolean)
-                .join('\n')
-
-            const issueLabels: string[] = []
-            if (form.type === 'bug') issueLabels.push('bug')
-            if (form.type === 'feature') issueLabels.push('enhancement')
-            if (form.selectedLabel) issueLabels.push(form.selectedLabel)
-
-            const result = await createGitHubIssue({
-                title: `[${form.type === 'bug' ? 'Bug' : 'Feature'}] ${form.title}`,
-                body,
-                labels: issueLabels,
-            })
-
-            setSuccess(result)
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'An error occurred')
-        } finally {
-            setLoading(false)
-        }
-    }, [form, componentDetails])
-
-    const handleFieldChange = useCallback(
-        <K extends keyof FormState>(field: K, value: FormState[K]) => {
-            setForm((prev) => ({ ...prev, [field]: value }))
-            setError(null)
-        },
-        [],
-    )
-
-    if (!open) return null
-
-    return (
-        <div className="fixed inset-0 z-[10000] flex items-center justify-center" data-dev-tool="true">
-            {/* Backdrop */}
-            <div
-                className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-                onClick={() => onOpenChange(false)}
-            />
-
-            {/* Dialog */}
-            <div
-                ref={dialogRef}
-                className={cn(
-                    'relative z-10 w-full max-w-[500px] mx-4',
-                    'bg-gradient-to-br from-slate-900 to-slate-800',
-                    'border border-white/10 rounded-2xl shadow-2xl',
-                    'max-h-[90vh] overflow-y-auto',
-                    'animate-in fade-in zoom-in-95 duration-200',
-                )}
-            >
-                {/* Header */}
-                <div className="flex items-center gap-2 px-6 py-4 border-b border-white/10">
-                    <Github className="h-5 w-5 text-primary" />
-                    <h2 className="text-lg font-bold text-white">Create GitHub Issue</h2>
-                </div>
-
-                <div className="px-6 py-4">
-                    {!configured ? (
-                        <div className="py-6">
-                            <div className="text-center space-y-3">
-                                <div className="mx-auto w-12 h-12 rounded-full bg-yellow-500/10 flex items-center justify-center">
-                                    <AlertCircle className="h-6 w-6 text-yellow-500" />
-                                </div>
-                                <p className="text-sm text-white/60">
-                                    GitHub integration is not configured. Call{' '}
-                                    <code className="text-xs bg-white/10 px-1.5 py-0.5 rounded">
-                                        configureGitHub()
-                                    </code>{' '}
-                                    or set VITE_GITHUB_TOKEN to enable issue creation.
-                                </p>
-                            </div>
-                        </div>
-                    ) : success ? (
-                        <div className="py-6">
-                            <div className="text-center space-y-4">
-                                <CheckCircle2 className="mx-auto h-12 w-12 text-green-500" />
-                                <div>
-                                    <p className="font-medium text-white">Issue Created!</p>
-                                    <p className="text-sm text-white/60 mt-1">{success.title}</p>
-                                </div>
-                                <a
-                                    href={success.html_url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors"
-                                >
-                                    <ExternalLink className="h-4 w-4" />
-                                    View on GitHub
-                                </a>
-                            </div>
-                        </div>
-                    ) : (
-                        <div className="space-y-4 py-2">
-                            {/* Issue Type Selector */}
-                            <div className="grid grid-cols-2 gap-2">
-                                <button
-                                    type="button"
-                                    onClick={() => handleFieldChange('type', 'feature')}
-                                    className={cn(
-                                        'flex items-center gap-2 p-3 rounded-lg border-2 transition-all',
-                                        form.type === 'feature'
-                                            ? 'border-emerald-500 bg-emerald-500/10 text-emerald-400'
-                                            : 'border-white/10 text-white/60 hover:border-white/20',
-                                    )}
-                                >
-                                    <Lightbulb className="h-4 w-4" />
-                                    <span className="font-medium text-sm">Feature</span>
-                                </button>
-                                <button
-                                    type="button"
-                                    onClick={() => handleFieldChange('type', 'bug')}
-                                    className={cn(
-                                        'flex items-center gap-2 p-3 rounded-lg border-2 transition-all',
-                                        form.type === 'bug'
-                                            ? 'border-red-500 bg-red-500/10 text-red-400'
-                                            : 'border-white/10 text-white/60 hover:border-white/20',
-                                    )}
-                                >
-                                    <Bug className="h-4 w-4" />
-                                    <span className="font-medium text-sm">Bug Report</span>
-                                </button>
-                            </div>
-
-                            {/* Component Details */}
-                            {componentDetails && componentDetails.length > 0 && (
-                                <div className="p-3 rounded-lg bg-white/5 border border-white/10">
-                                    <div className="flex items-center gap-1.5 text-xs text-white/50 mb-2">
-                                        <Component className="h-3 w-3" />
-                                        <span>
-                                            {componentDetails.length} component
-                                            {componentDetails.length > 1 ? 's' : ''} attached
-                                        </span>
-                                    </div>
-                                    <div className="space-y-1">
-                                        {componentDetails.map((c, i) => (
-                                            <div key={i} className="text-xs font-mono text-white/80">
-                                                {c.name}
-                                                {c.key && (
-                                                    <span className="text-white/40 ml-1">
-                                                        key={c.key}
-                                                    </span>
-                                                )}
-                                            </div>
-                                        ))}
-                                    </div>
-                                </div>
-                            )}
-
-                            {/* Title */}
-                            <div>
-                                <label className="block text-xs font-medium text-white/60 mb-1">
-                                    Title
-                                </label>
-                                <input
-                                    type="text"
-                                    value={form.title}
-                                    onChange={(e) => handleFieldChange('title', e.target.value)}
-                                    placeholder={
-                                        form.type === 'bug'
-                                            ? 'Describe the bug...'
-                                            : 'Feature idea...'
-                                    }
-                                    className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-primary/50"
-                                    autoFocus
-                                />
-                            </div>
-
-                            {/* Description */}
-                            <div>
-                                <label className="block text-xs font-medium text-white/60 mb-1">
-                                    Description
-                                </label>
-                                <textarea
-                                    value={form.description}
-                                    onChange={(e) =>
-                                        handleFieldChange('description', e.target.value)
-                                    }
-                                    placeholder="Provide more details..."
-                                    rows={4}
-                                    className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none"
-                                />
-                            </div>
-
-                            {/* Label Selector */}
-                            {labels && labels.length > 0 && (
-                                <div>
-                                    <label className="block text-xs font-medium text-white/60 mb-1">
-                                        Label
-                                    </label>
-                                    <select
-                                        value={form.selectedLabel}
-                                        onChange={(e) =>
-                                            handleFieldChange('selectedLabel', e.target.value)
-                                        }
-                                        className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white focus:outline-none focus:ring-2 focus:ring-primary/50"
-                                    >
-                                        <option value="">No label</option>
-                                        {labels.map((label) => (
-                                            <option key={label.id} value={label.name}>
-                                                {label.name}
-                                            </option>
-                                        ))}
-                                    </select>
-                                </div>
-                            )}
-
-                            {/* Error */}
-                            {error && (
-                                <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
-                                    <AlertCircle className="h-4 w-4 text-red-400 flex-shrink-0" />
-                                    <p className="text-xs text-red-300">{error}</p>
-                                </div>
-                            )}
-
-                            {/* Actions */}
-                            <div className="flex justify-end gap-2 pt-2">
-                                <button
-                                    onClick={() => onOpenChange(false)}
-                                    className="px-4 py-2 text-sm text-white/60 hover:text-white transition-colors"
-                                >
-                                    Cancel
-                                </button>
-                                <button
-                                    onClick={handleSubmit}
-                                    disabled={loading || !form.title.trim()}
-                                    className={cn(
-                                        'px-4 py-2 text-sm font-medium rounded-lg transition-all',
-                                        loading || !form.title.trim()
-                                            ? 'bg-white/10 text-white/30 cursor-not-allowed'
-                                            : 'bg-primary text-white hover:bg-primary/80',
-                                    )}
-                                >
-                                    {loading ? 'Creating...' : 'Create Issue'}
-                                </button>
-                            </div>
-                        </div>
-                    )}
-                </div>
-            </div>
-        </div>
-    )
-})