color picker component

webui/src/App.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
 import {HookRouter, navigate, usePath, useRoutes} from "hookrouter";
 import {Tabs} from "./primitives/Layout";
+import {HSColorPicker} from "./primitives/Forms";
 
 const routeObj: HookRouter.RouteObject = {
-  "/": () => <div>1</div>,
+  "/": () => (
+    <div>
+      <HSColorPicker h={60} s={1} onChange={() => void(0)}/>
+    </div>
+  ),
   "/devices": () => <div>2</div>,
   "/settings": () => <div>3</div>,
 }

webui/src/primitives/Forms.tsx

@@ -0,0 +1,43 @@
+import React, {useLayoutEffect, useState} from 'react';
+// @ts-ignore
+import iro from "@jaames/iro";
+
+interface ColorPickerProps {
+  h: number
+  s: number
+  onChange: (h: number, v: number) => void
+}
+
+const randomId = () => Math.floor(Math.random() * 100000);
+
+export const HSColorPicker: React.FC<ColorPickerProps> = ({h, s, onChange}) => {
+  const [random] = useState(() => `color-picker-${randomId()}`);
+
+  useLayoutEffect(() => {
+    // @ts-ignore
+    const colorPicker = new iro.ColorPicker(`#${random}`, {
+      color: {h, s: s * 100, v: 255},
+      layout: [
+        {
+          component: iro.ui.Wheel,
+          options: {}
+        }
+      ],
+    });
+
+    colorPicker.on("input:end", (color: { hsv: { h: number, s: number } }) => {
+      onChange(color.hsv.h || 0, (color.hsv.s || 0) / 100);
+    });
+
+    return () => {
+      const elem = document.getElementById(`color-picker-${random}`);
+      if (elem === null) {
+        return;
+      }
+
+      elem.innerHTML = "";
+    };
+  }, [h, s, onChange, random]);
+
+  return <div id={random} style={{margin: "0 auto"}}/>;
+};

webui/src/primitives/Layout.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo} from "react";
+import React, {useCallback, useEffect} from "react";
 import "./Layout.sass";
 
 interface TabsProps {