@saas-ui/forms 2.0.0-next.0 → 2.0.0-next.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. package/CHANGELOG.md +95 -0
  2. package/README.md +53 -6
  3. package/dist/ajv/index.d.ts +359 -11
  4. package/dist/ajv/index.js +7 -9
  5. package/dist/ajv/index.js.map +1 -1
  6. package/dist/ajv/index.mjs +7 -10
  7. package/dist/ajv/index.mjs.map +1 -1
  8. package/dist/index.d.ts +448 -247
  9. package/dist/index.js +708 -682
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.mjs +688 -662
  12. package/dist/index.mjs.map +1 -1
  13. package/dist/yup/index.d.ts +581 -21
  14. package/dist/yup/index.js +6 -10
  15. package/dist/yup/index.js.map +1 -1
  16. package/dist/yup/index.mjs +4 -8
  17. package/dist/yup/index.mjs.map +1 -1
  18. package/dist/zod/index.d.ts +581 -11
  19. package/dist/zod/index.js +5 -0
  20. package/dist/zod/index.js.map +1 -1
  21. package/dist/zod/index.mjs +5 -1
  22. package/dist/zod/index.mjs.map +1 -1
  23. package/package.json +24 -15
  24. package/src/array-field.tsx +82 -45
  25. package/src/auto-form.tsx +7 -3
  26. package/src/base-field.tsx +54 -0
  27. package/src/create-field.tsx +144 -0
  28. package/src/create-form.tsx +54 -0
  29. package/src/default-fields.tsx +163 -0
  30. package/src/display-field.tsx +9 -11
  31. package/src/display-if.tsx +20 -13
  32. package/src/field-resolver.ts +10 -8
  33. package/src/field.tsx +18 -445
  34. package/src/fields-context.tsx +23 -0
  35. package/src/fields.tsx +34 -21
  36. package/src/form-context.tsx +84 -0
  37. package/src/form.tsx +72 -52
  38. package/src/index.ts +44 -4
  39. package/src/input-right-button/input-right-button.stories.tsx +2 -2
  40. package/src/input-right-button/input-right-button.tsx +0 -2
  41. package/src/layout.tsx +16 -11
  42. package/src/number-input/number-input.stories.tsx +3 -3
  43. package/src/number-input/number-input.tsx +9 -5
  44. package/src/object-field.tsx +13 -8
  45. package/src/password-input/password-input.stories.tsx +23 -2
  46. package/src/password-input/password-input.tsx +6 -6
  47. package/src/pin-input/pin-input.tsx +1 -5
  48. package/src/radio/radio-input.stories.tsx +1 -1
  49. package/src/radio/radio-input.tsx +12 -10
  50. package/src/select/native-select.tsx +1 -4
  51. package/src/select/select-context.tsx +130 -0
  52. package/src/select/select.stories.tsx +117 -86
  53. package/src/select/select.test.tsx +1 -1
  54. package/src/select/select.tsx +162 -146
  55. package/src/step-form.tsx +29 -11
  56. package/src/submit-button.tsx +5 -1
  57. package/src/types.ts +144 -0
  58. package/src/use-array-field.tsx +9 -3
  59. package/src/utils.ts +23 -1
  60. package/src/watch-field.tsx +2 -6
  61. /package/src/radio/{radio.test.tsx → radio-input.test.tsx} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,94 @@
1
1
  # @saas-ui/forms
2
2
 
3
+ ## 2.0.0-next.10
4
+
5
+ ### Patch Changes
6
+
7
+ - @saas-ui/core@2.0.0-next.8
8
+
9
+ ## 2.0.0-next.9
10
+
11
+ ### Patch Changes
12
+
13
+ - 84e59fec: Form render prop Field now supports ref
14
+ - Updated dependencies [189190c6]
15
+ - Updated dependencies [1177329d]
16
+ - @saas-ui/core@2.0.0-next.7
17
+
18
+ ## 2.0.0-next.8
19
+
20
+ ### Patch Changes
21
+
22
+ - 6d3f5717: Fix React import
23
+
24
+ ## 2.0.0-next.7
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies [7052dad3]
29
+ - @saas-ui/core@2.0.0-next.6
30
+
31
+ ## 2.0.0-next.6
32
+
33
+ ### Major Changes
34
+
35
+ - 532011d6: Restructured the Select component to make it atomic, the new composition is Select, SelectButton, SelectList and SelectOption.
36
+ - 39e778d8: Form will now render AutoField by default when no children are passed.
37
+
38
+ ### Minor Changes
39
+
40
+ - 532011d6: Select can now supports theming using the SuiSelect theme config.
41
+ - 6dd737ce: Select field now renders invalid state.
42
+ - c85541cb: AutoForm field props can now be overridden using the fields prop on Form
43
+
44
+ ## 2.0.0-next.5
45
+
46
+ ### Minor Changes
47
+
48
+ - a8ea24da: PasswordInput now accepts leftAddon property.
49
+
50
+ ### Patch Changes
51
+
52
+ - Updated dependencies [61b27fa6]
53
+ - @saas-ui/core@2.0.0-next.5
54
+
55
+ ## 2.0.0-next.4
56
+
57
+ ### Patch Changes
58
+
59
+ - Updated dependencies [83f54180]
60
+ - Updated dependencies [ba61612f]
61
+ - Updated dependencies [83f54180]
62
+ - Updated dependencies [83f54180]
63
+ - Updated dependencies [83f54180]
64
+ - Updated dependencies [83f54180]
65
+ - Updated dependencies [27a68bca]
66
+ - @saas-ui/core@2.0.0-next.4
67
+
68
+ ## 2.0.0-next.3
69
+
70
+ ### Patch Changes
71
+
72
+ - @saas-ui/core@2.0.0-next.3
73
+
74
+ ## 2.0.0-next.2
75
+
76
+ ### Patch Changes
77
+
78
+ - Updated dependencies [0a11d7b6]
79
+ - Updated dependencies [76887bda]
80
+ - Updated dependencies [76887bda]
81
+ - Updated dependencies [76887bda]
82
+ - @saas-ui/core@2.0.0-next.2
83
+
84
+ ## 2.0.0-next.1
85
+
86
+ ### Patch Changes
87
+
88
+ - 166978bd: Fix esm bundle filename.
89
+ - Updated dependencies [166978bd]
90
+ - @saas-ui/core@2.0.0-next.1
91
+
3
92
  ## 2.0.0-next.0
