@geenius/tools 0.1.0 → 0.3.0

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

@@ -1,59 +0,0 @@
-// @geenius-tools/devtools-react — components/DesignPreview.tsx
-import { useRef, useEffect } from 'react'
-import type { Design } from '../data/designs'
-
-export type DesignPreviewProps = {
-    designNumber: number
-    showGrid?: boolean
-    theme?: 'light' | 'dark'
-}
-
-/**
- * DesignPreview — renders an HTML design file in an iframe with grid overlay + theme control.
- *
- * Uses Tailwind CSS utility classes.
- */
-export function DesignPreview({
-    designNumber,
-    showGrid = false,
-    theme = 'light',
-}: DesignPreviewProps) {
-    const iframeRef = useRef<HTMLIFrameElement>(null)
-
-    const applyTheme = () => {
-        try {
-            const iframe = iframeRef.current
-            if (iframe?.contentDocument) {
-                const action = theme === 'dark' ? 'add' : 'remove'
-                iframe.contentDocument.documentElement.classList[action]('dark')
-                iframe.contentDocument.body?.classList[action]('dark')
-            }
-        } catch {
-            // Cross-origin restrictions
-        }
-    }
-
-    useEffect(applyTheme, [theme, designNumber])
-
-    return (
-        <div className="relative w-full h-screen">
-            {showGrid && (
-                <div className="absolute inset-0 pointer-events-none z-[100] flex justify-between px-4 max-w-[1400px] mx-auto w-full">
-                    {Array.from({ length: 12 }).map((_, i) => (
-                        <div
-                            key={i}
-                            className="h-full w-[calc(100%/12)] border-x border-red-500/20 bg-red-500/5 mx-2"
-                        />
-                    ))}
-                </div>
-            )}
-            <iframe
-                ref={iframeRef}
-                src={`/designs/design-${designNumber}.html`}
-                className="w-full h-full border-0"
-                title={`Design ${designNumber} Preview`}
-                onLoad={applyTheme}
-            />
-        </div>
-    )
-}

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

