@bloomneo/uikit 1.5.0

package/bin/templates/fbca/src/web/lib/page-router.tsx.template

@@ -0,0 +1,134 @@
+/**
+ * Page Router
+ * Auto-discovers routes using Vite glob imports and file-based conventions
+ */
+
+import React, { useEffect } from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';
+
+// Auto-discover all page files using Vite glob import (including nested) - eager loading
+const pageFiles = import.meta.glob('../features/*/pages/**/*.{tsx,jsx}', { eager: true });
+
+function generateRoutes() {
+  const routes: Array<{ path: string; component: React.ComponentType<any> }> = [];
+
+  // Process each discovered page file
+  Object.entries(pageFiles).forEach(([filePath, module]) => {
+    // Extract feature and nested path from file path
+    // Examples:
+    // ../features/main/pages/index.tsx -> feature: main, nested: ['index']
+    // ../features/gallery/pages/new/cat.tsx -> feature: gallery, nested: ['new', 'cat']
+    // ../features/gallery/pages/[animal].tsx -> feature: gallery, nested: ['[animal]']
+    // ../features/blog/pages/[...slug].tsx -> feature: blog, nested: ['[...slug]']
+    const match = filePath.match(/\.\.\/features\/([^/]+)\/pages\/(.+)\.tsx?$/);
+
+    if (!match) return;
+
+    const [, feature, nestedPath] = match;
+    const pathSegments = nestedPath.split('/');
+
+    // Convention-based routing logic
+    let routePath: string;
+
+    if (feature === 'main') {
+      // Main feature gets priority routes
+      if (pathSegments.length === 1 && pathSegments[0] === 'index') {
+        routePath = '/';
+      } else {
+        // Convert nested path: about/details -> /about/details
+        routePath = '/' + pathSegments
+          .map(segment => segment === 'index' ? '' : segment.toLowerCase())
+          .filter(Boolean)
+          .map(segment => {
+            // Handle catch-all routes: [...slug] -> *
+            if (segment.startsWith('[...') && segment.endsWith(']')) {
+              return '*';
+            }
+            // Handle dynamic params: [animal] -> :animal
+            if (segment.startsWith('[') && segment.endsWith(']')) {
+              return ':' + segment.slice(1, -1);
+            }
+            return segment;
+          })
+          .join('/');
+      }
+    } else {
+      // Other features: /feature/nested/path
+      const nestedRoute = pathSegments
+        .map(segment => segment === 'index' ? '' : segment.toLowerCase())
+        .filter(Boolean)
+        .map(segment => {
+          // Handle catch-all routes: [...slug] -> *
+          if (segment.startsWith('[...') && segment.endsWith(']')) {
+            return '*';
+          }
+          // Handle dynamic params: [animal] -> :animal
+          if (segment.startsWith('[') && segment.endsWith(']')) {
+            return ':' + segment.slice(1, -1);
+          }
+          return segment;
+        })
+        .join('/');
+
+      if (pathSegments.length === 1 && pathSegments[0] === 'index') {
+        routePath = `/${feature}`;
+      } else {
+        routePath = `/${feature}${nestedRoute ? '/' + nestedRoute : ''}`;
+      }
+    }
+
+    routes.push({
+      path: routePath,
+      component: (module as any).default
+    });
+  });
+
+  // Sort routes so more specific ones come first
+  routes.sort((a, b) => {
+    // Root route should be last for proper matching
+    if (a.path === '/') return 1;
+    if (b.path === '/') return -1;
+    return b.path.length - a.path.length;
+  });
+
+  console.log('🚀 Auto-discovered routes:');
+  routes.forEach(route => console.log(`  ${route.path}`));
+
+  return routes;
+}
+
+// Component to handle scroll to top on route change
+const ScrollToTop: React.FC = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+};
+
+export const PageRouter: React.FC = () => {
+  const routes = generateRoutes();
+
+  return (
+    <>
+      <ScrollToTop />
+      <Routes>
+        {routes.map(({ path, component: Component }) => (
+          <Route key={path} path={path} element={<Component />} />
+        ))}
+        {/* Fallback for 404 */}
+        <Route path="*" element={
+          <div className="text-center py-12 text-muted-foreground">
+            <h1 className="text-4xl font-bold mb-4">404</h1>
+            <p>Page not found - Route not discovered</p>
+            <div className="mt-4 text-sm">
+              Available routes: {routes.map(r => r.path).join(', ')}
+            </div>
+          </div>
+        } />
+      </Routes>
+    </>
+  );
+};

package/bin/templates/fbca/src/web/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 './styles/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/fbca/src/web/shared/components/Footer.tsx.template

