From 5845dd12ce9ec7c6cdc343849aecfa97192255f8 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 27 Aug 2019 17:48:06 +0300
Subject: [PATCH 1/5] color picker implemented

---
 package.json                          |  1 +
 src/common/ColorPicker/ColorPicker.js | 35 +++++++++++++++++++++++----
 yarn.lock                             |  7 ++++++
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 199a25d0a..e3680ca22 100755
--- a/package.json
+++ b/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",
diff --git a/src/common/ColorPicker/ColorPicker.js b/src/common/ColorPicker/ColorPicker.js
index eccfd55c8..341bacb39 100644
--- a/src/common/ColorPicker/ColorPicker.js
+++ b/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}>
-            {value}
-        </div>
+        <div ref={pickerElementRef} className={className} />
     );
 };
 
 ColorPicker.propTypes = {
     className: PropTypes.string,
-    value: PropTypes.string.isRequired,
+    value: PropTypes.string,
     onChange: PropTypes.func
 };
 
diff --git a/yarn.lock b/yarn.lock
index b01fe64bd..92a593311 100644
--- a/yarn.lock
+++ b/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"

From 3212552865a3bdfabadb03a2da8a09f0d265621b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 28 Aug 2019 14:51:28 +0300
Subject: [PATCH 2/5] ColorPicker added to storybook

---
 storybook/stories/ColorPicker/ColorPicker.js | 12 ++++++++++++
 storybook/stories/ColorPicker/index.js       |  1 +
 storybook/stories/ColorPicker/styles.less    |  0
 storybook/stories/index.js                   |  1 +
 4 files changed, 14 insertions(+)
 create mode 100644 storybook/stories/ColorPicker/ColorPicker.js
 create mode 100644 storybook/stories/ColorPicker/index.js
 create mode 100644 storybook/stories/ColorPicker/styles.less

diff --git a/storybook/stories/ColorPicker/ColorPicker.js b/storybook/stories/ColorPicker/ColorPicker.js
new file mode 100644
index 000000000..1b7cd8eb6
--- /dev/null
+++ b/storybook/stories/ColorPicker/ColorPicker.js
@@ -0,0 +1,12 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const { ColorPicker } = require('stremio/common');
+const styles = require('./styles');
+
+storiesOf('ColorPicker', module).add('ColorPicker', () => {
+    <ColorPicker
+        className={styles['color-picker-container']}
+        value={'#000000'}
+        onChange={function() { alert('Demo item clicked') }}
+    />
+});
diff --git a/storybook/stories/ColorPicker/index.js b/storybook/stories/ColorPicker/index.js
new file mode 100644
index 000000000..ce14eed7d
--- /dev/null
+++ b/storybook/stories/ColorPicker/index.js
@@ -0,0 +1 @@
+require('./ColorPicker');
diff --git a/storybook/stories/ColorPicker/styles.less b/storybook/stories/ColorPicker/styles.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index 0068517f9..a15267d5f 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -1,2 +1,3 @@
 require('./Addon');
 require('./MetaItem');
+require('./ColorPicker');

From b954a69d69e392fdfa486ffd31cd1fd1ec228ece Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 30 Aug 2019 13:58:08 +0300
Subject: [PATCH 3/5] storybook ColorPicker fixed

---
 storybook/stories/ColorPicker/ColorPicker.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/storybook/stories/ColorPicker/ColorPicker.js b/storybook/stories/ColorPicker/ColorPicker.js
index 1b7cd8eb6..b86938fd4 100644
--- a/storybook/stories/ColorPicker/ColorPicker.js
+++ b/storybook/stories/ColorPicker/ColorPicker.js
@@ -3,10 +3,10 @@ const { storiesOf } = require('@storybook/react');
 const { ColorPicker } = require('stremio/common');
 const styles = require('./styles');
 
