From e9fec88718fe2d804638f0cd0be893b118f61130 Mon Sep 17 00:00:00 2001
From: Eelco Wiersma <eelco@appulse.nl>
Date: Mon, 25 Nov 2024 10:31:16 +0000
Subject: [PATCH] feat: add toaster and menu components

---
 .changeset/beige-fans-eat.md                  |  5 ++
 .../src/components/snackbar/index.ts          |  2 -
 .../components/snackbar/snackbar.context.ts   | 10 ---
 .../src/components/snackbar/snackbar.tsx      | 61 -------------------
 .../src/components/toaster/index.ts           |  1 +
 .../src/components/toaster/toaster.tsx        | 48 +++++++++++++++
 packages/saas-ui-react/src/index.ts           |  3 +-
 7 files changed, 56 insertions(+), 74 deletions(-)
 create mode 100644 .changeset/beige-fans-eat.md
 delete mode 100644 packages/saas-ui-react/src/components/snackbar/index.ts
 delete mode 100644 packages/saas-ui-react/src/components/snackbar/snackbar.context.ts
 delete mode 100644 packages/saas-ui-react/src/components/snackbar/snackbar.tsx
 create mode 100644 packages/saas-ui-react/src/components/toaster/index.ts
 create mode 100644 packages/saas-ui-react/src/components/toaster/toaster.tsx

diff --git a/.changeset/beige-fans-eat.md b/.changeset/beige-fans-eat.md
new file mode 100644
index 00000000..aba2cc64
--- /dev/null
+++ b/.changeset/beige-fans-eat.md
@@ -0,0 +1,5 @@
+---
+'@saas-ui/react': minor
+---
+
+Added toaster and menu components
diff --git a/packages/saas-ui-react/src/components/snackbar/index.ts b/packages/saas-ui-react/src/components/snackbar/index.ts
deleted file mode 100644
index 0367c1ef..00000000
--- a/packages/saas-ui-react/src/components/snackbar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './snackbar.tsx'
-export { useSnackbar } from './snackbar.context.ts'
diff --git a/packages/saas-ui-react/src/components/snackbar/snackbar.context.ts b/packages/saas-ui-react/src/components/snackbar/snackbar.context.ts
deleted file mode 100644
index 76eaedbb..00000000
--- a/packages/saas-ui-react/src/components/snackbar/snackbar.context.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { type CreateToasterReturn, createContext } from '@chakra-ui/react'
-
-export interface SnackbarContextValue {
-  snackbar: CreateToasterReturn
-}
-
-export const [SnackbarProvider, useSnackbar] =
-  createContext<SnackbarContextValue>({
-    name: 'SnackbarContext',
-  })
diff --git a/packages/saas-ui-react/src/components/snackbar/snackbar.tsx b/packages/saas-ui-react/src/components/snackbar/snackbar.tsx
deleted file mode 100644
index 517bfc94..00000000
--- a/packages/saas-ui-react/src/components/snackbar/snackbar.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client'
-
-import { useMemo } from 'react'
-
-import {
-  Toaster as ChakraToaster,
-  CreateToasterReturn,
-  Portal,
-  Spinner,
-  Stack,
-  Toast,
-  createToaster,
-} from '@chakra-ui/react'
-
-import { SnackbarProvider } from './snackbar.context.ts'
-
-export interface SnackbarProps extends CreateToasterReturn {
-  children: React.ReactNode
-}
-
-export const Snackbar = (props: SnackbarProps) => {
-  const { children, ...rest } = props
-
-  const toaster = useMemo(
-    () =>
-      createToaster({
-        placement: 'bottom-end',
-        pauseOnPageIdle: true,
-        ...rest,
-      }),
-    [],
-  )
-
-  return (
-    <SnackbarProvider value={{ snackbar: toaster }}>
-      <Portal>
-        <ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
-          {(toast) => (
-            <Toast.Root width={{ md: 'sm' }}>
-              {toast.type === 'loading' ? (
-                <Spinner size="sm" color="colorPalette.solid" />
-              ) : (
-                <Toast.Indicator />
-              )}
-              <Stack gap="1" flex="1" maxWidth="100%">
-                {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
-                {toast.description && (
-                  <Toast.Description>{toast.description}</Toast.Description>
-                )}
-              </Stack>
-              {toast.action && (
-                <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
-              )}
-              {toast.meta?.closable && <Toast.CloseTrigger />}
-            </Toast.Root>
-          )}
-        </ChakraToaster>
-      </Portal>
-    </SnackbarProvider>
-  )
-}
diff --git a/packages/saas-ui-react/src/components/toaster/index.ts b/packages/saas-ui-react/src/components/toaster/index.ts
new file mode 100644
index 00000000..d8c6aae6
--- /dev/null
+++ b/packages/saas-ui-react/src/components/toaster/index.ts
@@ -0,0 +1 @@
+export * from './toaster.tsx'
diff --git a/packages/saas-ui-react/src/components/toaster/toaster.tsx b/packages/saas-ui-react/src/components/toaster/toaster.tsx
new file mode 100644
index 00000000..b9fbb88b
--- /dev/null
+++ b/packages/saas-ui-react/src/components/toaster/toaster.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import {
+  Toaster as ChakraToaster,
+  CreateToasterReturn,
+  Portal,
+  Spinner,
+  Stack,
+  Toast,
+  createToaster,
+} from '@chakra-ui/react'
+
+export const toast = createToaster({
+  placement: 'bottom-end',
+  pauseOnPageIdle: true,
+})
+
+export interface ToasterProps extends CreateToasterReturn {
+  children: React.ReactNode
+}
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toast} insetInline={{ mdDown: '4' }}>
+        {(toast) => (
+          <Toast.Root width={{ md: 'sm' }}>
+            {toast.type === 'loading' ? (
+              <Spinner size="sm" color="colorPalette.solid" />
+            ) : (
+              <Toast.Indicator />
+            )}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && (
+                <Toast.Description>{toast.description}</Toast.Description>
+              )}
+            </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+            )}
+            {toast.meta?.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  )
+}
diff --git a/packages/saas-ui-react/src/index.ts b/packages/saas-ui-react/src/index.ts
index b3c5b650..57133dcc 100644
--- a/packages/saas-ui-react/src/index.ts
+++ b/packages/saas-ui-react/src/index.ts
@@ -21,6 +21,7 @@ export * from './components/link/index.ts'
 export * from './components/loading-overlay/index.ts'
 export * from './components/navbar/index.ts'
 export * from './components/number-input/index.ts'
+export * from './components/menu/index.ts'
 export * from './components/password-input/index.ts'
 export * from './components/persona/index.ts'
 export * from './components/pin-input/index.ts'
@@ -29,7 +30,7 @@ export * from './components/search-input/index.ts'
 export * from './components/select/index.ts'
 export * from './components/segmented-control/index.ts'
 export * from './components/sidebar/index.ts'
-export * from './components/snackbar/index.ts'
+export * from './components/toaster/index.ts'
 export * from './components/spinner/index.ts'
 export * from './components/steps/index.ts'
 export * from './components/switch/index.ts'