odt-ui-rails 1.0.0 → 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 -49
  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: 8310748258718e2e6929d417742799b0161e53266a3b03cf3b8c4d78e47e897d
4
- data.tar.gz: fb7cde574022cf9e6390e12a0c0ed777f43a7086faf61516ba38baeda0d396c7
3
+ metadata.gz: 7f3d502ed94d1a35d653519dbb0a8f3a8c357f0248e9d1d58c4830740b2f4332
4
+ data.tar.gz: bbec797d7209fc7f0728a41276092c6ccc907544d7e20d9cdcb91ff40530bf85
5
5
  SHA512:
6
- metadata.gz: b18756fb6716ca8b6f9c1beb825d39f27836581aadc1058588863a707926d6c4d530591b58f1488833606ca9a8b78470fb72634f6473d1a82726ff89e570c5e7
7
- data.tar.gz: 3e5f890141948c545332f451c7222cc66faf991a80bed0ea59856f76b78c959b2c6b408403aae83f202626328f1375dd3e1abfe6ff416fc0eb5a98727eab6e50
6
+ metadata.gz: 2fff4bd8c26cd16351373dca4bca8da03d0310d272c9c5cb2e0d731ecddc431e70fb863e9ff24ea9a6ea3a17e4a5adcdffdc445b9d46675ca92457ea08c758c0
7
+ data.tar.gz: d07f27f59a574e569ca69f6e49ed61e9dc85415941810be1b306af25734867f745233cb86d622c177631328213c38e946bc80e5890056a186853d1a844f72946
data/README.md CHANGED
@@ -1,78 +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
- **Documentation & View Helper Reference:**
6
- [https://odt-lightweight.piaxel.com/storybook/?path=/story/overview-ruby-on-rails-gem--guide](https://odt-lightweight.piaxel.com/storybook/?path=/story/overview-ruby-on-rails-gem--guide)
5
+ ## Installation
7
6
 
8
- ---
9
-
10
- ## Quick Start
11
-
12
- ### 1. Add Gem to Rails `Gemfile`
7
+ Add to your `Gemfile`:
13
8
 
14
9
  ```ruby
15
- # From local monorepo / subfolder:
16
- gem "odt-ui-rails", path: "path/to/ODT-Lightweight-UI/integrations/rails"
17
-
18
- # Or from GitHub:
19
- # gem "odt-ui-rails", github: "PixxelTK/ODT-Lightweight-UI", glob: "integrations/rails/*.gemspec"
10
+ gem "odt-ui-rails", "~> 2.0.0"
20
11
  ```
21
12
 
22
- Then run:
13
+ Run bundle:
23
14
 
24
15
  ```bash
25
16
  bundle install
26
- ```
27
-
28
- ### 2. Run the Generator
29
-
30
- ```bash
31
17
  bin/rails g odt:install
32
18
  ```
33
19
 
34
- _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`:
35
21
 
36
- ---
22
+ ```css
23
+ @import "odt_ui.css";
24
+ ```
37
25
 
38
- ## Usage in ERB Views
26
+ ## Usage
39
27
 
40
28
  ### Buttons
41
-
42
29
  ```erb
43
- <%= odt_button "บันทึกข้อมูล", variant: "primary", size: "md" %>
44
- <%= 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" %>
45
32
  ```
46
33
 
47
- ### Form Inputs
48
-
34
+ ### Badges
49
35
  ```erb
50
- <%= form_with url: users_path do |f| %>
51
- <%= odt_input :email, label: "อีเมล", placeholder: "user@odt.com", required: true %>
52
- <%= odt_password_input :password, label: "รหัสผ่าน" %>
53
- <%= odt_button "เข้าสู่ระบบ", variant: "primary", type: "submit" %>
54
- <% end %>
36
+ <%= odt_badge "Active", variant: :subtle, color: :success %>
37
+ <%= odt_badge "Date", icon: "fa-regular fa-calendar" %>
55
38
  ```
56
39
 
57
- ### Cards & Layouts
58
-
40
+ ### Cards & Layout
59
41
  ```erb
60
- <%= odt_card title: "ภาพรวมสถิติ" do %>
61
- <%= 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>
62
44
  <% end %>
63
45
  ```
64
46
 
65
- ### Generic Component Mounting
66
-
47
+ ### Typography & Alerts
67
48
  ```erb
68
- <%= odt_component :Badge, variant: "success", children: "Active" %>
69
- <%= 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 %>
70
53
  ```
71
-
72
- ---
73
-
74
- ## How It Works Under the Hood
75
-
76
- 1. **Rails Engine**: Automatically injects `OdtUi::Helper` methods into ActionView templates.
77
- 2. **Stimulus Adapter (`odt_component_controller.js`)**: Safely mounts and unmounts React components in sync with Hotwire/Turbo navigation.
78
- 3. **Registry (`odt_registry.js`)**: Maps string names to ODT React components. You can register custom app-specific wrappers here easily.