[question] Mantine v7?

[virtuoushub]

         Using mantine breaks tests.

tests are failing now because mantine requires the render function to include the 'mantineprovider' in the path.

"@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app"

Originally posted by @nomadme in #4900 (comment)

see also: https://community.redwoodjs.com/t/error-mantineprovider-was-not-found-in-component-tree/5390

[virtuoushub]

@nomadme - saw your comment from the other issue and forum post;
seems like what you're running into has to do w/ mantine v7: mantinedev/mantine#4908 (comment)

my suggestion is to either use Mantine v6, or work with @redwoodjs to document how to setup v7

[bnn1]

Mantine v7 setup requires additional steps. Here's how I solved it:
In web/config create a postcss.config.js with the following content:

module.exports = {
  plugins: [
    require('postcss-preset-mantine'),
    require('postcss-simple-vars')({
      variables: {
        'mantine-breakpoint-xs': '36em',
        'mantine-breakpoint-sm': '48em',
        'mantine-breakpoint-md': '62em',
        'mantine-breakpoint-lg': '75em',
        'mantine-breakpoint-xl': '88em',
      },
    }),
  ],
}

Then add this import at the top of the App.tsx (or .js if not using typescript) file:

import '@mantine/core/styles.css'

I will be working on the fix soon.

[virtuoushub]

tracking in #9316