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

.flowconfig

@@ -1,7 +1,6 @@
 [ignore]
 
 [include]
-src/
 
 [libs]
 types/types.js
@@ -10,7 +9,7 @@ types/mqtt.js
 [options]
 esproposal.export_star_as=enable
 module.system.node.resolve_dirname=node_modules
-module.system.node.resolve_dirname=src
+module.system.node.resolve_dirname=./src
 
 [lints]
 all=warn

config/entropia.js

@@ -1,5 +1,7 @@
 // @flow
-import { hex, rgb, rgba, rainbow, esper_topics, esper_statistics } from "./utils";
+import type { Config } from "config/types";
+import { hex, rgb, rgba, rainbow } from "config/colors";
+import { esper_topics, esper_statistics } from "./utils";
 
 const config : Config = {
   space: {

config/rzl.js

@@ -1,5 +1,7 @@
 // @flow
-import { hex, rgb, rgba, rainbow, esper_topics, esper_statistics } from "./utils";
+import type { Config } from "config/types";
+import { hex, rgb, rgba, rainbow } from "config/colors";
+import { esper_topics, esper_statistics } from "./utils";
 
 const config : Config = {
   space: {

config/utils.js

@@ -1,17 +1,5 @@
 // @flow
-
+import type { ControlUI } from "config/types";
-export const rainbow = "rgba(200,120,120,0.5);"
-      + "--before-background: linear-gradient(40deg, #FF0000 0%, #00FF00 50%, #0000FF 70%, #FFFF00 100%);";
-
-export const hex = (hex: string) => hex;
-
-export const rgb = (r: number, g: number, b: number) => (
-  `rgb(${r.toString()}, ${g.toString()}, ${b.toString()})`
-);
-
-export const rgba = (r: number, g: number, b: number, a: number) => (
-  `rgb(${r.toString()}, ${g.toString()}, ${b.toString()}, ${a.toString()})`
-);
 
 export const esper_topics = (chip_id: string, name: string) => ({
   [ `esper_${name}_version` ]: {

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(" ")}`;
 }

types/types.js

@@ -1,138 +1,12 @@
+// @flow
+import type { Color } from "config/colors";
+
 declare type Map<K,V> = { [K]: V };
 
 declare type Classes = {
   classes: Map<string, string>
 };
 
-declare type Topic = {
-  state: string,
-  command: string,
-  defaultValue: any,
-  values: Map<string,any>,
-  parseState?: (msg: Object) => any
-};
-declare type Topics = Map<string,Topic>;
-
-declare type TopicDependentOption<T> = (
-    internal: string, actual: any, state: State
-  ) => T;
-declare type StateDependentOption<T> = (
-    internals: Map<string, string>, actuals: Map<string, any>, state: State
-  ) => T;
-
-interface UIControl {
-  +type: string,
-  +text: string,
-  +topic: string
-};
-
-interface Enableable {
-  enableCondition?: TopicDependentOption<boolean>
-};
-
-declare type UIToggle = $ReadOnly<{|
-  type: "toggle",
-  text: string,
-  topic: string,
-  icon?: string,
-  enableCondition?: TopicDependentOption<boolean>,
-  on?: string,
-  off?: string,
-  toggled?: TopicDependentOption<boolean>
-|}>;
-
-declare type UIDropDown = $ReadOnly<{|
-  type: "dropDown",
-  text: string,
-  topic: string,
-  icon?: string,
-  enableCondition?: TopicDependentOption<boolean>,
-  options: Map<string, any>,
-  renderValue?: (value: string) => string
-|}>;
-
-declare type UISlider = $ReadOnly<{|
-  type: "slider",
-  text: string,
-  topic: string,
-  icon?: string,
-  enableCondition?: TopicDependentOption<boolean>,
-  min?: number,
-  max?: number,
-  step?: number
-|}>;
-
-declare type UISection = $ReadOnly<{|
-  type: "section",
-  text: string
-|}>;
-
-declare type UILink = $ReadOnly<{|
-  type: "link",
-  text: string,
-  link: string,
-  enableCondition?: StateDependentOption<boolean>,
-  
-  // TODO: check if both the following options are implemented
-  icon?: string
-|}>;
-
-declare type UIText = $ReadOnly<{|
-  type: "text",
-  text: string,
-  topic: string,
-  icon?: string
-|}>;
-
-declare type UIProgress = $ReadOnly<{|
-  type: "progress",
-  text: string,
-  topic: string,
-  icon?: string,
-  min?: number,
-  max?: number
-|}>;
-
-declare type ControlUI =
-    UIToggle
-  | UIDropDown
-  | UISlider
-  | UISection
-  | UILink
-  | UIText
-  | UIProgress
-
-declare type Control = {
-  name: string,
-  position: [number, number],
-  icon: string | (
-      internals: Map<string, string>,
-      actuals: Map<string, any>,
-      state: State
-    ) => string,
-  iconColor?: (
-      internals: Map<string, string>,
-      actuals: Map<string, any>,
-      state: State
-    ) => string,
-  ui: Array<ControlUI>
-};
-declare type Controls = Map<string,Control>;
-
-declare type Config = {
-  space: Space,
-  topics: Topics | Array<Topics>,
-  controls: Controls,
-  layers: Array<Layer>
-};
-
-declare 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
-};
-
 declare type Internal = string;
 declare type Actual = any;
 declare type StateValue = {