feat(novui,web): Setup Mantine v7 and demonstrate ability to style in…

… lib and app (#5651)

* feat: Add mantine7

* feat: Centralized core type

apps/web/src/Providers.tsx

@@ -8,6 +8,7 @@ import { HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter } from 'react-router-dom';
 import { api } from './api/api.client';
 import { css } from '@novu/novui/css';
+import { NovuiProvider } from '@novu/novui';
 
 const defaultQueryFn = async ({ queryKey }: { queryKey: string }) => {
   const response = await api.get(`${queryKey[0]}`);
@@ -31,13 +32,15 @@ const queryClient = new QueryClient({
 const Providers: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   return (
     <ThemeProvider>
-      <SegmentProvider>
-        <QueryClientProvider client={queryClient}>
-          <BrowserRouter basename={CONTEXT_PATH}>
-            <HelmetProvider>{children}</HelmetProvider>
-          </BrowserRouter>
-        </QueryClientProvider>
-      </SegmentProvider>
+      <NovuiProvider>
+        <SegmentProvider>
+          <QueryClientProvider client={queryClient}>
+            <BrowserRouter basename={CONTEXT_PATH}>
+              <HelmetProvider>{children}</HelmetProvider>
+            </BrowserRouter>
+          </QueryClientProvider>
+        </SegmentProvider>
+      </NovuiProvider>
     </ThemeProvider>
   );
 };

libs/novui/.storybook/preview.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import { lightTheme, darkTheme } from './NovuTheme';
 import { Parameters, Decorator } from '@storybook/react';
 import { css } from '../styled-system/css';
+import { MantineThemeProvider } from '@mantine/core';
+import { NovuiProvider } from '../src/components';
 
+import '@mantine/core/styles.css';
 // Bring in the Panda-generated stylesheets
 import '../src/index.css';
 
@@ -36,5 +39,11 @@ function ColorSchemeThemeWrapper({ children }) {
 }
 
 export const decorators: Decorator[] = [
-  (renderStory) => <ColorSchemeThemeWrapper>{renderStory()}</ColorSchemeThemeWrapper>,
+  (renderStory) => (
+    <ColorSchemeThemeWrapper>
+      <NovuiProvider>
+        <MantineThemeProvider>{renderStory()}</MantineThemeProvider>
+      </NovuiProvider>
+    </ColorSchemeThemeWrapper>
+  ),
 ];

libs/novui/package.json

@@ -51,7 +51,8 @@
     "prepare:lib": "pnpm prepare:panda && pnpm prepare:audit",
     "prepare:panda": "pnpm panda codegen",
     "prepare:audit": "pnpm audit-components",
-    "prebuild": "rimraf dist styled-system && pnpm prepare:lib",
+    "clean": "rimraf dist styled-system",
+    "prebuild": "pnpm prepare:panda",
     "lint": "eslint --ext .ts,.tsx src",
     "build": "cross-env node_modules/.bin/tsc",
     "build:watch": "pnpm panda --watch & cross-env node_modules/.bin/tsc -w --preserveWatchOutput",
@@ -85,6 +86,9 @@
     "@vitejs/plugin-react": "^4.0.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.6.13",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "^1.15.0",
+    "postcss-simple-vars": "^7.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scanner": "^1.1.0",
@@ -115,5 +119,9 @@
         ]
       }
     }
+  },
+  "dependencies": {
+    "@mantine/core": "^7.10.0",
+    "@mantine/hooks": "^7.10.0"
   }
 }

libs/novui/postcss.config.cjs

@@ -1,7 +1,20 @@
 module.exports = {
   /**
-   * must use this syntax for vite + panda
+   * Must use array + require syntax for vite + postcss & panda
+   * https://vitejs.dev/config/shared-options.html#css-postcss
    * https://panda-css.com/docs/installation/storybook#install-panda
    */
-  plugins: [require('@pandacss/dev/postcss')()],
+  plugins: [
+    require('@pandacss/dev/postcss')(),
+    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',
+      },
+    }),
+  ],
 };

libs/novui/src/components/NovuiProvider.tsx

@@ -0,0 +1,8 @@
+import { MantineProvider } from '@mantine/core';
+import { FC, PropsWithChildren } from 'react';
+interface INovuiProviderProps extends PropsWithChildren {}
+
+/** Used to export a v7 Mantine provider */
+export const NovuiProvider: FC<INovuiProviderProps> = ({ children }) => {
+  return <MantineProvider>{children}</MantineProvider>;
+};

libs/novui/src/components/Test.stories.tsx

@@ -10,4 +10,4 @@ export default {
 
 const Template: StoryFn<typeof Test> = ({ ...args }) => <Test {...args}>Example Text</Test>;
 
-export const all = () => <Test />;
+export const all = () => <Test onClick={() => alert('Test!')} />;

libs/novui/src/components/Test.tsx

@@ -1,20 +1,33 @@
+import { FC, MouseEventHandler } from 'react';
+import { Button as ExternalButton } from '@mantine/core';
 import { css } from '../../styled-system/css';
-import { FC } from 'react';
+import { CoreProps } from '../types';
 
-/**
- * An example component using Panda.
- * TODO remove this in a future iteration.
- */
-export const Test: FC = () => {
+interface ITestProps extends CoreProps {
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+export const Test: FC<ITestProps> = ({ onClick, className }) => {
   return (
-    <p
-      className={css({
-        bg: 'legacy.warning',
-        textAlign: 'center',
-        textStyle: 'title.page',
-      })}
+    <ExternalButton
+      onClick={onClick}
+      leftSection={'hello'}
+      className={className}
+      classNames={{
+        root: css({
+          color: 'typography.text.feedback.alert',
+          fontSize: '225 !important',
+          bg: 'typography.text.feedback.success',
+          p: '100',
+        }),
+        inner: css({
+          color: 'typography.text.feedback.alert',
+          fontSize: '225 !important',
+          bg: 'typography.text.feedback.success',
+        }),
+      }}
     >
-      Testing everything now
-    </p>
+      Test
+    </ExternalButton>
   );
 };

libs/novui/src/components/index.ts

@@ -1 +1,2 @@
 export * from './Test';
+export * from './NovuiProvider';

libs/novui/src/types/CoreProps.ts

@@ -0,0 +1,8 @@
+/**
+ * Defines the foundational props from which all Novu components should inherit.
+ */
+export interface CoreProps {
+  className?: string;
+}
+
+export type CorePropsWithChildren = React.PropsWithChildren<CoreProps>;

libs/novui/src/types/index.ts

@@ -0,0 +1 @@
+export * from './CoreProps';