feat: Replace AppShell custom components with UI-Kit components (#55)

[christoph2806]

feat: Replace AppShell custom components with UI-Kit components (#55)

🎯 Overview

This PR addresses Issue #55 by replacing custom implementations in the AppShell component with proper UI-Kit components. This major refactoring eliminates inconsistent styling, fixes separator rendering issues, and provides enhanced functionality while maintaining backward compatibility.

🔧 Changes Made

New Wrapper Components Created

1. AppShellBreadcrumbs - Wraps ui-kit Breadcrumb components

   • Fixes separator rendering issues (no more ">/" problems)
   • Maintains backward compatibility with existing BreadcrumbItem[] prop format
   • Uses proper semantic markup for accessibility

2. AppShellSidebar - Wraps ui-kit Sidebar components

   • Adds proper collapsible functionality with SidebarProvider
   • Supports nested navigation and improved responsive behavior
   • Maintains backward compatibility with existing NavItem[] prop format

3. AppShellTopBar - Enhanced with NavigationMenu + DropdownMenu components

   • Adds dropdown navigation menu support
   • Improved keyboard navigation and accessibility
   • Maintains all existing TopBar functionality

Core Updates

• AppShell.tsx: Updated to use new wrapper components instead of custom ones
• ContentWrapper.tsx: Now uses AppShellBreadcrumbs
• Exports: Updated index files and removed old custom components
• Cleanup: Removed legacy SideNav.tsx, TopBar.tsx, and Breadcrumbs.tsx

✅ All 9 Tasks Completed

Task	Status	Description
1	✅	Create AppShellBreadcrumbs wrapper
2	✅	Create AppShellSidebar wrapper
3	✅	Create AppShellTopBar wrapper
4	✅	Update AppShell component
5	✅	Update ContentWrapper
6	✅	Update exports and cleanup
7	✅	Update tests
8	✅	Update Storybook
9	✅	Manual testing

🧪 Testing

• Unit Tests: All new wrapper components have comprehensive test coverage
• Integration Tests: AppShell tests updated and passing
• Storybook: All stories render correctly with new functionality
• Manual Testing: Thoroughly tested in showcase application
• Dogfooding: Enhanced all shell components with proper Typography usage

📈 Benefits

• Consistency: Uses same ui-kit components throughout the application
• Enhanced Functionality: Dropdown navigation menus, proper sidebar behavior
• Better Accessibility: WCAG compliance from ui-kit components
• Maintainability: Single source of truth for component styling
• Backward Compatibility: No breaking changes to public API
• Fixed Issues: Breadcrumb separator rendering now works correctly

🔍 Additional Improvements

During implementation, comprehensive dogfooding was performed across all shell components:

• AuthShell: Enhanced with Card components and proper semantic structure
• ErrorShell & MinimalShell: Improved with Card-based layouts
• Typography Integration: Replaced manual text styling with Typography components
• Accessibility: Added proper ARIA attributes and semantic HTML

📋 Definition of Done

All DoD criteria have been met:

• ✅ New wrapper components created and exported
• ✅ UI-kit components properly integrated
• ✅ Backward compatibility maintained
• ✅ All tests passing
• ✅ Storybook stories updated
• ✅ Manual testing completed
• ✅ No breaking changes to public API
• ✅ TypeScript compilation successful

Fixes #55