Update Satis UI to Bootstrap 4 (#512)

* Add Webpack configuration.

* Redesign.

- Uses Bootstrap 4.1
- Migrates javascript to ES6 modules and classes
- Removes dependency from the massive moment.js library

* Optimizes CSS file size by disabling unused Bootstrap features.

* Changes the layout for the header section.

Applies a more streamlined and simple layout, discarding the
previous navbar-like style.

* Simpler package properties markup.

* Minor js tweaks.

* Bugfix: there are elements with wrong markup.

* Bugfix: tests were failing.

* Changes license of package.json to MIT.

* Remove jQuery dependency in DateDistance.js

* Header redesign.

- More compact initial design.
- More and clearer information in the setting up info section.

* Bugfix: the public path is 'build', not 'assets'.

.gitignore

@@ -1,4 +1,5 @@
 /build/
+/node_modules/
 /vendor/
 /.php_cs.cache
 /composer.phar

package.json

@@ -0,0 +1,19 @@
+{
+  "devDependencies": {
+    "@symfony/webpack-encore": "^0.20.0",
+    "bootstrap": "^4.1.3",
+    "date-fns": "^1.29.0",
+    "jquery": "^3.3.1",
+    "node-sass": "^4.9.4",
+    "popper.js": "^1.14.3",
+    "sass-loader": "^7.1.0"
+  },
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev-server": "encore dev-server",
+    "dev": "encore dev",
+    "watch": "encore dev --watch",
+    "build": "encore production"
+  }
+}

tests/Builder/WebBuilderDumpTest.php

@@ -63,8 +63,8 @@ public function testNominalCase()
 
         $html = $this->root->getChild('build/index.html')->getContent();
 
-        $this->assertRegExp('/<title>dummy root package Composer repository<\/title>/', $html);
-        $this->assertRegExp('{<h3 id="[^"]+" class="panel-title package-title">\s*<a href="#vendor/name" class="anchor">\s*<svg[^>]*>.+</svg>\s*vendor/name\s*</a>\s*</h3>}si', $html);
+        $this->assertRegExp('/<title>dummy root package<\/title>/', $html);
+        $this->assertRegExp('{<div id="[^"]+" class="card-header[^"]+">\s*<a href="#vendor/name" class="[^"]+">\s*<svg[^>]*>.+</svg>\s*vendor/name\s*</a>\s*</div>}si', $html);
         $this->assertFalse((bool) preg_match('/<p class="abandoned">/', $html));
     }
 
@@ -77,7 +77,7 @@ public function testRepositoryWithNoName()
 
         $html = $this->root->getChild('build/index.html')->getContent();
 
-        $this->assertRegExp('/<title>A Composer repository<\/title>/', $html);
+        $this->assertRegExp('/<title>A<\/title>/', $html);
     }
 
     public function testDependencies()

views/assets/css/style.scss

@@ -0,0 +1,45 @@
+// Imports all of Bootstrap
+// @import '~bootstrap/scss/bootstrap';
+
+// Imports only used Bootstrap
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+// @import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+// @import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+// @import "~bootstrap/scss/dropdown";
+// @import "~bootstrap/scss/button-group";
+// @import "~bootstrap/scss/input-group";
+// @import "~bootstrap/scss/custom-forms";
+// @import "~bootstrap/scss/nav";
+// @import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+// @import "~bootstrap/scss/breadcrumb";
+// @import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+// @import "~bootstrap/scss/jumbotron";
+// @import "~bootstrap/scss/alert";
+// @import "~bootstrap/scss/progress";
+// @import "~bootstrap/scss/media";
+// @import "~bootstrap/scss/list-group";
+// @import "~bootstrap/scss/close";
+// @import "~bootstrap/scss/modal";
+// @import "~bootstrap/scss/tooltip";
+// @import "~bootstrap/scss/popover";
+// @import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
+
+pre.file {
+    border-left: 2px solid $primary;
+    background-color: $light;
+    padding: map-get($spacers, 2);
+}

views/assets/js/App/DateDistance.js

@@ -0,0 +1,21 @@
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+
+class DateDistance {
+    static calculate(elements) {
+        if (typeof elements === 'string') {
+            elements = document.querySelectorAll(elements);
+        }
+        for (let i = 0; i < elements.length; i++) {
+            let element  = elements[i];
+            let datetime = element.attributes.datetime.value;
+            let date     = new Date(datetime);
+            let distance = distanceInWordsToNow(date, {
+                addSuffix: true
+            });
+
+            element.textContent = distance;
+        }
+    }
+}
+
+export default DateDistance;

views/assets/js/App/PackageFilter.js

@@ -0,0 +1,66 @@
+import $ from 'jquery';
+
+class PackageFilter {
+    constructor(input, list, listItem) {
+        this.input = $(input);
+        this.list = $(list);
+        this.listItemSelector = listItem;
+        this.packages = this.list.find(listItem);
+        this.inputTimeout = null;
+
+        this.readHash = this.readHash.bind(this);
+        this.updateHash = this.updateHash.bind(this);
+        this.filterPackages = this.filterPackages.bind(this);
+
+        this.init();
+    }
+
+    readHash() {
+        let hash = window.decodeURIComponent(window.location.hash.substr(1));
+
+        if (hash.length > 0) {
+            this.input.val(hash);
+            this.filterPackages();
+        }
+    };
+
+    updateHash() {
+        window.location.hash = window.encodeURIComponent(this.input.val());
+    };
+
+    filterPackages() {
+        var needle = this.input.val().toLowerCase(),
+            closestSelector = this.listItemSelector;
+
+        this.list.hide();
+
+        this.packages.each(function () {
+            $(this).closest(closestSelector).toggle(
+                $(this).text().toLowerCase().indexOf(needle) !== -1
+            );
+        });
+
+        this.list.show();
+    };
+
+    init() {
+        var instance = this;
+
+        instance.input.keyup(function () {
+            instance.updateHash();
+            window.clearTimeout(instance.inputTimeout);
+            instance.inputTimeout = window.setTimeout(instance.filterPackages, 350);
+        });
+
+        $(window).keyup(function (event) {
+            if (event.keyCode === 27) { // "ESC" keyCode
+                instance.input.val('');
+                instance.filterPackages();
+            }
+        });
+
+        instance.readHash();
+    }
+}
+
+export default PackageFilter;

views/assets/js/app.js

@@ -0,0 +1,17 @@
+import $ from 'jquery';
+// import 'bootstrap';
+// import 'popper.js';
+import 'bootstrap/js/dist/collapse';
+import DateDistance from './App/DateDistance';
+import PackageFilter from './App/PackageFilter';
+
+function updateTimeElements () {
+    DateDistance.calculate('time')
+};
+
+$(document).ready(function() {
+    new PackageFilter('input#search', '#package-list', '.card');
+
+    updateTimeElements();
+    window.setInterval(updateTimeElements, 5000);
+});