@geenius/tools 0.1.0 → 0.3.0

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

@@ -1,247 +0,0 @@
-// @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

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