forked from cardosofelipe/fast-next-template
Add Dev Hub for interactive design system demos and /dev/forms with validation examples
- **Design System Hub:** Introduce `/dev` as a central hub for interactive design system showcases (components, layouts, spacing, etc.). Includes live demos, highlights, and documentation links. - **Forms Demo:** Add `/dev/forms` for reactive forms with `react-hook-form` and `Zod`. Demonstrate validation patterns, error handling, loading states, and accessibility best practices. - **Features:** Showcase reusable `Example`, `ExampleSection`, and `BeforeAfter` components for better UI demonstration and code previews.
This commit is contained in:
309
frontend/src/app/dev/page.tsx
Normal file
309
frontend/src/app/dev/page.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
/**
|
||||
* Design System Hub
|
||||
* Central landing page for all interactive design system demonstrations
|
||||
* Access: /dev
|
||||
*/
|
||||
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Palette,
|
||||
Layout,
|
||||
Ruler,
|
||||
FileText,
|
||||
BookOpen,
|
||||
ArrowRight,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Design System Hub | Dev',
|
||||
description: 'Interactive demonstrations and documentation for the FastNext design system',
|
||||
};
|
||||
|
||||
const demoPages = [
|
||||
{
|
||||
title: 'Components',
|
||||
description: 'Explore all shadcn/ui components with live examples and copy-paste code',
|
||||
href: '/dev/components',
|
||||
icon: Palette,
|
||||
status: 'enhanced' as const,
|
||||
highlights: ['All variants', 'Interactive demos', 'Copy-paste code'],
|
||||
},
|
||||
{
|
||||
title: 'Layouts',
|
||||
description: 'Essential layout patterns for pages, dashboards, forms, and content',
|
||||
href: '/dev/layouts',
|
||||
icon: Layout,
|
||||
status: 'new' as const,
|
||||
highlights: ['Grid vs Flex', 'Responsive patterns', 'Before/after examples'],
|
||||
},
|
||||
{
|
||||
title: 'Spacing',
|
||||
description: 'Visual demonstrations of spacing philosophy and best practices',
|
||||
href: '/dev/spacing',
|
||||
icon: Ruler,
|
||||
status: 'new' as const,
|
||||
highlights: ['Parent-controlled', 'Gap vs Space-y', 'Anti-patterns'],
|
||||
},
|
||||
{
|
||||
title: 'Forms',
|
||||
description: 'Complete form implementations with validation and error handling',
|
||||
href: '/dev/forms',
|
||||
icon: FileText,
|
||||
status: 'new' as const,
|
||||
highlights: ['react-hook-form', 'Zod validation', 'Loading states'],
|
||||
},
|
||||
];
|
||||
|
||||
const documentationLinks = [
|
||||
{
|
||||
title: 'Quick Start',
|
||||
description: '5-minute crash course',
|
||||
href: '/docs/design-system/00-quick-start.md',
|
||||
},
|
||||
{
|
||||
title: 'Complete Documentation',
|
||||
description: 'Full design system guide',
|
||||
href: '/docs/design-system/README.md',
|
||||
},
|
||||
{
|
||||
title: 'AI Guidelines',
|
||||
description: 'Rules for AI code generation',
|
||||
href: '/docs/design-system/08-ai-guidelines.md',
|
||||
},
|
||||
{
|
||||
title: 'Quick Reference',
|
||||
description: 'Cheat sheet for lookups',
|
||||
href: '/docs/design-system/99-reference.md',
|
||||
},
|
||||
];
|
||||
|
||||
export default function DesignSystemHub() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="h-8 w-8 text-primary" />
|
||||
<h1 className="text-4xl font-bold tracking-tight">
|
||||
Design System Hub
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl">
|
||||
Interactive demonstrations, live examples, and copy-paste code for
|
||||
the FastNext design system. Built with shadcn/ui + Tailwind CSS 4.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="container mx-auto px-4 py-12">
|
||||
<div className="space-y-12">
|
||||
{/* Demo Pages Grid */}
|
||||
<section className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold tracking-tight">
|
||||
Interactive Demonstrations
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
Explore live examples with copy-paste code snippets
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{demoPages.map((page) => {
|
||||
const Icon = page.icon;
|
||||
return (
|
||||
<Card
|
||||
key={page.href}
|
||||
className="group relative overflow-hidden transition-all hover:border-primary/50"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="rounded-lg bg-primary/10 p-2">
|
||||
<Icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
{page.status === 'new' && (
|
||||
<Badge variant="default" className="gap-1">
|
||||
<Sparkles className="h-3 w-3" />
|
||||
New
|
||||
</Badge>
|
||||
)}
|
||||
{page.status === 'enhanced' && (
|
||||
<Badge variant="secondary">Enhanced</Badge>
|
||||
)}
|
||||
</div>
|
||||
<CardTitle className="mt-4">{page.title}</CardTitle>
|
||||
<CardDescription>{page.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Highlights */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{page.highlights.map((highlight) => (
|
||||
<Badge key={highlight} variant="outline" className="text-xs">
|
||||
{highlight}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<Link href={page.href} className="block">
|
||||
<Button className="w-full gap-2 group-hover:bg-primary/90">
|
||||
Explore {page.title}
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Documentation Links */}
|
||||
<section className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold tracking-tight flex items-center gap-2">
|
||||
<BookOpen className="h-6 w-6" />
|
||||
Documentation
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
Comprehensive guides and reference materials
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{documentationLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group"
|
||||
>
|
||||
<Card className="h-full transition-all hover:border-primary/50 hover:bg-accent/50">
|
||||
<CardHeader className="space-y-1">
|
||||
<CardTitle className="text-base group-hover:text-primary transition-colors">
|
||||
{link.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
{link.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Key Features */}
|
||||
<section className="space-y-6">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">
|
||||
Key Features
|
||||
</h2>
|
||||
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">🎨 OKLCH Color System</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
Perceptually uniform colors with semantic tokens for consistent theming
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">📏 Parent-Controlled Spacing</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
Consistent spacing philosophy using gap and space-y utilities
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">♿ WCAG AA Compliant</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
Full accessibility support with keyboard navigation and screen readers
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">📱 Mobile-First Responsive</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
Tailwind breakpoints with progressive enhancement
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">🤖 AI-Optimized</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
Dedicated guidelines for Claude Code, Cursor, and GitHub Copilot
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">🚀 Production-Ready</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-muted-foreground">
|
||||
Battle-tested patterns with real-world examples
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="mt-16 border-t py-8">
|
||||
<div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
|
||||
<p>
|
||||
FastNext Design System • Built with{' '}
|
||||
<a
|
||||
href="https://ui.shadcn.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium hover:text-foreground"
|
||||
>
|
||||
shadcn/ui
|
||||
</a>
|
||||
{' + '}
|
||||
<a
|
||||
href="https://tailwindcss.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-medium hover:text-foreground"
|
||||
>
|
||||
Tailwind CSS 4
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user