Mantine 7 support

[glebtv]

closes #5178

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

Any input or feedback welcome

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 515dc57

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

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 @glebtv, thank you for the PR! Great work! I'll request reviews from the core members and let's see what we can work on here. I had a quick look and it looks good actually and I think we can provide couple of solutions for the CSS and then we can just update the mantine examples and ship it 🚢

About the styling issues, I think there are couple of solutions that we can try;

• Maybe try to use as much as the base styles and try to minimize the manual styling to the style props.
• We can try using a css-in-js solution but I don't think they will work well with the SSR features.
• If we had to, we can also export a css file from the package and let the users import it in their apps. So we'll use some prefixed classnames for our components and let users be able to use those class names as selectors.

Thanks again for the PR, we'll keep you updated as soon as possible when we have the chance for a detailed review. 🚀

[piccinnigius]

any update on this? :) thanks for your pr!

[alicanerdurmaz]

• also export a css file from the package and let the users import it in their apps. So we'll use some prefixed classnames for our components and let users be able to use those class names as selectors.

Hello @piccinnigius, we are waiting for @glebtv to make the requested changes. if @glebtv is not available and you would like to continue this development, we would appreciate it 🙌

[amirmamaghani]

Hey @glebtv , any update on this? :) highly appreciated!

[BatuhanW]

Hey @glebtv , any update on this? :) highly appreciated!

Hey @amirmamaghani we are open to contributions from the community, as the original owner of the PR seeems to be unresponsive.

[amirmamaghani]

Hey @glebtv , any update on this? :) highly appreciated!

Hey @amirmamaghani we are open to contributions from the community, as the original owner of the PR seeems to be unresponsive.

Hey @BatuhanW , is there any how to guide how to work on these subpackages? I quickly tried to run it but I find it difficult to dig through sourcecodes without seeing any Storybook or sth. Thanks!

[BatuhanW]

Hey @glebtv , any update on this? :) highly appreciated!

Hey @amirmamaghani we are open to contributions from the community, as the original owner of the PR seeems to be unresponsive.

Hey @BatuhanW , is there any how to guide how to work on these subpackages? I quickly tried to run it but I find it difficult to dig through sourcecodes without seeing any Storybook or sth. Thanks!

Hey @amirmamaghani you can check our contribution guide. https://refine.dev/docs/guides-concepts/contributing/

[arloktev]

Hi, what exactly do you need help with this PR? Fix checks or something else?

[glebtv]

Sorry, I didn't have any time for this PR, but now I have rebased it to current master and am planning to fix the remaining examples soon

[glebtv]

I made @test at packages/ui-tests/tsup.config.ts a separate entrypoint so TestWrapper and render function could be replaced to add MantineProvider to the tests.

Unfortunately this breaks tests in other packages because ui-tests start to use test helpers and TestWrapper from the package and not from ui-tests itself

And TestWrapper in ui-tests uses legacy router, as most of ui-tests

A better solution is welcome if anyone has any

[glebtv]

Can someone trigger tests and examples build please?

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 515dc57. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

🟥 Failed Commands
lerna run cypress:run --scope inferencer-mantine -- --record --key --group inferencer-mantine

✅ Successfully ran 28 targets

