@saas-ui/forms 2.0.0-next.2 → 2.0.0-next.5

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 (49) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.md +53 -6
  3. package/dist/ajv/index.d.ts +1 -1
  4. package/dist/ajv/index.js.map +1 -1
  5. package/dist/ajv/index.mjs.map +1 -1
  6. package/dist/index.d.ts +265 -166
  7. package/dist/index.js +2821 -556
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +2814 -555
  10. package/dist/index.mjs.map +1 -1
  11. package/dist/yup/index.d.ts +98 -6
  12. package/dist/yup/index.js.map +1 -1
  13. package/dist/yup/index.mjs.map +1 -1
  14. package/dist/zod/index.d.ts +97 -4
  15. package/dist/zod/index.js.map +1 -1
  16. package/dist/zod/index.mjs.map +1 -1
  17. package/package.json +5 -3
  18. package/src/array-field.tsx +50 -30
  19. package/src/auto-form.tsx +7 -3
  20. package/src/base-field.tsx +59 -0
  21. package/src/create-field.tsx +143 -0
  22. package/src/create-form.tsx +31 -0
  23. package/src/default-fields.tsx +146 -0
  24. package/src/display-field.tsx +8 -9
  25. package/src/display-if.tsx +6 -5
  26. package/src/field-resolver.ts +1 -1
  27. package/src/field.tsx +14 -444
  28. package/src/fields-context.tsx +23 -0
  29. package/src/fields.tsx +18 -8
  30. package/src/form.tsx +27 -37
  31. package/src/index.ts +38 -0
  32. package/src/input-right-button/input-right-button.stories.tsx +1 -1
  33. package/src/input-right-button/input-right-button.tsx +0 -2
  34. package/src/layout.tsx +16 -11
  35. package/src/number-input/number-input.tsx +9 -5
  36. package/src/object-field.tsx +8 -7
  37. package/src/password-input/password-input.stories.tsx +23 -2
  38. package/src/password-input/password-input.tsx +5 -5
  39. package/src/pin-input/pin-input.tsx +1 -5
  40. package/src/radio/radio-input.stories.tsx +1 -1
  41. package/src/radio/radio-input.tsx +12 -10
  42. package/src/select/native-select.tsx +1 -4
  43. package/src/select/select.test.tsx +1 -1
  44. package/src/select/select.tsx +18 -14
  45. package/src/step-form.tsx +29 -11
  46. package/src/submit-button.tsx +5 -1
  47. package/src/types.ts +91 -0
  48. package/src/utils.ts +15 -0
  49. /package/src/radio/{radio.test.tsx → radio-input.test.tsx} +0 -0
package/dist/yup/index.d.ts CHANGED
@@ -2,6 +2,10 @@ import * as _saas_ui_forms from '@saas-ui/forms';
2
2
  import { FieldProps, FormProps, CreateFormProps } from '@saas-ui/forms';
3
3
  import * as yup from 'yup';
4
4
  import { AnyObjectSchema } from 'yup';
5
+ import * as react_hook_form from 'react-hook-form';
6
+ import * as _chakra_ui_checkbox_dist_checkbox from '@chakra-ui/checkbox/dist/checkbox';
7
+ import * as _chakra_ui_switch_dist_switch from '@chakra-ui/switch/dist/switch';
8
+ import * as _chakra_ui_textarea_dist_textarea from '@chakra-ui/textarea/dist/textarea';
5
9
  import { yupResolver } from '@hookform/resolvers/yup';
6
10
  export { yupResolver } from '@hookform/resolvers/yup';
7
11
  import React from 'react';
