kobotoolbox / kpi / 12784691324

81%

master: 76%

push

github

refactor(frontend): Mantine Component Library PoC (#5344)

### 💭 Notes

Please read the PR commit-by-commit, here's a guide.

1.
[3105f47](https://github.com/kobotoolbox/kpi/pull/5344/commits/3105f47b0)
Setup Mantine Component Library. Please install the new dependencies,
and add recommended VSCode extensions.
2.
[453f2c1](https://github.com/kobotoolbox/kpi/pull/5344/commits/453f2c186)
Here's a preview that Mantine in general works, and API for the example
Button is different but generally similar.

| our button | Mantine default button |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/1f3e5736-c5eb-4cbf-a56e-a393dab561d3)
|
![image](https://github.com/user-attachments/assets/c8f2a9dc-cf1a-44c3-881a-ff05da433060)
|


![image](https://github.com/user-attachments/assets/e2abe407-3113-4900-9027-43186137ce13)

3.
[d782e38](https://github.com/kobotoolbox/kpi/pull/5344/commits/d782e38a9)
Example of custom styled component, Button. IMHO achieves pixel-perfect
match in storybook and example above, except for line breaks, spinner
and hover animations. Click animation matches out of box. Icon-only
buttons are omitted because Mantine uses a different component
`IconAction` for those.

| Original on left / Mantine implementation on right | 
| --- | 
|
![image](https://github.com/user-attachments/assets/9a58b7af-3ff4-4b18-995c-6c57ff4264cb)
|


5.
[eaf45e3](https://github.com/kobotoolbox/kpi/pull/5344/commits/eaf45e3d3)
Wrapped Button to add support for inbuilt Tooltip. No idea if we want to
move forward with these two coupled, but I found it useful for
comparison by re-implementing part of old Button behavior that's
represented in storybook.

| Original | Mantine implementation | 
| --- | --- |
|
![image](https://github.com/user-attachments/assets/7bf2a504-902b-4801-a... (continued)

5824 of 9325 branches covered (62.46%)

22262 of 27661 relevant lines covered (80.48%)

0.8 hits per line