@saas-ui/forms 2.0.2 → 2.0.3

package/src/create-step-form.tsx

@@ -20,47 +20,41 @@ import {
 import { StepperProvider } from '@saas-ui/core'
 import { runIfFn } from '@chakra-ui/utils'
 import { GetResolver } from './form'
+import { WithStepFields } from './types'
 
-type StepFormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<
+export type StepFormType<
+  FieldDefs,
+  ExtraProps = object,
+  ExtraOverrides = object
+> = (<
   TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
   TFieldTypes = FieldProps<TFieldValues>
 >(
-  props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> & {
+  props: WithStepFields<
+    UseStepFormProps<TSteps, TFieldValues, TContext>,
+    FieldDefs,
+    ExtraOverrides
+  > & {
     ref?: React.ForwardedRef<HTMLFormElement>
-  }
-) => React.ReactElement) & {
-  displayName?: string
-  id?: string
-}
-
-export type DefaultFormType<
-  FieldDefs = any,
-  ExtraProps = object,
-  ExtraOverrides = object
-> = (<
-  TFieldValues extends Record<string, any> = any,
-  TContext extends object = object,
-  TSchema = unknown
->(
-  props: any
+  } & ExtraProps
 ) => React.ReactElement) & {
   displayName?: string
   id?: string
 }
 
-export interface CreateFormProps<FieldDefs> {
+export interface CreateStepFormProps<FieldDefs> {
   resolver?: GetResolver
   fieldResolver?: GetFieldResolver
   fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
 }
 
 export function createStepForm<
-  FieldDefs = any,
+  FieldDefs,
   ExtraProps = object,
   ExtraOverrides = object
->({ fields, resolver, fieldResolver }: CreateFormProps<FieldDefs> = {}) {
+>({ fields, resolver, fieldResolver }: CreateStepFormProps<FieldDefs> = {}) {
   const StepForm = forwardRef<any, 'div'>((props, ref) => {
     const { children, steps, ...rest } = props
 

package/src/index.ts

@@ -2,7 +2,6 @@ export * from './display-field'
 export * from './field'
 export * from './fields'
 export * from './fields-context'
-// export * from './auto-form'
 export * from './layout'
 export * from './submit-button'
 export * from './array-field'
@@ -44,6 +43,7 @@ export type {
   BaseFieldProps,
   FieldOptions,
   DefaultFieldOverrides,
+  WithStepFields,
 } from './types'
 
 export { createForm, type CreateFormProps, type FormType } from './create-form'
@@ -64,7 +64,7 @@ import { createStepForm } from './create-step-form'
  */
 export const Form = createForm()
 
-export { createStepForm } from './create-step-form'
+export { createStepForm, type CreateStepFormProps } from './create-step-form'
 
 /**
  * Multi-step form component.

package/src/step-form.tsx

@@ -27,7 +27,6 @@ import {
   UseStepFormProps,
   FormStepSubmitHandler,
 } from './use-step-form'
-import { FieldProps } from './types'
 
 export type StepsOptions<TSchema, TName extends string = string> = {
   /**
@@ -43,9 +42,8 @@ export type StepsOptions<TSchema, TName extends string = string> = {
 export interface StepFormProps<
   TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TFieldTypes = FieldProps<TFieldValues>
-> extends UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> {}
+  TContext extends object = object
+> extends UseStepFormProps<TSteps, TFieldValues, TContext> {}
 
 export interface FormStepOptions<TName extends string = string> {
   /**

package/src/types.ts

@@ -6,6 +6,8 @@ import { FormProps, FormRenderContext } from './form'
 import { SubmitButtonProps } from './submit-button'
 import { ObjectFieldProps } from './object-field'
 import { ArrayFieldProps } from './array-field'
+import { StepFormRenderContext, UseStepFormProps } from './use-step-form'
+import { StepsOptions } from './step-form'
 
 export type FieldOption = { label?: string; value: string }
 export type FieldOptions<TOption extends FieldOption = FieldOption> =
@@ -82,7 +84,7 @@ type FieldPathWithArray<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = TName | ArrayFieldPath<TName>
 
-type MergeFieldProps<
+export type MergeFieldProps<
   FieldDefs,
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
@@ -168,3 +170,40 @@ export type WithFields<
       } & ExtraOverrides
     }
   : never
+
+// StepForm types
+export type StepFormChildren<
+  FieldDefs,
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object
+> = MaybeRenderProp<
+  StepFormRenderContext<
+    TSteps,
+    TFieldValues,
+    TContext,
+    MergeFieldProps<
+      FieldDefs extends never
+        ? DefaultFields
+        : ShallowMerge<DefaultFields, FieldDefs>,
+      TFieldValues
+    >
+  >
+>
+
+export type WithStepFields<
+  TStepFormProps extends UseStepFormProps<any, any, any>,
+  FieldDefs,
+  ExtraOverrides = object
+> = TStepFormProps extends UseStepFormProps<
+  infer TSteps,
+  infer TFieldValues,
+  infer TContext
+>
+  ? Omit<TStepFormProps, 'children' | 'fields'> & {
+      children?: StepFormChildren<FieldDefs, TSteps, TFieldValues, TContext>
+      fields?: FieldOverrides<FieldDefs, TFieldValues> & {
+        submit?: SubmitButtonProps
+      } & ExtraOverrides
+    }
+  : never

package/src/use-step-form.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { FieldValues, SubmitHandler } from 'react-hook-form'
-import { createContext, MaybeRenderProp } from '@chakra-ui/react-utils'
+import { createContext } from '@chakra-ui/react-utils'
 import {
   useStepper,
   useStep,
@@ -33,10 +33,10 @@ export const [StepFormProvider, useStepFormContext] =
       'useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`',
   })
 
+import { FocusableElement } from '@chakra-ui/utils'
 import { FormProps } from './form'
 import { FormStepProps, StepsOptions } from './step-form'
-import { FieldProps } from './types'
-import { FocusableElement } from '@chakra-ui/utils'
+import { FieldProps, StepFormChildren } from './types'
 import { DisplayIfProps } from './display-if'
 import { ArrayFieldProps } from './array-field'
 import { UseArrayFieldReturn } from './use-array-field'
@@ -45,7 +45,7 @@ import { ObjectFieldProps } from './object-field'
 type StepName<T extends { [k: number]: { readonly name: string } }> =
   T[number]['name']
 
-interface StepFormRenderContext<
+export interface StepFormRenderContext<
   TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
@@ -63,14 +63,11 @@ interface StepFormRenderContext<
 export interface UseStepFormProps<
   TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TFieldTypes = FieldProps<TFieldValues>
+  TContext extends object = object
 > extends Omit<UseStepperProps, 'onChange'>,
-    Omit<FormProps<any, TFieldValues, TContext, TFieldTypes>, 'children'> {
+    Omit<FormProps<any, TFieldValues, TContext>, 'children'> {
   steps?: TSteps
-  children: MaybeRenderProp<
-    StepFormRenderContext<TSteps, TFieldValues, TContext, TFieldTypes>
-  >
+  children: StepFormChildren<any, TSteps, TFieldValues, TContext>
 }
 
 export interface UseStepFormReturn<
@@ -88,10 +85,9 @@ export interface UseStepFormReturn<
 export function useStepForm<
   TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TFieldTypes = FieldProps<TFieldValues>
+  TContext extends object = object
 >(
-  props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes>
+  props: UseStepFormProps<TSteps, TFieldValues, TContext>
 ): UseStepFormReturn<TFieldValues> {
   const { onChange, steps: stepsOptions, resolver, ...rest } = props
   const stepper = useStepper(rest)