feat #65 - Update Typescript types

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<string, any>
+	initialValues: FieldValues
 	loading: boolean
-	onSubmit: (data: any) => void
+	onSubmit: SubmitHandler<FieldValues>
 }
 
 const FieldContext = createContext<FieldContextProps>({} as FieldContextProps)

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 => (
-	<Form onSubmit={action('onSubmit')} {...args}>
+interface UserModel {
+	firstName: string
+	lastName?: string
+}
+
+const Template: Story<FormProps<UserModel>> = (args: FormProps<UserModel>) => (
+	<Form {...args}>
 		<Form.Input label='First Name' name='firstName' required />
 		<Form.Input label='Last Name' name='lastName' />
 		<Form.Button />

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<Model> {
 	children: ReactNode
-	initialValues?: Record<string, any>
+	initialValues?: Model
 	loading?: boolean
-	onSubmit: (data: any) => void
+	onSubmit: SubmitHandler<FieldValues>
 }
 
-interface FormSubComponents {
-	Button: FC<FormButtonProps>
-	Input: FC<FormInputProps>
-}
-
-const Form: FC<FormProps> & FormSubComponents = ({
+function Form<Model>({
 	children,
-	initialValues = {},
+	initialValues = {} as Model,
 	loading = false,
 	onSubmit
-}: FormProps) => {
+}: FormProps<Model>) {
 	const classes = useStyles()
 	const methods = useForm()