@saas-ui/forms 2.4.1 → 2.5.1
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 +13 -0
- package/dist/ajv/index.d.mts +34 -0
- package/dist/ajv/index.d.ts +1 -1
- package/dist/index.d.mts +908 -0
- package/dist/index.d.ts +53 -31
- package/dist/index.js +111 -75
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +85 -50
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.mts +254 -0
- package/dist/yup/index.d.ts +72 -476
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.d.mts +279 -0
- package/dist/zod/index.d.ts +71 -474
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +5 -3
- package/src/base-field.tsx +29 -7
- package/src/create-field.tsx +38 -32
- package/src/create-form.tsx +30 -12
- package/src/create-step-form.tsx +23 -9
- package/src/fields-context.tsx +17 -7
- package/src/form.tsx +31 -9
- package/src/index.ts +2 -1
- package/src/types.ts +66 -42
- package/src/use-array-field.tsx +3 -2
package/dist/zod/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../zod/src/index.ts","../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../zod/src/create-zod-dialog.ts","../../zod/src/create-zod-step-form.ts"],"sourcesContent":["export {\n zodResolver,\n getFieldsFromSchema,\n getNestedSchema,\n zodFieldResolver,\n zodMeta,\n zodParseMeta,\n} from './zod-resolver'\nexport type { ZodMeta } from './zod-resolver'\nexport { createZodForm, type ZodFormType } from './create-zod-form'\nexport { createZodFormDialog } from './create-zod-dialog'\nexport { createZodStepForm } from './create-zod-step-form'\n\nimport { createZodForm } from './create-zod-form'\nimport { createZodStepForm } from './create-zod-step-form'\nimport { createZodFormDialog } from './create-zod-dialog'\n\nexport const Form = createZodForm()\n\nexport const StepForm = createZodStepForm()\n\nexport const FormDialog = createZodFormDialog(Form)\n","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 ExtraProps = {\n min?: number\n max?: number\n options?: { label: string; value: string }[]\n}\n\nconst getType = (\n field: z.ZodTypeAny\n): 'array' | 'object' | 'number' | 'date' | 'select' | 'text' => {\n if (field._def.typeName === 'ZodDefault') {\n return getType(field._def.innerType)\n }\n\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 'ZodEnum':\n return 'select'\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 def =\n field._def.typeName === 'ZodDefault'\n ? field._def.innerType._def\n : field._def\n\n const props: ExtraProps = {}\n if (def.typeName === 'ZodArray') {\n props.min = getArrayOption(field, 'minLength')\n props.max = getArrayOption(field, 'maxLength')\n } else if (def.typeName === 'ZodEnum') {\n props.options = def.values.map((value: string) => {\n return { label: value, value }\n })\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 defaultValue: field._def.defaultValue?.(),\n ...props,\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 /**\n * The label of the field\n */\n label: string\n /**\n * The type of the field\n */\n type?: string\n /**\n * Object field column count\n */\n columns?: number\n /**\n * Array field min rows\n */\n min?: number\n /**\n * Array field max rows\n */\n max?: number\n [key: string]: any\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 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 createFormDialog,\n BaseModalProps,\n FormDialogFieldOverrides,\n} from '@saas-ui/modals'\nimport { ZodFormType } from './create-zod-form'\n\nexport function createZodFormDialog<\n FieldDefs = any,\n ExtraProps = object,\n ExtraOverrides = object\n>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraOverrides>) {\n return createFormDialog(Form) as unknown as ZodFormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraOverrides & FormDialogFieldOverrides\n >\n}\n","import {\n CreateStepFormProps,\n createStepForm,\n StepsOptions,\n UseStepFormProps,\n WithStepFields,\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 CreateZodStepFormProps<FieldDefs>\n extends CreateStepFormProps<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: WithStepFields<\n UseStepFormProps<TSteps, TFieldValues, TContext>,\n FieldDefs,\n ExtraOverrides\n > & {\n steps: TSteps\n ref?: React.ForwardedRef<HTMLFormElement>\n } & ExtraProps\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodStepForm = <FieldDefs>(\n options?: CreateZodStepFormProps<FieldDefs>\n) => {\n const ZodStepForm = createStepForm<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"],"mappings":"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","names":["Form","import_forms"]}
|
1
|
+
{"version":3,"sources":["../../zod/src/index.ts","../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../zod/src/create-zod-dialog.ts","../../zod/src/create-zod-step-form.ts"],"sourcesContent":["export {\n zodResolver,\n getFieldsFromSchema,\n getNestedSchema,\n zodFieldResolver,\n zodMeta,\n zodParseMeta,\n} from './zod-resolver'\nexport type { ZodMeta } from './zod-resolver'\nexport { createZodForm, type ZodFormType } from './create-zod-form'\nexport { createZodFormDialog } from './create-zod-dialog'\nexport { createZodStepForm } from './create-zod-step-form'\n\nimport { createZodForm } from './create-zod-form'\nimport { createZodStepForm } from './create-zod-step-form'\nimport { createZodFormDialog } from './create-zod-dialog'\n\nexport const Form = createZodForm()\n\nexport const StepForm = createZodStepForm()\n\nexport const FormDialog = createZodFormDialog(Form)\n","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 ExtraProps = {\n min?: number\n max?: number\n options?: { label: string; value: string }[]\n}\n\nconst getType = (\n field: z.ZodTypeAny\n): 'array' | 'object' | 'number' | 'date' | 'select' | 'text' => {\n if (field._def.typeName === 'ZodDefault') {\n return getType(field._def.innerType)\n }\n\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 'ZodEnum':\n return 'select'\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 def =\n field._def.typeName === 'ZodDefault'\n ? field._def.innerType._def\n : field._def\n\n const props: ExtraProps = {}\n if (def.typeName === 'ZodArray') {\n props.min = getArrayOption(field, 'minLength')\n props.max = getArrayOption(field, 'maxLength')\n } else if (def.typeName === 'ZodEnum') {\n props.options = def.values.map((value: string) => {\n return { label: value, value }\n })\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 defaultValue: field._def.defaultValue?.(),\n ...props,\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 /**\n * The label of the field\n */\n label: string\n /**\n * The type of the field\n */\n type?: string\n /**\n * Object field column count\n */\n columns?: number\n /**\n * Array field min rows\n */\n min?: number\n /**\n * Array field max rows\n */\n max?: number\n [key: string]: any\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 GetBaseField,\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<\n FieldDefs,\n TGetBaseField extends GetBaseField = GetBaseField,\n> extends CreateFormProps<FieldDefs, TGetBaseField> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport type ZodFormType<\n FieldDefs,\n ExtraProps = object,\n ExtraFieldProps extends object = 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, ExtraFieldProps>,\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 = <\n FieldDefs,\n TGetBaseField extends GetBaseField<any> = GetBaseField<any>,\n>(\n options?: CreateZodFormProps<FieldDefs, TGetBaseField>\n) => {\n type ExtraFieldProps =\n TGetBaseField extends GetBaseField<infer ExtraFieldProps>\n ? ExtraFieldProps\n : object\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, object, ExtraFieldProps>\n}\n","import {\n createFormDialog,\n BaseModalProps,\n FormDialogFieldOverrides,\n} from '@saas-ui/modals'\nimport { ZodFormType } from './create-zod-form'\n\nexport function createZodFormDialog<\n FieldDefs = any,\n ExtraProps = object,\n ExtraFieldProps extends object = object,\n ExtraOverrides = object,\n>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {\n return createFormDialog(Form) as unknown as ZodFormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraFieldProps,\n ExtraOverrides & FormDialogFieldOverrides\n >\n}\n","import {\n CreateStepFormProps,\n createStepForm,\n StepsOptions,\n UseStepFormProps,\n WithStepFields,\n GetBaseField,\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 CreateZodStepFormProps<\n FieldDefs,\n TGetBaseField extends GetBaseField = GetBaseField,\n> extends CreateStepFormProps<FieldDefs, TGetBaseField> {\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 ExtraFieldProps extends object = 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: WithStepFields<\n UseStepFormProps<TSteps, TFieldValues, TContext>,\n FieldDefs,\n ExtraOverrides\n > & {\n steps: TSteps\n ref?: React.ForwardedRef<HTMLFormElement>\n } & ExtraProps\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodStepForm = <\n FieldDefs,\n TGetBaseField extends GetBaseField = GetBaseField,\n>(\n options?: CreateZodStepFormProps<FieldDefs, TGetBaseField>\n) => {\n type ExtraFieldProps =\n TGetBaseField extends GetBaseField<infer ExtraFieldProps>\n ? ExtraFieldProps\n : object\n\n const ZodStepForm = createStepForm<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, object, ExtraFieldProps>\n}\n"],"mappings":"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","names":["Form","import_forms"]}
|
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/create-zod-dialog.ts","../../zod/src/create-zod-step-form.ts","../../zod/src/index.ts"],"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 ExtraProps = {\n min?: number\n max?: number\n options?: { label: string; value: string }[]\n}\n\nconst getType = (\n field: z.ZodTypeAny\n): 'array' | 'object' | 'number' | 'date' | 'select' | 'text' => {\n if (field._def.typeName === 'ZodDefault') {\n return getType(field._def.innerType)\n }\n\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 'ZodEnum':\n return 'select'\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 def =\n field._def.typeName === 'ZodDefault'\n ? field._def.innerType._def\n : field._def\n\n const props: ExtraProps = {}\n if (def.typeName === 'ZodArray') {\n props.min = getArrayOption(field, 'minLength')\n props.max = getArrayOption(field, 'maxLength')\n } else if (def.typeName === 'ZodEnum') {\n props.options = def.values.map((value: string) => {\n return { label: value, value }\n })\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 defaultValue: field._def.defaultValue?.(),\n ...props,\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 /**\n * The label of the field\n */\n label: string\n /**\n * The type of the field\n */\n type?: string\n /**\n * Object field column count\n */\n columns?: number\n /**\n * Array field min rows\n */\n min?: number\n /**\n * Array field max rows\n */\n max?: number\n [key: string]: any\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 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 createFormDialog,\n BaseModalProps,\n FormDialogFieldOverrides,\n} from '@saas-ui/modals'\nimport { ZodFormType } from './create-zod-form'\n\nexport function createZodFormDialog<\n FieldDefs = any,\n ExtraProps = object,\n ExtraOverrides = object\n>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraOverrides>) {\n return createFormDialog(Form) as unknown as ZodFormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraOverrides & FormDialogFieldOverrides\n >\n}\n","import {\n CreateStepFormProps,\n createStepForm,\n StepsOptions,\n UseStepFormProps,\n WithStepFields,\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 CreateZodStepFormProps<FieldDefs>\n extends CreateStepFormProps<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: WithStepFields<\n UseStepFormProps<TSteps, TFieldValues, TContext>,\n FieldDefs,\n ExtraOverrides\n > & {\n steps: TSteps\n ref?: React.ForwardedRef<HTMLFormElement>\n } & ExtraProps\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodStepForm = <FieldDefs>(\n options?: CreateZodStepFormProps<FieldDefs>\n) => {\n const ZodStepForm = createStepForm<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 { ZodMeta } from './zod-resolver'\nexport { createZodForm, type ZodFormType } from './create-zod-form'\nexport { createZodFormDialog } from './create-zod-dialog'\nexport { createZodStepForm } from './create-zod-step-form'\n\nimport { createZodForm } from './create-zod-form'\nimport { createZodStepForm } from './create-zod-step-form'\nimport { createZodFormDialog } from './create-zod-dialog'\n\nexport const Form = createZodForm()\n\nexport const StepForm = createZodStepForm()\n\nexport const FormDialog = createZodFormDialog(Form)\n"],"mappings":"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","names":["Form"]}
|
1
|
+
{"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../zod/src/create-zod-dialog.ts","../../zod/src/create-zod-step-form.ts","../../zod/src/index.ts"],"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 ExtraProps = {\n min?: number\n max?: number\n options?: { label: string; value: string }[]\n}\n\nconst getType = (\n field: z.ZodTypeAny\n): 'array' | 'object' | 'number' | 'date' | 'select' | 'text' => {\n if (field._def.typeName === 'ZodDefault') {\n return getType(field._def.innerType)\n }\n\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 'ZodEnum':\n return 'select'\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 def =\n field._def.typeName === 'ZodDefault'\n ? field._def.innerType._def\n : field._def\n\n const props: ExtraProps = {}\n if (def.typeName === 'ZodArray') {\n props.min = getArrayOption(field, 'minLength')\n props.max = getArrayOption(field, 'maxLength')\n } else if (def.typeName === 'ZodEnum') {\n props.options = def.values.map((value: string) => {\n return { label: value, value }\n })\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 defaultValue: field._def.defaultValue?.(),\n ...props,\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 /**\n * The label of the field\n */\n label: string\n /**\n * The type of the field\n */\n type?: string\n /**\n * Object field column count\n */\n columns?: number\n /**\n * Array field min rows\n */\n min?: number\n /**\n * Array field max rows\n */\n max?: number\n [key: string]: any\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 GetBaseField,\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<\n FieldDefs,\n TGetBaseField extends GetBaseField = GetBaseField,\n> extends CreateFormProps<FieldDefs, TGetBaseField> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport type ZodFormType<\n FieldDefs,\n ExtraProps = object,\n ExtraFieldProps extends object = 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, ExtraFieldProps>,\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 = <\n FieldDefs,\n TGetBaseField extends GetBaseField<any> = GetBaseField<any>,\n>(\n options?: CreateZodFormProps<FieldDefs, TGetBaseField>\n) => {\n type ExtraFieldProps =\n TGetBaseField extends GetBaseField<infer ExtraFieldProps>\n ? ExtraFieldProps\n : object\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, object, ExtraFieldProps>\n}\n","import {\n createFormDialog,\n BaseModalProps,\n FormDialogFieldOverrides,\n} from '@saas-ui/modals'\nimport { ZodFormType } from './create-zod-form'\n\nexport function createZodFormDialog<\n FieldDefs = any,\n ExtraProps = object,\n ExtraFieldProps extends object = object,\n ExtraOverrides = object,\n>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>) {\n return createFormDialog(Form) as unknown as ZodFormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraFieldProps,\n ExtraOverrides & FormDialogFieldOverrides\n >\n}\n","import {\n CreateStepFormProps,\n createStepForm,\n StepsOptions,\n UseStepFormProps,\n WithStepFields,\n GetBaseField,\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 CreateZodStepFormProps<\n FieldDefs,\n TGetBaseField extends GetBaseField = GetBaseField,\n> extends CreateStepFormProps<FieldDefs, TGetBaseField> {\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 ExtraFieldProps extends object = 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: WithStepFields<\n UseStepFormProps<TSteps, TFieldValues, TContext>,\n FieldDefs,\n ExtraOverrides\n > & {\n steps: TSteps\n ref?: React.ForwardedRef<HTMLFormElement>\n } & ExtraProps\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodStepForm = <\n FieldDefs,\n TGetBaseField extends GetBaseField = GetBaseField,\n>(\n options?: CreateZodStepFormProps<FieldDefs, TGetBaseField>\n) => {\n type ExtraFieldProps =\n TGetBaseField extends GetBaseField<infer ExtraFieldProps>\n ? ExtraFieldProps\n : object\n\n const ZodStepForm = createStepForm<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, object, ExtraFieldProps>\n}\n","export {\n zodResolver,\n getFieldsFromSchema,\n getNestedSchema,\n zodFieldResolver,\n zodMeta,\n zodParseMeta,\n} from './zod-resolver'\nexport type { ZodMeta } from './zod-resolver'\nexport { createZodForm, type ZodFormType } from './create-zod-form'\nexport { createZodFormDialog } from './create-zod-dialog'\nexport { createZodStepForm } from './create-zod-step-form'\n\nimport { createZodForm } from './create-zod-form'\nimport { createZodStepForm } from './create-zod-step-form'\nimport { createZodFormDialog } from './create-zod-dialog'\n\nexport const Form = createZodForm()\n\nexport const StepForm = createZodStepForm()\n\nexport const FormDialog = createZodFormDialog(Form)\n"],"mappings":"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","names":["Form"]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@saas-ui/forms",
|
3
|
-
"version": "2.
|
3
|
+
"version": "2.5.1",
|
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.3.4",
|
107
|
-
"@saas-ui/core": "2.4.
|
107
|
+
"@saas-ui/core": "2.4.2",
|
108
108
|
"react-hook-form": "^7.50.1"
|
109
109
|
},
|
110
110
|
"peerDependencies": {
|
@@ -121,7 +121,9 @@
|
|
121
121
|
"ajv-errors": "^3.0.0",
|
122
122
|
"json-schema-to-ts": "^2.12.0",
|
123
123
|
"tsd": "^0.28.1",
|
124
|
-
"
|
124
|
+
"tsup": "^8.0.2",
|
125
|
+
"typescript": "^5.4.2",
|
126
|
+
"yup": "^1.4.0",
|
125
127
|
"zod": "^3.22.4"
|
126
128
|
},
|
127
129
|
"tsd": {
|
package/src/base-field.tsx
CHANGED
@@ -9,9 +9,11 @@ import {
|
|
9
9
|
FormErrorMessage,
|
10
10
|
} from '@chakra-ui/react'
|
11
11
|
|
12
|
+
import { splitProps } from '@saas-ui/core'
|
13
|
+
|
12
14
|
import { useFormContext } from './form-context'
|
13
15
|
|
14
|
-
import { BaseFieldProps
|
16
|
+
import { BaseFieldProps } from './types'
|
15
17
|
|
16
18
|
const getError = (name: string, formState: FormState<{ [x: string]: any }>) => {
|
17
19
|
return get(formState.errors, name)
|
@@ -24,22 +26,42 @@ const isTouched = (
|
|
24
26
|
return get(formState.touchedFields, name)
|
25
27
|
}
|
26
28
|
|
29
|
+
export const useBaseField = (props: BaseFieldProps) => {
|
30
|
+
const [fieldProps] = splitProps(props, ['name', 'label', 'help', 'hideLabel'])
|
31
|
+
|
32
|
+
const [controlProps] = splitProps(props, [
|
33
|
+
'id',
|
34
|
+
'isDisabled',
|
35
|
+
'isInvalid',
|
36
|
+
'isReadOnly',
|
37
|
+
'isRequired',
|
38
|
+
])
|
39
|
+
|
40
|
+
const { formState } = useFormContext()
|
41
|
+
|
42
|
+
const error = getError(fieldProps.name, formState)
|
43
|
+
const touched = isTouched(fieldProps.name, formState)
|
44
|
+
|
45
|
+
return {
|
46
|
+
...fieldProps,
|
47
|
+
controlProps,
|
48
|
+
error,
|
49
|
+
touched,
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
27
53
|
/**
|
28
54
|
* The default BaseField component
|
29
55
|
* Composes the Chakra UI FormControl component, with FormLabel, FormHelperText and FormErrorMessage.
|
30
56
|
*/
|
31
57
|
export const BaseField: React.FC<BaseFieldProps> = (props) => {
|
32
|
-
const {
|
33
|
-
|
34
|
-
const { formState } = useFormContext()
|
35
|
-
|
36
|
-
const error = getError(name, formState)
|
58
|
+
const { controlProps, label, help, hideLabel, error } = useBaseField(props)
|
37
59
|
|
38
60
|
return (
|
39
61
|
<FormControl {...controlProps} isInvalid={!!error}>
|
40
62
|
{label && !hideLabel ? <FormLabel>{label}</FormLabel> : null}
|
41
63
|
<Box>
|
42
|
-
{children}
|
64
|
+
{props.children}
|
43
65
|
{help && !error?.message ? (
|
44
66
|
<FormHelperText>{help}</FormHelperText>
|
45
67
|
) : null}
|
package/src/create-field.tsx
CHANGED
@@ -3,58 +3,61 @@ import { Controller } from 'react-hook-form'
|
|
3
3
|
|
4
4
|
import { forwardRef, useMergeRefs } from '@chakra-ui/react'
|
5
5
|
import { callAllHandlers } from '@chakra-ui/utils'
|
6
|
-
|
6
|
+
|
7
|
+
import { splitProps } from '@saas-ui/core/utils'
|
8
|
+
|
9
|
+
import { BaseFieldProps, FieldProps, GetBaseField } from './types'
|
7
10
|
import { BaseField } from './base-field'
|
8
11
|
import { useFormContext } from './form-context'
|
12
|
+
import { useFieldsContext } from './fields-context'
|
9
13
|
|
10
|
-
interface CreateFieldProps {
|
14
|
+
interface CreateFieldProps<ExtraFieldProps extends object = object> {
|
11
15
|
displayName: string
|
12
16
|
hideLabel?: boolean
|
13
|
-
|
17
|
+
getBaseField: GetBaseField<ExtraFieldProps>
|
14
18
|
}
|
15
19
|
|
16
20
|
const _createField = (
|
17
21
|
InputComponent: React.FC<any>,
|
18
|
-
{ displayName, hideLabel,
|
22
|
+
{ displayName, hideLabel, getBaseField: getBaseFieldProp }: CreateFieldProps
|
19
23
|
) => {
|
20
|
-
const Field = forwardRef((props, ref) => {
|
21
|
-
const {
|
22
|
-
id,
|
23
|
-
name,
|
24
|
-
label,
|
25
|
-
help,
|
26
|
-
isDisabled,
|
27
|
-
isInvalid,
|
28
|
-
isReadOnly,
|
29
|
-
isRequired,
|
30
|
-
rules,
|
31
|
-
...inputProps
|
32
|
-
} = props
|
24
|
+
const Field = forwardRef<any, 'div'>((props, ref) => {
|
25
|
+
const { id, name, label, isRequired, rules } = props
|
33
26
|
|
34
27
|
const inputRules = {
|
35
28
|
required: isRequired,
|
36
29
|
...rules,
|
37
30
|
}
|
38
31
|
|
32
|
+
const fieldContext = useFieldsContext()
|
33
|
+
|
34
|
+
const getBaseField = fieldContext?.getBaseField ?? getBaseFieldProp
|
35
|
+
|
36
|
+
const { extraProps, BaseField } = getBaseField()
|
37
|
+
|
38
|
+
const [, inputProps] = splitProps(
|
39
|
+
props,
|
40
|
+
[
|
41
|
+
'children',
|
42
|
+
'name',
|
43
|
+
'label',
|
44
|
+
'isRequired',
|
45
|
+
'isDisabled',
|
46
|
+
'isInvalid',
|
47
|
+
'isReadOnly',
|
48
|
+
'help',
|
49
|
+
].concat(extraProps)
|
50
|
+
)
|
51
|
+
|
39
52
|
return (
|
40
|
-
<BaseField
|
41
|
-
id={id}
|
42
|
-
name={name}
|
43
|
-
label={label}
|
44
|
-
help={help}
|
45
|
-
hideLabel={hideLabel}
|
46
|
-
isDisabled={isDisabled}
|
47
|
-
isInvalid={isInvalid}
|
48
|
-
isReadOnly={isReadOnly}
|
49
|
-
isRequired={isRequired}
|
50
|
-
>
|
53
|
+
<BaseField {...props}>
|
51
54
|
<InputComponent
|
52
55
|
ref={ref}
|
53
56
|
id={id}
|
54
57
|
name={name}
|
55
58
|
label={hideLabel ? label : undefined} // Only pass down the label when it should be inline.
|
56
|
-
rules={inputRules}
|
57
59
|
{...inputProps}
|
60
|
+
rules={inputRules}
|
58
61
|
/>
|
59
62
|
</BaseField>
|
60
63
|
)
|
@@ -114,7 +117,7 @@ const withUncontrolledInput = (InputComponent: React.FC<any>) => {
|
|
114
117
|
)
|
115
118
|
}
|
116
119
|
|
117
|
-
export interface CreateFieldOptions {
|
120
|
+
export interface CreateFieldOptions<TProps extends object> {
|
118
121
|
isControlled?: boolean
|
119
122
|
hideLabel?: boolean
|
120
123
|
BaseField?: React.FC<any>
|
@@ -130,7 +133,7 @@ export interface CreateFieldOptions {
|
|
130
133
|
*/
|
131
134
|
export const createField = <TProps extends object>(
|
132
135
|
component: React.FC<TProps>,
|
133
|
-
options?: CreateFieldOptions
|
136
|
+
options?: CreateFieldOptions<TProps>
|
134
137
|
) => {
|
135
138
|
let InputComponent
|
136
139
|
if (options?.isControlled) {
|
@@ -142,7 +145,10 @@ export const createField = <TProps extends object>(
|
|
142
145
|
const Field = _createField(InputComponent, {
|
143
146
|
displayName: `${component.displayName ?? 'Custom'}Field`,
|
144
147
|
hideLabel: options?.hideLabel,
|
145
|
-
|
148
|
+
getBaseField: () => ({
|
149
|
+
extraProps: [],
|
150
|
+
BaseField,
|
151
|
+
}),
|
146
152
|
}) as React.FC<Omit<BaseFieldProps, keyof TProps> & TProps>
|
147
153
|
|
148
154
|
return Field
|
package/src/create-form.tsx
CHANGED
@@ -1,28 +1,34 @@
|
|
1
1
|
import React, { ForwardedRef } from 'react'
|
2
|
+
import { forwardRef } from '@chakra-ui/react'
|
3
|
+
|
2
4
|
import { FieldsProvider } from './fields-context'
|
3
5
|
import { Form, FieldValues, FormProps, GetResolver } from './form'
|
4
|
-
import {
|
6
|
+
import { GetBaseField, WithFields } from './types'
|
5
7
|
import { objectFieldResolver } from './field-resolver'
|
6
8
|
import { GetFieldResolver } from './field-resolver'
|
7
|
-
import { forwardRef } from '@chakra-ui/react'
|
8
9
|
|
9
|
-
export interface CreateFormProps<
|
10
|
+
export interface CreateFormProps<
|
11
|
+
FieldDefs,
|
12
|
+
TGetBaseField extends GetBaseField = GetBaseField,
|
13
|
+
> {
|
10
14
|
resolver?: GetResolver
|
11
15
|
fieldResolver?: GetFieldResolver
|
12
16
|
fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
|
17
|
+
getBaseField?: TGetBaseField
|
13
18
|
}
|
14
19
|
|
15
20
|
export type FormType<
|
16
21
|
FieldDefs,
|
17
22
|
ExtraProps = object,
|
18
|
-
|
23
|
+
ExtraFieldProps extends object = object,
|
24
|
+
ExtraOverrides = object,
|
19
25
|
> = (<
|
20
26
|
TSchema = unknown,
|
21
27
|
TFieldValues extends FieldValues = FieldValues,
|
22
|
-
TContext extends object = object
|
28
|
+
TContext extends object = object,
|
23
29
|
>(
|
24
30
|
props: WithFields<
|
25
|
-
FormProps<TSchema, TFieldValues, TContext>,
|
31
|
+
FormProps<TSchema, TFieldValues, TContext, ExtraFieldProps>,
|
26
32
|
FieldDefs,
|
27
33
|
ExtraOverrides
|
28
34
|
> & {
|
@@ -33,18 +39,30 @@ export type FormType<
|
|
33
39
|
id?: string
|
34
40
|
}
|
35
41
|
|
36
|
-
export function createForm<
|
42
|
+
export function createForm<
|
43
|
+
FieldDefs,
|
44
|
+
TGetBaseField extends GetBaseField<any> = GetBaseField<any>,
|
45
|
+
>({
|
37
46
|
resolver,
|
38
47
|
fieldResolver = objectFieldResolver,
|
39
48
|
fields,
|
40
|
-
|
49
|
+
getBaseField,
|
50
|
+
}: CreateFormProps<FieldDefs, TGetBaseField> = {}) {
|
51
|
+
type ExtraFieldProps =
|
52
|
+
TGetBaseField extends GetBaseField<infer ExtraFieldProps>
|
53
|
+
? ExtraFieldProps
|
54
|
+
: object
|
55
|
+
|
41
56
|
const DefaultForm = forwardRef(
|
42
57
|
<
|
43
58
|
TSchema = any,
|
44
59
|
TFieldValues extends FieldValues = FieldValues,
|
45
|
-
TContext extends object = object
|
60
|
+
TContext extends object = object,
|
46
61
|
>(
|
47
|
-
props: WithFields<
|
62
|
+
props: WithFields<
|
63
|
+
FormProps<TSchema, TFieldValues, TContext, ExtraFieldProps>,
|
64
|
+
FieldDefs
|
65
|
+
>,
|
48
66
|
ref: ForwardedRef<HTMLFormElement>
|
49
67
|
) => {
|
50
68
|
const {
|
@@ -55,7 +73,7 @@ export function createForm<FieldDefs>({
|
|
55
73
|
} = props
|
56
74
|
|
57
75
|
return (
|
58
|
-
<FieldsProvider value={fields
|
76
|
+
<FieldsProvider value={{ fields, getBaseField }}>
|
59
77
|
<Form
|
60
78
|
ref={ref}
|
61
79
|
resolver={resolverProp ?? resolver?.(props.schema)}
|
@@ -65,7 +83,7 @@ export function createForm<FieldDefs>({
|
|
65
83
|
</FieldsProvider>
|
66
84
|
)
|
67
85
|
}
|
68
|
-
) as FormType<FieldDefs>
|
86
|
+
) as FormType<FieldDefs, object, ExtraFieldProps>
|
69
87
|
|
70
88
|
DefaultForm.displayName = 'Form'
|
71
89
|
DefaultForm.id = 'Form'
|
package/src/create-step-form.tsx
CHANGED
@@ -20,17 +20,18 @@ import {
|
|
20
20
|
import { StepperProvider } from '@saas-ui/core'
|
21
21
|
import { runIfFn } from '@chakra-ui/utils'
|
22
22
|
import { GetResolver } from './form'
|
23
|
-
import { WithStepFields } from './types'
|
23
|
+
import { GetBaseField, WithStepFields } from './types'
|
24
24
|
|
25
25
|
export type StepFormType<
|
26
26
|
FieldDefs,
|
27
27
|
ExtraProps = object,
|
28
|
-
|
28
|
+
ExtraFieldProps extends object = object,
|
29
|
+
ExtraOverrides = object,
|
29
30
|
> = (<
|
30
31
|
TSteps extends StepsOptions<any> = StepsOptions<any>,
|
31
32
|
TFieldValues extends FieldValues = FieldValues,
|
32
33
|
TContext extends object = object,
|
33
|
-
TFieldTypes = FieldProps<TFieldValues
|
34
|
+
TFieldTypes = FieldProps<TFieldValues, ExtraFieldProps>,
|
34
35
|
>(
|
35
36
|
props: WithStepFields<
|
36
37
|
UseStepFormProps<TSteps, TFieldValues, TContext>,
|
@@ -44,17 +45,30 @@ export type StepFormType<
|
|
44
45
|
id?: string
|
45
46
|
}
|
46
47
|
|
47
|
-
export interface CreateStepFormProps<
|
48
|
+
export interface CreateStepFormProps<
|
49
|
+
FieldDefs,
|
50
|
+
TGetBaseField extends GetBaseField = GetBaseField,
|
51
|
+
> {
|
48
52
|
resolver?: GetResolver
|
49
53
|
fieldResolver?: GetFieldResolver
|
50
54
|
fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
|
55
|
+
getBaseField?: TGetBaseField
|
51
56
|
}
|
52
57
|
|
53
58
|
export function createStepForm<
|
54
59
|
FieldDefs,
|
55
|
-
|
56
|
-
|
57
|
-
|
60
|
+
TGetBaseField extends GetBaseField<any> = GetBaseField<any>,
|
61
|
+
>({
|
62
|
+
fields,
|
63
|
+
resolver,
|
64
|
+
fieldResolver,
|
65
|
+
getBaseField,
|
66
|
+
}: CreateStepFormProps<FieldDefs, TGetBaseField> = {}) {
|
67
|
+
type ExtraFieldProps =
|
68
|
+
TGetBaseField extends GetBaseField<infer ExtraFieldProps>
|
69
|
+
? ExtraFieldProps
|
70
|
+
: object
|
71
|
+
|
58
72
|
const StepForm = forwardRef<any, 'div'>((props, ref) => {
|
59
73
|
const { children, steps, ...rest } = props
|
60
74
|
|
@@ -71,7 +85,7 @@ export function createStepForm<
|
|
71
85
|
return (
|
72
86
|
<StepperProvider value={context}>
|
73
87
|
<StepFormProvider value={context}>
|
74
|
-
<FieldsProvider value={fields
|
88
|
+
<FieldsProvider value={{ fields, getBaseField }}>
|
75
89
|
<Form ref={ref} {...rest} {...getFormProps()}>
|
76
90
|
{runIfFn(children, {
|
77
91
|
...stepper,
|
@@ -86,7 +100,7 @@ export function createStepForm<
|
|
86
100
|
</StepFormProvider>
|
87
101
|
</StepperProvider>
|
88
102
|
)
|
89
|
-
}) as StepFormType<FieldDefs,
|
103
|
+
}) as StepFormType<FieldDefs, object, ExtraFieldProps>
|
90
104
|
|
91
105
|
StepForm.displayName = `Step${Form.displayName || Form.name}`
|
92
106
|
|
package/src/fields-context.tsx
CHANGED
@@ -1,23 +1,33 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { defaultFieldTypes, InputField } from './default-fields'
|
3
|
+
import { GetBaseField } from './types'
|
3
4
|
|
4
|
-
|
5
|
-
|
6
|
-
|
5
|
+
export interface FieldsContextValue {
|
6
|
+
fields: Record<string, React.FC<any>>
|
7
|
+
getBaseField?: GetBaseField<any>
|
8
|
+
}
|
9
|
+
|
10
|
+
const FieldsContext = React.createContext<FieldsContextValue | null>(null)
|
7
11
|
|
8
12
|
export const FieldsProvider: React.FC<{
|
9
|
-
value:
|
13
|
+
value: Partial<FieldsContextValue>
|
10
14
|
children: React.ReactNode
|
11
15
|
}> = (props) => {
|
12
|
-
const fields = { ...defaultFieldTypes, ...props.value }
|
16
|
+
const fields = { ...defaultFieldTypes, ...props.value.fields }
|
13
17
|
return (
|
14
|
-
<FieldsContext.Provider
|
18
|
+
<FieldsContext.Provider
|
19
|
+
value={{ fields, getBaseField: props.value.getBaseField }}
|
20
|
+
>
|
15
21
|
{props.children}
|
16
22
|
</FieldsContext.Provider>
|
17
23
|
)
|
18
24
|
}
|
19
25
|
|
26
|
+
export const useFieldsContext = () => {
|
27
|
+
return React.useContext(FieldsContext)
|
28
|
+
}
|
29
|
+
|
20
30
|
export const useField = (type: string): React.FC<any> => {
|
21
31
|
const context = React.useContext(FieldsContext)
|
22
|
-
return context?.[type] || InputField
|
32
|
+
return context?.fields?.[type] || InputField
|
23
33
|
}
|
package/src/form.tsx
CHANGED
@@ -34,7 +34,7 @@ import { UseArrayFieldReturn } from './use-array-field'
|
|
34
34
|
export interface FormRenderContext<
|
35
35
|
TFieldValues extends FieldValues = FieldValues,
|
36
36
|
TContext extends object = object,
|
37
|
-
TFieldTypes = FieldProps<TFieldValues
|
37
|
+
TFieldTypes = FieldProps<TFieldValues>,
|
38
38
|
> extends UseFormReturn<TFieldValues, TContext> {
|
39
39
|
Field: React.FC<TFieldTypes & React.RefAttributes<FocusableElement>>
|
40
40
|
DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
|
@@ -48,7 +48,8 @@ interface FormOptions<
|
|
48
48
|
TSchema = unknown,
|
49
49
|
TFieldValues extends FieldValues = FieldValues,
|
50
50
|
TContext extends object = object,
|
51
|
-
|
51
|
+
TExtraFieldProps extends object = object,
|
52
|
+
TFieldTypes = FieldProps<TFieldValues, TExtraFieldProps>,
|
52
53
|
> {
|
53
54
|
/**
|
54
55
|
* The form schema.
|
@@ -90,13 +91,20 @@ export interface FormProps<
|
|
90
91
|
TSchema = unknown,
|
91
92
|
TFieldValues extends FieldValues = FieldValues,
|
92
93
|
TContext extends object = object,
|
93
|
-
|
94
|
+
TExtraFieldProps extends object = object,
|
95
|
+
TFieldTypes = FieldProps<TFieldValues, TExtraFieldProps>,
|
94
96
|
> extends UseFormProps<TFieldValues, TContext>,
|
95
97
|
Omit<
|
96
98
|
HTMLChakraProps<'form'>,
|
97
99
|
'children' | 'onChange' | 'onSubmit' | 'onError'
|
98
100
|
>,
|
99
|
-
FormOptions<
|
101
|
+
FormOptions<
|
102
|
+
TSchema,
|
103
|
+
TFieldValues,
|
104
|
+
TContext,
|
105
|
+
TExtraFieldProps,
|
106
|
+
TFieldTypes
|
107
|
+
> {}
|
100
108
|
|
101
109
|
/**
|
102
110
|
* The wrapper component provides context, state, and focus management.
|
@@ -108,9 +116,16 @@ export const Form = forwardRef(
|
|
108
116
|
TSchema = any,
|
109
117
|
TFieldValues extends FieldValues = FieldValues,
|
110
118
|
TContext extends object = object,
|
111
|
-
|
119
|
+
TExtraFieldProps extends object = object,
|
120
|
+
TFieldTypes = FieldProps<TFieldValues>,
|
112
121
|
>(
|
113
|
-
props: FormProps<
|
122
|
+
props: FormProps<
|
123
|
+
TSchema,
|
124
|
+
TFieldValues,
|
125
|
+
TContext,
|
126
|
+
TExtraFieldProps,
|
127
|
+
TFieldTypes
|
128
|
+
>,
|
114
129
|
ref: React.ForwardedRef<HTMLFormElement>
|
115
130
|
) => {
|
116
131
|
const {
|
@@ -206,9 +221,16 @@ export type FormComponent = (<
|
|
206
221
|
TSchema = unknown,
|
207
222
|
TFieldValues extends FieldValues = FieldValues,
|
208
223
|
TContext extends object = object,
|
209
|
-
|
224
|
+
TExtraFieldProps extends object = object,
|
225
|
+
TFieldTypes = FieldProps<TFieldValues>,
|
210
226
|
>(
|
211
|
-
props: FormProps<
|
227
|
+
props: FormProps<
|
228
|
+
TSchema,
|
229
|
+
TFieldValues,
|
230
|
+
TContext,
|
231
|
+
TExtraFieldProps,
|
232
|
+
TFieldTypes
|
233
|
+
> & {
|
212
234
|
ref?: React.ForwardedRef<HTMLFormElement>
|
213
235
|
}
|
214
236
|
) => React.ReactElement) & {
|
@@ -219,7 +241,7 @@ Form.displayName = 'Form'
|
|
219
241
|
|
220
242
|
export type GetResolver = <
|
221
243
|
TFieldValues extends FieldValues,
|
222
|
-
TContext extends object
|
244
|
+
TContext extends object,
|
223
245
|
>(
|
224
246
|
schema: unknown
|
225
247
|
) => (
|
package/src/index.ts
CHANGED
@@ -140,7 +140,7 @@ export { RadioInput } from './radio'
|
|
140
140
|
export type { RadioInputProps, RadioOption, RadioOptions } from './radio'
|
141
141
|
|
142
142
|
// Exporting BaseField from './base-field'
|
143
|
-
export { BaseField } from './base-field'
|
143
|
+
export { BaseField, useBaseField } from './base-field'
|
144
144
|
|
145
145
|
// Exporting from './default-fields'
|
146
146
|
export {
|
@@ -178,6 +178,7 @@ export type {
|
|
178
178
|
FieldOptions,
|
179
179
|
DefaultFieldOverrides,
|
180
180
|
WithStepFields,
|
181
|
+
GetBaseField,
|
181
182
|
} from './types'
|
182
183
|
|
183
184
|
// Exporting from './create-form'
|