@@ -19,23 +23,111 @@ type Options = {
19
23
  declare const getFieldsFromSchema: (schema: AnyObjectSchema) => FieldProps[];
20
24
  declare const getNestedSchema: (schema: AnyObjectSchema, path: string) => any;
21
25
  declare const yupFieldResolver: (schema: AnyObjectSchema) => {
22
- getFields(): FieldProps<_saas_ui_forms.FieldValues, string>[];
23
- getNestedFields(name: string): FieldProps<_saas_ui_forms.FieldValues, string>[];
26
+ getFields(): FieldProps<_saas_ui_forms.FieldValues>[];
27
+ getNestedFields(name: string): FieldProps<_saas_ui_forms.FieldValues>[];
24
28
  };
25
29
  declare const yupForm: (schema: AnyObjectSchema, schemaOptions?: {}, resolverOptions?: {}) => {
26
30
  schema: AnyObjectSchema;
27
31
  resolver: <TFieldValues extends _saas_ui_forms.FieldValues, TContext>(values: TFieldValues, context: TContext | undefined, options: _saas_ui_forms.ResolverOptions<TFieldValues>) => Promise<_saas_ui_forms.ResolverResult<TFieldValues>>;
28
32
  fieldResolver: {
29
- getFields(): FieldProps<_saas_ui_forms.FieldValues, string>[];
30
- getNestedFields(name: string): FieldProps<_saas_ui_forms.FieldValues, string>[];
33
+ getFields(): FieldProps<_saas_ui_forms.FieldValues>[];
34
+ getNestedFields(name: string): FieldProps<_saas_ui_forms.FieldValues>[];
31
35
  };
32
36
  };
33
37
 
34
38
  type ResolverArgs = Parameters<typeof yupResolver>;
35
- interface CreateYupFormProps extends CreateFormProps {
39
+ interface CreateYupFormProps<FieldDefs> extends CreateFormProps<FieldDefs> {
36
40
  schemaOptions?: ResolverArgs[1];
37
41
  resolverOptions?: ResolverArgs[2];
38
42
  }
39
- declare const createYupForm: (options?: CreateYupFormProps) => <TSchema extends yup.AnyObjectSchema = yup.AnyObjectSchema, TContext extends object = object>(props: FormProps<yup.Asserts<TSchema>, TContext, TSchema>) => React.ReactElement;
43
+ declare const createYupForm: <FieldDefs>(options?: CreateYupFormProps<FieldDefs> | undefined) => <TSchema extends yup.AnyObjectSchema = yup.AnyObjectSchema, TContext extends object = object>(props: Omit<FormProps<yup.Asserts<TSchema>, TContext, TSchema, _saas_ui_forms.FieldProps<yup.Asserts<TSchema>>>, "children"> & {
44
+ children: React.ReactNode | ((props: _saas_ui_forms.FormRenderContext<yup.Asserts<TSchema>, TContext, ((FieldDefs extends never ? {
45
+ text: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
46
+ email: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
47
+ url: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
48
+ phone: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
49
+ number: React.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
50
+ password: React.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
51
+ textarea: React.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
52
+ switch: React.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
53
+ select: React.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
54
+ checkbox: React.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
55
+ radio: React.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
56
+ pin: React.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
57
+ 'native-select': React.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
58
+ } : Omit<{
59
+ text: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
60
+ email: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
61
+ url: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
62
+ phone: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
63
+ number: React.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
64
+ password: React.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
65
+ textarea: React.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
66
+ switch: React.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
67
+ select: React.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
68
+ checkbox: React.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
69
+ radio: React.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
70
+ pin: React.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
71
+ 'native-select': React.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
72
+ }, keyof FieldDefs> & FieldDefs) extends infer T ? { [K in keyof T]: (FieldDefs extends never ? {
73
+ text: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
74
+ email: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
75
+ url: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
76
+ phone: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
77
+ number: React.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
78
+ password: React.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
79
+ textarea: React.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
80
+ switch: React.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
81
+ select: React.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
82
+ checkbox: React.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
83
+ radio: React.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
84
+ pin: React.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
85
+ 'native-select': React.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
86
+ } : Omit<{
87
+ text: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
88
+ email: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
89
+ url: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
90
+ phone: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
91
+ number: React.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
92
+ password: React.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
93
+ textarea: React.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
94
+ switch: React.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
95
+ select: React.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
96
+ checkbox: React.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
97
+ radio: React.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
98
+ pin: React.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
99
+ 'native-select': React.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
100
+ }, keyof FieldDefs> & FieldDefs)[K] extends React.FC<infer Props> ? {
101
+ type?: K | undefined;
102
+ } & Omit<Props, keyof _saas_ui_forms.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>> & _saas_ui_forms.BaseFieldProps<yup.Asserts<TSchema>, react_hook_form.Path<yup.Asserts<TSchema>>> : never; } : never)[keyof (FieldDefs extends never ? {
103
+ text: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
104
+ email: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
105
+ url: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
106
+ phone: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
107
+ number: React.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
108
+ password: React.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
109
+ textarea: React.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
110
+ switch: React.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
111
+ select: React.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
112
+ checkbox: React.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
113
+ radio: React.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
114
+ pin: React.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
115
+ 'native-select': React.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
116
+ } : Omit<{
117
+ text: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
118
+ email: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
119
+ url: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
120
+ phone: React.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
121
+ number: React.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
122
+ password: React.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
123
+ textarea: React.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
124
+ switch: React.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
125
+ select: React.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
126
+ checkbox: React.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
127
+ radio: React.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
128
+ pin: React.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
129
+ 'native-select': React.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
130
+ }, keyof FieldDefs> & FieldDefs)]>) => React.ReactNode);
131
+ }) => React.ReactElement;
40
132
 
41
133
  export { Options, createYupForm, getFieldsFromSchema, getNestedSchema, yupFieldResolver, yupForm };
package/dist/yup/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../yup/src/yup-resolver.ts","../../yup/src/create-yup-form.tsx"],"names":[],"mappings":";AAAA,SAAS,aAA8B;AACvC,SAAS,mBAAmB;AAY5B,IAAM,UAAU,CAAC,UAAe;AAbhC;AAcE,OAAI,WAAM,KAAK,SAAX,mBAAiB,MAAM;AACzB,WAAO,MAAM,KAAK,KAAK;AAAA,EACzB;AAEA,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AAjCrD;AAkCE,aAAW,QAAQ,MAAM,OAAO;AAC9B,SAAI,UAAK,YAAL,mBAAc,OAAO;AAAO,aAAO,KAAK,QAAQ,OAAO;AAAA,EAC7D;AACF;AAQO,IAAM,sBAAsB,CAAC,WAA0C;AAC5E,QAAM,SAAS,CAAC;AAEhB,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,SAAS,SAAS;AAE3B,mBAAe,OAAO,UAAU;AAAA,EAClC,OAAO;AACL,mBAAe,OAAO;AAAA,EACxB;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa;AAE3B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,SAAS,SAAS;AAC1B,cAAQ,MAAM,eAAe,OAAO,KAAK;AACzC,cAAQ,MAAM,eAAe,OAAO,KAAK;AAAA,IAC3C;AAEA,WAAO,KAAK;AAAA,MACV;AAAA,MACA,OAAO,MAAM,KAAK,SAAS;AAAA,MAC3B,MAAM,QAAQ,KAAK;AAAA,MACnB,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAyB,SAAiB;AACxE,SAAO,MAAM,QAAQ,IAAI;AAC3B;AAEO,IAAM,mBAAmB,CAAC,WAA4B;AAC3D,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAEO,IAAM,UAAU,CACrB,QACA,gBAAgB,CAAC,GACjB,kBAAkB,CAAC,MAChB;AACH,SAAO;AAAA,IACL;AAAA,IACA,UAAU,YAAY,QAAQ,eAAe,eAAe;AAAA,IAC5D,eAAe,iBAAiB,MAAM;AAAA,EACxC;AACF;;;ACpGA,SAAS,kBAA8C;AAWhD,IAAM,gBAAgB,CAAC,YAAiC;AAC7D,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAMH","sourcesContent":["import { reach, AnyObjectSchema } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { yupResolver }\n\nexport type Options = {\n min?: number\n max?: number\n}\n\n// @TODO get proper typings for the schema fields\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: AnyObjectSchema): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: AnyObjectSchema, path: string) => {\n return reach(schema, path)\n}\n\nexport const yupFieldResolver = (schema: AnyObjectSchema) => {\n return {\n getFields() {\n return getFieldsFromSchema(schema)\n },\n getNestedFields(name: string) {\n return getFieldsFromSchema(getNestedSchema(schema, name))\n },\n }\n}\n\nexport const yupForm = (\n schema: AnyObjectSchema,\n schemaOptions = {},\n resolverOptions = {}\n) => {\n return {\n schema,\n resolver: yupResolver(schema, schemaOptions, resolverOptions),\n fieldResolver: yupFieldResolver(schema),\n }\n}\n","import { createForm, CreateFormProps, FormProps } from '@saas-ui/forms'\nimport { yupResolver } from './yup-resolver'\nimport * as yup from 'yup'\nimport React from 'react'\ntype ResolverArgs = Parameters<typeof yupResolver>\n\nexport interface CreateYupFormProps extends CreateFormProps {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport const createYupForm = (options?: CreateYupFormProps) => {\n return createForm({\n resolver: (schema) =>\n yupResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TSchema extends yup.AnyObjectSchema = yup.AnyObjectSchema,\n TContext extends object = object\n >(\n props: FormProps<yup.InferType<TSchema>, TContext, TSchema>\n ) => React.ReactElement\n}\n"]}
1
+ {"version":3,"sources":["../../yup/src/yup-resolver.ts","../../yup/src/create-yup-form.ts"],"names":[],"mappings":";AAAA,SAAS,aAA8B;AACvC,SAAS,mBAAmB;AAY5B,IAAM,UAAU,CAAC,UAAe;AAbhC;AAcE,OAAI,WAAM,KAAK,SAAX,mBAAiB,MAAM;AACzB,WAAO,MAAM,KAAK,KAAK;AAAA,EACzB;AAEA,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AAjCrD;AAkCE,aAAW,QAAQ,MAAM,OAAO;AAC9B,SAAI,UAAK,YAAL,mBAAc,OAAO;AAAO,aAAO,KAAK,QAAQ,OAAO,IAAI;AAAA,EACjE;AACF;AAQO,IAAM,sBAAsB,CAAC,WAA0C;AAC5E,QAAM,SAAS,CAAC;AAEhB,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,SAAS,SAAS;AAE3B,mBAAe,OAAO,UAAU;AAAA,EAClC,OAAO;AACL,mBAAe,OAAO;AAAA,EACxB;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa,IAAI;AAE/B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,SAAS,SAAS;AAC1B,cAAQ,MAAM,eAAe,OAAO,KAAK;AACzC,cAAQ,MAAM,eAAe,OAAO,KAAK;AAAA,IAC3C;AAEA,WAAO,KAAK;AAAA,MACV;AAAA,MACA,OAAO,MAAM,KAAK,SAAS;AAAA,MAC3B,MAAM,QAAQ,KAAK;AAAA,MACnB,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAyB,SAAiB;AACxE,SAAO,MAAM,QAAQ,IAAI;AAC3B;AAEO,IAAM,mBAAmB,CAAC,WAA4B;AAC3D,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAEO,IAAM,UAAU,CACrB,QACA,gBAAgB,CAAC,GACjB,kBAAkB,CAAC,MAChB;AACH,SAAO;AAAA,IACL;AAAA,IACA,UAAU,YAAY,QAAQ,eAAe,eAAe;AAAA,IAC5D,eAAe,iBAAiB,MAAM;AAAA,EACxC;AACF;;;ACpGA;AAAA,EACE;AAAA,OAIK;AAYA,IAAM,gBAAgB,CAC3B,YACG;AACH,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AASH","sourcesContent":["import { reach, AnyObjectSchema } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { yupResolver }\n\nexport type Options = {\n min?: number\n max?: number\n}\n\n// @TODO get proper typings for the schema fields\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: AnyObjectSchema): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: AnyObjectSchema, path: string) => {\n return reach(schema, path)\n}\n\nexport const yupFieldResolver = (schema: AnyObjectSchema) => {\n return {\n getFields() {\n return getFieldsFromSchema(schema)\n },\n getNestedFields(name: string) {\n return getFieldsFromSchema(getNestedSchema(schema, name))\n },\n }\n}\n\nexport const yupForm = (\n schema: AnyObjectSchema,\n schemaOptions = {},\n resolverOptions = {}\n) => {\n return {\n schema,\n resolver: yupResolver(schema, schemaOptions, resolverOptions),\n fieldResolver: yupFieldResolver(schema),\n }\n}\n","import {\n createForm,\n CreateFormProps,\n FormProps,\n WithFields,\n} from '@saas-ui/forms'\nimport { yupResolver } from './yup-resolver'\nimport * as yup from 'yup'\nimport React from 'react'\ntype ResolverArgs = Parameters<typeof yupResolver>\n\nexport interface CreateYupFormProps<FieldDefs>\n extends CreateFormProps<FieldDefs> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport const createYupForm = <FieldDefs>(\n options?: CreateYupFormProps<FieldDefs>\n) => {\n return createForm({\n resolver: (schema) =>\n yupResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TSchema extends yup.AnyObjectSchema = yup.AnyObjectSchema,\n TContext extends object = object\n >(\n props: WithFields<\n FormProps<yup.InferType<TSchema>, TContext, TSchema>,\n FieldDefs\n >\n ) => React.ReactElement\n}\n"]}
package/dist/yup/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../yup/src/yup-resolver.ts","../../yup/src/create-yup-form.tsx"],"names":[],"mappings":";AAAA,SAAS,aAA8B;AACvC,SAAS,mBAAmB;AAY5B,IAAM,UAAU,CAAC,UAAe;AAbhC;AAcE,OAAI,WAAM,KAAK,SAAX,mBAAiB,MAAM;AACzB,WAAO,MAAM,KAAK,KAAK;AAAA,EACzB;AAEA,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AAjCrD;AAkCE,aAAW,QAAQ,MAAM,OAAO;AAC9B,SAAI,UAAK,YAAL,mBAAc,OAAO;AAAO,aAAO,KAAK,QAAQ,OAAO;AAAA,EAC7D;AACF;AAQO,IAAM,sBAAsB,CAAC,WAA0C;AAC5E,QAAM,SAAS,CAAC;AAEhB,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,SAAS,SAAS;AAE3B,mBAAe,OAAO,UAAU;AAAA,EAClC,OAAO;AACL,mBAAe,OAAO;AAAA,EACxB;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa;AAE3B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,SAAS,SAAS;AAC1B,cAAQ,MAAM,eAAe,OAAO,KAAK;AACzC,cAAQ,MAAM,eAAe,OAAO,KAAK;AAAA,IAC3C;AAEA,WAAO,KAAK;AAAA,MACV;AAAA,MACA,OAAO,MAAM,KAAK,SAAS;AAAA,MAC3B,MAAM,QAAQ,KAAK;AAAA,MACnB,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAyB,SAAiB;AACxE,SAAO,MAAM,QAAQ,IAAI;AAC3B;AAEO,IAAM,mBAAmB,CAAC,WAA4B;AAC3D,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAEO,IAAM,UAAU,CACrB,QACA,gBAAgB,CAAC,GACjB,kBAAkB,CAAC,MAChB;AACH,SAAO;AAAA,IACL;AAAA,IACA,UAAU,YAAY,QAAQ,eAAe,eAAe;AAAA,IAC5D,eAAe,iBAAiB,MAAM;AAAA,EACxC;AACF;;;ACpGA,SAAS,kBAA8C;AAWhD,IAAM,gBAAgB,CAAC,YAAiC;AAC7D,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAMH","sourcesContent":["import { reach, AnyObjectSchema } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { yupResolver }\n\nexport type Options = {\n min?: number\n max?: number\n}\n\n// @TODO get proper typings for the schema fields\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: AnyObjectSchema): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: AnyObjectSchema, path: string) => {\n return reach(schema, path)\n}\n\nexport const yupFieldResolver = (schema: AnyObjectSchema) => {\n return {\n getFields() {\n return getFieldsFromSchema(schema)\n },\n getNestedFields(name: string) {\n return getFieldsFromSchema(getNestedSchema(schema, name))\n },\n }\n}\n\nexport const yupForm = (\n schema: AnyObjectSchema,\n schemaOptions = {},\n resolverOptions = {}\n) => {\n return {\n schema,\n resolver: yupResolver(schema, schemaOptions, resolverOptions),\n fieldResolver: yupFieldResolver(schema),\n }\n}\n","import { createForm, CreateFormProps, FormProps } from '@saas-ui/forms'\nimport { yupResolver } from './yup-resolver'\nimport * as yup from 'yup'\nimport React from 'react'\ntype ResolverArgs = Parameters<typeof yupResolver>\n\nexport interface CreateYupFormProps extends CreateFormProps {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport const createYupForm = (options?: CreateYupFormProps) => {\n return createForm({\n resolver: (schema) =>\n yupResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TSchema extends yup.AnyObjectSchema = yup.AnyObjectSchema,\n TContext extends object = object\n >(\n props: FormProps<yup.InferType<TSchema>, TContext, TSchema>\n ) => React.ReactElement\n}\n"]}
1
+ {"version":3,"sources":["../../yup/src/yup-resolver.ts","../../yup/src/create-yup-form.ts"],"names":[],"mappings":";AAAA,SAAS,aAA8B;AACvC,SAAS,mBAAmB;AAY5B,IAAM,UAAU,CAAC,UAAe;AAbhC;AAcE,OAAI,WAAM,KAAK,SAAX,mBAAiB,MAAM;AACzB,WAAO,MAAM,KAAK,KAAK;AAAA,EACzB;AAEA,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AAjCrD;AAkCE,aAAW,QAAQ,MAAM,OAAO;AAC9B,SAAI,UAAK,YAAL,mBAAc,OAAO;AAAO,aAAO,KAAK,QAAQ,OAAO,IAAI;AAAA,EACjE;AACF;AAQO,IAAM,sBAAsB,CAAC,WAA0C;AAC5E,QAAM,SAAS,CAAC;AAEhB,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,SAAS,SAAS;AAE3B,mBAAe,OAAO,UAAU;AAAA,EAClC,OAAO;AACL,mBAAe,OAAO;AAAA,EACxB;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa,IAAI;AAE/B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,SAAS,SAAS;AAC1B,cAAQ,MAAM,eAAe,OAAO,KAAK;AACzC,cAAQ,MAAM,eAAe,OAAO,KAAK;AAAA,IAC3C;AAEA,WAAO,KAAK;AAAA,MACV;AAAA,MACA,OAAO,MAAM,KAAK,SAAS;AAAA,MAC3B,MAAM,QAAQ,KAAK;AAAA,MACnB,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAyB,SAAiB;AACxE,SAAO,MAAM,QAAQ,IAAI;AAC3B;AAEO,IAAM,mBAAmB,CAAC,WAA4B;AAC3D,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAEO,IAAM,UAAU,CACrB,QACA,gBAAgB,CAAC,GACjB,kBAAkB,CAAC,MAChB;AACH,SAAO;AAAA,IACL;AAAA,IACA,UAAU,YAAY,QAAQ,eAAe,eAAe;AAAA,IAC5D,eAAe,iBAAiB,MAAM;AAAA,EACxC;AACF;;;ACpGA;AAAA,EACE;AAAA,OAIK;AAYA,IAAM,gBAAgB,CAC3B,YACG;AACH,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AASH","sourcesContent":["import { reach, AnyObjectSchema } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { yupResolver }\n\nexport type Options = {\n min?: number\n max?: number\n}\n\n// @TODO get proper typings for the schema fields\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: AnyObjectSchema): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: AnyObjectSchema, path: string) => {\n return reach(schema, path)\n}\n\nexport const yupFieldResolver = (schema: AnyObjectSchema) => {\n return {\n getFields() {\n return getFieldsFromSchema(schema)\n },\n getNestedFields(name: string) {\n return getFieldsFromSchema(getNestedSchema(schema, name))\n },\n }\n}\n\nexport const yupForm = (\n schema: AnyObjectSchema,\n schemaOptions = {},\n resolverOptions = {}\n) => {\n return {\n schema,\n resolver: yupResolver(schema, schemaOptions, resolverOptions),\n fieldResolver: yupFieldResolver(schema),\n }\n}\n","import {\n createForm,\n CreateFormProps,\n FormProps,\n WithFields,\n} from '@saas-ui/forms'\nimport { yupResolver } from './yup-resolver'\nimport * as yup from 'yup'\nimport React from 'react'\ntype ResolverArgs = Parameters<typeof yupResolver>\n\nexport interface CreateYupFormProps<FieldDefs>\n extends CreateFormProps<FieldDefs> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport const createYupForm = <FieldDefs>(\n options?: CreateYupFormProps<FieldDefs>\n) => {\n return createForm({\n resolver: (schema) =>\n yupResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TSchema extends yup.AnyObjectSchema = yup.AnyObjectSchema,\n TContext extends object = object\n >(\n props: WithFields<\n FormProps<yup.InferType<TSchema>, TContext, TSchema>,\n FieldDefs\n >\n ) => React.ReactElement\n}\n"]}
package/dist/zod/index.d.ts CHANGED
@@ -2,6 +2,11 @@ import * as _saas_ui_forms from '@saas-ui/forms';
2
2
  import { FieldProps, FormProps, CreateFormProps } from '@saas-ui/forms';
3
3
  import * as z from 'zod';
4
4
  import { z as z$1 } from 'zod';
5
+ import * as react_hook_form from 'react-hook-form';
6
+ import * as _chakra_ui_checkbox_dist_checkbox from '@chakra-ui/checkbox/dist/checkbox';
7
+ import * as _chakra_ui_switch_dist_switch from '@chakra-ui/switch/dist/switch';
8
+ import * as _chakra_ui_textarea_dist_textarea from '@chakra-ui/textarea/dist/textarea';
9
+ import * as react from 'react';
5
10
  import { zodResolver } from '@hookform/resolvers/zod';
6
11
  export { zodResolver } from '@hookform/resolvers/zod';
7
12
 
@@ -18,8 +23,8 @@ type Options = {
18
23
  declare const getFieldsFromSchema: (schema: z.ZodTypeAny) => FieldProps[];
19
24
  declare const getNestedSchema: (schema: z.ZodTypeAny, path: string) => any;
20
25
  declare const zodFieldResolver: <T extends z.ZodTypeAny>(schema: T) => {
21
- getFields(): FieldProps<_saas_ui_forms.FieldValues, string>[];
22
- getNestedFields(name: string): FieldProps<_saas_ui_forms.FieldValues, string>[];
26
+ getFields(): FieldProps<_saas_ui_forms.FieldValues>[];
27
+ getNestedFields(name: string): FieldProps<_saas_ui_forms.FieldValues>[];
23
28
  };
24
29
  interface ZodMeta {
25
30
  label: string;
@@ -29,10 +34,98 @@ declare const zodMeta: (meta: ZodMeta) => string;
29
34
  declare const zodParseMeta: (meta: string) => any;
30
35
 
31
36
  type ResolverArgs = Parameters<typeof zodResolver>;
32
- interface CreateZodFormProps extends CreateFormProps {
37
+ interface CreateZodFormProps<FieldDefs> extends CreateFormProps<FieldDefs> {
33
38
  schemaOptions?: ResolverArgs[1];
34
39
  resolverOptions?: ResolverArgs[2];
35
40
  }
36
- declare const createZodForm: (options?: CreateZodFormProps) => <TSchema extends z$1.AnyZodObject = z$1.AnyZodObject, TContext extends object = object>(props: FormProps<z$1.TypeOf<TSchema>, TContext, TSchema>) => React.ReactElement;
41
+ declare const createZodForm: <FieldDefs>(options?: CreateZodFormProps<FieldDefs> | undefined) => <TSchema extends z$1.AnyZodObject = z$1.AnyZodObject, TContext extends object = object>(props: Omit<FormProps<z$1.TypeOf<TSchema>, TContext, TSchema, _saas_ui_forms.FieldProps<z$1.TypeOf<TSchema>>>, "children"> & {
42
+ children: react.ReactNode | ((props: _saas_ui_forms.FormRenderContext<z$1.TypeOf<TSchema>, TContext, ((FieldDefs extends never ? {
43
+ text: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
44
+ email: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
45
+ url: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
46
+ phone: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
47
+ number: react.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
48
+ password: react.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
49
+ textarea: react.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
50
+ switch: react.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
51
+ select: react.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
52
+ checkbox: react.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
53
+ radio: react.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
54
+ pin: react.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
55
+ 'native-select': react.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
56
+ } : Omit<{
57
+ text: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
58
+ email: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
59
+ url: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
60
+ phone: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
61
+ number: react.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
62
+ password: react.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
63
+ textarea: react.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
64
+ switch: react.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
65
+ select: react.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
66
+ checkbox: react.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
67
+ radio: react.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
68
+ pin: react.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
69
+ 'native-select': react.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
70
+ }, keyof FieldDefs> & FieldDefs) extends infer T ? { [K in keyof T]: (FieldDefs extends never ? {
71
+ text: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
72
+ email: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
73
+ url: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
74
+ phone: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
75
+ number: react.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
76
+ password: react.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
77
+ textarea: react.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
78
+ switch: react.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
79
+ select: react.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
80
+ checkbox: react.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
81
+ radio: react.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
82
+ pin: react.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
83
+ 'native-select': react.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
84
+ } : Omit<{
85
+ text: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
86
+ email: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
87
+ url: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
88
+ phone: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
89
+ number: react.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
90
+ password: react.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
91
+ textarea: react.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
92
+ switch: react.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
93
+ select: react.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
94
+ checkbox: react.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
95
+ radio: react.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
96
+ pin: react.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
97
+ 'native-select': react.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
98
+ }, keyof FieldDefs> & FieldDefs)[K] extends react.FC<infer Props> ? {
99
+ type?: K | undefined;
100
+ } & Omit<Props, keyof _saas_ui_forms.BaseFieldProps<TFieldValues, react_hook_form.Path<TFieldValues>>> & _saas_ui_forms.BaseFieldProps<z$1.TypeOf<TSchema>, react_hook_form.Path<z$1.TypeOf<TSchema>>> : never; } : never)[keyof (FieldDefs extends never ? {
101
+ text: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
102
+ email: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
103
+ url: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
104
+ phone: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
105
+ number: react.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
106
+ password: react.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
107
+ textarea: react.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
108
+ switch: react.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
109
+ select: react.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
110
+ checkbox: react.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
111
+ radio: react.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
112
+ pin: react.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
113
+ 'native-select': react.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
114
+ } : Omit<{
115
+ text: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
116
+ email: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
117
+ url: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
118
+ phone: react.FC<_saas_ui_forms.InputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
119
+ number: react.FC<_saas_ui_forms.NumberInputFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
120
+ password: react.FC<_saas_ui_forms.PasswordInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
121
+ textarea: react.FC<_chakra_ui_textarea_dist_textarea.TextareaProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
122
+ switch: react.FC<_chakra_ui_switch_dist_switch.SwitchProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
123
+ select: react.FC<_saas_ui_forms.SelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
124
+ checkbox: react.FC<_chakra_ui_checkbox_dist_checkbox.CheckboxProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
125
+ radio: react.FC<_saas_ui_forms.RadioInputProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
126
+ pin: react.FC<_saas_ui_forms.PinFieldProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
127
+ 'native-select': react.FC<_saas_ui_forms.NativeSelectProps & _saas_ui_forms.BaseFieldProps<_saas_ui_forms.FieldValues, string>>;
128
+ }, keyof FieldDefs> & FieldDefs)]>) => react.ReactNode);
129
+ }) => React.ReactElement;
37
130
 
38
131
  export { Options, ZodMeta, createZodForm, getFieldsFromSchema, getNestedSchema, zodFieldResolver, zodMeta, zodParseMeta };
package/dist/zod/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts"],"names":[],"mappings":";AACA,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AAUpB,IAAM,UAAU,CAAC,UAAwB;AACvC,UAAQ,MAAM,KAAK,UAAU;AAAA,IAC3B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AA5BrD;AA6BE,UAAO,WAAM,KAAK,UAAX,mBAAkB;AAC3B;AAQO,IAAM,sBAAsB,CAAC,WAAuC;AACzE,QAAM,SAAuB,CAAC;AAE9B,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,KAAK,aAAa,YAAY;AACvC,mBAAe,OAAO,KAAK,KAAK;AAAA,EAClC,WAAW,OAAO,KAAK,aAAa,aAAa;AAC/C,mBAAe,OAAO,KAAK,MAAM;AAAA,EACnC,OAAO;AACL,WAAO;AAAA,EACT;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa;AAE3B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,KAAK,aAAa,YAAY;AACtC,cAAQ,MAAM,eAAe,OAAO,WAAW;AAC/C,cAAQ,MAAM,eAAe,OAAO,WAAW;AAAA,IACjD;AAEA,UAAM,OAAO,MAAM,eAAe,aAAa,MAAM,WAAW;AAEhE,WAAO,KAAK;AAAA,MACV;AAAA,MACA,QAAO,6BAAM,UAAS,MAAM,eAAe;AAAA,MAC3C,OAAM,6BAAM,SAAQ,QAAQ,KAAK;AAAA,MACjC,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAsB,SAAiB;AACrE,SAAO,IAAI,OAAO,KAAK,MAAM,GAAG,IAAI;AACtC;AAEO,IAAM,mBAAmB,CAAyB,WAAc;AACrE,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAOO,IAAM,UAAU,CAAC,SAAkB;AACxC,SAAO,KAAK,UAAU,IAAI;AAC5B;AAEO,IAAM,eAAe,CAAC,SAAiB;AAC5C,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,GAAP;AACA,WAAO;AAAA,EACT;AACF;;;ACrGA,SAAS,kBAA8C;AAWhD,IAAM,gBAAgB,CAAC,YAAiC;AAC7D,SAAO,WAA2B;AAAA,IAChC,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAMH","sourcesContent":["import * as z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { get } from '@chakra-ui/utils'\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { zodResolver }\n\nexport type Options = {\n min?: number\n max?: number\n}\n\nconst getType = (field: z.ZodTypeAny) => {\n switch (field._def.typeName) {\n case 'ZodArray':\n return 'array'\n case 'ZodObject':\n return 'object'\n case 'ZodNumber':\n return 'number'\n case 'ZodDate':\n return 'date'\n case 'ZodString':\n default:\n return 'text'\n }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n return field._def[name]?.value\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: z.ZodTypeAny): FieldProps[] => {\n const fields: FieldProps[] = []\n\n let schemaFields: Record<string, any> = {}\n if (schema._def.typeName === 'ZodArray') {\n schemaFields = schema._def.type.shape\n } else if (schema._def.typeName === 'ZodObject') {\n schemaFields = schema._def.shape()\n } else {\n return fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field._def.typeName === 'ZodArray') {\n options.min = getArrayOption(field, 'minLength')\n options.max = getArrayOption(field, 'maxLength')\n }\n\n const meta = field.description && zodParseMeta(field.description)\n\n fields.push({\n name,\n label: meta?.label || field.description || name,\n type: meta?.type || getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: z.ZodTypeAny, path: string) => {\n return get(schema._def.shape(), path)\n}\n\nexport const zodFieldResolver = <T extends z.ZodTypeAny>(schema: T) => {\n return {\n getFields() {\n return getFieldsFromSchema(schema)\n },\n getNestedFields(name: string) {\n return getFieldsFromSchema(getNestedSchema(schema, name))\n },\n }\n}\n\nexport interface ZodMeta {\n label: string\n type?: string\n}\n\nexport const zodMeta = (meta: ZodMeta) => {\n return JSON.stringify(meta)\n}\n\nexport const zodParseMeta = (meta: string) => {\n try {\n return JSON.parse(meta)\n } catch (e) {\n return meta\n }\n}\n","import { createForm, CreateFormProps, FormProps } from '@saas-ui/forms'\nimport { zodResolver } from './zod-resolver'\nimport { z } from 'zod'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps extends CreateFormProps {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport const createZodForm = (options?: CreateZodFormProps) => {\n return createForm<z.AnyZodObject>({\n resolver: (schema) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TSchema extends z.AnyZodObject = z.AnyZodObject,\n TContext extends object = object\n >(\n props: FormProps<z.infer<TSchema>, TContext, TSchema>\n ) => React.ReactElement\n}\n"]}
1
+ {"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts"],"names":[],"mappings":";AACA,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AAUpB,IAAM,UAAU,CAAC,UAAwB;AACvC,UAAQ,MAAM,KAAK,UAAU;AAAA,IAC3B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AA5BrD;AA6BE,UAAO,WAAM,KAAK,IAAI,MAAf,mBAAkB;AAC3B;AAQO,IAAM,sBAAsB,CAAC,WAAuC;AACzE,QAAM,SAAuB,CAAC;AAE9B,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,KAAK,aAAa,YAAY;AACvC,mBAAe,OAAO,KAAK,KAAK;AAAA,EAClC,WAAW,OAAO,KAAK,aAAa,aAAa;AAC/C,mBAAe,OAAO,KAAK,MAAM;AAAA,EACnC,OAAO;AACL,WAAO;AAAA,EACT;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa,IAAI;AAE/B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,KAAK,aAAa,YAAY;AACtC,cAAQ,MAAM,eAAe,OAAO,WAAW;AAC/C,cAAQ,MAAM,eAAe,OAAO,WAAW;AAAA,IACjD;AAEA,UAAM,OAAO,MAAM,eAAe,aAAa,MAAM,WAAW;AAEhE,WAAO,KAAK;AAAA,MACV;AAAA,MACA,QAAO,6BAAM,UAAS,MAAM,eAAe;AAAA,MAC3C,OAAM,6BAAM,SAAQ,QAAQ,KAAK;AAAA,MACjC,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAsB,SAAiB;AACrE,SAAO,IAAI,OAAO,KAAK,MAAM,GAAG,IAAI;AACtC;AAEO,IAAM,mBAAmB,CAAyB,WAAc;AACrE,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAOO,IAAM,UAAU,CAAC,SAAkB;AACxC,SAAO,KAAK,UAAU,IAAI;AAC5B;AAEO,IAAM,eAAe,CAAC,SAAiB;AAC5C,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,GAAP;AACA,WAAO;AAAA,EACT;AACF;;;ACrGA;AAAA,EACE;AAAA,OAIK;AAYA,IAAM,gBAAgB,CAC3B,YACG;AACH,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAMH","sourcesContent":["import * as z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { get } from '@chakra-ui/utils'\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { zodResolver }\n\nexport type Options = {\n min?: number\n max?: number\n}\n\nconst getType = (field: z.ZodTypeAny) => {\n switch (field._def.typeName) {\n case 'ZodArray':\n return 'array'\n case 'ZodObject':\n return 'object'\n case 'ZodNumber':\n return 'number'\n case 'ZodDate':\n return 'date'\n case 'ZodString':\n default:\n return 'text'\n }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n return field._def[name]?.value\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: z.ZodTypeAny): FieldProps[] => {\n const fields: FieldProps[] = []\n\n let schemaFields: Record<string, any> = {}\n if (schema._def.typeName === 'ZodArray') {\n schemaFields = schema._def.type.shape\n } else if (schema._def.typeName === 'ZodObject') {\n schemaFields = schema._def.shape()\n } else {\n return fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field._def.typeName === 'ZodArray') {\n options.min = getArrayOption(field, 'minLength')\n options.max = getArrayOption(field, 'maxLength')\n }\n\n const meta = field.description && zodParseMeta(field.description)\n\n fields.push({\n name,\n label: meta?.label || field.description || name,\n type: meta?.type || getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: z.ZodTypeAny, path: string) => {\n return get(schema._def.shape(), path)\n}\n\nexport const zodFieldResolver = <T extends z.ZodTypeAny>(schema: T) => {\n return {\n getFields() {\n return getFieldsFromSchema(schema)\n },\n getNestedFields(name: string) {\n return getFieldsFromSchema(getNestedSchema(schema, name))\n },\n }\n}\n\nexport interface ZodMeta {\n label: string\n type?: string\n}\n\nexport const zodMeta = (meta: ZodMeta) => {\n return JSON.stringify(meta)\n}\n\nexport const zodParseMeta = (meta: string) => {\n try {\n return JSON.parse(meta)\n } catch (e) {\n return meta\n }\n}\n","import {\n createForm,\n CreateFormProps,\n WithFields,\n FormProps,\n} from '@saas-ui/forms'\nimport { zodResolver } from './zod-resolver'\nimport { z } from 'zod'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps<FieldDefs>\n extends CreateFormProps<FieldDefs> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport const createZodForm = <FieldDefs>(\n options?: CreateZodFormProps<FieldDefs>\n) => {\n return createForm({\n resolver: (schema) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TSchema extends z.AnyZodObject = z.AnyZodObject,\n TContext extends object = object\n >(\n props: WithFields<FormProps<z.infer<TSchema>, TContext, TSchema>, FieldDefs>\n ) => React.ReactElement\n}\n"]}
package/dist/zod/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts"],"names":[],"mappings":";AACA,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AAUpB,IAAM,UAAU,CAAC,UAAwB;AACvC,UAAQ,MAAM,KAAK,UAAU;AAAA,IAC3B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AA5BrD;AA6BE,UAAO,WAAM,KAAK,UAAX,mBAAkB;AAC3B;AAQO,IAAM,sBAAsB,CAAC,WAAuC;AACzE,QAAM,SAAuB,CAAC;AAE9B,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,KAAK,aAAa,YAAY;AACvC,mBAAe,OAAO,KAAK,KAAK;AAAA,EAClC,WAAW,OAAO,KAAK,aAAa,aAAa;AAC/C,mBAAe,OAAO,KAAK,MAAM;AAAA,EACnC,OAAO;AACL,WAAO;AAAA,EACT;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa;AAE3B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,KAAK,aAAa,YAAY;AACtC,cAAQ,MAAM,eAAe,OAAO,WAAW;AAC/C,cAAQ,MAAM,eAAe,OAAO,WAAW;AAAA,IACjD;AAEA,UAAM,OAAO,MAAM,eAAe,aAAa,MAAM,WAAW;AAEhE,WAAO,KAAK;AAAA,MACV;AAAA,MACA,QAAO,6BAAM,UAAS,MAAM,eAAe;AAAA,MAC3C,OAAM,6BAAM,SAAQ,QAAQ,KAAK;AAAA,MACjC,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAsB,SAAiB;AACrE,SAAO,IAAI,OAAO,KAAK,MAAM,GAAG,IAAI;AACtC;AAEO,IAAM,mBAAmB,CAAyB,WAAc;AACrE,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAOO,IAAM,UAAU,CAAC,SAAkB;AACxC,SAAO,KAAK,UAAU,IAAI;AAC5B;AAEO,IAAM,eAAe,CAAC,SAAiB;AAC5C,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,GAAP;AACA,WAAO;AAAA,EACT;AACF;;;ACrGA,SAAS,kBAA8C;AAWhD,IAAM,gBAAgB,CAAC,YAAiC;AAC7D,SAAO,WAA2B;AAAA,IAChC,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAMH","sourcesContent":["import * as z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { get } from '@chakra-ui/utils'\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { zodResolver }\n\nexport type Options = {\n min?: number\n max?: number\n}\n\nconst getType = (field: z.ZodTypeAny) => {\n switch (field._def.typeName) {\n case 'ZodArray':\n return 'array'\n case 'ZodObject':\n return 'object'\n case 'ZodNumber':\n return 'number'\n case 'ZodDate':\n return 'date'\n case 'ZodString':\n default:\n return 'text'\n }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n return field._def[name]?.value\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: z.ZodTypeAny): FieldProps[] => {\n const fields: FieldProps[] = []\n\n let schemaFields: Record<string, any> = {}\n if (schema._def.typeName === 'ZodArray') {\n schemaFields = schema._def.type.shape\n } else if (schema._def.typeName === 'ZodObject') {\n schemaFields = schema._def.shape()\n } else {\n return fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field._def.typeName === 'ZodArray') {\n options.min = getArrayOption(field, 'minLength')\n options.max = getArrayOption(field, 'maxLength')\n }\n\n const meta = field.description && zodParseMeta(field.description)\n\n fields.push({\n name,\n label: meta?.label || field.description || name,\n type: meta?.type || getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: z.ZodTypeAny, path: string) => {\n return get(schema._def.shape(), path)\n}\n\nexport const zodFieldResolver = <T extends z.ZodTypeAny>(schema: T) => {\n return {\n getFields() {\n return getFieldsFromSchema(schema)\n },\n getNestedFields(name: string) {\n return getFieldsFromSchema(getNestedSchema(schema, name))\n },\n }\n}\n\nexport interface ZodMeta {\n label: string\n type?: string\n}\n\nexport const zodMeta = (meta: ZodMeta) => {\n return JSON.stringify(meta)\n}\n\nexport const zodParseMeta = (meta: string) => {\n try {\n return JSON.parse(meta)\n } catch (e) {\n return meta\n }\n}\n","import { createForm, CreateFormProps, FormProps } from '@saas-ui/forms'\nimport { zodResolver } from './zod-resolver'\nimport { z } from 'zod'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps extends CreateFormProps {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport const createZodForm = (options?: CreateZodFormProps) => {\n return createForm<z.AnyZodObject>({\n resolver: (schema) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TSchema extends z.AnyZodObject = z.AnyZodObject,\n TContext extends object = object\n >(\n props: FormProps<z.infer<TSchema>, TContext, TSchema>\n ) => React.ReactElement\n}\n"]}
1
+ {"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts"],"names":[],"mappings":";AACA,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AAUpB,IAAM,UAAU,CAAC,UAAwB;AACvC,UAAQ,MAAM,KAAK,UAAU;AAAA,IAC3B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AA5BrD;AA6BE,UAAO,WAAM,KAAK,IAAI,MAAf,mBAAkB;AAC3B;AAQO,IAAM,sBAAsB,CAAC,WAAuC;AACzE,QAAM,SAAuB,CAAC;AAE9B,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,KAAK,aAAa,YAAY;AACvC,mBAAe,OAAO,KAAK,KAAK;AAAA,EAClC,WAAW,OAAO,KAAK,aAAa,aAAa;AAC/C,mBAAe,OAAO,KAAK,MAAM;AAAA,EACnC,OAAO;AACL,WAAO;AAAA,EACT;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa,IAAI;AAE/B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,KAAK,aAAa,YAAY;AACtC,cAAQ,MAAM,eAAe,OAAO,WAAW;AAC/C,cAAQ,MAAM,eAAe,OAAO,WAAW;AAAA,IACjD;AAEA,UAAM,OAAO,MAAM,eAAe,aAAa,MAAM,WAAW;AAEhE,WAAO,KAAK;AAAA,MACV;AAAA,MACA,QAAO,6BAAM,UAAS,MAAM,eAAe;AAAA,MAC3C,OAAM,6BAAM,SAAQ,QAAQ,KAAK;AAAA,MACjC,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAsB,SAAiB;AACrE,SAAO,IAAI,OAAO,KAAK,MAAM,GAAG,IAAI;AACtC;AAEO,IAAM,mBAAmB,CAAyB,WAAc;AACrE,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAOO,IAAM,UAAU,CAAC,SAAkB;AACxC,SAAO,KAAK,UAAU,IAAI;AAC5B;AAEO,IAAM,eAAe,CAAC,SAAiB;AAC5C,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,GAAP;AACA,WAAO;AAAA,EACT;AACF;;;ACrGA;AAAA,EACE;AAAA,OAIK;AAYA,IAAM,gBAAgB,CAC3B,YACG;AACH,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAMH","sourcesContent":["import * as z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { get } from '@chakra-ui/utils'\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { zodResolver }\n\nexport type Options = {\n min?: number\n max?: number\n}\n\nconst getType = (field: z.ZodTypeAny) => {\n switch (field._def.typeName) {\n case 'ZodArray':\n return 'array'\n case 'ZodObject':\n return 'object'\n case 'ZodNumber':\n return 'number'\n case 'ZodDate':\n return 'date'\n case 'ZodString':\n default:\n return 'text'\n }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n return field._def[name]?.value\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: z.ZodTypeAny): FieldProps[] => {\n const fields: FieldProps[] = []\n\n let schemaFields: Record<string, any> = {}\n if (schema._def.typeName === 'ZodArray') {\n schemaFields = schema._def.type.shape\n } else if (schema._def.typeName === 'ZodObject') {\n schemaFields = schema._def.shape()\n } else {\n return fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field._def.typeName === 'ZodArray') {\n options.min = getArrayOption(field, 'minLength')\n options.max = getArrayOption(field, 'maxLength')\n }\n\n const meta = field.description && zodParseMeta(field.description)\n\n fields.push({\n name,\n label: meta?.label || field.description || name,\n type: meta?.type || getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: z.ZodTypeAny, path: string) => {\n return get(schema._def.shape(), path)\n}\n\nexport const zodFieldResolver = <T extends z.ZodTypeAny>(schema: T) => {\n return {\n getFields() {\n return getFieldsFromSchema(schema)\n },\n getNestedFields(name: string) {\n return getFieldsFromSchema(getNestedSchema(schema, name))\n },\n }\n}\n\nexport interface ZodMeta {\n label: string\n type?: string\n}\n\nexport const zodMeta = (meta: ZodMeta) => {\n return JSON.stringify(meta)\n}\n\nexport const zodParseMeta = (meta: string) => {\n try {\n return JSON.parse(meta)\n } catch (e) {\n return meta\n }\n}\n","import {\n createForm,\n CreateFormProps,\n WithFields,\n FormProps,\n} from '@saas-ui/forms'\nimport { zodResolver } from './zod-resolver'\nimport { z } from 'zod'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps<FieldDefs>\n extends CreateFormProps<FieldDefs> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport const createZodForm = <FieldDefs>(\n options?: CreateZodFormProps<FieldDefs>\n) => {\n return createForm({\n resolver: (schema) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n ...options,\n }) as <\n TSchema extends z.AnyZodObject = z.AnyZodObject,\n TContext extends object = object\n >(\n props: WithFields<FormProps<z.infer<TSchema>, TContext, TSchema>, FieldDefs>\n ) => React.ReactElement\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saas-ui/forms",
3
- "version": "2.0.0-next.2",
3
+ "version": "2.0.0-next.5",
4
4
  "description": "Fully functional forms for Chakra UI.",
5
5
  "source": "src/index.ts",
6
6
  "exports": {
@@ -13,6 +13,7 @@
13
13
  },
14
14
  "./yup": {
15
15
  "require": "./dist/yup/index.js",
16
+ "types": "./dist/yup/index.d.ts",
16
17
  "import": "./dist/yup/index.mjs"
17
18
  },
18
19
  "./yup/src": {
@@ -20,6 +21,7 @@
20
21
  },
21
22
  "./zod": {
22
23
  "require": "./dist/zod/index.js",
24
+ "types": "./dist/zod/index.d.ts",
23
25
  "import": "./dist/zod/index.mjs"
24
26
  },
25
27
  "./zod/src": {
@@ -27,6 +29,7 @@
27
29
  },
28
30
  "./ajv": {
29
31
  "require": "./dist/ajv/index.js",
32
+ "types": "./dist/zod/index.d.ts",
30
33
  "import": "./dist/ajv/index.mjs"
31
34
  },
32
35
  "./ajv/src": {
@@ -83,10 +86,9 @@
83
86
  "url": "https://storybook.saas-ui.dev"
84
87
  },
85
88
  "dependencies": {
86
- "@chakra-ui/icons": "^2.0.16",
87
89
  "@chakra-ui/react-utils": "^2.0.11",
88
90
  "@chakra-ui/utils": "^2.0.14",
89
- "@saas-ui/core": "2.0.0-next.2",
91
+ "@saas-ui/core": "2.0.0-next.5",
90
92
  "react-hook-form": "^7.43.0"
91
93
  },
92
94
  "peerDependencies": {
package/src/array-field.tsx CHANGED
@@ -7,11 +7,11 @@ import {
7
7
  Button,
8
8
  ButtonProps,
9
9
  } from '@chakra-ui/react'
10
- import { __DEV__ } from '@chakra-ui/utils'
11
10
  import { AddIcon, MinusIcon } from '@chakra-ui/icons'
12
11
 
13
12
  import { FormLayout, FormLayoutProps } from './layout'
14
- import { BaseField, FieldProps } from './field'
13
+ import { BaseField } from './base-field'
14
+ import { BaseFieldProps } from './types'
15
15
 
16
16
  import { mapNestedFields } from './utils'
17
17
 
@@ -53,7 +53,11 @@ interface ArrayFieldRowProps extends FormLayoutProps {
53
53
  */
54
54
  children: React.ReactNode
55
55
  }
56
-
56
+ /**
57
+ * Render prop component, to get access to the internal fields state. Must be a child of ArrayFieldContainer.
58
+ *
59
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
60
+ */
57
61
  export const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({
58
62
  children,
59
63
  index,
@@ -67,9 +71,7 @@ export const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({
67
71
  )
68
72
  }
69
73
 
70
- if (__DEV__) {
71
- ArrayFieldRow.displayName = 'ArrayFieldRow'
72
- }
74
+ ArrayFieldRow.displayName = 'ArrayFieldRow'
73
75
 
74
76
  export interface ArrayFieldRowFieldsProps extends FormLayoutProps {
75
77
  /**
@@ -85,7 +87,11 @@ export interface ArrayFieldRowFieldsProps extends FormLayoutProps {
85
87
  */
86
88
  children: React.ReactNode
87
89
  }
88
-
90
+ /**
91
+ * Add the name prefix to the fields and acts as a horizontal form layout by default.
92
+ *
93
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
94
+ */
89
95
  export const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({
90
96
  children,
91
97
  ...layoutProps
@@ -98,13 +104,17 @@ export const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({
98
104
  )
99
105
  }
100
106
 
101
- if (__DEV__) {
102
- ArrayFieldRowFields.displayName = 'ArrayFieldRowFields'
103
- }
107
+ ArrayFieldRowFields.displayName = 'ArrayFieldRowFields'
104
108
 
109
+ /**
110
+ * The row container component providers row context.
111
+ *
112
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
113
+ */
105
114
  export const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({
106
115
  children,
107
116
  index,
117
+ ...rest
108
118
  }) => {
109
119
  const context = useArrayFieldRow({ index })
110
120
 
@@ -118,15 +128,20 @@ export const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({
118
128
 
119
129
  return (
120
130
  <ArrayFieldRowProvider value={context}>
121
- <chakra.div __css={styles}>{children}</chakra.div>
131
+ <chakra.div {...rest} __css={styles}>
132
+ {children}
133
+ </chakra.div>
122
134
  </ArrayFieldRowProvider>
123
135
  )
124
136
  }
125
137
 
126
- if (__DEV__) {
127
- ArrayFieldRowContainer.displayName = 'ArrayFieldRowContainer'
128
- }
138
+ ArrayFieldRowContainer.displayName = 'ArrayFieldRowContainer'
129
139
 
140
+ /**
141
+ * The default remove button.
142
+ *
143
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
144
+ */
130
145
  export const ArrayFieldRemoveButton: React.FC<ArrayFieldButtonProps> = (
131
146
  props
132
147
  ) => {
@@ -137,10 +152,13 @@ export const ArrayFieldRemoveButton: React.FC<ArrayFieldButtonProps> = (
137
152
  )
138
153
  }
139
154
 
140
- if (__DEV__) {
141
- ArrayFieldRemoveButton.displayName = 'ArrayFieldRemoveButton'
142
- }
155
+ ArrayFieldRemoveButton.displayName = 'ArrayFieldRemoveButton'
143
156
 
157
+ /**
158
+ * The default add button.
159
+ *
160
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
161
+ */
144
162
  export const ArrayFieldAddButton: React.FC<ArrayFieldButtonProps> = (props) => {
145
163
  return (
146
164
  <Button
@@ -154,14 +172,17 @@ export const ArrayFieldAddButton: React.FC<ArrayFieldButtonProps> = (props) => {
154
172
  )
155
173
  }
156
174
 
157
- if (__DEV__) {
158
- ArrayFieldAddButton.displayName = 'ArrayFieldAddButton'
159
- }
175
+ ArrayFieldAddButton.displayName = 'ArrayFieldAddButton'
160
176
 
161
177
  export interface ArrayFieldProps
162
178
  extends ArrayFieldOptions,
163
- Omit<FieldProps, 'defaultValue'> {}
179
+ Omit<BaseFieldProps, 'defaultValue'> {}
164
180
 
181
+ /**
182
+ * The wrapper component that composes the default ArrayField functionality.
183
+ *
184
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
185
+ */
165
186
  export const ArrayField = forwardRef(
166
187
  (props: ArrayFieldProps, ref: React.ForwardedRef<UseArrayFieldReturn>) => {
167
188
  const { children, ...containerProps } = props
@@ -191,9 +212,7 @@ export const ArrayField = forwardRef(
191
212
  displayName: string
192
213
  }
193
214
 
194
- if (__DEV__) {
195
- ArrayField.displayName = 'ArrayField'
196
- }
215
+ ArrayField.displayName = 'ArrayField'
197
216
 
198
217
  export interface ArrayFieldRowsProps {
199
218
  children: (fields: ArrayField[]) => React.ReactElement | null
@@ -206,10 +225,13 @@ export const ArrayFieldRows = ({
206
225
  return children(fields)
207
226
  }
208
227
 
209
- if (__DEV__) {
210
- ArrayFieldRows.displayName = 'ArrayFieldRows'
211
- }
228
+ ArrayFieldRows.displayName = 'ArrayFieldRows'
212
229
 
230
+ /**
231
+ * The container component provides context and state management.
232
+ *
233
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
234
+ */
213
235
  export const ArrayFieldContainer = React.forwardRef(
214
236
  (
215
237
  {
@@ -244,6 +266,4 @@ export const ArrayFieldContainer = React.forwardRef(
244
266
  }
245
267
  )
246
268
 
247
- if (__DEV__) {
248
- ArrayFieldContainer.displayName = 'ArrayFieldContainer'
249
- }
269
+ ArrayFieldContainer.displayName = 'ArrayFieldContainer'
package/src/auto-form.tsx CHANGED
@@ -4,7 +4,7 @@ import { forwardRef } from '@chakra-ui/react'
4
4
 
5
5
  import { Form, FormProps } from './form'
6
6
  import { FormLayout } from './layout'
7
- import { Fields } from './fields'
7
+ import { AutoFields } from './fields'
8
8
  import { SubmitButton } from './submit-button'
9
9
 
10
10
  interface AutoFormOptions {
@@ -32,7 +32,11 @@ export interface AutoFormProps<
32
32
  AutoFormOptions {
33
33
  children?: React.ReactNode
34
34
  }
35
-
35
+ /**
36
+ * The wrapper component that manages context and state.
37
+ *
38
+ * @see Docs https://saas-ui.dev/docs/components/forms/auto-form
39
+ */
36
40
  export const AutoForm = forwardRef(
37
41
  <
38
42
  TFieldValues extends FieldValues = FieldValues,
@@ -52,7 +56,7 @@ export const AutoForm = forwardRef(
52
56
  return (
53
57
  <Form {...rest} schema={schema} ref={ref}>
54
58
  <FormLayout>
55
- {<Fields schema={schema} fieldResolver={fieldResolver} />}
59
+ {<AutoFields schema={schema} fieldResolver={fieldResolver} />}
56
60
  {submitLabel && <SubmitButton>{submitLabel}</SubmitButton>}
57
61
  {children}
58
62
  </FormLayout>