ODT UI Rails Integration (`odt-ui-rails`)

Official Ruby on Rails integration for ODT-Lightweight-UI. Allows you to use React-based ODT design tokens and components seamlessly inside Rails MVC views (.html.erb) with zero boilerplate.

Quick Start

1. Add Gem to Rails `Gemfile`

# From local monorepo / subfolder:
gem "odt-ui-rails", path: "path/to/ODT-Lightweight-UI/integrations/rails"

# Or from GitHub:
# gem "odt-ui-rails", github: "PixxelTK/ODT-Lightweight-UI", glob: "integrations/rails/*.gemspec"

Then run:

bundle install

2. Run the Generator

bin/rails g odt:install

This command will automatically install the npm dependencies, generate the Stimulus controller + component registry, and link the ODT stylesheets.

Usage in ERB Views

Buttons

<%= odt_button "บันทึกข้อมูล", variant: "primary", size: "md" %>
<%= odt_button "ยกเลิก", variant: "ghost", size: "md" %>

Form Inputs

<%= form_with url: users_path do |f| %>
  <%= odt_input :email, label: "อีเมล", placeholder: "user@odt.com", required: true %>
  <%= odt_password_input :password, label: "รหัสผ่าน" %>
  <%= odt_button "เข้าสู่ระบบ", variant: "primary", type: "submit" %>
<% end %>

Cards & Layouts

<%= odt_card title: "ภาพรวมสถิติ" do %>
  <%= odt_stat_card title: "Total Users", value: "12,450", change: "+14.2%" %>
<% end %>

Generic Component Mounting

<%= odt_component :Badge, variant: "success", children: "Active" %>
<%= odt_component :Avatar, src: "https://avatar.iran.liara.run/public", name: "John Doe" %>

How It Works Under the Hood

Rails Engine: Automatically injects OdtUi::Helper methods into ActionView templates.
Stimulus Adapter (odt_component_controller.js): Safely mounts and unmounts React components in sync with Hotwire/Turbo navigation.
Registry (odt_registry.js): Maps string names to ODT React components. You can register custom app-specific wrappers here easily.

ODT UI Rails Integration (odt-ui-rails)