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.

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

refactor(frontend): Mantine Component Library PoC #5344

Draft
wants to merge 17 commits into
base: main
Choose a base branch
from

Conversation

Akuukis
Copy link
Contributor

@Akuukis Akuukis commented Dec 11, 2024

🗒️ 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants