@saas-ui/forms 2.0.2 → 2.0.4
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 +12 -0
- package/dist/index.d.ts +75 -73
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.ts +102 -37
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.d.ts +105 -40
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/create-step-form.tsx +16 -22
- package/src/index.ts +2 -2
- package/src/step-form.tsx +2 -4
- package/src/types.ts +40 -1
- package/src/use-step-form.tsx +9 -13
package/src/create-step-form.tsx
CHANGED
@@ -6,10 +6,10 @@ import {
|
|
6
6
|
FieldProps,
|
7
7
|
FieldValues,
|
8
8
|
FieldsProvider,
|
9
|
-
Form,
|
10
9
|
GetFieldResolver,
|
11
10
|
ObjectField,
|
12
11
|
} from './'
|
12
|
+
import { Form } from './form'
|
13
13
|
import { Field } from './field'
|
14
14
|
import { FormStep, StepsOptions } from './step-form'
|
15
15
|
import {
|
@@ -20,47 +20,41 @@ import {
|
|
20
20
|
import { StepperProvider } from '@saas-ui/core'
|
21
21
|
import { runIfFn } from '@chakra-ui/utils'
|
22
22
|
import { GetResolver } from './form'
|
23
|
+
import { WithStepFields } from './types'
|
23
24
|
|
24
|
-
type StepFormType<
|
25
|
+
export type StepFormType<
|
26
|
+
FieldDefs,
|
27
|
+
ExtraProps = object,
|
28
|
+
ExtraOverrides = object
|
29
|
+
> = (<
|
25
30
|
TSteps extends StepsOptions<any> = StepsOptions<any>,
|
26
31
|
TFieldValues extends FieldValues = FieldValues,
|
27
32
|
TContext extends object = object,
|
28
33
|
TFieldTypes = FieldProps<TFieldValues>
|
29
34
|
>(
|
30
|
-
props:
|
35
|
+
props: WithStepFields<
|
36
|
+
UseStepFormProps<TSteps, TFieldValues, TContext>,
|
37
|
+
FieldDefs,
|
38
|
+
ExtraOverrides
|
39
|
+
> & {
|
31
40
|
ref?: React.ForwardedRef<HTMLFormElement>
|
32
|
-
}
|
33
|
-
) => React.ReactElement) & {
|
34
|
-
displayName?: string
|
35
|
-
id?: string
|
36
|
-
}
|
37
|
-
|
38
|
-
export type DefaultFormType<
|
39
|
-
FieldDefs = any,
|
40
|
-
ExtraProps = object,
|
41
|
-
ExtraOverrides = object
|
42
|
-
> = (<
|
43
|
-
TFieldValues extends Record<string, any> = any,
|
44
|
-
TContext extends object = object,
|
45
|
-
TSchema = unknown
|
46
|
-
>(
|
47
|
-
props: any
|
41
|
+
} & ExtraProps
|
48
42
|
) => React.ReactElement) & {
|
49
43
|
displayName?: string
|
50
44
|
id?: string
|
51
45
|
}
|
52
46
|
|
53
|
-
export interface
|
47
|
+
export interface CreateStepFormProps<FieldDefs> {
|
54
48
|
resolver?: GetResolver
|
55
49
|
fieldResolver?: GetFieldResolver
|
56
50
|
fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
|
57
51
|
}
|
58
52
|
|
59
53
|
export function createStepForm<
|
60
|
-
FieldDefs
|
54
|
+
FieldDefs,
|
61
55
|
ExtraProps = object,
|
62
56
|
ExtraOverrides = object
|
63
|
-
>({ fields, resolver, fieldResolver }:
|
57
|
+
>({ fields, resolver, fieldResolver }: CreateStepFormProps<FieldDefs> = {}) {
|
64
58
|
const StepForm = forwardRef<any, 'div'>((props, ref) => {
|
65
59
|
const { children, steps, ...rest } = props
|
66
60
|
|
package/src/index.ts
CHANGED
@@ -2,7 +2,6 @@ export * from './display-field'
|
|
2
2
|
export * from './field'
|
3
3
|
export * from './fields'
|
4
4
|
export * from './fields-context'
|
5
|
-
// export * from './auto-form'
|
6
5
|
export * from './layout'
|
7
6
|
export * from './submit-button'
|
8
7
|
export * from './array-field'
|
@@ -44,6 +43,7 @@ export type {
|
|
44
43
|
BaseFieldProps,
|
45
44
|
FieldOptions,
|
46
45
|
DefaultFieldOverrides,
|
46
|
+
WithStepFields,
|
47
47
|
} from './types'
|
48
48
|
|
49
49
|
export { createForm, type CreateFormProps, type FormType } from './create-form'
|
@@ -64,7 +64,7 @@ import { createStepForm } from './create-step-form'
|
|
64
64
|
*/
|
65
65
|
export const Form = createForm()
|
66
66
|
|
67
|
-
export { createStepForm } from './create-step-form'
|
67
|
+
export { createStepForm, type CreateStepFormProps } from './create-step-form'
|
68
68
|
|
69
69
|
/**
|
70
70
|
* Multi-step form component.
|
package/src/step-form.tsx
CHANGED
@@ -27,7 +27,6 @@ import {
|
|
27
27
|
UseStepFormProps,
|
28
28
|
FormStepSubmitHandler,
|
29
29
|
} from './use-step-form'
|
30
|
-
import { FieldProps } from './types'
|
31
30
|
|
32
31
|
export type StepsOptions<TSchema, TName extends string = string> = {
|
33
32
|
/**
|
@@ -43,9 +42,8 @@ export type StepsOptions<TSchema, TName extends string = string> = {
|
|
43
42
|
export interface StepFormProps<
|
44
43
|
TSteps extends StepsOptions<any> = StepsOptions<any>,
|
45
44
|
TFieldValues extends FieldValues = FieldValues,
|
46
|
-
TContext extends object = object
|
47
|
-
|
48
|
-
> extends UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> {}
|
45
|
+
TContext extends object = object
|
46
|
+
> extends UseStepFormProps<TSteps, TFieldValues, TContext> {}
|
49
47
|
|
50
48
|
export interface FormStepOptions<TName extends string = string> {
|
51
49
|
/**
|
package/src/types.ts
CHANGED
@@ -6,6 +6,8 @@ import { FormProps, FormRenderContext } from './form'
|
|
6
6
|
import { SubmitButtonProps } from './submit-button'
|
7
7
|
import { ObjectFieldProps } from './object-field'
|
8
8
|
import { ArrayFieldProps } from './array-field'
|
9
|
+
import { StepFormRenderContext, UseStepFormProps } from './use-step-form'
|
10
|
+
import { StepsOptions } from './step-form'
|
9
11
|
|
10
12
|
export type FieldOption = { label?: string; value: string }
|
11
13
|
export type FieldOptions<TOption extends FieldOption = FieldOption> =
|
@@ -82,7 +84,7 @@ type FieldPathWithArray<
|
|
82
84
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
|
83
85
|
> = TName | ArrayFieldPath<TName>
|
84
86
|
|
85
|
-
type MergeFieldProps<
|
87
|
+
export type MergeFieldProps<
|
86
88
|
FieldDefs,
|
87
89
|
TFieldValues extends FieldValues = FieldValues,
|
88
90
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
|
@@ -168,3 +170,40 @@ export type WithFields<
|
|
168
170
|
} & ExtraOverrides
|
169
171
|
}
|
170
172
|
: never
|
173
|
+
|
174
|
+
// StepForm types
|
175
|
+
export type StepFormChildren<
|
176
|
+
FieldDefs,
|
177
|
+
TSteps extends StepsOptions<any> = StepsOptions<any>,
|
178
|
+
TFieldValues extends FieldValues = FieldValues,
|
179
|
+
TContext extends object = object
|
180
|
+
> = MaybeRenderProp<
|
181
|
+
StepFormRenderContext<
|
182
|
+
TSteps,
|
183
|
+
TFieldValues,
|
184
|
+
TContext,
|
185
|
+
MergeFieldProps<
|
186
|
+
FieldDefs extends never
|
187
|
+
? DefaultFields
|
188
|
+
: ShallowMerge<DefaultFields, FieldDefs>,
|
189
|
+
TFieldValues
|
190
|
+
>
|
191
|
+
>
|
192
|
+
>
|
193
|
+
|
194
|
+
export type WithStepFields<
|
195
|
+
TStepFormProps extends UseStepFormProps<any, any, any>,
|
196
|
+
FieldDefs,
|
197
|
+
ExtraOverrides = object
|
198
|
+
> = TStepFormProps extends UseStepFormProps<
|
199
|
+
infer TSteps,
|
200
|
+
infer TFieldValues,
|
201
|
+
infer TContext
|
202
|
+
>
|
203
|
+
? Omit<TStepFormProps, 'children' | 'fields'> & {
|
204
|
+
children?: StepFormChildren<FieldDefs, TSteps, TFieldValues, TContext>
|
205
|
+
fields?: FieldOverrides<FieldDefs, TFieldValues> & {
|
206
|
+
submit?: SubmitButtonProps
|
207
|
+
} & ExtraOverrides
|
208
|
+
}
|
209
|
+
: never
|
package/src/use-step-form.tsx
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react'
|
2
2
|
import { FieldValues, SubmitHandler } from 'react-hook-form'
|
3
|
-
import { createContext
|
3
|
+
import { createContext } from '@chakra-ui/react-utils'
|
4
4
|
import {
|
5
5
|
useStepper,
|
6
6
|
useStep,
|
@@ -33,10 +33,10 @@ export const [StepFormProvider, useStepFormContext] =
|
|
33
33
|
'useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`',
|
34
34
|
})
|
35
35
|
|
36
|
+
import { FocusableElement } from '@chakra-ui/utils'
|
36
37
|
import { FormProps } from './form'
|
37
38
|
import { FormStepProps, StepsOptions } from './step-form'
|
38
|
-
import { FieldProps } from './types'
|
39
|
-
import { FocusableElement } from '@chakra-ui/utils'
|
39
|
+
import { FieldProps, StepFormChildren } from './types'
|
40
40
|
import { DisplayIfProps } from './display-if'
|
41
41
|
import { ArrayFieldProps } from './array-field'
|
42
42
|
import { UseArrayFieldReturn } from './use-array-field'
|
@@ -45,7 +45,7 @@ import { ObjectFieldProps } from './object-field'
|
|
45
45
|
type StepName<T extends { [k: number]: { readonly name: string } }> =
|
46
46
|
T[number]['name']
|
47
47
|
|
48
|
-
interface StepFormRenderContext<
|
48
|
+
export interface StepFormRenderContext<
|
49
49
|
TSteps extends StepsOptions<any> = StepsOptions<any>,
|
50
50
|
TFieldValues extends FieldValues = FieldValues,
|
51
51
|
TContext extends object = object,
|
@@ -63,14 +63,11 @@ interface StepFormRenderContext<
|
|
63
63
|
export interface UseStepFormProps<
|
64
64
|
TSteps extends StepsOptions<any> = StepsOptions<any>,
|
65
65
|
TFieldValues extends FieldValues = FieldValues,
|
66
|
-
TContext extends object = object
|
67
|
-
TFieldTypes = FieldProps<TFieldValues>
|
66
|
+
TContext extends object = object
|
68
67
|
> extends Omit<UseStepperProps, 'onChange'>,
|
69
|
-
Omit<FormProps<any, TFieldValues, TContext
|
68
|
+
Omit<FormProps<any, TFieldValues, TContext>, 'children'> {
|
70
69
|
steps?: TSteps
|
71
|
-
children:
|
72
|
-
StepFormRenderContext<TSteps, TFieldValues, TContext, TFieldTypes>
|
73
|
-
>
|
70
|
+
children: StepFormChildren<any, TSteps, TFieldValues, TContext>
|
74
71
|
}
|
75
72
|
|
76
73
|
export interface UseStepFormReturn<
|
@@ -88,10 +85,9 @@ export interface UseStepFormReturn<
|
|
88
85
|
export function useStepForm<
|
89
86
|
TSteps extends StepsOptions<any> = StepsOptions<any>,
|
90
87
|
TFieldValues extends FieldValues = FieldValues,
|
91
|
-
TContext extends object = object
|
92
|
-
TFieldTypes = FieldProps<TFieldValues>
|
88
|
+
TContext extends object = object
|
93
89
|
>(
|
94
|
-
props: UseStepFormProps<TSteps, TFieldValues, TContext
|
90
|
+
props: UseStepFormProps<TSteps, TFieldValues, TContext>
|
95
91
|
): UseStepFormReturn<TFieldValues> {
|
96
92
|
const { onChange, steps: stepsOptions, resolver, ...rest } = props
|
97
93
|
const stepper = useStepper(rest)
|