@saas-ui/modals 3.0.0-alpha.1 → 3.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/package.json +7 -9
- package/src/alert-dialog.tsx +0 -156
- package/src/default-modals.ts +0 -10
- package/src/drawer.tsx +0 -91
- package/src/form.tsx +0 -219
- package/src/index.ts +0 -31
- package/src/modal.tsx +0 -90
- package/src/types.ts +0 -96
- package/src/yup/create-yup-form-dialog.ts +0 -18
- package/src/yup/index.ts +0 -6
- package/src/zod/create-zod-form-dialog.ts +0 -17
- package/src/zod/index.ts +0 -6
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,30 @@
|
|
1
1
|
# @saas-ui/modals
|
2
2
|
|
3
|
+
## 3.0.0-alpha.3
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- Updated dependencies [cee2e9c]
|
8
|
+
- @saas-ui/forms@3.0.0-alpha.3
|
9
|
+
- @saas-ui/hooks@3.0.0-alpha.3
|
10
|
+
- @saas-ui/core@3.0.0-alpha.3
|
11
|
+
- @saas-ui/react@3.0.0-alpha.3
|
12
|
+
|
13
|
+
## 3.0.0-alpha.2
|
14
|
+
|
15
|
+
### Minor Changes
|
16
|
+
|
17
|
+
- 6459de4: Removed src exports and files from packages
|
18
|
+
|
19
|
+
### Patch Changes
|
20
|
+
|
21
|
+
- Updated dependencies [6459de4]
|
22
|
+
- @saas-ui/modals-provider@1.0.0-alpha.2
|
23
|
+
- @saas-ui/forms@3.0.0-alpha.2
|
24
|
+
- @saas-ui/hooks@3.0.0-alpha.2
|
25
|
+
- @saas-ui/react@3.0.0-alpha.2
|
26
|
+
- @saas-ui/core@3.0.0-alpha.2
|
27
|
+
|
3
28
|
## 3.0.0-alpha.1
|
4
29
|
|
5
30
|
### Major Changes
|
package/package.json
CHANGED
@@ -1,8 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@saas-ui/modals",
|
3
|
-
"version": "3.0.0-alpha.
|
3
|
+
"version": "3.0.0-alpha.3",
|
4
4
|
"description": "A modal manager for Chakra UI",
|
5
|
-
"source": "src/index.ts",
|
6
5
|
"type": "module",
|
7
6
|
"exports": {
|
8
7
|
".": {
|
@@ -35,8 +34,7 @@
|
|
35
34
|
"typecheck": "tsc --noEmit"
|
36
35
|
},
|
37
36
|
"files": [
|
38
|
-
"dist"
|
39
|
-
"src"
|
37
|
+
"dist"
|
40
38
|
],
|
41
39
|
"sideEffects": false,
|
42
40
|
"publishConfig": {
|
@@ -68,15 +66,15 @@
|
|
68
66
|
"url": "https://storybook.saas-ui.dev"
|
69
67
|
},
|
70
68
|
"dependencies": {
|
71
|
-
"@saas-ui/core": "3.0.0-alpha.
|
72
|
-
"@saas-ui/forms": "3.0.0-alpha.
|
73
|
-
"@saas-ui/hooks": "3.0.0-alpha.
|
74
|
-
"@saas-ui/modals-provider": "1.0.0-alpha.
|
69
|
+
"@saas-ui/core": "3.0.0-alpha.3",
|
70
|
+
"@saas-ui/forms": "3.0.0-alpha.3",
|
71
|
+
"@saas-ui/hooks": "3.0.0-alpha.3",
|
72
|
+
"@saas-ui/modals-provider": "1.0.0-alpha.2"
|
75
73
|
},
|
76
74
|
"peerDependencies": {
|
77
75
|
"@chakra-ui/react": "^3.0.0",
|
78
76
|
"@emotion/react": ">=11.0.0",
|
79
|
-
"@saas-ui/react": "3.0.0-alpha.
|
77
|
+
"@saas-ui/react": "3.0.0-alpha.3",
|
80
78
|
"react": ">=18.0.0",
|
81
79
|
"react-dom": ">=18.0.0"
|
82
80
|
},
|
package/src/alert-dialog.tsx
DELETED
@@ -1,156 +0,0 @@
|
|
1
|
-
import * as React from 'react'
|
2
|
-
|
3
|
-
import { Button, ButtonProps, type HTMLChakraProps } from '@chakra-ui/react'
|
4
|
-
import { callAll } from '@saas-ui/core/utils'
|
5
|
-
import { Dialog } from '@saas-ui/react/dialog'
|
6
|
-
|
7
|
-
export interface AlertDialogProps
|
8
|
-
extends Omit<
|
9
|
-
Dialog.RootProps,
|
10
|
-
'leastDestructiveRef' | 'onOpenChange' | 'open'
|
11
|
-
> {
|
12
|
-
/**
|
13
|
-
* Whether the dialog is open
|
14
|
-
*/
|
15
|
-
open: boolean
|
16
|
-
/**
|
17
|
-
* Callback when the dialog is opened or closed
|
18
|
-
*/
|
19
|
-
onOpenChange: (details: { open: boolean }) => void
|
20
|
-
/**
|
21
|
-
* The dialog title
|
22
|
-
*/
|
23
|
-
title?: React.ReactNode
|
24
|
-
translations?: {
|
25
|
-
cancel?: React.ReactNode
|
26
|
-
confirm?: React.ReactNode
|
27
|
-
close?: React.ReactNode
|
28
|
-
}
|
29
|
-
slotProps?: {
|
30
|
-
cancel?: ButtonProps
|
31
|
-
confirm?: ButtonProps
|
32
|
-
footer?: HTMLChakraProps<'div'>
|
33
|
-
}
|
34
|
-
/**
|
35
|
-
* Close the dialog on cancel
|
36
|
-
* @default true
|
37
|
-
*/
|
38
|
-
closeOnCancel?: boolean
|
39
|
-
/**
|
40
|
-
* Close the dialog on confirm
|
41
|
-
* @default true
|
42
|
-
*/
|
43
|
-
closeOnConfirm?: boolean
|
44
|
-
/**
|
45
|
-
* Hide the backdrop
|
46
|
-
*/
|
47
|
-
backdrop?: boolean
|
48
|
-
/**
|
49
|
-
* Hide the close button
|
50
|
-
*/
|
51
|
-
hideCloseButton?: boolean
|
52
|
-
/**
|
53
|
-
* Defines which button gets initial focus
|
54
|
-
* https://www.w3.org/TR/wai-aria-practices/#alertdialog
|
55
|
-
*/
|
56
|
-
leastDestructiveFocus?: 'cancel' | 'confirm'
|
57
|
-
/**
|
58
|
-
* Function that's called when cancel is clicked
|
59
|
-
*/
|
60
|
-
onCancel?: () => void
|
61
|
-
/**
|
62
|
-
* Function that's called when confirm is clicked.
|
63
|
-
*/
|
64
|
-
onConfirm?: () => Promise<void> | void
|
65
|
-
}
|
66
|
-
|
67
|
-
export const AlertDialog: React.FC<AlertDialogProps> = (props) => {
|
68
|
-
const {
|
69
|
-
title,
|
70
|
-
translations,
|
71
|
-
slotProps,
|
72
|
-
open,
|
73
|
-
closeOnCancel = true,
|
74
|
-
closeOnConfirm = true,
|
75
|
-
leastDestructiveFocus = 'cancel',
|
76
|
-
onOpenChange,
|
77
|
-
onCancel,
|
78
|
-
onConfirm,
|
79
|
-
children,
|
80
|
-
...rest
|
81
|
-
} = props
|
82
|
-
|
83
|
-
const cancelRef = React.useRef(null)
|
84
|
-
const confirmRef = React.useRef(null)
|
85
|
-
const [isLoading, setIsLoading] = React.useState(false)
|
86
|
-
|
87
|
-
const handleConfirm = async () => {
|
88
|
-
try {
|
89
|
-
const result = onConfirm?.()
|
90
|
-
if (typeof result?.then === 'function') {
|
91
|
-
setIsLoading(true)
|
92
|
-
await result
|
93
|
-
}
|
94
|
-
|
95
|
-
closeOnConfirm && onOpenChange({ open: false })
|
96
|
-
/* eslint-disable no-useless-catch */
|
97
|
-
} catch (e: any) {
|
98
|
-
throw e
|
99
|
-
} finally {
|
100
|
-
setIsLoading(false)
|
101
|
-
}
|
102
|
-
/* eslint-enable */
|
103
|
-
}
|
104
|
-
|
105
|
-
const titleId = React.useId()
|
106
|
-
const contentId = React.useId()
|
107
|
-
|
108
|
-
return (
|
109
|
-
<Dialog.Root
|
110
|
-
open={open}
|
111
|
-
onOpenChange={onOpenChange}
|
112
|
-
size="sm"
|
113
|
-
aria-labelledby={titleId}
|
114
|
-
aria-describedby={contentId}
|
115
|
-
{...rest}
|
116
|
-
initialFocusEl={() =>
|
117
|
-
leastDestructiveFocus === 'cancel'
|
118
|
-
? cancelRef.current
|
119
|
-
: confirmRef.current
|
120
|
-
}
|
121
|
-
>
|
122
|
-
<Dialog.Content>
|
123
|
-
<Dialog.Header>
|
124
|
-
<Dialog.Title id={titleId}>{title}</Dialog.Title>
|
125
|
-
</Dialog.Header>
|
126
|
-
|
127
|
-
<Dialog.Body id={contentId}>{children}</Dialog.Body>
|
128
|
-
|
129
|
-
<Dialog.Footer {...slotProps?.footer}>
|
130
|
-
<Button
|
131
|
-
ref={cancelRef}
|
132
|
-
variant="ghost"
|
133
|
-
colorPalette="gray"
|
134
|
-
{...slotProps?.cancel}
|
135
|
-
onClick={callAll(slotProps?.cancel?.onClick, () => {
|
136
|
-
onCancel?.()
|
137
|
-
|
138
|
-
closeOnCancel && onOpenChange({ open: false })
|
139
|
-
})}
|
140
|
-
>
|
141
|
-
{slotProps?.cancel?.children || translations?.cancel || 'Cancel'}
|
142
|
-
</Button>
|
143
|
-
<Button
|
144
|
-
ref={confirmRef}
|
145
|
-
variant="solid"
|
146
|
-
disabled={isLoading}
|
147
|
-
{...slotProps?.confirm}
|
148
|
-
onClick={callAll(handleConfirm, slotProps?.confirm?.onClick)}
|
149
|
-
>
|
150
|
-
{slotProps?.confirm?.children || translations?.confirm || 'OK'}
|
151
|
-
</Button>
|
152
|
-
</Dialog.Footer>
|
153
|
-
</Dialog.Content>
|
154
|
-
</Dialog.Root>
|
155
|
-
)
|
156
|
-
}
|
package/src/default-modals.ts
DELETED
package/src/drawer.tsx
DELETED
@@ -1,91 +0,0 @@
|
|
1
|
-
import * as React from 'react'
|
2
|
-
|
3
|
-
import { type HTMLChakraProps } from '@chakra-ui/react'
|
4
|
-
import { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'
|
5
|
-
import { Drawer as BaseDrawer } from '@saas-ui/react/drawer'
|
6
|
-
|
7
|
-
export interface DrawerProps extends Omit<BaseDrawer.RootProps, 'children'> {
|
8
|
-
/**
|
9
|
-
* The drawer title
|
10
|
-
*/
|
11
|
-
title: React.ReactNode
|
12
|
-
/**
|
13
|
-
* Whether the modal is open
|
14
|
-
*/
|
15
|
-
open: boolean
|
16
|
-
/**
|
17
|
-
* Callback when the drawer is opened or closed
|
18
|
-
*/
|
19
|
-
onOpenChange: (details: { open: boolean }) => void
|
20
|
-
/**
|
21
|
-
* The drawer children
|
22
|
-
*/
|
23
|
-
children: MaybeRenderProp<{
|
24
|
-
open: boolean
|
25
|
-
setOpen: (open: boolean) => void
|
26
|
-
}>
|
27
|
-
/**
|
28
|
-
* The modal footer
|
29
|
-
*/
|
30
|
-
footer?: React.ReactNode
|
31
|
-
/**
|
32
|
-
* Hide the close button
|
33
|
-
*/
|
34
|
-
hideCloseButton?: boolean
|
35
|
-
/**
|
36
|
-
* Hide the backdrop
|
37
|
-
*/
|
38
|
-
hideBackdrop?: boolean
|
39
|
-
/**
|
40
|
-
* Props for the modal header
|
41
|
-
*/
|
42
|
-
headerProps?: HTMLChakraProps<'div'>
|
43
|
-
/**
|
44
|
-
* Props for the modal content
|
45
|
-
*/
|
46
|
-
contentProps?: BaseDrawer.ContentProps
|
47
|
-
/**
|
48
|
-
* Props for the modal footer
|
49
|
-
*/
|
50
|
-
footerProps?: HTMLChakraProps<'div'>
|
51
|
-
/**
|
52
|
-
* Props for the modal body
|
53
|
-
*/
|
54
|
-
bodyProps?: HTMLChakraProps<'div'>
|
55
|
-
}
|
56
|
-
|
57
|
-
export const Drawer: React.FC<DrawerProps> = (props) => {
|
58
|
-
const {
|
59
|
-
title,
|
60
|
-
children,
|
61
|
-
footer,
|
62
|
-
open,
|
63
|
-
onOpenChange,
|
64
|
-
hideCloseButton,
|
65
|
-
hideBackdrop,
|
66
|
-
headerProps,
|
67
|
-
contentProps,
|
68
|
-
bodyProps,
|
69
|
-
footerProps,
|
70
|
-
...rest
|
71
|
-
} = props
|
72
|
-
return (
|
73
|
-
<BaseDrawer.Root open={open} onOpenChange={onOpenChange} {...rest}>
|
74
|
-
{!hideBackdrop && <BaseDrawer.Backdrop />}
|
75
|
-
<BaseDrawer.Content {...contentProps}>
|
76
|
-
{title && (
|
77
|
-
<BaseDrawer.Header {...headerProps}>{title}</BaseDrawer.Header>
|
78
|
-
)}
|
79
|
-
{!hideCloseButton && <BaseDrawer.CloseTrigger />}
|
80
|
-
<BaseDrawer.Body {...bodyProps}>
|
81
|
-
<BaseDrawer.Context>
|
82
|
-
{({ open, setOpen }) => runIfFn(children, { open, setOpen })}
|
83
|
-
</BaseDrawer.Context>
|
84
|
-
</BaseDrawer.Body>
|
85
|
-
{footer && (
|
86
|
-
<BaseDrawer.Footer {...footerProps}>{footer}</BaseDrawer.Footer>
|
87
|
-
)}
|
88
|
-
</BaseDrawer.Content>
|
89
|
-
</BaseDrawer.Root>
|
90
|
-
)
|
91
|
-
}
|
package/src/form.tsx
DELETED
@@ -1,219 +0,0 @@
|
|
1
|
-
import * as React from 'react'
|
2
|
-
|
3
|
-
import { Button, ButtonProps, Dialog } from '@chakra-ui/react'
|
4
|
-
import { runIfFn } from '@saas-ui/core/utils'
|
5
|
-
import {
|
6
|
-
AutoFields,
|
7
|
-
DefaultFieldOverrides,
|
8
|
-
FieldProps,
|
9
|
-
FieldResolver,
|
10
|
-
FieldValues,
|
11
|
-
Form,
|
12
|
-
FormProps,
|
13
|
-
FormType,
|
14
|
-
SubmitButton,
|
15
|
-
} from '@saas-ui/forms'
|
16
|
-
|
17
|
-
import { BaseModal, BaseModalProps } from './modal'
|
18
|
-
|
19
|
-
export type FormDialogFieldOverrides = DefaultFieldOverrides & {
|
20
|
-
cancel?: ButtonProps
|
21
|
-
}
|
22
|
-
|
23
|
-
export interface FormDialogProps<
|
24
|
-
TSchema = any,
|
25
|
-
TFieldValues extends FieldValues = FieldValues,
|
26
|
-
TContext extends object = object,
|
27
|
-
TExtraFieldProps extends object = object,
|
28
|
-
TFieldTypes = FieldProps<TFieldValues>,
|
29
|
-
> extends Omit<BaseModalProps, 'children'>,
|
30
|
-
Pick<
|
31
|
-
FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>,
|
32
|
-
| 'schema'
|
33
|
-
| 'defaultValues'
|
34
|
-
| 'values'
|
35
|
-
| 'context'
|
36
|
-
| 'onChange'
|
37
|
-
| 'onSubmit'
|
38
|
-
| 'onError'
|
39
|
-
| 'resolver'
|
40
|
-
| 'mode'
|
41
|
-
| 'reValidateMode'
|
42
|
-
| 'shouldFocusError'
|
43
|
-
| 'shouldUnregister'
|
44
|
-
| 'shouldUseNativeValidation'
|
45
|
-
| 'criteriaMode'
|
46
|
-
| 'delayError'
|
47
|
-
| 'resetOptions'
|
48
|
-
| 'formRef'
|
49
|
-
| 'children'
|
50
|
-
> {
|
51
|
-
/**
|
52
|
-
* The modal footer, will be wrapped with `ModalFooter`.
|
53
|
-
* Defaults to a cancel and submit button.
|
54
|
-
*/
|
55
|
-
footer?: React.ReactNode
|
56
|
-
/**
|
57
|
-
* A schema field resolver used to auto generate form fields.
|
58
|
-
*/
|
59
|
-
fieldResolver?: FieldResolver
|
60
|
-
/**
|
61
|
-
* Field overrides
|
62
|
-
*/
|
63
|
-
fields?: FormDialogFieldOverrides
|
64
|
-
}
|
65
|
-
|
66
|
-
const useFormProps = (props: FormDialogProps) => {
|
67
|
-
const {
|
68
|
-
schema,
|
69
|
-
resolver,
|
70
|
-
fieldResolver,
|
71
|
-
defaultValues,
|
72
|
-
values,
|
73
|
-
context,
|
74
|
-
onChange,
|
75
|
-
onSubmit,
|
76
|
-
onError,
|
77
|
-
mode,
|
78
|
-
reValidateMode,
|
79
|
-
shouldFocusError = true,
|
80
|
-
shouldUnregister,
|
81
|
-
shouldUseNativeValidation,
|
82
|
-
criteriaMode,
|
83
|
-
delayError = 100,
|
84
|
-
fields,
|
85
|
-
formRef,
|
86
|
-
...modalProps
|
87
|
-
} = props
|
88
|
-
|
89
|
-
const formProps = {
|
90
|
-
schema,
|
91
|
-
resolver,
|
92
|
-
defaultValues,
|
93
|
-
values,
|
94
|
-
context,
|
95
|
-
onChange,
|
96
|
-
onSubmit,
|
97
|
-
onError,
|
98
|
-
mode,
|
99
|
-
reValidateMode,
|
100
|
-
shouldFocusError,
|
101
|
-
shouldUnregister,
|
102
|
-
shouldUseNativeValidation,
|
103
|
-
criteriaMode,
|
104
|
-
delayError,
|
105
|
-
fields,
|
106
|
-
formRef,
|
107
|
-
}
|
108
|
-
|
109
|
-
return { modalProps, formProps, fields }
|
110
|
-
}
|
111
|
-
|
112
|
-
/**
|
113
|
-
* @todo make this dynamic to support other schema types
|
114
|
-
*/
|
115
|
-
type MergeDialogProps<T> =
|
116
|
-
T extends FormType<
|
117
|
-
infer FieldDefs,
|
118
|
-
infer ExtraProps,
|
119
|
-
infer ExtraFieldProps,
|
120
|
-
infer ExtraOverrides
|
121
|
-
>
|
122
|
-
? FormType<
|
123
|
-
FieldDefs,
|
124
|
-
ExtraProps & Omit<BaseModalProps, 'children'>,
|
125
|
-
ExtraFieldProps,
|
126
|
-
ExtraOverrides & FormDialogFieldOverrides
|
127
|
-
>
|
128
|
-
: never
|
129
|
-
|
130
|
-
type IsSchemaType<T, Schema, FieldDefs> =
|
131
|
-
T extends DefaultFormType<FieldDefs>
|
132
|
-
? T extends (
|
133
|
-
props: FormProps<infer TSchema, infer TFieldValues, infer TContext>,
|
134
|
-
) => any
|
135
|
-
? Schema extends TSchema
|
136
|
-
? true
|
137
|
-
: false
|
138
|
-
: false
|
139
|
-
: false
|
140
|
-
|
141
|
-
export type DefaultFormType<
|
142
|
-
FieldDefs = any,
|
143
|
-
ExtraProps = object,
|
144
|
-
ExtraFieldProps extends object = object,
|
145
|
-
ExtraOverrides = FormDialogFieldOverrides,
|
146
|
-
> = (<
|
147
|
-
TSchema = unknown,
|
148
|
-
TFieldValues extends Record<string, any> = any,
|
149
|
-
TContext extends object = object,
|
150
|
-
>(
|
151
|
-
props: any,
|
152
|
-
) => React.ReactElement) & {
|
153
|
-
displayName?: string
|
154
|
-
id?: string
|
155
|
-
}
|
156
|
-
|
157
|
-
export function createFormDialog<
|
158
|
-
FieldDefs = any,
|
159
|
-
ExtraProps = object,
|
160
|
-
ExtraFieldProps extends object = object,
|
161
|
-
ExtraOverrides = FormDialogFieldOverrides,
|
162
|
-
TFormType extends DefaultFormType<
|
163
|
-
FieldDefs,
|
164
|
-
ExtraProps,
|
165
|
-
ExtraFieldProps,
|
166
|
-
ExtraOverrides
|
167
|
-
> = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>,
|
168
|
-
>(Form: TFormType) {
|
169
|
-
const Dialog = React.forwardRef<HTMLDivElement, any>((props, ref) => {
|
170
|
-
const { isOpen, onClose, footer, children, ...rest } = props
|
171
|
-
const { modalProps, formProps, fields } = useFormProps(rest)
|
172
|
-
return (
|
173
|
-
<BaseModal {...modalProps} isOpen={isOpen} onClose={onClose}>
|
174
|
-
<Form
|
175
|
-
ref={ref}
|
176
|
-
{...(formProps as any)}
|
177
|
-
flex="1"
|
178
|
-
minHeight="0px"
|
179
|
-
display="flex"
|
180
|
-
flexDirection="column"
|
181
|
-
>
|
182
|
-
{(form: any) => (
|
183
|
-
<>
|
184
|
-
<Dialog.Body height="100%">
|
185
|
-
{runIfFn(children, form) || <AutoFields />}
|
186
|
-
</Dialog.Body>
|
187
|
-
|
188
|
-
{footer || (
|
189
|
-
<Dialog.Footer>
|
190
|
-
<Button
|
191
|
-
variant="ghost"
|
192
|
-
mr={3}
|
193
|
-
onClick={onClose}
|
194
|
-
{...fields?.cancel}
|
195
|
-
>
|
196
|
-
{fields?.cancel?.children ?? 'Cancel'}
|
197
|
-
</Button>
|
198
|
-
<SubmitButton {...fields?.submit} />
|
199
|
-
</Dialog.Footer>
|
200
|
-
)}
|
201
|
-
</>
|
202
|
-
)}
|
203
|
-
</Form>
|
204
|
-
</BaseModal>
|
205
|
-
)
|
206
|
-
}) as MergeDialogProps<TFormType>
|
207
|
-
|
208
|
-
Dialog.displayName = `${Form.displayName || Form.name}Dialog`
|
209
|
-
Dialog.id = Form.id
|
210
|
-
|
211
|
-
return Dialog
|
212
|
-
}
|
213
|
-
|
214
|
-
/**
|
215
|
-
* Can be used to quickly request information from people without leaving the current page.
|
216
|
-
*
|
217
|
-
* @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
|
218
|
-
*/
|
219
|
-
export const FormDialog = createFormDialog(Form)
|
package/src/index.ts
DELETED
@@ -1,31 +0,0 @@
|
|
1
|
-
import { createModals } from '@saas-ui/modals-provider'
|
2
|
-
|
3
|
-
import { defaultModals } from './default-modals.ts'
|
4
|
-
|
5
|
-
// Exporting from './dialog'
|
6
|
-
export { AlertDialog } from './alert-dialog.tsx'
|
7
|
-
export type { AlertDialogProps } from './alert-dialog.tsx'
|
8
|
-
|
9
|
-
// Exporting from './drawer'
|
10
|
-
export { Drawer } from './drawer'
|
11
|
-
export type { DrawerProps } from './drawer'
|
12
|
-
|
13
|
-
// Exporting from './modal'
|
14
|
-
export { Modal } from './modal'
|
15
|
-
export type { ModalProps } from './modal'
|
16
|
-
|
17
|
-
// Exporting from './form'
|
18
|
-
// export { FormDialog, createFormDialog } from './form'
|
19
|
-
// export type {
|
20
|
-
// DefaultFormType,
|
21
|
-
// FormDialogFieldOverrides,
|
22
|
-
// FormDialogProps,
|
23
|
-
// } from './form'
|
24
|
-
|
25
|
-
// Exporting from './provider'
|
26
|
-
|
27
|
-
const { useModals, ModalsProvider } = createModals({
|
28
|
-
modals: defaultModals,
|
29
|
-
})
|
30
|
-
|
31
|
-
export { ModalsProvider, useModals }
|
package/src/modal.tsx
DELETED
@@ -1,90 +0,0 @@
|
|
1
|
-
import * as React from 'react'
|
2
|
-
|
3
|
-
import type { HTMLChakraProps } from '@chakra-ui/react'
|
4
|
-
import { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'
|
5
|
-
import { Dialog as BaseDialog } from '@saas-ui/react/dialog'
|
6
|
-
|
7
|
-
export interface ModalProps extends Omit<BaseDialog.RootProps, 'children'> {
|
8
|
-
/**
|
9
|
-
* The modal title
|
10
|
-
*/
|
11
|
-
title?: React.ReactNode
|
12
|
-
/**
|
13
|
-
* Whether the modal is open
|
14
|
-
*/
|
15
|
-
open: boolean
|
16
|
-
/**
|
17
|
-
* Callback when the modal is opened or closed
|
18
|
-
*/
|
19
|
-
onOpenChange: (details: { open: boolean }) => void
|
20
|
-
/**
|
21
|
-
* The modal children
|
22
|
-
*/
|
23
|
-
children: MaybeRenderProp<{
|
24
|
-
open: boolean
|
25
|
-
setOpen: (open: boolean) => void
|
26
|
-
}>
|
27
|
-
/**
|
28
|
-
* The modal footer
|
29
|
-
*/
|
30
|
-
footer?: React.ReactNode
|
31
|
-
/**
|
32
|
-
* Hide the close button
|
33
|
-
*/
|
34
|
-
hideCloseButton?: boolean
|
35
|
-
/**
|
36
|
-
* Hide the overlay
|
37
|
-
*/
|
38
|
-
hideBackdrop?: boolean
|
39
|
-
/**
|
40
|
-
* Props for the modal header
|
41
|
-
*/
|
42
|
-
headerProps?: HTMLChakraProps<'div'>
|
43
|
-
/**
|
44
|
-
* Props for the modal content
|
45
|
-
*/
|
46
|
-
contentProps?: HTMLChakraProps<'div'>
|
47
|
-
/**
|
48
|
-
* Props for the modal body
|
49
|
-
*/
|
50
|
-
bodyProps?: HTMLChakraProps<'div'>
|
51
|
-
/**
|
52
|
-
* Props for the modal footer
|
53
|
-
*/
|
54
|
-
footerProps?: HTMLChakraProps<'div'>
|
55
|
-
}
|
56
|
-
|
57
|
-
export const Modal: React.FC<ModalProps> = (props) => {
|
58
|
-
const {
|
59
|
-
title,
|
60
|
-
footer,
|
61
|
-
children,
|
62
|
-
open,
|
63
|
-
onOpenChange,
|
64
|
-
hideCloseButton,
|
65
|
-
hideBackdrop,
|
66
|
-
headerProps,
|
67
|
-
contentProps,
|
68
|
-
bodyProps,
|
69
|
-
footerProps,
|
70
|
-
...rest
|
71
|
-
} = props
|
72
|
-
return (
|
73
|
-
<BaseDialog.Root open={open} onOpenChange={onOpenChange} {...rest}>
|
74
|
-
<BaseDialog.Content {...contentProps}>
|
75
|
-
{title && (
|
76
|
-
<BaseDialog.Header {...headerProps}>{title}</BaseDialog.Header>
|
77
|
-
)}
|
78
|
-
{!hideCloseButton && <BaseDialog.CloseTrigger />}
|
79
|
-
<BaseDialog.Body>
|
80
|
-
<BaseDialog.Context>
|
81
|
-
{({ open, setOpen }) => runIfFn(children, { open, setOpen })}
|
82
|
-
</BaseDialog.Context>
|
83
|
-
</BaseDialog.Body>
|
84
|
-
{footer && (
|
85
|
-
<BaseDialog.Footer {...footerProps}>{footer}</BaseDialog.Footer>
|
86
|
-
)}
|
87
|
-
</BaseDialog.Content>
|
88
|
-
</BaseDialog.Root>
|
89
|
-
)
|
90
|
-
}
|
package/src/types.ts
DELETED
@@ -1,96 +0,0 @@
|
|
1
|
-
import type {
|
2
|
-
FieldValues,
|
3
|
-
FormProps,
|
4
|
-
FormType,
|
5
|
-
WithFields,
|
6
|
-
} from '@saas-ui/forms'
|
7
|
-
import { AnyObjectSchema, YupFormType } from '@saas-ui/forms/yup'
|
8
|
-
import { ZodFormType } from '@saas-ui/forms/zod'
|
9
|
-
import { ModalId } from '@saas-ui/modals-provider'
|
10
|
-
import type { InferType } from 'yup'
|
11
|
-
import type { z } from 'zod'
|
12
|
-
|
13
|
-
import { FormDialogFieldOverrides } from './form'
|
14
|
-
|
15
|
-
export type FormDialogHandler<T> =
|
16
|
-
T extends YupFormType<
|
17
|
-
infer FieldDefs,
|
18
|
-
infer ExtraProps,
|
19
|
-
infer ExtraOverrides,
|
20
|
-
'yup'
|
21
|
-
>
|
22
|
-
? YupHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides>
|
23
|
-
: T extends ZodFormType<
|
24
|
-
infer FieldDefs,
|
25
|
-
infer ExtraProps,
|
26
|
-
infer ExtraOverrides,
|
27
|
-
'zod'
|
28
|
-
>
|
29
|
-
? ZodHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides>
|
30
|
-
: T extends FormType<
|
31
|
-
infer FieldDefs,
|
32
|
-
infer ExtraProps,
|
33
|
-
infer ExtraOverrides
|
34
|
-
>
|
35
|
-
? FormHandler<
|
36
|
-
FieldDefs,
|
37
|
-
object,
|
38
|
-
ExtraOverrides & FormDialogFieldOverrides
|
39
|
-
>
|
40
|
-
: never
|
41
|
-
|
42
|
-
export type ZodHandler<
|
43
|
-
FieldDefs,
|
44
|
-
ExtraProps = object,
|
45
|
-
ExtraOverrides = object,
|
46
|
-
Type extends 'zod' = 'zod',
|
47
|
-
> = <
|
48
|
-
TSchema extends z.AnyZodObject = z.AnyZodObject,
|
49
|
-
TFieldValues extends z.infer<TSchema> = z.infer<TSchema>,
|
50
|
-
TContext extends object = object,
|
51
|
-
>(
|
52
|
-
props: WithFields<
|
53
|
-
FormProps<TSchema, TFieldValues, TContext>,
|
54
|
-
FieldDefs,
|
55
|
-
ExtraOverrides
|
56
|
-
> & {
|
57
|
-
ref?: React.ForwardedRef<HTMLFormElement>
|
58
|
-
} & ExtraProps,
|
59
|
-
) => ModalId
|
60
|
-
|
61
|
-
export type FormHandler<
|
62
|
-
FieldDefs,
|
63
|
-
ExtraProps = object,
|
64
|
-
ExtraOverrides = object,
|
65
|
-
> = <
|
66
|
-
TSchema = unknown,
|
67
|
-
TFieldValues extends FieldValues = FieldValues,
|
68
|
-
TContext extends object = object,
|
69
|
-
>(
|
70
|
-
props: WithFields<
|
71
|
-
FormProps<TSchema, TFieldValues, TContext>,
|
72
|
-
FieldDefs,
|
73
|
-
ExtraOverrides
|
74
|
-
> & {
|
75
|
-
ref?: React.ForwardedRef<HTMLFormElement>
|
76
|
-
} & ExtraProps,
|
77
|
-
) => ModalId
|
78
|
-
|
79
|
-
export type YupHandler<
|
80
|
-
FieldDefs,
|
81
|
-
ExtraProps = object,
|
82
|
-
ExtraOverrides = object,
|
83
|
-
Type extends 'yup' = 'yup',
|
84
|
-
> = <
|
85
|
-
TSchema extends AnyObjectSchema = AnyObjectSchema,
|
86
|
-
TFieldValues extends InferType<TSchema> = InferType<TSchema>, // placeholder
|
87
|
-
TContext extends object = object,
|
88
|
-
>(
|
89
|
-
props: WithFields<
|
90
|
-
FormProps<TFieldValues, TContext, TSchema>,
|
91
|
-
FieldDefs,
|
92
|
-
ExtraOverrides
|
93
|
-
> & {
|
94
|
-
ref?: React.ForwardedRef<HTMLFormElement>
|
95
|
-
} & ExtraProps,
|
96
|
-
) => ModalId
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import type { YupFormType } from '@saas-ui/forms/yup'
|
2
|
-
import { FormDialogFieldOverrides, createFormDialog } from '../form'
|
3
|
-
|
4
|
-
import type { BaseModalProps } from '../modal'
|
5
|
-
|
6
|
-
export function createYupFormDialog<
|
7
|
-
FieldDefs = any,
|
8
|
-
ExtraProps = object,
|
9
|
-
ExtraFieldProps extends object = object,
|
10
|
-
ExtraOverrides = object,
|
11
|
-
>(Form: YupFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {
|
12
|
-
return createFormDialog(Form) as unknown as YupFormType<
|
13
|
-
FieldDefs,
|
14
|
-
ExtraProps & Omit<BaseModalProps, 'children'>,
|
15
|
-
ExtraFieldProps,
|
16
|
-
ExtraOverrides & FormDialogFieldOverrides
|
17
|
-
>
|
18
|
-
}
|
package/src/yup/index.ts
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
import type { ZodFormType } from '@saas-ui/forms/zod'
|
2
|
-
import { createFormDialog, FormDialogFieldOverrides } from '../form'
|
3
|
-
import type { BaseModalProps } from '../modal'
|
4
|
-
|
5
|
-
export function createZodFormDialog<
|
6
|
-
FieldDefs = any,
|
7
|
-
ExtraProps = object,
|
8
|
-
ExtraFieldProps extends object = object,
|
9
|
-
ExtraOverrides = object,
|
10
|
-
>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {
|
11
|
-
return createFormDialog(Form) as unknown as ZodFormType<
|
12
|
-
FieldDefs,
|
13
|
-
ExtraProps & Omit<BaseModalProps, 'children'>,
|
14
|
-
ExtraFieldProps,
|
15
|
-
ExtraOverrides & FormDialogFieldOverrides
|
16
|
-
>
|
17
|
-
}
|