@geekmidas/studio 2.0.1 → 10.0.0-alpha.0

package/ui/src/components/FilterPanel.tsx

@@ -1,213 +0,0 @@
-import { useCallback } from 'react';
-import type { ColumnInfo, FilterConfig } from '../types';
-
-interface FilterPanelProps {
-	columns: ColumnInfo[];
-	filters: FilterConfig[];
-	onFiltersChange: (filters: FilterConfig[]) => void;
-	onClose: () => void;
-}
-
-const OPERATORS: { value: string; label: string; types?: string[] }[] = [
-	{ value: 'eq', label: 'equals' },
-	{ value: 'neq', label: 'not equals' },
-	{ value: 'gt', label: 'greater than', types: ['number', 'date', 'datetime'] },
-	{
-		value: 'gte',
-		label: 'greater than or equal',
-		types: ['number', 'date', 'datetime'],
-	},
-	{ value: 'lt', label: 'less than', types: ['number', 'date', 'datetime'] },
-	{
-		value: 'lte',
-		label: 'less than or equal',
-		types: ['number', 'date', 'datetime'],
-	},
-	{ value: 'like', label: 'contains', types: ['string'] },
-	{ value: 'ilike', label: 'contains (case insensitive)', types: ['string'] },
-	{ value: 'is_null', label: 'is null' },
-	{ value: 'is_not_null', label: 'is not null' },
-];
-
-function getOperatorsForColumn(column: ColumnInfo) {
-	return OPERATORS.filter(
-		(op) => !op.types || op.types.includes(column.type || 'string'),
-	);
-}
-
-export function FilterPanel({
-	columns,
-	filters,
-	onFiltersChange,
-	onClose,
-}: FilterPanelProps) {
-	const addFilter = useCallback(() => {
-		const firstColumn = columns[0];
-		if (!firstColumn) return;
-
-		onFiltersChange([
-			...filters,
-			{ column: firstColumn.name, operator: 'eq', value: '' },
-		]);
-	}, [columns, filters, onFiltersChange]);
-
-	const updateFilter = useCallback(
-		(index: number, updates: Partial<FilterConfig>) => {
-			const newFilters = [...filters];
-			newFilters[index] = { ...newFilters[index], ...updates };
-			onFiltersChange(newFilters);
-		},
-		[filters, onFiltersChange],
-	);
-
-	const removeFilter = useCallback(
-		(index: number) => {
-			onFiltersChange(filters.filter((_, i) => i !== index));
-		},
-		[filters, onFiltersChange],
-	);
-
-	const clearAll = useCallback(() => {
-		onFiltersChange([]);
-	}, [onFiltersChange]);
-
-	return (
-		<div className="filter-panel bg-studio-surface border-b border-studio-border p-4">
-			<div className="flex items-center justify-between mb-3">
-				<h3 className="text-sm font-medium text-slate-300">Filters</h3>
-				<div className="flex items-center gap-2">
-					{filters.length > 0 && (
-						<button
-							onClick={clearAll}
-							className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
-						>
-							Clear all
-						</button>
-					)}
-					<button
-						onClick={onClose}
-						className="p-1 hover:bg-studio-hover rounded transition-colors"
-					>
-						<svg
-							className="w-4 h-4 text-slate-400"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								strokeWidth={2}
-								d="M6 18L18 6M6 6l12 12"
-							/>
-						</svg>
-					</button>
-				</div>
-			</div>
-
-			<div className="space-y-2">
-				{filters.map((filter, index) => {
-					const column = columns.find((c) => c.name === filter.column);
-					const operators = column ? getOperatorsForColumn(column) : OPERATORS;
-					const needsValue = !['is_null', 'is_not_null'].includes(
-						filter.operator,
-					);
-
-					return (
-						<div key={index} className="flex items-center gap-2">
-							{index > 0 && (
-								<span className="text-xs text-slate-500 w-8">and</span>
-							)}
-							{index === 0 && (
-								<span className="text-xs text-slate-500 w-8">Where</span>
-							)}
-
-							{/* Column select */}
-							<select
-								value={filter.column}
-								onChange={(e) =>
-									updateFilter(index, { column: e.target.value })
-								}
-								className="select flex-1 min-w-0"
-							>
-								{columns.map((col) => (
-									<option key={col.name} value={col.name}>
-										{col.name}
-									</option>
-								))}
-							</select>
-
-							{/* Operator select */}
-							<select
-								value={filter.operator}
-								onChange={(e) =>
-									updateFilter(index, { operator: e.target.value })
-								}
-								className="select w-48"
-							>
-								{operators.map((op) => (
-									<option key={op.value} value={op.value}>
-										{op.label}
-									</option>
-								))}
-							</select>
-
-							{/* Value input */}
-							{needsValue && (
-								<input
-									type="text"
-									value={filter.value}
-									onChange={(e) =>
-										updateFilter(index, { value: e.target.value })
-									}
-									placeholder="Enter value..."
-									className="input flex-1 min-w-0"
-								/>
-							)}
-
-							{/* Remove button */}
-							<button
-								onClick={() => removeFilter(index)}
-								className="p-1.5 hover:bg-studio-hover rounded transition-colors text-slate-500 hover:text-slate-300"
-							>
-								<svg
-									className="w-4 h-4"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth={2}
-										d="M6 18L18 6M6 6l12 12"
-									/>
-								</svg>
-							</button>
-						</div>
-					);
-				})}
-			</div>
-
-			<button
-				onClick={addFilter}
-				className="mt-3 flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 transition-colors"
-			>
-				<svg
-					className="w-4 h-4"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-				>
-					<path
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						strokeWidth={2}
-						d="M12 4v16m8-8H4"
-					/>
-				</svg>
-				Add filter
-			</button>
-		</div>
-	);
-}

