32f5dc1625
Phase 3: Layout & Navigation - Created header.css with animated hexagonal logo - Gradient navigation links with hover effects - Responsive mobile menu with toggle animation - Full mobile/tablet support Global Effects: - Created global-effects.css with texture overlay (graffiti wall) - Scanline effect (gaming CRT) - Custom scrollbar with gradient - Focus styles and selection colors - Page layout, container, section utilities - Grid system (2, 3, 4 columns + auto-fit) - Flex utilities and spacing helpers Additional Components: - Created Badge component (8 variants: default, cyber, neon, nature, gaming, success, warning, error) - Created Tag component with closable option - Created Avatar component (4 variants, 6 sizes, status indicators) - Created AvatarGroup for stacked avatars - All components fully typed with TypeScript Imported all new CSS files in main.tsx
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { Toaster } from 'react-hot-toast';
|
|
import { App } from './app/App';
|
|
import './index.css';
|
|
import './styles/design-system.css';
|
|
import './styles/global-effects.css';
|
|
import './styles/header.css';
|
|
// Initialize i18next before React renders
|
|
import './lib/i18n';
|
|
// FIX #20: Initialize Sentry for error tracking
|
|
import { initSentry } from './lib/sentry';
|
|
// FE-API-019: Initialize MSW for development if enabled
|
|
import { env } from './config/env';
|
|
|
|
// HMR Force Update: 1765126900
|
|
|
|
// FIX #20: Initialize Sentry before React renders
|
|
initSentry();
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
refetchOnWindowFocus: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
// FE-API-019: Initialize MSW worker for development
|
|
async function enableMocking() {
|
|
if (!env.USE_MSW) {
|
|
return;
|
|
}
|
|
|
|
if (import.meta.env.DEV) {
|
|
const { worker } = await import('./mocks/browser');
|
|
|
|
// Start the worker
|
|
await worker.start({
|
|
onUnhandledRequest: 'bypass', // Don't warn about unhandled requests
|
|
serviceWorker: {
|
|
url: '/mockServiceWorker.js',
|
|
},
|
|
});
|
|
|
|
// FIX #18: Utiliser logger structuré
|
|
const { logger } = await import('./utils/logger');
|
|
logger.info('[MSW] Mock Service Worker started', { component: 'MSW' });
|
|
}
|
|
}
|
|
|
|
// Start MSW before rendering the app
|
|
enableMocking().then(() => {
|
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
<React.StrictMode>
|
|
<QueryClientProvider client={queryClient}>
|
|
<BrowserRouter
|
|
future={{
|
|
v7_startTransition: true,
|
|
v7_relativeSplatPath: true,
|
|
}}
|
|
>
|
|
<App />
|
|
<Toaster position="top-right" />
|
|
</BrowserRouter>
|
|
</QueryClientProvider>
|
|
</React.StrictMode>,
|
|
);
|
|
});
|