@geenius/tools 0.1.0

package/packages/devtools/solidjs/src/components/DevSidebar.tsx

@@ -0,0 +1,247 @@
+// @geenius-tools/devtools-solidjs — src/components/DevSidebar.tsx
+
+import { createSignal, createEffect, createMemo } from 'solid-js'
+import { cn } from '@geenius-ui/solid'
+import {
+    Bug,
+    Lightbulb,
+    ExternalLink,
+    Clock,
+    X,
+    RefreshCw,
+    Maximize2,
+    Minimize2,
+} from 'lucide-solid'
+import { createDevModeOptional } from '../context/DevModeContext'
+import {
+    getGitHubIssues,
+    getGitHubConfig,
+    getIssueType,
+    formatRelativeTime,
+    type GitHubIssueListItem,
+} from '../services/github-service'
+
+interface IssueCardProps {
+    issue: GitHubIssueListItem
+    expandedView: boolean
+}
+
+const IssueCard = memo(function IssueCard({
+    issue,
+    expandedView,
+}: IssueCardProps) {
+    const issueType = getIssueType(issue)
+
+    const linkedComponent = createMemo(() => {
+        if (!issue.body) return null
+        const match = issue.body.match(/\*\*Name:\*\*\s*`([^`]+)`/)
+        return match ? match[1] : null
+    }, [issue.body])
+
+    return (
+        <a
+            href={issue.html_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={cn(
+                'block p-3 rounded-lg border transition-all duration-200',
+                'hover:bg-white/5 hover:border-white/20',
+                'border-white/10 bg-white/[0.02]',
+            )}
+        >
+            <div class="flex items-start gap-3">
+                <div
+                    class={cn(
+                        'flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center',
+                        issueType === 'bug' && 'bg-red-500/10 text-red-500',
+                        issueType === 'feature' && 'bg-emerald-500/10 text-emerald-500',
+                        issueType === 'other' && 'bg-blue-500/10 text-blue-500',
+                    )}
+                >
+                    {issueType === 'bug' ? (
+                        <Bug class="w-4 h-4" />
+                    ) : (
+                        <Lightbulb class="w-4 h-4" />
+                    )}
+                </div>
+
+                <div class="flex-1 min-w-0">
+                    <p class="font-medium text-sm text-white line-clamp-2">
+                        {issue.title}
+                    </p>
+
+                    {linkedComponent && (
+                        <span class="inline-flex items-center gap-1 mt-1 text-[10px] px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-white/60">
+                            {linkedComponent}
+                        </span>
+                    )}
+
+                    <div class="flex items-center gap-3 mt-2 text-xs text-white/40">
+                        <span>#{issue.number}</span>
+                        <span class="flex items-center gap-1">
+                            <Clock class="w-3 h-3" />
+                            {formatRelativeTime(issue.updated_at)}
+                        </span>
+                    </div>
+
+                    {expandedView && issue.body && (
+                        <div class="mt-3 text-xs text-white/40 border-l-2 border-white/10 pl-2 line-clamp-6 whitespace-pre-line font-mono bg-white/[0.02] p-2 rounded-sm">
+                            {issue.body.substring(0, 300)}
+                            {issue.body.length > 300 ? '...' : ''}
+                        </div>
+                    )}
+                </div>
+                <ExternalLink class="w-4 h-4 text-white/30 flex-shrink-0" />
+            </div>
+        </a>
+    )
+})
+
+export const DevSidebar = memo(function DevSidebar() {
+    const devMode = createDevModeOptional()
+    const [issues, setIssues] = createSignal<GitHubIssueListItem[]>([])
+    const [loading, setLoading] = createSignal(false)
+    const [tab, setTab] = createSignal<'bugs' | 'features'>('bugs')
+    const [isExpanded, setIsExpanded] = createSignal(false)
+
+    const isSidebarOpen = devMode?.isSidebarOpen ?? false
+    const setSidebarOpen = devMode?.setSidebarOpen ?? (() => { })
+
+    createEffect(() => {
+        if (isSidebarOpen && issues.length === 0 && !loading) {
+            fetchIssues()
+        }
+    })
+
+    const fetchIssues = async () => {
+        setLoading(true)
+        try {
+            const result = await getGitHubIssues('all', 'open')
+            setIssues(result)
+        } catch {
+            // Silently fail
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const handleRefresh = () => fetchIssues()
+    const toggleExpand = () => setIsExpanded((prev) => !prev)
+
+    const { bugs, features } = createMemo(() => {
+        const bugs: GitHubIssueListItem[] = []
+        const features: GitHubIssueListItem[] = []
+
+        issues.forEach((issue) => {
+            const type = getIssueType(issue)
+            if (type === 'bug') bugs.push(issue)
+            else features.push(issue)
+        })
+
+        return { bugs, features }
+    })
+
+    const currentIssues = tab === 'bugs' ? bugs : features
+
+    if (!devMode || !isSidebarOpen) return null
+
+    const config = getGitHubConfig()
+
+    return (
+        <div
+            data-dev-tool="true"
+            class={cn(
+                'fixed top-0 right-0 h-full z-50',
+                'flex flex-col',
+                'bg-gradient-to-b from-slate-900/98 to-slate-950/98',
+                'backdrop-blur-xl border-l border-white/10',
+                'shadow-2xl shadow-black/50',
+                'transition-all duration-300 ease-in-out',
+                isExpanded ? 'w-full sm:max-w-[50vw]' : 'w-full sm:max-w-md',
+                'animate-in slide-in-from-right duration-300',
+            )}
+        >
+            {/* Header */}
+            <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
+                <div class="flex items-center gap-2">
+                    <Bug class="w-4 h-4 text-primary" />
+                    <span class="text-sm font-bold text-white">GitHub Issues</span>
+                    <span class="text-xs text-white/40">
+                        ({config.owner}/{config.repo})
+                    </span>
+                </div>
+                <div class="flex items-center gap-1">
+                    <button
+                        onClick={handleRefresh}
+                        disabled={loading}
+                        class={cn(
+                            'p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors',
+                            loading && 'animate-spin',
+                        )}
+                    >
+                        <RefreshCw class="w-3.5 h-3.5" />
+                    </button>
+                    <button
+                        onClick={toggleExpand}
+                        class="hidden sm:block p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
+                    >
+                        {isExpanded ? (
+                            <Minimize2 class="w-3.5 h-3.5" />
+                        ) : (
+                            <Maximize2 class="w-3.5 h-3.5" />
+                        )}
+                    </button>
+                    <button
+                        onClick={() => setSidebarOpen(false)}
+                        class="p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
+                    >
+                        <X class="w-4 h-4" />
+                    </button>
+                </div>
+            </div>
+
+            {/* Tabs */}
+            <div class="flex border-b border-white/10">
+                <button
+                    onClick={() => setTab('bugs')}
+                    class={cn(
+                        'flex-1 px-4 py-2.5 text-xs font-medium transition-colors',
+                        tab === 'bugs'
+                            ? 'text-red-400 border-b-2 border-red-500'
+                            : 'text-white/40 hover:text-white/70',
+                    )}
+                >
+                    🐛 Bugs ({bugs.length})
+                </button>
+                <button
+                    onClick={() => setTab('features')}
+                    class={cn(
+                        'flex-1 px-4 py-2.5 text-xs font-medium transition-colors',
+                        tab === 'features'
+                            ? 'text-emerald-400 border-b-2 border-emerald-500'
+                            : 'text-white/40 hover:text-white/70',
+                    )}
+                >
+                    ✨ Features ({features.length})
+                </button>
+            </div>
+
+            {/* Content */}
+            <div class="flex-1 overflow-y-auto p-3 space-y-2">
+                {loading ? (
+                    <div class="flex items-center justify-center py-12">
+                        <div class="w-6 h-6 border-2 border-white/20 border-t-primary rounded-full animate-spin" />
+                    </div>
+                ) : currentIssues.length === 0 ? (
+                    <div class="text-center py-12 text-sm text-white/30">
+                        No {tab === 'bugs' ? 'bugs' : 'features'} found
+                    </div>
+                ) : (
+                    currentIssues.map((issue) => (
+                        <IssueCard key={issue.id} issue={issue} expandedView={isExpanded} />
+                    ))
+                )}
+            </div>
+        </div>
+    )
+})

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

@@ -0,0 +1,242 @@
+// @geenius-tools/devtools-solidjs — src/components/DevToolbar.tsx
+
+import { createSignal, createEffect } from 'solid-js'
+import { cn } from '@geenius-ui/solid'
+import {
+    Power,
+    PanelRight,
+    Bug,
+    Lightbulb,
+    Target,
+    Activity,
+} from 'lucide-solid'
+import { createDevModeOptional, createIsDevAllowed } from '../context/DevModeContext'
+import { createPerformanceContextOptional } from '../context/PerformanceContext'
+import { GitHubIssueDialog } from './GitHubIssueDialog'
+import { PerformancePanel } from './PerformancePanel'
+
+interface ToolbarButtonProps {
+    icon: React.JSX.Element
+    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 class="hidden sm:inline text-xs font-medium">{label}</span>
+            )}
+        </>
+    )
+
+    const class = 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}
+            class={cn(class, !disabled && 'cursor-pointer')}
+            title={label}
+            disabled={disabled}
+        >
+            {content}
+        </button>
+    )
+})
+
+interface ExpandableSectionProps {
+    show: boolean
+    children: React.JSX.Element
+}
+
+const ExpandableSection = memo(function ExpandableSection({
+    show,
+    children,
+}: ExpandableSectionProps) {
+    let contentRef: HTMLDivElement | undefined
+    const [width, setWidth] = createSignal(0)
+
+    createEffect(() => {
+        if (contentRef) {
+            setWidth(show ? contentRef.scrollWidth : 0)
+        }
+    })
+
+    return (
+        <div
+            class="overflow-hidden transition-all duration-300 ease-out"
+            style={{ width: show ? width : 0, opacity: show ? 1 : 0 }}
+        >
+            <div
+                ref={contentRef}
+                class={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 = createIsDevAllowed(isAllowed)
+    const devMode = createDevModeOptional()
+    const performanceContext = createPerformanceContextOptional()
+
+    const [isReady, setIsReady] = createSignal(false)
+    createEffect(() => {
+        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"
+                class={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 class="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 class="shrink-0 w-px h-6 bg-white/20 mx-1 my-2" />
+
+                    {/* Inspector Mode Toggle */}
+                    <ToolbarButton
+                        icon={<Target class="w-4 h-4" />}
+                        label="Inspector"
+                        onClick={devMode.toggleInspector}
+                        active={devMode.isInspectorMode}
+                        variant={devMode.isInspectorMode ? 'primary' : 'default'}
+                    />
+
+                    {/* Performance Monitor Toggle */}
+                    {performanceContext && (
+                        <ToolbarButton
+                            icon={<Activity class="w-4 h-4" />}
+                            label="Perf"
+                            onClick={performanceContext.togglePerformancePanel}
+                            active={performanceContext.isPerformancePanelOpen}
+                            variant={
+                                performanceContext.isPerformancePanelOpen
+                                    ? 'primary'
+                                    : 'default'
+                            }
+                        />
+                    )}
+
+                    {/* Sidebar Toggle (Desktop only) */}
+                    <div class="hidden md:block">
+                        <ToolbarButton
+                            icon={<PanelRight class="w-4 h-4" />}
+                            label="Issues"
+                            onClick={toggleSidebar}
+                            active={isSidebarOpen}
+                        />
+                    </div>
+
+                    {/* Create Bug */}
+                    <ToolbarButton
+                        icon={<Bug class="w-4 h-4" />}
+                        label="Bug"
+                        onClick={() => openIssueDialog('bug')}
+                        variant="danger"
+                    />
+
+                    {/* Create Feature */}
+                    <ToolbarButton
+                        icon={<Lightbulb class="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>
+        </>
+    )
+})