@bloomneo/uikit 1.5.0

package/bin/templates/multi/src/components/Header.tsx.template

@@ -0,0 +1,103 @@
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Header as UIHeader, HeaderLogo, HeaderNav } from '@bloomneo/uikit/header';
+import { Button } from '@bloomneo/uikit/button';
+import { useTheme } from '@bloomneo/uikit/theme-provider';
+import type { NavigationItem } from '@bloomneo/uikit';
+import { 
+  Home, 
+  Layout, 
+  Palette, 
+  BookOpen, 
+  Mail,
+  Sun,
+  Moon
+} from 'lucide-react';
+
+// Navigation configuration
+const navigationItems: 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 },
+];
+
+// Logo component
+const Logo: React.FC = () => (
+  <div className="flex items-center gap-3">
+    <div className="w-8 h-8 bg-secondary rounded flex items-center justify-center text-secondary-foreground font-bold text-sm">
+      UI
+    </div>
+    <div>
+      <h3 className="voila-brand-logo text-xl font-bold">{{PROJECT_NAME}}</h3>
+      <p className="text-xs text-background">Multi-Page Template</p>
+    </div>
+  </div>
+);
+
+// Theme actions component
+const ThemeActions: React.FC = () => {
+  const { theme, mode, setTheme, availableThemes, toggleMode } = useTheme();
+
+  return (
+    <div className="flex items-center gap-3">
+      <select 
+        value={theme}
+        onChange={(e) => setTheme(e.target.value as any)}
+        className=" border  border-input rounded px-3 py-2 text-sm focus:outline-none"
+      >
+        {availableThemes.map(themeId => (
+          <option key={themeId} value={themeId}>
+            {themeId.charAt(0).toUpperCase() + themeId.slice(1)}
+          </option>
+        ))}
+      </select>
+      
+      <Button onClick={toggleMode} variant="secondary" size="sm">
+        {mode === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+        <span className="ml-2 hidden sm:inline">
+          {mode === 'dark' ? 'Light' : 'Dark'}
+        </span>
+      </Button>
+    </div>
+  );
+};
+
+// Configurable Header Component using UIKit sections
+export const Header: React.FC = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  
+  const handleNavigation = (href: string) => {
+    navigate(href);
+  };
+
+  return (
+    <UIHeader tone="brand" size="xl" position="sticky">
+      <HeaderLogo>
+        <Logo />
+      </HeaderLogo>
+      
+      <HeaderNav
+        navigation={navigationItems}
+        currentPath={location.pathname}
+        onNavigate={handleNavigation}
+      />
+      
+      <div className="flex items-center">
+        <ThemeActions />
+      </div>
+    </UIHeader>
+  );
+};

package/bin/templates/multi/src/components/SEO.tsx.template

@@ -0,0 +1,19 @@
+/**
+ * SEO Component
+ * Simple wrapper around useSEO hook for easy page-level SEO management
+ */
+
+import React from 'react';
+import { useSEO } from '../hooks/useSEO';
+
+interface SEOProps {
+  title?: string;
+  description?: string;
+}
+
+export const SEO: React.FC<SEOProps> = (props) => {
+  useSEO(props);
+  return null; // This component doesn't render anything
+};
+
+export default SEO;

package/bin/templates/multi/src/components/index.ts.template

@@ -0,0 +1,3 @@
+export { Header } from './Header';
+export { Footer } from './Footer';
+export { SEO } from './SEO';

package/bin/templates/multi/src/hooks/useSEO.ts.template

@@ -0,0 +1,38 @@
+/**
+ * Simple SEO Hook
+ * Manages page title and meta description using native document API
+ */
+
+import { useEffect } from 'react';
+
+interface SEOOptions {
+  title?: string;
+  description?: string;
+}
+
+export const useSEO = ({
+  title = 'UIKit Multi-Page Demo',
+  description = 'Professional React components with file-based routing, showcasing layouts, navigation, and code organization'
+}: SEOOptions = {}) => {
+  useEffect(() => {
+    // Set page title
+    document.title = title;
+
+    // Set meta description
+    let meta = document.querySelector('meta[name="description"]');
+    if (!meta) {
+      meta = document.createElement('meta');
+      meta.setAttribute('name', 'description');
+      document.head.appendChild(meta);
+    }
+    meta.setAttribute('content', description);
+
+    // Set viewport if not already present
+    if (!document.querySelector('meta[name="viewport"]')) {
+      const viewport = document.createElement('meta');
+      viewport.setAttribute('name', 'viewport');
+      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0');
+      document.head.appendChild(viewport);
+    }
+  }, [title, description]);
+};

