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/Progress.js

@@ -0,0 +1,38 @@
+// @flow
+import React from "react";
+import createComponent from "./base";
+import { getValue } from "./utils";
+
+import type { UIProgress } from "config/flowtypes";
+
+import LinearProgress from "@material-ui/core/LinearProgress";
+
+const progressVal = (item, state) => {
+  const min = item.min || 0;
+  const max = item.max || 100;
+  const val = parseFloat(getValue(item, state));
+  return val * 100 / max - min;
+};
+
+const BaseComponent = ({Icon, Label}, item: UIProgress, state, _c) => (
+  <React.Fragment>
+    <Icon item={item} state={state} />
+    <Label />
+    <div style={{ flex: "10 1 auto" }} key="progressbar">
+      <LinearProgress variant="determinate" value={progressVal(item, state)} />
+    </div>
+  </React.Fragment>
+);
+
+export default createComponent({
+  id: "progress",
+  name: "Progress Bar",
+  desc: `
+    The progress bar is used to display a progress value from MQTT
+  `,
+  parameters: {
+    text: "A descriptive label for the progress bar",
+    topic: "The topic id"
+  },
+  baseComponent: BaseComponent
+});