From acbfd1f2be88c5f0d3e6d370d8e827d431da8c7c Mon Sep 17 00:00:00 2001
From: Joel Anton <joel@novu.co>
Date: Tue, 11 Jun 2024 10:08:02 +0200
Subject: [PATCH] feat: Include mantine styles & use example

---
 apps/web/src/index.tsx                                        | 2 ++
 .../web/src/studio/components/workflows/WorkflowsListPage.tsx | 2 ++
 libs/novui/.storybook/preview.tsx                             | 4 +---
 libs/novui/package.json                                       | 3 ++-
 libs/novui/src/components/index.ts                            | 1 +
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/index.tsx b/apps/web/src/index.tsx
index bb432202046..ebef315a23e 100644
--- a/apps/web/src/index.tsx
+++ b/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 () => {
diff --git a/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx b/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx
index ec3c94ce7dd..98fbf0aaf07 100644
--- a/apps/web/src/studio/components/workflows/WorkflowsListPage.tsx
+++ b/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>
   );
diff --git a/libs/novui/.storybook/preview.tsx b/libs/novui/.storybook/preview.tsx
index 75698172913..73fad068c87 100644
--- a/libs/novui/.storybook/preview.tsx
+++ b/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',
diff --git a/libs/novui/package.json b/libs/novui/package.json
index 511662a3952..818aa93ae75 100644
--- a/libs/novui/package.json
+++ b/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",
diff --git a/libs/novui/src/components/index.ts b/libs/novui/src/components/index.ts
index c67e1b4c37b..4456b720ed9 100644
--- a/libs/novui/src/components/index.ts
+++ b/libs/novui/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from './NovuiProvider';
 export * from './table';
 export * from './Test';
+export * from './button';