4
93
 
5
94
  ### Major Changes
@@ -15,6 +104,12 @@
15
104
  - Updated dependencies [3a15e8c8]
16
105
  - @saas-ui/core@2.0.0-next.0
17
106
 
107
+ ## 1.5.3
108
+
109
+ ### Patch Changes
110
+
111
+ - 382e095: InputRightButton no longer exported from forms package to prevent conflicts.
112
+
18
113
  ## 1.5.2
19
114
 
20
115
  ### Patch Changes
package/README.md CHANGED
@@ -1,10 +1,11 @@
1
- # @saas-ui/forms
1
+ # Forms Manager
2
2
 
3
- Chakra UI Forms.
3
+ Powerfull forms library for Chakra UI.
4
+ Create typesafe React forms with speed.
4
5
 
5
- Create fully functional React forms with just a few lines of code.
6
+ Supports Zod, Yup and AJV for validation and form generation.
6
7
 
7
- Uses React Hook Form under the hood.
8
+ - [Docs](https://www.saas-ui.dev/docs/forms/form)
8
9
 
9
10
  ## Installation
10
11
 
@@ -16,9 +17,55 @@ $ yarn add @saas-ui/forms
16
17
  $ npm i @saas-ui/forms --save
17
18
  ```
18
19
 
19
- ## Docs
20
+ ## Usage with Zod
20
21
 
21
- https://www.saas-ui.dev/docs/forms/form
22
+ ### AutoForm
23
+
24
+ Generate forms from schema.
25
+
26
+ ```tsx
27
+ import { createZodForm } from '@saas-ui/forms/zod'
28
+
29
+ const { AutoForm } = createZodForm()
30
+
31
+ const schema = z.object({
32
+ name: z.string(),
33
+ })
34
+
35
+ function App() {
36
+ const onSubmit = (data: z.infer<typeof schema>) => {}
37
+ return <AutoForm schema={schema} onSubmit={onSubmit} />
38
+ }
39
+ ```
40
+
41
+ ### Form
42
+
43
+ Create custom typesafe forms.
44
+
45
+ ```tsx
46
+ import { FormLayout, createZodForm } from '@saas-ui/forms/zod'
47
+
48
+ const { Form, SubmitButton } = createZodForm()
49
+
50
+ const schema = z.object({
51
+ name: z.string()
52
+ })
53
+
54
+ function App() {
55
+ const onSubmit = (data: z.infer<typeof schema>) => {}
56
+
57
+ return (
58
+ <Form schema={schema} onSubmit={onSubmit}>
59
+ {({ Field }) => (
60
+ <FormLayout>
61
+ <Field name="name" type="text" />
62
+ <SubmitButton>Save</SubmitButton>
63
+ </FormLayotu>
64
+ )}
65
+ </Form>
66
+ )
67
+ }
68
+ ```
22
69
 
23
70
  ## Source
24
71
 
@@ -1,21 +1,369 @@
1
+ import * as React$1 from 'react';
2
+ import React$1__default from 'react';
3
+ import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
4
+ import { HTMLChakraProps, ButtonProps, TextareaProps, SwitchProps, CheckboxProps, FormControlProps, ResponsiveValue, InputProps, RadioGroupProps, MenuProps, SelectProps as SelectProps$1, UsePinInputProps, SystemProps, NumberInputProps as NumberInputProps$1, StackDirection, MenuItemOptionProps, RadioProps } from '@chakra-ui/react';
5
+ import { FocusableElement } from '@chakra-ui/utils';
6
+ import * as react_hook_form from 'react-hook-form';
7
+ import { FieldValues, UseFormProps, FieldPath, UseFormReturn, WatchObserver, SubmitHandler, SubmitErrorHandler, RegisterOptions, UseFieldArrayReturn } from 'react-hook-form';
8
+ import { MaybeRenderProp } from '@chakra-ui/react-utils';
9
+ import * as ajv_dist_jtd from 'ajv/dist/jtd';
10
+ import { JTDDataType } from 'ajv/dist/jtd';
11
+ export { JTDDataType, JTDSchemaType } from 'ajv/dist/jtd';
12
+ import * as _saas_ui_forms from '@saas-ui/forms';
13
+ import { FieldResolver as FieldResolver$1, CreateFormProps, WithFields as WithFields$1, FormProps as FormProps$1 } from '@saas-ui/forms';
14
+ import { JSONSchemaType } from 'ajv';
1
15
  import { ajvResolver } from '@hookform/resolvers/ajv';
2
16
  export { ajvResolver } from '@hookform/resolvers/ajv';
3
- import { FieldResolver, CreateFormProps } from '@saas-ui/forms';
4
- import { JSONSchemaType } from 'ajv';
5
- export { JTDDataType, JTDSchemaType } from 'ajv/dist/jtd';
6
17
 
7
- interface JsonSchemaFormReturn {
8
- schema: JSONSchemaType<unknown>;
9
- fieldResolver: FieldResolver;
10
- resolver: ReturnType<typeof ajvResolver>;
18
+ interface SubmitButtonProps extends ButtonProps {
19
+ /**
20
+ * Disable the submit button if the form is untouched.
21
+ *
22
+ * Change the default behavior by updating
23
+ * `SubmitButton.defaultProps.disableIfUntouched`
24
+ */
25
+ disableIfUntouched?: boolean;
26
+ /**
27
+ * Disable the submit button if the form is invalid.
28
+ *
29
+ * Change the default behavior by updating
30
+ * `SubmitButton.defaultProps.disableIfInvalid`
31
+ */
32
+ disableIfInvalid?: boolean;
33
+ }
34
+
35
+ interface NumberInputOptions {
36
+ /**
37
+ * Hide the stepper.
38
+ */
39
+ hideStepper?: boolean;
40
+ /**
41
+ * Render a custom increment icon.
42
+ */
43
+ incrementIcon?: React$1.ReactNode;
44
+ /**
45
+ * Render a custom decrement icon.
46
+ */
47
+ decrementIcon?: React$1.ReactNode;
48
+ }
49
+ interface NumberInputProps extends NumberInputProps$1, NumberInputOptions {
50
+ }
51
+
52
+ interface PasswordOptions {
53
+ viewIcon?: React$1__default.ReactNode;
54
+ viewOffIcon?: React$1__default.ReactNode;
55
+ leftAddon?: React$1__default.ReactNode;
56
+ }
57
+ interface PasswordInputProps extends InputProps, PasswordOptions {
58
+ }
59
+
60
+ interface RadioOption extends Omit<RadioProps, 'value' | 'label'>, FieldOption {
61
+ }
62
+ type RadioOptions = FieldOptions<RadioOption>;
63
+ interface RadioInputOptions {
64
+ options: RadioOptions;
65
+ spacing?: SystemProps['margin'];
66
+ direction?: StackDirection;
67
+ }
68
+ interface RadioInputProps extends Omit<RadioGroupProps, 'children'>, RadioInputOptions {
69
+ }
70
+
71
+ interface SelectOptions {
72
+ /**
73
+ * The name of the input field in a native form.
74
+ */
75
+ name: string;
76
+ /**
77
+ * The value of the select field.
78
+ */
79
+ value?: string | string[];
80
+ /**
81
+ * The initial value of the select field.
82
+ */
83
+ defaultValue?: string | string[];
84
+ /**
85
+ * The callback invoked when the value of the select field changes.
86
+ * @param value The value of the select field.
87
+ */
88
+ onChange?: (value: string | string[]) => void;
89
+ /**
90
+ * The placeholder text when there's no value.
91
+ */
92
+ placeholder?: string;
93
+ /**
94
+ * If `true`, the select will be disabled.
95
+ */
96
+ isDisabled?: boolean;
97
+ /**
98
+ * An array of options
99
+ * If you leave this empty the children prop will be rendered.
100
+ */
101
+ options?: FieldOptions<SelectOption>;
102
+ /**
103
+ * Enable multiple select.
104
+ */
105
+ multiple?: boolean;
106
+ /**
107
+ * The function used to render the value of the select field.
108
+ * @param value The value of the select field.
109
+ * @returns The rendered value.
110
+ */
111
+ renderValue?: (value: string | string[]) => React$1__default.ReactNode;
112
+ }
113
+
114
+ interface SelectProps extends Omit<MenuProps, 'children'>, SelectOptions {
115
+ }
116
+ interface SelectOption extends Omit<MenuItemOptionProps, 'value'>, FieldOption {
117
+ }
118
+ /**
119
+ * An option in a select list
120
+ *
121
+ * @see https://saas-ui.dev/docs/components/forms/select
122
+ */
123
+ declare const SelectOption: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", MenuItemOptionProps>;
124
+
125
+ interface Option$1 {
126
+ value: string;
127
+ label?: string;
128
+ }
129
+ interface NativeSelectOptions {
130
+ options?: Option$1[];
131
+ }
132
+ interface NativeSelectProps extends SelectProps$1, NativeSelectOptions {
11
133
  }
12
- declare const jsonSchemaForm: (schema: JSONSchemaType<unknown>) => JsonSchemaFormReturn;
134
+
135
+ interface InputFieldProps extends InputProps {
136
+ type?: string;
137
+ leftAddon?: React$1.ReactNode;
138
+ rightAddon?: React$1.ReactNode;
139
+ }
140
+ interface NumberInputFieldProps extends NumberInputProps {
141
+ type: 'number';
142
+ }
143
+ interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
144
+ pinLength?: number;
145
+ pinType?: 'alphanumeric' | 'number';
146
+ spacing?: SystemProps['margin'];
147
+ }
148
+ declare const defaultFieldTypes: {
149
+ text: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
150
+ email: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
151
+ url: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
152
+ phone: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
153
+ number: React$1.FC<NumberInputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
154
+ password: React$1.FC<PasswordInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
155
+ textarea: React$1.FC<TextareaProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
156
+ switch: React$1.FC<SwitchProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
157
+ select: React$1.FC<SelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
158
+ checkbox: React$1.FC<CheckboxProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
159
+ radio: React$1.FC<RadioInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
160
+ pin: React$1.FC<PinFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
161
+ 'native-select': React$1.FC<NativeSelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
162
+ };
163
+ type DefaultFields = typeof defaultFieldTypes;
164
+
165
+ type FieldOption = {
166
+ label?: string;
167
+ value: string;
168
+ };
169
+ type FieldOptions<TOption extends FieldOption = FieldOption> = Array<string> | Array<TOption>;
170
+ type ValueOf<T> = T[keyof T];
171
+ type ShallowMerge<A, B> = Omit<A, keyof B> & B;
172
+ type Split<S extends string, D extends string> = string extends S ? string[] : S extends '' ? [] : S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] : [S];
173
+ type MapPath<T extends string[]> = T extends [infer U, ...infer R] ? U extends string ? `${U extends `${number}` ? '$' : U}${R[0] extends string ? '.' : ''}${R extends string[] ? MapPath<R> : ''}` : '' : '';
174
+ type TransformPath<T extends string> = MapPath<Split<T, '.'>>;
175
+ type ArrayFieldPath<Name extends string> = Name extends string ? TransformPath<Name> : never;
176
+ interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
177
+ /**
178
+ * The field name
179
+ */
180
+ name: TName | ArrayFieldPath<TName>;
181
+ /**
182
+ * The field label
183
+ */
184
+ label?: string;
185
+ /**
186
+ * Hide the field label
187
+ */
188
+ hideLabel?: boolean;
189
+ /**
190
+ * Field help text
191
+ */
192
+ help?: string;
193
+ /**
194
+ * React hook form rules
195
+ */
196
+ rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
197
+ /**
198
+ * Build-in types:
199
+ * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
200
+ *
201
+ * Will default to a text field if there is no matching type.
202
+ */
203
+ type?: string;
204
+ /**
205
+ * The input placeholder
206
+ */
207
+ placeholder?: string;
208
+ }
209
+ type FieldPathWithArray<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TName | ArrayFieldPath<TName>;
210
+ type MergeFieldProps<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ValueOf<{
211
+ [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props> ? {
212
+ type?: K;
213
+ } & ShallowMerge<Props, BaseFieldProps<TFieldValues, TName>> : never;
214
+ }>;
215
+ type FieldProps<TFieldValues extends FieldValues = FieldValues> = MergeFieldProps<DefaultFields, TFieldValues>;
216
+ type FormChildren<FieldDefs, TFieldValues extends FieldValues = FieldValues, TContext extends object = object> = MaybeRenderProp<FormRenderContext<TFieldValues, TContext, MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>>>;
217
+ type DefaultFieldOverrides = {
218
+ submit?: SubmitButtonProps;
219
+ [key: string]: any;
220
+ };
221
+ type FieldOverrides<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
222
+ [K in FieldPathWithArray<TFieldValues, TName>]?: Omit<MergeFieldProps<FieldDefs extends never ? DefaultFields : ShallowMerge<DefaultFields, FieldDefs>, TFieldValues>, 'name'>;
223
+ };
224
+ type WithFields<TFormProps extends FormProps<any, any, any, any>, FieldDefs> = TFormProps extends FormProps<infer TFieldValues, infer TContext> ? Omit<TFormProps, 'children' | 'fields'> & {
225
+ children?: FormChildren<FieldDefs, TFieldValues, TContext>;
226
+ fields?: FieldOverrides<FieldDefs, TFieldValues> & {
227
+ submit?: SubmitButtonProps;
228
+ };
229
+ } : never;
230
+
231
+ type FieldResolver = {
232
+ getFields(): BaseFieldProps[];
233
+ getNestedFields(name: string): BaseFieldProps[];
234
+ };
235
+
236
+ interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
237
+ children: React$1.ReactElement;
238
+ name: TName;
239
+ defaultValue?: unknown;
240
+ isDisabled?: boolean;
241
+ isExact?: boolean;
242
+ condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean;
243
+ }
244
+
245
+ interface UseArrayFieldReturn extends UseFieldArrayReturn {
246
+ /**
247
+ * The array field name
248
+ */
249
+ name: string;
250
+ /**
251
+ * The default value for new items
252
+ */
253
+ defaultValue: Record<string, any>;
254
+ /**
255
+ * Min amount of items
256
+ */
257
+ min?: number;
258
+ /**
259
+ * Max amount of items
260
+ */
261
+ max?: number;
262
+ }
263
+ interface ArrayFieldOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
264
+ /**
265
+ * The field name
266
+ */
267
+ name: TName;
268
+ /**
269
+ * Default value for new values in the array
270
+ */
271
+ defaultValue?: Record<string, any>;
272
+ /**
273
+ * Default key name for rows, change this if your data uses a different 'id' field
274
+ * @default "id"
275
+ */
276
+ keyName?: string;
277
+ min?: number;
278
+ max?: number;
279
+ }
280
+ interface ArrayFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends ArrayFieldOptions<TFieldValues, TName>, Omit<BaseFieldProps<TFieldValues, TName>, 'name' | 'defaultValue' | 'children'> {
281
+ children: MaybeRenderProp<ArrayField[]>;
282
+ }
283
+ interface ArrayField {
284
+ id: string;
285
+ [key: string]: unknown;
286
+ }
287
+ /**
288
+ * The wrapper component that composes the default ArrayField functionality.
289
+ *
290
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
291
+ */
292
+ declare const ArrayField: ((props: ArrayFieldProps & {
293
+ ref?: React$1.ForwardedRef<UseArrayFieldReturn>;
294
+ }) => React$1.ReactElement) & {
295
+ displayName: string;
296
+ };
297
+
298
+ interface ObjectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends BaseFieldProps {
299
+ name: TName;
300
+ children: React$1.ReactNode;
301
+ columns?: ResponsiveValue<number>;
302
+ spacing?: ResponsiveValue<string | number>;
303
+ }
304
+
305
+ interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn<TFieldValues, TContext> {
306
+ Field: React$1.FC<TFieldTypes & React$1.RefAttributes<FocusableElement>>;
307
+ DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
308
+ ArrayField: React$1.FC<ArrayFieldProps<TFieldValues> & React$1.RefAttributes<UseArrayFieldReturn>>;
309
+ ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
310
+ }
311
+ interface FormOptions<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> {
312
+ /**
313
+ * The form schema.
314
+ */
315
+ schema?: TSchema;
316
+ /**
317
+ * Triggers when any of the field change.
318
+ */
319
+ onChange?: WatchObserver<TFieldValues>;
320
+ /**
321
+ * The submit handler.
322
+ */
323
+ onSubmit: SubmitHandler<TFieldValues>;
324
+ /**
325
+ * Triggers when there are validation errors.
326
+ */
327
+ onError?: SubmitErrorHandler<TFieldValues>;
328
+ /**
329
+ * The Hook Form state ref.
330
+ */
331
+ formRef?: React$1.RefObject<UseFormReturn<TFieldValues, TContext>>;
332
+ /**
333
+ * The form children, can be a render prop or a ReactNode.
334
+ */
335
+ children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext, TFieldTypes>>;
336
+ /**
337
+ * The field resolver, used to resolve the fields from schemas.
338
+ */
339
+ fieldResolver?: FieldResolver;
340
+ /**
341
+ * Field overrides
342
+ */
343
+ fields?: DefaultFieldOverrides;
344
+ }
345
+ interface FormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TSchema = any, TFieldTypes = FieldProps<TFieldValues>> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TFieldValues, TContext, TSchema, TFieldTypes> {
346
+ }
347
+
348
+ declare const ajvFieldResolver: (schema: JSONSchemaType<unknown>) => FieldResolver$1;
13
349
 
14
350
  type ResolverArgs = Parameters<typeof ajvResolver>;
15
- interface CreateAjvFormProps extends CreateFormProps {
351
+ interface CreateAjvFormProps<FieldDefs> extends CreateFormProps<FieldDefs> {
16
352
  schemaOptions?: ResolverArgs[1];
17
353
  resolverOptions?: ResolverArgs[2];
18
354
  }
19
- declare function createAjvForm(options?: CreateAjvFormProps): any;
355
+ /**
356
+ * Create a Form component with AJV validation that accepts JSON Type Definition schema
357
+ *
358
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
359
+ * @see https://ajv.js.org/json-type-definition.html
360
+ */
361
+ declare function createAjvForm<FieldDefs>(options?: CreateAjvFormProps<FieldDefs>): <TSchema extends Record<string, any>, TContext extends object = object, TJSONSchema = JTDDataType<TSchema>>(props: WithFields$1<FormProps$1<TJSONSchema, TContext, TSchema, _saas_ui_forms.FieldProps<TJSONSchema>>, FieldDefs> & {
362
+ ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
363
+ }) => React.ReactElement;
364
+
365
+ declare const Form: <TSchema extends Record<string, any>, TContext extends object = object, TJSONSchema = ajv_dist_jtd.JTDDataType<TSchema>>(props: WithFields<FormProps<TJSONSchema, TContext, TSchema, FieldProps<TJSONSchema>>, unknown> & {
366
+ ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
367
+ }) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>;
20
368
 
21
- export { CreateAjvFormProps, createAjvForm, jsonSchemaForm };
369
+ export { CreateAjvFormProps, Form, ajvFieldResolver, createAjvForm };
package/dist/ajv/index.js CHANGED
@@ -4,28 +4,26 @@ var ajv = require('@hookform/resolvers/ajv');
4
4
  var forms = require('@saas-ui/forms');
5
5
 
6
6
  // ajv/src/ajv-resolver.ts
7
- var jsonSchemaFieldResolver = (schema) => {
7
+ var ajvFieldResolver = (schema) => {
8
8
  return forms.objectFieldResolver(schema.properties);
9
9
  };
10
- var jsonSchemaForm = (schema) => {
11
- return {
12
- schema,
13
- fieldResolver: jsonSchemaFieldResolver(schema),
14
- resolver: ajv.ajvResolver(schema)
15
- };
16
- };
17
10
  function createAjvForm(options) {
18
11
  return forms.createForm({
19
12
  resolver: (schema) => ajv.ajvResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
13
+ fieldResolver: ajvFieldResolver,
20
14
  ...options
21
15
  });
22
16
  }
23
17
 
18
+ // ajv/src/index.ts
19
+ var Form = createAjvForm();
20
+
24
21
  Object.defineProperty(exports, 'ajvResolver', {
25
22
  enumerable: true,
26
23
  get: function () { return ajv.ajvResolver; }
27
24
  });
25
+ exports.Form = Form;
26
+ exports.ajvFieldResolver = ajvFieldResolver;
28
27
  exports.createAjvForm = createAjvForm;
29
- exports.jsonSchemaForm = jsonSchemaForm;
30
28
  //# sourceMappingURL=out.js.map
31
29
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../ajv/src/ajv-resolver.ts","../../ajv/src/create-ajv-form.ts"],"names":[],"mappings":";AAAA,SAAS,mBAAmB;AAC5B,SAAS,2BAA0C;AAMnD,IAAM,0BAA0B,CAAC,WAAoC;AACnE,SAAO,oBAAoB,OAAO,UAAU;AAC9C;AAQO,IAAM,iBAAiB,CAC5B,WACyB;AACzB,SAAO;AAAA,IACL;AAAA,IACA,eAAe,wBAAwB,MAAM;AAAA,IAC7C,UAAU,YAAY,MAAM;AAAA,EAC9B;AACF;;;ACzBA;AAAA,EACE;AAAA,OAIK;AAWA,SAAS,cAAc,SAAmC;AAC/D,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAOH","sourcesContent":["import { ajvResolver } from '@hookform/resolvers/ajv'\nimport { objectFieldResolver, FieldResolver } from '@saas-ui/forms'\n\nimport { JSONSchemaType } from 'ajv'\n\nexport { ajvResolver }\n\nconst jsonSchemaFieldResolver = (schema: JSONSchemaType<unknown>) => {\n return objectFieldResolver(schema.properties)\n}\n\ninterface JsonSchemaFormReturn {\n schema: JSONSchemaType<unknown>\n fieldResolver: FieldResolver\n resolver: ReturnType<typeof ajvResolver>\n}\n\nexport const jsonSchemaForm = (\n schema: JSONSchemaType<unknown>\n): JsonSchemaFormReturn => {\n return {\n schema,\n fieldResolver: jsonSchemaFieldResolver(schema),\n resolver: ajvResolver(schema),\n }\n}\n","import {\n createForm,\n CreateFormProps,\n FieldValues,\n FormProps,\n} from '@saas-ui/forms'\nimport { ajvResolver } from './ajv-resolver'\nimport { JSONSchemaType } from 'ajv'\n\ntype ResolverArgs = Parameters<typeof ajvResolver>\n\nexport interface CreateAjvFormProps extends CreateFormProps {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport function createAjvForm(options?: CreateAjvFormProps): any {\n return createForm({\n resolver: (schema) =>\n ajvResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TFieldValues extends FieldValues = FieldValues,\n TSchema extends JSONSchemaType<TFieldValues> = JSONSchemaType<TFieldValues>,\n TContext extends object = object\n >(\n props: FormProps<TFieldValues, TContext, TSchema>\n ) => React.ReactElement\n}\n"]}
1
+ {"version":3,"sources":["../../ajv/src/ajv-resolver.ts","../../ajv/src/create-ajv-form.ts","../../ajv/src/index.ts"],"names":[],"mappings":";AAAA,SAAS,mBAAmB;AAC5B,SAAS,2BAA0C;AAM5C,IAAM,mBAAmB,CAAC,WAAoC;AACnE,SAAO,oBAAoB,OAAO,UAAU;AAC9C;;;ACTA;AAAA,EACE;AAAA,OAIK;AAiBA,SAAS,cACd,SACA;AACA,SAAO,WAAgB;AAAA,IACrB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAUH;;;ACjCO,IAAM,OAAO,cAAc","sourcesContent":["import { ajvResolver } from '@hookform/resolvers/ajv'\nimport { objectFieldResolver, FieldResolver } from '@saas-ui/forms'\n\nimport { JSONSchemaType } from 'ajv'\n\nexport { ajvResolver }\n\nexport const ajvFieldResolver = (schema: JSONSchemaType<unknown>) => {\n return objectFieldResolver(schema.properties)\n}\n","import {\n createForm,\n CreateFormProps,\n FormProps,\n WithFields,\n} from '@saas-ui/forms'\nimport { ajvFieldResolver, ajvResolver } from './ajv-resolver'\nimport { JTDDataType } from 'ajv/dist/jtd'\ntype ResolverArgs = Parameters<typeof ajvResolver>\n\nexport interface CreateAjvFormProps<FieldDefs>\n extends CreateFormProps<FieldDefs> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\n/**\n * Create a Form component with AJV validation that accepts JSON Type Definition schema\n *\n * @see Docs https://saas-ui.dev/docs/components/forms/form\n * @see https://ajv.js.org/json-type-definition.html\n */\nexport function createAjvForm<FieldDefs>(\n options?: CreateAjvFormProps<FieldDefs>\n) {\n return createForm<any>({\n resolver: (schema) =>\n ajvResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: ajvFieldResolver,\n ...options,\n }) as <\n TSchema extends Record<string, any>,\n TContext extends object = object,\n TJSONSchema = JTDDataType<TSchema>\n >(\n /** @ts-expect-error @todo properly fix these types */\n props: WithFields<FormProps<TJSONSchema, TContext, TSchema>, FieldDefs> & {\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n ) => React.ReactElement\n}\n","export * from './ajv-resolver'\nexport { createAjvForm } from './create-ajv-form'\nexport type { CreateAjvFormProps } from './create-ajv-form'\nexport type { JTDDataType, JTDSchemaType } from 'ajv/dist/jtd'\n\nimport { createAjvForm } from './create-ajv-form'\n\nexport const Form = createAjvForm()\n"]}
@@ -1,25 +1,22 @@
1
1
  import { ajvResolver } from '@hookform/resolvers/ajv';
2
2
  export { ajvResolver } from '@hookform/resolvers/ajv';
3
- import { createForm, objectFieldResolver } from '@saas-ui/forms';
3
+ import { objectFieldResolver, createForm } from '@saas-ui/forms';
4
4
 
5
5
  // ajv/src/ajv-resolver.ts
6
- var jsonSchemaFieldResolver = (schema) => {
6
+ var ajvFieldResolver = (schema) => {
7
7
  return objectFieldResolver(schema.properties);
8
8
  };
9
- var jsonSchemaForm = (schema) => {
10
- return {
11
- schema,
12
- fieldResolver: jsonSchemaFieldResolver(schema),
13
- resolver: ajvResolver(schema)
14
- };
15
- };
16
9
  function createAjvForm(options) {
17
10
  return createForm({
18
11
  resolver: (schema) => ajvResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
12
+ fieldResolver: ajvFieldResolver,
19
13
  ...options
20
14
  });
21
15
  }
22
16
 
23
- export { createAjvForm, jsonSchemaForm };
17
+ // ajv/src/index.ts
18
+ var Form = createAjvForm();
19
+
20
+ export { Form, ajvFieldResolver, createAjvForm };
24
21
  //# sourceMappingURL=out.js.map
25
22
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../ajv/src/ajv-resolver.ts","../../ajv/src/create-ajv-form.ts"],"names":[],"mappings":";AAAA,SAAS,mBAAmB;AAC5B,SAAS,2BAA0C;AAMnD,IAAM,0BAA0B,CAAC,WAAoC;AACnE,SAAO,oBAAoB,OAAO,UAAU;AAC9C;AAQO,IAAM,iBAAiB,CAC5B,WACyB;AACzB,SAAO;AAAA,IACL;AAAA,IACA,eAAe,wBAAwB,MAAM;AAAA,IAC7C,UAAU,YAAY,MAAM;AAAA,EAC9B;AACF;;;ACzBA;AAAA,EACE;AAAA,OAIK;AAWA,SAAS,cAAc,SAAmC;AAC/D,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAOH","sourcesContent":["import { ajvResolver } from '@hookform/resolvers/ajv'\nimport { objectFieldResolver, FieldResolver } from '@saas-ui/forms'\n\nimport { JSONSchemaType } from 'ajv'\n\nexport { ajvResolver }\n\nconst jsonSchemaFieldResolver = (schema: JSONSchemaType<unknown>) => {\n return objectFieldResolver(schema.properties)\n}\n\ninterface JsonSchemaFormReturn {\n schema: JSONSchemaType<unknown>\n fieldResolver: FieldResolver\n resolver: ReturnType<typeof ajvResolver>\n}\n\nexport const jsonSchemaForm = (\n schema: JSONSchemaType<unknown>\n): JsonSchemaFormReturn => {\n return {\n schema,\n fieldResolver: jsonSchemaFieldResolver(schema),\n resolver: ajvResolver(schema),\n }\n}\n","import {\n createForm,\n CreateFormProps,\n FieldValues,\n FormProps,\n} from '@saas-ui/forms'\nimport { ajvResolver } from './ajv-resolver'\nimport { JSONSchemaType } from 'ajv'\n\ntype ResolverArgs = Parameters<typeof ajvResolver>\n\nexport interface CreateAjvFormProps extends CreateFormProps {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport function createAjvForm(options?: CreateAjvFormProps): any {\n return createForm({\n resolver: (schema) =>\n ajvResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TFieldValues extends FieldValues = FieldValues,\n TSchema extends JSONSchemaType<TFieldValues> = JSONSchemaType<TFieldValues>,\n TContext extends object = object\n >(\n props: FormProps<TFieldValues, TContext, TSchema>\n ) => React.ReactElement\n}\n"]}
1
+ {"version":3,"sources":["../../ajv/src/ajv-resolver.ts","../../ajv/src/create-ajv-form.ts","../../ajv/src/index.ts"],"names":[],"mappings":";AAAA,SAAS,mBAAmB;AAC5B,SAAS,2BAA0C;AAM5C,IAAM,mBAAmB,CAAC,WAAoC;AACnE,SAAO,oBAAoB,OAAO,UAAU;AAC9C;;;ACTA;AAAA,EACE;AAAA,OAIK;AAiBA,SAAS,cACd,SACA;AACA,SAAO,WAAgB;AAAA,IACrB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAUH;;;ACjCO,IAAM,OAAO,cAAc","sourcesContent":["import { ajvResolver } from '@hookform/resolvers/ajv'\nimport { objectFieldResolver, FieldResolver } from '@saas-ui/forms'\n\nimport { JSONSchemaType } from 'ajv'\n\nexport { ajvResolver }\n\nexport const ajvFieldResolver = (schema: JSONSchemaType<unknown>) => {\n return objectFieldResolver(schema.properties)\n}\n","import {\n createForm,\n CreateFormProps,\n FormProps,\n WithFields,\n} from '@saas-ui/forms'\nimport { ajvFieldResolver, ajvResolver } from './ajv-resolver'\nimport { JTDDataType } from 'ajv/dist/jtd'\ntype ResolverArgs = Parameters<typeof ajvResolver>\n\nexport interface CreateAjvFormProps<FieldDefs>\n extends CreateFormProps<FieldDefs> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\n/**\n * Create a Form component with AJV validation that accepts JSON Type Definition schema\n *\n * @see Docs https://saas-ui.dev/docs/components/forms/form\n * @see https://ajv.js.org/json-type-definition.html\n */\nexport function createAjvForm<FieldDefs>(\n options?: CreateAjvFormProps<FieldDefs>\n) {\n return createForm<any>({\n resolver: (schema) =>\n ajvResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: ajvFieldResolver,\n ...options,\n }) as <\n TSchema extends Record<string, any>,\n TContext extends object = object,\n TJSONSchema = JTDDataType<TSchema>\n >(\n /** @ts-expect-error @todo properly fix these types */\n props: WithFields<FormProps<TJSONSchema, TContext, TSchema>, FieldDefs> & {\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n ) => React.ReactElement\n}\n","export * from './ajv-resolver'\nexport { createAjvForm } from './create-ajv-form'\nexport type { CreateAjvFormProps } from './create-ajv-form'\nexport type { JTDDataType, JTDSchemaType } from 'ajv/dist/jtd'\n\nimport { createAjvForm } from './create-ajv-form'\n\nexport const Form = createAjvForm()\n"]}