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

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.
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"]}