Upgrade lux and vue

.circleci/config.yml

@@ -23,14 +23,14 @@ commands:
           paths:
             - ~/.cache/yarn
 orbs:
-  browser-tools: circleci/browser-tools@1.4.3
+  browser-tools: circleci/browser-tools@1.4.8
   coveralls: coveralls/coveralls@1.0.6
 jobs:
   build:
     working_directory: ~/rails_template
     docker:
       - &ruby_docker
-        image: cimg/ruby:3.2.0-browsers
+        image: cimg/ruby:3.2.3-browsers
         environment:
           RAILS_ENV: test
     steps:
@@ -64,8 +64,8 @@ jobs:
     steps:
       - attach_workspace:
           at: *root
-      - browser-tools/install-browser-tools:
-          chrome-version: 114.0.5735.90
+      - browser-tools/install-chrome
+      - browser-tools/install-chromedriver
       - run:
           name: Wait for PostgreSQL
           command: dockerize -wait tcp://localhost:5432 -timeout 1m

.gitignore

@@ -70,6 +70,7 @@ build-iPhoneSimulator/
 # Vite Ruby
 /public/vite*
 node_modules
+yarn-error.log
 # Vite uses dotenv and suggests to ignore local-only env files. See
 # https://vitejs.dev/guide/env-and-mode.html#env-files
 *.local

Gemfile

@@ -3,8 +3,6 @@
 source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby '3.2.0'
-
 # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
 gem 'rails', '~> 7.0.4'
 

Gemfile.lock

@@ -107,7 +107,7 @@ GEM
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
     coderay (1.1.3)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
     console (1.23.2)
       fiber-annotation
       fiber-local
@@ -130,7 +130,7 @@ GEM
     fiber-local (1.0.0)
     globalid (1.1.0)
       activesupport (>= 5.0)
-    i18n (1.12.0)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     importmap-rails (1.1.5)
       actionpack (>= 6.0.0)
@@ -155,9 +155,9 @@ GEM
       activerecord
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
-    loofah (2.20.0)
+    loofah (2.22.0)
       crass (~> 1.0.2)
-      nokogiri (>= 1.5.9)
+      nokogiri (>= 1.12.0)
     mail (2.8.1)
       mini_mime (>= 0.1.1)
       net-imap
@@ -167,7 +167,7 @@ GEM
     matrix (0.4.2)
     method_source (1.0.0)
     mini_mime (1.1.5)
-    minitest (5.18.0)
+    minitest (5.22.3)
     msgpack (1.6.1)
     net-imap (0.3.4)
       date
@@ -182,11 +182,11 @@ GEM
       net-protocol
     net-ssh (7.1.0)
     nio4r (2.7.0)
-    nokogiri (1.15.4-arm64-darwin)
+    nokogiri (1.16.3-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.4-x86_64-darwin)
+    nokogiri (1.16.3-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.4-x86_64-linux)
+    nokogiri (1.16.3-x86_64-linux)
       racc (~> 1.4)
     parallel (1.22.1)
     parser (3.2.1.1)
@@ -201,11 +201,11 @@ GEM
     public_suffix (5.0.3)
     puma (5.6.8)
       nio4r (~> 2.0)
-    racc (1.7.1)
-    rack (2.2.8)
+    racc (1.7.3)
+    rack (2.2.9)
     rack-mini-profiler (3.1.1)
       rack (>= 1.2.0)
-    rack-proxy (0.7.6)
+    rack-proxy (0.7.7)
       rack
     rack-test (2.1.0)
       rack (>= 1.3)
@@ -223,11 +223,13 @@ GEM
       activesupport (= 7.0.4.3)
       bundler (>= 1.15.0)
       railties (= 7.0.4.3)
-    rails-dom-testing (2.0.3)
-      activesupport (>= 4.2.0)
+    rails-dom-testing (2.2.0)
+      activesupport (>= 5.0.0)
+      minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.5.0)
-      loofah (~> 2.19, >= 2.19.1)
+    rails-html-sanitizer (1.6.0)
+      loofah (~> 2.21)
+      nokogiri (~> 1.14)
     railties (7.0.4.3)
       actionpack (= 7.0.4.3)
       activesupport (= 7.0.4.3)
@@ -236,7 +238,7 @@ GEM
       thor (~> 1.0)
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
-    rake (13.0.6)
+    rake (13.2.0)
     regexp_parser (2.8.1)
     reline (0.3.2)
       io-console (~> 0.5)
