@geenius/tools 0.1.0 → 0.3.0

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

@@ -1,330 +0,0 @@
-// @geenius-tools/devtools-react — src/components/PerformancePanel.tsx
-
-import { memo, useMemo, useRef, useEffect } from 'react'
-import { cn } from '@geenius-ui/react'
-import { X, Trash2, Activity, Zap, Clock, AlertTriangle } from 'lucide-react'
-import { usePerformanceContext } from '../context/PerformanceContext'
-import type { PerformanceMetric } from '@geenius-tools/logger'
-
-function getDurationColor(duration: number | undefined): string {
-    if (duration === undefined) return 'text-white/40'
-    if (duration > 100) return 'text-red-400'
-    if (duration > 50) return 'text-yellow-400'
-    return 'text-green-400'
-}
-
-function getDurationBgColor(duration: number | undefined): string {
-    if (duration === undefined) return 'bg-white/20'
-    if (duration > 100) return 'bg-red-500'
-    if (duration > 50) return 'bg-yellow-500'
-    return 'bg-green-500'
-}
-
-function getTypeColor(type: string): string {
-    switch (type) {
-        case 'network':
-            return 'text-blue-400'
-        case 'query':
-            return 'text-orange-400'
-        case 'mutation':
-            return 'text-red-400'
-        case 'render':
-            return 'text-purple-400'
-        case 'route':
-            return 'text-green-400'
-        case 'component':
-            return 'text-cyan-400'
-        case 'effect':
-            return 'text-teal-400'
-        default:
-            return 'text-white/60'
-    }
-}
-
-function getTypeIcon(type: string) {
-    switch (type) {
-        case 'network':
-            return '🌐'
-        case 'query':
-            return '🔍'
-        case 'mutation':
-            return '✏️'
-        case 'render':
-            return '🎨'
-        case 'route':
-            return '🧭'
-        case 'component':
-            return '📦'
-        case 'effect':
-            return '⚡'
-        default:
-            return '📝'
-    }
-}
-
-const MiniBar = memo(function MiniBar({
-    height,
-    color,
-    label,
-}: {
-    height: number
-    color: string
-    label: string
-}) {
-    return (
-        <div className="flex flex-col items-center gap-0.5 flex-1 min-w-0">
-            <div className="w-full h-12 flex items-end">
-                <div
-                    className={cn('w-full rounded-t-sm transition-all duration-300', color)}
-                    style={{ height: `${Math.min(height, 100)}%` }}
-                    title={label}
-                />
-            </div>
-        </div>
-    )
-})
-
-const MetricRow = memo(function MetricRow({
-    metric,
-}: {
-    metric: PerformanceMetric
-}) {
-    const duration = metric.duration
-    const durationStr = duration ? `${duration.toFixed(1)}ms` : 'pending...'
-
-    return (
-        <div
-            className={cn(
-                'flex items-center gap-3 px-3 py-2 rounded-lg',
-                'bg-white/5 hover:bg-white/10 transition-colors',
-            )}
-        >
-            <span className="text-sm">{getTypeIcon(metric.type)}</span>
-            <div className="flex-1 min-w-0">
-                <div className={cn('text-xs font-medium truncate', getTypeColor(metric.type))}>
-                    {metric.name}
-                </div>
-            </div>
-            <div
-                className={cn(
-                    'text-xs font-mono font-bold',
-                    getDurationColor(duration),
-                )}
-            >
-                {durationStr}
-            </div>
-        </div>
-    )
-})
-
-const StatCard = memo(function StatCard({
-    icon: Icon,
-    label,
-    value,
-    color = 'text-white',
-}: {
-    icon: React.ElementType
-    label: string
-    value: string | number
-    color?: string
-}) {
-    return (
-        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5">
-            <Icon className={cn('w-4 h-4', color)} />
-            <div className="flex flex-col">
-                <span className="text-[10px] text-white/50 uppercase">{label}</span>
-                <span className="text-sm font-bold text-white">{value}</span>
-            </div>
-        </div>
-    )
-})
-
-const FilterToggle = memo(function FilterToggle({
-    label,
-    active,
-    color,
-    onClick,
-}: {
-    label: string
-    active: boolean
-    color: string
-    onClick: () => void
-}) {
-    return (
-        <button
-            onClick={onClick}
-            className={cn(
-                'px-2 py-1 rounded text-xs font-medium transition-all',
-                active
-                    ? `${color} text-white`
-                    : 'bg-white/10 text-white/50 hover:bg-white/20',
-            )}
-        >
-            {label}
-        </button>
-    )
-})
-
-export const PerformancePanel = memo(function PerformancePanel() {
-    const {
-        isPerformancePanelOpen,
-        metrics,
-        filters,
-        stats,
-        togglePerformancePanel,
-        clearMetrics,
-        toggleFilter,
-    } = usePerformanceContext()
-
-    const listRef = useRef<HTMLDivElement>(null)
-
-    const filteredMetrics = useMemo(() => {
-        return metrics.filter((m) => {
-            if (m.type === 'network' && !filters.network) return false
-            if (m.type === 'query' && !filters.query) return false
-            if (m.type === 'mutation' && !filters.mutation) return false
-            if (m.type === 'render' && !filters.render) return false
-            if (m.type === 'route' && !filters.route) return false
-            return true
-        })
-    }, [metrics, filters])
-
-    const chartMetrics = useMemo(() => {
-        return filteredMetrics.filter((m) => m.duration !== undefined).slice(-20)
-    }, [filteredMetrics])
-
-    const maxDuration = useMemo(() => {
-        if (chartMetrics.length === 0) return 100
-        const max = Math.max(...chartMetrics.map((m) => m.duration || 0))
-        return Math.max(max, 100)
-    }, [chartMetrics])
-
-    useEffect(() => {
-        if (listRef.current) {
-            listRef.current.scrollTop = listRef.current.scrollHeight
-        }
-    }, [filteredMetrics.length])
-
-    if (!isPerformancePanelOpen) return null
-
-    return (
-        <div
-            data-dev-tool="true"
-            className={cn(
-                'fixed bottom-20 left-1/2 -translate-x-1/2 z-50',
-                'w-[440px] max-h-[400px]',
-                'rounded-2xl border border-white/10',
-                'bg-gradient-to-b from-slate-900/95 via-slate-800/95 to-slate-900/95',
-                'backdrop-blur-xl shadow-2xl shadow-black/50',
-                'flex flex-col overflow-hidden',
-                'animate-in slide-in-from-bottom-4 fade-in 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">
-                    <Activity className="w-4 h-4 text-primary" />
-                    <span className="text-sm font-bold text-white">Performance</span>
-                    <span className="text-xs text-white/40">
-                        ({filteredMetrics.length} events)
-                    </span>
-                </div>
-                <div className="flex items-center gap-1">
-                    <button
-                        onClick={clearMetrics}
-                        className="p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
-                        title="Clear metrics"
-                    >
-                        <Trash2 className="w-3.5 h-3.5" />
-                    </button>
-                    <button
-                        onClick={togglePerformancePanel}
-                        className="p-1.5 text-white/40 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
-                        title="Close panel"
-                    >
-                        <X className="w-4 h-4" />
-                    </button>
-                </div>
-            </div>
-
-            {/* Stats Bar */}
-            <div className="flex gap-2 px-4 py-3 border-b border-white/10 overflow-x-auto">
-                <StatCard
-                    icon={Activity}
-                    label="Requests"
-                    value={stats.totalRequests}
-                    color="text-blue-400"
-                />
-                <StatCard
-                    icon={Clock}
-                    label="Avg"
-                    value={`${stats.avgDuration}ms`}
-                    color={
-                        stats.avgDuration > 100
-                            ? 'text-red-400'
-                            : stats.avgDuration > 50
-                                ? 'text-yellow-400'
-                                : 'text-green-400'
-                    }
-                />
-                <StatCard
-                    icon={Zap}
-                    label="Fast"
-                    value={stats.fastRequests}
-                    color="text-green-400"
-                />
-                <StatCard
-                    icon={AlertTriangle}
-                    label="Slow"
-                    value={stats.slowRequests}
-                    color={stats.slowRequests > 0 ? 'text-red-400' : 'text-white/50'}
-                />
-            </div>
-
-            {/* Mini Chart */}
-            {chartMetrics.length > 0 && (
-                <div className="px-4 py-3 border-b border-white/10">
-                    <div className="flex items-end gap-1 h-16">
-                        {chartMetrics.map((metric) => (
-                            <MiniBar
-                                key={metric.id}
-                                height={((metric.duration || 0) / maxDuration) * 100}
-                                color={getDurationBgColor(metric.duration)}
-                                label={`${metric.name}: ${metric.duration?.toFixed(1)}ms`}
-                            />
-                        ))}
-                    </div>
-                    <div className="flex justify-between mt-1 text-xs text-white/40">
-                        <span>Recent requests</span>
-                        <span>0-{maxDuration.toFixed(0)}ms</span>
-                    </div>
-                </div>
-            )}
-
-            {/* Filters */}
-            <div className="flex gap-1 px-4 py-2 border-b border-white/10">
-                <FilterToggle label="Network" active={filters.network} color="bg-blue-500" onClick={() => toggleFilter('network')} />
-                <FilterToggle label="Query" active={filters.query} color="bg-orange-500" onClick={() => toggleFilter('query')} />
-                <FilterToggle label="Mutation" active={filters.mutation} color="bg-red-500" onClick={() => toggleFilter('mutation')} />
-                <FilterToggle label="Render" active={filters.render} color="bg-purple-500" onClick={() => toggleFilter('render')} />
-                <FilterToggle label="Route" active={filters.route} color="bg-green-500" onClick={() => toggleFilter('route')} />
-            </div>
-
-            {/* Metrics List */}
-            <div
-                ref={listRef}
-                className="flex-1 overflow-y-auto px-3 py-2 space-y-1 min-h-[100px] max-h-[180px]"
-            >
-                {filteredMetrics.length === 0 ? (
-                    <div className="flex items-center justify-center py-8 text-sm text-white/30">
-                        No metrics recorded yet
-                    </div>
-                ) : (
-                    filteredMetrics.map((metric) => (
-                        <MetricRow key={metric.id} metric={metric} />
-                    ))
-                )}
-            </div>
-        </div>
-    )
-})

package/packages/devtools/react/src/context/DevModeContext.tsx

@@ -1,226 +0,0 @@
-// @geenius-tools/devtools-react — src/context/DevModeContext.tsx
-
-import {
-    createContext,
-    useContext,
-    useState,
-    useCallback,
-    useEffect,
-    type ReactNode,
-    memo,
-} from 'react'
-
-const DEV_MODE_STORAGE_KEY = 'geenius-dev-mode-state'
-
-export interface ComponentDetails {
-    name: string
-    file?: string
-    selector: string
-    key?: string
-    props?: Record<string, unknown>
-}
-
-interface DevModeState {
-    isDevMode: boolean
-    isSidebarOpen: boolean
-    isInspectorMode: boolean
-    issueDialog: {
-        isOpen: boolean
-        type: 'bug' | 'feature'
-        initialDescription?: string
-        componentDetails?: ComponentDetails[]
-    }
-}
-
-export interface DevModeContextValue extends DevModeState {
-    toggleDevMode: () => void
-    toggleSidebar: () => void
-    toggleInspector: () => void
-    setDevMode: (enabled: boolean) => void
-    setSidebarOpen: (open: boolean) => void
-    setInspectorMode: (enabled: boolean) => void
-    openIssueDialog: (
-        type: 'bug' | 'feature',
-        description?: string,
-        componentDetails?: ComponentDetails[],
-    ) => void
-    closeIssueDialog: () => void
-}
-
-const defaultState: DevModeState = {
-    isDevMode: false,
-    isSidebarOpen: false,
-    isInspectorMode: false,
-    issueDialog: {
-        isOpen: false,
-        type: 'bug',
-        initialDescription: '',
-    },
-}
-
-const DevModeContext = createContext<DevModeContextValue | undefined>(undefined)
-
-export function useDevMode() {
-    const context = useContext(DevModeContext)
-    if (!context) {
-        throw new Error('useDevMode must be used within a DevModeProvider')
-    }
-    return context
-}
-
-export function useDevModeOptional(): DevModeContextValue | null {
-    return useContext(DevModeContext) ?? null
-}
-
-export interface DevModeProviderProps {
-    children: ReactNode
-    /** Whether dev tools are allowed. Default: checks import.meta.env.DEV */
-    isAllowed?: boolean
-}
-
-export const DevModeProvider = memo(function DevModeProvider({
-    children,
-    isAllowed,
-}: DevModeProviderProps) {
-    const resolvedAllowed = isAllowed ?? resolveDevAllowed()
-
-    const [state, setState] = useState<DevModeState>(() => {
-        if (!resolvedAllowed || typeof window === 'undefined') return defaultState
-
-        try {
-            const stored = localStorage.getItem(DEV_MODE_STORAGE_KEY)
-            if (stored) {
-                const parsed = JSON.parse(stored) as Partial<DevModeState>
-                return {
-                    isDevMode: parsed.isDevMode ?? false,
-                    isSidebarOpen: false,
-                    isInspectorMode: false,
-                    issueDialog: defaultState.issueDialog,
-                }
-            }
-        } catch {
-            // Ignore parse errors
-        }
-        return defaultState
-    })
-
-    useEffect(() => {
-        if (!resolvedAllowed || typeof window === 'undefined') return
-
-        try {
-            localStorage.setItem(
-                DEV_MODE_STORAGE_KEY,
-                JSON.stringify({ isDevMode: state.isDevMode }),
-            )
-        } catch {
-            // Ignore storage errors
-        }
-    }, [state.isDevMode, resolvedAllowed])
-
-    const toggleDevMode = useCallback(() => {
-        setState((prev) => ({
-            ...prev,
-            isDevMode: !prev.isDevMode,
-            isSidebarOpen: prev.isDevMode ? false : prev.isSidebarOpen,
-            isInspectorMode: prev.isDevMode ? false : prev.isInspectorMode,
-        }))
-    }, [])
-
-    const toggleSidebar = useCallback(() => {
-        setState((prev) => ({ ...prev, isSidebarOpen: !prev.isSidebarOpen }))
-    }, [])
-
-    const toggleInspector = useCallback(() => {
-        setState((prev) => ({
-            ...prev,
-            isInspectorMode: !prev.isInspectorMode,
-        }))
-    }, [])
-
-    const setDevMode = useCallback((enabled: boolean) => {
-        setState((prev) => ({
-            ...prev,
-            isDevMode: enabled,
-            isSidebarOpen: enabled ? prev.isSidebarOpen : false,
-            isInspectorMode: enabled ? prev.isInspectorMode : false,
-        }))
-    }, [])
-
-    const setSidebarOpen = useCallback((open: boolean) => {
-        setState((prev) => ({ ...prev, isSidebarOpen: open }))
-    }, [])
-
-    const setInspectorMode = useCallback((enabled: boolean) => {
-        setState((prev) => ({ ...prev, isInspectorMode: enabled }))
-    }, [])
-
-    const openIssueDialog = useCallback(
-        (
-            type: 'bug' | 'feature',
-            description?: string,
-            componentDetails?: ComponentDetails[],
-        ) => {
-            setState((prev) => ({
-                ...prev,
-                issueDialog: {
-                    isOpen: true,
-                    type,
-                    initialDescription: description,
-                    componentDetails,
-                },
-            }))
-        },
-        [],
-    )
-
-    const closeIssueDialog = useCallback(() => {
-        setState((prev) => ({
-            ...prev,
-            issueDialog: { ...prev.issueDialog, isOpen: false },
-        }))
-    }, [])
-
-    if (!resolvedAllowed) {
-        return <>{children}</>
-    }
-
-    return (
-        <DevModeContext.Provider
-            value={{
-                ...state,
-                toggleDevMode,
-                toggleSidebar,
-                toggleInspector,
-                setDevMode,
-                setSidebarOpen,
-                setInspectorMode,
-                openIssueDialog,
-                closeIssueDialog,
-            }}
-        >
-            {children}
-        </DevModeContext.Provider>
-    )
-})
-
-export function useIsDevToolsVisible(): boolean {
-    const context = useDevModeOptional()
-    if (!context) return false
-    return context.isDevMode
-}
-
-export function useIsDevAllowed(isAllowed?: boolean): boolean {
-    return isAllowed ?? resolveDevAllowed()
-}
-
-function resolveDevAllowed(): boolean {
-    try {
-        // @ts-expect-error — Vite env
-        if (import.meta?.env?.VITE_CONVEX_IS_DEV === 'true') return true
-        // @ts-expect-error — Vite env
-        if (import.meta?.env?.DEV) return true
-    } catch {
-        // Not in Vite
-    }
-    return false
-}

package/packages/devtools/react/src/context/PerformanceContext.tsx

@@ -1,143 +0,0 @@
-// @geenius-tools/devtools-react — src/context/PerformanceContext.tsx
-
-import {
-    createContext,
-    useContext,
-    useState,
-    useEffect,
-    useCallback,
-    type ReactNode,
-    memo,
-} from 'react'
-import { metricsStore, type PerformanceMetric } from '@geenius-tools/logger'
-
-const MAX_METRICS = 100
-
-interface PerformanceContextValue {
-    isPerformancePanelOpen: boolean
-    metrics: PerformanceMetric[]
-    filters: {
-        network: boolean
-        query: boolean
-        mutation: boolean
-        render: boolean
-        route: boolean
-    }
-    stats: {
-        totalRequests: number
-        avgDuration: number
-        slowRequests: number
-        fastRequests: number
-    }
-    togglePerformancePanel: () => void
-    clearMetrics: () => void
-    toggleFilter: (filter: keyof PerformanceContextValue['filters']) => void
-}
-
-const PerformanceContext = createContext<PerformanceContextValue | undefined>(
-    undefined,
-)
-
-export function usePerformanceContext() {
-    const context = useContext(PerformanceContext)
-    if (!context) {
-        throw new Error(
-            'usePerformanceContext must be used within PerformanceProvider',
-        )
-    }
-    return context
-}
-
-export function usePerformanceContextOptional(): PerformanceContextValue | null {
-    return useContext(PerformanceContext) ?? null
-}
-
-interface PerformanceProviderProps {
-    children: ReactNode
-}
-
-export const PerformanceProvider = memo(function PerformanceProvider({
-    children,
-}: PerformanceProviderProps) {
-    const [isPerformancePanelOpen, setIsPerformancePanelOpen] = useState(false)
-    const [metrics, setMetrics] = useState<PerformanceMetric[]>([])
-    const [filters, setFilters] = useState({
-        network: true,
-        query: true,
-        mutation: true,
-        render: true,
-        route: true,
-    })
-
-    useEffect(() => {
-        const unsubscribe = metricsStore.subscribe((newMetrics) => {
-            setMetrics((prev) => {
-                const combined = [...prev, ...newMetrics]
-                if (combined.length > MAX_METRICS) {
-                    return combined.slice(-MAX_METRICS)
-                }
-                return combined
-            })
-        })
-
-        return () => unsubscribe()
-    }, [])
-
-    const stats = useCallback(() => {
-        const filtered = metrics.filter((m) => m.duration !== undefined)
-        const total = filtered.length
-
-        if (total === 0) {
-            return {
-                totalRequests: 0,
-                avgDuration: 0,
-                slowRequests: 0,
-                fastRequests: 0,
-            }
-        }
-
-        const durations = filtered.map((m) => m.duration!)
-        const avg = durations.reduce((a, b) => a + b, 0) / total
-        const slow = durations.filter((d) => d > 100).length
-        const fast = durations.filter((d) => d < 50).length
-
-        return {
-            totalRequests: total,
-            avgDuration: Math.round(avg * 100) / 100,
-            slowRequests: slow,
-            fastRequests: fast,
-        }
-    }, [metrics])
-
-    const togglePerformancePanel = useCallback(() => {
-        setIsPerformancePanelOpen((prev) => !prev)
-    }, [])
-
-    const clearMetrics = useCallback(() => {
-        setMetrics([])
-        metricsStore.clear()
-    }, [])
-
-    const toggleFilter = useCallback((filter: keyof typeof filters) => {
-        setFilters((prev) => ({
-            ...prev,
-            [filter]: !prev[filter],
-        }))
-    }, [])
-
-    return (
-        <PerformanceContext.Provider
-            value={{
-                isPerformancePanelOpen,
-                metrics,
-                filters,
-                stats: stats(),
-                togglePerformancePanel,
-                clearMetrics,
-                toggleFilter,
-            }}
-        >
-            {children}
-        </PerformanceContext.Provider>
-    )
-})

package/packages/devtools/react/src/data/designs.ts

@@ -1,13 +0,0 @@
-// @geenius-tools/devtools — data/designs.ts
-
-export interface Design {
-    id: string
-    name: string
-    path: string
-}
-
-export const designs: Design[] = Array.from({ length: 21 }, (_, i) => ({
-    id: String(i + 1),
-    name: `Design ${i + 1}`,
-    path: `/dev/design/${i + 1}`,
-}))