package/bin/templates/multi/src/index.css.template

@@ -0,0 +1,7 @@
+/**
+ * Main Styles Entry Point
+ * Tailwind CSS v4+ with UIKit integration
+ */
+
+/* Tailwind CSS v4+ - REQUIRED */
+@import "tailwindcss";

package/bin/templates/multi/src/main.tsx.template

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ThemeProvider } from '@bloomneo/uikit/theme-provider';
+import App from './App';
+import './index.css';
+import '@bloomneo/uikit/styles';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider theme="base" mode="light" forceConfig={true}>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>
+);

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

@@ -0,0 +1,276 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { Badge } from '@bloomneo/uikit/badge';
+import { 
+  FileText, 
+  Folder, 
+  Layout, 
+  Palette, 
+  Code2, 
+  Layers,
+  Zap,
+  Shield,
+  Smartphone
+} from 'lucide-react';
+
+export const AboutPage: React.FC = () => {
+  return (
+    <div className="space-y-8">
+      <div className="text-center space-y-4">
+        <h1 className="voila-heading text-4xl">About UIKit Multi-Page</h1>
+        <p className="voila-subheading text-muted-foreground max-w-3xl mx-auto">
+          Learn about the architecture, design principles, and implementation details behind this multi-page template
+        </p>
+      </div>
+
+      {/* Architecture Overview */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Layers className="h-5 w-5" />
+            Architecture Overview
+          </CardTitle>
+          <CardDescription>
+            This multi-page template demonstrates advanced UIKit usage with proper code organization
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4">
+              <h4 className="font-semibold flex items-center gap-2">
+                <Folder className="h-4 w-4" />
+                File Structure
+              </h4>
+              <div className="bg-muted/50 p-4 rounded-lg font-mono text-sm">
+                <div>src/</div>
+                <div className="ml-2">├── pages/</div>
+                <div className="ml-4">│   ├── Home.tsx</div>
+                <div className="ml-4">│   ├── Components.tsx</div>
+                <div className="ml-4">│   ├── Themes.tsx</div>
+                <div className="ml-4">│   ├── About.tsx</div>
+                <div className="ml-4">│   └── Contact.tsx</div>
+                <div className="ml-2">├── layouts/</div>
+                <div className="ml-4">│   └── MainLayout.tsx</div>
+                <div className="ml-2">├── components/</div>
+                <div className="ml-4">│   └── Navigation.tsx</div>
+                <div className="ml-2">├── App.tsx</div>
+                <div className="ml-2">└── main.tsx</div>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <h4 className="font-semibold flex items-center gap-2">
+                <Code2 className="h-4 w-4" />
+                Key Technologies
+              </h4>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span>React Router v6</span>
+                  <Badge variant="secondary">Routing</Badge>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>UIKit PageLayout</span>
+                  <Badge variant="secondary">Layout</Badge>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>React Suspense</span>
+                  <Badge variant="secondary">Code Splitting</Badge>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>TypeScript</span>
+                  <Badge variant="secondary">Type Safety</Badge>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Vite</span>
+                  <Badge variant="secondary">Build Tool</Badge>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Design Principles */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Palette className="h-5 w-5" />
+            Design Principles
+          </CardTitle>
+          <CardDescription>
+            Core principles that guide the UIKit design system and this template
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="space-y-3">
+              <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
+                <Shield className="h-5 w-5 text-primary" />
+              </div>
+              <h4 className="font-semibold">Accessibility First</h4>
+              <p className="text-sm text-muted-foreground">
+                Built with WCAG guidelines in mind, ensuring components work for everyone
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <div className="w-10 h-10 bg-secondary/10 rounded-lg flex items-center justify-center">
+                <Zap className="h-5 w-5 text-secondary" />
+              </div>
+              <h4 className="font-semibold">Performance Focused</h4>
+              <p className="text-sm text-muted-foreground">
+                Optimized for fast loading with code splitting and tree shaking
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <div className="w-10 h-10 bg-accent/10 rounded-lg flex items-center justify-center">
+                <Smartphone className="h-5 w-5 text-accent" />
+              </div>
+              <h4 className="font-semibold">Mobile Responsive</h4>
+              <p className="text-sm text-muted-foreground">
+                Designed to work beautifully across all device sizes and orientations
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <div className="w-10 h-10 bg-chart1/10 rounded-lg flex items-center justify-center">
+                <Code2 className="h-5 w-5 text-chart1" />
+              </div>
+              <h4 className="font-semibold">Developer Experience</h4>
+              <p className="text-sm text-muted-foreground">
+                TypeScript-first with excellent IntelliSense and clear component APIs
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <div className="w-10 h-10 bg-chart2/10 rounded-lg flex items-center justify-center">
+                <Layout className="h-5 w-5 text-chart2" />
+              </div>
+              <h4 className="font-semibold">Consistent Design</h4>
+              <p className="text-sm text-muted-foreground">
+                Unified design language with consistent spacing, colors, and typography
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <div className="w-10 h-10 bg-chart3/10 rounded-lg flex items-center justify-center">
+                <Layers className="h-5 w-5 text-chart3" />
+              </div>
+              <h4 className="font-semibold">Modular Architecture</h4>
+              <p className="text-sm text-muted-foreground">
+                Composable components that can be easily combined and customized
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Implementation Details */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <FileText className="h-5 w-5" />
+              Routing Strategy
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-3">
+              <h4 className="font-semibold text-sm">Code Splitting</h4>
+              <p className="text-sm text-muted-foreground">
+                Each page component is loaded lazily using React.lazy() and Suspense, 
+                reducing initial bundle size and improving load times.
+              </p>
+            </div>
+            
+            <div className="space-y-3">
+              <h4 className="font-semibold text-sm">Navigation State</h4>
+              <p className="text-sm text-muted-foreground">
+                The PageLayout component automatically manages active navigation states 
+                based on the current route, providing visual feedback to users.
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <h4 className="font-semibold text-sm">Route Organization</h4>
+              <p className="text-sm text-muted-foreground">
+                Routes are organized in App.tsx with clear path definitions, 
+                making it easy to add new pages and maintain the routing structure.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Layers className="h-5 w-5" />
+              Component Strategy
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-3">
+              <h4 className="font-semibold text-sm">UIKit Integration</h4>
+              <p className="text-sm text-muted-foreground">
+                Leverages UIKit's PageLayout, navigation components, and theme system 
+                for consistent design and behavior across all pages.
+              </p>
+            </div>
+            
+            <div className="space-y-3">
+              <h4 className="font-semibold text-sm">Layout Consistency</h4>
+              <p className="text-sm text-muted-foreground">
+                All pages share the same header, navigation, and footer through 
+                the PageLayout wrapper, ensuring consistent user experience.
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <h4 className="font-semibold text-sm">Theme Integration</h4>
+              <p className="text-sm text-muted-foreground">
+                Theme switching works seamlessly across all pages without page 
+                refreshes, demonstrating UIKit's powerful theming capabilities.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Getting Started */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Getting Started</CardTitle>
+          <CardDescription>
+            How to extend and customize this multi-page template for your needs
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4">
+              <h4 className="font-semibold">Adding New Pages</h4>
+              <ol className="text-sm space-y-2 text-muted-foreground list-decimal list-inside">
+                <li>Create a new component in <code className="bg-muted px-1 rounded">pages/</code></li>
+                <li>Add the route to <code className="bg-muted px-1 rounded">App.tsx</code></li>
+                <li>Update navigation in the PageLayout header</li>
+                <li>Export the component with lazy loading if needed</li>
+              </ol>
+            </div>
+            
+            <div className="space-y-4">
+              <h4 className="font-semibold">Customizing Layout</h4>
+              <ol className="text-sm space-y-2 text-muted-foreground list-decimal list-inside">
+                <li>Modify the PageLayout props in App.tsx</li>
+                <li>Create custom layout components in <code className="bg-muted px-1 rounded">layouts/</code></li>
+                <li>Override navigation items and actions</li>
+                <li>Customize footer content and styling</li>
+              </ol>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default AboutPage;