diff --git a/src/components/Form/FieldContext.ts b/src/components/Form/FieldContext.ts index e56bb792..11674868 100644 --- a/src/components/Form/FieldContext.ts +++ b/src/components/Form/FieldContext.ts @@ -1,9 +1,11 @@ import { createContext } from 'react' +import { FieldValues } from 'react-hook-form/dist/types/form' +import { SubmitHandler } from 'react-hook-form' export interface FieldContextProps { - initialValues: Record + initialValues: FieldValues loading: boolean - onSubmit: (data: any) => void + onSubmit: SubmitHandler } const FieldContext = createContext({} as FieldContextProps) diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx index a8497af9..c3eb7160 100644 --- a/src/components/Form/Form.stories.tsx +++ b/src/components/Form/Form.stories.tsx @@ -1,6 +1,5 @@ -import { action } from '@storybook/addon-actions' -import Form from './index' import React from 'react' +import Form, { FormProps } from './index' import { Meta, Story } from '@storybook/react/types-6-0' export default { @@ -14,8 +13,13 @@ export default { title: 'Form' } as Meta -const Template: Story = args => ( -
+interface UserModel { + firstName: string + lastName?: string +} + +const Template: Story> = (args: FormProps) => ( + diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx index f43e9ca3..e12ff161 100644 --- a/src/components/Form/index.tsx +++ b/src/components/Form/index.tsx @@ -1,9 +1,10 @@ import { createUseStyles } from 'react-jss' import FieldContext from './FieldContext' -import FormButton, { FormButtonProps } from './FormButton' -import FormInput, { FormInputProps } from './FormInput' -import { FormProvider, useForm } from 'react-hook-form' -import React, { FC, ReactNode } from 'react' +import { FieldValues } from 'react-hook-form/dist/types/form' +import FormButton from './FormButton' +import FormInput from './FormInput' +import { FormProvider, SubmitHandler, useForm } from 'react-hook-form' +import React, { ReactNode } from 'react' const useStyles = createUseStyles({ container: { @@ -13,24 +14,19 @@ const useStyles = createUseStyles({ } }) -export interface FormProps { +export interface FormProps { children: ReactNode - initialValues?: Record + initialValues?: Model loading?: boolean - onSubmit: (data: any) => void + onSubmit: SubmitHandler } -interface FormSubComponents { - Button: FC - Input: FC -} - -const Form: FC & FormSubComponents = ({ +function Form({ children, - initialValues = {}, + initialValues = {} as Model, loading = false, onSubmit -}: FormProps) => { +}: FormProps) { const classes = useStyles() const methods = useForm()