Require the use of hex, rgb, rgba or rainbow for colors and refactor config types

src/components/App.js

@@ -2,6 +2,8 @@
 import React from "react";
 import _ from "lodash";
 
+import type { Config, Control, Topics } from "config/types";
+
 import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
 import createMuiTheme from "material-ui/styles/createMuiTheme";
 import withStyles from "material-ui/styles/withStyles";

src/components/ControlMap.js

@@ -5,6 +5,8 @@ import Leaflet from "leaflet";
 import _ from "lodash";
 import parseIconName, { controlGetIcon } from "utils/parseIconName";
 
+import type { Controls, Control } from "config/types";
+
 export type Point = [number, number];
 
 const convertPoint = ([y, x]: Point): Point => [-x, y];

src/components/SideBar.js

@@ -10,6 +10,8 @@ import Toolbar from "material-ui/Toolbar";
 import List from "material-ui/List";
 import { renderIcon } from "utils/parseIconName";
 
+import type { Control } from "config/types";
+
 export type SideBarProps = {
   control: ?Control,
   open: boolean,

src/components/UiItemList/UiItem.js

@@ -14,6 +14,11 @@ import { MenuItem } from "material-ui/Menu";
 import Button from "material-ui/Button";
 import { LinearProgress } from "material-ui/Progress";
 
+import type {
+  UIControl, UIToggle, UIDropDown, UILink,
+  UISection, UIText, UIProgress
+} from "config/types";
+
 import keyOf from "utils/keyOf";
 import { getInternals, getActuals } from "utils/state";
 

src/components/UiItemList/index.js

@@ -9,6 +9,8 @@ import {
 } from "material-ui/List";
 import { renderIcon } from "utils/parseIconName";
 
+import type { ControlUI, UIControl, UISlider } from "config/types";
+
 // TODO: Use something else
 import Slider from "material-ui-old/Slider";
 import MuiThemeProvider from "material-ui-old/styles/MuiThemeProvider";

src/config/colors.js

@@ -0,0 +1,16 @@
+// @flow
+export opaque type Color: string = string;
+
+export const rainbow: Color = "rgba(200,120,120,0.5);"
+      + "--before-background: linear-gradient("
+      + "40deg, #FF0000 0%, #00FF00 50%, #0000FF 70%, #FFFF00 100%);";
+
+export const hex = (hexstr: string): Color => hexstr;
+
+export const rgb = (r: number, g: number, b: number): Color => (
+  `rgb(${r.toString()}, ${g.toString()}, ${b.toString()})`
+);
+
+export const rgba = (r: number, g: number, b: number, a: number): Color => (
+  `rgb(${r.toString()}, ${g.toString()}, ${b.toString()}, ${a.toString()})`
+);

src/config/types.js

@@ -0,0 +1,135 @@
+// @flow
+import type { Color } from "config/colors";
+
+export type Topic = {
+  state: string,
+  command: string,
+  defaultValue: Actual,
+  values: Map<Internal, Actual>,
+  parseState?: (msg: Object) => any
+};
+export type Topics = Map<string, Topic>;
+
+export type TopicDependentOption<T> = (
+    internal: Internal, actual: Actual, state: State
+  ) => T;
+export type StateDependentOption<T> = (
+    internals: Map<string, Internal>, actuals: Map<string, Actual>, state: State
+  ) => T;
+
+export interface UIControl {
+  +type: string,
+  +text: string,
+  +topic: string
+}
+
+export interface Enableable {
+  enableCondition?: TopicDependentOption<boolean>
+}
+
+export type UIToggle = $ReadOnly<{|
+  type: "toggle",
+  text: string,
+  topic: string,
+  icon?: string,
+  enableCondition?: TopicDependentOption<boolean>,
+  on?: string,
+  off?: string,
+  toggled?: TopicDependentOption<boolean>
+|}>;
+
+export type UIDropDown = $ReadOnly<{|
+  type: "dropDown",
+  text: string,
+  topic: string,
+  icon?: string,
+  enableCondition?: TopicDependentOption<boolean>,
+  options: Map<string, any>,
+  renderValue?: (value: string) => string
+|}>;
+
+export type UISlider = $ReadOnly<{|
+  type: "slider",
+  text: string,
+  topic: string,
+  icon?: string,
+  enableCondition?: TopicDependentOption<boolean>,
+  min?: number,
+  max?: number,
+  step?: number
+|}>;
+
+export type UISection = $ReadOnly<{|
+  type: "section",
+  text: string
+|}>;
+
+export type UILink = $ReadOnly<{|
+  type: "link",
+  text: string,
+  link: string,
+  enableCondition?: StateDependentOption<boolean>,
+
+  // TODO: check if both the following options are implemented
+  icon?: string
+|}>;
+
+export type UIText = $ReadOnly<{|
+  type: "text",
+  text: string,
+  topic: string,
+  icon?: string
+|}>;
+
+export type UIProgress = $ReadOnly<{|
+  type: "progress",
+  text: string,
+  topic: string,
+  icon?: string,
+  min?: number,
+  max?: number
+|}>;
+
+export type ControlUI =
+    UIToggle
+  | UIDropDown
+  | UISlider
+  | UISection
+  | UILink
+  | UIText
+  | UIProgress
+
+export type Control = {
+  name: string,
+  position: [number, number],
+  icon: string | (
+      internals: Map<string, Internal>,
+      actuals: Map<string, Actual>,
+      state: State
+    ) => string,
+  iconColor?: (
+      internals: Map<string, Internal>,
+      actuals: Map<string, Actual>,
+      state: State
+    ) => Color,
+  ui: Array<ControlUI>
+};
+export type Controls = Map<string, Control>;
+
+export type Space = {
+  name: string,
+  color: "red" | "pink" | "purple"
+        | "deepPurple" | "indigo" | "blue"
+        | "lightBlue" | "cyan" | "teal"
+        | "green" | "lightGreen" | "lime"
+        | "yellow" | "amber" | "orange"
+        | "deepOrange" | "brown" | "grey" | "blueGrey",
+  mqtt: string
+};
+
+export type Config = {
+  space: Space,
+  topics: Topics | Array<Topics>,
+  controls: Controls,
+  layers: Array<Layer>
+};

src/index.jsx

@@ -8,7 +8,7 @@ import App from "components/App";
 import "../node_modules/mdi/css/materialdesignicons.min.css";
 import "../css/styles.css";
 
-const Config = window.config;
+const Config : Config = window.config;
 injectTapEventPlugin();
 
 document.title = `${Config.space.name} Map`;

src/utils/parseIconName.js

@@ -3,6 +3,8 @@ import * as React from "react";
 import _ from "lodash";
 import { getInternals, getActuals } from "utils/state";
 
+import type { Control } from "config/types";
+
 export default function parseIconName(name: string): string {
   return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`;
 }