package/ui/src/components/NavRail.tsx

@@ -1,183 +0,0 @@
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '@geekmidas/ui';
-import { ChevronLeft, ChevronRight, type LucideIcon } from 'lucide-react';
-import { createContext, useContext, useEffect, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-
-const STORAGE_KEY = 'studio-nav-collapsed';
-
-interface NavRailContextValue {
-	collapsed: boolean;
-	setCollapsed: (collapsed: boolean) => void;
-}
-
-const NavRailContext = createContext<NavRailContextValue>({
-	collapsed: false,
-	setCollapsed: () => {},
-});
-
-export function useNavRail() {
-	return useContext(NavRailContext);
-}
-
-interface NavRailProps {
-	children: React.ReactNode;
-	header?: React.ReactNode;
-	footer?: React.ReactNode;
-}
-
-export function NavRail({ children, header, footer }: NavRailProps) {
-	const [collapsed, setCollapsed] = useState(() => {
-		if (typeof window !== 'undefined') {
-			const stored = localStorage.getItem(STORAGE_KEY);
-			return stored === 'true';
-		}
-		return false;
-	});
-
-	useEffect(() => {
-		localStorage.setItem(STORAGE_KEY, String(collapsed));
-	}, [collapsed]);
-
-	return (
-		<NavRailContext.Provider value={{ collapsed, setCollapsed }}>
-			<TooltipProvider delayDuration={0}>
-				<nav
-					className={`
-            flex flex-col h-full
-            bg-[#0d0d0d] border-r border-white/[0.06]
-            transition-all duration-200 ease-out
-            ${collapsed ? 'w-[52px]' : 'w-[180px]'}
-          `}
-				>
-					{/* Toggle button */}
-					<div className="flex items-center justify-end h-12 px-2">
-						<button
-							onClick={() => setCollapsed(!collapsed)}
-							className="
-                p-1.5 rounded-md
-                text-white/40 hover:text-white/70
-                hover:bg-white/[0.06]
-                transition-colors
-              "
-							aria-label={
-								collapsed ? 'Expand navigation' : 'Collapse navigation'
-							}
-						>
-							{collapsed ? (
-								<ChevronRight className="h-4 w-4" />
-							) : (
-								<ChevronLeft className="h-4 w-4" />
-							)}
-						</button>
-					</div>
-
-					{header && <div className="px-2 mb-2">{header}</div>}
-
-					{/* Navigation items */}
-					<div className="flex-1 flex flex-col gap-0.5 px-2">{children}</div>
-
-					{footer && (
-						<div className="px-2 py-2 border-t border-white/[0.06]">
-							{footer}
-						</div>
-					)}
-				</nav>
-			</TooltipProvider>
-		</NavRailContext.Provider>
-	);
-}
-
-interface NavRailItemProps {
-	to: string;
-	icon: LucideIcon;
-	children: React.ReactNode;
-	matchPath?: string;
-}
-
-export function NavRailItem({
-	to,
-	icon: Icon,
-	children,
-	matchPath,
-}: NavRailItemProps) {
-	const { collapsed } = useNavRail();
-	const location = useLocation();
-
-	// Special handling for root path
-	const isActive = matchPath
-		? location.pathname.startsWith(matchPath)
-		: to === '/'
-			? location.pathname === '/'
-			: location.pathname === to || location.pathname.startsWith(`${to}/`);
-
-	const content = (
-		<Link
-			to={to}
-			className={`
-        relative flex items-center gap-3
-        px-3 py-2 rounded-md
-        text-sm font-medium
-        transition-colors duration-150
-        ${collapsed ? 'justify-center px-0' : ''}
-        ${
-					isActive
-						? 'text-white bg-white/[0.08]'
-						: 'text-white/60 hover:text-white/90 hover:bg-white/[0.04]'
-				}
-      `}
-		>
-			{/* Active indicator bar */}
-			{isActive && (
-				<span className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-4 bg-emerald-500 rounded-full" />
-			)}
-
-			<Icon
-				className={`h-[18px] w-[18px] shrink-0 ${collapsed ? '' : 'ml-0.5'}`}
-			/>
-
-			{!collapsed && <span className="truncate">{children}</span>}
-		</Link>
-	);
-
-	if (collapsed) {
-		return (
-			<Tooltip>
-				<TooltipTrigger asChild>{content}</TooltipTrigger>
-				<TooltipContent
-					side="right"
-					sideOffset={8}
-					className="bg-[#1a1a1a] text-white border-white/10"
-				>
-					{children}
-				</TooltipContent>
-			</Tooltip>
-		);
-	}
-
-	return content;
-}
-
-interface NavRailSectionProps {
-	title?: string;
-	children: React.ReactNode;
-}
-
-export function NavRailSection({ title, children }: NavRailSectionProps) {
-	const { collapsed } = useNavRail();
-
-	return (
-		<div className="flex flex-col gap-0.5">
-			{title && !collapsed && (
-				<div className="px-3 py-2 text-[11px] font-medium text-white/30 uppercase tracking-wider">
-					{title}
-				</div>
-			)}
-			{children}
-		</div>
-	);
-}

package/ui/src/components/RowDetail.tsx

@@ -1,119 +0,0 @@
-import type { ColumnInfo } from '../types';
-
-interface RowDetailProps {
-	row: Record<string, unknown>;
-	columns: ColumnInfo[];
-	onClose: () => void;
-}
-
-export function RowDetail({ row, columns, onClose }: RowDetailProps) {
-	const formatValue = (value: unknown): string => {
-		if (value === null) return 'NULL';
-		if (value === undefined) return '';
-		if (typeof value === 'boolean') return value ? 'true' : 'false';
-		if (typeof value === 'object') return JSON.stringify(value, null, 2);
-		return String(value);
-	};
-
-	const getValueClass = (value: unknown): string => {
-		if (value === null) return 'text-slate-500 italic';
-		if (typeof value === 'boolean')
-			return value ? 'text-emerald-400' : 'text-red-400';
-		if (typeof value === 'number') return 'text-blue-400';
-		return 'text-slate-300';
-	};
-
-	return (
-		<aside className="w-96 bg-studio-surface border-l border-studio-border flex flex-col shrink-0 overflow-hidden">
-			{/* Header */}
-			<div className="flex items-center justify-between px-4 py-3 border-b border-studio-border shrink-0">
-				<h2 className="text-sm font-medium text-slate-200">Row Details</h2>
-				<button
-					onClick={onClose}
-					className="p-1 hover:bg-studio-hover rounded transition-colors"
-				>
-					<svg
-						className="w-4 h-4 text-slate-400"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							strokeWidth={2}
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
-				</button>
-			</div>
-
-			{/* Content */}
-			<div className="flex-1 overflow-y-auto">
-				{columns.map((col) => {
-					const value = row[col.name];
-					const isLongValue = typeof value === 'string' && value.length > 50;
-					const isJson = typeof value === 'object' && value !== null;
-
-					return (
-						<div
-							key={col.name}
-							className="px-4 py-3 border-b border-studio-border"
-						>
-							{/* Column name and metadata */}
-							<div className="flex items-center gap-2 mb-1.5">
-								<span className="text-sm font-medium text-slate-300">
-									{col.name}
-								</span>
-								<span className="text-xs text-slate-600">{col.rawType}</span>
-								{col.isPrimaryKey && (
-									<span className="text-[10px] px-1 py-0.5 rounded bg-amber-500/20 text-amber-400">
-										PK
-									</span>
-								)}
-								{col.isForeignKey && (
-									<span className="text-[10px] px-1 py-0.5 rounded bg-blue-500/20 text-blue-400">
-										FK
-									</span>
-								)}
-							</div>
-
-							{/* Value */}
-							{isLongValue || isJson ? (
-								<pre
-									className={`${getValueClass(value)} bg-studio-bg text-xs p-2 rounded overflow-x-auto whitespace-pre-wrap break-words max-h-48`}
-								>
-									{formatValue(value)}
-								</pre>
-							) : (
-								<div className={`text-sm ${getValueClass(value)}`}>
-									{formatValue(value)}
-								</div>
-							)}
-
-							{/* Foreign key reference */}
-							{col.isForeignKey && col.foreignKeyTable && (
-								<div className="mt-1.5 text-xs text-blue-400 flex items-center gap-1">
-									<svg
-										className="w-3 h-3"
-										fill="none"
-										stroke="currentColor"
-										viewBox="0 0 24 24"
-									>
-										<path
-											strokeLinecap="round"
-											strokeLinejoin="round"
-											strokeWidth={2}
-											d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
-										/>
-									</svg>
-									{col.foreignKeyTable}.{col.foreignKeyColumn}
-								</div>
-							)}
-						</div>
-					);
-				})}
-			</div>
-		</aside>
-	);
-}

package/ui/src/components/StudioHeader.tsx

@@ -1,109 +0,0 @@
-import { RefreshCw } from 'lucide-react';
-import { useLocation } from 'react-router-dom';
-import { useStudio } from '../providers/StudioProvider';
-
-const PAGE_TITLES: Record<string, string> = {
-	'/': 'Dashboard',
-	'/database': 'Database',
-	'/monitoring': 'Monitoring',
-	'/monitoring/requests': 'Requests',
-	'/monitoring/logs': 'Logs',
-	'/monitoring/exceptions': 'Exceptions',
-	'/performance': 'Performance',
-};
-
-function getPageTitle(pathname: string): string {
-	// Exact match first
-	if (PAGE_TITLES[pathname]) {
-		return PAGE_TITLES[pathname];
-	}
-
-	// Check for partial matches (e.g., /database/users -> Database)
-	for (const [path, title] of Object.entries(PAGE_TITLES)) {
-		if (pathname.startsWith(path) && path !== '/') {
-			return title;
-		}
-	}
-
-	return 'Studio';
-}
-
-export function StudioHeader() {
-	const { connected, stats, loading, refresh } = useStudio();
-	const location = useLocation();
-	const pageTitle = getPageTitle(location.pathname);
-
-	return (
-		<header className="flex items-center justify-between h-14 px-6 border-b border-white/[0.06] bg-[#0a0a0a]">
-			{/* Page Title */}
-			<div className="flex items-center gap-3">
-				<h1 className="text-[15px] font-semibold text-white">{pageTitle}</h1>
-			</div>
-
-			{/* Right side: Stats + Actions */}
-			<div className="flex items-center gap-6">
-				{/* Stats */}
-				{stats && (
-					<div className="flex items-center gap-5 text-[13px]">
-						<div className="flex items-center gap-1.5">
-							<span className="text-white/40">Requests</span>
-							<span className="font-medium text-white tabular-nums">
-								{stats.requests.toLocaleString()}
-							</span>
-						</div>
-						<div className="flex items-center gap-1.5">
-							<span className="text-white/40">Exceptions</span>
-							<span
-								className={`font-medium tabular-nums ${stats.exceptions > 0 ? 'text-red-400' : 'text-white'}`}
-							>
-								{stats.exceptions.toLocaleString()}
-							</span>
-						</div>
-						<div className="flex items-center gap-1.5">
-							<span className="text-white/40">Logs</span>
-							<span className="font-medium text-white tabular-nums">
-								{stats.logs.toLocaleString()}
-							</span>
-						</div>
-					</div>
-				)}
-
-				{/* Divider */}
-				<div className="h-4 w-px bg-white/[0.08]" />
-
-				{/* Refresh Button */}
-				<button
-					onClick={refresh}
-					disabled={loading}
-					className="
-            flex items-center gap-2 px-3 py-1.5
-            text-[13px] font-medium
-            text-white/70 hover:text-white
-            bg-white/[0.04] hover:bg-white/[0.08]
-            border border-white/[0.08] hover:border-white/[0.12]
-            rounded-md transition-all
-            disabled:opacity-50 disabled:cursor-not-allowed
-          "
-				>
-					<RefreshCw
-						className={`h-3.5 w-3.5 ${loading ? 'animate-spin' : ''}`}
-					/>
-					Refresh
-				</button>
-
-				{/* Connection Status */}
-				<div className="flex items-center gap-2">
-					<span
-						className={`
-              h-2 w-2 rounded-full
-              ${connected ? 'bg-emerald-500' : 'bg-red-500'}
-            `}
-					/>
-					<span className="text-[13px] text-white/50">
-						{connected ? 'Live' : 'Disconnected'}
-					</span>
-				</div>
-			</div>
-		</header>
-	);
-}

package/ui/src/components/TableList.tsx

@@ -1,58 +0,0 @@
-import type { TableSummary } from '../types';
-
-interface TableListProps {
-	tables: TableSummary[];
-	selectedTable: string | null;
-	onSelect: (tableName: string) => void;
-}
-
-export function TableList({ tables, selectedTable, onSelect }: TableListProps) {
-	if (tables.length === 0) {
-		return (
-			<div className="p-4 text-center text-slate-500 text-sm">
-				<p>No tables found</p>
-				<p className="mt-1 text-xs">Check your database schema.</p>
-			</div>
-		);
-	}
-
-	return (
-		<div className="py-1">
-			{tables.map((table) => (
-				<button
-					key={table.name}
-					onClick={() => onSelect(table.name)}
-					className={`w-full text-left px-3 py-2 flex items-center gap-3 transition-colors ${
-						selectedTable === table.name
-							? 'bg-studio-hover text-white'
-							: 'text-slate-400 hover:bg-studio-hover hover:text-slate-200'
-					}`}
-				>
-					{/* Table icon */}
-					<svg
-						className={`w-4 h-4 shrink-0 ${selectedTable === table.name ? 'text-emerald-400' : 'text-slate-500'}`}
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							strokeWidth={1.5}
-							d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
-						/>
-					</svg>
-
-					<div className="flex-1 min-w-0">
-						<div className="truncate text-sm">{table.name}</div>
-						{table.estimatedRowCount !== undefined && (
-							<div className="text-xs text-slate-500">
-								{table.estimatedRowCount.toLocaleString()} rows
-							</div>
-						)}
-					</div>
-				</button>
-			))}
-		</div>
-	);
-}