@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/dist/zod/index.js CHANGED
@@ -75,21 +75,36 @@ var zodParseMeta = (meta) => {
75
75
  }
76
76
  };
77
77
  var createZodForm = (options) => {
78
- return forms.createForm({
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;
@@ -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,OAIK;AAYA,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;;;ACvBO,IAAM,OAAO,cAAc","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 { 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 const createZodForm = <FieldDefs>(\n options?: CreateZodFormProps<FieldDefs>\n) => {\n return createForm({\n resolver: (schema) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: zodFieldResolver,\n ...options,\n }) as <\n TSchema extends z.AnyZodObject = z.AnyZodObject,\n TContext extends object = object\n >(\n props: WithFields<\n FormProps<z.infer<TSchema>, TContext, TSchema>,\n FieldDefs\n > & {\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n ) => React.ReactElement\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 } from './create-zod-form'\n\nimport { createZodForm } from './create-zod-form'\n\nexport const Form = createZodForm()\n"]}
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"]}
@@ -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
- return createForm({
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
@@ -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,OAIK;AAYA,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;;;ACvBO,IAAM,OAAO,cAAc","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 { 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 const createZodForm = <FieldDefs>(\n options?: CreateZodFormProps<FieldDefs>\n) => {\n return createForm({\n resolver: (schema) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: zodFieldResolver,\n ...options,\n }) as <\n TSchema extends z.AnyZodObject = z.AnyZodObject,\n TContext extends object = object\n >(\n props: WithFields<\n FormProps<z.infer<TSchema>, TContext, TSchema>,\n FieldDefs\n > & {\n ref?: React.ForwardedRef<HTMLFormElement>\n }\n ) => React.ReactElement\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 } from './create-zod-form'\n\nimport { createZodForm } from './create-zod-form'\n\nexport const Form = createZodForm()\n"]}
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-next.9",
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/zod/index.d.ts",
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
- "@saas-ui/core": "2.0.0-next.7",
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.7.2",
122
+ "json-schema-to-ts": "^2.8.2",
109
123
  "tsd": "^0.28.1",
110
- "yup": "^1.0.2",
124
+ "yup": "^1.1.1",
111
125
  "zod": "^3.21.4"
112
126
  },
113
127
  "tsd": {
@@ -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>
@@ -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 function createForm<FieldDefs, Schema = any>({
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 CreateForm = forwardRef(
41
+ const DefaultForm = forwardRef(
21
42
  <
22
- TFieldValues extends FieldValues,
23
- TContext extends object = object,
24
- TSchema extends Schema = Schema
43
+ TSchema = any,
44
+ TFieldValues extends FieldValues = FieldValues,
45
+ TContext extends object = object
25
46
  >(
26
- props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs>,
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
- TFieldValues extends FieldValues,
43
- TContext extends object = object,
44
- TSchema extends Schema = Schema
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 CreateForm
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
+ }
@@ -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, TSchema, TFieldTypes> {}
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, TSchema, TFieldTypes>,
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
- TFieldValues extends FieldValues,
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, TSchema, TFieldTypes> & {
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: any
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
- Form as BaseForm,
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,
@@ -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 { name, label, hideLabel, children, columns, spacing, ...fieldProps } =
37
- props
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'}>{label}</FormLegend>
42
- <FormLayout columns={columns} gridGap={spacing}>
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>
@@ -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: SystemStyleObject = {
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>