Step Tour

import { StepTour } from 'fluxo-ui';
import type { TourStep } from 'fluxo-ui/types';

const steps: TourStep[] = [
  {
    selector: '#dashboard-header',
    title: 'Dashboard Overview',
    content: 'This is your main dashboard with key metrics.',
    placement: 'bottom',
    order: 1,
  },
  {
    selector: '#sidebar-nav',
    title: 'Navigation',
    content: 'Jump to any section from this sidebar.',
    placement: 'right',
    order: 2,
  },
];

const [isOpen, setIsOpen] = useState(false);

<Button onClick={() => setIsOpen(true)}>Start Tour</Button>

{isOpen && (
  <StepTour
    steps={steps}
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
  />
)}

const steps: TourStep[] = [
  {
    selector: '#export-button',
    title: '🚀 New Feature',
    content: (
      <div className="space-y-2 text-sm">
        <p>This powerful feature lets you:</p>
        <ul className="list-disc list-inside space-y-1 text-gray-500">
          <li>Export data in multiple formats</li>
          <li>Schedule automated reports</li>
        </ul>
      </div>
    ),
    placement: 'bottom',
  },
  {
    selector: '#config-panel',
    title: '⚙️ Configuration',
    content: (
      <div className="space-y-2 text-sm">
        <p>Configure this panel to match your workflow.</p>
        <div className="p-2 rounded bg-yellow-50 text-yellow-800 text-xs">
          Tip: Changes are saved automatically.
        </div>
      </div>
    ),
    placement: 'right',
  },
];

const steps: TourStep[] = [
  {
    selector: '#feature-a',
    title: 'Feature A',
    content: 'This is Feature A.',
    onNext: () => analytics.track('tour_step_next', { step: 1 }),
    onSkip: () => analytics.track('tour_skip', { step: 1 }),
  },
  {
    selector: '#feature-b',
    title: 'Feature B',
    content: 'This is Feature B.',
    onPrev: () => analytics.track('tour_step_prev', { step: 2 }),
    onNext: () => analytics.track('tour_step_next', { step: 2 }),
  },
];

const steps: TourStep[] = [
  { selector: '#el-top',    title: 'Top',    content: '...', placement: 'top'    },
  { selector: '#el-bottom', title: 'Bottom', content: '...', placement: 'bottom' },
  { selector: '#el-left',   title: 'Left',   content: '...', placement: 'left'   },
  { selector: '#el-right',  title: 'Right',  content: '...', placement: 'right'  },
];

// The tooltip falls back gracefully when the viewport has insufficient space.

const steps: TourStep[] = [
  { selector: '#header',    title: 'Dashboard Overview', content: '...', placement: 'bottom' },
  { selector: '#stats',     title: 'Key Metrics',        content: '...', placement: 'bottom' },
  { selector: '#actions',   title: 'Quick Actions',      content: '...', placement: 'top'    },
  { selector: '#sidebar',   title: 'Navigation',         content: '...', placement: 'right'  },
  { selector: '#profile',   title: 'Your Profile',       content: '...', placement: 'left'   },
];

// Restore progress from storage
const savedStep = parseInt(localStorage.getItem('tour-step') ?? '0', 10);

{isOpen && (
  <StepTour
    steps={steps}
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    initialStep={savedStep}
  />
)}