Skip to content

Commit

Permalink
Upgrade lux and vue (#205)
Browse files Browse the repository at this point in the history
* Upgrade lux

* Remove unused / unmaintained .ruby-version file

* Use a current ruby image

Hopefully will get around a missing key build failure

* Update browser-tools orb

* Update vite

Try to resolve test errors in CI
  • Loading branch information
hackartisan committed Apr 4, 2024
1 parent 37422d0 commit 7873990
Show file tree
Hide file tree
Showing 11 changed files with 554 additions and 766 deletions.
8 changes: 4 additions & 4 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion .ruby-version

This file was deleted.

2 changes: 0 additions & 2 deletions Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down
45 changes: 22 additions & 23 deletions Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -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)
Expand All @@ -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)
Expand Down Expand Up @@ -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)
Expand All @@ -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)
Expand All @@ -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
Expand Down Expand Up @@ -375,8 +377,5 @@ DEPENDENCIES
vite_rails
web-console

RUBY VERSION
ruby 3.2.0p0

BUNDLED WITH
2.4.1
89 changes: 1 addition & 88 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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.
Expand Down
50 changes: 10 additions & 40 deletions app/javascript/entrypoints/application.js
Original file line number Diff line number Diff line change
@@ -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 })
18 changes: 4 additions & 14 deletions app/views/layouts/application.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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>
15 changes: 8 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
Loading

0 comments on commit 7873990

Please sign in to comment.