Add onboarding flow using Reactour (#4635)

# Description of Changes
Add onboarding flow
This commit is contained in:
James Brunton
2025-10-20 15:07:40 +01:00
committed by GitHub
parent 3e6236d957
commit 3e23dc59b6
34 changed files with 2381 additions and 91 deletions
@@ -93,6 +93,19 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
loadPDFDimensions();
}, [selectedStub, selectedFile, parameters]);
// Listen for tour events to set crop area
useEffect(() => {
const handleSetCropArea = (event: Event) => {
const customEvent = event as CustomEvent<Rectangle>;
if (customEvent.detail && pdfBounds) {
parameters.setCropArea(customEvent.detail, pdfBounds);
}
};
window.addEventListener('tour:setCropArea', handleSetCropArea);
return () => window.removeEventListener('tour:setCropArea', handleSetCropArea);
}, [parameters, pdfBounds]);
// Current crop area
const cropArea = parameters.getCropArea();
@@ -137,7 +150,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
const isFullCrop = parameters.isFullPDFCrop(pdfBounds);
return (
<Stack gap="md">
<Stack gap="md" data-tour="crop-settings">
{/* PDF Preview with Crop Selector */}
<Stack gap="xs">
<Group justify="space-between" align="center">