From a96fa1622be504bfb2d0f37614d6fd5b73f95146 Mon Sep 17 00:00:00 2001 From: uwap Date: Sun, 4 Feb 2018 03:43:22 +0100 Subject: [PATCH] Require the use of hex, rgb, rgba or rainbow for colors and refactor config types --- .flowconfig | 3 +- config/entropia.js | 4 +- config/rzl.js | 4 +- config/utils.js | 14 +-- src/components/App.js | 2 + src/components/ControlMap.js | 2 + src/components/SideBar.js | 2 + src/components/UiItemList/UiItem.js | 5 ++ src/components/UiItemList/index.js | 2 + src/config/colors.js | 16 ++++ src/config/types.js | 135 ++++++++++++++++++++++++++++ src/index.jsx | 2 +- src/utils/parseIconName.js | 2 + types/types.js | 132 +-------------------------- 14 files changed, 178 insertions(+), 147 deletions(-) create mode 100644 src/config/colors.js create mode 100644 src/config/types.js diff --git a/.flowconfig b/.flowconfig index b8b683a..2f7d7b8 100644 --- a/.flowconfig +++ b/.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 diff --git a/config/entropia.js b/config/entropia.js index c60c983..87eecba 100644 --- a/config/entropia.js +++ b/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: { diff --git a/config/rzl.js b/config/rzl.js index d3a1b68..0b6c6fa 100644 --- a/config/rzl.js +++ b/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: { diff --git a/config/utils.js b/config/utils.js index f38cb33..86d784f 100644 --- a/config/utils.js +++ b/config/utils.js @@ -1,17 +1,5 @@ // @flow - -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()})` -); +import type { ControlUI } from "config/types"; export const esper_topics = (chip_id: string, name: string) => ({ [ `esper_${name}_version` ]: { diff --git a/src/components/App.js b/src/components/App.js index f9f4760..7edd809 100644 --- a/src/components/App.js +++ b/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"; diff --git a/src/components/ControlMap.js b/src/components/ControlMap.js index 5d4b1a1..3ce54ab 100644 --- a/src/components/ControlMap.js +++ b/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]; diff --git a/src/components/SideBar.js b/src/components/SideBar.js index 164f8fc..8f0a28c 100644 --- a/src/components/SideBar.js +++ b/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, diff --git a/src/components/UiItemList/UiItem.js b/src/components/UiItemList/UiItem.js index a9e8a7e..649b93d 100644 --- a/src/components/UiItemList/UiItem.js +++ b/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"; diff --git a/src/components/UiItemList/index.js b/src/components/UiItemList/index.js index 2f43791..527b115 100644 --- a/src/components/UiItemList/index.js +++ b/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"; diff --git a/src/config/colors.js b/src/config/colors.js new file mode 100644 index 0000000..3a176db --- /dev/null +++ b/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()})` +); diff --git a/src/config/types.js b/src/config/types.js new file mode 100644 index 0000000..e115fea --- /dev/null +++ b/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, + parseState?: (msg: Object) => any +}; +export type Topics = Map; + +export type TopicDependentOption = ( + internal: Internal, actual: Actual, state: State + ) => T; +export type StateDependentOption = ( + internals: Map, actuals: Map, state: State + ) => T; + +export interface UIControl { + +type: string, + +text: string, + +topic: string +} + +export interface Enableable { + enableCondition?: TopicDependentOption +} + +export type UIToggle = $ReadOnly<{| + type: "toggle", + text: string, + topic: string, + icon?: string, + enableCondition?: TopicDependentOption, + on?: string, + off?: string, + toggled?: TopicDependentOption +|}>; + +export type UIDropDown = $ReadOnly<{| + type: "dropDown", + text: string, + topic: string, + icon?: string, + enableCondition?: TopicDependentOption, + options: Map, + renderValue?: (value: string) => string +|}>; + +export type UISlider = $ReadOnly<{| + type: "slider", + text: string, + topic: string, + icon?: string, + enableCondition?: TopicDependentOption, + 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, + + // 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, + actuals: Map, + state: State + ) => string, + iconColor?: ( + internals: Map, + actuals: Map, + state: State + ) => Color, + ui: Array +}; +export type Controls = Map; + +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, + controls: Controls, + layers: Array +}; diff --git a/src/index.jsx b/src/index.jsx index 82c04cd..817861c 100644 --- a/src/index.jsx +++ b/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`; diff --git a/src/utils/parseIconName.js b/src/utils/parseIconName.js index 5b3e249..50fb1b5 100644 --- a/src/utils/parseIconName.js +++ b/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(" ")}`; } diff --git a/types/types.js b/types/types.js index 69b4091..d0f09ba 100644 --- a/types/types.js +++ b/types/types.js @@ -1,138 +1,12 @@ +// @flow +import type { Color } from "config/colors"; + declare type Map = { [K]: V }; declare type Classes = { classes: Map }; -declare type Topic = { - state: string, - command: string, - defaultValue: any, - values: Map, - parseState?: (msg: Object) => any -}; -declare type Topics = Map; - -declare type TopicDependentOption = ( - internal: string, actual: any, state: State - ) => T; -declare type StateDependentOption = ( - internals: Map, actuals: Map, state: State - ) => T; - -interface UIControl { - +type: string, - +text: string, - +topic: string -}; - -interface Enableable { - enableCondition?: TopicDependentOption -}; - -declare type UIToggle = $ReadOnly<{| - type: "toggle", - text: string, - topic: string, - icon?: string, - enableCondition?: TopicDependentOption, - on?: string, - off?: string, - toggled?: TopicDependentOption -|}>; - -declare type UIDropDown = $ReadOnly<{| - type: "dropDown", - text: string, - topic: string, - icon?: string, - enableCondition?: TopicDependentOption, - options: Map, - renderValue?: (value: string) => string -|}>; - -declare type UISlider = $ReadOnly<{| - type: "slider", - text: string, - topic: string, - icon?: string, - enableCondition?: TopicDependentOption, - 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, - - // 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, - actuals: Map, - state: State - ) => string, - iconColor?: ( - internals: Map, - actuals: Map, - state: State - ) => string, - ui: Array -}; -declare type Controls = Map; - -declare type Config = { - space: Space, - topics: Topics | Array, - controls: Controls, - layers: Array -}; - -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 = {