48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
|
|
import React from 'react';
|
|
import { ThemeProvider } from '../src/components/theme/ThemeProvider';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { MemoryRouter } from 'react-router-dom';
|
|
import { ToastProvider } from '../src/components/feedback/ToastProvider';
|
|
import { AudioProvider } from '../src/context/AudioContext';
|
|
import { AuthProvider } from '../src/providers/AuthProvider';
|
|
|
|
// Create a singleton query client for Storybook to share cache if needed,
|
|
// or one per story. Since decorators run per story, creating it here might
|
|
// share it. Better to create inside if we want isolation, but for performance
|
|
// reuse is okay.
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
staleTime: Infinity,
|
|
// Phase 1: Silence network errors in react-query
|
|
throwOnError: false,
|
|
},
|
|
},
|
|
});
|
|
|
|
interface AppProvidersProps {
|
|
children: React.ReactNode;
|
|
isDark?: boolean;
|
|
}
|
|
|
|
export const AppProvidersForStorybook: React.FC<AppProvidersProps> = ({ children, isDark = true }) => {
|
|
return (
|
|
<ThemeProvider defaultTheme={isDark ? 'dark' : 'light'}>
|
|
<div className={isDark ? 'dark' : ''} style={{ minHeight: '100vh', padding: '1rem', background: isDark ? '#0a0a0a' : '#ffffff', color: isDark ? '#ffffff' : '#0a0a0a' }}>
|
|
<QueryClientProvider client={queryClient}>
|
|
<ToastProvider>
|
|
<AudioProvider>
|
|
<AuthProvider>
|
|
<MemoryRouter>
|
|
{children}
|
|
</MemoryRouter>
|
|
</AuthProvider>
|
|
</AudioProvider>
|
|
</ToastProvider>
|
|
</QueryClientProvider>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
};
|