-storiesOf('ColorPicker', module).add('ColorPicker', () => {
+storiesOf('ColorPicker', module).add('ColorPicker', () => (
     <ColorPicker
         className={styles['color-picker-container']}
         value={'#000000'}
-        onChange={function() { alert('Demo item clicked') }}
+        onChange={(color) => { console.log(color) }}
     />
-});
+));

From bd862fa9cc528105bb48cde6f1329802dfe21675 Mon Sep 17 00:00:00 2001
From: Vladimir Borisov <borisov1024@gmail.com>
Date: Tue, 17 Sep 2019 09:56:41 +0300
Subject: [PATCH 4/5] Example usage of the coor picker

---
 storybook/stories/ColorPicker/ColorPicker.js | 21 +++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/storybook/stories/ColorPicker/ColorPicker.js b/storybook/stories/ColorPicker/ColorPicker.js
index b86938fd4..68057edb8 100644
--- a/storybook/stories/ColorPicker/ColorPicker.js
+++ b/storybook/stories/ColorPicker/ColorPicker.js
@@ -3,10 +3,17 @@ const { storiesOf } = require('@storybook/react');
 const { ColorPicker } = require('stremio/common');
 const styles = require('./styles');
 
-storiesOf('ColorPicker', module).add('ColorPicker', () => (
-    <ColorPicker
-        className={styles['color-picker-container']}
-        value={'#000000'}
-        onChange={(color) => { console.log(color) }}
-    />
-));
+const ColorPickerExampleusage = () => {
+    const [color, setColor] = React.useState('rgba(166, 196, 213, 0.97)');
+    return (
+        <div style={{ color: 'var(--color-surfacelighter)', padding: '1em' }}>
+            <ColorPicker
+                className={styles['color-picker-container']}
+                value={color}
+                onChange={(color) => { setColor(color) }}
+            />
+            <div style={{ marginTop: '1em' }}>Current color is {color}</div>
+        </div>
+    );
+}
+storiesOf('ColorPicker', module).add('ColorPicker', () => <ColorPickerExampleusage />);

From 837078921140ba792b06f4df32520e3f96d70800 Mon Sep 17 00:00:00 2001
From: Vladimir Borisov <borisov1024@gmail.com>
Date: Wed, 18 Sep 2019 09:34:08 +0300
Subject: [PATCH 5/5] Moved the styles in the styles.less file. Unwrapped the
 setColor function

---
 storybook/stories/ColorPicker/ColorPicker.js | 7 +++----
 storybook/stories/ColorPicker/styles.less    | 5 +++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/storybook/stories/ColorPicker/ColorPicker.js b/storybook/stories/ColorPicker/ColorPicker.js
index 68057edb8..d040072c5 100644
--- a/storybook/stories/ColorPicker/ColorPicker.js
+++ b/storybook/stories/ColorPicker/ColorPicker.js
@@ -6,13 +6,12 @@ const styles = require('./styles');
 const ColorPickerExampleusage = () => {
     const [color, setColor] = React.useState('rgba(166, 196, 213, 0.97)');
     return (
-        <div style={{ color: 'var(--color-surfacelighter)', padding: '1em' }}>
+        <div className={styles['demo-container']}>
             <ColorPicker
-                className={styles['color-picker-container']}
                 value={color}
-                onChange={(color) => { setColor(color) }}
+                onChange={setColor}
             />
-            <div style={{ marginTop: '1em' }}>Current color is {color}</div>
+            <div className={styles['test-output']}>Current color is {color}</div>
         </div>
     );
 }
diff --git a/storybook/stories/ColorPicker/styles.less b/storybook/stories/ColorPicker/styles.less
index e69de29bb..ca8901e39 100644
--- a/storybook/stories/ColorPicker/styles.less
+++ b/storybook/stories/ColorPicker/styles.less
@@ -0,0 +1,5 @@
+.demo-container {
+    color: var(--color-surfacelighter);
+    padding: 1rem; 
+    .test-output { margin-top: 1rem; }
+}
\ No newline at end of file