@saas-ui/modals 2.0.0-next.8 → 2.0.0-rc.22

package/src/provider.tsx

@@ -1,38 +1,59 @@
 import * as React from 'react'
 
-import { Modal, BaseModalProps } from './modal'
-import { Drawer, DrawerProps } from './drawer'
-import { ConfirmDialog, ConfirmDialogProps } from './dialog'
-import { MenuDialog, MenuDialogProps } from './menu'
-import { FormDialog, FormDialogProps } from './form'
-
-export interface ModalsContextValue {
-  open: (options: OpenOptions) => ModalId
+import { BaseModalProps } from './modal'
+import { DrawerProps } from './drawer'
+import { ConfirmDialogProps } from './dialog'
+import { MenuDialogProps } from './menu'
+import { FormDialogProps } from './form'
+import { defaultModals } from './default-modals'
+import { FieldValues, FormType } from '@saas-ui/forms'
+import { FormDialogHandler, FormHandler } from './types'
+
+export interface ModalsContextValue<
+  TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>,
+  TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>
+> {
+  open: <T extends OpenOptions<TTypes>>(
+    componentOrOptions: T extends {
+      component: infer TComponent extends React.FC<any>
+    }
+      ? WithModalOptions<React.ComponentPropsWithRef<TComponent>>
+      : T extends {
+          type: infer TType extends keyof TModals
+        }
+      ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>>
+      : T,
+    options?: T extends React.FC<any>
+      ? WithModalOptions<React.ComponentPropsWithRef<T>>
+      : never
+  ) => ModalId
   drawer: (options: DrawerOptions) => ModalId
   alert: (options: ConfirmDialogOptions) => ModalId
   confirm: (options: ConfirmDialogOptions) => ModalId
   menu: (options: MenuDialogOptions) => ModalId
-  form: (options: FormDialogOptions) => ModalId
+  form: FormDialogHandler<TModals['form']>
   close: (id: ModalId) => void
   closeAll: () => void
 }
 
-export const ModalsContext = React.createContext<ModalsContextValue | null>(
-  null
-)
+export const ModalsContext = React.createContext<ModalsContextValue<
+  typeof defaultModals
+> | null>(null)
 
-interface ModalsProviderProps {
+export interface ModalsProviderProps<
+  TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>
+> {
   children: React.ReactNode
-  modals?: Record<string, React.FC<any>>
+  modals?: TModals
 }
 
 export type ModalId = string | number
 
+type WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions
+
 interface ModalOptions
-  extends Omit<BaseModalProps, 'onClose' | 'isOpen' | 'children'> {
+  extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {
   onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void
-  body?: React.ReactNode
-  children?: React.ReactNode
   [key: string]: any
 }
 
@@ -52,23 +73,16 @@ export interface FormDialogOptions
   extends ModalOptions,
     Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}
 
-export interface OpenOptions extends ModalOptions {
-  type?: ModalTypes
+export interface OpenOptions<TModalTypes extends string> extends ModalOptions {
+  type?: TModalTypes
   scope?: ModalScopes
 }
 
 export type ModalScopes = 'modal' | 'alert'
 
-export type ModalTypes =
-  | 'modal'
-  | 'drawer'
-  | 'alert'
-  | 'confirm'
-  | 'menu'
-  | string
-
 export interface ModalConfig<
-  TModalOptions extends ModalOptions = ModalOptions
+  TModalOptions extends ModalOptions = ModalOptions,
+  TModalTypes extends string = string
 > {
   /**
    * The modal id, autogenerated when not set.
@@ -91,7 +105,7 @@ export interface ModalConfig<
    *
    * Custom types can be configured using the `modals` prop of `ModalProvider`
    */
-  type?: ModalTypes
+  type?: TModalTypes
   /**
    * Render a custom modal component.
    * This will ignore the `type` param.
@@ -110,15 +124,6 @@ const initialModalState: ModalConfig = {
   type: 'modal',
 }
 
-const defaultModals = {
-  alert: ConfirmDialog,
-  confirm: ConfirmDialog,
-  drawer: Drawer,
-  modal: Modal,
-  menu: MenuDialog,
-  form: FormDialog,
-}
-
 export function ModalsProvider({ children, modals }: ModalsProviderProps) {
   // Note that updating the Set doesn't trigger a re-render,
   // use in conjuction with setActiveModals
@@ -136,7 +141,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
       ...modals,
     }
 
-    return (type: ModalTypes = 'modal') => {
+    return (type = 'modal') => {
       const component = _modals[type] || _modals.modal
 
       return component
@@ -155,14 +160,20 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     }))
   }
 
-  const open = <T extends ModalOptions>(
-    options: T | React.FC<BaseModalProps>
+  const open = <T extends OpenOptions<any>>(
+    componentOrOptions: any,
+    options?: T extends React.FC<any>
+      ? WithModalOptions<React.ComponentPropsWithRef<T>>
+      : never
   ): ModalId => {
-    if (typeof options === 'function') {
-      const component: React.FC<BaseModalProps> = options
-      options = {
-        component,
+    let _options: ModalOptions
+    if (typeof componentOrOptions === 'function') {
+      _options = {
+        component: componentOrOptions,
+        ...options,
       } as unknown as T
+    } else {
+      _options = componentOrOptions
     }
 
     const {
@@ -171,7 +182,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
       scope = 'modal',
       component,
       ...props
-    } = options
+    } = _options
 
     const modal: ModalConfig<T> = {
       id,
@@ -188,14 +199,14 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     return id
   }
 
-  const drawer = (options: DrawerOptions): ModalId => {
+  const drawer = (options: DrawerOptions) => {
     return open<DrawerOptions>({
       ...options,
       type: 'drawer',
     })
   }
 
-  const alert = (options: ConfirmDialogOptions): ModalId => {
+  const alert = (options: ConfirmDialogOptions) => {
     return open({
       ...options,
       scope: 'alert',
@@ -210,7 +221,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     })
   }
 
-  const confirm = (options: ConfirmDialogOptions): ModalId => {
+  const confirm = (options: ConfirmDialogOptions) => {
     return open<ConfirmDialogOptions>({
       ...options,
       scope: 'alert',
@@ -218,15 +229,15 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     })
   }
 
-  const menu = (options: MenuDialogOptions): ModalId => {
+  const menu = (options: MenuDialogOptions) => {
     return open<MenuDialogOptions>({
       ...options,
       type: 'menu',
     })
   }
 
-  const form = (options: FormDialogOptions): ModalId => {
-    return open<FormDialogOptions>({
+  const form = (options: any) => {
+    return open({
       ...options,
       type: 'form',
     })
@@ -267,6 +278,8 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
         modal.scope
       )
     }
+
+    closeComplete(id)
   }
 
   const closeComplete = (id?: ModalId | null) => {

package/src/types.ts

@@ -0,0 +1,83 @@
+import { FormProps, FormType } from '@saas-ui/forms'
+import { ModalId } from './provider'
+import { AnyObjectSchema, YupFormType } from '@saas-ui/forms/yup'
+import { FormDialogFieldOverrides } from './form'
+import { WithFields } from '@saas-ui/forms'
+import { FieldValues } from '@saas-ui/forms'
+import type { z } from 'zod'
+import type { InferType } from 'yup'
+import { ZodFormType } from '@saas-ui/forms/zod'
+
+export type FormDialogHandler<T> = T extends YupFormType<
+  infer FieldDefs,
+  infer ExtraProps,
+  infer ExtraOverrides,
+  'yup'
+>
+  ? YupHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides>
+  : T extends ZodFormType<
+      infer FieldDefs,
+      infer ExtraProps,
+      infer ExtraOverrides,
+      'zod'
+    >
+  ? ZodHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides>
+  : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides>
+  ? FormHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides>
+  : never
+
+export type ZodHandler<
+  FieldDefs,
+  ExtraProps = object,
+  ExtraOverrides = object,
+  Type extends 'zod' = 'zod'
+> = <
+  TSchema extends z.AnyZodObject = z.AnyZodObject,
+  TFieldValues extends z.infer<TSchema> = z.infer<TSchema>,
+  TContext extends object = object
+>(
+  props: WithFields<
+    FormProps<TSchema, TFieldValues, TContext>,
+    FieldDefs,
+    ExtraOverrides
+  > & {
+    ref?: React.ForwardedRef<HTMLFormElement>
+  } & ExtraProps
+) => ModalId
+
+export type FormHandler<
+  FieldDefs,
+  ExtraProps = object,
+  ExtraOverrides = object
+> = <
+  TSchema = unknown,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object
+>(
+  props: WithFields<
+    FormProps<TSchema, TFieldValues, TContext>,
+    FieldDefs,
+    ExtraOverrides
+  > & {
+    ref?: React.ForwardedRef<HTMLFormElement>
+  } & ExtraProps
+) => ModalId
+
+export type YupHandler<
+  FieldDefs,
+  ExtraProps = object,
+  ExtraOverrides = object,
+  Type extends 'yup' = 'yup'
+> = <
+  TSchema extends AnyObjectSchema = AnyObjectSchema,
+  TFieldValues extends InferType<TSchema> = InferType<TSchema>, // placeholder
+  TContext extends object = object
+>(
+  props: WithFields<
+    FormProps<TFieldValues, TContext, TSchema>,
+    FieldDefs,
+    ExtraOverrides
+  > & {
+    ref?: React.ForwardedRef<HTMLFormElement>
+  } & ExtraProps
+) => ModalId