Skip to content

Commit

Permalink
Upgrade lux
Browse files Browse the repository at this point in the history
  • Loading branch information
hackartisan committed Apr 3, 2024
1 parent 37422d0 commit 12b0f1a
Show file tree
Hide file tree
Showing 7 changed files with 518 additions and 726 deletions.
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
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"
"vite": "^5.0.12",
"vite-plugin-ruby": "^3.2.0",
"@vitejs/plugin-vue": "^5.0.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"
"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"
}
}
7 changes: 7 additions & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [
RubyPlugin(),
vue()
],
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler',
},
}
})
Loading

0 comments on commit 12b0f1a

Please sign in to comment.