@saas-ui/forms 2.0.0-next.14 → 2.0.0-next.16

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,11 +75,14 @@ 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;
83
86
  };
84
87
 
85
88
  // zod/src/index.ts
@@ -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/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;;;ACzCO,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 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 TFieldValues extends FieldValues = FieldValues, // placeholder\n TContext extends object = object,\n TSchema extends z.AnyZodObject = z.AnyZodObject\n>(\n props: WithFields<\n FormProps<z.infer<TSchema>, TContext, TSchema>,\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","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'\n\nexport const Form = createZodForm()\n"]}
@@ -74,11 +74,14 @@ 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;
82
85
  };
83
86
 
84
87
  // zod/src/index.ts
@@ -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/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;;;ACzCO,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 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 TFieldValues extends FieldValues = FieldValues, // placeholder\n TContext extends object = object,\n TSchema extends z.AnyZodObject = z.AnyZodObject\n>(\n props: WithFields<\n FormProps<z.infer<TSchema>, TContext, TSchema>,\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","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'\n\nexport const Form = createZodForm()\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saas-ui/forms",
3
- "version": "2.0.0-next.14",
3
+ "version": "2.0.0-next.16",
4
4
  "description": "Fully functional forms for Chakra UI.",
5
5
  "source": "src/index.ts",
6
6
  "exports": {
@@ -104,7 +104,7 @@
104
104
  "@chakra-ui/react-utils": "^2.0.12",
105
105
  "@chakra-ui/utils": "^2.0.15",
106
106
  "@hookform/resolvers": "^3.0.1",
107
- "@saas-ui/core": "2.0.0-next.12",
107
+ "@saas-ui/core": "2.0.0-next.14",
108
108
  "react-hook-form": "^7.43.9"
109
109
  },
