odt-ui-rails 2.0.1 → 2.2.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.
- checksums.yaml +4 -4
- data/README.md +80 -18
- data/app/assets/stylesheets/odt_ui/styles.css +907 -3195
- data/app/assets/stylesheets/odt_ui/theme.css +126 -0
- data/app/assets/stylesheets/odt_ui/tokens.css +189 -46
- data/lib/generators/odt/install_generator.rb +45 -4
- data/lib/odt_ui/helper.rb +628 -241
- data/lib/odt_ui/version.rb +1 -1
- data/sig/odt_ui.rbs +194 -61
- metadata +2 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7c416abbfe135945909d7c97c21418c19144c604fb323ca5ca662b0b260a5815
|
|
4
|
+
data.tar.gz: ac191c2750c483638f6c33b93f7cf81b1593ddab6fe8cd1e4abcc8e7e20cf021
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: be8a662988ae007208ba5b64f3630ff758320f81945243aa9566e785c468c1b908fa1b6e2a19d48c36c15746f8a4f4b860bcbb568dc3e45024d8b4b370c1066d
|
|
7
|
+
data.tar.gz: 5b5a450963c984812f4e9b90d73d65117318495e52422c9e7bad624f6f5e24f708cb22b3aa878c5c3780c26660905256615e94eaf350d72dd8d44b08d692d298
|
data/README.md
CHANGED
|
@@ -1,53 +1,115 @@
|
|
|
1
|
-
# ODT-UI for Ruby on Rails
|
|
1
|
+
# ODT-UI for Ruby on Rails (`odt-ui-rails`)
|
|
2
2
|
|
|
3
|
-
Native Ruby on Rails integration for ODT-Lightweight-UI
|
|
3
|
+
Standalone CSS First & Native Ruby on Rails integration for **ODT-Lightweight-UI**. Zero build tools required by host application, with seamless Tailwind CSS v4 support and complete ActionView helpers.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- 🎨 **100% Standalone CSS First:** Zero build steps required. Ships pre-compiled `.odt-*` classes and design tokens.
|
|
10
|
+
- ⚡ **Tailwind CSS v4 Seamless Interop:** Host apps can use custom Tailwind utility classes via `class: "..."` and include `@theme` color presets.
|
|
11
|
+
- 🧩 **Complete Component Set:** Buttons, Badges, Cards, Alerts, Headings, Text, Avatars, Inputs, Textareas, Selects, Checkboxes, Radios, and Form Groups.
|
|
12
|
+
- 💎 **Ruby LSP & Solargraph Types:** Full RBS type signatures included.
|
|
13
|
+
|
|
14
|
+
---
|
|
4
15
|
|
|
5
16
|
## Installation
|
|
6
17
|
|
|
7
18
|
Add to your `Gemfile`:
|
|
8
19
|
|
|
9
20
|
```ruby
|
|
10
|
-
gem "odt-ui-rails", "~> 2.
|
|
21
|
+
gem "odt-ui-rails", "~> 2.1.0"
|
|
11
22
|
```
|
|
12
23
|
|
|
13
|
-
Run bundle:
|
|
24
|
+
Run bundle and install generator:
|
|
14
25
|
|
|
15
26
|
```bash
|
|
16
27
|
bundle install
|
|
17
28
|
bin/rails g odt:install
|
|
18
29
|
```
|
|
19
30
|
|
|
20
|
-
|
|
31
|
+
### Manual Stylesheet Setup
|
|
32
|
+
|
|
33
|
+
**For Tailwind CSS v4 (`app/assets/tailwind/application.css` or `application.tailwind.css`):**
|
|
21
34
|
|
|
22
35
|
```css
|
|
23
|
-
@import "
|
|
36
|
+
@import "tailwindcss";
|
|
37
|
+
@import "odt_ui/tokens.css";
|
|
38
|
+
@import "odt_ui/styles.css";
|
|
39
|
+
@import "odt_ui/theme.css";
|
|
24
40
|
```
|
|
25
41
|
|
|
26
|
-
|
|
42
|
+
**For Standard Rails / Propshaft / Sprockets (`app/assets/stylesheets/application.css`):**
|
|
43
|
+
|
|
44
|
+
```css
|
|
45
|
+
@import "odt_ui/tokens.css";
|
|
46
|
+
@import "odt_ui/styles.css";
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Usage Examples
|
|
27
52
|
|
|
28
53
|
### Buttons
|
|
54
|
+
|
|
29
55
|
```erb
|
|
30
|
-
<%= odt_button "
|
|
31
|
-
<%= odt_button "
|
|
56
|
+
<%= odt_button "Submit", variant: :filled, color: :primary, radius: :full %>
|
|
57
|
+
<%= odt_button "Glass Action", variant: :frosted, color: :primary %>
|
|
58
|
+
<%= odt_button "New Event", href: new_event_path, icon: "fa-solid fa-plus" %>
|
|
59
|
+
<%= odt_button "Saving...", loading: true %>
|
|
60
|
+
<%# With custom Tailwind classes %>
|
|
61
|
+
<%= odt_button "Full Width", class: "mt-4 w-full shadow-lg" %>
|
|
32
62
|
```
|
|
33
63
|
|
|
34
64
|
### Badges
|
|
65
|
+
|
|
35
66
|
```erb
|
|
36
|
-
<%= odt_badge "Active", variant: :subtle, color: :success %>
|
|
67
|
+
<%= odt_badge "Active", variant: :subtle, color: :success, dot: true %>
|
|
68
|
+
<%= odt_badge "Critical", variant: :filled, color: :danger %>
|
|
37
69
|
<%= odt_badge "Date", icon: "fa-regular fa-calendar" %>
|
|
38
70
|
```
|
|
39
71
|
|
|
40
|
-
### Cards
|
|
72
|
+
### Cards
|
|
73
|
+
|
|
74
|
+
```erb
|
|
75
|
+
<%= odt_card title: "Analytics Overview", subtitle: "Last 30 days", variant: :elevated, hoverable: true do %>
|
|
76
|
+
<p>Your content here</p>
|
|
77
|
+
<% end %>
|
|
78
|
+
|
|
79
|
+
<%= odt_card variant: :frosted, radius: :"3xl", padding: :xl do %>
|
|
80
|
+
<p>Glassmorphic frosted card</p>
|
|
81
|
+
<% end %>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Alerts
|
|
85
|
+
|
|
41
86
|
```erb
|
|
42
|
-
<%=
|
|
43
|
-
|
|
87
|
+
<%= odt_alert "Changes saved successfully!", variant: :success %>
|
|
88
|
+
<%= odt_alert "Please verify your email address.", variant: :warning %>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Form Controls
|
|
92
|
+
|
|
93
|
+
```erb
|
|
94
|
+
<%= odt_input label: "Email Address", type: "email", placeholder: "you@example.com", left_icon: "fa-solid fa-envelope" %>
|
|
95
|
+
|
|
96
|
+
<%= odt_textarea label: "Comments", rows: 4, placeholder: "Type your notes..." %>
|
|
97
|
+
|
|
98
|
+
<%= odt_select label: "Country", options: [["Thailand", "TH"], ["United States", "US"]], prompt: "Select country" %>
|
|
99
|
+
|
|
100
|
+
<%= odt_checkbox label: "I agree to terms", description: "Read our privacy policy", color: :primary %>
|
|
101
|
+
|
|
102
|
+
<%= odt_radio label: "Option A", name: "choice", value: "a", color: :primary %>
|
|
103
|
+
|
|
104
|
+
<%= odt_form_group label: "Custom Field", required: true, helper: "Must be unique" do %>
|
|
105
|
+
<input type="text" class="odt-input odt-input--outlined odt-input--md" name="custom" />
|
|
44
106
|
<% end %>
|
|
45
107
|
```
|
|
46
108
|
|
|
47
|
-
### Typography &
|
|
109
|
+
### Typography & Avatars
|
|
110
|
+
|
|
48
111
|
```erb
|
|
49
|
-
<%= odt_heading "
|
|
50
|
-
<%= odt_text "
|
|
51
|
-
<%=
|
|
52
|
-
<%= odt_avatar name: "John Doe", size: :md %>
|
|
112
|
+
<%= odt_heading "Dashboard", as: :h1, size: :"4xl" %>
|
|
113
|
+
<%= odt_text "Welcome back to your workspace.", color: :muted, size: :lg %>
|
|
114
|
+
<%= odt_avatar name: "Korn Chatikavanij", size: :md, color: :secondary %>
|
|
53
115
|
```
|