@bloomneo/uikit 1.5.0

package/bin/templates/multi/src/pages/Dashboard.tsx.template

@@ -0,0 +1,306 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@bloomneo/uikit/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { AdminLayout } from '@bloomneo/uikit/admin';
+import { 
+  BarChart3, 
+  Users, 
+  TrendingUp, 
+  Activity, 
+  DollarSign,
+  ArrowUpRight,
+  ArrowDownRight,
+  Eye,
+  Download,
+  Filter,
+  Home,
+  Layout,
+  Palette,
+  BookOpen,
+  Mail
+} from 'lucide-react';
+import type { NavigationItem } from '@bloomneo/uikit';
+
+const DashboardPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  // Navigation configuration matching Header structure
+  const adminNavigation: NavigationItem[] = [
+    { key: 'home', label: 'Home', href: '/', icon: Home },
+    { key: 'components', label: 'Components', href: '/components', icon: Layout },
+    { key: 'themes', label: 'Themes', href: '/themes', icon: Palette },
+    { 
+      key: 'pages', 
+      label: 'Pages', 
+      icon: BookOpen,
+      items: [
+        { key: 'login', label: 'Login', href: '/login' },
+        { key: 'dashboard', label: 'Dashboard', href: '/dashboard' },
+        { key: 'error', label: 'Error Page', href: '/error' },
+      ]
+    },
+    { key: 'about', label: 'About', href: '/about', icon: BookOpen },
+    { key: 'contact', label: 'Contact', href: '/contact', icon: Mail },
+  ];
+
+  const handleNavigation = (href: string) => {
+    navigate(href);
+  };
+
+  const stats = [
+    {
+      title: 'Total Revenue',
+      value: '$45,231.89',
+      change: '+20.1%',
+      trend: 'up',
+      icon: DollarSign,
+      description: 'from last month'
+    },
+    {
+      title: 'Active Users',
+      value: '2,350',
+      change: '+180.1%',
+      trend: 'up',
+      icon: Users,
+      description: 'from last month'
+    },
+    {
+      title: 'Conversion Rate',
+      value: '12.5%',
+      change: '+19%',
+      trend: 'up',
+      icon: TrendingUp,
+      description: 'from last month'
+    },
+    {
+      title: 'Bounce Rate',
+      value: '24.8%',
+      change: '-4.3%',
+      trend: 'down',
+      icon: Activity,
+      description: 'from last month'
+    },
+  ];
+
+  const recentActivity = [
+    { id: 1, user: 'Alice Johnson', action: 'Created new project', time: '2 minutes ago', status: 'success' },
+    { id: 2, user: 'Bob Smith', action: 'Updated user profile', time: '5 minutes ago', status: 'info' },
+    { id: 3, user: 'Carol Davis', action: 'Deleted 3 items', time: '10 minutes ago', status: 'warning' },
+    { id: 4, user: 'David Wilson', action: 'Failed login attempt', time: '15 minutes ago', status: 'error' },
+  ];
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'success': return 'text-green-600 bg-green-100';
+      case 'info': return 'text-blue-600 bg-blue-100';
+      case 'warning': return 'text-yellow-600 bg-yellow-100';
+      case 'error': return 'text-red-600 bg-red-100';
+      default: return 'text-gray-600 bg-gray-100';
+    }
+  };
+
+  return (
+    <AdminLayout scheme="sidebar" tone="brand">
+      <AdminLayout.Sidebar 
+        navigation={adminNavigation}
+        currentPath="/dashboard"
+        onNavigate={handleNavigation}
+        logo={<div className="font-bold">Admin Panel</div>}
+      />
+      <AdminLayout.Header 
+        title="Dashboard"
+        actions={
+          <div className="flex items-center gap-3">
+            <Button variant="outline" size="sm">
+              <Download className="h-4 w-4 mr-2" />
+              Export
+            </Button>
+            <Button variant="outline" size="sm">
+              <Filter className="h-4 w-4 mr-2" />
+              Filter
+            </Button>
+            <Button size="sm">
+              <Eye className="h-4 w-4 mr-2" />
+              View All
+            </Button>
+          </div>
+        }
+      />
+      <AdminLayout.Content>
+      <div className="space-y-8 p-6">
+      {/* Content Header */}
+      <div className="space-y-2">
+        <p className="text-muted-foreground">
+          Welcome back! Here's what's happening with your projects.
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {stats.map((stat, index) => {
+          const Icon = stat.icon;
+          return (
+            <Card key={index} className="relative overflow-hidden">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">
+                  {stat.title}
+                </CardTitle>
+                <Icon className="h-4 w-4 text-muted-foreground" />
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <div className="flex items-center space-x-1 text-xs text-muted-foreground">
+                  {stat.trend === 'up' ? (
+                    <ArrowUpRight className="h-3 w-3 text-green-500" />
+                  ) : (
+                    <ArrowDownRight className="h-3 w-3 text-red-500" />
+                  )}
+                  <span className={stat.trend === 'up' ? 'text-green-500' : 'text-red-500'}>
+                    {stat.change}
+                  </span>
+                  <span>{stat.description}</span>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* Charts Section */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Chart Placeholder */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Revenue Overview</CardTitle>
+            <CardDescription>
+              Monthly revenue for the last 6 months
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[200px] bg-muted/30 rounded-lg flex items-center justify-center">
+              <div className="text-center space-y-2">
+                <BarChart3 className="h-12 w-12 text-muted-foreground mx-auto" />
+                <p className="text-sm text-muted-foreground">Chart Component Placeholder</p>
+                <p className="text-xs text-muted-foreground">
+                  Integrate with chart libraries like Chart.js or Recharts
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* User Growth */}
+        <Card>
+          <CardHeader>
+            <CardTitle>User Growth</CardTitle>
+            <CardDescription>
+              New user registrations over time
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[200px] bg-muted/30 rounded-lg flex items-center justify-center">
+              <div className="text-center space-y-2">
+                <TrendingUp className="h-12 w-12 text-muted-foreground mx-auto" />
+                <p className="text-sm text-muted-foreground">Growth Chart Placeholder</p>
+                <p className="text-xs text-muted-foreground">
+                  Shows user acquisition trends
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Recent Activity & Quick Actions */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Recent Activity */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Recent Activity</CardTitle>
+            <CardDescription>
+              Latest user actions and system events
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {recentActivity.map((activity) => (
+                <div key={activity.id} className="flex items-center justify-between p-3 rounded-lg bg-muted/20">
+                  <div className="flex items-center space-x-3">
+                    <div className={`w-2 h-2 rounded-full ${getStatusColor(activity.status)}`} />
+                    <div>
+                      <p className="text-sm font-medium">{activity.user}</p>
+                      <p className="text-xs text-muted-foreground">{activity.action}</p>
+                    </div>
+                  </div>
+                  <span className="text-xs text-muted-foreground">{activity.time}</span>
+                </div>
+              ))}
+            </div>
+            <div className="mt-4 text-center">
+              <Button variant="outline" size="sm">
+                View All Activity
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Quick Actions */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Quick Actions</CardTitle>
+            <CardDescription>
+              Common dashboard tasks
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Button className="w-full justify-start" variant="outline">
+              <Users className="mr-2 h-4 w-4" />
+              Manage Users
+            </Button>
+            <Button className="w-full justify-start" variant="outline" asChild>
+              <Link to="/components">
+                <BarChart3 className="mr-2 h-4 w-4" />
+                View Reports
+              </Link>
+            </Button>
+            <Button className="w-full justify-start" variant="outline" asChild>
+              <Link to="/themes">
+                <Activity className="mr-2 h-4 w-4" />
+                System Status
+              </Link>
+            </Button>
+            <Button className="w-full justify-start" variant="outline" asChild>
+              <Link to="/contact">
+                <DollarSign className="mr-2 h-4 w-4" />
+                Billing & Plans
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Demo Note */}
+      <Card className="bg-muted/30">
+        <CardContent className="pt-6">
+          <div className="text-center space-y-2">
+            <h3 className="font-semibold">Dashboard Demo</h3>
+            <p className="text-sm text-muted-foreground">
+              This dashboard showcases UIKit components in a real-world layout with statistics, charts, and activity feeds.
+            </p>
+            <div className="flex flex-wrap justify-center gap-4 text-xs text-muted-foreground">
+              <span>• Responsive grid layout</span>
+              <span>• Interactive statistics</span>
+              <span>• Activity tracking</span>
+              <span>• Chart placeholders</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      </div>
+      </AdminLayout.Content>
+    </AdminLayout>
+  );
+};
+
+export default DashboardPage;

package/bin/templates/multi/src/pages/ErrorPage.tsx.template

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from '@bloomneo/uikit/button';
+import { BlankLayout } from '@bloomneo/uikit/blank';
+import { Home, ArrowLeft } from 'lucide-react';
+
+const ErrorPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <BlankLayout scheme="simple" tone="subtle">
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center space-y-6">
+          <div className="text-6xl font-bold text-muted-foreground">404</div>
+          <h1 className="text-2xl font-bold">Page Not Found</h1>
+          <p className="text-muted-foreground">
+            The page you're looking for doesn't exist.
+          </p>
+          <div className="flex gap-4 justify-center">
+            <Button onClick={() => navigate(-1)} variant="outline">
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Button>
+            <Button asChild>
+              <Link to="/">
+                <Home className="mr-2 h-4 w-4" />
+                Go Home
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </BlankLayout>
+  );
+};
+
+export default ErrorPage;

