reroute-js 0.1.0 → 0.2.1

package/_/store/src/client/routes/categories/[category].tsx

@@ -1,223 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Link, useData, useParams } from 'reroute-js/react';
-import Header from '../../components/Header';
-import ProductCard from '../../components/ProductCard';
-import { getProductsByCategory, type Product } from '../../lib/api';
-
-const categoryIcons: Record<string, string> = {
-	electronics: '💻',
-	jewelery: '💎',
-	"men's clothing": '👔',
-	"women's clothing": '👗',
-};
-
-const formatCategoryLabel = (category: string) =>
-	category
-		.split(' ')
-		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-		.join(' ');
-
-type SortOption = 'default' | 'price-asc' | 'price-desc' | 'name-asc';
-
-const ssr = {
-	async data({ params }: { params: { category?: string } }) {
-		try {
-			const cat = params?.category;
-			if (!cat) {
-				return {
-					products: [],
-					error: 'No category specified',
-				};
-			}
-			const products = await getProductsByCategory(cat);
-			return { products } as { products: Product[] };
-		} catch (e) {
-			console.error('ssr.data error for category:', e);
-			return {
-				products: [],
-				error: 'Failed to load products for this category.',
-			};
-		}
-	},
-};
-
-function CategoryPage() {
-	const params = useParams<{ category: string }>();
-	const category = params.category || '';
-
-	const routeData = useData<{ products: Product[]; error?: string }>();
-	const [products, setProducts] = useState<Product[]>(
-		routeData?.products || [],
-	);
-	const [filteredProducts, setFilteredProducts] = useState<Product[]>(
-		routeData?.products || [],
-	);
-	const [searchQuery, setSearchQuery] = useState<string>('');
-	const [sortBy, setSortBy] = useState<SortOption>('default');
-	const [loading, setLoading] = useState(!routeData);
-	const [error, setError] = useState<string | null>(routeData?.error || null);
-
-	// Load products on mount if not from SSR
-	useEffect(() => {
-		if (products.length > 0) {
-			setLoading(false);
-			return;
-		}
-		if (!category) {
-			setError('No category specified');
-			setLoading(false);
-			return;
-		}
-
-		setLoading(true);
-		setError(null);
-
-		getProductsByCategory(category)
-			.then((data) => {
-				setProducts(data);
-				setFilteredProducts(data);
-			})
-			.catch((err) => {
-				console.error('Failed to load products:', err);
-				setError('Failed to load products. Please try again later.');
-			})
-			.finally(() => {
-				setLoading(false);
-			});
-	}, [category, products.length]);
-
-	// Filter and sort products
-	useEffect(() => {
-		let result = [...products];
-
-		// Apply search filter
-		if (searchQuery.trim()) {
-			const query = searchQuery.toLowerCase();
-			result = result.filter(
-				(product) =>
-					product.title.toLowerCase().includes(query) ||
-					product.description.toLowerCase().includes(query),
-			);
-		}
-
-		// Apply sorting
-		switch (sortBy) {
-			case 'price-asc':
-				result.sort((a, b) => a.price - b.price);
-				break;
-			case 'price-desc':
-				result.sort((a, b) => b.price - a.price);
-				break;
-			case 'name-asc':
-				result.sort((a, b) => a.title.localeCompare(b.title));
-				break;
-			default:
-				// Keep default order
-				break;
-		}
-
-		setFilteredProducts(result);
-	}, [products, searchQuery, sortBy]);
-
-	const categoryLabel = formatCategoryLabel(category);
-	const icon = categoryIcons[category] || '🏷️';
-
-	return (
-		<>
-			<Header />
-
-			<main className='container-custom py-8'>
-				{/* Breadcrumbs */}
-				<nav className='flex items-center gap-2 text-sm text-gray-600 mb-8'>
-					<Link to='/' className='link'>
-						Home
-					</Link>
-					<span>/</span>
-					<Link to='/categories' className='link'>
-						Categories
-					</Link>
-					<span>/</span>
-					<span className='text-gray-900'>{categoryLabel}</span>
-				</nav>
-
-				{/* Header */}
-				<div className='mb-8'>
-					<div className='flex items-center gap-3 mb-2'>
-						<span className='text-5xl'>{icon}</span>
-						<h1 className='section-heading mb-0'>{categoryLabel}</h1>
-					</div>
-					<p className='section-subheading'>
-						{products.length} products in this category
-					</p>
-				</div>
-
-				{/* Controls */}
-				<div className='flex flex-wrap items-center gap-4 mb-8 p-6 bg-white rounded-xl shadow-card'>
-					<input
-						type='search'
-						placeholder='Search in this category...'
-						className='input flex-1 min-w-[250px]'
-						value={searchQuery}
-						onChange={(e) => setSearchQuery(e.target.value)}
-					/>
-
-					<select
-						className='select min-w-[200px]'
-						value={sortBy}
-						onChange={(e) => setSortBy(e.target.value as SortOption)}
-					>
-						<option value='default'>Sort: Default</option>
-						<option value='price-asc'>Price: Low to High</option>
-						<option value='price-desc'>Price: High to Low</option>
-						<option value='name-asc'>Name: A-Z</option>
-					</select>
-
-					{!loading && (
-						<div className='ml-auto text-sm text-gray-600'>
-							Showing {filteredProducts.length} of {products.length} products
-						</div>
-					)}
-				</div>
-
-				{/* Products Grid */}
-				{loading ? (
-					<div className='text-center py-16 text-gray-600 text-lg'>
-						<div className='animate-pulse'>Loading products...</div>
-					</div>
-				) : error ? (
-					<div className='text-center py-16 bg-red-50 text-red-600 text-lg rounded-xl'>
-						{error}
-						<div className='mt-4'>
-							<Link to='/categories' className='link font-semibold'>
-								← Back to Categories
-							</Link>
-						</div>
-					</div>
-				) : filteredProducts.length === 0 ? (
-					<div className='text-center py-16 text-gray-600 text-lg'>
-						<div className='text-6xl mb-4'>🔍</div>
-						<div className='mb-4'>No products found matching your criteria</div>
-						{searchQuery && (
-							<button
-								type='button'
-								className='btn-primary btn-sm'
-								onClick={() => setSearchQuery('')}
-							>
-								Clear Search
-							</button>
-						)}
-					</div>
-				) : (
-					<div className='product-grid animate-in'>
-						{filteredProducts.map((product) => (
-							<ProductCard key={product.id} product={product} />
-						))}
-					</div>
-				)}
-			</main>
-		</>
-	);
-}
-
-export default CategoryPage;
-export { ssr };