• lerna run cypress:run --scope server-side-form-validation-chakra-ui -- --record --key --group server-side-form-validation-chakra-ui
• lerna run cypress:run --scope server-side-form-validation-antd -- --record --key --group server-side-form-validation-antd
• lerna run cypress:run --scope inferencer-material-ui -- --record --key --group inferencer-material-ui
• lerna run cypress:run --scope with-remix-material-ui -- --record --key --group with-remix-material-ui
• lerna run cypress:run --scope with-remix-antd -- --record --key --group with-remix-antd
• lerna run cypress:run --scope with-nextjs-next-auth -- --record --key --group with-nextjs-next-auth
• lerna run cypress:run --scope with-nextjs -- --record --key --group with-nextjs
• lerna run cypress:run --scope table-material-ui-use-update-many -- --record --key --group table-material-ui-use-update-many
• lerna run cypress:run --scope table-material-ui-use-delete-many -- --record --key --group table-material-ui-use-delete-many
• lerna run cypress:run --scope table-material-ui-use-data-grid -- --record --key --group table-material-ui-use-data-grid
• lerna run cypress:run --scope table-material-ui-table-filter -- --record --key --group table-material-ui-table-filter
• lerna run cypress:run --scope table-material-ui-data-grid-pro -- --record --key --group table-material-ui-data-grid-pro
• lerna run cypress:run --scope table-material-ui-cursor-pagination -- --record --key --group table-material-ui-cursor-pagination
• lerna run cypress:run --scope table-material-ui-advanced -- --record --key --group table-material-ui-advanced
• lerna run cypress:run --scope table-mantine-basic -- --record --key --group table-mantine-basic
• lerna run cypress:run --scope table-mantine-advanced -- --record --key --group table-mantine-advanced
• lerna run cypress:run --scope table-chakra-ui-basic -- --record --key --group table-chakra-ui-basic
• lerna run cypress:run --scope table-chakra-ui-advanced -- --record --key --group table-chakra-ui-advanced
• lerna run cypress:run --scope table-antd-use-update-many -- --record --key --group table-antd-use-update-many
• lerna run cypress:run --scope table-antd-use-table -- --record --key --group table-antd-use-table
• lerna run cypress:run --scope table-antd-use-editable-table -- --record --key --group table-antd-use-editable-table
• lerna run cypress:run --scope table-antd-use-delete-many -- --record --key --group table-antd-use-delete-many
• lerna run cypress:run --scope table-antd-table-filter -- --record --key --group table-antd-table-filter
• lerna run cypress:run --scope table-antd-advanced -- --record --key --group table-antd-advanced
• lerna run cypress:run --scope server-side-form-validation-material-ui -- --record --key --group server-side-form-validation-material-ui
• lerna run cypress:run --scope server-side-form-validation-mantine -- --record --key --group server-side-form-validation-mantine
• lerna run cypress:run --scope inferencer-headless -- --record --key --group inferencer-headless
• lerna run cypress:run --scope inferencer-graphql-hasura -- --record --key --group inferencer-graphql-hasura

---

Sent with 💌 from NxCloud.

[glebtv]

Please try the builds again, all tests and examples should work now.

Please note there is now <Select> and <MultiSelect> components in refinedev/mantine, since mantine 7 Select doesn't work with integers as values, and a useMultiSelect since the MultiSelect prop type is incompatible with Select's.

This component is currently a wrapper around mantine's Selelct but can be later replaced with a custom implementation, like https://mantine.dev/combobox/?e=AsyncAutocomplete

But Mantine select is overall not as good as react-select, maybe replace it with react-select?

Also should I rewrite\clean up the commits or will you squash them?

[glebtv]

This PR will also fix MUI snapshots, currently they are broken because of random css- classes.

Will update the branch to fix a conflict in snapshots

[adamfeldman]

Is this PR on-track to land in the April Refine release?

[cypress]

Passing run #10884 ↗︎

0

236

32

0

0

Details:

docs(faq): section about network errors in faq (#5789)
Project: refine	Commit: 7fddc23c61
Status: Passed	Duration: 21:47 💡
Started: Mar 29, 2024 6:15 AM	Ended: Mar 29, 2024 6:37 AM

Review all test suite changes for PR #5340 ↗︎

[BatuhanW]

Hey @glebtv, we've merged releases/april branch, so your PR is closed. Could you re-open your PR?

[BatuhanW]

Hey @glebtv sorry for the inconvenience. I've also emailed you.

[mkhennoussi]

Any news about Mantine 7 support guys ? Thanks !

[glebtv]

I'm sorry but currently I don't have time to continue this work, anyone is free to open a new pull using (or not using) my changes

[mkhennoussi]

@glebtv Thanks for your answer and for your work ! @BatuhanW is Mantine v7 on the roadmap ? as it seems we are very close to support it...

[BatuhanW]

Hey @glebtv thanks for the contributions! You've come a long way and we appreciate it.

@mkhennoussi We are open to community contributions for this one.