package/bin/templates/multi/src/pages/Home.tsx.template

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '@bloomneo/uikit/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { useTheme } from '@bloomneo/uikit/theme-provider';
+import { ArrowRight, Palette, Layout, BookOpen, Mail } from 'lucide-react';
+import { SEO } from '../components';
+import { asset } from '../utils/asset';
+
+export const HomePage: React.FC = () => {
+  const { theme } = useTheme();
+  
+  const themeDescriptions = {
+    base: 'Clean default configuration showcasing the base system',
+    elegant: 'Fresh sky blue theme with clean design', 
+    metro: 'Dark teal theme with bright yellow accents',
+    studio: 'Sophisticated neutral theme with golden accents',
+    vivid: 'Premium cursive theme with sophisticated typography'
+  };
+
+  return (
+    <>
+      <SEO
+        title="UIKit Multi-Page Demo - Home"
+        description="Professional React components with file-based routing, showcasing layouts, navigation, and code organization"
+      />
+      <div className="space-y-12">
+      {/* Hero Section */}
+      <section className="text-center py-16 bg-gradient-to-b from-background to-muted/20 rounded-lg">
+        <div className="space-y-6">
+          <div className="mb-6">
+            <img
+              src={asset('/hero_multi.svg')}
+              alt="UIKit Multi-Page Hero Illustration"
+              className="mx-auto max-w-md w-full h-auto"
+            />
+          </div>
+          <h1 className="voila-heading text-4xl md:text-6xl mb-6 text-accent">
+            UIKit Multi-Page App
+          </h1>
+          <p className="voila-subheading text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
+            Professional React components with file-based routing, showcasing layouts, navigation, and code organization
+          </p>
+          <div className="inline-flex items-center gap-3 text-sm text-muted-foreground bg-muted/50 backdrop-blur px-6 py-3 rounded-full border">
+            <div className="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
+            {themeDescriptions[theme as keyof typeof themeDescriptions]}
+          </div>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
+            <Button size="lg" asChild>
+              <Link to="/components">
+                <Layout className="mr-2 h-4 w-4" />
+                Explore Components
+              </Link>
+            </Button>
+            <Button variant="secondary" size="lg" asChild>
+              <Link to="/themes">
+                <Palette className="mr-2 h-4 w-4" />
+                Browse Themes
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="space-y-6">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold mb-4">Multi-Page Architecture</h2>
+          <p className="text-muted-foreground max-w-2xl mx-auto">
+            Explore different pages showcasing various UIKit features and components
+          </p>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
+            <CardHeader>
+              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+                <Layout className="h-6 w-6 text-primary" />
+              </div>
+              <CardTitle>Components Gallery</CardTitle>
+              <CardDescription>Comprehensive showcase of all UIKit components with examples and variations</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="text-sm space-y-2 text-muted-foreground">
+                <li>• Buttons & Interactive Elements</li>
+                <li>• Cards & Content Containers</li>
+                <li>• Form Controls & Inputs</li>
+                <li>• Data Display & Charts</li>
+              </ul>
+              <Button asChild className="w-full">
+                <Link to="/components">
+                  View Components
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+            </CardContent>
+          </Card>
+          
+          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
+            <CardHeader>
+              <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4">
+                <Palette className="h-6 w-6 text-secondary" />
+              </div>
+              <CardTitle>Theme System</CardTitle>
+              <CardDescription>Interactive theme switching with live preview and color palette showcase</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="text-sm space-y-2 text-muted-foreground">
+                <li>• 5 Beautiful Theme Presets</li>
+                <li>• OKLCH Color Science</li>
+                <li>• Light & Dark Mode Support</li>
+                <li>• Real-time Theme Switching</li>
+              </ul>
+              <Button asChild className="w-full">
+                <Link to="/themes">
+                  Browse Themes
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
+            <CardHeader>
+              <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4">
+                <BookOpen className="h-6 w-6 text-accent" />
+              </div>
+              <CardTitle>About & Documentation</CardTitle>
+              <CardDescription>Learn about UIKit's architecture, design principles, and implementation details</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="text-sm space-y-2 text-muted-foreground">
+                <li>• File-based Routing Structure</li>
+                <li>• Layout & Navigation Patterns</li>
+                <li>• Component Organization</li>
+                <li>• Development Best Practices</li>
+              </ul>
+              <Button asChild className="w-full">
+                <Link to="/about">
+                  Learn More
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+            </CardContent>
+          </Card>
+
+          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
+            <CardHeader>
+              <div className="w-12 h-12 bg-chart1/10 rounded-lg flex items-center justify-center mb-4">
+                <Mail className="h-6 w-6 text-chart1" />
+              </div>
+              <CardTitle>Contact & Feedback</CardTitle>
+              <CardDescription>Get in touch, provide feedback, or explore integration options</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <ul className="text-sm space-y-2 text-muted-foreground">
+                <li>• Form Validation Examples</li>
+                <li>• Input Field Variations</li>
+                <li>• Submission Handling</li>
+                <li>• User Experience Patterns</li>
+              </ul>
+              <Button asChild className="w-full">
+                <Link to="/contact">
+                  Contact Us
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Link>
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* Quick Start */}
+      <section className="bg-muted/30 rounded-lg p-8">
+        <div className="text-center space-y-4">
+          <h2 className="text-2xl font-bold">Multi-Page Template Features</h2>
+          <p className="text-muted-foreground max-w-2xl mx-auto">
+            This template demonstrates advanced UIKit usage with proper code organization and routing
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+            <div className="bg-background/80 border rounded-lg p-4">
+              <div className="font-semibold mb-2">📁 File Organization</div>
+              <div className="text-muted-foreground">pages/, layouts/, components/</div>
+            </div>
+            <div className="bg-background/80 border rounded-lg p-4">
+              <div className="font-semibold mb-2">🔗 React Router</div>
+              <div className="text-muted-foreground">Code splitting & lazy loading</div>
+            </div>
+            <div className="bg-background/80 border rounded-lg p-4">
+              <div className="font-semibold mb-2">🎨 UIKit Layout</div>
+              <div className="text-muted-foreground">PageLayout with navigation</div>
+            </div>
+          </div>
+        </div>
+      </section>
+      </div>
+    </>
+  );
+};
+
+export default HomePage;