@saas-ui/forms 2.0.0-next.9 → 2.0.0-rc.23
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.
- package/CHANGELOG.md +139 -0
- package/dist/ajv/index.d.ts +15 -350
- package/dist/ajv/index.js.map +1 -1
- package/dist/ajv/index.mjs.map +1 -1
- package/dist/index.d.ts +182 -144
- package/dist/index.js +202 -147
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +202 -148
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.ts +218 -274
- package/dist/yup/index.js +22 -6
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs +20 -5
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.d.ts +246 -303
- package/dist/zod/index.js +16 -1
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs +17 -3
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +20 -6
- package/src/array-field.tsx +6 -3
- package/src/create-form.tsx +33 -19
- package/src/create-step-form.tsx +100 -0
- package/src/form-context.tsx +1 -1
- package/src/form.tsx +12 -10
- package/src/index.ts +20 -6
- package/src/object-field.tsx +22 -5
- package/src/select/select.tsx +2 -2
- package/src/step-form.tsx +52 -70
- package/src/types.ts +8 -3
- package/src/use-step-form.tsx +54 -9
package/dist/zod/index.js
CHANGED
@@ -75,21 +75,36 @@ var zodParseMeta = (meta) => {
|
|
75
75
|
}
|
76
76
|
};
|
77
77
|
var createZodForm = (options) => {
|
78
|
-
|
78
|
+
const ZodForm = forms.createForm({
|
79
79
|
resolver: (schema) => zod.zodResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
|
80
80
|
fieldResolver: zodFieldResolver,
|
81
81
|
...options
|
82
82
|
});
|
83
|
+
ZodForm.displayName = "ZodForm";
|
84
|
+
ZodForm.id = "ZodForm";
|
85
|
+
return ZodForm;
|
86
|
+
};
|
87
|
+
var createZodStepForm = (options) => {
|
88
|
+
const ZodStepForm = forms.createStepForm({
|
89
|
+
resolver: (schema) => zod.zodResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
|
90
|
+
fieldResolver: zodFieldResolver,
|
91
|
+
...options
|
92
|
+
});
|
93
|
+
ZodStepForm.displayName = "ZodStepForm";
|
94
|
+
ZodStepForm.id = "ZodStepForm";
|
95
|
+
return ZodStepForm;
|
83
96
|
};
|
84
97
|
|
85
98
|
// zod/src/index.ts
|
86
99
|
var Form = createZodForm();
|
100
|
+
var StepForm = createZodStepForm();
|
87
101
|
|
88
102
|
Object.defineProperty(exports, 'zodResolver', {
|
89
103
|
enumerable: true,
|
90
104
|
get: function () { return zod.zodResolver; }
|
91
105
|
});
|
92
106
|
exports.Form = Form;
|
107
|
+
exports.StepForm = StepForm;
|
93
108
|
exports.createZodForm = createZodForm;
|
94
109
|
exports.getFieldsFromSchema = getFieldsFromSchema;
|
95
110
|
exports.getNestedSchema = getNestedSchema;
|
package/dist/zod/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../zod/src/index.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,
|
1
|
+
{"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../zod/src/create-zod-step-form.ts","../../zod/src/index.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,OAKK;AAkCA,IAAM,gBAAgB,CAC3B,YACG;AACH,QAAM,UAAU,WAAW;AAAA,IACzB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,UAAQ,cAAc;AACtB,UAAQ,KAAK;AAEb,SAAO;AACT;;;ACtDA;AAAA,EAEE;AAAA,OAGK;AA6CA,IAAM,oBAAoB,CAC/B,YACG;AACH,QAAM,cAAc,eAAmC;AAAA,IACrD,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,cAAY,cAAc;AAC1B,cAAY,KAAK;AAEjB,SAAO;AACT;;;AClDO,IAAM,OAAO,cAAc;AAE3B,IAAM,WAAW,kBAAkB","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 FieldValues,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, 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 type ZodFormType<\n FieldDefs,\n ExtraProps = object,\n ExtraOverrides = object,\n Type extends 'zod' = 'zod'\n> = (<\n TSchema extends z.AnyZodObject = z.AnyZodObject,\n TFieldValues extends z.infer<TSchema> = z.infer<TSchema>,\n TContext extends object = object\n>(\n props: WithFields<\n FormProps<TSchema, TFieldValues, TContext>,\n FieldDefs,\n ExtraOverrides\n > & {\n ref?: React.ForwardedRef<HTMLFormElement>\n } & ExtraProps\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodForm = <FieldDefs>(\n options?: CreateZodFormProps<FieldDefs>\n) => {\n const ZodForm = createForm({\n resolver: (schema: any) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: zodFieldResolver,\n ...options,\n })\n\n ZodForm.displayName = 'ZodForm'\n ZodForm.id = 'ZodForm'\n\n return ZodForm as ZodFormType<FieldDefs>\n}\n","import {\n CreateFormProps,\n createStepForm,\n StepsOptions,\n UseStepFormProps,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, zodResolver } from './zod-resolver'\nimport { AnyZodObject, z } from 'zod'\nimport React from 'react'\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\ntype InferStepType<T extends Required<StepsOptions<AnyZodObject>>> = T extends [\n infer Step,\n ...infer Rest\n]\n ? Step extends { schema: AnyZodObject }\n ? z.infer<Step['schema']> &\n (Rest extends Required<StepsOptions<AnyZodObject>>\n ? InferStepType<Rest>\n : object)\n : object\n : object\n\ntype ZodStepFormType<\n FieldDefs,\n ExtraProps = object,\n ExtraOverrides = object\n> = (<\n TSteps extends Required<StepsOptions<AnyZodObject>> = Required<\n StepsOptions<AnyZodObject>\n >,\n TFieldValues extends InferStepType<TSteps> = InferStepType<TSteps>,\n TContext extends object = object\n>(\n props: UseStepFormProps<TSteps, TFieldValues, TContext> & {\n steps: TSteps\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodStepForm = <FieldDefs>(\n options?: CreateZodFormProps<FieldDefs>\n) => {\n const ZodStepForm = createStepForm<any, any, any, any>({\n resolver: (schema: any) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: zodFieldResolver,\n ...options,\n })\n\n ZodStepForm.displayName = 'ZodStepForm'\n ZodStepForm.id = 'ZodStepForm'\n\n return ZodStepForm as ZodStepFormType<FieldDefs>\n}\n","export {\n zodResolver,\n getFieldsFromSchema,\n getNestedSchema,\n zodFieldResolver,\n zodMeta,\n zodParseMeta,\n} from './zod-resolver'\nexport type { Options, ZodMeta } from './zod-resolver'\nexport { createZodForm, type ZodFormType } from './create-zod-form'\n\nimport { createZodForm } from './create-zod-form'\nimport { createZodStepForm } from './create-zod-step-form'\n\nexport const Form = createZodForm()\n\nexport const StepForm = createZodStepForm()\n"]}
|
package/dist/zod/index.mjs
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { zodResolver } from '@hookform/resolvers/zod';
|
2
2
|
export { zodResolver } from '@hookform/resolvers/zod';
|
3
3
|
import { get } from '@chakra-ui/utils';
|
4
|
-
import { createForm } from '@saas-ui/forms';
|
4
|
+
import { createForm, createStepForm } from '@saas-ui/forms';
|
5
5
|
|
6
6
|
// zod/src/zod-resolver.ts
|
7
7
|
var getType = (field) => {
|
@@ -74,16 +74,30 @@ var zodParseMeta = (meta) => {
|
|
74
74
|
}
|
75
75
|
};
|
76
76
|
var createZodForm = (options) => {
|
77
|
-
|
77
|
+
const ZodForm = createForm({
|
78
78
|
resolver: (schema) => zodResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
|
79
79
|
fieldResolver: zodFieldResolver,
|
80
80
|
...options
|
81
81
|
});
|
82
|
+
ZodForm.displayName = "ZodForm";
|
83
|
+
ZodForm.id = "ZodForm";
|
84
|
+
return ZodForm;
|
85
|
+
};
|
86
|
+
var createZodStepForm = (options) => {
|
87
|
+
const ZodStepForm = createStepForm({
|
88
|
+
resolver: (schema) => zodResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
|
89
|
+
fieldResolver: zodFieldResolver,
|
90
|
+
...options
|
91
|
+
});
|
92
|
+
ZodStepForm.displayName = "ZodStepForm";
|
93
|
+
ZodStepForm.id = "ZodStepForm";
|
94
|
+
return ZodStepForm;
|
82
95
|
};
|
83
96
|
|
84
97
|
// zod/src/index.ts
|
85
98
|
var Form = createZodForm();
|
99
|
+
var StepForm = createZodStepForm();
|
86
100
|
|
87
|
-
export { Form, createZodForm, getFieldsFromSchema, getNestedSchema, zodFieldResolver, zodMeta, zodParseMeta };
|
101
|
+
export { Form, StepForm, createZodForm, getFieldsFromSchema, getNestedSchema, zodFieldResolver, zodMeta, zodParseMeta };
|
88
102
|
//# sourceMappingURL=out.js.map
|
89
103
|
//# sourceMappingURL=index.mjs.map
|
package/dist/zod/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../zod/src/index.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,
|
1
|
+
{"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../zod/src/create-zod-step-form.ts","../../zod/src/index.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,OAKK;AAkCA,IAAM,gBAAgB,CAC3B,YACG;AACH,QAAM,UAAU,WAAW;AAAA,IACzB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,UAAQ,cAAc;AACtB,UAAQ,KAAK;AAEb,SAAO;AACT;;;ACtDA;AAAA,EAEE;AAAA,OAGK;AA6CA,IAAM,oBAAoB,CAC/B,YACG;AACH,QAAM,cAAc,eAAmC;AAAA,IACrD,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,cAAY,cAAc;AAC1B,cAAY,KAAK;AAEjB,SAAO;AACT;;;AClDO,IAAM,OAAO,cAAc;AAE3B,IAAM,WAAW,kBAAkB","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 FieldValues,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, 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 type ZodFormType<\n FieldDefs,\n ExtraProps = object,\n ExtraOverrides = object,\n Type extends 'zod' = 'zod'\n> = (<\n TSchema extends z.AnyZodObject = z.AnyZodObject,\n TFieldValues extends z.infer<TSchema> = z.infer<TSchema>,\n TContext extends object = object\n>(\n props: WithFields<\n FormProps<TSchema, TFieldValues, TContext>,\n FieldDefs,\n ExtraOverrides\n > & {\n ref?: React.ForwardedRef<HTMLFormElement>\n } & ExtraProps\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodForm = <FieldDefs>(\n options?: CreateZodFormProps<FieldDefs>\n) => {\n const ZodForm = createForm({\n resolver: (schema: any) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: zodFieldResolver,\n ...options,\n })\n\n ZodForm.displayName = 'ZodForm'\n ZodForm.id = 'ZodForm'\n\n return ZodForm as ZodFormType<FieldDefs>\n}\n","import {\n CreateFormProps,\n createStepForm,\n StepsOptions,\n UseStepFormProps,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, zodResolver } from './zod-resolver'\nimport { AnyZodObject, z } from 'zod'\nimport React from 'react'\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\ntype InferStepType<T extends Required<StepsOptions<AnyZodObject>>> = T extends [\n infer Step,\n ...infer Rest\n]\n ? Step extends { schema: AnyZodObject }\n ? z.infer<Step['schema']> &\n (Rest extends Required<StepsOptions<AnyZodObject>>\n ? InferStepType<Rest>\n : object)\n : object\n : object\n\ntype ZodStepFormType<\n FieldDefs,\n ExtraProps = object,\n ExtraOverrides = object\n> = (<\n TSteps extends Required<StepsOptions<AnyZodObject>> = Required<\n StepsOptions<AnyZodObject>\n >,\n TFieldValues extends InferStepType<TSteps> = InferStepType<TSteps>,\n TContext extends object = object\n>(\n props: UseStepFormProps<TSteps, TFieldValues, TContext> & {\n steps: TSteps\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodStepForm = <FieldDefs>(\n options?: CreateZodFormProps<FieldDefs>\n) => {\n const ZodStepForm = createStepForm<any, any, any, any>({\n resolver: (schema: any) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: zodFieldResolver,\n ...options,\n })\n\n ZodStepForm.displayName = 'ZodStepForm'\n ZodStepForm.id = 'ZodStepForm'\n\n return ZodStepForm as ZodStepFormType<FieldDefs>\n}\n","export {\n zodResolver,\n getFieldsFromSchema,\n getNestedSchema,\n zodFieldResolver,\n zodMeta,\n zodParseMeta,\n} from './zod-resolver'\nexport type { Options, ZodMeta } from './zod-resolver'\nexport { createZodForm, type ZodFormType } from './create-zod-form'\n\nimport { createZodForm } from './create-zod-form'\nimport { createZodStepForm } from './create-zod-step-form'\n\nexport const Form = createZodForm()\n\nexport const StepForm = createZodStepForm()\n"]}
|
package/package.json
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
{
|
2
2
|
"name": "@saas-ui/forms",
|
3
|
-
"version": "2.0.0-
|
3
|
+
"version": "2.0.0-rc.23",
|
4
4
|
"description": "Fully functional forms for Chakra UI.",
|
5
5
|
"source": "src/index.ts",
|
6
6
|
"exports": {
|
7
7
|
".": {
|
8
8
|
"require": "./dist/index.js",
|
9
|
+
"types": "./dist/index.d.ts",
|
9
10
|
"import": "./dist/index.mjs"
|
10
11
|
},
|
11
12
|
"./src": {
|
@@ -29,13 +30,26 @@
|
|
29
30
|
},
|
30
31
|
"./ajv": {
|
31
32
|
"require": "./dist/ajv/index.js",
|
32
|
-
"types": "./dist/
|
33
|
+
"types": "./dist/ajv/index.d.ts",
|
33
34
|
"import": "./dist/ajv/index.mjs"
|
34
35
|
},
|
35
36
|
"./ajv/src": {
|
36
37
|
"default": "./ajv/src/index.ts"
|
37
38
|
}
|
38
39
|
},
|
40
|
+
"typesVersions": {
|
41
|
+
"*": {
|
42
|
+
"ajv": [
|
43
|
+
"./dist/ajv/index.d.ts"
|
44
|
+
],
|
45
|
+
"yup": [
|
46
|
+
"./dist/yup/index.d.ts"
|
47
|
+
],
|
48
|
+
"zod": [
|
49
|
+
"./dist/zod/index.d.ts"
|
50
|
+
]
|
51
|
+
}
|
52
|
+
},
|
39
53
|
"main": "./dist/index.js",
|
40
54
|
"module": "./dist/index.mjs",
|
41
55
|
"types": "./dist/index.d.ts",
|
@@ -89,7 +103,8 @@
|
|
89
103
|
"dependencies": {
|
90
104
|
"@chakra-ui/react-utils": "^2.0.12",
|
91
105
|
"@chakra-ui/utils": "^2.0.15",
|
92
|
-
"@
|
106
|
+
"@hookform/resolvers": "^3.1.0",
|
107
|
+
"@saas-ui/core": "2.0.0-rc.20",
|
93
108
|
"react-hook-form": "^7.43.9"
|
94
109
|
},
|
95
110
|
"peerDependencies": {
|
@@ -101,13 +116,12 @@
|
|
101
116
|
"react-dom": ">=18.0.0"
|
102
117
|
},
|
103
118
|
"devDependencies": {
|
104
|
-
"@hookform/resolvers": "^3.0.1",
|
105
119
|
"@types/json-schema": "^7.0.11",
|
106
120
|
"ajv": "^8.12.0",
|
107
121
|
"ajv-errors": "^3.0.0",
|
108
|
-
"json-schema-to-ts": "^2.
|
122
|
+
"json-schema-to-ts": "^2.8.2",
|
109
123
|
"tsd": "^0.28.1",
|
110
|
-
"yup": "^1.
|
124
|
+
"yup": "^1.1.1",
|
111
125
|
"zod": "^3.21.4"
|
112
126
|
},
|
113
127
|
"tsd": {
|
package/src/array-field.tsx
CHANGED
@@ -30,6 +30,7 @@ import {
|
|
30
30
|
import { FieldPath, FieldValues } from 'react-hook-form'
|
31
31
|
import { isFunction } from '@chakra-ui/utils'
|
32
32
|
import { MaybeRenderProp } from '@chakra-ui/react-utils'
|
33
|
+
import { useFieldProps } from './form-context'
|
33
34
|
|
34
35
|
export interface ArrayFieldButtonProps extends ButtonProps {}
|
35
36
|
|
@@ -262,12 +263,14 @@ export const ArrayFieldContainer = React.forwardRef(
|
|
262
263
|
}: ArrayFieldContainerProps,
|
263
264
|
ref: React.ForwardedRef<UseArrayFieldReturn>
|
264
265
|
) => {
|
266
|
+
const overrides = useFieldProps(name)
|
267
|
+
|
265
268
|
const context = useArrayField({
|
266
269
|
name,
|
267
270
|
defaultValue,
|
268
271
|
keyName,
|
269
|
-
min,
|
270
|
-
max,
|
272
|
+
min: min || (overrides as any)?.min,
|
273
|
+
max: max || (overrides as any)?.max,
|
271
274
|
})
|
272
275
|
|
273
276
|
// This exposes the useArrayField api through the forwarded ref
|
@@ -275,7 +278,7 @@ export const ArrayFieldContainer = React.forwardRef(
|
|
275
278
|
|
276
279
|
return (
|
277
280
|
<ArrayFieldProvider value={context}>
|
278
|
-
<BaseField name={name} {...fieldProps}>
|
281
|
+
<BaseField name={name} {...fieldProps} {...overrides}>
|
279
282
|
{children}
|
280
283
|
</BaseField>
|
281
284
|
</ArrayFieldProvider>
|
package/src/create-form.tsx
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { ForwardedRef } from 'react'
|
2
2
|
import { FieldsProvider } from './fields-context'
|
3
3
|
import { Form, FieldValues, FormProps, GetResolver } from './form'
|
4
|
-
import { WithFields } from './types'
|
4
|
+
import { DefaultFieldOverrides, WithFields } from './types'
|
5
5
|
import { objectFieldResolver } from './field-resolver'
|
6
6
|
import { GetFieldResolver } from './field-resolver'
|
7
7
|
import { forwardRef } from '@chakra-ui/react'
|
@@ -12,18 +12,39 @@ export interface CreateFormProps<FieldDefs> {
|
|
12
12
|
fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
|
13
13
|
}
|
14
14
|
|
15
|
-
export
|
15
|
+
export type FormType<
|
16
|
+
FieldDefs,
|
17
|
+
ExtraProps = object,
|
18
|
+
ExtraOverrides = object
|
19
|
+
> = (<
|
20
|
+
TSchema = unknown,
|
21
|
+
TFieldValues extends FieldValues = FieldValues,
|
22
|
+
TContext extends object = object
|
23
|
+
>(
|
24
|
+
props: WithFields<
|
25
|
+
FormProps<TSchema, TFieldValues, TContext>,
|
26
|
+
FieldDefs,
|
27
|
+
ExtraOverrides
|
28
|
+
> & {
|
29
|
+
ref?: React.ForwardedRef<HTMLFormElement>
|
30
|
+
} & ExtraProps
|
31
|
+
) => React.ReactElement) & {
|
32
|
+
displayName?: string
|
33
|
+
id?: string
|
34
|
+
}
|
35
|
+
|
36
|
+
export function createForm<FieldDefs>({
|
16
37
|
resolver,
|
17
38
|
fieldResolver = objectFieldResolver,
|
18
39
|
fields,
|
19
40
|
}: CreateFormProps<FieldDefs> = {}) {
|
20
|
-
const
|
41
|
+
const DefaultForm = forwardRef(
|
21
42
|
<
|
22
|
-
|
23
|
-
|
24
|
-
|
43
|
+
TSchema = any,
|
44
|
+
TFieldValues extends FieldValues = FieldValues,
|
45
|
+
TContext extends object = object
|
25
46
|
>(
|
26
|
-
props: WithFields<FormProps<TFieldValues, TContext
|
47
|
+
props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs>,
|
27
48
|
ref: ForwardedRef<HTMLFormElement>
|
28
49
|
) => {
|
29
50
|
const { schema, ...rest } = props
|
@@ -38,17 +59,10 @@ export function createForm<FieldDefs, Schema = any>({
|
|
38
59
|
</FieldsProvider>
|
39
60
|
)
|
40
61
|
}
|
41
|
-
) as
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
>(
|
46
|
-
props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs> & {
|
47
|
-
ref?: React.ForwardedRef<HTMLFormElement>
|
48
|
-
}
|
49
|
-
) => React.ReactElement) & {
|
50
|
-
displayName?: string
|
51
|
-
}
|
62
|
+
) as FormType<FieldDefs>
|
63
|
+
|
64
|
+
DefaultForm.displayName = 'Form'
|
65
|
+
DefaultForm.id = 'Form'
|
52
66
|
|
53
|
-
return
|
67
|
+
return DefaultForm
|
54
68
|
}
|
@@ -0,0 +1,100 @@
|
|
1
|
+
import React, { useMemo } from 'react'
|
2
|
+
import { forwardRef } from '@chakra-ui/react'
|
3
|
+
import {
|
4
|
+
ArrayField,
|
5
|
+
DisplayIf,
|
6
|
+
FieldProps,
|
7
|
+
FieldValues,
|
8
|
+
FieldsProvider,
|
9
|
+
Form,
|
10
|
+
GetFieldResolver,
|
11
|
+
ObjectField,
|
12
|
+
} from './'
|
13
|
+
import { Field } from './field'
|
14
|
+
import { FormStep, StepsOptions } from './step-form'
|
15
|
+
import {
|
16
|
+
StepFormProvider,
|
17
|
+
UseStepFormProps,
|
18
|
+
useStepForm,
|
19
|
+
} from './use-step-form'
|
20
|
+
import { StepperProvider } from '@saas-ui/core'
|
21
|
+
import { runIfFn } from '@chakra-ui/utils'
|
22
|
+
import { GetResolver } from './form'
|
23
|
+
|
24
|
+
type StepFormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<
|
25
|
+
TSteps extends StepsOptions<any> = StepsOptions<any>,
|
26
|
+
TFieldValues extends FieldValues = FieldValues,
|
27
|
+
TContext extends object = object,
|
28
|
+
TFieldTypes = FieldProps<TFieldValues>
|
29
|
+
>(
|
30
|
+
props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> & {
|
31
|
+
ref?: React.ForwardedRef<HTMLFormElement>
|
32
|
+
}
|
33
|
+
) => React.ReactElement) & {
|
34
|
+
displayName?: string
|
35
|
+
id?: string
|
36
|
+
}
|
37
|
+
|
38
|
+
export type DefaultFormType<
|
39
|
+
FieldDefs = any,
|
40
|
+
ExtraProps = object,
|
41
|
+
ExtraOverrides = object
|
42
|
+
> = (<
|
43
|
+
TFieldValues extends Record<string, any> = any,
|
44
|
+
TContext extends object = object,
|
45
|
+
TSchema = unknown
|
46
|
+
>(
|
47
|
+
props: any
|
48
|
+
) => React.ReactElement) & {
|
49
|
+
displayName?: string
|
50
|
+
id?: string
|
51
|
+
}
|
52
|
+
|
53
|
+
export interface CreateFormProps<FieldDefs> {
|
54
|
+
resolver?: GetResolver
|
55
|
+
fieldResolver?: GetFieldResolver
|
56
|
+
fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
|
57
|
+
}
|
58
|
+
|
59
|
+
export function createStepForm<
|
60
|
+
FieldDefs = any,
|
61
|
+
ExtraProps = object,
|
62
|
+
ExtraOverrides = object
|
63
|
+
>({ fields, resolver, fieldResolver }: CreateFormProps<FieldDefs> = {}) {
|
64
|
+
const StepForm = forwardRef<any, 'div'>((props, ref) => {
|
65
|
+
const { children, steps, ...rest } = props
|
66
|
+
|
67
|
+
const stepper = useStepForm({
|
68
|
+
resolver,
|
69
|
+
fieldResolver,
|
70
|
+
...props,
|
71
|
+
})
|
72
|
+
|
73
|
+
const { getFormProps, ...ctx } = stepper
|
74
|
+
|
75
|
+
const context = useMemo(() => ctx, [ctx])
|
76
|
+
|
77
|
+
return (
|
78
|
+
<StepperProvider value={context}>
|
79
|
+
<StepFormProvider value={context}>
|
80
|
+
<FieldsProvider value={fields || {}}>
|
81
|
+
<Form ref={ref} {...rest} {...getFormProps()}>
|
82
|
+
{runIfFn(children, {
|
83
|
+
...stepper,
|
84
|
+
Field: Field as any,
|
85
|
+
FormStep: FormStep as any,
|
86
|
+
DisplayIf: DisplayIf as any,
|
87
|
+
ArrayField: ArrayField as any,
|
88
|
+
ObjectField: ObjectField as any,
|
89
|
+
})}
|
90
|
+
</Form>
|
91
|
+
</FieldsProvider>
|
92
|
+
</StepFormProvider>
|
93
|
+
</StepperProvider>
|
94
|
+
)
|
95
|
+
}) as StepFormType<FieldDefs, ExtraProps, ExtraOverrides>
|
96
|
+
|
97
|
+
StepForm.displayName = `Step${Form.displayName || Form.name}`
|
98
|
+
|
99
|
+
return StepForm
|
100
|
+
}
|
package/src/form-context.tsx
CHANGED
@@ -57,7 +57,7 @@ export const useFieldProps = <TFieldValues extends FieldValues = FieldValues>(
|
|
57
57
|
): BaseFieldProps<TFieldValues> | undefined => {
|
58
58
|
const parsedName = name?.replace(/\.[0-9]/g, '.$')
|
59
59
|
const context = useFormContext()
|
60
|
-
return context?.fields?.[parsedName] as any
|
60
|
+
return (context?.fields?.[parsedName] as any) || {}
|
61
61
|
}
|
62
62
|
|
63
63
|
export type UseFormReturn<
|
package/src/form.tsx
CHANGED
@@ -45,9 +45,9 @@ export interface FormRenderContext<
|
|
45
45
|
}
|
46
46
|
|
47
47
|
interface FormOptions<
|
48
|
+
TSchema = unknown,
|
48
49
|
TFieldValues extends FieldValues = FieldValues,
|
49
50
|
TContext extends object = object,
|
50
|
-
TSchema = any,
|
51
51
|
TFieldTypes = FieldProps<TFieldValues>
|
52
52
|
> {
|
53
53
|
/**
|
@@ -87,16 +87,16 @@ interface FormOptions<
|
|
87
87
|
}
|
88
88
|
|
89
89
|
export interface FormProps<
|
90
|
+
TSchema = unknown,
|
90
91
|
TFieldValues extends FieldValues = FieldValues,
|
91
92
|
TContext extends object = object,
|
92
|
-
TSchema = any,
|
93
93
|
TFieldTypes = FieldProps<TFieldValues>
|
94
94
|
> extends UseFormProps<TFieldValues, TContext>,
|
95
95
|
Omit<
|
96
96
|
HTMLChakraProps<'form'>,
|
97
97
|
'children' | 'onChange' | 'onSubmit' | 'onError'
|
98
98
|
>,
|
99
|
-
FormOptions<TFieldValues, TContext,
|
99
|
+
FormOptions<TSchema, TFieldValues, TContext, TFieldTypes> {}
|
100
100
|
|
101
101
|
/**
|
102
102
|
* The wrapper component provides context, state, and focus management.
|
@@ -105,12 +105,12 @@ export interface FormProps<
|
|
105
105
|
*/
|
106
106
|
export const Form = forwardRef(
|
107
107
|
<
|
108
|
+
TSchema = any,
|
108
109
|
TFieldValues extends FieldValues = FieldValues,
|
109
110
|
TContext extends object = object,
|
110
|
-
TSchema = any,
|
111
111
|
TFieldTypes = FieldProps<TFieldValues>
|
112
112
|
>(
|
113
|
-
props: FormProps<TFieldValues, TContext,
|
113
|
+
props: FormProps<TSchema, TFieldValues, TContext, TFieldTypes>,
|
114
114
|
ref: React.ForwardedRef<HTMLFormElement>
|
115
115
|
) => {
|
116
116
|
const {
|
@@ -200,13 +200,15 @@ export const Form = forwardRef(
|
|
200
200
|
</FormProvider>
|
201
201
|
)
|
202
202
|
}
|
203
|
-
) as
|
204
|
-
|
203
|
+
) as FormComponent
|
204
|
+
|
205
|
+
export type FormComponent = (<
|
206
|
+
TSchema = unknown,
|
207
|
+
TFieldValues extends FieldValues = FieldValues,
|
205
208
|
TContext extends object = object,
|
206
|
-
TSchema = any,
|
207
209
|
TFieldTypes = FieldProps<TFieldValues>
|
208
210
|
>(
|
209
|
-
props: FormProps<TFieldValues, TContext,
|
211
|
+
props: FormProps<TSchema, TFieldValues, TContext, TFieldTypes> & {
|
210
212
|
ref?: React.ForwardedRef<HTMLFormElement>
|
211
213
|
}
|
212
214
|
) => React.ReactElement) & {
|
@@ -219,7 +221,7 @@ export type GetResolver = <
|
|
219
221
|
TFieldValues extends FieldValues,
|
220
222
|
TContext extends object
|
221
223
|
>(
|
222
|
-
schema:
|
224
|
+
schema: unknown
|
223
225
|
) => (
|
224
226
|
values: TFieldValues,
|
225
227
|
context: TContext | undefined,
|
package/src/index.ts
CHANGED
@@ -43,22 +43,36 @@ export type {
|
|
43
43
|
WithFields,
|
44
44
|
BaseFieldProps,
|
45
45
|
FieldOptions,
|
46
|
+
DefaultFieldOverrides,
|
46
47
|
} from './types'
|
47
48
|
|
48
|
-
export { createForm, type CreateFormProps } from './create-form'
|
49
|
+
export { createForm, type CreateFormProps, type FormType } from './create-form'
|
49
50
|
export { createField, type CreateFieldOptions } from './create-field'
|
50
51
|
|
51
|
-
export {
|
52
|
-
|
53
|
-
type FormProps,
|
54
|
-
type FormRenderContext,
|
55
|
-
} from './form'
|
52
|
+
export { Form as BaseForm } from './form'
|
53
|
+
export type { FormProps, FormRenderContext, FormComponent } from './form'
|
56
54
|
|
57
55
|
export { FormProvider, useFormContext } from './form-context'
|
58
56
|
|
59
57
|
import { createForm } from './create-form'
|
58
|
+
import { createStepForm } from './create-step-form'
|
59
|
+
|
60
|
+
/**
|
61
|
+
* Form component.
|
62
|
+
*
|
63
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/form
|
64
|
+
*/
|
60
65
|
export const Form = createForm()
|
61
66
|
|
67
|
+
export { createStepForm } from './create-step-form'
|
68
|
+
|
69
|
+
/**
|
70
|
+
* Multi-step form component.
|
71
|
+
*
|
72
|
+
* @see Docs https://saas-ui.dev/docs/components/forms/step-form
|
73
|
+
*/
|
74
|
+
export const StepForm = createStepForm()
|
75
|
+
|
62
76
|
export type {
|
63
77
|
BatchFieldArrayUpdate,
|
64
78
|
ChangeHandler,
|
package/src/object-field.tsx
CHANGED
@@ -12,6 +12,7 @@ import { BaseFieldProps } from './types'
|
|
12
12
|
|
13
13
|
import { mapNestedFields } from './utils'
|
14
14
|
import { FieldPath, FieldValues } from 'react-hook-form'
|
15
|
+
import { useFieldProps } from './form-context'
|
15
16
|
|
16
17
|
export interface ObjectFieldProps<
|
17
18
|
TFieldValues extends FieldValues = FieldValues,
|
@@ -33,13 +34,29 @@ export const FormLegend = (props: FormLabelProps) => {
|
|
33
34
|
* @see Docs https://saas-ui.dev/docs/components/forms/object-field
|
34
35
|
*/
|
35
36
|
export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
|
36
|
-
const {
|
37
|
-
|
37
|
+
const {
|
38
|
+
name,
|
39
|
+
label,
|
40
|
+
hideLabel: hideLabelProp,
|
41
|
+
children,
|
42
|
+
columns: columnsProp,
|
43
|
+
spacing: spacingProp,
|
44
|
+
...fieldProps
|
45
|
+
} = props
|
46
|
+
|
47
|
+
const { hideLabel, columns, spacing, ...overrides } = useFieldProps(
|
48
|
+
name
|
49
|
+
) as Omit<ObjectFieldProps, 'name'>
|
38
50
|
|
39
51
|
return (
|
40
|
-
<FormControl name={name} as="fieldset" {...fieldProps}>
|
41
|
-
<FormLegend display={hideLabel ? 'none' : 'block'}>
|
42
|
-
|
52
|
+
<FormControl name={name} as="fieldset" {...fieldProps} {...overrides}>
|
53
|
+
<FormLegend display={hideLabelProp || hideLabel ? 'none' : 'block'}>
|
54
|
+
{label}
|
55
|
+
</FormLegend>
|
56
|
+
<FormLayout
|
57
|
+
columns={columnsProp || columns}
|
58
|
+
gridGap={spacingProp || spacing}
|
59
|
+
>
|
43
60
|
{mapNestedFields(name, children)}
|
44
61
|
</FormLayout>
|
45
62
|
</FormControl>
|
package/src/select/select.tsx
CHANGED
@@ -80,7 +80,7 @@ export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
|
|
80
80
|
|
81
81
|
const height = styles.field?.h || styles.field?.height
|
82
82
|
|
83
|
-
const buttonStyles:
|
83
|
+
const buttonStyles: any = {
|
84
84
|
fontWeight: 'normal',
|
85
85
|
textAlign: 'left',
|
86
86
|
color: 'inherit',
|
@@ -101,6 +101,7 @@ export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
|
|
101
101
|
<MenuButton
|
102
102
|
as={Button}
|
103
103
|
id={id || React.useId()}
|
104
|
+
{...buttonStyles}
|
104
105
|
{...rest}
|
105
106
|
onFocus={onFocus}
|
106
107
|
onBlur={onBlur}
|
@@ -111,7 +112,6 @@ export const SelectButton = forwardRef<SelectButtonProps, 'button'>(
|
|
111
112
|
data-required={dataAttr(isRequired)}
|
112
113
|
rightIcon={rightIcon}
|
113
114
|
ref={ref}
|
114
|
-
sx={buttonStyles}
|
115
115
|
>
|
116
116
|
{renderValue(displayValue) || placeholder}
|
117
117
|
</MenuButton>
|