Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(frontend): Mantine Component Library PoC #5344

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open

refactor(frontend): Mantine Component Library PoC #5344

wants to merge 19 commits into from
+1,559 −639

Conversation

Akuukis
Copy link
Contributor

@Akuukis Akuukis commented Dec 11, 2024 •
edited
Loading

🗒️ Checklist

  1. run linter locally
  2. update all related docs (API, README, inline, etc.), if any
  3. draft PR with a title <type>(<scope>)<!>: <title> TASK-1234
  4. tag PR: at least frontend or backend unless it's global
  5. fill in the template below and delete template comments
  6. review thyself: read the diff and repro the preview as written
  7. open PR & confirm that CI passes
  8. request reviewers, if needed
  9. delete this section before merging

💭 Notes

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

  1. 3105f47 Setup Mantine Component Library. Please install the new dependencies, and add recommended VSCode extensions.
  2. 453f2c1 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 image

image

  1. d782e38 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
  1. eaf45e3 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 image

👀 Preview steps

  1. ℹ️ open Kobo home
  2. 🟢 [on main] notice the original "new" button
  3. 🟢 [on PR] notice the new "new" button with default mantine style, only slightly different

@p2edwards
Copy link
Contributor

looks nice so far!

  • i like the preview, including how simple this diff is:
    image
  • haven't test locally yet w/ vscode extensions.
  • it's cool that Mantine's PostCSS plugin didn't require modifying webpack.

future stuff:

@Akuukis Akuukis force-pushed the kalvis/mantine-setup branch 2 times, most recently from e860a02 to 40b5316 Compare December 12, 2024 21:14
@Akuukis Akuukis force-pushed the kalvis/mantine-setup branch from 40b5316 to d782e38 Compare December 12, 2024 21:32
@Akuukis Akuukis force-pushed the kalvis/mantine-setup branch from eaf45e3 to cde2874 Compare December 12, 2024 22:28
@Akuukis Akuukis changed the title refactor(frontend): add Mantine Component Library refactor(frontend): setup Mantine Component Library Dec 12, 2024
@Akuukis Akuukis changed the title refactor(frontend): setup Mantine Component Library refactor(frontend): Mantine Component Library PoC Dec 12, 2024
magicznyleszek and others added 12 commits December 16, 2024 15:04
@magicznyleszek
Merge branch 'main' into kalvis/mantine-setup
7142d55
@magicznyleszek
Fix Checkbox component misaligned element caused by Mantine's CSS Reset
511b407
@magicznyleszek
setup Storybook for Mantine by following official guide
27e8f95 
see: https://mantine.dev/guides/storybook/
@magicznyleszek
improve gray color comments from Mantine theme
2df7caa 
to make it easier to migrate existing styles
@magicznyleszek
Merge branch 'main' into kalvis/mantine-setup
717f080
@magicznyleszek
Merge branch 'main' into kalvis/mantine-setup
b5695da
@magicznyleszek
Merge branch 'main' of github.com:kobotoolbox/kpi into kalvis/mantine…
af2517c 
…-setup
@magicznyleszek
Merge branch 'kalvis/mantine-setup' of github.com:kobotoolbox/kpi int…
29c9092 
…o kalvis/mantine-setup
@magicznyleszek
Merge branch 'main' into kalvis/mantine-setup
9293760
@magicznyleszek
refactor(SimpleTable): drop BEM, use Mantine TASK-1377 (#5366)
d4dea03
@magicznyleszek
Merge branch 'main' into kalvis/mantine-setup
bafb0be
@jamesrkiger @pauloamorimbr
feat(organizations): add mantine menu theme/story TASK-1382 (#5410)
3e62d24 
### 📣 Summary
Adds theming and storybook entry for Mantine Menu component.

### 📖 Description
Adds basic theming for the Mantine Menu component, primarily aimed at
providing necessary style and functionality for use in the organization
members list. In this context, the Menu component will be replacing
KoboDropdown, but the latter is used, for example, as a building block
of KoboSelect, so not all uses of KoboDropdown are under consideration
here.

### 👀 Preview steps
Run storybook and compare "Dropdown" story to the Actions dropdown
(right side icon button) currently used in the organization Member
table.

---------

Co-authored-by: Paulo Amorim <[email protected]>
@Akuukis
Copy link
Contributor Author

Akuukis commented Jan 13, 2025

Frontend teams decides to move forward with Mantine 🎉 Let's review and merge this then as any other PR.

@Akuukis Akuukis marked this pull request as ready for review January 13, 2025 18:07
@Akuukis Akuukis requested a review from p2edwards as a code owner January 13, 2025 18:07
jamesrkiger
jamesrkiger approved these changes Jan 14, 2025
View reviewed changes
Copy link
Contributor

@jamesrkiger jamesrkiger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@magicznyleszek magicznyleszek magicznyleszek left review comments

@jamesrkiger jamesrkiger jamesrkiger approved these changes

@p2edwards p2edwards Awaiting requested review from p2edwards p2edwards is a code owner

@pauloamorimbr pauloamorimbr Awaiting requested review from pauloamorimbr

@RuthShryock RuthShryock Awaiting requested review from RuthShryock

Assignees
No one assigned
Labels
Front end
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@Akuukis @p2edwards @magicznyleszek @jamesrkiger