feat: Include mantine styles & use example

apps/web/src/index.tsx

@@ -6,6 +6,8 @@ import { initializeApp } from './initializeApp';
 import reportWebVitals from './reportWebVitals';
 import { LAUNCH_DARKLY_CLIENT_SIDE_ID } from '@novu/shared-web';
 
+// TODO: would like to figure out a better solution, but this unblocks for now
+import '@novu/novui/components.css';
 import '@novu/novui/styles.css';
 
 (async () => {

apps/web/src/studio/components/workflows/WorkflowsListPage.tsx

@@ -1,9 +1,11 @@
+import { Button } from '@novu/novui';
 import { PageContainer } from '../../layout';
 import { WorkflowsTable } from './table';
 
 export const WorkflowsListPage = () => {
   return (
     <PageContainer title="Workflows">
+      <Button onClick={() => alert('hello!')}>Hello!</Button>
       <WorkflowsTable />
     </PageContainer>
   );

libs/novui/.storybook/preview.tsx

@@ -5,9 +5,7 @@ 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';
+import '../styles.css';
 
 export const parameters: Parameters = {
   layout: 'fullscreen',

libs/novui/package.json

@@ -51,7 +51,8 @@
       "require": "./styled-system/jsx/index.js",
       "import": "./styled-system/jsx/index.js"
     },
-    "./styles.css": "./styled-system/styles.css"
+    "./styles.css": "./styled-system/styles.css",
+    "./components.css": "./node_modules/@mantine/core/styles.css"
   },
   "scripts": {
     "prepare:lib": "pnpm prepare:panda && pnpm prepare:audit",

libs/novui/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './NovuiProvider';
 export * from './table';
 export * from './Test';
+export * from './button';