@geenius/tools 0.1.0

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

@@ -0,0 +1,242 @@
+// @geenius-tools/devtools-react — src/components/DevToolbar.tsx
+
+import { memo, useState, useRef, useEffect } from 'react'
+import { cn } from '@geenius-ui/react'
+import {
+    Power,
+    PanelRight,
+    Bug,
+    Lightbulb,
+    Target,
+    Activity,
+} from 'lucide-react'
+import { useDevModeOptional, useIsDevAllowed } from '../context/DevModeContext'
+import { usePerformanceContextOptional } from '../context/PerformanceContext'
+import { GitHubIssueDialog } from './GitHubIssueDialog'
+import { PerformancePanel } from './PerformancePanel'
+
+interface ToolbarButtonProps {
+    icon: React.ReactNode
+    label: string
+    onClick?: () => void
+    active?: boolean
+    variant?: 'default' | 'primary' | 'success' | 'danger'
+    showLabel?: boolean
+    disabled?: boolean
+}
+
+const ToolbarButton = memo(function ToolbarButton({
+    icon,
+    label,
+    onClick,
+    active = false,
+    variant = 'default',
+    showLabel = true,
+    disabled = false,
+}: ToolbarButtonProps) {
+    const variantStyles = {
+        default: active
+            ? 'bg-white/20 text-white'
+            : 'text-white/70 hover:text-white hover:bg-white/10',
+        primary: active
+            ? 'bg-primary/30 text-primary-foreground'
+            : 'text-white/70 hover:text-primary hover:bg-primary/10',
+        success: 'text-white/70 hover:text-emerald-400 hover:bg-emerald-500/10',
+        danger: 'text-white/70 hover:text-red-400 hover:bg-red-500/10',
+    }
+
+    const content = (
+        <>
+            {icon}
+            {showLabel && (
+                <span className="hidden sm:inline text-xs font-medium">{label}</span>
+            )}
+        </>
+    )
+
+    const className = cn(
+        'flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200',
+        'focus:outline-none focus:ring-2 focus:ring-white/20',
+        disabled
+            ? 'opacity-40 cursor-not-allowed text-white'
+            : variantStyles[variant],
+    )
+
+    return (
+        <button
+            type="button"
+            onClick={disabled ? undefined : onClick}
+            className={cn(className, !disabled && 'cursor-pointer')}
+            title={label}
+            disabled={disabled}
+        >
+            {content}
+        </button>
+    )
+})
+
+interface ExpandableSectionProps {
+    show: boolean
+    children: React.ReactNode
+}
+
+const ExpandableSection = memo(function ExpandableSection({
+    show,
+    children,
+}: ExpandableSectionProps) {
+    const contentRef = useRef<HTMLDivElement>(null)
+    const [width, setWidth] = useState(0)
+
+    useEffect(() => {
+        if (contentRef.current) {
+            setWidth(show ? contentRef.current.scrollWidth : 0)
+        }
+    }, [show, children])
+
+    return (
+        <div
+            className="overflow-hidden transition-all duration-300 ease-out"
+            style={{ width: show ? width : 0, opacity: show ? 1 : 0 }}
+        >
+            <div
+                ref={contentRef}
+                className={cn(
+                    'flex items-center gap-1 whitespace-nowrap',
+                    'transition-transform duration-300 ease-out',
+                    show ? 'translate-x-0' : '-translate-x-2',
+                )}
+            >
+                {children}
+            </div>
+        </div>
+    )
+})
+
+export interface DevToolbarProps {
+    /** Whether dev tools are allowed. Default: auto-detects from env */
+    isAllowed?: boolean
+}
+
+export const DevToolbar = memo(function DevToolbar({
+    isAllowed,
+}: DevToolbarProps = {}) {
+    const isDevAllowed = useIsDevAllowed(isAllowed)
+    const devMode = useDevModeOptional()
+    const performanceContext = usePerformanceContextOptional()
+
+    const [isReady, setIsReady] = useState(false)
+    useEffect(() => {
+        const timer = setTimeout(() => setIsReady(true), 1000)
+        return () => clearTimeout(timer)
+    }, [])
+
+    if (!isDevAllowed || !devMode) return null
+
+    const {
+        isDevMode,
+        isSidebarOpen,
+        toggleDevMode,
+        toggleSidebar,
+        openIssueDialog,
+        issueDialog,
+        closeIssueDialog,
+    } = devMode
+
+    const showContent = isDevMode && isReady
+
+    return (
+        <>
+            {/* Floating Toolbar */}
+            <div
+                data-dev-tool="true"
+                className={cn(
+                    'fixed bottom-4 left-1/2 -translate-x-1/2 z-50',
+                    'flex items-center px-2 py-1',
+                    showContent ? 'gap-2' : 'gap-0',
+                    'rounded-2xl border border-white/10',
+                    'bg-gradient-to-r from-slate-900/95 via-slate-800/95 to-slate-900/95',
+                    'backdrop-blur-xl shadow-2xl shadow-black/50',
+                    'transition-all duration-300 ease-out',
+                )}
+            >
+                {/* Power / Toggle Dev Mode */}
+                <ToolbarButton
+                    icon={<Power className="w-4 h-4" />}
+                    label={isDevMode ? 'Dev Mode On' : 'Dev Mode Off'}
+                    onClick={toggleDevMode}
+                    active={isDevMode}
+                    variant={isDevMode ? 'primary' : 'default'}
+                />
+
+                <ExpandableSection show={showContent}>
+                    {/* Separator */}
+                    <div className="shrink-0 w-px h-6 bg-white/20 mx-1 my-2" />
+
+                    {/* Inspector Mode Toggle */}
+                    <ToolbarButton
+                        icon={<Target className="w-4 h-4" />}
+                        label="Inspector"
+                        onClick={devMode.toggleInspector}
+                        active={devMode.isInspectorMode}
+                        variant={devMode.isInspectorMode ? 'primary' : 'default'}
+                    />
+
+                    {/* Performance Monitor Toggle */}
+                    {performanceContext && (
+                        <ToolbarButton
+                            icon={<Activity className="w-4 h-4" />}
+                            label="Perf"
+                            onClick={performanceContext.togglePerformancePanel}
+                            active={performanceContext.isPerformancePanelOpen}
+                            variant={
+                                performanceContext.isPerformancePanelOpen
+                                    ? 'primary'
+                                    : 'default'
+                            }
+                        />
+                    )}
+
+                    {/* Sidebar Toggle (Desktop only) */}
+                    <div className="hidden md:block">
+                        <ToolbarButton
+                            icon={<PanelRight className="w-4 h-4" />}
+                            label="Issues"
+                            onClick={toggleSidebar}
+                            active={isSidebarOpen}
+                        />
+                    </div>
+
+                    {/* Create Bug */}
+                    <ToolbarButton
+                        icon={<Bug className="w-4 h-4" />}
+                        label="Bug"
+                        onClick={() => openIssueDialog('bug')}
+                        variant="danger"
+                    />
+
+                    {/* Create Feature */}
+                    <ToolbarButton
+                        icon={<Lightbulb className="w-4 h-4" />}
+                        label="Feature"
+                        onClick={() => openIssueDialog('feature')}
+                        variant="success"
+                    />
+                </ExpandableSection>
+            </div>
+
+            {/* Performance Panel */}
+            {performanceContext && <PerformancePanel />}
+
+            {/* Issue Dialog */}
+            <div data-dev-tool="true">
+                <GitHubIssueDialog
+                    open={issueDialog.isOpen}
+                    onOpenChange={(open) => !open && closeIssueDialog()}
+                    initialType={issueDialog.type}
+                    initialDescription={issueDialog.initialDescription}
+                    componentDetails={issueDialog.componentDetails}
+                />
+            </div>
+        </>
+    )
+})

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

@@ -0,0 +1,402 @@
+// @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>
+    )
+})