@@ -1,99 +0,0 @@
-// @geenius-tools/devtools-react — components/DesignSwitcherDropdown.tsx
-import { useState, useRef, useEffect } from 'react'
-
-export type DesignSwitcherDropdownProps = {
-    /** Current active path — used to highlight the active design */
-    currentPath: string
-    /** Called when user selects a design */
-    onNavigate: (path: string) => void
-    /** Total number of designs */
-    designCount?: number
-}
-
-/**
- * DesignSwitcherDropdown — dropdown menu for switching between design previews.
- *
- * Router-agnostic: caller provides currentPath and onNavigate.
- * Uses Tailwind CSS utility classes.
- */
-export function DesignSwitcherDropdown({
-    currentPath,
-    onNavigate,
-    designCount = 21,
-}: DesignSwitcherDropdownProps) {
-    const [isOpen, setIsOpen] = useState(false)
-    const dropdownRef = useRef<HTMLDivElement>(null)
-
-    const getCurrentDesign = () => {
-        const match = currentPath.match(/\/dev\/design\/(\d+)/)
-        return match ? `Design ${match[1]}` : 'Current Design'
-    }
-
-    const currentDesign = getCurrentDesign()
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-                setIsOpen(false)
-            }
-        }
-        document.addEventListener('mousedown', handleClickOutside)
-        return () => document.removeEventListener('mousedown', handleClickOutside)
-    }, [])
-
-    const handleDesignChange = (path: string) => {
-        onNavigate(path)
-        setIsOpen(false)
-    }
-
-    const designs = [
-        { label: 'Current Design', path: '/' },
-        ...Array.from({ length: designCount }, (_, i) => ({
-            label: `Design ${i + 1}`,
-            path: `/dev/design/${i + 1}`,
-        })),
-    ]
-
-    return (
-        <div ref={dropdownRef} className="relative">
-            <button
-                type="button"
-                onClick={() => setIsOpen(!isOpen)}
-                aria-label="Switch Design"
-                className="flex items-center gap-2 px-3 py-2 rounded-lg text-foreground hover:bg-bg-muted transition-colors text-sm font-medium"
-            >
-                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}><circle cx="13.5" cy="6.5" r="0.5" /><circle cx="17.5" cy="10.5" r="0.5" /><circle cx="8.5" cy="7.5" r="0.5" /><circle cx="6.5" cy="12" r="0.5" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></svg>
-                <span className="hidden sm:inline">{currentDesign}</span>
-                <svg
-                    className={`w-4 h-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                >
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                </svg>
-            </button>
-
-            {isOpen && (
-                <div className="absolute right-0 mt-2 py-2 bg-card border border-border rounded-lg shadow-xl overflow-hidden min-w-[180px] max-h-[400px] overflow-y-auto z-50">
-                    {designs.map((design) => (
-                        <button
-                            key={design.path}
-                            type="button"
-                            onClick={() => handleDesignChange(design.path)}
-                            className={`w-full px-4 py-2.5 text-left text-sm transition-colors ${currentDesign === design.label
-                                ? 'bg-primary/10 text-primary font-medium'
-                                : 'hover:bg-bg-muted text-foreground'
-                                }`}
-                        >
-                            {design.label}
-                            {currentDesign === design.label && (
-                                <span className="ml-2 text-primary">✓</span>
-                            )}
-                        </button>
-                    ))}
-                </div>
-            )}
-        </div>
-    )
-}

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

@@ -1,247 +0,0 @@
-// @geenius-tools/devtools-react — src/components/DevSidebar.tsx
-
-import { memo, useState, useEffect, useMemo } from 'react'
-import { cn } from '@geenius-ui/react'
-import {
-    Bug,
-    Lightbulb,
-    ExternalLink,
-    Clock,
-    X,
-    RefreshCw,
-    Maximize2,
-    Minimize2,
-} from 'lucide-react'
-import { useDevModeOptional } 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 = useMemo(() => {
-        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"
-            className={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 className="flex items-start gap-3">
-                <div
-                    className={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 className="w-4 h-4" />
-                    ) : (
-                        <Lightbulb className="w-4 h-4" />
-                    )}
-                </div>
-
-                <div className="flex-1 min-w-0">
-                    <p className="font-medium text-sm text-white line-clamp-2">
-                        {issue.title}
-                    </p>
-
-                    {linkedComponent && (
-                        <span className="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 className="flex items-center gap-3 mt-2 text-xs text-white/40">
-                        <span>#{issue.number}</span>
-                        <span className="flex items-center gap-1">
-                            <Clock className="w-3 h-3" />
-                            {formatRelativeTime(issue.updated_at)}
-                        </span>
-                    </div>
-
-                    {expandedView && issue.body && (
-                        <div className="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 className="w-4 h-4 text-white/30 flex-shrink-0" />
-            </div>
-        </a>
-    )
-})
-
-export const DevSidebar = memo(function DevSidebar() {
-    const devMode = useDevModeOptional()
-    const [issues, setIssues] = useState<GitHubIssueListItem[]>([])
-    const [loading, setLoading] = useState(false)
-    const [tab, setTab] = useState<'bugs' | 'features'>('bugs')
-    const [isExpanded, setIsExpanded] = useState(false)
-
-    const isSidebarOpen = devMode?.isSidebarOpen ?? false
-    const setSidebarOpen = devMode?.setSidebarOpen ?? (() => { })
-
-    useEffect(() => {
-        if (isSidebarOpen && issues.length === 0 && !loading) {
-            fetchIssues()
-        }
-    }, [isSidebarOpen])
-
-    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 } = useMemo(() => {
-        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 }
-    }, [issues])
-
-    const currentIssues = tab === 'bugs' ? bugs : features
-
-    if (!devMode || !isSidebarOpen) return null
-
-    const config = getGitHubConfig()
-
-    return (
-        <div
-            data-dev-tool="true"
-            className={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 className="flex items-center justify-between px-4 py-3 border-b border-white/10">
-                <div className="flex items-center gap-2">
-                    <Bug className="w-4 h-4 text-primary" />
-                    <span className="text-sm font-bold text-white">GitHub Issues</span>
-                    <span className="text-xs text-white/40">
-                        ({config.owner}/{config.repo})
-                    </span>
-                </div>
-                <div className="flex items-center gap-1">
-                    <button
-                        onClick={handleRefresh}
-                        disabled={loading}
-                        className={cn(
-                            'p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors',
-                            loading && 'animate-spin',
-                        )}
-                    >
-                        <RefreshCw className="w-3.5 h-3.5" />
-                    </button>
-                    <button
-                        onClick={toggleExpand}
-                        className="hidden sm:block p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
-                    >
-                        {isExpanded ? (
-                            <Minimize2 className="w-3.5 h-3.5" />
-                        ) : (
-                            <Maximize2 className="w-3.5 h-3.5" />
-                        )}
-                    </button>
-                    <button
-                        onClick={() => setSidebarOpen(false)}
-                        className="p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
-                    >
-                        <X className="w-4 h-4" />
-                    </button>
-                </div>
-            </div>
-
-            {/* Tabs */}
-            <div className="flex border-b border-white/10">
-                <button
-                    onClick={() => setTab('bugs')}
-                    className={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')}
-                    className={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 className="flex-1 overflow-y-auto p-3 space-y-2">
-                {loading ? (
-                    <div className="flex items-center justify-center py-12">
-                        <div className="w-6 h-6 border-2 border-white/20 border-t-primary rounded-full animate-spin" />
-                    </div>
-                ) : currentIssues.length === 0 ? (
-                    <div className="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/react/src/components/DevToolbar.tsx

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