@@ -0,0 +1,57 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Footer as UIFooter } from '@bloomneo/uikit/footer';
+import type { NavigationItem } from '@bloomneo/uikit';
+
+// Footer navigation - FBCA routes
+const footerNavigation: NavigationItem[] = [
+  { key: 'home', label: 'Home', href: '/' },
+  { key: 'about', label: 'About', href: '/about' },
+  { key: 'gallery', label: 'Gallery', href: '/gallery' },
+  { key: 'auth', label: 'Login', href: '/auth' },
+];
+
+// Configurable Footer Component using UIKit sections
+export const Footer: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleNavigation = (href: string) => {
+    navigate(href);
+  };
+
+  return (
+    <UIFooter tone="subtle" size="xl">
+      <div className="flex flex-col space-y-6">
+        {/* Footer Navigation */}
+        <div className="flex flex-wrap justify-center gap-6">
+          {footerNavigation.map((item) => (
+            <button
+              key={item.key}
+              onClick={() => item.href && handleNavigation(item.href)}
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Branding Section */}
+        <div className="text-center space-y-4">
+          <div className="flex items-center justify-center gap-3">
+            <div className="w-6 h-6 bg-primary rounded flex items-center justify-center text-primary-foreground font-bold text-xs">
+              UI
+            </div>
+            <span className="font-semibold text-foreground">UIKit FBCA</span>
+          </div>
+
+          {/* Copyright */}
+          <div className="border-t border-border pt-4">
+            <p className="text-sm text-muted-foreground">
+              © 2025 UIKit FBCA • Feature-Based Component Architecture with Page Router
+            </p>
+          </div>
+        </div>
+      </div>
+    </UIFooter>
+  );
+};

package/bin/templates/fbca/src/web/shared/components/Header.tsx.template

@@ -0,0 +1,91 @@
+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,
+  Images,
+  LogIn,
+  BookOpen,
+  Sun,
+  Moon
+} from 'lucide-react';
+
+// Navigation configuration - FBCA routes
+const navigationItems: NavigationItem[] = [
+  { key: 'home', label: 'Home', href: '/', icon: Home },
+  { key: 'about', label: 'About', href: '/about', icon: BookOpen },
+  { key: 'gallery', label: 'Gallery', href: '/gallery', icon: Images },
+  { key: 'auth', label: 'Login', href: '/auth', icon: LogIn },
+];
+
+// 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">UIKit FBCA</h3>
+      <p className="text-xs text-background">Feature-Based Architecture</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/fbca/src/web/shared/components/SEO.tsx.template

@@ -0,0 +1,24 @@
+/**
+ * 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;
+  keywords?: string;
+  ogTitle?: string;
+  ogDescription?: string;
+  ogImage?: string;
+  canonical?: string;
+}
+
+export const SEO: React.FC<SEOProps> = (props) => {
+  useSEO(props);
+  return null; // This component doesn't render anything
+};
+
+export default SEO;

package/bin/templates/fbca/src/web/shared/components/index.ts.template

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

package/bin/templates/fbca/src/web/shared/hooks/useSEO.ts.template

@@ -0,0 +1,85 @@
+/**
+ * Custom SEO Hook
+ * Manages page title, meta description, and other SEO tags using native document API
+ */
+
+import { useEffect } from 'react';
+
+interface SEOOptions {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  ogTitle?: string;
+  ogDescription?: string;
+  ogImage?: string;
+  canonical?: string;
+}
+
+export const useSEO = ({
+  title = 'UIKit FBCA Demo',
+  description = 'Feature-Based Component Architecture with UIKit components and auto-discovery routing',
+  keywords = 'react, fbca, uikit, components, typescript',
+  ogTitle,
+  ogDescription,
+  ogImage = '/favicon.ico',
+  canonical
+}: SEOOptions = {}) => {
+  useEffect(() => {
+    // Set page title
+    document.title = title;
+
+    // Helper function to set or update meta tags
+    const setMetaTag = (property: string, content: string, isProperty = false) => {
+      const attribute = isProperty ? 'property' : 'name';
+      let meta = document.querySelector(`meta[${attribute}="${property}"]`);
+
+      if (!meta) {
+        meta = document.createElement('meta');
+        meta.setAttribute(attribute, property);
+        document.head.appendChild(meta);
+      }
+
+      meta.setAttribute('content', content);
+    };
+
+    // Set meta description
+    setMetaTag('description', description);
+
+    // Set keywords
+    if (keywords) {
+      setMetaTag('keywords', keywords);
+    }
+
+    // Set Open Graph tags
+    setMetaTag('og:title', ogTitle || title, true);
+    setMetaTag('og:description', ogDescription || description, true);
+    setMetaTag('og:image', ogImage, true);
+    setMetaTag('og:type', 'website', true);
+
+    // Set Twitter Card tags
+    setMetaTag('twitter:card', 'summary_large_image');
+    setMetaTag('twitter:title', ogTitle || title);
+    setMetaTag('twitter:description', ogDescription || description);
+    setMetaTag('twitter:image', ogImage);
+
+    // Set canonical URL if provided
+    if (canonical) {
+      let link = document.querySelector('link[rel="canonical"]');
+      if (!link) {
+        link = document.createElement('link');
+        link.setAttribute('rel', 'canonical');
+        document.head.appendChild(link);
+      }
+      link.setAttribute('href', canonical);
+    }
+
+    // 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, keywords, ogTitle, ogDescription, ogImage, canonical]);
+};

package/bin/templates/fbca/src/web/shared/utils/asset.ts

@@ -0,0 +1,6 @@
+export const asset = (path: string): string => {
+  const base = (import.meta as any).env?.BASE_URL || '/';
+  const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+  if (base === '/') return `/${cleanPath}`;
+  return `${base}${cleanPath}`;
+};

package/bin/templates/fbca/src/web/styles/index.css.template

@@ -0,0 +1,8 @@
+/**
+ * Main Styles Entry Point
+ * Includes UIKit styles (which includes Tailwind) and custom styles
+ */
+
+/* Tailwind CSS v4+ - REQUIRED */
+@import "tailwindcss";
+

package/bin/templates/fbca/src/web/utils/asset.ts

@@ -0,0 +1,6 @@
+export const asset = (path: string): string => {
+  const base = (import.meta as any).env?.BASE_URL || '/';
+  const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+  if (base === '/') return `/${cleanPath}`;
+  return `${base}${cleanPath}`;
+};

package/bin/templates/fbca/tsconfig.json.template

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/bin/templates/fbca/tsconfig.node.json.template

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/bin/templates/fbca/vite.config.ts.template

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import path from 'path'
+import tailwindcss from '@tailwindcss/vite'
+import { fileURLToPath } from 'url'
+
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  // base: '/', // Uncomment this line to make the default asset loading to '/' rather than relative paths
+  plugins: [react(), tailwindcss()],
+  root: 'src/web',
+  publicDir: '../../public',
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "../.."),
+    },
+  },
+  server: {
+    port: 5173,
+    host: true,
+  },
+  build: {
+    outDir: '../../dist',
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          uikit: ['@bloomneo/uikit']
+        }
+      }
+    }
+  }
+})

