odt-ui-rails 0.1.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +24 -46
  3. data/app/assets/stylesheets/odt_ui/styles.css +3463 -0
  4. data/app/assets/stylesheets/odt_ui/tokens.css +302 -0
  5. data/app/assets/stylesheets/odt_ui.css +2 -0
  6. data/lib/generators/odt/install_generator.rb +6 -53
  7. data/lib/odt_ui/engine.rb +8 -0
  8. data/lib/odt_ui/helper.rb +305 -103
  9. data/lib/odt_ui/version.rb +3 -1
  10. metadata +5 -5
  11. data/lib/generators/odt/templates/odt_component_controller.js +0 -48
  12. data/lib/generators/odt/templates/odt_registry.js +0 -28
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c4f464afaea55b9bc1136ae9d86d5dc6008da52b3383e9939a2507d6645f3c72
4
- data.tar.gz: 23ae8add898e19986518487bffb3e1b73da52e498fc21815e984500742182eaa
3
+ metadata.gz: 7f3d502ed94d1a35d653519dbb0a8f3a8c357f0248e9d1d58c4830740b2f4332
4
+ data.tar.gz: bbec797d7209fc7f0728a41276092c6ccc907544d7e20d9cdcb91ff40530bf85
5
5
  SHA512:
6
- metadata.gz: 4d60b4cd47ccdb71b24ba0ad43df728fddd43854d7cebf3613a4ee0a92aff998c68dff76165bf84910f998d3fd9fe25e8b6fa6b5c676f7353702a7eff20f898b
7
- data.tar.gz: 83fac7c8cbded7660ae29ebe9092c40f31e91195c6418f09d28ba5e9df07e814344f0d9c45defdc1106e6f811d6e9f65a46a077b6dd09183396cd6ef176e5764
6
+ metadata.gz: 2fff4bd8c26cd16351373dca4bca8da03d0310d272c9c5cb2e0d731ecddc431e70fb863e9ff24ea9a6ea3a17e4a5adcdffdc445b9d46675ca92457ea08c758c0
7
+ data.tar.gz: d07f27f59a574e569ca69f6e49ed61e9dc85415941810be1b306af25734867f745233cb86d622c177631328213c38e946bc80e5890056a186853d1a844f72946
data/README.md CHANGED
@@ -1,75 +1,53 @@
1
- # ODT UI Rails Integration (`odt-ui-rails`)
1
+ # ODT-UI for Ruby on Rails
2
2
 
3
- 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.
3
+ Native Ruby on Rails integration for ODT-Lightweight-UI. Fast, accessible, and zero JavaScript runtime overhead for UI components.
4
4
 
5
- ---
5
+ ## Installation
6
6
 
7
- ## Quick Start
8
-
9
- ### 1. Add Gem to Rails `Gemfile`
7
+ Add to your `Gemfile`:
10
8
 
11
9
  ```ruby
12
- # From local monorepo / subfolder:
13
- gem "odt-ui-rails", path: "path/to/ODT-Lightweight-UI/integrations/rails"
14
-
15
- # Or from GitHub:
16
- # gem "odt-ui-rails", github: "PixxelTK/ODT-Lightweight-UI", glob: "integrations/rails/*.gemspec"
10
+ gem "odt-ui-rails", "~> 2.0.0"
17
11
  ```
18
12
 
19
- Then run:
13
+ Run bundle:
20
14
 
21
15
  ```bash
22
16
  bundle install
23
- ```
24
-
25
- ### 2. Run the Generator
26
-
27
- ```bash
28
17
  bin/rails g odt:install
29
18
  ```
30
19
 
31
- _This command will automatically install the npm dependencies, generate the Stimulus controller + component registry, and link the ODT stylesheets._
20
+ Or add CSS manually in `app/assets/stylesheets/application.css`:
32
21
 
33
- ---
22
+ ```css
23
+ @import "odt_ui.css";
24
+ ```
34
25
 
35
- ## Usage in ERB Views
26
+ ## Usage
36
27
 
37
28
  ### Buttons
38
-
39
29
  ```erb
40
- <%= odt_button "บันทึกข้อมูล", variant: "primary", size: "md" %>
41
- <%= odt_button "ยกเลิก", variant: "ghost", size: "md" %>
30
+ <%= odt_button "Click me", variant: :filled, color: :primary, radius: :full %>
31
+ <%= odt_button "New Schedule", href: new_event_path, icon: "fa-solid fa-plus" %>
42
32
  ```
43
33
 
44
- ### Form Inputs
45
-
34
+ ### Badges
46
35
  ```erb
47
- <%= form_with url: users_path do |f| %>
48
- <%= odt_input :email, label: "อีเมล", placeholder: "user@odt.com", required: true %>
49
- <%= odt_password_input :password, label: "รหัสผ่าน" %>
50
- <%= odt_button "เข้าสู่ระบบ", variant: "primary", type: "submit" %>
51
- <% end %>
36
+ <%= odt_badge "Active", variant: :subtle, color: :success %>
37
+ <%= odt_badge "Date", icon: "fa-regular fa-calendar" %>
52
38
  ```
53
39
 
54
- ### Cards & Layouts
55
-
40
+ ### Cards & Layout
56
41
  ```erb
57
- <%= odt_card title: "ภาพรวมสถิติ" do %>
58
- <%= odt_stat_card title: "Total Users", value: "12,450", change: "+14.2%" %>
42
+ <%= odt_card title: "Profile", subtitle: "User settings" do %>
43
+ <p>Card content</p>
59
44
  <% end %>
60
45
  ```
61
46
 
62
- ### Generic Component Mounting
63
-
47
+ ### Typography & Alerts
64
48
  ```erb
65
- <%= odt_component :Badge, variant: "success", children: "Active" %>
66
- <%= odt_component :Avatar, src: "https://avatar.iran.liara.run/public", name: "John Doe" %>
49
+ <%= odt_heading "Welcome", as: :h1 %>
50
+ <%= odt_text "Description here", color: :muted %>
51
+ <%= odt_alert "Saved successfully!", variant: :success %>
52
+ <%= odt_avatar name: "John Doe", size: :md %>
67
53
  ```
68
-
69
- ---
70
-
71
- ## How It Works Under the Hood
72
-
73
- 1. **Rails Engine**: Automatically injects `OdtUi::Helper` methods into ActionView templates.
74
- 2. **Stimulus Adapter (`odt_component_controller.js`)**: Safely mounts and unmounts React components in sync with Hotwire/Turbo navigation.
75
- 3. **Registry (`odt_registry.js`)**: Maps string names to ODT React components. You can register custom app-specific wrappers here easily.