package/_/store/src/client/routes/categories/index.tsx

@@ -1,187 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Link, useData } from 'reroute-js/react';
-import Header from '../../components/Header';
-import { getCategories } from '../../lib/api';
-
-const categoryIcons: Record<string, string> = {
-	electronics: '💻',
-	jewelery: '💎',
-	"men's clothing": '👔',
-	"women's clothing": '👗',
-};
-
-const categoryDescriptions: Record<string, string> = {
-	electronics: 'Explore the latest in technology and gadgets',
-	jewelery: 'Discover beautiful jewelry and accessories',
-	"men's clothing": 'Shop stylish clothing for men',
-	"women's clothing": 'Find fashionable apparel for women',
-};
-
-const formatCategoryLabel = (category: string) =>
-	category
-		.split(' ')
-		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-		.join(' ');
-
-const ssr = {
-	async data() {
-		try {
-			const categories = await getCategories();
-			return { categories } as { categories: string[] };
-		} catch (e) {
-			console.error('ssr.data error for categories:', e);
-			return { categories: [], error: 'Failed to load categories.' };
-		}
-	},
-};
-
-function CategoriesIndexPage() {
-	const routeData = useData<{ categories: string[]; error?: string }>();
-	const [categories, setCategories] = useState(routeData?.categories ?? []);
-	const [loading, setLoading] = useState(!routeData);
-	const [error, setError] = useState<string | null>(routeData?.error ?? null);
-
-	useEffect(() => {
-		if (routeData?.categories?.length) {
-			setCategories(routeData.categories);
-			setLoading(false);
-			return;
-		}
-
-		let cancelled = false;
-		setLoading(true);
-		setError(null);
-
-		getCategories()
-			.then((data) => {
-				if (!cancelled) {
-					setCategories(data);
-				}
-			})
-			.catch((err) => {
-				console.error('Failed to load categories:', err);
-				if (!cancelled) {
-					setError('Failed to load categories. Please try again later.');
-				}
-			})
-			.finally(() => {
-				if (!cancelled) {
-					setLoading(false);
-				}
-			});
-
-		return () => {
-			cancelled = true;
-		};
-	}, [routeData]);
-
-	if (loading) {
-		return (
-			<>
-				<Header />
-				<main className='container-custom py-8'>
-					<div className='text-center py-16 text-gray-600 text-lg'>
-						<div className='animate-pulse'>Loading categories...</div>
-					</div>
-				</main>
-			</>
-		);
-	}
-
-	if (error) {
-		return (
-			<>
-				<Header />
-				<main className='container-custom py-8'>
-					<div className='text-center py-16 bg-red-50 text-red-600 text-lg rounded-xl'>
-						{error}
-					</div>
-				</main>
-			</>
-		);
-	}
-
-	return (
-		<>
-			<Header />
-
-			<main className='container-custom py-8'>
-				<div className='mb-12'>
-					<h1 className='section-heading'>Shop by Category</h1>
-					<p className='section-subheading'>
-						Browse curated collections and jump straight into your favorite
-						category.
-					</p>
-				</div>
-
-				<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12'>
-					{categories.map((category) => {
-						const label = formatCategoryLabel(category);
-						const description =
-							categoryDescriptions[category] || `Explore our ${label} picks`;
-						const icon = categoryIcons[category] || '🏷️';
-						const to = `/categories/${encodeURIComponent(category)}`;
-
-						return (
-							<Link
-								key={category}
-								to={to}
-								className='card card-hover group p-8 no-underline text-gray-900 block'
-							>
-								<div className='text-5xl mb-4'>{icon}</div>
-								<h2 className='text-2xl font-bold mb-2 capitalize group-hover:text-primary-600 transition-colors'>
-									{label}
-								</h2>
-								<p className='text-gray-600 text-sm mb-4'>{description}</p>
-								<span className='inline-flex items-center gap-2 btn-primary btn-sm'>
-									View Products <span aria-hidden='true'>→</span>
-								</span>
-							</Link>
-						);
-					})}
-				</div>
-
-				<div className='mt-16 p-8 bg-gray-50 rounded-xl text-center'>
-					<h3 className='text-2xl font-bold mb-6 text-gray-900'>
-						Why Shop With Us?
-					</h3>
-					<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8'>
-						{[
-							{
-								icon: '🚚',
-								title: 'Fast Shipping',
-								desc: 'Free delivery on orders over $50',
-							},
-							{
-								icon: '🔒',
-								title: 'Secure Payment',
-								desc: 'Your data is always protected',
-							},
-							{
-								icon: '↩️',
-								title: 'Easy Returns',
-								desc: '30-day return policy',
-							},
-							{
-								icon: '⭐',
-								title: 'Quality Products',
-								desc: 'Verified and rated by customers',
-							},
-						].map((item) => (
-							<div key={item.title}>
-								<div className='text-4xl mb-2'>{item.icon}</div>
-								<div className='font-semibold text-gray-700 mb-1'>
-									{item.title}
-								</div>
-								<div className='text-sm text-gray-600'>{item.desc}</div>
-							</div>
-						))}
-					</div>
-				</div>
-			</main>
-		</>
-	);
-}
-
-export default CategoriesIndexPage;
-export { ssr };

