ntropi 1.0.0 → 1.0.1

package/src/frontend/src/components/ConfigVisualizer.jsx

@@ -1,428 +0,0 @@
-import { useState } from 'react'
-import { useConfigState } from '../context/ConfigState'
-import DatasetEditor from './DatasetEditor'
-import { Activity, Plus, Clock, AlertCircle, Edit2, Trash2, Database, Bot, Copy, ExternalLink } from 'lucide-react'
-// eslint-disable-next-line no-unused-vars
-import { motion, AnimatePresence } from 'framer-motion'
-
-export default function ConfigVisualizer() {
-	const { endpoints, setEndpoints, parsedResult } = useConfigState()
-	const [isModalOpen, setIsModalOpen] = useState(false)
-	const [isDrawerOpen, setIsDrawerOpen] = useState(false)
-	const [selectedEndpointIndex, setSelectedEndpointIndex] = useState(null)
-	const [formData, setFormData] = useState({
-		method: 'GET',
-		path: '',
-		delay: 0,
-		failureRate: 0,
-	})
-
-	const handleDelayScroll = (event, index) => {
-		event.preventDefault()
-		const delta = event.deltaY > 0 ? -50 : 50
-		updateDelay(index, delta)
-	}
-
-	const updateDelay = (index, delta) => {
-		setEndpoints((previousEndpoints) =>
-			previousEndpoints.map((endpoint, currentIndex) =>
-				currentIndex === index
-					? {
-							...endpoint,
-							delay: Math.max(0, Math.round((endpoint.delay ?? 0) + delta)),
-						}
-					: endpoint
-			)
-		)
-	}
-
-	const handleFailureRateScroll = (event, index) => {
-		event.preventDefault()
-		const delta = event.deltaY > 0 ? -0.05 : 0.05
-		updateFailureRate(index, delta)
-	}
-
-	const updateFailureRate = (index, delta) => {
-		setEndpoints((previousEndpoints) =>
-			previousEndpoints.map((endpoint, currentIndex) =>
-				currentIndex === index
-					? {
-							...endpoint,
-							failureRate:
-								Math.max(
-									0,
-									Math.min(100, Math.round(((endpoint.failureRate ?? 0) + delta) * 100))
-								) / 100,
-						}
-					: endpoint
-			)
-		)
-	}
-
-	const handleOpenModal = () => {
-		setIsModalOpen(true)
-	}
-
-	const handleCloseModal = () => {
-		setIsModalOpen(false)
-		setFormData({
-			method: 'GET',
-			path: '',
-			delay: 0,
-			failureRate: 0,
-		})
-	}
-
-	const handleFormChange = (event) => {
-		const { name, value } = event.target
-		setFormData((previous) => ({
-			...previous,
-			[name]:
-				name === 'delay'
-					? Math.max(0, parseInt(value, 10) || 0)
-					: name === 'failureRate'
-						? Math.max(0, Math.min(100, parseInt(value, 10) || 0))
-						: value,
-		}))
-	}
-
-	const handleAddEndpoint = (event) => {
-		event.preventDefault()
-
-		if (!parsedResult.isValid) {
-			alert('Fix invalid JSON in the editor before adding endpoints')
-			return
-		}
-
-		if (!formData.path.trim()) {
-			alert('Please enter a path')
-			return
-		}
-
-		let endpointPath = formData.path.trim()
-		if (!endpointPath.startsWith('/api/')) {
-			endpointPath = `/api/${endpointPath}`
-		}
-
-		const newEndpoint = {
-			path: endpointPath,
-			method: formData.method,
-			data: ["Response from " + endpointPath.replace('/api/', ''), ],
-			delay: Math.max(0, Math.round(formData.delay)),
-			failureRate: Math.max(0, Math.min(100, Math.round(formData.failureRate))),
-		}
-
-		setEndpoints((previousEndpoints) => [...previousEndpoints, newEndpoint])
-		handleCloseModal()
-	}
-
-	const handleDeleteEndpoint = (index) => {
-		if (selectedEndpointIndex === index) {
-			setIsDrawerOpen(false)
-			setSelectedEndpointIndex(null)
-		}
-
-		if (selectedEndpointIndex !== null && selectedEndpointIndex > index) {
-			setSelectedEndpointIndex((previous) => previous - 1)
-		}
-
-		setEndpoints((previousEndpoints) => previousEndpoints.filter((_, currentIndex) => currentIndex !== index))
-	}
-
-	const handleOpenDrawer = (index) => {
-		setSelectedEndpointIndex(index)
-		setIsDrawerOpen(true)
-	}
-
-	const handleCloseDrawer = () => {
-		setIsDrawerOpen(false)
-		setSelectedEndpointIndex(null)
-	}
-
-	const handleUpdateEndpointField = (index, field, value) => {
-		setEndpoints((previousEndpoints) =>
-			previousEndpoints.map((endpoint, currentIndex) =>
-				currentIndex === index
-					? {
-							...endpoint,
-							[field]: value,
-						}
-					: endpoint
-			)
-		)
-	}
-
-	return (
-		<section className="flex flex-col gap-6">
-			{/* Overview header stats or simple title */}
-			<div className="flex items-center justify-between mt-2">
-				<div className="flex items-center gap-3">
-					<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">
-						<Activity size={20} />
-					</div>
-					<div>
-						<h2 className="text-xl font-semibold tracking-tight text-white leading-tight">Live Endpoints</h2>
-						<p className="text-sm text-neutral-400 font-medium">Manage mocked routes and error rates</p>
-					</div>
-				</div>
-				<button
-					type="button"
-					onClick={handleOpenModal}
-					disabled={!parsedResult.isValid}
-					className="flex items-center gap-2 rounded-xl bg-white text-black px-4 py-2 text-sm font-semibold transition-transform hover:scale-105 active:scale-95 disabled:pointer-events-none disabled:opacity-50"
-				>
-					<Plus size={16} />
-					<span>Add Route</span>
-				</button>
-			</div>
-
-			{/* Endpoints grid */}
-			{endpoints.length === 0 ? (
-				<div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/10 bg-[#0A0A0A] p-12 text-center text-neutral-400 mt-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-900 mb-4 border border-white/5">
-						<Activity size={24} className="text-neutral-500" />
-					</div>
-					<h3 className="text-base font-medium text-white mb-1">No Endpoints Mocked</h3>
-					<p className="text-sm px-8 max-w-sm mb-6 leading-relaxed">Create realistic JSON endpoints instantly. Configure simulated delays and random network failures to stress-test your application's reliability.</p>
-					
-					<button
-						type="button"
-						onClick={handleOpenModal}
-						disabled={!parsedResult.isValid}
-						className="flex items-center gap-2 rounded-lg bg-indigo-500/10 text-indigo-400 px-5 py-2.5 text-sm font-semibold transition-colors hover:bg-indigo-500/20 disabled:pointer-events-none disabled:opacity-50"
-					>
-						<Plus size={16} />
-						<span>Create First Mock Route</span>
-					</button>
-				</div>
-			) : (
-				<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
-					<AnimatePresence>
-					{endpoints.map((endpoint, index) => {
-						const methodColor = {
-							GET: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20',
-							POST: 'bg-blue-500/10 text-blue-400 border-blue-500/20',
-							PUT: 'bg-amber-500/10 text-amber-400 border-amber-500/20',
-							PATCH: 'bg-orange-500/10 text-orange-400 border-orange-500/20',
-							DELETE: 'bg-red-500/10 text-red-400 border-red-500/20',
-						}[endpoint.method] || 'bg-neutral-500/10 text-neutral-400 border-neutral-500/20'
-
-						return (
-							<motion.div
-								key={index}
-								initial={{ opacity: 0, y: 10 }}
-								animate={{ opacity: 1, y: 0 }}
-								exit={{ opacity: 0, scale: 0.95 }}
-								transition={{ duration: 0.2 }}
-								className="group relative flex flex-col rounded-xl border border-white/10 bg-[#080808] p-5 transition-all hover:border-white/20 hover:bg-white/2 shadow-xl shadow-black/50"
-							>
-								{/* Endpoint Header */}
-								<div className="flex items-start justify-between">
-									<div className="flex items-center gap-3 overflow-hidden">
-										<span className={`rounded-md px-2.5 py-1 text-[11px] uppercase tracking-wider font-bold border ${methodColor}`}>
-											{endpoint.method}
-										</span>
-										<span className="truncate font-mono text-[15px] font-medium text-neutral-200" title={endpoint.path}>
-											{endpoint.path}
-										</span>
-									</div>
-									<div className="flex items-center gap-2">
-										<button
-											type="button"
-											onClick={() => {
-												window.open(`http://localhost:8008${endpoint.path}`, '_blank', 'noopener,noreferrer');
-											}}
-											className="rounded-md border border-neutral-500/20 bg-neutral-500/5 p-1.5 text-neutral-400 transition-colors hover:bg-neutral-500/20 hover:text-neutral-300"
-											title="Open API Link"
-										>
-											<ExternalLink size={15} />
-										</button>
-										<button
-											type="button"
-											onClick={() => handleOpenDrawer(index)}
-											className="flex items-center gap-1.5 rounded-md border border-indigo-500/20 bg-indigo-500/5 px-2.5 py-1.5 text-xs font-semibold text-indigo-400 transition-colors hover:bg-indigo-500/20 hover:text-indigo-300"
-											title="Edit Custom Dataset"
-										>
-											<Database size={13} />
-											<span>Dataset</span>
-										</button>
-										<button
-											type="button"
-											onClick={() => handleDeleteEndpoint(index)}
-											className="rounded-md border border-red-500/20 bg-red-500/5 p-1.5 text-red-500/70 transition-colors hover:bg-red-500/20 hover:text-red-400"
-											title="Delete Route"
-										>
-											<Trash2 size={15} />
-										</button>
-									</div>
-								</div>
-
-								{/* Endpoint Config Controllers */}
-								<div className="mt-5 grid grid-cols-2 gap-6 border-t border-white/5 pt-5 cursor-default">
-									<div className="flex flex-col gap-2">
-										<span className="flex items-center gap-1.5 text-[11px] uppercase tracking-wider font-semibold text-neutral-500">
-											<Clock size={12} /> Delay
-										</span>
-										<div className="flex items-center gap-2 group/delay relative">
-											<input
-												type="number"
-												min="0"
-												step="50"
-												value={endpoint.delay || 0}
-												onWheel={(e) => handleDelayScroll(e, index)}
-												onChange={(e) => {
-													const val = Math.max(0, parseInt(e.target.value, 10) || 0);
-													setEndpoints((prev) => prev.map((ep, i) => i === index ? { ...ep, delay: val } : ep));
-												}}
-												className="w-full rounded-md border border-white/10 bg-[#121212] px-3 py-1.5 text-sm tabular-nums text-neutral-200 outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 transition-all hover:bg-[#1a1a1a]"
-											/>
-											<span className="absolute right-3 text-xs text-neutral-600 font-medium pointer-events-none">ms</span>
-										</div>
-									</div>
-
-									<div className="flex flex-col gap-2.5">
-										<div className="flex items-center justify-between">
-											<span className="flex items-center gap-1.5 text-[11px] uppercase tracking-wider font-semibold text-neutral-500">
-												<AlertCircle size={12} className={(endpoint.failureRate || 0) > 0 ? "text-amber-500" : ""} /> Failure Rate
-											</span>
-											<span className="text-xs font-semibold text-neutral-300 tabular-nums bg-[#121212] px-2 py-0.5 rounded border border-white/5">{Math.round((endpoint.failureRate || 0))}%</span>
-										</div>
-										<div className="flex items-center h-8.5">
-											<input
-												type="range"
-												min="0"
-												max="100"
-												step="5"
-												value={Math.round((endpoint.failureRate || 0))}
-												onWheel={(e) => handleFailureRateScroll(e, index)}
-												onChange={(e) => {
-													const val = parseInt(e.target.value, 10);
-													setEndpoints((prev) => prev.map((ep, i) => i === index ? { ...ep, failureRate: val } : ep));
-												}}
-												className="h-1.5 w-full appearance-none rounded-full bg-white/10 outline-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-amber-400 [&::-webkit-slider-thumb]:shadow-[0_0_10px_rgba(251,191,36,0.3)] hover:[&::-webkit-slider-thumb]:bg-amber-300 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-amber-400 [&::-moz-range-thumb]:shadow-[0_0_10px_rgba(251,191,36,0.3)] cursor-pointer transition-all"
-											/>
-										</div>
-									</div>
-								</div>
-							</motion.div>
-						)
-					})}
-				</AnimatePresence>
-				</div>
-			)}
-
-			{/* Side drawer for advanced dataset editing per endpoint. */}
-			<DatasetEditor
-				isOpen={isDrawerOpen}
-				endpointIndex={selectedEndpointIndex}
-				endpoint={selectedEndpointIndex !== null ? endpoints[selectedEndpointIndex] : null}
-				onClose={handleCloseDrawer}
-				onSaveField={handleUpdateEndpointField}
-			/>
-
-			{/* Modal for creating a new endpoint entry. */}
-			{isModalOpen && (
-				<div className="fixed inset-0 z-50 flex items-center justify-center bg-[#000000]/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
-					<div className="w-full max-w-105 relative rounded-2xl p-px overflow-hidden group shadow-2xl">
-						<div className="absolute -inset-full animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#191922_0%,#d1d5db_50%,#191922_100%)] opacity-30 group-hover:opacity-70 transition-opacity duration-500 rounded-2xl"></div>
-						<div className="relative w-full h-full rounded-2xl bg-[#13151a] border border-white/5 overflow-hidden">
-							<div className="flex items-center justify-between border-b border-white/5 px-6 py-5">
-								<h2 className="text-[18px] font-bold tracking-tight text-white">Add New Endpoint</h2>
-								<button
-									onClick={handleCloseModal}
-									className="flex h-7 w-7 items-center justify-center rounded-md bg-white/5 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
-								>
-									<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-								</button>
-							</div>
-
-							<form onSubmit={handleAddEndpoint} className="flex flex-col gap-5 p-6 pb-7">
-								<div className="flex flex-col gap-2">
-									<label className="text-[14px] font-semibold text-white">
-										Method
-									</label>
-									<div className="relative">
-										<select
-											name="method"
-											value={formData.method}
-											onChange={handleFormChange}
-											className="w-full appearance-none rounded-xl border border-white/5 bg-[#0a0c10] px-4 py-3.5 text-[14px] font-medium text-white outline-none transition-colors hover:border-white/20 focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-										>
-											<option>GET</option>
-											<option>POST</option>
-											<option>PUT</option>
-											<option>DELETE</option>
-											<option>PATCH</option>
-										</select>
-										<div className="pointer-events-none absolute inset-y-0 right-4 flex items-center text-neutral-500">
-											<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
-										</div>
-									</div>
-								</div>
-
-								<div className="flex flex-col gap-2">
-									<label className="text-[14px] font-semibold text-white">
-										Path
-									</label>
-									<input
-										type="text"
-										name="path"
-										placeholder="users, payments etc."
-										value={formData.path}
-										onChange={handleFormChange}
-										className="w-full rounded-xl border border-white/5 bg-[#0a0c10] px-4 py-3.5 text-[14px] font-mono font-medium text-white placeholder:text-neutral-600 outline-none transition-colors hover:border-white/20 focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400"
-									/>
-								</div>
-
-								<div className="flex flex-col gap-2">
-									<label className="text-[14px] font-semibold text-white">
-										Delay (ms)
-									</label>
-									<input
-										type="number"
-										name="delay"
-										min="0"
-										value={formData.delay}
-										onChange={handleFormChange}
-										className="w-full rounded-xl border border-white/5 bg-[#0a0c10] px-4 py-3.5 text-[14px] font-mono font-medium tabular-nums text-white outline-none transition-colors hover:border-white/20 focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-									/>
-								</div>
-
-								<div className="flex flex-col gap-2">
-									<label className="text-[14px] font-semibold text-white">
-										Failure Rate (%)
-									</label>
-									<input
-										type="number"
-										name="failureRate"
-										min="0"
-										max="100"
-										value={formData.failureRate}
-										onChange={handleFormChange}
-										className="w-full rounded-xl border border-white/5 bg-[#0a0c10] px-4 py-3.5 text-[14px] font-mono font-medium tabular-nums text-white outline-none transition-colors hover:border-white/20 focus:border-neutral-400 focus:ring-1 focus:ring-neutral-400 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-									/>
-								</div>
-
-								<div className="mt-4 flex gap-3">
-									<button
-										type="button"
-										onClick={handleCloseModal}
-										className="flex-1 rounded-xl border border-white/10 bg-[#1c1f26] px-4 py-3.5 text-[15px] font-bold text-white transition-all hover:bg-[#252830]"
-									>
-										Cancel
-									</button>
-									<button
-										type="submit"
-										className="relative flex-1 rounded-xl bg-linear-to-b from-neutral-200 to-neutral-400 px-4 py-3.5 text-[15px] font-bold text-black shadow-[0_0_20px_rgba(255,255,255,0.15)] transition-all hover:from-white hover:to-neutral-300 active:scale-[0.98] before:absolute before:inset-0 before:rounded-xl before:border before:border-white/40"
-									>
-										Add Endpoint
-									</button>
-								</div>
-							</form>
-						</div>
-					</div>
-				</div>
-			)}
-		</section>
-	)
-}