feat(Mantine): support mantine 7

[alodela]

PR Checklist

Please check if your PR fulfills the following requirements:

• [x] The commit message follows our guidelines: https://refine.dev/docs/guides-concepts/contributing/#commit-convention

Bugs / Features

• [x] Related issue(s) linked
• [x] Tests for the changes have been added
• [x] Docs have been added / updated
• [x] Changesets have been added https://refine.dev/docs/guides-concepts/contributing/#creating-a-changeset

What is the current behavior?

Support for Mantine 5

What is the new behaviour?

Continuing the work done in #5340 to support Mantine 7

Notes for reviewers

Notable problems: Mantine 7 uses CSS modules for styling, and @refinedev/mantine uses tsup to build, which doesn't support css modules https://github.com/egoist/tsup/issues/536

Any input or feedback welcome

Mantine migration guides: https://v6.mantine.dev/changelog/6-0-0/ https://mantine.dev/guides/6x-to-7x/

closes https://github.com/refinedev/refine/issues/5178

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: dcb6f19e2e321538ac6d9e7c96e0c923f1912bc1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@refinedev/inferencer	Major
@refinedev/live-previews	Minor
@refinedev/mantine	Major
@refinedev/ui-tests	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[aliemir]

Hey @alodela, thank you for your effort, great job! (Also thanks to @glebtv). 🚀 🚀 About the change from emotion to CSS Modules, I'm not sure if this requires a big change for @refinedev/mantine. For our custom components, we can use styles prop and combine it with css variables I guess, won't that work properly?

I'll try to review all files as soon as possible. Of course there can be changes in the overall styling and we won't have issues with them. I'll mainly check for components to make sure we're not missing any features we're trying to keep all UI packages aligned with. 🙏

[alodela]

Hi @aliemir, I kept the note about the Mantine CSS module from the previous PR, just in case. So far, I haven't seen any issues. The Mantine CSS modules can be included in the Refine app, and as you said, use the styles prop for custom components included in the package.

I fixed the issues in the examples, and hopefully, everything will pass the checks next time. I'll be keeping an eye on the PR for any comments. Thanks.

[hanza93]

this is great, how can we starting building with this branch @alodela 🙏

[alodela]

this is great, how can we starting building with this branch @alodela 🙏

@hanza93 you can install @refinedev/mantine from my forked repository. Also, make sure to use the latest versions of the rest of the @refinedev/* packages. Here's what I'm doing to build from my branch:

"@refinedev/mantine": "github:alodela/refine#path:packages/mantine&mantine7.v4",

Just consider this PR is still under review and might change.

[BatuhanW]

Hey @kruschid sorry for the late response, we've been busy through the week. We'll answer your comments next week.

[kruschid]

Hey @kruschid sorry for the late response, we've been busy through the week. We'll answer your comments next week.

That's okay, it's quite a large PR. I'm trying to upgrade my project to v7 using the changes here. I couldn't test every detail yet, but still wanted to contribute, at least by adding some comments. @glebtv and @alodela have done good work here 🚀 , and my comments are rather cosmetic. If I find more issues, I'll make further comments. Thank you. 👍

[BatuhanW]

Hey @alodela Would you like to release Mantine 7 support as a standalone package on npm and your own repository? We'd be more than happy to update documentation and website, mention that Mantine 7 supported library is yours and add links to your package.

[alodela]

That's a generous offer, @BatuhanW, but I'm a bit worried about keeping the standalone Mantine package up and running in the long run since bandwidth can be an issue. What’s the thinking behind releasing Mantine support as a standalone package? I would love to hear your thoughts!

[aliemir]

I'm hoping to deliver a detailed review of the PR very soon. Thank you for your work, @alodela! 🙌

For now and in the foreseeable future, our focus will primarily be on delivering new features and improvements to Refine's core. As a result, we find it challenging to keep up with major releases from external dependencies like Mantine.

However, we remain fully committed to supporting community-driven initiatives like this. If you decide to take ownership, we’ll promote the package alongside the ones we officially release and offer any help needed for maintenance and up-keeping.

Thanks again for your hard work and dedication. I'll post my review in following days 🙏

[netlify[bot]]

✅ Deploy Preview for refine-doc-live-previews ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	dcb6f19e2e321538ac6d9e7c96e0c923f1912bc1
🔍 Latest deploy log	https://app.netlify.com/projects/refine-doc-live-previews/deploys/685818742b6c7d0008898f31
😎 Deploy Preview	https://deploy-preview-6345--refine-doc-live-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[TheoD02]

Hey, how i can test this in existing project ?

The solution :

"@refinedev/mantine": "github:alodela/refine#path:packages/mantine&mantine7.v4",

Seem to not work on my side 😞