Code-MCP

import React, { useState, useEffect, useCallback } from "react"; // ============================================ // Custom Hooks // ============================================ /** * Custom hook for fetching data with loading and error states */ export function useFetch<T>(url: string) { const [data, setData] = useState<T | null>(null); const [loading, setLoading] = useState(true); const [error, setError] = useState<Error | null>(null); useEffect(() => { const controller = new AbortController(); setLoading(true); fetch(url, { signal: controller.signal }) .then((res) => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); }) .then(setData) .catch((err) => { if (err.name !== "AbortError") setError(err); }) .finally(() => setLoading(false)); return () => controller.abort(); }, [url]); return { data, loading, error }; } /** * Custom hook for local storage with SSR support */ export function useLocalStorage<T>(key: string, initialValue: T) { const [storedValue, setStoredValue] = useState<T>(() => { if (typeof window === "undefined") return initialValue; try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch { return initialValue; } }); const setValue = useCallback( (value: T | ((val: T) => T)) => { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); if (typeof window !== "undefined") { window.localStorage.setItem(key, JSON.stringify(valueToStore)); } }, [key, storedValue], ); return [storedValue, setValue] as const; } /** * Custom hook for debounced values */ export function useDebounce<T>(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const timer = setTimeout(() => setDebouncedValue(value), delay); return () => clearTimeout(timer); }, [value, delay]); return debouncedValue; } // ============================================ // Utility Components // ============================================ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: "primary" | "secondary" | "danger"; size?: "sm" | "md" | "lg"; loading?: boolean; } export const Button: React.FC<ButtonProps> = ({ children, variant = "primary", size = "md", loading = false, disabled, className = "", ...props }) => { const baseStyles = "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2"; const variants = { primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500", secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500", danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500", }; const sizes = { sm: "px-3 py-1.5 text-sm", md: "px-4 py-2 text-base", lg: "px-6 py-3 text-lg", }; return ( <button className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`} disabled={disabled || loading} {...props} > {loading ? "Loading..." : children} </button> ); }; interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { label?: string; error?: string; } export const Input: React.FC<InputProps> = ({ label, error, className = "", id, ...props }) => { const inputId = id || label?.toLowerCase().replace(/\s+/g, "-"); return ( <div className="flex flex-col gap-1"> {label && ( <label htmlFor={inputId} className="text-sm font-medium text-gray-700"> {label} </label> )} <input id={inputId} className={`px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${ error ? "border-red-500" : "border-gray-300" } ${className}`} {...props} /> {error && <span className="text-sm text-red-500">{error}</span>} </div> ); }; // ============================================ // Form Example with Validation // ============================================ interface FormData { email: string; password: string; } export const LoginForm: React.FC = () => { const [formData, setFormData] = useState<FormData>({ email: "", password: "", }); const [errors, setErrors] = useState<Partial<FormData>>({}); const [submitting, setSubmitting] = useState(false); const validate = (): boolean => { const newErrors: Partial<FormData> = {}; if (!formData.email) { newErrors.email = "Email is required"; } else if (!/\S+@\S+\.\S+/.test(formData.email)) { newErrors.email = "Invalid email format"; } if (!formData.password) { newErrors.password = "Password is required"; } else if (formData.password.length < 8) { newErrors.password = "Password must be at least 8 characters"; } setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!validate()) return; setSubmitting(true); try { // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)); console.log("Form submitted:", formData); } finally { setSubmitting(false); } }; return ( <form onSubmit={handleSubmit} className="flex flex-col gap-4 max-w-md"> <Input label="Email" type="email" value={formData.email} onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value })) } error={errors.email} /> <Input label="Password" type="password" value={formData.password} onChange={(e) => setFormData((prev) => ({ ...prev, password: e.target.value })) } error={errors.password} /> <Button type="submit" loading={submitting}> Sign In </Button> </form> ); }; export default { useFetch, useLocalStorage, useDebounce, Button, Input, LoginForm, };