feat(formiks): add FormikTextInput (#29)

src/formiks/FormikCheckbox.tsx

@@ -5,9 +5,7 @@ import { Checkbox } from '../fields/Checkbox'
 
 import type { CheckboxProps } from '../fields/Checkbox'
 
-export type FormikCheckboxProps = Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onChange'> & {
-  name: string
-}
+export type FormikCheckboxProps = Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onChange'>
 export function FormikCheckbox({ name, ...originalProps }: FormikCheckboxProps) {
   const [field, , helpers] = useField(name)
 

src/formiks/FormikMultiSelect.tsx

@@ -5,9 +5,7 @@ import { MultiSelect } from '../fields/MultiSelect'
 
 import type { MultiSelectProps } from '../fields/MultiSelect'
 
-export type FormikMultiSelectProps = Omit<MultiSelectProps, 'defaultValue' | 'onChange'> & {
-  name: string
-}
+export type FormikMultiSelectProps = Omit<MultiSelectProps, 'defaultValue' | 'onChange'>
 export function FormikMultiSelect({ name, ...originalProps }: FormikMultiSelectProps) {
   const [, , helpers] = useField(name)
   // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies

src/formiks/FormikSelect.tsx

@@ -5,9 +5,7 @@ import { Select } from '../fields/Select'
 
 import type { SelectProps } from '../fields/Select'
 
-export type FormikSelectProps = Omit<SelectProps, 'defaultValue' | 'onChange'> & {
-  name: string
-}
+export type FormikSelectProps = Omit<SelectProps, 'defaultValue' | 'onChange'>
 export function FormikSelect({ name, ...originalProps }: FormikSelectProps) {
   const [, , helpers] = useField(name)
   // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies

src/formiks/FormikTextInput.tsx

@@ -0,0 +1,25 @@
+import { useField } from 'formik'
+import { useCallback, useEffect } from 'react'
+
+import { TextInput } from '../fields/TextInput'
+
+import type { TextInputProps } from '../fields/TextInput'
+
+export type FormikTextInputProps = Omit<TextInputProps, 'defaultValue' | 'onChange'>
+export function FormikTextInput({ name, ...originalProps }: FormikTextInputProps) {
+  const [, , helpers] = useField(name)
+  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
+  // both because it is useless and it will trigger infinite hook calls
+  const { setValue } = helpers
+
+  const handleChange = useCallback((nextValue: string | undefined) => {
+    setValue(nextValue)
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => () => setValue(undefined), [])
+
+  return <TextInput name={name} onChange={handleChange} {...originalProps} />
+}

src/index.ts

@@ -14,6 +14,7 @@ export { FormikDateRangePicker } from './formiks/FormikDateRangePicker'
 export { FormikEffect } from './formiks/FormikEffect'
 export { FormikMultiSelect } from './formiks/FormikMultiSelect'
 export { FormikSelect } from './formiks/FormikSelect'
+export { FormikTextInput } from './formiks/FormikTextInput'
 
 export { ThemeProvider } from './ThemeProvider'
 
@@ -32,3 +33,4 @@ export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker
 export type { FormikEffectProps } from './formiks/FormikEffect'
 export type { FormikMultiSelectProps } from './formiks/FormikMultiSelect'
 export type { FormikSelectProps } from './formiks/FormikSelect'
+export type { FormikTextInputProps } from './formiks/FormikTextInput'

stories/formiks/FormikTextInput.stories.tsx

@@ -0,0 +1,44 @@
+import { Formik } from 'formik'
+import { useState } from 'react'
+
+import { FormikEffect, FormikTextInput } from '../../src'
+import { Output } from '../_components/Output'
+import { noop } from '../_utils/noop'
+
+import type { FormikTextInputProps } from '../../src'
+
+const args: FormikTextInputProps = {
+  name: 'myTextInput'
+}
+
+export default {
+  title: 'Formiks/FormikTextInput',
+  component: FormikTextInput,
+
+  argTypes: {},
+
+  args
+}
+
+export const _FormikTextInput = (props: FormikTextInputProps) => {
+  const [outputValue, setOutputValue] = useState<
+    | {
+        myTextInput?: string
+      }
+    | '∅'
+  >('∅')
+
+  return (
+    <>
+      <Formik initialValues={{}} onSubmit={noop}>
+        <>
+          <FormikEffect onChange={setOutputValue} />
+
+          <FormikTextInput {...props} />
+        </>
+      </Formik>
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}