color-sorter - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

color-sorter.js

 const tinycolor = require('tinycolor2')
 
-/**
+/*
  * Sort by saturation, high to low (ASC, 100%  - 0%)
- * @param {*} colorA An {hsl: {}}-like object
- * @param {*} colorB An {hsl: {}}-like object
  */
@@ -12,6 +10,4 @@ function sortBySaturation(colorA, colorB) {
 
-/**
+/*
  * Sort by hue, red-yellow-green-blue-purple (0-360)
- * @param {*} colorA An {hsl: {}}-like object
- * @param {*} colorB An {hsl: {}}-like object
  */
@@ -30,6 +26,4 @@ function sortByHue({hsl: colorA}, {hsl: colorB}) {
 
-/**
+/*
  * Sort by alpha channel, transparent to opaque
- * @param {*} colorA An {hsl: {}}-like object
- * @param {*} colorB An {hsl: {}}-like object
  */
@@ -44,6 +38,4 @@ function sortByAlpha({hsl: colorA}, {hsl: colorB}) {
 
-/**
+/*
  * Sort by lightness, light to dark
- * @param {*} colorA An {hsl: {}}-like object
- * @param {*} colorB {hsl: {}}-like object
  */
@@ -57,5 +49,4 @@ function sortByLightness(colorA, colorB) {
 
-/**
+/*
  * Determines if a given color is a pure grey
- * @param {*} color An {hsl: {}}-like object
  */
@@ -66,17 +57,17 @@ function isGrey(color) {
 
-/**
- * Sort an array of color objects
+/*
+ * Sort an array of CSS colors
  *
- * @param colors An array of {value: #f00;}-like objects
+ * @param colors An array of CSS colors
  * @returns array A new sorted array
  */
 module.exports = colors => {
-	// add an `hsl` prop to our array to use for sorting
+	// Add an `hsl` prop to our array to use for sorting
 	const mapped = colors.map(color => {
 		const {h: hue, s: saturation, l: lightness, a: alpha} = tinycolor(
-			color.value
+			color
 		).toHsl()
 
 		return {
-			...color,
+			authored: color,
 			hsl: {hue, saturation, lightness, alpha}
@@ -88,15 +79,16 @@ }
 		mapped
-			// sort by hue
+			// Sort by hue
 			.sort(sortByHue)
-			// remove the grey colors
+			// Remove the grey colors
 			.filter(color => !isGrey(color))
-			// and append the grey colors to the back
-			// and sort the greys by lightness
-			.concat(mapped.filter(color => isGrey(color)).sort(sortByAlpha))
-			// and finally strip the `hsl` prop from our output array
-			.map(color => {
-				const {hsl, ...originalColor} = color
-				return originalColor
-			})
+			.concat(
+				// Shift the grey colors to the back
+				mapped
+					.filter(color => isGrey(color))
+					// And sort the greys by lightness
+					.sort(sortByAlpha)
+			)
+			// Finally, return the array in the form it was given to us
+			.map(color => color.authored)
 	)
 }

package.json

 {
   "name": "color-sorter",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Sort colors by hue, then saturation.",
   "main": "color-sorter.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "xo && ava"
   },
@@ -24,3 +24,13 @@ "repository": {
   },
-  "homepage": "https://github.com/bartveneman/color-sorter#readme"
+  "homepage": "https://github.com/bartveneman/color-sorter#readme",
+  "dependencies": {
+    "tinycolor2": "^1.4.1"
+  },
+  "devDependencies": {
+    "ava": "^0.25.0",
+    "xo": "^0.21.1"
+  },
+  "xo": {
+    "semicolon": false
+  }
 }

README.md

@@ -13,5 +13,5 @@ # color-sorter
 const colors = [
-  { value: '#000' },
-  { value: 'red' },
-  { value: 'hsl(0, 10%, 60%)' }
+  '#000',
+  'red',
+  'hsl(0, 10%, 60%)'
 ];
@@ -23,5 +23,5 @@
 // [
-//  { value: 'red' },
-//  { value: 'hsl(0, 10%, 60%)' },
-//  { value: '#000' }
+//  'red',
+//  'hsl(0, 10%, 60%)',
+//  '#000'
 // ]
@@ -40,14 +40,14 @@ ```
 
-![CSS Tricks color sort example](/examples/smashing-magazine.png)
+![Smashing Magazine color sort example](/examples/smashing-magazine.png)
 
 ### Bootstrap
 
-![CSS Tricks color sort example](/examples/bootstrap.png)
+![Bootstrap color sort example](/examples/bootstrap.png)
 
-### Foundation
+### Zurb Foundation
 
-![CSS Tricks color sort example](/examples/foundation.png)
+![Zurb Foundation color sort example](/examples/foundation.png)
 
 ### Project Wallace
 
-![CSS Tricks color sort example](/examples/project-wallace.png)
+![Project Wallace color sort example](/examples/project-wallace.png)

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12228

increased by10.72%

Number of package files

10

increased by11.11%

Lines of code

162

increased by92.86%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

2

increased byInfinity%

Dependency changes

• + Addedtinycolor2@^1.4.1

• + Addedtinycolor2@1.6.0(transitive)