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

Sign up to get free protection for your applications and to get access to all the features.
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>