feat(fields): add TextInput (#28)

src/fields/TextInput.tsx

@@ -0,0 +1,37 @@
+import { useCallback, useMemo } from 'react'
+import { Input } from 'rsuite'
+import styled from 'styled-components'
+
+import type { InputProps } from 'rsuite'
+import type { Promisable } from 'type-fest'
+
+export type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'onChange' | 'value'> & {
+  defaultValue?: string
+  name: string
+  onChange?: (nextValue: string | undefined) => Promisable<void>
+}
+export function TextInput({ onChange, ...originalProps }: TextInputProps) {
+  const key = useMemo(
+    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,
+    [originalProps.defaultValue, originalProps.name]
+  )
+
+  const handleChange = useCallback(
+    (nextValue: string | null) => {
+      if (!onChange) {
+        return
+      }
+
+      const normalizedNextValue = nextValue && nextValue.trim().length ? nextValue : undefined
+
+      onChange(normalizedNextValue)
+    },
+    [onChange]
+  )
+
+  return <StyledInput key={key} onChange={handleChange} {...originalProps} />
+}
+
+export const StyledInput = styled(Input)`
+  background-color: ${p => p.theme.color.white};
+`

src/index.ts

@@ -6,6 +6,7 @@ export { DateRangePicker } from './fields/DateRangePicker'
 export { DatePicker } from './fields/DatePicker'
 export { MultiSelect } from './fields/MultiSelect'
 export { Select } from './fields/Select'
+export { TextInput } from './fields/TextInput'
 
 export { FormikCheckbox } from './formiks/FormikCheckbox'
 export { FormikDatePicker } from './formiks/FormikDatePicker'
@@ -23,6 +24,7 @@ export type { DateRangePickerProps } from './fields/DateRangePicker'
 export type { DatePickerProps } from './fields/DatePicker'
 export type { MultiSelectProps } from './fields/MultiSelect'
 export type { SelectProps } from './fields/Select'
+export type { TextInputProps } from './fields/TextInput'
 
 export type { FormikCheckboxProps } from './formiks/FormikCheckbox'
 export type { FormikDatePickerProps } from './formiks/FormikDatePicker'

stories/fields/TextInput.stories.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+
+import { TextInput } from '../../src'
+import { Output } from '../_components/Output'
+
+import type { TextInputProps } from '../../src'
+
+const args: TextInputProps = {
+  defaultValue: undefined,
+  name: 'myTextInput'
+}
+
+export default {
+  title: 'Fields/TextInput',
+  component: TextInput,
+
+  argTypes: {
+    defaultValue: {
+      control: 'text'
+    },
+    isMulti: {
+      control: 'boolean'
+    }
+  },
+
+  args
+}
+
+export function _TextInput(props: TextInputProps) {
+  const [outputValue, setOutputValue] = useState<string | undefined | '∅'>('∅')
+
+  return (
+    <>
+      <TextInput {...props} onChange={setOutputValue} />
+
+      {outputValue !== '∅' && <Output value={outputValue} />}
+    </>
+  )
+}