Adds Webpacker and LUX

.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": "> 1%",
+        "uglify": true
+      },
+      "useBuiltIns": true
+    }]
+  ],
+
+  "plugins": [
+    "syntax-dynamic-import",
+    "transform-object-rest-spread",
+    ["transform-class-properties", { "spec": true }]
+  ]
+}

.gitignore

@@ -18,3 +18,9 @@
 /coverage/*
 /public/uploads
 
+/public/packs
+/public/packs-test
+/node_modules
+yarn-debug.log*
+.yarn-integrity
+/yarn.lock

.postcssrc.yml

@@ -0,0 +1,3 @@
+plugins:
+  postcss-import: {}
+  postcss-cssnext: {}

.rubocop.yml

@@ -17,6 +17,7 @@ AllCops:
     - 'vendor/**/*'
     - 'bin/*'
     - 'config/deploy.rb'
+    - 'node_modules/**/*'
 
 Lint/UnusedBlockArgument:
   Exclude:

Gemfile

@@ -95,6 +95,9 @@ gem 'almond-rails', '~> 0.1'
 gem 'pul_uv_rails', github: 'pulibrary/pul_uv_rails', branch: 'master'
 gem 'riiif'
 
+# LUX dependency
+gem "webpacker", "~> 3.3"
+
 # PUL Assets
 gem 'pul-assets', github: 'pulibrary/pul_assets'
 # gem 'spotlight-resources-iiif', github: 'pulibrary/spotlight-resources-iiif', branch: 'default_vocab'

Gemfile.lock

@@ -363,6 +363,8 @@ GEM
     rack (2.0.5)
     rack-protection (1.5.5)
       rack
+    rack-proxy (0.6.4)
+      rack
     rack-test (0.6.3)
       rack (>= 1.0)
     rails (5.0.7)
@@ -566,6 +568,10 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff
+    webpacker (3.5.5)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
     websocket-driver (0.6.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.3)
@@ -639,6 +645,7 @@ DEPENDENCIES
   vcr
   web-console (~> 2.0)
   webmock
+  webpacker (~> 3.3)
 
 BUNDLED WITH
-   1.16.2
+   1.16.3

Procfile

@@ -0,0 +1,3 @@
+# Procfile
+backend: bin/rails s -p 3000
+frontend: bin/webpack-dev-server

app/assets/stylesheets/application.scss

@@ -19,7 +19,23 @@
 @import 'spotlight/spotlight';
 
 @import 'normalize-rails';
-@import 'pul-assets';
+
+// @import 'mixins';
+
+@import 'variables/colors';
+
+body {
+  background-color: $light-gray;
+}
+
+.masthead {
+  margin-bottom: 0px;
+}
+
+#main-content {
+  background-color: $white;
+  padding-top: 15px;
+}
 
 .viewer {
   height: 400px;

app/assets/stylesheets/variables/colors.scss

@@ -0,0 +1,11 @@
+$white: #ffffff;
+$black: #000000;
+$dark-gray: #494f57;
+$blacklight-gray: #777;
+$gray: #e8e6df;
+$light-gray: #f1f2f3;
+$dark-orange: #9F620D;
+$orange: #e87511;
+$blue: #3072AB;
+$brand-danger: #a94442;
+$yellow-light: #fee7ba;

app/javascript/app.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="app">
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      message: "Hello Vue!"
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>

app/javascript/packs/application.js

@@ -0,0 +1,26 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+
+import Vue from 'vue/dist/vue.esm'
+import system from 'lux-design-system'
+import 'lux-design-system/lib/system/system.css'
+import TurbolinksAdapter from 'vue-turbolinks'
+// import store from '../store'
+
+Vue.use(system)
+Vue.use(TurbolinksAdapter)
+
+// create the LUX app and mount it to a wrapper with data-behavior="vue"
+document.addEventListener('turbolinks:load', () => {
+  const app = new Vue({
+    el: '[data-behavior="vue"]'
+    // store
+  })
+})

app/javascript/packs/hello_vue.js

@@ -0,0 +1,71 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
+// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// All it does is render <div>Hello Vue</div> at the bottom of the page.
+
+import Vue from 'vue'
+import App from '../app.vue'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.body.appendChild(document.createElement('hello'))
+  const app = new Vue({
+    el,
+    render: h => h(App)
+  })
+
+  console.log(app)
+})
+
+
+// The above code uses Vue without the compiler, which means you cannot
+// use Vue to target elements in your existing html templates. You would
+// need to always use single file components.
+// To be able to target elements in your existing html/erb templates,
+// comment out the above code and uncomment the below
+// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
+// Then add this markup to your html template:
+//
+// <div id='hello'>
+//   {{message}}
+//   <app></app>
+// </div>
+
+
+// import Vue from 'vue/dist/vue.esm'
+// import App from '../app.vue'
+//
+// document.addEventListener('DOMContentLoaded', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: {
+//       message: "Can you say hello?"
+//     },
+//     components: { App }
+//   })
+// })
+//
+//
+//
+// If the using turbolinks, install 'vue-turbolinks':
+//
+// yarn add 'vue-turbolinks'
+//
+// Then uncomment the code block below:
+//
+// import TurbolinksAdapter from 'vue-turbolinks'
+// import Vue from 'vue/dist/vue.esm'
+// import App from '../app.vue'
+//
+// Vue.use(TurbolinksAdapter)
+//
+// document.addEventListener('turbolinks:load', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: {
+//       message: "Can you say hello?"
+//     },
+//     components: { App }
+//   })
+// })

app/views/_user_util_links.html.erb

