replacing oneColor library with color library (#368)

Author: Inbal-Tish

package.json

@@ -38,9 +38,9 @@
   },
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",
+    "color": "^3.1.0",
     "hoist-non-react-statics": "^3.0.0",
     "lodash": "^4.0.0",
-    "onecolor": "^3.1.0",
     "prop-types": "^15.5.10",
     "react-native-animatable": "^1.1.0",
     "react-native-blur": "^3.1.1",

src/style/__tests__/colors.spec.js

@@ -55,25 +55,25 @@ describe('services/AvatarService', () => {
     });
 
     it('should handle color that does not exist in uilib', () => {
-      expect(uut.getColorTint('#F1BE0B', 10)).toEqual('#b28c08');
-      expect(uut.getColorTint('#F1BE0B', 20)).toEqual('#ca9f09');
-      expect(uut.getColorTint('#F1BE0B', 30)).toEqual('#F1BE0B');
-      expect(uut.getColorTint('#F1BE0B', 40)).toEqual('#f5d04d');
-      expect(uut.getColorTint('#F1BE0B', 50)).toEqual('#f9e291');
-      expect(uut.getColorTint('#F1BE0B', 60)).toEqual('#fbedbb');
-      expect(uut.getColorTint('#F1BE0B', 70)).toEqual('#fdf4d6');
-      expect(uut.getColorTint('#F1BE0B', 80)).toEqual('#fef9e7');
+      expect(uut.getColorTint('#F1BE0B', 10).toLowerCase()).toEqual('#d2a50a');
+      expect(uut.getColorTint('#F1BE0B', 20).toLowerCase()).toEqual('#deaf0a');
+      expect(uut.getColorTint('#F1BE0B', 30).toLowerCase()).toEqual('#f1be0b');
+      expect(uut.getColorTint('#F1BE0B', 40).toLowerCase()).toEqual('#f5d04d');
+      expect(uut.getColorTint('#F1BE0B', 50).toLowerCase()).toEqual('#f9e291');
+      expect(uut.getColorTint('#F1BE0B', 60).toLowerCase()).toEqual('#fbedbb');
+      expect(uut.getColorTint('#F1BE0B', 70).toLowerCase()).toEqual('#fdf4d6');
+      expect(uut.getColorTint('#F1BE0B', 80).toLowerCase()).toEqual('#fef9e7');
     });
 
     it('should round down tint level to the nearest one', () => {
-      expect(uut.getColorTint('#F1BE0B', 75)).toEqual('#fdf4d6');
-      expect(uut.getColorTint('#F1BE0B', 25)).toEqual('#ca9f09');
-      expect(uut.getColorTint('#F1BE0B', 35)).toEqual('#F1BE0B');
+      expect(uut.getColorTint('#F1BE0B', 75).toLowerCase()).toEqual('#fdf4d6');
+      expect(uut.getColorTint('#F1BE0B', 25).toLowerCase()).toEqual('#deaf0a');
+      expect(uut.getColorTint('#F1BE0B', 35).toLowerCase()).toEqual('#f1be0b');
     });
 
     it('should handle out of range tint levels and round them to the nearest one in range', () => {
-      expect(uut.getColorTint('#F1BE0B', 3)).toEqual('#b28c08');
-      expect(uut.getColorTint('#F1BE0B', 95)).toEqual('#fef9e7');
+      expect(uut.getColorTint('#F1BE0B', 3).toLowerCase()).toEqual('#d2a50a');
+      expect(uut.getColorTint('#F1BE0B', 95).toLowerCase()).toEqual('#fef9e7');
     });
   });
 });

src/style/colors.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
+import Color from 'color';
 import {colorsPalette} from './colorsPalette';
 
-const one = require('onecolor');
 
 class Colors {
   /**
@@ -46,7 +46,6 @@ class Colors {
     } else {
       throw new Error('rgba can work with either 2 or 4 arguments');
     }
-
     return `rgba(${red}, ${green}, ${blue}, ${opacity})`;
   }
 
@@ -66,34 +65,35 @@ class Colors {
     const darkRatios = [0.13, 0.08];
     const lightRatios = [0.27, 0.55, 0.72, 0.83, 0.9];
 
-    const colorKey = _.findKey(this, (value, key) => this[key] === color);
-
     if (_.isUndefined(tintKey) || isNaN(tintKey) || _.isUndefined(color)) {
       console.error('"Colors.getColorTint" must accept a color and tintKey params');
       return color;
     }
 
+    const colorKey = _.findKey(this, (value, key) => this[key] === color);
+
     if (colorKey) {
       const requiredColorKey = `${colorKey.slice(0, -2)}${tintKey}`;
       const requiredColor = this[requiredColorKey];
+      
       if (_.isUndefined(requiredColor)) {
         console.warn('"Colors.getColorTint" could not find color with this tint');
         return color;
       }
       return requiredColor;
-    // Handles dynamic colors (non uilib colors)
-    } else {
+    } else { // Handles dynamic colors (non uilib colors)
       let tintLevel = Math.floor(Number(tintKey) / 10);
       tintLevel = Math.max(1, tintLevel);
       tintLevel = Math.min(8, tintLevel);
+      
       if (tintLevel === BASE_COLOR_LEVEL) {
         return color;
       } else if (tintLevel <= BASE_COLOR_LEVEL) {
         const darkRatio = darkRatios[tintLevel - 1];
-        return one(color).darken(darkRatio).hex();
+        return Color(color).darken(darkRatio).hex();
       } else {
         const lightRatio = lightRatios[tintLevel - 4];
-        return one(color).mix('#ffffff', lightRatio).hex();
+        return Color(color).mix(Color('#ffffff'), lightRatio).hex();
       }
     }
   }
@@ -103,7 +103,6 @@ function validateRGB(value) {
   if (isNaN(value) || value > 255 || value < 0) {
     throw new Error(`${value} is invalid rgb code, please use number between 0-255`);
   }
-
   return value;
 }