feat: implement ColorPicker component #1795

yvmunayev · 2020-08-25T09:46:53Z

fix: #1777

Changes proposed in this PR:

feat: implement ColorPicker component
I have followed (at least) the PR section of the contributing guide.

@nexxtway/react-rainbow

commit-lint · 2020-08-25T09:46:57Z

Features

implement ColorPicker component (fcfd4a6)
implement default color section (007d6c6)

Bug Fixes

change saturation component (0cb522f)
unresolve import (1cc5d1f)
fix isHexColor test (fc6252e)
change the api (d28e630)
rearrange the structure of internal components (dd4d7eb)
import error of commons components (958b6fd)
add min-height to saturation component (59e2757)
emaple (34ab944)

Tests

add unit test (5ef86a2)

Contributors

@yvmunayev, @TahimiLeonBravo

Commit-Lint commands

You can trigger Commit-Lint actions by commenting on this PR:

@Commit-Lint merge patch will merge dependabot PR on "patch" versions (X.X.Y - Y change)
@Commit-Lint merge minor will merge dependabot PR on "minor" versions (X.Y.Y - Y change)
@Commit-Lint merge major will merge dependabot PR on "major" versions (Y.Y.Y - Y change)
@Commit-Lint merge disable will desactivate merge dependabot PR
@Commit-Lint review will approve dependabot PR
@Commit-Lint stop review will stop approve dependabot PR

src/components/ColorPicker/saturation/index.js

src/styles/helpers/color/rgbToHsv.js

src/styles/helpers/color/hsvToRgb.js

src/components/ColorPicker/defaultColors/index.js

src/components/ColorPicker/saturation/styled.js

src/components/ColorPicker/index.js

src/components/ColorPicker/saturation/index.js

src/components/ColorPicker/styled.js

src/components/ColorPicker/index.js

src/components/ColorPicker/styled.js

src/components/ColorPicker/saturation/index.js

src/components/ColorPicker/index.js

src/styles/helpers/color/rgbToHsv.js

src/styles/helpers/color/isHsvColor.js

src/components/ColorPicker/index.js

src/components/ColorPicker/variants/styled.js

src/components/ColorPicker/variants/default.js

src/components/ColorPicker/variants/colorsFixed.js

src/components/ColorPicker/variants/default.js

src/components/ColorPicker/commons/defaultColors/index.js

src/components/ColorPicker/commons/rgbaColor/index.js

src/components/ColorPicker/commons/saturation/styled.js

src/components/ColorPicker/commons/rgbaColor/index.js

src/components/ColorPicker/commons/saturation/index.js

src/components/ColorPicker/variants/colorsFixed.js

src/components/ColorPicker/commons/hexColor/index.js

src/components/ColorPicker/commons/saturation/index.js

src/styles/helpers/color/rgbToHsv.js

src/components/ColorPicker/commons/saturation/helpers/__test__/calculateBright.spec.js

src/components/ColorPicker/__test__/colorPicker.spec.js

src/components/ColorPicker/commons/rgba/index.js

LeandroTorresSicilia · 2020-09-01T16:52:38Z

@TahimiLeonBravo when using the color picker you need to pass a height to its container in order to see it like

Instead if you don't pass a height then it looks like:

where the gradient is hidden
this is the expected behavior?

LeandroTorresSicilia · 2020-09-01T18:11:02Z

src/components/ColorPicker/commons/saturation/index.js

