fix(DateInput): Export PhoneInput and DateInput; Add initialValue pro…

…p to DateInput (#36)

## Fix
I forgot to include theses exports in #34 😞Seems like something a robot should disallow 

## Add
Also adds support to DateInput for an `initialValue` prop. This solves an issue where the database stores ISO dates (YYYY-MM-DD) but we want to display MM/DD/YYYY on the client. We can't format the `value` prop, otherwise we'll incorrectly format incomplete dates on every render.

src/Form/DateInput.js

@@ -34,15 +34,26 @@ const formatDate = (pattern, delimiter, dateString = '') => {
   }, '');
 };
 
-function DateInput({ delimiter, pattern, forwardedRef, value: propValue, onKeyDown, onChange, ...inputProps }) {
+function DateInput({
+  delimiter,
+  pattern,
+  forwardedRef,
+  initialValue,
+  value: propValue,
+  onKeyDown,
+  onChange,
+  ...inputProps
+}) {
   const format = value => formatDate(pattern, delimiter, value);
-  const [currentValue, setValue] = useState(format(propValue));
+  const [currentValue, setValue] = useState(initialValue || format(propValue));
   const inputRef = forwardedRef || useRef();
+  const previousValue = useRef(propValue);
 
   useEffect(() => {
-    if (propValue !== currentValue) {
+    if (previousValue.current !== propValue && propValue !== currentValue) {
       setValue(format(propValue));
     }
+    previousValue.current = propValue;
   }, [propValue]);
 
   const handleKeyDown = event => {
@@ -84,6 +95,7 @@ function DateInput({ delimiter, pattern, forwardedRef, value: propValue, onKeyDo
 
 DateInput.propTypes = {
   ...Input.propTypes,
+  initialValue: PropTypes.string,
   pattern: PropTypes.arrayOf(PropTypes.string),
   delimiter: PropTypes.string,
 };

src/Form/DateInput.spec.js

@@ -84,4 +84,10 @@ describe('<DateInput />', () => {
     );
     expect(input.value).toEqual('01/09/1990');
   });
+
+  test('initially displays initialValue if provided', () => {
+    const { input } = renderInput({ initialValue: '01/01/2000', value: '2000-01-01' });
+
+    expect(input.value).toEqual('01/01/2000');
+  });
 });

src/Form/Input.mdx

@@ -102,4 +102,4 @@ Form input component. Different sizes are available.
 <PhoneInput placeholder="Example" label="Phone Number" value="4088675309" />
 
 ### Date Input
-<DateInput placeholder="Date of Birth" label="Date of Birth" value="12/05/1992" />
+<DateInput placeholder="Date of Birth" label="Date of Birth" initialValue="04/01/2001" value="2001-04-01" />

src/index.js

@@ -10,6 +10,7 @@ export CheckboxGroup from './Form/CheckboxGroup';
 export Collapse from './Collapse';
 export Column from './Grid/Column';
 export Container from './Grid/Container';
+export DateInput from './Form/DateInput';
 export Dropdown from './Dropdown';
 export Field from './Form/Field';
 export Fieldset from './Form/Fieldset';
@@ -23,6 +24,7 @@ export Input from './Form/Input';
 export Label from './Form/Label';
 export Linkify from './Linkify';
 export Modal from './Modal';
+export PhoneInput from './Form/PhoneInput';
 export Placeholder from './Placeholder';
 export RadioGroup from './Form/RadioGroup';
 export Row from './Grid/Row';