color picker implemented

package.json

@@ -12,6 +12,7 @@
         "storybook": "start-storybook --ci --config-dir ./storybook --static-dir ./ --port 6060"
     },
     "dependencies": {
+        "a-color-picker": "1.1.8",
         "classnames": "2.2.6",
         "events": "1.1.1",
         "hat": "0.0.3",

src/common/ColorPicker/ColorPicker.js

@@ -1,18 +1,43 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const AColorPicker = require('a-color-picker');
+
+const COLOR_FORMAT = 'rgbacss';
 
-// TODO: impl this
 const ColorPicker = ({ className, value, onChange }) => {
+    value = AColorPicker.parseColor(value, COLOR_FORMAT);
+    const pickerRef = React.useRef(null);
+    const pickerElementRef = React.useRef(null);
+    React.useEffect(() => {
+        pickerRef.current = AColorPicker.createPicker(pickerElementRef.current, {
+            color: value,
+            showHSL: false,
+            showHEX: false,
+            showRGB: false,
+            showAlpha: true
+        });
+    }, []);
+    React.useEffect(() => {
+        pickerRef.current.off('change');
+        pickerRef.current.on('change', (picker, color) => {
+            if (typeof onChange === 'function') {
+                onChange(AColorPicker.parseColor(color, COLOR_FORMAT));
+            }
+        });
+    }, [onChange]);
+    React.useEffect(() => {
+        if (AColorPicker.parseColor(pickerRef.current.color, COLOR_FORMAT) !== value) {
+            pickerRef.current.color = value;
+        }
+    }, [value]);
     return (
-        <div style={{ backgroundColor: 'red' }} className={className}>
+        <div ref={pickerElementRef} className={className} />
-            {value}
-        </div>
     );
 };
 
 ColorPicker.propTypes = {
     className: PropTypes.string,
-    value: PropTypes.string.isRequired,
+    value: PropTypes.string,
     onChange: PropTypes.func
 };
 

yarn.lock

@@ -1708,6 +1708,13 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+a-color-picker@1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/a-color-picker/-/a-color-picker-1.1.8.tgz#5e0ef5c8d99f5d2471682e2f76fe5562e7cb74d0"
+  integrity sha512-PGKDLFV3Qp190YKVd+TF+7ib0jvaVkq6ezaCnnFUhLVmnKLCEzUAH8CumLkP+kfeBukRcJtE9RMwbiR2Z40FbA==
+  dependencies:
+    is-plain-object "^2.0.4"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"