LocoMotion is both a set of guides for building Ruby on Rails applications as well as a Component library that you can install into an existing Rails application.
This guide walks you through installing the Component library.
Add the following to your Gemfile and run bundle install.
# Gemfile
gem "loco_motion-rails", "~> 0.5.0", require: "loco_motion"Or if you want the latest and greatest:
# Gemfile
gem "loco_motion", github: "profoundry-us/loco_motion", branch: "main", require: "loco_motion"Next, some of the components require Javascript. Install the library with your package manager of choice.
npm i -D @profoundry-us/loco_motion@latest
yarn add -D @profoundry-us/loco_motion@latest
Now, import and register the relevant controllers in your
controllers/index.js file.
# app/javascript/controllers/index.js
import { Application } from "@hotwired/stimulus"
const application = Application.start()
// Import LocoMotion controllers
import { CountdownController, ThemeController, CallyInputController } from "@profoundry-us/loco_motion"
application.register("loco-countdown", CountdownController)
application.register("loco-theme", ThemeController)
application.register("loco-cally-input", CallyInputController)Note that there is an extra step if you want to use the Cally Calendar or CallyInput components.
See the CallyInput Docs for more information.
And finally, all of the components are built on top of TailwindCSS, so we need to notify Tailwind of where to look for our components so that it can properly setup and tree-shake all of our code into a minimal package.
Add the following to your tailwind.config.js file.
// tailwind.config.js
const { execSync } = require('child_process');
// Get the path to the loco_motion gem
let locoBundlePath = execSync('bundle show loco_motion-rails').toString().trim();
console.log(" *** Importing LocoMotion gem Components into Tailwind: ", locoBundlePath);
module.exports = {
content: [
`${locoBundlePath}/app/components/**/*.{rb,js,html,haml}`,
'app/components/**/*.{rb,js,html,haml}',
'app/views/**/*.{rb,js,html,haml}',
]
}You can remove the console.log once everything is working.
If you want an even smaller bundle size, you can import just the
components that you utilize. You will, however, need to update your
tailwind.config.js file every time you add new components.
// tailwind.config.js
const { execSync } = require('child_process');
// Get the path to the loco_motion gem
let locoBundlePath = execSync('bundle show loco_motion-rails').toString().trim();
console.log(" *** Importing LocoMotion gem Components into Tailwind: ", locoBundlePath);
module.exports = {
content: [
`${locoBundlePath}/app/components/hero/*.{rb,js,html,haml}`,
`${locoBundlePath}/app/components/daisy/actions/button_component.{rb,haml}`,
`${locoBundlePath}/app/components/daisy/data_display/countdown_component.{rb,haml}`,
`${locoBundlePath}/app/components/daisy/data_display/countdown_controller.js`,
/* And so on and so forth */
'app/components/**/*.{rb,js,html,haml}',
'app/views/**/*.{rb,js,html,haml}',
]You're ready to start using the components! 🥳
Hop into one of your views and show the world what you can build.
Loading endless possibilities...
Loading endless possibilities...
= daisy_button("Done!", html: { onclick: "alert('Go you!')" })
= daisy_badge(css: "badge-success") do
= hero_icon("check-circle")
Task completed!
= daisy_alert(icon: "information-circle", css: "alert-info alert-soft") do
Where will you go from here?
%p.flex.flex-col.gap-1.text-primary
Loading endless possibilities...
= daisy_progress(css: "w-100 progress-primary")
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.