Sort dependency versions (codesandbox#541)

Author: yesmeck

packages/app/package.json

@@ -117,6 +117,7 @@
     "codemirror": "^5.27.4",
     "codesandbox-api": "^0.0.14",
     "color": "^0.11.4",
+    "compare-versions": "^3.1.0",
     "css-modules-loader-core": "^1.1.0",
     "cssnano": "^3.10.0",
     "debug": "^2.6.8",

packages/app/src/app/pages/Sandbox/SearchDependencies/DependencyHit/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import HomeIcon from 'react-icons/lib/io/home';
 import SearchIcon from 'react-icons/lib/go/search';
 import { Highlight } from 'react-instantsearch/dom';
+import compareVersions from 'compare-versions';
 
 import Tooltip from 'common/components/Tooltip';
 
@@ -59,8 +60,9 @@ export default class DependencyHit extends React.PureComponent {
       }
     }
 
-    const versions = Object.keys(hit.versions);
-    versions.reverse();
+    const versions = Object.keys(hit.versions).sort((a: string, b: string) =>
+      compareVersions(b, a)
+    );
 
     return (
       <Container highlighted={highlighted} onClick={onClick}>

yarn.lock

@@ -3144,6 +3144,10 @@ compare-func@^1.3.1:
     array-ify "^1.0.0"
     dot-prop "^3.0.0"
 
+compare-versions@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.1.0.tgz#43310256a5c555aaed4193c04d8f154cf9c6efd5"
+
 [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"