110
110
  "peerDependencies": {
@@ -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,16 +12,37 @@ 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
+ TFieldValues extends FieldValues,
21
+ TContext extends object = object,
22
+ TSchema = unknown
23
+ >(
24
+ props: WithFields<
25
+ FormProps<TFieldValues, TContext, TSchema>,
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
43
  TFieldValues extends FieldValues,
23
44
  TContext extends object = object,
24
- TSchema extends Schema = Schema
45
+ TSchema = any
25
46
  >(
26
47
  props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs>,
27
48
  ref: ForwardedRef<HTMLFormElement>
@@ -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,161 @@
1
+ import { useMemo } from 'react'
2
+ import { forwardRef } from '@chakra-ui/react'
3
+ import { FormType } from './create-form'
4
+ import {
5
+ ArrayField,
6
+ DisplayIf,
7
+ FieldProps,
8
+ FieldValues,
9
+ Form,
10
+ ObjectField,
11
+ } from './'
12
+ import { Field } from './field'
13
+ import { StepFormProps, FormStep } from './step-form'
14
+ import {
15
+ StepFormProvider,
16
+ UseStepFormProps,
17
+ useStepForm,
18
+ } from './use-step-form'
19
+ import { YupFormType } from '../yup/src/create-yup-form'
20
+ import { ZodFormType } from '../zod/src/create-zod-form'
21
+ import { StepperProvider } from '@saas-ui/core'
22
+ import { runIfFn } from '@chakra-ui/utils'
23
+
24
+ // /**
25
+ // * @todo make this dynamic to support other schema types
26
+ // */
27
+ type MergeStepFormProps<T> = T extends YupFormType<
28
+ infer FieldDefs,
29
+ infer ExtraProps,
30
+ infer ExtraOverrides,
31
+ 'yup'
32
+ >
33
+ ? YupFormType<
34
+ FieldDefs,
35
+ ExtraProps & Omit<StepFormProps, 'children'>,
36
+ ExtraOverrides
37
+ >
38
+ : T extends ZodFormType<
39
+ infer FieldDefs,
40
+ infer ExtraProps,
41
+ infer ExtraOverrides,
42
+ 'zod'
43
+ >
44
+ ? ZodFormType<
45
+ FieldDefs,
46
+ ExtraProps & Omit<StepFormProps, 'children'>,
47
+ ExtraOverrides
48
+ >
49
+ : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides>
50
+ ? FormType<
51
+ FieldDefs,
52
+ ExtraProps & Omit<StepFormProps, 'children'>,
53
+ ExtraOverrides
54
+ >
55
+ : never
56
+
57
+ export type DefaultFormType<
58
+ FieldDefs = any,
59
+ ExtraProps = object,
60
+ ExtraOverrides = object
61
+ > = (<
62
+ TFieldValues extends Record<string, any> = any,
63
+ TContext extends object = object,
64
+ TSchema = unknown
65
+ >(
66
+ props: any
67
+ ) => React.ReactElement) & {
68
+ displayName?: string
69
+ id?: string
70
+ }
71
+
72
+ // export function createStepForm<
73
+ // FieldDefs = any,
74
+ // ExtraProps = object,
75
+ // ExtraOverrides = object,
76
+ // TFormType extends DefaultFormType<
77
+ // FieldDefs,
78
+ // ExtraProps,
79
+ // ExtraOverrides
80
+ // > = DefaultFormType<FieldDefs, ExtraProps, ExtraOverrides>
81
+ // >(Form: TFormType) {
82
+ // const StepForm = forwardRef<any, 'div'>((props, ref) => {
83
+ // const { children, ...rest } = props
84
+
85
+ // const stepper = useStepForm(props)
86
+
87
+ // const { getFormProps, ...ctx } = stepper
88
+
89
+ // const context = useMemo(() => ctx, [ctx])
90
+
91
+ // return (
92
+ // <StepperProvider value={context}>
93
+ // <StepFormProvider value={context}>
94
+ // <Form ref={ref} {...rest} {...getFormProps()}>
95
+ // {runIfFn(children, {
96
+ // ...stepper,
97
+ // FormStep,
98
+ // Field,
99
+ // })}
100
+ // </Form>
101
+ // </StepFormProvider>
102
+ // </StepperProvider>
103
+ // )
104
+ // }) as MergeStepFormProps<TFormType>
105
+
106
+ // StepForm.displayName = `Step${Form.displayName || Form.name}`
107
+
108
+ // return StepForm
109
+ // }
110
+
111
+ export function createStepForm<
112
+ FieldDefs = any,
113
+ ExtraProps = object,
114
+ ExtraOverrides = object,
115
+ TFormType extends DefaultFormType<
116
+ FieldDefs,
117
+ ExtraProps,
118
+ ExtraOverrides
119
+ > = DefaultFormType<FieldDefs, ExtraProps, ExtraOverrides>
120
+ >(Form: TFormType) {
121
+ const StepForm = forwardRef<any, 'div'>((props, ref) => {
122
+ const { children, ...rest } = props
123
+
124
+ const stepper = useStepForm(props)
125
+
126
+ const { getFormProps, ...ctx } = stepper
127
+
128
+ const context = useMemo(() => ctx, [ctx])
129
+
130
+ return (
131
+ <StepperProvider value={context}>
132
+ <StepFormProvider value={context}>
133
+ <Form ref={ref} {...rest} {...getFormProps()}>
134
+ {runIfFn(children, {
135
+ ...stepper,
136
+ Field: Field as any,
137
+ DisplayIf: DisplayIf as any,
138
+ ArrayField: ArrayField as any,
139
+ ObjectField: ObjectField as any,
140
+ })}
141
+ </Form>
142
+ </StepFormProvider>
143
+ </StepperProvider>
144
+ )
145
+ }) as (<
146
+ TFieldValues extends FieldValues = FieldValues,
147
+ TContext extends object = object,
148
+ TFieldTypes = FieldProps<TFieldValues>
149
+ >(
150
+ props: UseStepFormProps<TFieldValues, TContext, TFieldTypes> & {
151
+ ref?: React.ForwardedRef<HTMLFormElement>
152
+ }
153
+ ) => React.ReactElement) & {
154
+ displayName?: string
155
+ id?: string
156
+ }
157
+
158
+ StepForm.displayName = `Step${Form.displayName || Form.name}`
159
+
160
+ return StepForm
161
+ }
package/src/form.tsx CHANGED
@@ -47,7 +47,7 @@ export interface FormRenderContext<
47
47
  interface FormOptions<
48
48
  TFieldValues extends FieldValues = FieldValues,
49
49
  TContext extends object = object,
50
- TSchema = any,
50
+ TSchema = unknown,
51
51
  TFieldTypes = FieldProps<TFieldValues>
52
52
  > {
53
53
  /**
@@ -89,7 +89,7 @@ interface FormOptions<
89
89
  export interface FormProps<
90
90
  TFieldValues extends FieldValues = FieldValues,
91
91
  TContext extends object = object,
92
- TSchema = any,
92
+ TSchema = unknown,
93
93
  TFieldTypes = FieldProps<TFieldValues>
94
94
  > extends UseFormProps<TFieldValues, TContext>,
95
95
  Omit<
@@ -200,10 +200,12 @@ export const Form = forwardRef(
200
200
  </FormProvider>
201
201
  )
202
202
  }
203
- ) as (<
203
+ ) as FormComponent
204
+
205
+ export type FormComponent = (<
204
206
  TFieldValues extends FieldValues,
205
207
  TContext extends object = object,
206
- TSchema = any,
208
+ TSchema = unknown,
207
209
  TFieldTypes = FieldProps<TFieldValues>
208
210
  >(
209
211
  props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes> & {
@@ -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,29 @@ 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
60
  export const Form = createForm()
61
61
 
62
+ /**
63
+ * The wrapper component provides context, state, and focus management.
64
+ *
65
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
66
+ */
67
+ export const StepForm = createStepForm(Form)
68
+
62
69
  export type {
63
70
  BatchFieldArrayUpdate,
64
71
  ChangeHandler,
package/src/step-form.tsx CHANGED
@@ -22,7 +22,9 @@ import {
22
22
  StepperProps,
23
23
  } from '@saas-ui/core'
24
24
 
25
- import { Form } from './form'
25
+ import { Form } from './'
26
+ import { Field } from './field'
27
+
26
28
  import { SubmitButton } from './submit-button'
27
29
 
28
30
  import {
@@ -32,48 +34,60 @@ import {
32
34
  UseStepFormProps,
33
35
  FormStepSubmitHandler,
34
36
  } from './use-step-form'
37
+ import { FieldProps } from './types'
38
+ import { DisplayIf } from './display-if'
39
+ import { ArrayField } from './array-field'
40
+ import { ObjectField } from './object-field'
41
+ import { createStepForm } from './create-step-form'
35
42
 
36
43
  export interface StepFormProps<
37
44
  TFieldValues extends FieldValues = FieldValues,
38
- TContext extends object = object
39
- > extends UseStepFormProps<TFieldValues> {}
40
-
41
- /**
42
- * The wrapper component provides context, state, and focus management.
43
- *
44
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
45
- */
46
- export const StepForm = React.forwardRef(
47
- <
48
- TFieldValues extends FieldValues = FieldValues,
49
- TContext extends object = object
50
- >(
51
- props: StepFormProps<TFieldValues, TContext>,
52
- ref: React.ForwardedRef<HTMLFormElement>
53
- ) => {
54
- const { children, ...rest } = props
55
-
56
- const stepper = useStepForm<TFieldValues>(props)
57
-
58
- const { getFormProps, ...ctx } = stepper
59
-
60
- const context = React.useMemo(() => ctx, [ctx])
61
-
62
- return (
63
- <StepperProvider value={context}>
64
- <StepFormProvider value={context}>
65
- <Form ref={ref} {...rest} {...getFormProps()}>
66
- {runIfFn(children, stepper)}
67
- </Form>
68
- </StepFormProvider>
69
- </StepperProvider>
70
- )
71
- }
72
- ) as <TFieldValues extends FieldValues>(
73
- props: StepFormProps<TFieldValues> & {
74
- ref?: React.ForwardedRef<HTMLFormElement>
75
- }
76
- ) => React.ReactElement
45
+ TContext extends object = object,
46
+ TFieldTypes = FieldProps<TFieldValues>
47
+ > extends UseStepFormProps<TFieldValues, TContext, TFieldTypes> {}
48
+
49
+ // export const StepForm = React.forwardRef(
50
+ // <
51
+ // TFieldValues extends FieldValues = FieldValues,
52
+ // TContext extends object = object,
53
+ // TFieldTypes = FieldProps<TFieldValues>
54
+ // >(
55
+ // props: StepFormProps<TFieldValues, TContext, TFieldTypes>,
56
+ // ref: React.ForwardedRef<HTMLFormElement>
57
+ // ) => {
58
+ // const { children, ...rest } = props
59
+
60
+ // const stepper = useStepForm(props)
61
+
62
+ // const { getFormProps, ...ctx } = stepper
63
+
64
+ // const context = React.useMemo(() => ctx, [ctx])
65
+
66
+ // return (
67
+ // <StepperProvider value={context}>
68
+ // <StepFormProvider value={context}>
69
+ // <Form ref={ref} {...rest} {...getFormProps()}>
70
+ // {runIfFn(children, {
71
+ // ...stepper,
72
+ // Field: Field as any,
73
+ // DisplayIf: DisplayIf as any,
74
+ // ArrayField: ArrayField as any,
75
+ // ObjectField: ObjectField as any,
76
+ // })}
77
+ // </Form>
78
+ // </StepFormProvider>
79
+ // </StepperProvider>
80
+ // )
81
+ // }
82
+ // ) as <
83
+ // TFieldValues extends FieldValues = FieldValues,
84
+ // TContext extends object = object,
85
+ // TFieldTypes = FieldProps<TFieldValues>
86
+ // >(
87
+ // props: UseStepFormProps<TFieldValues, TContext, TFieldTypes> & {
88
+ // ref?: React.ForwardedRef<HTMLFormElement>
89
+ // }
90
+ // ) => React.ReactElement
77
91
 
78
92
  export interface FormStepOptions {
79
93
  /**
@@ -181,7 +195,7 @@ export const PrevButton: React.FC<ButtonProps> = (props) => {
181
195
  return (
182
196
  <Button
183
197
  isDisabled={isFirstStep || isCompleted}
184
- label="Back"
198
+ children="Back"
185
199
  {...props}
186
200
  className={cx('sui-form__prev-button', props.className)}
187
201
  onClick={callAllHandlers(props.onClick, prevStep)}
package/src/types.ts CHANGED
@@ -133,12 +133,13 @@ export type FieldOverrides<
133
133
 
134
134
  export type WithFields<
135
135
  TFormProps extends FormProps<any, any, any, any>,
136
- FieldDefs
136
+ FieldDefs,
137
+ ExtraOverrides = object
137
138
  > = TFormProps extends FormProps<infer TFieldValues, infer TContext>
138
139
  ? Omit<TFormProps, 'children' | 'fields'> & {
139
140
  children?: FormChildren<FieldDefs, TFieldValues, TContext>
140
141
  fields?: FieldOverrides<FieldDefs, TFieldValues> & {
141
142
  submit?: SubmitButtonProps
142
- }
143
+ } & ExtraOverrides
143
144
  }
144
145
  : never
@@ -34,12 +34,36 @@ export const [StepFormProvider, useStepFormContext] =
34
34
  })
35
35
 
36
36
  import { FormProps } from './form'
37
+ import { FormStepProps } from './step-form'
38
+ import { FieldProps } from './types'
39
+ import { FocusableElement } from '@chakra-ui/utils'
40
+ import { DisplayIfProps } from './display-if'
41
+ import { ArrayFieldProps } from './array-field'
42
+ import { UseArrayFieldReturn } from './use-array-field'
43
+ import { ObjectFieldProps } from './object-field'
44
+
45
+ interface StepFormRenderContext<
46
+ TFieldValues extends FieldValues = FieldValues,
47
+ TContext extends object = object,
48
+ TFieldTypes = FieldProps<TFieldValues>
49
+ > extends UseStepFormReturn<TFieldValues> {
50
+ Field: React.FC<TFieldTypes & React.RefAttributes<FocusableElement>>
51
+ DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
52
+ ArrayField: React.FC<
53
+ ArrayFieldProps<TFieldValues> & React.RefAttributes<UseArrayFieldReturn>
54
+ >
55
+ ObjectField: React.FC<ObjectFieldProps<TFieldValues>>
56
+ }
37
57
 
38
58
  export interface UseStepFormProps<
39
- TFieldValues extends FieldValues = FieldValues
59
+ TFieldValues extends FieldValues = FieldValues,
60
+ TContext extends object = object,
61
+ TFieldTypes = FieldProps<TFieldValues>
40
62
  > extends Omit<UseStepperProps, 'onChange'>,
41
- Omit<FormProps<TFieldValues>, 'children'> {
42
- children: MaybeRenderProp<UseStepFormReturn<TFieldValues>>
63
+ Omit<FormProps<TFieldValues, TContext, any, TFieldTypes>, 'children'> {
64
+ children: MaybeRenderProp<
65
+ StepFormRenderContext<TFieldValues, TContext, TFieldTypes>
66
+ >
43
67
  }
44
68
 
45
69
  export interface UseStepFormReturn<
@@ -54,8 +78,12 @@ export interface UseStepFormReturn<
54
78
  steps: Record<string, any>
55
79
  }
56
80
 
57
- export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
58
- props: UseStepFormProps<TFieldValues>
81
+ export function useStepForm<
82
+ TFieldValues extends FieldValues = FieldValues,
83
+ TContext extends object = object,
84
+ TFieldTypes = FieldProps<TFieldValues>
85
+ >(
86
+ props: UseStepFormProps<TFieldValues, TContext, TFieldTypes>
59
87
  ): UseStepFormReturn<TFieldValues> {
60
88
  const { onChange, ...rest } = props
61
89
  const stepper = useStepper(rest)