+    const handleMouseDown = event => {
+        handleChange(event);
+        window.addEventListener('mousemove', handleChange);
+        window.addEventListener('mouseup', unbindEventListeners);


can we avoid setting listener in window and instead attach it to specific element to reduce its scope?

I need to keep listening for the move event when it is outside the component so that the behavior is like the native component

TahimiLeonBravo · 2020-09-01T19:10:47Z

@TahimiLeonBravo when using the color picker you need to pass a height to its container in order to see it like

Instead if you don't pass a height then it looks like:

where the gradient is hidden
this is the expected behavior?

@LeandroTorresSicilia
this is not expected, I think it should have a min-height

codeclimate · 2020-09-01T19:38:22Z

src/components/ColorPicker/commons/saturation/helpers/__test__/calculateBright.spec.js

@@ -0,0 +1,17 @@
+import calculateBright from '../calculateBright';
+
+describe('calculateBright', () => {


Similar blocks of code found in 2 locations. Consider refactoring.

codeclimate · 2020-09-01T19:38:23Z

src/components/ColorPicker/__test__/colorPicker.spec.js

+        const wrapper = mount(<ColorPicker variant="colors-fixed" />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba'];
+
+        componets.forEach(component => {


Similar blocks of code found in 4 locations. Consider refactoring.

codeclimate · 2020-09-01T19:38:23Z

src/components/ColorPicker/__test__/colorPicker.spec.js

+        const wrapper = mount(<ColorPicker defaultColors={[]} />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba'];
+
+        componets.forEach(component => {


Similar blocks of code found in 4 locations. Consider refactoring.

codeclimate · 2020-09-01T19:38:23Z

src/components/ColorPicker/__test__/colorPicker.spec.js

+        const wrapper = mount(<ColorPicker variant="foo" />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba', 'DefaultColors'];
+
+        componets.forEach(component => {


Similar blocks of code found in 4 locations. Consider refactoring.

codeclimate · 2020-09-01T19:38:23Z

src/components/ColorPicker/commons/rgba/index.js

+    decomposeColor,
+} from '../../../../styles/helpers/color';
+
+const Rgba = React.forwardRef((_props, ref) => {


Function Rgba has 74 lines of code (exceeds 25 allowed). Consider refactoring.

codeclimate · 2020-09-04T04:37:32Z

src/components/ColorPicker/commons/saturation/helpers/__test__/calculateSaturation.spec.js

@@ -0,0 +1,17 @@
+import calculateSaturation from '../calculateSaturation';
+
+describe('calculateSaturation', () => {


Similar blocks of code found in 2 locations. Consider refactoring.

codeclimate · 2020-09-04T04:37:33Z

src/components/ColorPicker/__test__/colorPicker.spec.js

+        const wrapper = mount(<ColorPicker variant="colors-fixed" />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba'];
+
+        componets.forEach(component => {


Similar blocks of code found in 4 locations. Consider refactoring.

codeclimate · 2020-09-04T04:37:33Z

src/components/ColorPicker/__test__/colorPicker.spec.js

+        const wrapper = mount(<ColorPicker defaultColors={[]} />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba'];
+
+        componets.forEach(component => {


Similar blocks of code found in 4 locations. Consider refactoring.

codeclimate · 2020-09-04T04:37:33Z

src/components/ColorPicker/__test__/colorPicker.spec.js

+        const wrapper = mount(<ColorPicker variant="foo" />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba', 'DefaultColors'];
+
+        componets.forEach(component => {


Similar blocks of code found in 4 locations. Consider refactoring.

codeclimate · 2020-09-04T04:37:33Z

src/components/ColorPicker/commons/rgba/index.js

+    decomposeColor,
+} from '../../../../styles/helpers/color';
+
+const Rgba = React.forwardRef((_props, ref) => {


Function Rgba has 74 lines of code (exceeds 25 allowed). Consider refactoring.

codeclimate · 2020-09-04T04:42:34Z

src/components/ColorPicker/commons/saturation/helpers/__test__/calculateBright.spec.js

@@ -0,0 +1,17 @@
+import calculateBright from '../calculateBright';
+
+describe('calculateBright', () => {


Similar blocks of code found in 2 locations. Consider refactoring.

codeclimate · 2020-09-04T04:42:34Z

src/components/ColorPicker/__test__/colorPicker.spec.js

+        const wrapper = mount(<ColorPicker variant="colors-fixed" />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba'];
+
+        componets.forEach(component => {


Similar blocks of code found in 4 locations. Consider refactoring.

codeclimate · 2020-09-04T04:42:35Z

src/components/ColorPicker/__test__/colorPicker.spec.js

+        const wrapper = mount(<ColorPicker defaultColors={[]} />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba'];
+
+        componets.forEach(component => {


Similar blocks of code found in 4 locations. Consider refactoring.

codeclimate · 2020-09-04T04:42:35Z

src/components/ColorPicker/__test__/colorPicker.spec.js

+        const wrapper = mount(<ColorPicker variant="foo" />);
+        const componets = ['Saturation', 'Hue', 'Alpha', 'Hex', 'Rgba', 'DefaultColors'];
+
+        componets.forEach(component => {


Similar blocks of code found in 4 locations. Consider refactoring.

codeclimate · 2020-09-04T04:42:35Z

src/components/ColorPicker/commons/rgba/index.js

+    decomposeColor,
+} from '../../../../styles/helpers/color';
+
+const Rgba = React.forwardRef((_props, ref) => {


Function Rgba has 74 lines of code (exceeds 25 allowed). Consider refactoring.

codeclimate · 2020-09-04T04:42:37Z

Code Climate has analyzed commit 224bb19 and detected 35 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	10
Duplication	25

View more on Code Climate.

yvmunayev added 3 commits August 13, 2020 18:13

feat: implement ColorPicker component

fcfd4a6

feat: implement default color section

007d6c6

fix: change saturation component

0cb522f

yvmunayev added the WIP work in progress label Aug 25, 2020

codeclimate bot reviewed Aug 25, 2020

View reviewed changes

fix: unresolve import

1cc5d1f

codeclimate bot reviewed Aug 25, 2020

View reviewed changes

fix: fix isHexColor test

fc6252e

codeclimate bot reviewed Aug 25, 2020

View reviewed changes

fix: change the api

d28e630

codeclimate bot reviewed Aug 29, 2020

View reviewed changes

fix: rearrange the structure of internal components

dd4d7eb

codeclimate bot reviewed Aug 30, 2020

View reviewed changes

fix: import error of commons components

958b6fd

codeclimate bot reviewed Aug 30, 2020

View reviewed changes

test: add unit test

5ef86a2

codeclimate bot reviewed Aug 31, 2020

View reviewed changes

LeandroTorresSicilia reviewed Sep 1, 2020

View reviewed changes

fix: add min-height to saturation component

59e2757

codeclimate bot reviewed Sep 1, 2020

View reviewed changes

TahimiLeonBravo and others added 2 commits September 3, 2020 23:31

fix: emaple

34ab944

Merge branch 'master' into implement-color-picker-component

9efd107

codeclimate bot reviewed Sep 4, 2020

View reviewed changes

TahimiLeonBravo approved these changes Sep 4, 2020

View reviewed changes

Merge branch 'master' into implement-color-picker-component

224bb19

codeclimate bot reviewed Sep 4, 2020

View reviewed changes

TahimiLeonBravo merged commit 45db3ed into nexxtway:master Sep 4, 2020

yvmunayev deleted the implement-color-picker-component branch September 29, 2020 20:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implement ColorPicker component #1795

feat: implement ColorPicker component #1795

yvmunayev commented Aug 25, 2020

commit-lint bot commented Aug 25, 2020 •

edited

Loading

LeandroTorresSicilia commented Sep 1, 2020 •

edited

Loading

LeandroTorresSicilia Sep 1, 2020

yvmunayev Sep 1, 2020

TahimiLeonBravo commented Sep 1, 2020

codeclimate bot Sep 1, 2020

codeclimate bot Sep 1, 2020

codeclimate bot Sep 1, 2020

codeclimate bot Sep 1, 2020

codeclimate bot Sep 1, 2020

codeclimate bot Sep 4, 2020

codeclimate bot Sep 4, 2020

codeclimate bot Sep 4, 2020

codeclimate bot Sep 4, 2020

codeclimate bot Sep 4, 2020

codeclimate bot Sep 4, 2020

codeclimate bot Sep 4, 2020

codeclimate bot Sep 4, 2020

codeclimate bot Sep 4, 2020

codeclimate bot Sep 4, 2020

codeclimate bot commented Sep 4, 2020

		@@ -0,0 +1,17 @@
		import calculateBright from '../calculateBright';

		describe('calculateBright', () => {

		@@ -0,0 +1,17 @@
		import calculateSaturation from '../calculateSaturation';

		describe('calculateSaturation', () => {

feat: implement ColorPicker component #1795

feat: implement ColorPicker component #1795

Conversation

yvmunayev commented Aug 25, 2020

Changes proposed in this PR:

commit-lint bot commented Aug 25, 2020 • edited Loading

Features

Bug Fixes

Tests

Contributors

LeandroTorresSicilia commented Sep 1, 2020 • edited Loading

LeandroTorresSicilia Sep 1, 2020

Choose a reason for hiding this comment

yvmunayev Sep 1, 2020

Choose a reason for hiding this comment

TahimiLeonBravo commented Sep 1, 2020

codeclimate bot Sep 1, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 1, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 1, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 1, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 1, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 4, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 4, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 4, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 4, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 4, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 4, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 4, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 4, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 4, 2020

Choose a reason for hiding this comment

codeclimate bot Sep 4, 2020

Choose a reason for hiding this comment

codeclimate bot commented Sep 4, 2020

commit-lint bot commented Aug 25, 2020 •

edited

Loading

LeandroTorresSicilia commented Sep 1, 2020 •

edited

Loading