package/_/store/src/client/routes/index.tsx

@@ -1,126 +0,0 @@
-import { Link, useData } from 'reroute-js/react';
-import Header from '../components/Header';
-import ProductCard from '../components/ProductCard';
-import { getAllProducts, type Product } from '../lib/api';
-
-const ssr = {
-	async data() {
-		try {
-			const products = await getAllProducts();
-			const shuffled = [...products].sort(() => Math.random() - 0.5);
-			return { featuredProducts: shuffled.slice(0, 4) } as {
-				featuredProducts: Product[];
-			};
-		} catch (e) {
-			console.error('ssr.data error for home:', e);
-			return {
-				featuredProducts: [],
-				error: 'Failed to load featured products.',
-			};
-		}
-	},
-};
-
-function HomePage() {
-	const data = useData<{ featuredProducts: Product[]; error?: string }>();
-	const featuredProducts = data?.featuredProducts || [];
-	const error = data?.error || null;
-
-	return (
-		<>
-			<Header />
-
-			<main className='container-custom py-8'>
-				{/* Hero Section */}
-				<section className='text-center py-12 mb-12 animate-slide-up'>
-					<h1 className='text-5xl md:text-6xl font-bold text-gray-900 mb-4 leading-tight'>
-						Welcome to Reroute Store
-					</h1>
-					<p className='text-xl text-gray-600 mb-8 max-w-2xl mx-auto'>
-						A modern e-commerce demo built with Reroute, showcasing file-based
-						routing, SSR, and seamless API integration with FakeStoreAPI
-					</p>
-					<div className='flex gap-4 justify-center flex-wrap'>
-						<Link to='/products' className='btn-primary btn-lg'>
-							Shop Now
-						</Link>
-						<Link to='/categories' className='btn-secondary btn-lg'>
-							Browse Categories
-						</Link>
-					</div>
-				</section>
-
-				{/* Featured Products */}
-				<section className='mb-16'>
-					<div className='flex justify-between items-center mb-6'>
-						<h2 className='section-heading mb-0'>Featured Products</h2>
-						<Link to='/products' className='link font-semibold text-lg'>
-							View All →
-						</Link>
-					</div>
-
-					{error ? (
-						<div className='text-center py-12 bg-red-50 text-red-600 text-lg rounded-xl'>
-							{error}
-						</div>
-					) : (
-						<div className='product-grid'>
-							{featuredProducts.map((product) => (
-								<ProductCard key={product.id} product={product} />
-							))}
-						</div>
-					)}
-				</section>
-
-				{/* Features */}
-				<section className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-12 pt-8'>
-					<div className='feature-card'>
-						<div className='text-5xl mb-4'>⚡</div>
-						<h3 className='text-xl font-semibold mb-2 text-gray-900'>
-							Lightning Fast
-						</h3>
-						<p className='text-gray-600 leading-relaxed'>
-							Built on Bun for blazing fast performance and server-side
-							rendering
-						</p>
-					</div>
-
-					<div className='feature-card'>
-						<div className='text-5xl mb-4'>🎯</div>
-						<h3 className='text-xl font-semibold mb-2 text-gray-900'>
-							File-Based Routing
-						</h3>
-						<p className='text-gray-600 leading-relaxed'>
-							Automatic route generation from your file structure with zero
-							configuration
-						</p>
-					</div>
-
-					<div className='feature-card'>
-						<div className='text-5xl mb-4'>🔄</div>
-						<h3 className='text-xl font-semibold mb-2 text-gray-900'>
-							SSR Support
-						</h3>
-						<p className='text-gray-600 leading-relaxed'>
-							SEO-friendly server-side rendering with automatic hydration
-						</p>
-					</div>
-
-					<div className='feature-card'>
-						<div className='text-5xl mb-4'>📦</div>
-						<h3 className='text-xl font-semibold mb-2 text-gray-900'>
-							API Integration
-						</h3>
-						<p className='text-gray-600 leading-relaxed'>
-							Seamless integration with external APIs using serializable
-							responses
-						</p>
-					</div>
-				</section>
-			</main>
-		</>
-	);
-}
-
-export default HomePage;
-export { ssr };