@saas-ui/modals 3.0.0-alpha.1 → 3.0.0-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @saas-ui/modals
 
+## 3.0.0-alpha.2
+
+### Minor Changes
+
+- 6459de4: Removed src exports and files from packages
+
+### Patch Changes
+
+- Updated dependencies [6459de4]
+  - @saas-ui/modals-provider@1.0.0-alpha.2
+  - @saas-ui/forms@3.0.0-alpha.2
+  - @saas-ui/hooks@3.0.0-alpha.2
+  - @saas-ui/react@3.0.0-alpha.2
+  - @saas-ui/core@3.0.0-alpha.2
+
 ## 3.0.0-alpha.1
 
 ### Major Changes

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@saas-ui/modals",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "A modal manager for Chakra UI",
-  "source": "src/index.ts",
   "type": "module",
   "exports": {
     ".": {
@@ -35,8 +34,7 @@
     "typecheck": "tsc --noEmit"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -68,15 +66,15 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@saas-ui/core": "3.0.0-alpha.1",
-    "@saas-ui/forms": "3.0.0-alpha.1",
-    "@saas-ui/hooks": "3.0.0-alpha.1",
-    "@saas-ui/modals-provider": "1.0.0-alpha.1"
+    "@saas-ui/core": "3.0.0-alpha.2",
+    "@saas-ui/forms": "3.0.0-alpha.2",
+    "@saas-ui/hooks": "3.0.0-alpha.2",
+    "@saas-ui/modals-provider": "1.0.0-alpha.2"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.0.0",
     "@emotion/react": ">=11.0.0",
-    "@saas-ui/react": "3.0.0-alpha.1",
+    "@saas-ui/react": "3.0.0-alpha.2",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/src/alert-dialog.tsx

@@ -1,156 +0,0 @@
-import * as React from 'react'
-
-import { Button, ButtonProps, type HTMLChakraProps } from '@chakra-ui/react'
-import { callAll } from '@saas-ui/core/utils'
-import { Dialog } from '@saas-ui/react/dialog'
-
-export interface AlertDialogProps
-  extends Omit<
-    Dialog.RootProps,
-    'leastDestructiveRef' | 'onOpenChange' | 'open'
-  > {
-  /**
-   * Whether the dialog is open
-   */
-  open: boolean
-  /**
-   * Callback when the dialog is opened or closed
-   */
-  onOpenChange: (details: { open: boolean }) => void
-  /**
-   * The dialog title
-   */
-  title?: React.ReactNode
-  translations?: {
-    cancel?: React.ReactNode
-    confirm?: React.ReactNode
-    close?: React.ReactNode
-  }
-  slotProps?: {
-    cancel?: ButtonProps
-    confirm?: ButtonProps
-    footer?: HTMLChakraProps<'div'>
-  }
-  /**
-   * Close the dialog on cancel
-   * @default true
-   */
-  closeOnCancel?: boolean
-  /**
-   * Close the dialog on confirm
-   * @default true
-   */
-  closeOnConfirm?: boolean
-  /**
-   * Hide the backdrop
-   */
-  backdrop?: boolean
-  /**
-   * Hide the close button
-   */
-  hideCloseButton?: boolean
-  /**
-   * Defines which button gets initial focus
-   * https://www.w3.org/TR/wai-aria-practices/#alertdialog
-   */
-  leastDestructiveFocus?: 'cancel' | 'confirm'
-  /**
-   * Function that's called when cancel is clicked
-   */
-  onCancel?: () => void
-  /**
-   * Function that's called when confirm is clicked.
-   */
-  onConfirm?: () => Promise<void> | void
-}
-
-export const AlertDialog: React.FC<AlertDialogProps> = (props) => {
-  const {
-    title,
-    translations,
-    slotProps,
-    open,
-    closeOnCancel = true,
-    closeOnConfirm = true,
-    leastDestructiveFocus = 'cancel',
-    onOpenChange,
-    onCancel,
-    onConfirm,
-    children,
-    ...rest
-  } = props
-
-  const cancelRef = React.useRef(null)
-  const confirmRef = React.useRef(null)
-  const [isLoading, setIsLoading] = React.useState(false)
-
-  const handleConfirm = async () => {
-    try {
-      const result = onConfirm?.()
-      if (typeof result?.then === 'function') {
-        setIsLoading(true)
-        await result
-      }
-
-      closeOnConfirm && onOpenChange({ open: false })
-      /* eslint-disable no-useless-catch */
-    } catch (e: any) {
-      throw e
-    } finally {
-      setIsLoading(false)
-    }
-    /* eslint-enable */
-  }
-
-  const titleId = React.useId()
-  const contentId = React.useId()
-
-  return (
-    <Dialog.Root
-      open={open}
-      onOpenChange={onOpenChange}
-      size="sm"
-      aria-labelledby={titleId}
-      aria-describedby={contentId}
-      {...rest}
-      initialFocusEl={() =>
-        leastDestructiveFocus === 'cancel'
-          ? cancelRef.current
-          : confirmRef.current
-      }
-    >
-      <Dialog.Content>
-        <Dialog.Header>
-          <Dialog.Title id={titleId}>{title}</Dialog.Title>
-        </Dialog.Header>
-
-        <Dialog.Body id={contentId}>{children}</Dialog.Body>
-
-        <Dialog.Footer {...slotProps?.footer}>
-          <Button
-            ref={cancelRef}
-            variant="ghost"
-            colorPalette="gray"
-            {...slotProps?.cancel}
-            onClick={callAll(slotProps?.cancel?.onClick, () => {
-              onCancel?.()
-
-              closeOnCancel && onOpenChange({ open: false })
-            })}
-          >
-            {slotProps?.cancel?.children || translations?.cancel || 'Cancel'}
-          </Button>
-          <Button
-            ref={confirmRef}
-            variant="solid"
-            disabled={isLoading}
-            {...slotProps?.confirm}
-            onClick={callAll(handleConfirm, slotProps?.confirm?.onClick)}
-          >
-            {slotProps?.confirm?.children || translations?.confirm || 'OK'}
-          </Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog.Root>
-  )
-}

package/src/default-modals.ts

@@ -1,10 +0,0 @@
-import { AlertDialog } from './alert-dialog'
-import { Drawer } from './drawer'
-import { Modal } from './modal'
-
-export const defaultModals = {
-  alert: AlertDialog,
-  confirm: AlertDialog,
-  drawer: Drawer,
-  modal: Modal,
-}

package/src/drawer.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react'
-
-import { type HTMLChakraProps } from '@chakra-ui/react'
-import { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'
-import { Drawer as BaseDrawer } from '@saas-ui/react/drawer'
-
-export interface DrawerProps extends Omit<BaseDrawer.RootProps, 'children'> {
-  /**
-   * The drawer title
-   */
-  title: React.ReactNode
-  /**
-   * Whether the modal is open
-   */
-  open: boolean
-  /**
-   * Callback when the drawer is opened or closed
-   */
-  onOpenChange: (details: { open: boolean }) => void
-  /**
-   * The drawer children
-   */
-  children: MaybeRenderProp<{
-    open: boolean
-    setOpen: (open: boolean) => void
-  }>
-  /**
-   * The modal footer
-   */
-  footer?: React.ReactNode
-  /**
-   * Hide the close button
-   */
-  hideCloseButton?: boolean
-  /**
-   * Hide the backdrop
-   */
-  hideBackdrop?: boolean
-  /**
-   * Props for the modal header
-   */
-  headerProps?: HTMLChakraProps<'div'>
-  /**
-   * Props for the modal content
-   */
-  contentProps?: BaseDrawer.ContentProps
-  /**
-   * Props for the modal footer
-   */
-  footerProps?: HTMLChakraProps<'div'>
-  /**
-   * Props for the modal body
-   */
-  bodyProps?: HTMLChakraProps<'div'>
-}
-
-export const Drawer: React.FC<DrawerProps> = (props) => {
-  const {
-    title,
-    children,
-    footer,
-    open,
-    onOpenChange,
-    hideCloseButton,
-    hideBackdrop,
-    headerProps,
-    contentProps,
-    bodyProps,
-    footerProps,
-    ...rest
-  } = props
-  return (
-    <BaseDrawer.Root open={open} onOpenChange={onOpenChange} {...rest}>
-      {!hideBackdrop && <BaseDrawer.Backdrop />}
-      <BaseDrawer.Content {...contentProps}>
-        {title && (
-          <BaseDrawer.Header {...headerProps}>{title}</BaseDrawer.Header>
-        )}
-        {!hideCloseButton && <BaseDrawer.CloseTrigger />}
-        <BaseDrawer.Body {...bodyProps}>
-          <BaseDrawer.Context>
-            {({ open, setOpen }) => runIfFn(children, { open, setOpen })}
-          </BaseDrawer.Context>
-        </BaseDrawer.Body>
-        {footer && (
-          <BaseDrawer.Footer {...footerProps}>{footer}</BaseDrawer.Footer>
-        )}
-      </BaseDrawer.Content>
-    </BaseDrawer.Root>
-  )
-}

package/src/form.tsx

@@ -1,219 +0,0 @@
-import * as React from 'react'
-
-import { Button, ButtonProps, Dialog } from '@chakra-ui/react'
-import { runIfFn } from '@saas-ui/core/utils'
-import {
-  AutoFields,
-  DefaultFieldOverrides,
-  FieldProps,
-  FieldResolver,
-  FieldValues,
-  Form,
-  FormProps,
-  FormType,
-  SubmitButton,
-} from '@saas-ui/forms'
-
-import { BaseModal, BaseModalProps } from './modal'
-
-export type FormDialogFieldOverrides = DefaultFieldOverrides & {
-  cancel?: ButtonProps
-}
-
-export interface FormDialogProps<
-  TSchema = any,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TExtraFieldProps extends object = object,
-  TFieldTypes = FieldProps<TFieldValues>,
-> extends Omit<BaseModalProps, 'children'>,
-    Pick<
-      FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>,
-      | 'schema'
-      | 'defaultValues'
-      | 'values'
-      | 'context'
-      | 'onChange'
-      | 'onSubmit'
-      | 'onError'
-      | 'resolver'
-      | 'mode'
-      | 'reValidateMode'
-      | 'shouldFocusError'
-      | 'shouldUnregister'
-      | 'shouldUseNativeValidation'
-      | 'criteriaMode'
-      | 'delayError'
-      | 'resetOptions'
-      | 'formRef'
-      | 'children'
-    > {
-  /**
-   * The modal footer, will be wrapped with `ModalFooter`.
-   * Defaults to a cancel and submit button.
-   */
-  footer?: 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,
-    formRef,
-    ...modalProps
-  } = props
-
-  const formProps = {
-    schema,
-    resolver,
-    defaultValues,
-    values,
-    context,
-    onChange,
-    onSubmit,
-    onError,
-    mode,
-    reValidateMode,
-    shouldFocusError,
-    shouldUnregister,
-    shouldUseNativeValidation,
-    criteriaMode,
-    delayError,
-    fields,
-    formRef,
-  }
-
-  return { modalProps, formProps, fields }
-}
-
-/**
- * @todo make this dynamic to support other schema types
- */
-type MergeDialogProps<T> =
-  T extends FormType<
-    infer FieldDefs,
-    infer ExtraProps,
-    infer ExtraFieldProps,
-    infer ExtraOverrides
-  >
-    ? FormType<
-        FieldDefs,
-        ExtraProps & Omit<BaseModalProps, 'children'>,
-        ExtraFieldProps,
-        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,
-  ExtraFieldProps extends object = 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,
-  ExtraFieldProps extends object = object,
-  ExtraOverrides = FormDialogFieldOverrides,
-  TFormType extends DefaultFormType<
-    FieldDefs,
-    ExtraProps,
-    ExtraFieldProps,
-    ExtraOverrides
-  > = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>,
->(Form: TFormType) {
-  const Dialog = React.forwardRef<HTMLDivElement, any>((props, ref) => {
-    const { isOpen, onClose, footer, children, ...rest } = props
-    const { modalProps, formProps, fields } = useFormProps(rest)
-    return (
-      <BaseModal {...modalProps} isOpen={isOpen} onClose={onClose}>
-        <Form
-          ref={ref}
-          {...(formProps as any)}
-          flex="1"
-          minHeight="0px"
-          display="flex"
-          flexDirection="column"
-        >
-          {(form: any) => (
-            <>
-              <Dialog.Body height="100%">
-                {runIfFn(children, form) || <AutoFields />}
-              </Dialog.Body>
-
-              {footer || (
-                <Dialog.Footer>
-                  <Button
-                    variant="ghost"
-                    mr={3}
-                    onClick={onClose}
-                    {...fields?.cancel}
-                  >
-                    {fields?.cancel?.children ?? 'Cancel'}
-                  </Button>
-                  <SubmitButton {...fields?.submit} />
-                </Dialog.Footer>
-              )}
-            </>
-          )}
-        </Form>
-      </BaseModal>
-    )
-  }) 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/index.ts

@@ -1,31 +0,0 @@
-import { createModals } from '@saas-ui/modals-provider'
-
-import { defaultModals } from './default-modals.ts'
-
-// Exporting from './dialog'
-export { AlertDialog } from './alert-dialog.tsx'
-export type { AlertDialogProps } from './alert-dialog.tsx'
-
-// Exporting from './drawer'
-export { Drawer } from './drawer'
-export type { DrawerProps } from './drawer'
-
-// Exporting from './modal'
-export { Modal } from './modal'
-export type { ModalProps } from './modal'
-
-// Exporting from './form'
-// export { FormDialog, createFormDialog } from './form'
-// export type {
-//   DefaultFormType,
-//   FormDialogFieldOverrides,
-//   FormDialogProps,
-// } from './form'
-
-// Exporting from './provider'
-
-const { useModals, ModalsProvider } = createModals({
-  modals: defaultModals,
-})
-
-export { ModalsProvider, useModals }

package/src/modal.tsx

@@ -1,90 +0,0 @@
-import * as React from 'react'
-
-import type { HTMLChakraProps } from '@chakra-ui/react'
-import { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'
-import { Dialog as BaseDialog } from '@saas-ui/react/dialog'
-
-export interface ModalProps extends Omit<BaseDialog.RootProps, 'children'> {
-  /**
-   * The modal title
-   */
-  title?: React.ReactNode
-  /**
-   * Whether the modal is open
-   */
-  open: boolean
-  /**
-   * Callback when the modal is opened or closed
-   */
-  onOpenChange: (details: { open: boolean }) => void
-  /**
-   * The modal children
-   */
-  children: MaybeRenderProp<{
-    open: boolean
-    setOpen: (open: boolean) => void
-  }>
-  /**
-   * The modal footer
-   */
-  footer?: React.ReactNode
-  /**
-   * Hide the close button
-   */
-  hideCloseButton?: boolean
-  /**
-   * Hide the overlay
-   */
-  hideBackdrop?: boolean
-  /**
-   * Props for the modal header
-   */
-  headerProps?: HTMLChakraProps<'div'>
-  /**
-   * Props for the modal content
-   */
-  contentProps?: HTMLChakraProps<'div'>
-  /**
-   * Props for the modal body
-   */
-  bodyProps?: HTMLChakraProps<'div'>
-  /**
-   * Props for the modal footer
-   */
-  footerProps?: HTMLChakraProps<'div'>
-}
-
-export const Modal: React.FC<ModalProps> = (props) => {
-  const {
-    title,
-    footer,
-    children,
-    open,
-    onOpenChange,
-    hideCloseButton,
-    hideBackdrop,
-    headerProps,
-    contentProps,
-    bodyProps,
-    footerProps,
-    ...rest
-  } = props
-  return (
-    <BaseDialog.Root open={open} onOpenChange={onOpenChange} {...rest}>
-      <BaseDialog.Content {...contentProps}>
-        {title && (
-          <BaseDialog.Header {...headerProps}>{title}</BaseDialog.Header>
-        )}
-        {!hideCloseButton && <BaseDialog.CloseTrigger />}
-        <BaseDialog.Body>
-          <BaseDialog.Context>
-            {({ open, setOpen }) => runIfFn(children, { open, setOpen })}
-          </BaseDialog.Context>
-        </BaseDialog.Body>
-        {footer && (
-          <BaseDialog.Footer {...footerProps}>{footer}</BaseDialog.Footer>
-        )}
-      </BaseDialog.Content>
-    </BaseDialog.Root>
-  )
-}

package/src/types.ts

@@ -1,96 +0,0 @@
-import type {
-  FieldValues,
-  FormProps,
-  FormType,
-  WithFields,
-} from '@saas-ui/forms'
-import { AnyObjectSchema, YupFormType } from '@saas-ui/forms/yup'
-import { ZodFormType } from '@saas-ui/forms/zod'
-import { ModalId } from '@saas-ui/modals-provider'
-import type { InferType } from 'yup'
-import type { z } from 'zod'
-
-import { FormDialogFieldOverrides } from './form'
-
-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

package/src/yup/create-yup-form-dialog.ts

@@ -1,18 +0,0 @@
-import type { YupFormType } from '@saas-ui/forms/yup'
-import { FormDialogFieldOverrides, createFormDialog } from '../form'
-
-import type { BaseModalProps } from '../modal'
-
-export function createYupFormDialog<
-  FieldDefs = any,
-  ExtraProps = object,
-  ExtraFieldProps extends object = object,
-  ExtraOverrides = object,
->(Form: YupFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {
-  return createFormDialog(Form) as unknown as YupFormType<
-    FieldDefs,
-    ExtraProps & Omit<BaseModalProps, 'children'>,
-    ExtraFieldProps,
-    ExtraOverrides & FormDialogFieldOverrides
-  >
-}

package/src/yup/index.ts

@@ -1,6 +0,0 @@
-import { Form } from '@saas-ui/forms/yup'
-import { createYupFormDialog } from './create-yup-form-dialog'
-
-export { createYupFormDialog }
-
-export const FormDialog = createYupFormDialog(Form)

package/src/zod/create-zod-form-dialog.ts

@@ -1,17 +0,0 @@
-import type { ZodFormType } from '@saas-ui/forms/zod'
-import { createFormDialog, FormDialogFieldOverrides } from '../form'
-import type { BaseModalProps } from '../modal'
-
-export function createZodFormDialog<
-  FieldDefs = any,
-  ExtraProps = object,
-  ExtraFieldProps extends object = object,
-  ExtraOverrides = object,
->(Form: ZodFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {
-  return createFormDialog(Form) as unknown as ZodFormType<
-    FieldDefs,
-    ExtraProps & Omit<BaseModalProps, 'children'>,
-    ExtraFieldProps,
-    ExtraOverrides & FormDialogFieldOverrides
-  >
-}

package/src/zod/index.ts

@@ -1,6 +0,0 @@
-import { Form } from '@saas-ui/forms/zod'
-import { createZodFormDialog } from './create-zod-form-dialog'
-
-export { createZodFormDialog }
-
-export const FormDialog = createZodFormDialog(Form)