@@ -304,7 +306,7 @@ GEM
     sync (0.5.0)
     term-ansicolor (1.7.1)
       tins (~> 1.0)
-    thor (1.2.1)
+    thor (1.3.1)
     timeout (0.3.2)
     timers (4.3.5)
     tins (1.32.1)
@@ -316,10 +318,10 @@ GEM
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.4.2)
-    vite_rails (3.0.14)
+    vite_rails (3.0.17)
       railties (>= 5.1, < 8)
       vite_ruby (~> 3.0, >= 3.2.2)
-    vite_ruby (3.3.0)
+    vite_ruby (3.5.0)
       dry-cli (>= 0.7, < 2)
       rack-proxy (~> 0.6, >= 0.6.1)
       zeitwerk (~> 2.2)
@@ -334,7 +336,7 @@ GEM
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.6.7)
+    zeitwerk (2.6.13)
 
 PLATFORMS
   arm64-darwin-21
@@ -375,8 +377,5 @@ DEPENDENCIES
   vite_rails
   web-console
 
-RUBY VERSION
-   ruby 3.2.0p0
-
 BUNDLED WITH
    2.4.1

README.md

@@ -1,6 +1,6 @@
 # imagecat-rails
 
-A rewrite of a imagecat.princeton.edu 
+A rewrite of imagecat.princeton.edu
 ---
 This catalog contains records for items cataloged before 1980.
 Records are arranged alphabetically with authors, titles, and subjects interfiled.
@@ -79,93 +79,6 @@ To import the CardImage records: `rake import:import_card_images`
 - If you added the key to a new config stanza in your ~/.aws/credentials, you'll
     need to run aws commands with the --profile command line option
 
