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

package/src/create-modals.tsx

@@ -6,13 +6,9 @@ import {
   useModals,
 } from './provider'
 
-interface CreateModalOptions {}
-
-const createModal = (Component: React.FC<any>, options: CreateModalOptions) => {
-  return Component
-}
-
-export interface CreateModalsOptions<TModalDefs> {
+export interface CreateModalsOptions<
+  TModalDefs extends Record<string, React.FC<any>>
+> {
   modals: TModalDefs
 }
 

package/src/drawer.tsx

@@ -9,13 +9,29 @@ import {
   DrawerBody,
   DrawerCloseButton,
   DrawerProps as ChakraDrawerProps,
+  ModalHeaderProps,
+  ModalContentProps,
+  ModalFooterProps,
 } from '@chakra-ui/react'
+import { MaybeRenderProp } from '@chakra-ui/react-utils'
+import { runIfFn } from '@chakra-ui/utils'
 
 export interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {
   /**
    * The drawer title
    */
   title: React.ReactNode
+  /**
+   * The modal children
+   */
+  children: MaybeRenderProp<{
+    isOpen: boolean
+    onClose: () => void
+  }>
+  /**
+   * The modal footer
+   */
+  footer?: React.ReactNode
   /**
    * Hide the close button
    */
@@ -24,26 +40,45 @@ export interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {
    * Hide the overflow
    */
   hideOverlay?: boolean
-  children?: React.ReactNode
+  /**
+   * Props for the modal header
+   */
+  headerProps?: ModalHeaderProps
+  /**
+   * Props for the modal content
+   */
+  contentProps?: ModalContentProps
+  /**
+   * Props for the modal footer
+   */
+  footerProps?: ModalFooterProps
 }
 
 export const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {
   const {
     title,
     children,
+    footer,
     isOpen,
     onClose,
     hideCloseButton,
     hideOverlay,
+    headerProps,
+    contentProps,
+    footerProps,
     ...rest
   } = props
   return (
     <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>
       {!hideOverlay && <DrawerOverlay />}
-      <DrawerContent>
-        <DrawerHeader>{title}</DrawerHeader>
+      <DrawerContent {...contentProps}>
+        {title && <DrawerHeader {...headerProps}>{title}</DrawerHeader>}
         {!hideCloseButton && <DrawerCloseButton />}
-        {children}
+        {runIfFn(children, {
+          isOpen,
+          onClose,
+        })}
+        {footer && <DrawerFooter {...footerProps}>{footer}</DrawerFooter>}
       </DrawerContent>
     </ChakraDrawer>
   )
@@ -57,12 +92,15 @@ export interface DrawerProps extends BaseDrawerProps {
 }
 
 export const Drawer: React.FC<DrawerProps> = (props) => {
-  const { footer, children, ...rest } = props
+  const { children, isOpen, onClose, ...rest } = props
   return (
-    <BaseDrawer {...rest}>
-      <DrawerBody>{children}</DrawerBody>
-
-      {footer && <DrawerFooter>{footer}</DrawerFooter>}
+    <BaseDrawer isOpen={isOpen} onClose={onClose} {...rest}>
+      <DrawerBody>
+        {runIfFn(children, {
+          isOpen,
+          onClose,
+        })}
+      </DrawerBody>
     </BaseDrawer>
   )
 }

package/src/form.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react'
 
-import { ModalBody, ModalFooter, Button, forwardRef } from '@chakra-ui/react'
+import {
+  ModalBody,
+  ModalFooter,
+  Button,
+  forwardRef,
+  ButtonProps,
+} from '@chakra-ui/react'
 import { runIfFn } from '@saas-ui/react-utils'
 
 import {
@@ -11,18 +17,27 @@ import {
   FieldValues,
   FieldResolver,
   FieldProps,
+  FormType,
+  DefaultFieldOverrides,
 } from '@saas-ui/forms'
 
+import { YupFormType } from '@saas-ui/forms/yup'
+import { ZodFormType } from '@saas-ui/forms/zod'
+
 import { BaseModal, BaseModalProps } from './modal'
 
+export type FormDialogFieldOverrides = DefaultFieldOverrides & {
+  cancel?: ButtonProps
+}
+
 export interface FormDialogProps<
+  TSchema = any,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any,
   TFieldTypes = FieldProps<TFieldValues>
 > extends Omit<BaseModalProps, 'children'>,
     Pick<
-      FormProps<TFieldValues, TContext, TSchema, TFieldTypes>,
+      FormProps<TSchema, TFieldValues, TContext, TFieldTypes>,
       | 'schema'
       | 'defaultValues'
       | 'values'
@@ -46,100 +61,149 @@ export interface FormDialogProps<
    * Defaults to a cancel and submit button.
    */
   footer?: React.ReactNode
-  /**
-   * The cancel button label
-   * @default "Cancel"
-   */
-  cancelLabel?: React.ReactNode
-  /**
-   * The submit button label
-   * @default "Submit"
-   */
-  submitLabel?: React.ReactNode
   /**
    * A schema field resolver used to auto generate form fields.
    */
   fieldResolver?: FieldResolver
+  /**
+   * Field overrides
+   */
+  fields?: FormDialogFieldOverrides
 }
+
+const useFormProps = (props: FormDialogProps) => {
+  const {
+    schema,
+    resolver,
+    fieldResolver,
+    defaultValues,
+    values,
+    context,
+    onChange,
+    onSubmit,
+    onError,
+    mode,
+    reValidateMode,
+    shouldFocusError = true,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    criteriaMode,
+    delayError = 100,
+    fields,
+    ...modalProps
+  } = props
+
+  const formProps = {
+    schema,
+    resolver,
+    defaultValues,
+    values,
+    context,
+    onChange,
+    onSubmit,
+    onError,
+    mode,
+    reValidateMode,
+    shouldFocusError,
+    shouldUnregister,
+    shouldUseNativeValidation,
+    criteriaMode,
+    delayError,
+    fields,
+  }
+
+  return { modalProps, formProps, fields }
+}
+
 /**
- * Can be used to quickly request information from people without leaving the current page.
- *
- * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
+ * @todo make this dynamic to support other schema types
  */
-export const FormDialog = forwardRef(
-  <
-    TFieldValues extends FieldValues = FieldValues,
-    TContext extends object = object
-  >(
-    props: FormDialogProps<TFieldValues, TContext>,
-    ref: React.ForwardedRef<HTMLFormElement>
-  ) => {
-    const {
-      children,
-      schema,
-      resolver,
-      fieldResolver,
-      defaultValues,
-      values,
-      context,
-      onChange,
-      onSubmit,
-      onError,
-      mode,
-      reValidateMode,
-      shouldFocusError = true,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError = 100,
-      cancelLabel = 'Cancel',
-      submitLabel = 'Submit',
-      footer,
-      isOpen,
-      onClose,
-      ...rest
-    } = props
-
-    const formProps = {
-      ref,
-      schema,
-      resolver,
-      defaultValues,
-      values,
-      context,
-      onChange,
-      onSubmit,
-      onError,
-      mode,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError,
-    }
+type MergeDialogProps<T> = T extends YupFormType<
+  infer FieldDefs,
+  infer ExtraProps,
+  infer ExtraOverrides,
+  'yup'
+>
+  ? YupFormType<
+      FieldDefs,
+      ExtraProps & Omit<BaseModalProps, 'children'>,
+      ExtraOverrides & FormDialogFieldOverrides
+    >
+  : T extends ZodFormType<
+      infer FieldDefs,
+      infer ExtraProps,
+      infer ExtraOverrides,
+      'zod'
+    >
+  ? ZodFormType<
+      FieldDefs,
+      ExtraProps & Omit<BaseModalProps, 'children'>,
+      ExtraOverrides & FormDialogFieldOverrides
+    >
+  : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides>
+  ? FormType<
+      FieldDefs,
+      ExtraProps & Omit<BaseModalProps, 'children'>,
+      ExtraOverrides & FormDialogFieldOverrides
+    >
+  : never
 
+type IsSchemaType<T, Schema, FieldDefs> = T extends DefaultFormType<FieldDefs>
+  ? T extends (
+      props: FormProps<infer TSchema, infer TFieldValues, infer TContext>
+    ) => any
+    ? Schema extends TSchema
+      ? true
+      : false
+    : false
+  : false
+
+export type DefaultFormType<
+  FieldDefs = any,
+  ExtraProps = object,
+  ExtraOverrides = FormDialogFieldOverrides
+> = (<
+  TSchema = unknown,
+  TFieldValues extends Record<string, any> = any,
+  TContext extends object = object
+>(
+  props: any
+) => React.ReactElement) & {
+  displayName?: string
+  id?: string
+}
+
+export function createFormDialog<
+  FieldDefs = any,
+  ExtraProps = object,
+  ExtraOverrides = FormDialogFieldOverrides,
+  TFormType extends DefaultFormType<
+    FieldDefs,
+    ExtraProps,
+    ExtraOverrides
+  > = DefaultFormType<FieldDefs, ExtraProps, ExtraOverrides>
+>(Form: TFormType) {
+  const Dialog = forwardRef<any, 'div'>((props, ref) => {
+    const { isOpen, onClose, footer, children, ...rest } = props
+    const { modalProps, formProps, fields } = useFormProps(rest)
     return (
-      <BaseModal isOpen={isOpen} onClose={onClose} {...rest}>
-        <Form {...formProps} ref={ref}>
-          {(form) => (
+      <BaseModal {...modalProps} isOpen={isOpen} onClose={onClose}>
+        <Form ref={ref} {...(formProps as any)}>
+          {(form: any) => (
             <>
-              <ModalBody>
-                {runIfFn(children, form) || (
-                  <AutoFields
-                    schema={schema}
-                    fieldResolver={fieldResolver}
-                    focusFirstField
-                  />
-                )}
-              </ModalBody>
+              <ModalBody>{runIfFn(children, form) || <AutoFields />}</ModalBody>
 
               {footer || (
                 <ModalFooter>
-                  <Button variant="ghost" mr={3} onClick={onClose}>
-                    {cancelLabel}
+                  <Button
+                    variant="ghost"
+                    mr={3}
+                    onClick={onClose}
+                    {...fields?.cancel}
+                  >
+                    {fields?.cancel?.children ?? 'Cancel'}
                   </Button>
-                  <SubmitButton>{submitLabel}</SubmitButton>
+                  <SubmitButton {...fields?.submit} />
                 </ModalFooter>
               )}
             </>
@@ -147,9 +211,17 @@ export const FormDialog = forwardRef(
         </Form>
       </BaseModal>
     )
-  }
-) as <TFieldValues extends FieldValues>(
-  props: FormDialogProps<TFieldValues> & {
-    ref?: React.ForwardedRef<HTMLFormElement>
-  }
-) => React.ReactElement
+  }) as MergeDialogProps<TFormType>
+
+  Dialog.displayName = `${Form.displayName || Form.name}Dialog`
+  Dialog.id = Form.id
+
+  return Dialog
+}
+
+/**
+ * Can be used to quickly request information from people without leaving the current page.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
+ */
+export const FormDialog = createFormDialog(Form)

package/src/provider.tsx

@@ -6,6 +6,8 @@ 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>>,
@@ -29,9 +31,7 @@ export interface ModalsContextValue<
   alert: (options: ConfirmDialogOptions) => ModalId
   confirm: (options: ConfirmDialogOptions) => ModalId
   menu: (options: MenuDialogOptions) => ModalId
-  form: <TProps extends FormDialogProps = FormDialogProps>(
-    options: WithModalOptions<TProps>
-  ) => ModalId
+  form: FormDialogHandler<TModals['form']>
   close: (id: ModalId) => void
   closeAll: () => void
 }
@@ -199,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',
@@ -221,7 +221,7 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     })
   }
 
-  const confirm = (options: ConfirmDialogOptions): ModalId => {
+  const confirm = (options: ConfirmDialogOptions) => {
     return open<ConfirmDialogOptions>({
       ...options,
       scope: 'alert',
@@ -229,16 +229,14 @@ export function ModalsProvider({ children, modals }: ModalsProviderProps) {
     })
   }
 
-  const menu = (options: MenuDialogOptions): ModalId => {
+  const menu = (options: MenuDialogOptions) => {
     return open<MenuDialogOptions>({
       ...options,
       type: 'menu',
     })
   }
 
-  const form = <TProps extends FormDialogProps = FormDialogProps>(
-    options: WithModalOptions<TProps>
-  ): ModalId => {
+  const form = (options: any) => {
     return open({
       ...options,
       type: 'form',
@@ -280,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