feat(forminput): add FormInput component, storybook

src/components/FormInput/FormInput.stories.tsx

@@ -0,0 +1,41 @@
+// import { action } from '@storybook/addon-actions';
+import { Button, FormLabel } from '@twilio-paste/core';
+import { Theme } from '@twilio-paste/theme';
+import { Formik } from 'formik';
+import * as React from 'react';
+
+import { FormInput } from './FormInput';
+
+export default {
+  title: 'FormInput',
+};
+
+export const Basic: React.FC = () => (
+  <Theme.Provider theme="default">
+    <Formik
+      initialValues={{ checkbox: true }}
+      onSubmit={(values) => {
+        // eslint-disable-next-line no-alert
+        window.alert(JSON.stringify(values));
+      }}
+    >
+      {({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <FormLabel htmlFor="email_address">Email Address</FormLabel>
+
+          <FormInput
+            aria-describedby="email_error_help_text"
+            id="email_address"
+            name="email_address"
+            type="email"
+            placeholder="[email protected]"
+          />
+
+          <Button variant="primary" type="submit">
+            Submit
+          </Button>
+        </form>
+      )}
+    </Formik>
+  </Theme.Provider>
+);

src/components/FormInput/FormInput.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { FieldProps } from 'formik';
+import { FormInput as $FormInput, FormInputProps as $FormInputProps } from '@twilio-paste/core';
+
+import { FormikFieldProps } from '../../interfaces';
+import { Field } from '../Field';
+
+export type FormInputProps = FormikFieldProps & Omit<$FormInputProps, 'value'>;
+
+export const FormInput = React.forwardRef(
+  (
+    { name, validate, fast, onChange: $onChange, onBlur: $onBlur, ...restProps }: FormInputProps,
+    ref: React.Ref<typeof $FormInput>,
+  ) => (
+    <Field name={name} validate={validate} fast={fast}>
+      {({ field: { value, onChange, onBlur } }: FieldProps) => (
+        <$FormInput
+          {...restProps}
+          ref={(ref as unknown) as React.RefObject<HTMLInputElement>}
+          name={name}
+          value={value}
+          onChange={(event) => {
+            onChange(event);
+            $onChange?.(event);
+          }}
+          onBlur={(event) => {
+            onBlur(event);
+            $onBlur?.(event);
+          }}
+        />
+      )}
+    </Field>
+  ),
+);
+
+FormInput.displayName = 'FormInput';
+
+export default FormInput;

src/components/FormInput/index.ts

@@ -0,0 +1,5 @@
+import { FormInput } from './FormInput';
+
+export { FormInput };
+
+export default FormInput;