-## Install lux 
-
-The following steps will help to set up lux for this application. 
-
-Step 1: We followed the [lux documentation](https://vite-ruby.netlify.app/guide/#installation-%F0%9F%92%BF) to install vite-ruby. 
-
-Step 2: 
-
-Then run the following commands:
-
-`yarn add lux-design-system`
-
-`yarn add sass`
-
-Step 3:
-
-We want to make sure that our package.json file matches step 6 in the [lux install guide](https://pulibrary.github.io/lux/docs/#/Installing%20LUX): 
-
-```
-"dependencies": {
-  "lux-design-system": "^2.0.4",
-  "vue": "^2.6.10",
-  "vue-loader": "^15.7.0",
-  "vue-template-compiler": "^2.6.10"
-},
-```
-
-Step 4:
-We will then add the following to ensure that the view renders successfully (tested using localhost). The package.json file now looks like this: 
-
-```
-{
-  "devDependencies": {
-    "vite": "^4.2.1",
-    "vite-plugin-ruby": "^3.2.1"
-  },
-  "dependencies": {
-    "lux-design-system": "^4.3.0",
-    "sass": "^1.62.0",
-    "vue": "^2.6.10",
-    "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.6.10"
-  }
-}
-```
-Step 5:
-Paste in code block from step 8 into app/javascript/entrypoints/application.js
-
-```
-import Vue from "vue/dist/vue.esm"
-import system from "lux-design-system"
-import "lux-design-system/dist/system/system.css"
-import "lux-design-system/dist/system/tokens/tokens.scss"
-import store from "../store" // this is only if you are using vuex
-
-Vue.use(system)
-
-// create the LUX app and mount it to wrappers with class="lux"
-document.addEventListener("DOMContentLoaded", () => {
-  var elements = document.getElementsByClassName("lux")
-  for (var i = 0; i < elements.length; i++) {
-    new Vue({
-      el: elements[i],
-      store, // this is only if you're using vuex
-    })
-  }
-})
-```
-
-Step 6:
-Add the following code block (retrieved from https://pulibrary.github.io/lux/docs/#/Patterns/LibraryHeader):
-
-```
-<library-header app-name="Leave and Travel Requests" abbr-name="LTR" app-url="https://catalog.princeton.edu" theme="dark">
-    <menu-bar type="main-menu" :menu-items="[
-        {name: 'Help', component: 'Help', href: '/help/'},
-        {name: 'Feedback', component: 'Feedback', href: '/feedback/'},
-        {name: 'Your Account', component: 'Account', href: '/account/', children: [
-          {name: 'Logout', component: 'Logout', href: '/account/'}
-        ]}
-      ]"
-    ></menu-bar>
-  </library-header>
-  ```
-
-If things have successfully installed, when running your local server you should see this [header](https://pulibrary.github.io/lux/docs/#/Patterns/LibraryHeader).
-
 ## Use Cases for Imagecat
 
 * When cards were converted to OCLC records, there were quality assurance issues. These scanned cards allow us to correct these errors when they come up. 

app/javascript/entrypoints/application.js

@@ -1,44 +1,14 @@
-// To see this message, add the following to the `<head>` section in your
-// views/layouts/application.html.erb
-//
-//    <%= vite_client_tag %>
-//    <%= vite_javascript_tag 'application' %>
-console.log('Vite ⚡️ Rails')
+import {createApp} from "vue";
+import lux from "lux-design-system";
+import "lux-design-system/dist/style.css";
 
-// If using a TypeScript entrypoint file:
-//     <%= vite_typescript_tag 'application' %>
-//
-// If you want to use .jsx or .tsx, add the extension:
-//     <%= vite_javascript_tag 'application.jsx' %>
-
-console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')
-
-// Example: Load Rails libraries in Vite.
-//
-// import * as Turbo from '@hotwired/turbo'
-// Turbo.start()
-//
-// import ActiveStorage from '@rails/activestorage'
-// ActiveStorage.start()
-//
-// // Import all channels.
-// const channels = import.meta.globEager('./**/*_channel.js')
-
-// Example: Import a stylesheet in app/frontend/index.css
-// import '~/index.css'
-import Vue from "vue/dist/vue.esm"
-import system from "lux-design-system"
-import "lux-design-system/dist/system/system.css"
-import "lux-design-system/dist/system/tokens/tokens.scss"
-
-Vue.use(system)
+const app = createApp({});
+const createMyApp = () => createApp(app);
 
 // create the LUX app and mount it to wrappers with class="lux"
-document.addEventListener("DOMContentLoaded", () => {
-  var elements = document.getElementsByClassName("lux")
-  for (var i = 0; i < elements.length; i++) {
-    new Vue({
-      el: elements[i]
-    })
+document.addEventListener ('DOMContentLoaded', () => {
+  const elements = document.getElementsByClassName('lux')
+  for(let i = 0; i < elements.length; i++){
+    createMyApp().use(lux).mount(elements[i]);
   }
-})
+}, { once: true })

app/views/layouts/application.html.erb

@@ -10,26 +10,16 @@
     <%= javascript_importmap_tags %>
     <%= vite_client_tag %>
     <%= vite_javascript_tag 'application' %>
-    <!--
-      If using a TypeScript entrypoint file:
-        vite_typescript_tag 'application'
-
-      If using a .jsx or .tsx entrypoint, add the extension:
-        vite_javascript_tag 'application.jsx'
-
-      Visit the guide for more information: https://vite-ruby.netlify.app/guide/rails
-    -->
-
   </head>
 
   <body>
     <div class="lux">
-      <library-header app-name="Supplementary Catalog" abbr-name="Supplementary" app-url="<%= root_path %>" theme="dark">
-      </library-header>
-      <div id="main-content"> 
+      <lux-library-header app-name="Supplementary Catalog" abbr-name="Supplementary" app-url="<%=root_path%>" theme="dark">
+      </lux-library-header>
+      <div id="main-content">
         <%= yield %>
       </div>
-      <library-footer></library-footer>
+      <lux-library-footer></lux-library-footer>
     </div>
   </body>
 </html>

package.json

@@ -1,13 +1,14 @@
 {
   "devDependencies": {
-    "vite": "^4.5.2",
-    "vite-plugin-ruby": "^3.2.0"
+    "@vitejs/plugin-vue": "^5.0.1",
+    "vite": "^5.0.0",
+    "vite-plugin-ruby": "^5.0.0"
   },
   "dependencies": {
-    "lux-design-system": "^4.3.0",
-    "sass": "^1.62.0",
-    "vue": "^2.6.10",
-    "vue-loader": "^15.7.0",
-    "vue-template-compiler": "^2.6.10"
+    "lux-design-system": "^5.0.0-beta.6",
+    "postcss-import": "^15.1.0",
+    "sass": "^1.69.5",
+    "vue": "^3.4.0",
+    "vue-loader": "^15.7.0"
   }
 }