From f29338d02a4f995fc9b7cf80fb4817792c5da0d4 Mon Sep 17 00:00:00 2001
From: Pagebakers <eelco@appulse.nl>
Date: Fri, 30 Jun 2023 13:49:45 +0200
Subject: [PATCH] fix: useModals now always returns the correct type

---
 .changeset/sixty-pumpkins-care.md             |  5 ++++
 packages/saas-ui-modals/package.json          |  4 +++
 packages/saas-ui-modals/src/provider.tsx      | 11 ++++++--
 .../saas-ui-modals/stories/modals.stories.tsx | 28 ++++++++++---------
 yarn.lock                                     |  2 ++
 5 files changed, 34 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/sixty-pumpkins-care.md

diff --git a/.changeset/sixty-pumpkins-care.md b/.changeset/sixty-pumpkins-care.md
new file mode 100644
index 000000000..572653979
--- /dev/null
+++ b/.changeset/sixty-pumpkins-care.md
@@ -0,0 +1,5 @@
+---
+'@saas-ui/modals': patch
+---
+
+Fix issue where useModals would not return the correct type.
diff --git a/packages/saas-ui-modals/package.json b/packages/saas-ui-modals/package.json
index c663f2f3d..5b09a5813 100644
--- a/packages/saas-ui-modals/package.json
+++ b/packages/saas-ui-modals/package.json
@@ -70,5 +70,9 @@
     "framer-motion": ">=6.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "yup": "^1.2.0",
+    "zod": "^3.21.4"
   }
 }
diff --git a/packages/saas-ui-modals/src/provider.tsx b/packages/saas-ui-modals/src/provider.tsx
index 413b50e83..278f5633e 100644
--- a/packages/saas-ui-modals/src/provider.tsx
+++ b/packages/saas-ui-modals/src/provider.tsx
@@ -343,9 +343,14 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
   )
 }
 
-export const useModalsContext = () =>
-  React.useContext(ModalsContext) as ModalsContextValue
+export const useModalsContext = () => React.useContext(ModalsContext)
 
 export const useModals = () => {
-  return useModalsContext()
+  const modals = useModalsContext()
+
+  if (!modals) {
+    throw new Error('useModals must be used within a ModalsProvider')
+  }
+
+  return modals
 }
diff --git a/packages/saas-ui-modals/stories/modals.stories.tsx b/packages/saas-ui-modals/stories/modals.stories.tsx
index 36bec1b53..d2df64ca4 100644
--- a/packages/saas-ui-modals/stories/modals.stories.tsx
+++ b/packages/saas-ui-modals/stories/modals.stories.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react'
 import { Button, Stack, Container, MenuItem } from '@chakra-ui/react'
 
-import { createModals } from '../src'
+import { createModals, useModals } from '../src'
 import { MenuDialogList } from '../src/menu'
 
 import { Field, FormLayout } from '@saas-ui/forms'
 import { BaseModalProps, Modal } from '../src/modal'
-import { FormDialog, createFormDialog } from '../src/form'
+import { FormDialog } from '../src/form'
 import { createField } from '@saas-ui/forms'
-import { createZodForm } from '@saas-ui/forms/zod'
+import { createZodForm, createZodFormDialog } from '@saas-ui/forms/zod'
 
 import * as z from 'zod'
 
@@ -22,7 +22,7 @@ const ZodForm = createZodForm({
   },
 })
 
-const ZodFormDialog = createFormDialog(ZodForm)
+const ZodFormDialog = createZodFormDialog(ZodForm)
 
 interface CustomModalProps extends Omit<BaseModalProps, 'children'> {
   customProp: 'test'
@@ -40,7 +40,7 @@ const CustomModal: React.FC<CustomModalProps> = ({
   </Modal>
 )
 
-const { ModalsProvider, useModals } = createModals({
+const { ModalsProvider, useModals: useCustomModals } = createModals({
   modals: {
     custom: CustomModal,
     form: ZodFormDialog,
@@ -173,10 +173,12 @@ export const Basic = () => {
         onClick={() => {
           modals.form({
             title: 'Form',
-            schema: z.object({
-              title: z.string(),
-            }),
-            defaultvalues: {
+            schema: {
+              title: {
+                type: 'string',
+              },
+            },
+            defaultValues: {
               title: 'My title',
             },
             onError: (error) => console.log(error),
@@ -191,7 +193,7 @@ export const Basic = () => {
 }
 
 export const Custom = () => {
-  const modals = useModals()
+  const modals = useCustomModals()
 
   return (
     <Button
@@ -210,7 +212,7 @@ export const Custom = () => {
 }
 
 export const Form = () => {
-  const modals = useModals()
+  const modals = useCustomModals()
 
   return (
     <Button
@@ -246,7 +248,7 @@ export const Form = () => {
 }
 
 export const CustomForm = () => {
-  const modals = useModals()
+  const modals = useCustomModals()
 
   return (
     <Button
@@ -282,7 +284,7 @@ export const CustomForm = () => {
 }
 
 export const CustomAsComponent = () => {
-  const modals = useModals()
+  const modals = useCustomModals()
 
   return (
     <Button
diff --git a/yarn.lock b/yarn.lock
index 4dd08ffa8..afabb9d47 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7511,6 +7511,8 @@ __metadata:
     "@saas-ui/forms": "workspace:*"
     "@saas-ui/hooks": "workspace:*"
     "@saas-ui/react-utils": "workspace:*"
+    yup: ^1.2.0
+    zod: ^3.21.4
   peerDependencies:
     "@chakra-ui/react": ">=2.4.9"
     "@emotion/react": ">=11.0.0"