[UX] Implement IntroJS and Welcome Tour

[flavioislima]

This PR implements IntroJS functionality and framework so we can easily add guided tours, tutorials or hints in the future.
For now I am just implementing a first welcome tour but will add more tours in future PRs.

This first tour runs once when the user lands on the Store Webview on the client.
If completed or skipped it will not appear anymore.

Screencast.From.2025-04-30.19-23-28.mp4

How to test

QASE TEST: https://app.qase.io/project/HC?case=584&suite=49

AI Summary

This pull request introduces a guided tour feature to the application, leveraging the intro.js library and a custom TourProvider context to manage tour states. It also includes styling, localization, and integration into the app's main structure. Below are the key changes grouped by theme:

Feature Implementation: Guided Tour

• Tour Context and State Management: Added a TourProvider in src/frontend/components/TourGuide/TourContext.tsx to manage tour states, including activation, deactivation, and completion tracking of tours. State is persisted using localStorage.
• Tour Guide Component: Created TourGuide in src/frontend/components/TourGuide/TourGuide.tsx to render guided tours using intro.js-react. It dynamically loads steps based on the current tour and handles user interactions like exiting or completing tours.
• Styling: Added custom styles for tour tooltips and buttons in src/frontend/components/TourGuide/TourGuide.scss to align with the app's design system.

Integration into the Application

• App Wrapper: Wrapped the entire app with the TourProvider in src/frontend/App.tsx to enable tour state management across components. [1] [2] [3]

Localization

• Tour Texts: Added localized strings for tour steps in public/locales/en/tour.json. These include step descriptions for various app sections like the library, sidebar, and game pages.

Dependencies

• New Libraries: Added intro.js (version ^7.2.0) and intro.js-react (version ^1.0.0) to package.json and updated pnpm-lock.yaml accordingly. [1] [2] [3] [4]

---

Use the following Checklist if you have changed something on the Backend or Frontend:

• Tested the feature and it's working on a current and clean install.
• Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
• Created / Updated Tests (If necessary)
• Created / Updated documentation (If necessary)

[flavioislima]

@biliesilva updated the styling to be the same we have on hp-ui with the needed modifications to work with introJS now.

[BrettCleary]

this is pretty complicated 😅

[flavioislima]

True, I will investigate it a bit more tomorrow and test the other idea you gave.

[BrettCleary]

when I click the x button, the tour starts over again from the beginning. Is that the expected behavior?

[flavioislima]

No, probably a regression from the last changes. Good catch.