test: 💍 Adding tests for input data

src/Inputs/Input.tsx

@@ -1,39 +1,54 @@
 import React from 'react'
 import useInertiaInput from '../useInertiaInput'
+import { NestedObject } from '../useInertiaForm'
+import { BaseFormInputProps, InputConflicts } from '.'
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-	name: string
-	model?: string
+interface InputProps<TForm extends NestedObject, T = string>
+	extends
+	Omit<React.InputHTMLAttributes<HTMLInputElement>, InputConflicts>,
+	BaseFormInputProps<T, TForm>
+{
 	component?: React.ElementType
 }
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>((
-	{ name, component = 'input', model, onChange, ...props },
-	ref,
+const Input = <TForm extends NestedObject, T = string>(
+	{ name,
+		component = 'input',
+		type = 'text',
+		model,
+		onChange,
+		errorKey,
+		defaultValue,
+		clearErrorsOnChange,
+		...props
+	}: InputProps<TForm, T>,
 ) => {
-	const { inputName, inputId, value, setValue } = useInertiaInput({ name, model })
+	const { form, inputName, inputId, value, setValue } = useInertiaInput<T, TForm>({
+		name,
+		model,
+		errorKey,
+		defaultValue,
+		clearErrorsOnChange,
+	})
 
 	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		if(onChange) {
-			onChange(e)
-			return
-		}
-
-		setValue(e.target.value)
+		const value = (e.target?.checked || e.target.value) as T
+		setValue(value)
+		onChange?.(value, form)
 	}
 
 	const Element = component
 
 	return (
 		<Element
+			type={ type }
 			name={ inputName }
 			id={ inputId }
 			value={ value }
 			onChange={ handleChange }
-			ref={ ref }
 			{ ...props }
 		/>
 	)
-})
+}
 
 export default Input

src/Inputs/index.ts

@@ -1,2 +1,21 @@
+import { UseFormProps } from '../Form'
+import { NestedObject } from '../useInertiaForm'
+import { UseInertiaInputProps } from '../useInertiaInput'
+
 export { default as Input } from './Input'
 export { default as Submit } from './Submit'
+
+export type InputConflicts = 'name'|'onChange'|'onBlur'|'onFocus'|'value'|'defaultValue'
+export interface BaseFormInputProps<T, TForm extends NestedObject = NestedObject>
+	extends UseInertiaInputProps<T>
+{
+	model?: string
+	errorKey?: string
+	field?: boolean
+	required?: boolean
+	hidden?: boolean
+	onChange?: (value: T, form: UseFormProps<TForm>) => void
+	onBlur?: (value: T, form: UseFormProps<TForm>) => void
+	onFocus?: (value: T, form: UseFormProps<TForm>) => void
+	wrapperProps?: Record<string, any>
+}

src/useInertiaInput/index.ts

@@ -36,8 +36,7 @@ const useInertiaInput = <T = string|number|boolean, TForm = NestedObject>({
 
 	// Add a valid default value to the data object
 	const initializingRef = useRef(true)
-	if(usedModel === 'values') {
-	}
+
 	useEffect(() => {
 		if(!initializingRef.current) return
 

tests/.eslintrc

@@ -1,7 +1,5 @@
 {
   "rules": {
-    "no-unused-vars": "off",
-    "@typescript-eslint/member-delimiter-style": "off",
-    "@typescript-eslint/indent": "off"
+    "no-unused-vars": "off"
   }
 }

tests/components/ContextTest.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react'
+import { NestedObject, useForm, UseFormProps } from '../../src'
+
+interface ContextTestProps<T = NestedObject> {
+	cb?: (form: UseFormProps<T>) => void
+}
+
+const ContextTest = <T = NestedObject>({ cb }: ContextTestProps<T>) => {
+	const form = useForm<T>()
+
+	useEffect(() => {
+		cb?.(form)
+	}, [cb])
+
+	return (
+		<>
+			<div data-testid="data">
+				{ JSON.stringify(form.data) }
+			</div>
+			<div data-testid="errors">
+				{ JSON.stringify(form.errors) }
+			</div>
+		</>
+	)
+
+}
+
+export default ContextTest

tests/components/data.ts

@@ -0,0 +1,40 @@
+export const multiRootData = {
+	user: {
+		username: 'some name',
+	},
+	person: {
+		first_name: 'first',
+		last_name: 'last',
+		middle_name: undefined,
+		nested: {
+			key: 'value',
+		},
+	},
+	contact: {
+		phones: [
+			{ number: '1234567890' },
+			{ number: '2234567890' },
+			{ number: '3234567890' },
+		],
+	},
+}
+
+export const singleRootData = {
+	person: {
+		first_name: 'first',
+		last_name: 'last',
+		middle_name: undefined,
+		nested: {
+			key: 'value',
+		},
+	},
+}
+
+export const flatData = {
+	first_name: 'first',
+	last_name: 'last',
+	middle_name: undefined,
+	nested: {
+		key: 'value',
+	},
+}