9316/update mantine setup

.gitignore

@@ -1,4 +1,5 @@
 *.icloud
+.cosine
 .idea
 .DS_Store
 node_modules

__fixtures__/test-project/package.json

@@ -20,8 +20,5 @@
   "prisma": {
     "seed": "yarn rw exec seed"
   },
-  "packageManager": "yarn@3.6.3",
-  "resolutions": {
-    "@types/react": "18.2.14"
-  }
+  "packageManager": "yarn@3.6.3"
 }

__fixtures__/test-project/web/package.json

@@ -27,6 +27,6 @@
     "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
     "prettier-plugin-tailwindcss": "0.4.1",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.3.5"
   }
 }

packages/cli/src/commands/setup/ui/libraries/mantine.js

@@ -1,6 +1,8 @@
+import fs from 'fs'
 import path from 'path'
 
 import execa from 'execa'
+import { outputFileSync } from 'fs-extra'
 import { Listr } from 'listr2'
 
 import { recordTelemetryAttributes } from '@redwoodjs/cli-helpers'
@@ -28,10 +30,16 @@ const ALL_MANTINE_PACKAGES = [
 ]
 
 const MANTINE_THEME_AND_COMMENTS = `\
-// This object will be used to override Mantine theme defaults.
-// See https://mantine.dev/theming/mantine-provider/#theme-object for theming options
+import { createTheme } from '@mantine/core'
+
+/**
+ * This object will be used to override Mantine theme defaults.
+ * See https://mantine.dev/theming/mantine-provider/#theme-object for theming options
+ * @type {import("@mantine/core").MantineThemeOverride}
+ */
 const theme = {}
-export default theme
+
+export default createTheme(theme)
 `
 
 export function builder(yargs) {
@@ -68,7 +76,9 @@ export async function handler({ force, install, packages }) {
 
   const installPackages = (
     packages.includes(ALL_KEYWORD) ? ALL_MANTINE_PACKAGES : packages
-  ).map((pack) => `@mantine/${pack}`)
+  )
+    .map((pack) => `@mantine/${pack}`)
+    .concat('postcss', 'postcss-preset-mantine', 'postcss-simple-vars')
 
   const tasks = new Listr(
     [
@@ -108,10 +118,37 @@ export async function handler({ force, install, packages }) {
             },
             imports: [
               "import { MantineProvider } from '@mantine/core'",
-              "import * as theme from 'config/mantine.config'",
+              "import theme from 'config/mantine.config'",
+              "import '@mantine/core/styles.css'",
             ],
           }),
       },
+      {
+        title: 'Configuring PostCSS...',
+        task: () => {
+          /**
+           * Check if PostCSS config already exists.
+           * If it exists, throw an error.
+           */
+          const postCSSConfigPath = rwPaths.web.postcss
+
+          if (!force && fs.existsSync(postCSSConfigPath)) {
+            throw new Error(
+              'PostCSS config already exists.\nUse --force to override existing config.'
+            )
+          } else {
+            const postCSSConfig = fs.readFileSync(
+              path.join(
+                __dirname,
+                '../templates/mantine-postcss.config.js.template'
+              ),
+              'utf-8'
+            )
+
+            return outputFileSync(postCSSConfigPath, postCSSConfig)
+          }
+        },
+      },
       {
         title: `Creating Theme File...`,
         task: () => {

packages/cli/src/commands/setup/ui/templates/mantine-postcss.config.js.template

@@ -0,0 +1,35 @@
+/**
+ * `postcss-preset-mantine` includes the following PostCSS plugins:
+ * - postcss-nested
+ * - postcss-mixins with Mantine specific mixins
+ * - Custom plugin with em/rem functions
+ * Read more: https://mantine.dev/styles/postcss-preset/
+
+ * `postcss-simple-vars` enables use of SCSS-like variables inside CSS files:
+```postcss
+$blue    : #056ef0;
+$width-sm: rem(37.5);
+$selector: .my-component
+
+@media (min-width: $width-sm) {
+  $selector {
+    background: $blue;
+  }
+}
+```
+Read more: https://github.com/postcss/postcss-simple-vars
+*/
+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',
+      },
+    }),
+  ],
+}

packages/cli/src/commands/setup/ui/templates/mantine.storybook.preview.js.template

@@ -1,7 +1,9 @@
 import * as React from 'react'
 
 import { MantineProvider } from '@mantine/core'
-import * as theme from 'config/mantine.config'
+import theme from 'config/mantine.config'
+
+import '@mantine/core/styles.css'
 
 const withMantine = (StoryFn) => {
   return (