Completely rewrite the UI Components

to a new functional way of defining them with advantages towards generating docs and a potential editor functionality

src/components/UiItems/DropDown.js

@@ -0,0 +1,50 @@
+// @flow
+import React from "react";
+import map from "lodash/map";
+import createComponent from "./base";
+import { isDisabled, getValue } from "./utils";
+
+import type { UIDropDown } from "config/flowtypes";
+
+import Select from "@material-ui/core/Select";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import Input from "@material-ui/core/Input";
+
+const componentId = (item: UIDropDown) => `dropdown-${item.topic}`;
+
+const DropDownOptions = ({options}) =>
+  map(options, (v, k) => <MenuItem value={k} key={k}>{v}</MenuItem>);
+
+const onChangeEvent = (item: UIDropDown, changeState) =>
+  (event) => changeState(item, event.target.value);
+
+const BaseComponent = ({Icon}, item, state, changeState) => (
+  <React.Fragment>
+    <Icon item={item} state={state} />
+    <FormControl>
+      <InputLabel htmlFor={componentId(item)}>{item.text}</InputLabel>
+      <Select value={getValue(item, state)}
+        onChange={onChangeEvent(item, changeState)}
+        disabled={isDisabled(item, state)}
+        input={<Input id={componentId(item)} />}
+      >
+        <DropDownOptions options={item.options} />
+      </Select>
+    </FormControl>
+  </React.Fragment>
+);
+
+export default createComponent({
+  id: "dropDown",
+  name: "Drop Down",
+  desc: `
+    The Drop Down can be used to select from a small range of different options.
+  `,
+  parameters: {
+    text: "A descriptive label for the drop down",
+    topic: "The topic id"
+  },
+  baseComponent: BaseComponent
+});