@pattern-stack/frontend-patterns 0.0.5 → 0.0.6

package/src/__tests__/atoms/composed/statcard.test.tsx

@@ -0,0 +1,133 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, userEvent } from '../../utils'
+import { StatCard } from '../../../atoms/composed/StatCard'
+
+describe('StatCard (Composed)', () => {
+  it('renders basic stat card with title and value', () => {
+    render(<StatCard title="Total Users" value="1,234" />)
+    
+    expect(screen.getByText('Total Users')).toBeInTheDocument()
+    expect(screen.getByText('1,234')).toBeInTheDocument()
+  })
+
+  it('renders with subtitle', () => {
+    render(
+      <StatCard 
+        title="Revenue" 
+        value="$45,678" 
+        subtitle="+12% from last month" 
+      />
+    )
+    
+    expect(screen.getByText('Revenue')).toBeInTheDocument()
+    expect(screen.getByText('$45,678')).toBeInTheDocument()
+    expect(screen.getByText('+12% from last month')).toBeInTheDocument()
+  })
+
+  it('renders with icon', () => {
+    render(
+      <StatCard 
+        title="Orders" 
+        value="567" 
+        icon="ShoppingCart"
+      />
+    )
+    
+    expect(screen.getByText('Orders')).toBeInTheDocument()
+    expect(screen.getByText('567')).toBeInTheDocument()
+    // Icon should be rendered (we can't easily test the actual icon, but we can test it doesn't crash)
+  })
+
+  it('applies category theming', () => {
+    render(<StatCard title="Test" value="123" category={3} />)
+    
+    const card = screen.getByText('Test').closest('[data-component-name="StatCard"]')
+    expect(card).toBeInTheDocument()
+    expect(card).toHaveAttribute('data-component-name', 'StatCard')
+  })
+
+  it('handles click events', async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn()
+    
+    render(
+      <StatCard 
+        title="Clickable Card" 
+        value="999" 
+        onClick={handleClick}
+      />
+    )
+    
+    const card = screen.getByText('Clickable Card').closest('[role="button"]')
+    expect(card).toBeInTheDocument()
+    
+    await user.click(card!)
+    expect(handleClick).toHaveBeenCalledOnce()
+  })
+
+  it('applies hover effects when clickable', () => {
+    render(
+      <StatCard 
+        title="Hoverable" 
+        value="555" 
+        onClick={() => {}}
+      />
+    )
+    
+    const card = screen.getByText('Hoverable').closest('[role="button"]')
+    expect(card).toHaveClass('cursor-pointer')
+    expect(card).toHaveClass('hover:shadow-md')
+  })
+
+  it('does not apply click styles when not clickable', () => {
+    render(<StatCard title="Static Card" value="111" />)
+    
+    const card = screen.getByText('Static Card').closest('div')
+    expect(card).not.toHaveAttribute('role', 'button')
+    expect(card).not.toHaveClass('cursor-pointer')
+  })
+
+  it('displays numbers as provided', () => {
+    render(<StatCard title="Big Number" value={1234567} />)
+    
+    expect(screen.getByText('1234567')).toBeInTheDocument()
+  })
+
+  it('handles string and number values', () => {
+    const { rerender } = render(<StatCard title="String" value="Custom Text" />)
+    expect(screen.getByText('Custom Text')).toBeInTheDocument()
+    
+    rerender(<StatCard title="Number" value={42} />)
+    expect(screen.getByText('42')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <StatCard 
+        title="Custom" 
+        value="123" 
+        className="custom-stat-card"
+      />
+    )
+    
+    const card = screen.getByText('Custom').closest('.custom-stat-card')
+    expect(card).toBeInTheDocument()
+  })
+
+  it('renders loading state', () => {
+    render(<StatCard title="Loading" value="..." isLoading={true} />)
+    
+    const card = screen.getByText('Loading').closest('[data-component-name="StatCard"]')
+    expect(card).toBeInTheDocument()
+    // Check for skeleton elements in loading state
+    const skeletons = card?.querySelectorAll('.animate-pulse')
+    expect(skeletons?.length).toBeGreaterThan(0)
+  })
+
+  it('renders with data component name', () => {
+    render(<StatCard title="Test Card" value="123" />)
+    
+    const card = screen.getByText('Test Card').closest('[data-component-name="StatCard"]')
+    expect(card).toHaveAttribute('data-component-name', 'StatCard')
+  })
+})

