frontend-react/src/components/onboarding/OnboardingTour.tsx

import { useState, useEffect } from 'react';
// @ts-ignore
import { Joyride, Step, STATUS } from 'react-joyride';

interface OnboardingTourProps {
   run: boolean;
   steps?: Step[];
   onFinish: () => void;
}

const defaultGlobalSteps: Step[] = [
    {
      target: '.sidebar-menu',
      content: 'Tutaj znajduje się główne menu aplikacji, dzięki któremu przejdziesz do swoich projektów i ustawień.',
    },
    {
      target: '.new-project-btn',
      content: 'Kliknij ten przycisk, aby wygenerować nowy wniosek o dofinansowanie przy pomocy sztucznej inteligencji.',
    },
    {
      target: '.projects-list',
      content: 'W tym miejscu zobaczysz wszystkie swoje aktualne i zakończone projekty.',
    },
    {
      target: '.user-profile-menu',
      content: 'Tutaj zarządzasz swoim kontem, subskrypcją oraz znajdziesz przycisk wylogowania.',
    }
];

export const OnboardingTour: React.FC<OnboardingTourProps> = ({ run, steps = defaultGlobalSteps, onFinish }) => {
   const [mounted, setMounted] = useState(false);

   useEffect(() => {
       setMounted(true);
   }, []);

   const handleJoyrideCallback = (data: any) => {
       const { status, action } = data;
       const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
       
       if (finishedStatuses.includes(status) || action === 'close') {
           onFinish();
       }
   };

   if (!mounted) return null;

   return (
       <Joyride
          steps={steps}
          run={run}
          continuous={true}
          showSkipButton={true}
          showProgress={true}
          callback={handleJoyrideCallback}
          styles={{
             options: {
                 arrowColor: 'var(--bg-elevated)',
                 backgroundColor: 'var(--bg-elevated)',
                 textColor: 'var(--text-primary)',
                 primaryColor: 'var(--accent-green)',
                 overlayColor: 'rgba(0, 0, 0, 0.7)',
                 zIndex: 10000,
             },
             tooltipContainer: {
                 textAlign: 'left'
             },
             buttonNext: {
                 backgroundColor: 'var(--accent-green)',
                 color: '#000',
                 fontWeight: 800,
             },
             buttonBack: {
                 color: 'var(--text-secondary)'
             },
             buttonSkip: {
                 color: 'var(--text-muted)'
             }
          }}
          locale={{ next: 'Dalej', back: 'Cofnij', skip: 'Pomiń', last: 'Zakończ' }}
       />
   );
};