@saas-ui/forms 2.0.0-next.3 → 2.0.0-next.6
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +43 -0
- package/README.md +53 -6
- package/dist/ajv/index.d.ts +358 -11
- package/dist/ajv/index.js +7 -9
- package/dist/ajv/index.js.map +1 -1
- package/dist/ajv/index.mjs +7 -10
- package/dist/ajv/index.mjs.map +1 -1
- package/dist/index.d.ts +448 -247
- package/dist/index.js +707 -682
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +691 -666
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.ts +580 -21
- package/dist/yup/index.js +6 -10
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs +4 -8
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.d.ts +580 -11
- package/dist/zod/index.js +5 -0
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs +5 -1
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +19 -10
- package/src/array-field.tsx +82 -45
- package/src/auto-form.tsx +7 -3
- package/src/base-field.tsx +54 -0
- package/src/create-field.tsx +144 -0
- package/src/create-form.tsx +54 -0
- package/src/default-fields.tsx +163 -0
- package/src/display-field.tsx +9 -11
- package/src/display-if.tsx +20 -13
- package/src/field-resolver.ts +10 -8
- package/src/field.tsx +18 -445
- package/src/fields-context.tsx +23 -0
- package/src/fields.tsx +34 -21
- package/src/form-context.tsx +84 -0
- package/src/form.tsx +69 -52
- package/src/index.ts +44 -4
- package/src/input-right-button/input-right-button.stories.tsx +1 -1
- package/src/input-right-button/input-right-button.tsx +0 -2
- package/src/layout.tsx +16 -11
- package/src/number-input/number-input.tsx +9 -5
- package/src/object-field.tsx +13 -8
- package/src/password-input/password-input.stories.tsx +23 -2
- package/src/password-input/password-input.tsx +6 -6
- package/src/pin-input/pin-input.tsx +1 -5
- package/src/radio/radio-input.stories.tsx +1 -1
- package/src/radio/radio-input.tsx +12 -10
- package/src/select/native-select.tsx +1 -4
- package/src/select/select-context.tsx +130 -0
- package/src/select/select.stories.tsx +116 -85
- package/src/select/select.test.tsx +1 -1
- package/src/select/select.tsx +160 -146
- package/src/step-form.tsx +29 -11
- package/src/submit-button.tsx +5 -1
- package/src/types.ts +144 -0
- package/src/use-array-field.tsx +9 -3
- package/src/utils.ts +23 -1
- package/src/watch-field.tsx +2 -6
- /package/src/radio/{radio.test.tsx → radio-input.test.tsx} +0 -0
package/dist/yup/index.js
CHANGED
@@ -1,8 +1,9 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
|
-
var yup$
|
3
|
+
var yup$2 = require('yup');
|
4
4
|
var yup = require('@hookform/resolvers/yup');
|
5
5
|
var forms = require('@saas-ui/forms');
|
6
|
+
var yup$1 = require('@saas-ui/forms/yup');
|
6
7
|
|
7
8
|
// yup/src/yup-resolver.ts
|
8
9
|
var getType = (field) => {
|
@@ -56,7 +57,7 @@ var getFieldsFromSchema = (schema) => {
|
|
56
57
|
return fields;
|
57
58
|
};
|
58
59
|
var getNestedSchema = (schema, path) => {
|
59
|
-
return yup$
|
60
|
+
return yup$2.reach(schema, path);
|
60
61
|
};
|
61
62
|
var yupFieldResolver = (schema) => {
|
62
63
|
return {
|
@@ -68,28 +69,23 @@ var yupFieldResolver = (schema) => {
|
|
68
69
|
}
|
69
70
|
};
|
70
71
|
};
|
71
|
-
var yupForm = (schema, schemaOptions = {}, resolverOptions = {}) => {
|
72
|
-
return {
|
73
|
-
schema,
|
74
|
-
resolver: yup.yupResolver(schema, schemaOptions, resolverOptions),
|
75
|
-
fieldResolver: yupFieldResolver(schema)
|
76
|
-
};
|
77
|
-
};
|
78
72
|
var createYupForm = (options) => {
|
79
73
|
return forms.createForm({
|
80
74
|
resolver: (schema) => yup.yupResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
|
75
|
+
fieldResolver: yupFieldResolver,
|
81
76
|
...options
|
82
77
|
});
|
83
78
|
};
|
79
|
+
var Form = yup$1.createYupForm();
|
84
80
|
|
85
81
|
Object.defineProperty(exports, 'yupResolver', {
|
86
82
|
enumerable: true,
|
87
83
|
get: function () { return yup.yupResolver; }
|
88
84
|
});
|
85
|
+
exports.Form = Form;
|
89
86
|
exports.createYupForm = createYupForm;
|
90
87
|
exports.getFieldsFromSchema = getFieldsFromSchema;
|
91
88
|
exports.getNestedSchema = getNestedSchema;
|
92
89
|
exports.yupFieldResolver = yupFieldResolver;
|
93
|
-
exports.yupForm = yupForm;
|
94
90
|
//# sourceMappingURL=out.js.map
|
95
91
|
//# sourceMappingURL=index.js.map
|
package/dist/yup/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../yup/src/yup-resolver.ts","../../yup/src/create-yup-form.
|
1
|
+
{"version":3,"sources":["../../yup/src/yup-resolver.ts","../../yup/src/create-yup-form.ts","../../yup/src/index.ts"],"names":["createYupForm"],"mappings":";AAAA,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAa5B,IAAM,UAAU,CAAC,UAAe;AAdhC;AAeE,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;AAlCrD;AAmCE,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,mBAAqC,CAAC,WAA4B;AAC7E,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;;;ACzFA;AAAA,EACE;AAAA,OAIK;AAaA,IAAM,gBAAgB,CAC3B,YACG;AACH,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAWH;;;AClCA,SAAS,iBAAAA,sBAAqB;AAEvB,IAAM,OAAOA,eAAc","sourcesContent":["import { reach } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps, GetFieldResolver } from '@saas-ui/forms'\nimport { AnyObjectSchema } from './types'\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) as AnyObjectSchema\n}\n\nexport const yupFieldResolver: GetFieldResolver = (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","import {\n createForm,\n CreateFormProps,\n FormProps,\n WithFields,\n} from '@saas-ui/forms'\nimport { yupFieldResolver, yupResolver } from './yup-resolver'\nimport { ObjectSchema, InferType } from 'yup'\nimport React from 'react'\nimport { AnyObjectSchema } from './types'\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 fieldResolver: yupFieldResolver,\n ...options,\n }) as <\n TSchema extends AnyObjectSchema = AnyObjectSchema,\n TContext extends object = object\n >(\n props: WithFields<\n FormProps<InferType<TSchema>, TContext, TSchema>,\n FieldDefs\n > & {\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n ) => React.ReactElement\n}\n","export * from './yup-resolver'\nexport { createYupForm } from './create-yup-form'\n\nimport { createYupForm } from '@saas-ui/forms/yup'\n\nexport const Form = createYupForm()\n"]}
|
package/dist/yup/index.mjs
CHANGED
@@ -2,6 +2,7 @@ import { reach } from 'yup';
|
|
2
2
|
import { yupResolver } from '@hookform/resolvers/yup';
|
3
3
|
export { yupResolver } from '@hookform/resolvers/yup';
|
4
4
|
import { createForm } from '@saas-ui/forms';
|
5
|
+
import { createYupForm as createYupForm$1 } from '@saas-ui/forms/yup';
|
5
6
|
|
6
7
|
// yup/src/yup-resolver.ts
|
7
8
|
var getType = (field) => {
|
@@ -67,20 +68,15 @@ var yupFieldResolver = (schema) => {
|
|
67
68
|
}
|
68
69
|
};
|
69
70
|
};
|
70
|
-
var yupForm = (schema, schemaOptions = {}, resolverOptions = {}) => {
|
71
|
-
return {
|
72
|
-
schema,
|
73
|
-
resolver: yupResolver(schema, schemaOptions, resolverOptions),
|
74
|
-
fieldResolver: yupFieldResolver(schema)
|
75
|
-
};
|
76
|
-
};
|
77
71
|
var createYupForm = (options) => {
|
78
72
|
return createForm({
|
79
73
|
resolver: (schema) => yupResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
|
74
|
+
fieldResolver: yupFieldResolver,
|
80
75
|
...options
|
81
76
|
});
|
82
77
|
};
|
78
|
+
var Form = createYupForm$1();
|
83
79
|
|
84
|
-
export { createYupForm, getFieldsFromSchema, getNestedSchema, yupFieldResolver
|
80
|
+
export { Form, createYupForm, getFieldsFromSchema, getNestedSchema, yupFieldResolver };
|
85
81
|
//# sourceMappingURL=out.js.map
|
86
82
|
//# sourceMappingURL=index.mjs.map
|
package/dist/yup/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../yup/src/yup-resolver.ts","../../yup/src/create-yup-form.
|
1
|
+
{"version":3,"sources":["../../yup/src/yup-resolver.ts","../../yup/src/create-yup-form.ts","../../yup/src/index.ts"],"names":["createYupForm"],"mappings":";AAAA,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAa5B,IAAM,UAAU,CAAC,UAAe;AAdhC;AAeE,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;AAlCrD;AAmCE,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,mBAAqC,CAAC,WAA4B;AAC7E,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;;;ACzFA;AAAA,EACE;AAAA,OAIK;AAaA,IAAM,gBAAgB,CAC3B,YACG;AACH,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAWH;;;AClCA,SAAS,iBAAAA,sBAAqB;AAEvB,IAAM,OAAOA,eAAc","sourcesContent":["import { reach } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps, GetFieldResolver } from '@saas-ui/forms'\nimport { AnyObjectSchema } from './types'\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) as AnyObjectSchema\n}\n\nexport const yupFieldResolver: GetFieldResolver = (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","import {\n createForm,\n CreateFormProps,\n FormProps,\n WithFields,\n} from '@saas-ui/forms'\nimport { yupFieldResolver, yupResolver } from './yup-resolver'\nimport { ObjectSchema, InferType } from 'yup'\nimport React from 'react'\nimport { AnyObjectSchema } from './types'\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 fieldResolver: yupFieldResolver,\n ...options,\n }) as <\n TSchema extends AnyObjectSchema = AnyObjectSchema,\n TContext extends object = object\n >(\n props: WithFields<\n FormProps<InferType<TSchema>, TContext, TSchema>,\n FieldDefs\n > & {\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n ) => React.ReactElement\n}\n","export * from './yup-resolver'\nexport { createYupForm } from './create-yup-form'\n\nimport { createYupForm } from '@saas-ui/forms/yup'\n\nexport const Form = createYupForm()\n"]}
|