feat(evergreen): add combo-box component to evergreen component mapper

combo-box will be treated similar to a select component, with a required format for an array of objects to populate items

Author: danielwarke

.gitignore

@@ -18,6 +18,7 @@ dist
 .env.development.local
 .env.test.local
 .env.production.local
+.idea
 
 npm-debug.log*
 yarn-debug.log*

packages/evergreen-component-mapper/src/combo-box/combo-box.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+
+import { Combobox as EvergreenCombobox, FormField } from 'evergreen-ui';
+
+import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
+import {
+	AnyObject,
+	UseFieldApiProps,
+} from '@data-driven-forms/react-form-renderer';
+
+export interface ComboBoxItem extends AnyObject {
+    value?: any;
+    label: string;
+}
+
+export interface ComboBoxProps extends UseFieldApiProps<string> {
+    name: string;
+    isRequired?: boolean;
+    options: ComboBoxItem[];
+}
+
+const ComboBox: React.FC<ComboBoxProps> = (props) => {
+	const {
+		id,
+		input,
+		meta,
+		isDisabled,
+		options,
+		isRequired,
+		label,
+		description,
+		inputProps,
+		...rest
+	} = useFieldApi(props);
+
+	const selectedItem = useMemo(() => {
+		return options.find((item: ComboBoxItem) => item.value === input.value);
+	}, [input.value, options]);
+
+	return (
+		<FormField
+			labelFor={id}
+			label={label}
+			description={description}
+			isRequired={isRequired}
+			validationMessage={meta.error}
+			marginBottom={24}
+		>
+			<EvergreenCombobox
+				id={id}
+				width="100%"
+				selectedItem={selectedItem}
+				onChange={(item?: ComboBoxItem) => input.onChange(item?.value)}
+				disabled={isDisabled}
+				items={options}
+				itemToString={(item?: ComboBoxItem) => (item ? item.label : '')}
+				inputProps={{
+					required: isRequired,
+					isInvalid: Boolean(meta.error),
+					...inputProps,
+				}}
+				{...rest}
+			/>
+		</FormField>
+	);
+};
+
+export default ComboBox;

packages/evergreen-component-mapper/src/combo-box/index.ts

@@ -0,0 +1,2 @@
+export { default } from './combo-box';
+export * from './combo-box';

packages/evergreen-component-mapper/src/component-mapper/component-mapper.tsx

@@ -9,6 +9,7 @@ import Tabs from '../tabs';
 import FieldArray from '../field-array';
 import Link from '../link';
 import PlainText from '../plain-text';
+import ComboBox from '../combo-box';
 
 const NullComponent = () => <span>Not implemented</span>;
 
@@ -28,7 +29,8 @@ const mapper = {
 	[componentTypes.FIELD_ARRAY]: FieldArray,
 	[componentTypes.DUAL_LIST_SELECT]: NullComponent,
 	[componentTypes.SLIDER]: NullComponent,
-	'link': Link
+	'link': Link,
+	'combo-box': ComboBox
 };
 
 export default mapper;

packages/evergreen-component-mapper/src/index.ts

@@ -1,4 +1,5 @@
 export * from './checkbox';
+export * from './combo-box';
 export * from './component-mapper';
 export * from './field-array';
 export * from './link';