feat: create table add comfirm modal (#15)

* feat: create table add comfirm modal

* chore(syncpack): format and sync package.json files

Co-authored-by: github-actions[bot] <github-actions@github.com>

apps/web/app/App.tsx

@@ -17,6 +17,8 @@ import {
   Divider,
   Alert,
   IconAlertCircle,
+  openConfirmModal,
+  Text,
 } from '@egodb/ui'
 import { createTableCommandInput, type ICreateTableInput } from '@egodb/core'
 import { trpc } from '../trpc'
@@ -39,6 +41,26 @@ export default function App() {
     createTable.mutate(values)
   })
 
+  const closeModal = () => {
+    form.reset()
+    createTable.reset()
+    toggle(false)
+  }
+
+  const openModal = () =>
+    openConfirmModal({
+      target: 'body',
+      title: 'Please confirm your action',
+      children: <Text size="sm">You have unsaved changes. Do you really want to close the panel?</Text>,
+      labels: { confirm: 'Confirm', cancel: 'Cancel' },
+      confirmProps: { color: 'red' },
+      onConfirm: closeModal,
+      overlayColor: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[2],
+      overlayOpacity: 0.55,
+      overlayBlur: 3,
+      centered: true,
+    })
+
   return (
     <>
       <AppShell
@@ -71,9 +93,11 @@ export default function App() {
       <Drawer
         opened={opened}
         onClose={() => {
-          form.reset()
-          createTable.reset()
-          toggle(false)
+          if (form.isDirty()) {
+            openModal()
+          } else {
+            closeModal()
+          }
         }}
         title="New Table"
         padding="xl"

apps/web/app/emotion.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { CacheProvider, EgoUIProvider, useEmotionCache } from '@egodb/ui'
+import { CacheProvider, EgoUIProvider, ModalsProvider, useEmotionCache } from '@egodb/ui'
 import { useServerInsertedHTML } from 'next/navigation'
 
 export default function RootStyleRegistry({ children }: { children: React.ReactNode }) {
@@ -20,7 +20,7 @@ export default function RootStyleRegistry({ children }: { children: React.ReactN
   return (
     <CacheProvider value={cache}>
       <EgoUIProvider withGlobalStyles withNormalizeCSS>
-        {children}
+        <ModalsProvider>{children}</ModalsProvider>
       </EgoUIProvider>
     </CacheProvider>
   )

package.json

@@ -8,7 +8,7 @@
     "commitizen": "^4.2.5",
     "cz-conventional-changelog": "^3.3.0",
     "husky": "^8.0.2",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "syncpack": "^8.3.9",
     "turbo": "^1.6.3"
   },

packages/ui/Typography.tsx

@@ -0,0 +1 @@
+export { Text } from '@mantine/core'

packages/ui/index.tsx

@@ -10,8 +10,10 @@ export * from './AppShell'
 export * from './Divider'
 export * from './Provider'
 export * from './Inputs'
+export * from './Typography'
 
 export * from './hooks'
 export * from './theme'
 export * from './Form'
 export * from './notification'
+export * from './modal'

packages/ui/modal.ts

@@ -0,0 +1 @@
+export { ModalsProvider, openConfirmModal } from '@mantine/modals'

packages/ui/package.json

@@ -5,11 +5,12 @@
     "@babel/core": "^7.20.2",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
-    "@mantine/core": "^5.8.2",
-    "@mantine/form": "^5.8.2",
-    "@mantine/hooks": "^5.8.2",
-    "@mantine/next": "^5.8.2",
-    "@mantine/notifications": "^5.8.2",
+    "@mantine/core": "^5.8.3",
+    "@mantine/form": "^5.8.3",
+    "@mantine/hooks": "^5.8.3",
+    "@mantine/modals": "^5.8.3",
+    "@mantine/next": "^5.8.3",
+    "@mantine/notifications": "^5.8.3",
     "@tabler/icons": "^1.112.0",
     "react-dom": "^18.2.0"
   },