veza/apps/web/.storybook/AppProvidersForStorybook.tsx

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>
    );
};