Migrate to Mantine
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
-
-
InThis can be re-introduced later with the Mantine 7 upgrade, because AppShell is reworked there.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) -
Test parts where functionality was touched (e.g. Select
) -
Format with prettier -
Decide what to do about weird warnings in eslint aboutThe warnings are fromreact-keycloak
(unmaintained project gives errors,).fix isn't being mergedvseth-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