package/bin/templates/generate/component/component.tsx.template

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { Button } from '@bloomneo/uikit/button';
+import { Badge } from '@bloomneo/uikit/badge';
+
+interface {{ComponentName}}Props {
+  title?: string;
+  description?: string;
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+  children?: React.ReactNode;
+  onAction?: () => void;
+  className?: string;
+}
+
+export const {{ComponentName}}: React.FC<{{ComponentName}}Props> = ({
+  title = '{{ComponentName}} Component',
+  description = 'A reusable {{componentName}} component built with UIKit',
+  variant = 'default',
+  children,
+  onAction,
+  ...props
+}) => {
+  return (
+    <Card className="{{componentName}}-component" {...props}>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              🎨 {title}
+            </CardTitle>
+            <CardDescription>
+              {description}
+            </CardDescription>
+          </div>
+          <Badge variant="outline" className="text-xs">
+            {{theme}} theme
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {children || (
+          <div className="space-y-4">
+            <p className="text-muted-foreground">
+              This is your generated {{componentName}} component. Customize it to fit your needs.
+            </p>
+
+            <div className="flex gap-2">
+              <Button
+                variant={variant}
+                onClick={onAction}
+                size="sm"
+              >
+                Primary Action
+              </Button>
+              <Button variant="outline" size="sm">
+                Secondary Action
+              </Button>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-2">
+              <div className="p-3 border rounded-lg">
+                <h4 className="font-semibold text-sm mb-1">Feature 1</h4>
+                <p className="text-xs text-muted-foreground">
+                  Add your {{componentName}} feature content here.
+                </p>
+              </div>
+              <div className="p-3 border rounded-lg">
+                <h4 className="font-semibold text-sm mb-1">Feature 2</h4>
+                <p className="text-xs text-muted-foreground">
+                  Add more {{componentName}} functionality here.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/bin/templates/generate/component/index.ts.template

@@ -0,0 +1,2 @@
+export { {{FeatureName}} } from './{{FeatureName}}';
+export type { {{FeatureName}}Props, {{FeatureName}}Data, {{FeatureName}}State } from './types';

package/bin/templates/generate/component/types.ts.template

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+
+export interface {{FeatureName}}Props {
+  /**
+   * The title of the {{featureName}} component
+   */
+  title?: string;
+
+  /**
+   * The description text for the component
+   */
+  description?: string;
+
+  /**
+   * Visual variant of the component
+   */
+  variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive';
+
+  /**
+   * Child components to render inside the {{featureName}}
+   */
+  children?: ReactNode;
+
+  /**
+   * Callback function for the primary action
+   */
+  onAction?: () => void;
+
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+
+  /**
+   * Whether the component is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Loading state
+   */
+  loading?: boolean;
+}
+
+export interface {{FeatureName}}Data {
+  id: string;
+  name: string;
+  description?: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface {{FeatureName}}State {
+  items: {{FeatureName}}Data[];
+  loading: boolean;
+  error: string | null;
+  selectedItem: {{FeatureName}}Data | null;
+}

package/bin/templates/generate/feature/index.ts.template

@@ -0,0 +1,14 @@
+// Pages
+export { {{FeatureName}}Page } from './pages/{{FeatureName}}Page';
+export { {{FeatureName}}ListPage } from './pages/{{FeatureName}}ListPage';
+
+// Components
+export { {{FeatureName}}Card } from './components/{{FeatureName}}Card';
+
+// Types
+export type {
+  {{FeatureName}}Data,
+  {{FeatureName}}ListItem,
+  {{FeatureName}}State,
+  {{FeatureName}}Actions
+} from './types';