@@ -5,6 +5,7 @@
       <li><%= action %></li>
     <% end %>
   </ul>
+</nav>
 
   <ul class="nav navbar-nav">
     <li><%= link_to "Home", root_path %></li>

app/views/layouts/spotlight/spotlight.html.erb

@@ -18,6 +18,8 @@
     <%= stylesheet_link_tag    "application" %>
     <%= javascript_include_tag :modernizr %>
     <%= javascript_include_tag "application" %>
+    <%= stylesheet_pack_tag 'application' %>
+    <%= javascript_pack_tag 'application' %>
     <%= csrf_meta_tags %>
     <%= content_for(:head) %>
     <%= description %>
@@ -32,25 +34,27 @@
     <%= render partial: 'shared/matomo' %>
   </head>
   <body class="<%= render_body_class %>">
-    <%= render partial: 'shared/announcements' %>
-    <%= render partial: 'pul-assets/header_navbar' %>
-    <%= render partial: 'shared/masthead' %>
-    <%= content_for?(:header_content) ? yield(:header_content) : "" %>
+    <div data-behavior="vue">
+      <%= render partial: 'shared/announcements' %>
+      <%= render partial: 'shared/header_navbar' %>
+      <%= render partial: 'shared/masthead' %>
+      <%= content_for?(:header_content) ? yield(:header_content) : "" %>
 
-    <%= render partial: 'shared/ajax_modal' %>
+      <%= render partial: 'shared/ajax_modal' %>
 
-    <main id="main-content" role="main">
-      <div class="container">
-      <%= render partial: '/flash_msg', layout: 'shared/flash_messages' %>
+      <main id="main-content" role="main">
+        <div class="container">
+        <%= render partial: '/flash_msg', layout: 'shared/flash_messages' %>
 
-        <div class="row">
-          <%= content_for?(:content) ? yield(:content) : yield %>
-        </div>
+          <div class="row">
+            <%= content_for?(:content) ? yield(:content) : yield %>
+          </div>
 
-      </div>
-    </main>
+        </div>
+      </main>
 
-    <%= render partial: 'shared/matomo_noscript' %>
-    <%= render :partial => 'shared/footer' %>
+      <%= render partial: 'shared/matomo_noscript' %>
+      <%= render :partial => 'shared/footer' %>
+    </div>
   </body>
 </html>

app/views/shared/_footer.html.erb

@@ -1,3 +1,3 @@
-<%= render 'pul-assets/footer' %>
-
-<%= render 'shared/analytics' %>
+<footer role="contentinfo">
+    <library-footer></library-footer>
+</footer>

app/views/shared/_header_navbar.html.erb

@@ -0,0 +1,25 @@
+<header role="banner">
+  <library-header app-name="<%= t('blacklight.application_name') %>" app-url="<%= root_path %>">
+    <% if current_user %>
+    <dropdown-menu>
+      <input-button variation="dropdown"><%= current_user %></input-button>
+      <menu-bar type="nav" active="All" :menu-items="[
+        <% if current_exhibit and can? :curate, current_exhibit %>
+        {name: '<%= t('spotlight.dashboards.show.header') %>', component: '<%= t('spotlight.dashboards.show.header') %>', href: '<%= spotlight.exhibit_dashboard_path(current_exhibit) %>'},
+        <% end %>
+        <% if can? :create, Spotlight::Exhibit %>
+        {name: '<%= t(:'helpers.action.spotlight/exhibit.create') %>', component: '<%= t(:'helpers.action.spotlight/exhibit.create') %>', href: '<%= spotlight.new_exhibit_path %>'},
+        <% end %>
+        {name: '<%= t('spotlight.header_links.logout') %>', component: '<%= t('spotlight.header_links.logout') %>', href: '<%= main_app.destroy_user_session_path %>'}
+      ]"/>
+    </dropdown-menu>
+    <% else %>
+    <menu-bar type="nav" :menu-items="[
+      {name: '<%= t('spotlight.header_links.login') %>', component: '<%= t('spotlight.header_links.login') %>', href: '<%= new_user_session_path %>'},
+      <% if current_exhibit and show_contact_form? %>
+      {name: '<%= t('spotlight.header_links.contact') %>', component: '<%= t('spotlight.header_links.contact') %>', href: '<%= spotlight.new_exhibit_contact_form_path(current_exhibit) %>'}
+      <% end %>
+    ]"/>
+    <% end %>
+  </library-header>
+</header>

bin/webpack

@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/webpack_runner"
+Webpacker::WebpackRunner.run(ARGV)

bin/webpack-dev-server

@@ -0,0 +1,15 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/dev_server_runner"
+Webpacker::DevServerRunner.run(ARGV)

config/environments/development.rb

@@ -1,4 +1,7 @@
 Rails.application.configure do
+  # Verifies that versions and hashed value of the package contents in the project's package.json
+  config.webpacker.check_yarn_integrity = true
+
   # Settings specified here will take precedence over those in config/application.rb.
 
   # In the development environment your application's code is reloaded on

config/environments/production.rb

@@ -1,4 +1,7 @@
 Rails.application.configure do
+  # Verifies that versions and hashed value of the package contents in the project's package.json
+  config.webpacker.check_yarn_integrity = false
+
   # Settings specified here will take precedence over those in config/application.rb.
 
   # Code is not reloaded between requests.

config/locales/blacklight.en.yml

@@ -1,3 +1,3 @@
 en:
   blacklight:
-    application_name: 'Blacklight'
+    application_name: 'Digital PUL'

config/webpack/development.js

@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()