Skip to content

Migrate to Mantine

jsteinmann requested to merge migrate-to-mantine into master

Our current component library @vseth/components is based on an old version of reactstrap, which is incompatible with React 18. It's unlikely that @vseth/components will ever be updated to a newer version of reactstrap, since VSETH has moved to developing vseth-canine-ui, a Mantine-based component library. We thus have to move away from @vseth/components, since otherwise we'll not be able to upgrade to any future version of React / other related deps.

I've thus moved all our components to @mantine/core and vseth-canine-ui. This should unblock the React 18 upgrade and also unifies our development stack; eventmanager and comsol using the same frontend library should make it easier for contributors to get involved.

The current status of this MR is that I have migrated all components and @vseth/components is no longer a dependency. However, when starting this project I've decided to allow temporary visual regressions because I was unsure if the migration would be feasible. Thus, the MR is still a draft, with the following work items left to do:

  • Discuss how much we should stick to the old design
  • Fix all visual regressions. Verified pages:
    • category-page
    • document-page
    • exam-page
    • faq-page
    • feedback-page
    • home-page
    • login-page
    • modqueue-page
    • not-found-page
    • scoreboard-page
    • search-page
    • submittranscript-page
    • uploadpdf-page
    • userinfo-page
  • In vseth-canine-ui, make a sticky header an option (we had a custom navbar before, but now it makes sense to use the VSETH one) This can be re-introduced later with the Mantine 7 upgrade, because AppShell is reworked there.
  • Test parts where functionality was touched (e.g. Select)
  • Format with prettier
  • Decide what to do about weird warnings in eslint about react-keycloak (unmaintained project gives errors, fix isn't being merged). The warnings are from vseth-canine-ui, and will be gone with version 1.1.0.

After this MR is merged, various follow-up items can be tackled:

  • Migrating to React 18
  • Supporting a dark mode (this should be easy with Mantine, but we'll have to remove hard-coded values)
  • Potentially making use of @mantine/forms etc. instead of our custom hooks
Edited by jsteinmann

Merge request reports

Loading