package/src/__tests__/atoms/utils/icon-resolver.test.tsx

@@ -0,0 +1,140 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '../../utils'
+import { Icon, getIcon, iconMap } from '../../../atoms/utils/icon-resolver'
+
+// Mock console.warn to avoid noise in tests
+const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+describe('Icon Resolver', () => {
+  afterEach(() => {
+    consoleSpy.mockClear()
+  })
+
+  describe('Icon component', () => {
+    it('renders valid icon', () => {
+      render(<Icon name="Home" data-testid="home-icon" />)
+      
+      const icon = screen.getByTestId('home-icon')
+      expect(icon).toBeInTheDocument()
+    })
+
+    it('applies default className', () => {
+      render(<Icon name="Users" data-testid="users-icon" />)
+      
+      const icon = screen.getByTestId('users-icon')
+      expect(icon).toHaveClass('w-5', 'h-5')
+    })
+
+    it('applies custom className', () => {
+      render(<Icon name="Settings" className="w-8 h-8 text-blue-500" data-testid="settings-icon" />)
+      
+      const icon = screen.getByTestId('settings-icon')
+      expect(icon).toHaveClass('w-8', 'h-8', 'text-blue-500')
+    })
+
+    it('applies size prop', () => {
+      render(<Icon name="Search" size={24} data-testid="search-icon" />)
+      
+      const icon = screen.getByTestId('search-icon')
+      expect(icon).toHaveAttribute('width', '24')
+      expect(icon).toHaveAttribute('height', '24')
+    })
+
+    it('renders fallback icon for invalid name', () => {
+      render(<Icon name="InvalidIcon" data-testid="fallback-icon" />)
+      
+      const icon = screen.getByTestId('fallback-icon')
+      expect(icon).toBeInTheDocument()
+      expect(consoleSpy).toHaveBeenCalledWith('Icon "InvalidIcon" not found. Using default Menu icon.')
+    })
+
+    it('handles undefined icon name gracefully', () => {
+      render(<Icon name={undefined as any} data-testid="undefined-icon" />)
+      
+      const icon = screen.getByTestId('undefined-icon')
+      expect(icon).toBeInTheDocument()
+      expect(consoleSpy).toHaveBeenCalled()
+    })
+  })
+
+  describe('getIcon function', () => {
+    it('returns icon component for valid name', () => {
+      const HomeIcon = getIcon('Home')
+      expect(HomeIcon).toBeDefined()
+      expect(typeof HomeIcon).toBe('function')
+    })
+
+    it('returns Menu icon for invalid name', () => {
+      const InvalidIcon = getIcon('InvalidIcon' as any)
+      expect(InvalidIcon).toBeDefined()
+      expect(typeof InvalidIcon).toBe('function')
+    })
+
+    it('returns Menu icon for undefined name', () => {
+      const UndefinedIcon = getIcon(undefined as any)
+      expect(UndefinedIcon).toBeDefined()
+    })
+  })
+
+  describe('iconMap', () => {
+    it('contains expected common icons', () => {
+      const expectedIcons = [
+        'Home', 'Users', 'Settings', 'Search', 'Menu',
+        'ChevronDown', 'ChevronRight', 'X', 'Plus',
+        'ShoppingCart', 'Calendar', 'Mail', 'Phone'
+      ]
+
+      expectedIcons.forEach(iconName => {
+        expect(iconMap).toHaveProperty(iconName)
+        expect(typeof iconMap[iconName]).toBe('function')
+      })
+    })
+
+    it('has reasonable number of icons', () => {
+      const iconCount = Object.keys(iconMap).length
+      expect(iconCount).toBeGreaterThan(30)
+      expect(iconCount).toBeLessThan(100) // Keep it manageable
+    })
+
+    it('all icon map values are functions', () => {
+      Object.values(iconMap).forEach(iconComponent => {
+        expect(typeof iconComponent).toBe('function')
+      })
+    })
+  })
+
+  describe('Icon rendering variations', () => {
+    const testIcons = ['Home', 'Users', 'Settings', 'Search', 'Bell']
+
+    testIcons.forEach(iconName => {
+      it(`renders ${iconName} icon without errors`, () => {
+        render(<Icon name={iconName} data-testid={`${iconName.toLowerCase()}-icon`} />)
+        
+        const icon = screen.getByTestId(`${iconName.toLowerCase()}-icon`)
+        expect(icon).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Integration with real icon names', () => {
+    it('renders navigation icons correctly', () => {
+      const navIcons = ['Home', 'Users', 'Settings', 'FileText', 'BarChart']
+      
+      navIcons.forEach(iconName => {
+        const { unmount } = render(<Icon name={iconName} />)
+        // If it renders without throwing, it's valid
+        unmount()
+      })
+    })
+
+    it('renders action icons correctly', () => {
+      const actionIcons = ['Plus', 'Edit', 'Trash2', 'Save', 'Download']
+      
+      actionIcons.forEach(iconName => {
+        const { unmount } = render(<Icon name={iconName} />)
+        // If it renders without throwing, it's valid
+        unmount()
+      })
+    })
+  })
+})

package/src/atoms/types/index.ts

@@ -2,4 +2,5 @@
 export * from './generated';
 export * from './loading';
 export * from './auth';
+export * from './navigation';
 export * from './entity-config';

package/src/atoms/types/navigation.ts

@@ -0,0 +1,43 @@
+// Navigation configuration types for createReactApp factory
+
+export type IconName = 
+  | 'Palette' | 'Menu' | 'X' | 'Shield' | 'Users' | 'BarChart3' 
+  | 'Database' | 'TrendingUp' | 'Layout' | 'Home' | 'Settings'
+  | 'Bell' | 'Search' | 'Plus' | 'Edit' | 'Trash2' | 'Eye'
+  | 'Download' | 'Upload' | 'Share' | 'Lock' | 'Unlock'
+  | 'Mail' | 'Phone' | 'Calendar' | 'Clock' | 'MapPin'
+  | 'Star' | 'Heart' | 'Bookmark' | 'Tag' | 'Flag'
+  | 'File' | 'Folder' | 'Image' | 'Video' | 'Music'
+  | 'ChevronRight' | 'ChevronDown' | 'ChevronLeft' | 'ChevronUp'
+  | 'ArrowRight' | 'ArrowLeft' | 'ArrowUp' | 'ArrowDown'
+  | 'Check' | 'AlertCircle' | 'Info' | 'HelpCircle'
+
+export interface NavigationItem {
+  /** Unique identifier for the navigation item */
+  value: string
+  /** Display label for the navigation item */
+  label: string
+  /** Path to navigate to when clicked */
+  path: string
+  /** Icon name from Lucide React icons */
+  icon: IconName
+  /** Optional category for color theming (1-8) */
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+  /** Optional badge text/count to display */
+  badge?: string | number
+  /** Whether this item is disabled */
+  disabled?: boolean
+  /** Child navigation items for nested menus */
+  children?: NavigationItem[]
+}
+
+export interface NavigationConfig {
+  /** Main navigation items */
+  items: NavigationItem[]
+  /** Whether to show the default showcase navigation as fallback */
+  showDefaultNavigation?: boolean
+  /** Custom logo or title for the sidebar header */
+  logo?: string
+  /** Whether the sidebar starts expanded */
+  defaultExpanded?: boolean
+}

package/src/atoms/utils/icon-resolver.tsx

@@ -0,0 +1,54 @@
+import {
+  Palette, Menu, X, Shield, Users, BarChart3, Database, TrendingUp, Layout,
+  Home, Settings, Bell, Search, Plus, Edit, Trash2, Eye, Download, Upload,
+  Share, Lock, Unlock, Mail, Phone, Calendar, Clock, MapPin, Star, Heart,
+  Bookmark, Tag, Flag, File, Folder, Image, Video, Music, ChevronRight,
+  ChevronDown, ChevronLeft, ChevronUp, ArrowRight, ArrowLeft, ArrowUp,
+  ArrowDown, Check, AlertCircle, Info, HelpCircle
+} from 'lucide-react'
+import type { IconName } from '../types'
+
+// Map of icon names to Lucide React components
+export const iconMap = {
+  Palette, Menu, X, Shield, Users, BarChart3, Database, TrendingUp, Layout,
+  Home, Settings, Bell, Search, Plus, Edit, Trash2, Eye, Download, Upload,
+  Share, Lock, Unlock, Mail, Phone, Calendar, Clock, MapPin, Star, Heart,
+  Bookmark, Tag, Flag, File, Folder, Image, Video, Music, ChevronRight,
+  ChevronDown, ChevronLeft, ChevronUp, ArrowRight, ArrowLeft, ArrowUp,
+  ArrowDown, Check, AlertCircle, Info, HelpCircle
+}
+
+interface IconProps {
+  name: IconName
+  className?: string
+  size?: number
+  [key: string]: any // Allow any additional props to be passed through
+}
+
+/**
+ * Resolves an icon name to the corresponding Lucide React component
+ */
+export const Icon = ({ name, className = "w-5 h-5", size, ...props }: IconProps) => {
+  const IconComponent = iconMap[name]
+  
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found. Using default Menu icon.`)
+    return <Menu className={className} size={size} {...props} />
+  }
+  
+  return <IconComponent className={className} size={size} {...props} />
+}
+
+/**
+ * Get the icon component directly for custom rendering
+ */
+export const getIcon = (name: IconName) => {
+  return iconMap[name] || Menu
+}
+
+/**
+ * Check if an icon name is valid
+ */
+export const isValidIcon = (name: string): name is IconName => {
+  return name in iconMap
+}

package/src/atoms/utils/utils.ts

@@ -5,6 +5,7 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-// Re-export tooltip helpers
+// Re-export utilities
 export * from './tooltip-helpers';
-export * from './metric-engine';
+export * from './metric-engine';
+export { Icon, getIcon, isValidIcon } from './icon-resolver';

package/src/molecules/layout/NavigationContext.tsx

@@ -0,0 +1,63 @@
+import React, { createContext, useContext, type ReactNode } from 'react'
+import type { NavigationConfig, NavigationItem } from '../../atoms/types'
+
+interface NavigationContextType {
+  navigation: NavigationConfig
+  setNavigation: (config: NavigationConfig) => void
+}
+
+const NavigationContext = createContext<NavigationContextType | undefined>(undefined)
+
+interface NavigationProviderProps {
+  children: ReactNode
+  initialNavigation?: NavigationConfig
+}
+
+// Default showcase navigation for backwards compatibility
+const defaultShowcaseNavigation: NavigationItem[] = [
+  { value: 'showcase', label: 'Showcase', icon: 'Palette', path: '/showcase', category: 5 },
+  { value: 'admin-dashboard', label: 'Admin Dashboard', icon: 'Shield', path: '/admin/dashboard', category: 2 },
+  { value: 'admin-users', label: 'User Management', icon: 'Users', path: '/admin/users', category: 3 },
+  { value: 'admin-sales', label: 'Sales Dashboard', icon: 'TrendingUp', path: '/admin/sales', category: 4 },
+  { value: 'entity-performance', label: 'Performance Dashboard', icon: 'BarChart3', path: '/entity/performance', category: 6 },
+  { value: 'entity-management', label: 'Entity Management', icon: 'Database', path: '/entity/management', category: 7 },
+  { value: 'entity-template', label: 'Template Example', icon: 'Layout', path: '/entity/template-example', category: 1 }
+]
+
+export const NavigationProvider = ({ children, initialNavigation }: NavigationProviderProps) => {
+  const [navigation, setNavigation] = React.useState<NavigationConfig>(
+    initialNavigation || {
+      items: defaultShowcaseNavigation,
+      showDefaultNavigation: true,
+      defaultExpanded: true
+    }
+  )
+
+  return (
+    <NavigationContext.Provider value={{ navigation, setNavigation }}>
+      {children}
+    </NavigationContext.Provider>
+  )
+}
+
+export const useNavigation = () => {
+  const context = useContext(NavigationContext)
+  if (context === undefined) {
+    throw new Error('useNavigation must be used within a NavigationProvider')
+  }
+  return context
+}
+
+// Helper to get navigation items with fallback
+export const getNavigationItems = (config: NavigationConfig): NavigationItem[] => {
+  if (config.items.length > 0) {
+    return config.items
+  }
+  
+  // Fallback to showcase navigation if no items provided
+  if (config.showDefaultNavigation !== false) {
+    return defaultShowcaseNavigation
+  }
+  
+  return []
+}

package/src/molecules/layout/Sidebar.tsx

@@ -1,27 +1,10 @@
-import React from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import { cn } from '../../atoms/utils/utils';
+import { cn, Icon } from '../../atoms/utils/utils';
 import { useSidebar } from './SidebarContext';
+import { useNavigation, getNavigationItems } from './NavigationContext';
 import { SidebarButton } from './SidebarButton';
-import { 
-  Palette,
-  Menu,
-  X,
-  Shield,
-  Users,
-  BarChart3,
-  Database,
-  TrendingUp,
-  Layout
-} from 'lucide-react';
-
-interface SidebarItem {
-  value: string;
-  label: string;
-  icon: React.ReactNode;
-  path: string;
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-}
+import { Menu, X } from 'lucide-react';
+import type { NavigationItem } from '../../atoms/types';
 
 interface SidebarProps {
   className?: string;
@@ -29,19 +12,13 @@ interface SidebarProps {
 
 export const Sidebar = ({ className }: SidebarProps) => {
   const { isExpanded, toggleSidebar } = useSidebar();
+  const { navigation } = useNavigation();
   const location = useLocation();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
-  const items: SidebarItem[] = [
-    { value: 'showcase', label: 'Showcase', icon: <Palette className="w-5 h-5" />, path: '/showcase', category: 5 },
-    { value: 'admin-dashboard', label: 'Admin Dashboard', icon: <Shield className="w-5 h-5" />, path: '/admin/dashboard', category: 2 },
-    { value: 'admin-users', label: 'User Management', icon: <Users className="w-5 h-5" />, path: '/admin/users', category: 3 },
-    { value: 'admin-sales', label: 'Sales Dashboard', icon: <TrendingUp className="w-5 h-5" />, path: '/admin/sales', category: 4 },
-    { value: 'entity-performance', label: 'Performance Dashboard', icon: <BarChart3 className="w-5 h-5" />, path: '/entity/performance', category: 6 },
-    { value: 'entity-management', label: 'Entity Management', icon: <Database className="w-5 h-5" />, path: '/entity/management', category: 7 },
-    { value: 'entity-template', label: 'Template Example', icon: <Layout className="w-5 h-5" />, path: '/entity/template-example', category: 1 }
-  ];
+  // Get navigation items from context
+  const items: NavigationItem[] = getNavigationItems(navigation);
 
   const handleNavigation = (path: string) => {
     if (path.includes('?')) {
@@ -108,12 +85,14 @@ export const Sidebar = ({ className }: SidebarProps) => {
           return (
             <SidebarButton
               key={item.value}
-              icon={item.icon}
+              icon={<Icon name={item.icon} className="w-5 h-5" />}
               label={item.label}
               active={isActive}
               category={item.category}
               expanded={isExpanded}
               onClick={() => handleNavigation(item.path)}
+              badge={item.badge}
+              disabled={item.disabled}
             />
           );
         })}

package/src/molecules/layout/SidebarButton/SidebarButton.tsx

@@ -10,6 +10,8 @@ interface SidebarButtonProps {
   expanded?: boolean;
   onClick?: () => void;
   className?: string;
+  badge?: string | number;
+  disabled?: boolean;
 }
 
 export const SidebarButton: React.FC<SidebarButtonProps> = ({
@@ -19,12 +21,15 @@ export const SidebarButton: React.FC<SidebarButtonProps> = ({
   category = 1,
   expanded = false,
   onClick,
-  className
+  className,
+  badge,
+  disabled = false
 }) => {
   return (
     <Button
       variant={active ? "secondary" : "ghost"}
       onClick={onClick}
+      disabled={disabled}
       tooltip={!expanded ? label : undefined}
       className={cn(
         "relative w-full justify-start gap-3 h-12",
@@ -74,8 +79,15 @@ export const SidebarButton: React.FC<SidebarButtonProps> = ({
             {label}
           </span>
           
-          {/* Active indicator dot */}
-          {active && (
+          {/* Badge or Active indicator */}
+          {badge ? (
+            <span className={cn(
+              "px-2 py-0.5 text-xs font-medium rounded-full flex-shrink-0",
+              "bg-primary/10 text-primary"
+            )}>
+              {badge}
+            </span>
+          ) : active && (
             <div className={cn(
               "w-2 h-2 rounded-full flex-shrink-0",
               `bg-category-${category}`
@@ -84,14 +96,24 @@ export const SidebarButton: React.FC<SidebarButtonProps> = ({
         </>
       )}
       
-      {/* Collapsed active indicator */}
-      {!expanded && active && (
+      {/* Collapsed indicators */}
+      {!expanded && (badge || active) && (
         <div className="absolute -top-1 -right-1">
-          <div className={cn(
-            "w-2.5 h-2.5 rounded-full",
-            `bg-category-${category}`,
-            "ring-2 ring-background"
-          )} />
+          {badge ? (
+            <span className={cn(
+              "px-1.5 py-0.5 text-xs font-bold rounded-full",
+              "bg-primary text-primary-foreground",
+              "ring-2 ring-background"
+            )}>
+              {badge}
+            </span>
+          ) : active && (
+            <div className={cn(
+              "w-2.5 h-2.5 rounded-full",
+              `bg-category-${category}`,
+              "ring-2 ring-background"
+            )} />
+          )}
         </div>
       )}
     </Button>

package/src/molecules/layout/index.ts

@@ -5,4 +5,6 @@ export { DashboardWithSidePanel } from './DashboardWithSidePanel';
 export { SectionHeader } from './SectionHeader';
 export { SidebarButton } from './SidebarButton';
 export { AppHeader } from './AppHeader';
-export { SidebarProvider, useSidebar } from './SidebarContext';
+export { SidebarProvider, useSidebar } from './SidebarContext';
+export { NavigationProvider, useNavigation, getNavigationItems } from './NavigationContext';
+export { Sidebar } from './Sidebar';

package/src/organisms/index.ts

@@ -5,4 +5,5 @@
 export { ComponentShowcasePage } from './showcase/ComponentShowcasePage';
 
 // Entity components - Cross-domain configurable panels
-export * from './entity';
+// TODO: Fix TypeScript errors in entity components before uncommenting
+// export * from './entity';

package/src/templates/factory.tsx

@@ -2,13 +2,12 @@ import React from 'react'
 import type { ReactNode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import { AuthProvider } from '../features/auth'
-import { SidebarProvider } from '../molecules/layout'
+import { SidebarProvider, NavigationProvider } from '../molecules/layout'
 import { AppLayout } from '../molecules/layout'
 import { DashboardTemplate } from './DashboardTemplate'
-import type { AuthConfig } from '../atoms/types'
+import type { AuthConfig, NavigationConfig } from '../atoms/types'
 
 // App configuration interface
 export interface AppConfig {
@@ -24,6 +23,7 @@ export interface AppConfig {
   theme?: string
   darkMode?: boolean
   auth?: AuthConfig
+  navigation?: NavigationConfig
   customProviders?: React.ComponentType<{ children: ReactNode }>[]
 }
 
@@ -50,6 +50,7 @@ export function createReactApp(config: AppConfig | string): AppInstance {
     enableQuery = true,
     enableRouting = true,
     auth,
+    navigation,
     customProviders = []
   } = appConfig
 
@@ -94,9 +95,11 @@ export function createReactApp(config: AppConfig | string): AppInstance {
     // Wrap with layout providers
     if (enableRouting) {
       tree = (
-        <SidebarProvider>
-          {tree}
-        </SidebarProvider>
+        <NavigationProvider initialNavigation={navigation}>
+          <SidebarProvider>
+            {tree}
+          </SidebarProvider>
+        </NavigationProvider>
       )
     }
 
@@ -110,7 +113,11 @@ export function createReactApp(config: AppConfig | string): AppInstance {
       tree = (
         <QueryClientProvider client={queryClient}>
           {tree}
-          {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+          {import.meta.env.DEV && (
+            import('@tanstack/react-query-devtools').then(({ ReactQueryDevtools }) => (
+              <ReactQueryDevtools initialIsOpen={false} />
+            ))
+          )}
         </QueryClientProvider>
       )
     }