turbo_material 0.2.18 → 0.3.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 +8 -5
- data/Rakefile +7 -5
- data/app/assets/stylesheets/turbo_material/application.tailwind.css +21 -3
- data/app/assets/tailwind/turbo_material/engine.css +210 -0
- data/app/controllers/turbo_material/application_controller.rb +2 -0
- data/app/helpers/turbo_material/application_helper.rb +2 -0
- data/app/helpers/turbo_material/checkbox_helper.rb +3 -1
- data/app/helpers/turbo_material/chip_set_helper.rb +4 -2
- data/app/helpers/turbo_material/chips_input_helper.rb +3 -1
- data/app/helpers/turbo_material/chips_input_options_helper.rb +3 -1
- data/app/helpers/turbo_material/chips_select_helper.rb +3 -1
- data/app/helpers/turbo_material/data_table_helper.rb +2 -0
- data/app/helpers/turbo_material/input_helper.rb +4 -2
- data/app/helpers/turbo_material/menu_button_helper.rb +3 -1
- data/app/helpers/turbo_material/modal_helper.rb +3 -1
- data/app/helpers/turbo_material/radio_helper.rb +3 -1
- data/app/helpers/turbo_material/select_helper.rb +3 -1
- data/app/helpers/turbo_material/switch_helper.rb +3 -1
- data/app/helpers/turbo_material/textarea_helper.rb +3 -1
- data/app/helpers/turbo_material/tooltip_helper.rb +3 -1
- data/app/jobs/turbo_material/application_job.rb +2 -0
- data/app/mailers/turbo_material/application_mailer.rb +4 -2
- data/app/models/turbo_material/application_record.rb +2 -0
- data/config/importmap.rb +6 -4
- data/config/routes.rb +2 -0
- data/config/tailwind.config.js +10 -24
- data/lib/generators/turbo_material/install_generator.rb +29 -43
- data/lib/lookbook/checkbox_preview.rb +4 -2
- data/lib/lookbook/chips_select_preview.rb +8 -7
- data/lib/lookbook/input_preview.rb +4 -2
- data/lib/lookbook/radio_preview.rb +4 -2
- data/lib/lookbook/select_preview.rb +2 -1
- data/lib/lookbook/switch_preview.rb +4 -2
- data/lib/lookbook/textarea_preview.rb +4 -2
- data/lib/tasks/install.rake +5 -0
- data/lib/tasks/turbo_material_tasks.rake +2 -0
- data/lib/turbo_material/configuration.rb +3 -3
- data/lib/turbo_material/engine.rb +17 -10
- data/lib/turbo_material/post_install.rb +10 -0
- data/lib/turbo_material/version.rb +3 -1
- data/lib/turbo_material.rb +5 -3
- metadata +28 -31
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d82e364c62d4de45bf131c9707a93d6e96085993f75e1badad335050a545ae07
|
|
4
|
+
data.tar.gz: 2155b3a85fad6acc525e0450039189cbb1304908118b47659a301ece5e1b717a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 022ec07483523cc737111506a24741cec56b46c791d67a37d77310bf3aa00581731b11bd6d74b9f9d9fe24b6428dd3972bfc3536e39c7c549e7a1cb762d8a26a
|
|
7
|
+
data.tar.gz: c96d5a98c3e3a02e8dc8c762fa935a130f0ddd6a6a221da0059e37e9f0458f8456f16e30130f09d1609d429c24bd8bf04f0c4db0f90be36f142ddbfb19daa062
|
data/README.md
CHANGED
|
@@ -17,6 +17,11 @@ That list is based on the project from which this library is being extracted. If
|
|
|
17
17
|
|
|
18
18
|
Run `rails turbo_material:install` to install the gem and add necessary files to your project. Alternatively, you can follow the steps below.
|
|
19
19
|
|
|
20
|
+
Add following to your `app/assets/tailwind/application.css` after `@import "tailwindcss";`:
|
|
21
|
+
```css
|
|
22
|
+
@import "../builds/tailwind/turbo_material.css";
|
|
23
|
+
```
|
|
24
|
+
|
|
20
25
|
Add following to your `app/javascript/controllers/index.js` after `eagerLoadControllersFrom("controllers", application)` line:
|
|
21
26
|
|
|
22
27
|
```javascript
|
|
@@ -30,9 +35,11 @@ Add following to your `app/view/layouts/application.html.erb` in `<head>` sectio
|
|
|
30
35
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
31
36
|
```
|
|
32
37
|
|
|
38
|
+
Follow `test/dummy` in this project for examples.
|
|
39
|
+
|
|
33
40
|
### Material Components for Web customizations
|
|
34
41
|
|
|
35
|
-
For supporting custom styling for you components, consider including following in your application stylesheet:
|
|
42
|
+
For supporting custom styling for you components, consider including following in your application Tailwind CSS stylesheet:
|
|
36
43
|
|
|
37
44
|
```css
|
|
38
45
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,600;1,400;1,600&display=swap');
|
|
@@ -212,10 +219,6 @@ aside.mdc-drawer.main-drawer {
|
|
|
212
219
|
}
|
|
213
220
|
```
|
|
214
221
|
|
|
215
|
-
## Tailwind Forms customizations leakage
|
|
216
|
-
|
|
217
|
-
This gem uses Tailwind for additional customizations, I am noticed that `@tailwindcss/forms` leaking to Material inputs adding partial white backgrounds. For now I would recommend to disable forms plugin while using this gem.
|
|
218
|
-
|
|
219
222
|
## Installation
|
|
220
223
|
Add this line to your application's Gemfile:
|
|
221
224
|
|
data/Rakefile
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
load "rails/tasks/engine.rake"
|
|
3
|
+
require 'bundler/setup'
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
APP_RAKEFILE = File.expand_path('test/dummy/Rakefile', __dir__)
|
|
6
|
+
load 'rails/tasks/engine.rake'
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
load 'rails/tasks/statistics.rake'
|
|
9
|
+
|
|
10
|
+
require 'bundler/gem_tasks'
|
|
@@ -1,6 +1,24 @@
|
|
|
1
|
-
@
|
|
2
|
-
@
|
|
3
|
-
@
|
|
1
|
+
@import 'tailwindcss' source(none);
|
|
2
|
+
@source "../../javascript/**/*.js";
|
|
3
|
+
@source "../../../views/**/*.{erb,haml,html,slim}";
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
|
7
|
+
so we've added these compatibility styles to make sure everything still
|
|
8
|
+
looks the same as it did with Tailwind CSS v3.
|
|
9
|
+
|
|
10
|
+
If we ever want to remove these styles, we need to add an explicit border
|
|
11
|
+
color utility to any element that depends on these defaults.
|
|
12
|
+
*/
|
|
13
|
+
@layer base {
|
|
14
|
+
*,
|
|
15
|
+
::after,
|
|
16
|
+
::before,
|
|
17
|
+
::backdrop,
|
|
18
|
+
::file-selector-button {
|
|
19
|
+
border-color: var(--color-gray-200, currentColor);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
4
22
|
|
|
5
23
|
.mdc-notched-outline__leading {
|
|
6
24
|
border-right-style: none !important;
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
@import 'tailwindcss' source(none);
|
|
2
|
+
@source "../../../javascript/**/*.js";
|
|
3
|
+
@source "../../../../views/**/*.{erb,haml,html,slim}";
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
|
7
|
+
so we've added these compatibility styles to make sure everything still
|
|
8
|
+
looks the same as it did with Tailwind CSS v3.
|
|
9
|
+
|
|
10
|
+
If we ever want to remove these styles, we need to add an explicit border
|
|
11
|
+
color utility to any element that depends on these defaults.
|
|
12
|
+
*/
|
|
13
|
+
@layer base {
|
|
14
|
+
*,
|
|
15
|
+
::after,
|
|
16
|
+
::before,
|
|
17
|
+
::backdrop,
|
|
18
|
+
::file-selector-button {
|
|
19
|
+
border-color: var(--color-gray-200, currentColor);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,600;1,400;1,600&display=swap');
|
|
24
|
+
|
|
25
|
+
html, body, label {
|
|
26
|
+
font-family: 'Roboto', sans-serif;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
html, body {
|
|
30
|
+
scroll-behavior: smooth;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
html [id], body [id] {
|
|
34
|
+
scroll-margin: 120px !important;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:root {
|
|
38
|
+
--real-primary: #5d7dd4;
|
|
39
|
+
--real-secondary: #607D8B;
|
|
40
|
+
--real-warn: rgb(244, 67, 54);
|
|
41
|
+
|
|
42
|
+
--mdc-theme-primary: var(--real-primary);
|
|
43
|
+
--mdc-theme-secondary: var(--real-secondary);
|
|
44
|
+
--mdc-dialog-z-index: 100;
|
|
45
|
+
--mdc-ripple-color: white;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.turbo-progress-bar {
|
|
49
|
+
background-color: #77a1d6;
|
|
50
|
+
filter: brightness(90%);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.mdc-button.menu-item {
|
|
54
|
+
--mdc-theme-primary: white;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.mdc-button--accent:not(.mdc-button--raised):not([disabled]) {
|
|
58
|
+
color: #77a1d6;
|
|
59
|
+
color: var(--mdc-theme-secondary, #77a1d6);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.mdc-button--accent.mdc-button--raised:not([disabled]) {
|
|
63
|
+
background-color: #77a1d6;
|
|
64
|
+
background-color: var(--mdc-theme-secondary, #77a1d6);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.mdc-button.mdc-button--accent .mdc-button__ripple::before, .mdc-button.mdc-button--accent .mdc-button__ripple::after {
|
|
68
|
+
background-color: #77a1d6;
|
|
69
|
+
background-color: var(--mdc-theme-secondary, #77a1d6);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.mdc-button--warn:not(.mdc-button--raised):not([disabled]) {
|
|
73
|
+
color: rgb(244, 67, 54);
|
|
74
|
+
color: var(--real-warn, rgb(244, 67, 54));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.mdc-button--warn.mdc-button--raised:not([disabled]) {
|
|
78
|
+
background-color: rgb(244, 67, 54);
|
|
79
|
+
background-color: var(--real-warn, rgb(244, 67, 54));
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.mdc-button.mdc-button--warn .mdc-button__ripple::before, .mdc-button.mdc-button--warn .mdc-button__ripple::after {
|
|
83
|
+
background-color: rgb(244, 67, 54);
|
|
84
|
+
background-color: var(--real-warn, rgb(244, 67, 54));
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.mdc-button--white:not(.mdc-button--raised):not([disabled]) {
|
|
88
|
+
color: white;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.mdc-button--white.mdc-button--raised:not([disabled]) {
|
|
92
|
+
background-color: white;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.mdc-button.mdc-button--white .mdc-button__ripple::before, .mdc-button.mdc-button--white .mdc-button__ripple::after {
|
|
96
|
+
background-color: white;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.mdc-text-field:not(.mdc-text-field--label-floating) .iti__flag-container {
|
|
100
|
+
display: none !important;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.mdc-drawer .mdc-deprecated-list-item {
|
|
104
|
+
margin: 0;
|
|
105
|
+
border-radius: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
aside.mdc-drawer:not(.mdc-drawer--right) {
|
|
109
|
+
box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
aside.mdc-drawer.main-drawer {
|
|
113
|
+
background-color: #2d323e;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.mdc-drawer--right.mdc-drawer--dismissible {
|
|
117
|
+
right: 0 !important;
|
|
118
|
+
left: initial !important;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.mdc-drawer--right.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
|
|
122
|
+
margin-right: 16rem !important;
|
|
123
|
+
margin-left: 0 !important;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.mdc-drawer--right.mdc-drawer.mdc-drawer--open.mdc-drawer--closing + .mdc-drawer-app-content {
|
|
127
|
+
transition: margin-right 200ms 15ms linear;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.mdc-drawer--right.mdc-drawer.mdc-drawer--open.mdc-drawer--openening.mdc-drawer--closing + .mdc-drawer-app-content {
|
|
131
|
+
transition: margin-right 200ms 15ms linear;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.mdc-drawer--right.mdc-drawer--animate {
|
|
135
|
+
transform: translateX(100%) !important;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.mdc-drawer--right.mdc-drawer--closing {
|
|
139
|
+
transform: translateX(100%) !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.mdc-drawer--right.mdc-drawer--opening {
|
|
143
|
+
transform: translateX(0) !important;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.mdc-dialog__title::before {
|
|
147
|
+
content: none !important;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.mdc-dialog__title {
|
|
151
|
+
padding-top: 1rem;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.clip-path-bottom {
|
|
155
|
+
clip-path: inset(-8px -8px 0px -8px);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.clip-path-top {
|
|
159
|
+
clip-path: inset(0px -8px -8px -8px);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content .mdc-top-app-bar {
|
|
163
|
+
width: calc(100vw - 16rem);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.mdc-text-field .field_with_errors {
|
|
167
|
+
width: 100%;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.bg-secondary .mdc-tab-indicator .mdc-tab-indicator__content--underline {
|
|
171
|
+
border-color: white !important;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.bg-secondary .mdc-tab--active .mdc-tab__text-label {
|
|
175
|
+
color: white !important;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.bg-secondary .mdc-tab .mdc-tab__icon {
|
|
179
|
+
color: white !important;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.bg-secondary .mdc-tab--active .mdc-tab__icon {
|
|
183
|
+
color: white !important;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.bg-secondary .mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label {
|
|
187
|
+
color: white !important;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.mdc-chip.red {
|
|
191
|
+
background-color: #f44336 !important;
|
|
192
|
+
color: white !important;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.mdc-chip.red .mdc-chip__icon {
|
|
196
|
+
color: white !important;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.mdc-notched-outline__leading {
|
|
200
|
+
border-right-style: none !important;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.mdc-notched-outline__notch {
|
|
204
|
+
border-left-style: none !important;
|
|
205
|
+
border-right-style: none !important;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.mdc-notched-outline__trailing {
|
|
209
|
+
border-left-style: none !important;
|
|
210
|
+
}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
1
3
|
module TurboMaterial
|
|
2
4
|
module ChipSetHelper
|
|
3
5
|
def material_chip_set(kwargs = {})
|
|
4
|
-
render
|
|
6
|
+
render 'components/chip_set', **kwargs
|
|
5
7
|
end
|
|
6
8
|
|
|
7
9
|
def material_chip(kwargs = {})
|
|
8
|
-
render
|
|
10
|
+
render 'components/chip', **kwargs
|
|
9
11
|
end
|
|
10
12
|
end
|
|
11
13
|
end
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
1
3
|
module TurboMaterial
|
|
2
4
|
module MenuButtonHelper
|
|
3
5
|
def material_menu_button(kwargs = {}, &block)
|
|
4
|
-
render
|
|
6
|
+
render 'components/menu_button', **kwargs do
|
|
5
7
|
capture(&block) if block_given?
|
|
6
8
|
end
|
|
7
9
|
end
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
1
3
|
module TurboMaterial
|
|
2
4
|
module TooltipHelper
|
|
3
5
|
def material_tooltip(kwargs = {}, &block)
|
|
4
6
|
content = block_given? ? capture(&block) : nil
|
|
5
|
-
render
|
|
7
|
+
render 'components/tooltip', **kwargs, content: content
|
|
6
8
|
end
|
|
7
9
|
end
|
|
8
10
|
end
|
data/config/importmap.rb
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
pin
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
pin_all_from File.expand_path('../app/assets/javascripts', __dir__)
|
|
4
|
+
pin '@rails/request.js', to: 'https://ga.jspm.io/npm:@rails/request.js@0.0.9/src/index.js'
|
|
5
|
+
pin 'stimulus-use', to: 'https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js'
|
|
6
|
+
pin 'hotkeys-js', to: 'https://ga.jspm.io/npm:hotkeys-js@3.10.2/dist/hotkeys.esm.js'
|
data/config/routes.rb
CHANGED
data/config/tailwind.config.js
CHANGED
|
@@ -1,27 +1,13 @@
|
|
|
1
|
-
const defaultTheme = require('tailwindcss/defaultTheme')
|
|
2
|
-
|
|
3
1
|
module.exports = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
safelist: [
|
|
3
|
+
{
|
|
4
|
+
pattern: /prose/,
|
|
5
|
+
},
|
|
6
|
+
],
|
|
9
7
|
content: [
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
"./public/*.html",
|
|
9
|
+
"./app/helpers/**/*.rb",
|
|
10
|
+
"./app/assets/javascript/**/*.js",
|
|
11
|
+
"./app/views/**/*.{erb,haml,html,slim}",
|
|
14
12
|
],
|
|
15
|
-
|
|
16
|
-
extend: {
|
|
17
|
-
fontFamily: {
|
|
18
|
-
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
|
19
|
-
},
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
plugins: [
|
|
23
|
-
require('@tailwindcss/aspect-ratio'),
|
|
24
|
-
require('@tailwindcss/typography'),
|
|
25
|
-
require('@tailwindcss/container-queries'),
|
|
26
|
-
]
|
|
27
|
-
}
|
|
13
|
+
};
|
|
@@ -2,80 +2,66 @@
|
|
|
2
2
|
|
|
3
3
|
module TurboMaterial
|
|
4
4
|
class InstallGenerator < Rails::Generators::Base
|
|
5
|
-
source_root File.expand_path('
|
|
5
|
+
source_root File.expand_path('templates', __dir__)
|
|
6
6
|
|
|
7
|
-
START_MARKER = "// #{Engine.name} raw CSS. This section is auto-generated by the turbo_material installer.".freeze
|
|
8
|
-
END_MARKER = "// End of auto-generated #{Engine.name} raw CSS. Version:".freeze
|
|
9
7
|
HEAD_LINKS = <<-HTML.rstrip.freeze
|
|
10
8
|
|
|
11
9
|
|
|
12
10
|
<link href="//cdn.jsdelivr.net/npm/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
|
|
13
11
|
<script src="//cdn.jsdelivr.net/npm/material-components-web@latest/dist/material-components-web.min.js"></script>
|
|
14
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
|
12
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">#{' '}
|
|
15
13
|
HTML
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
tailwind_css_path = TurboMaterial::Engine.root.join('app/assets/dist/turbo_material/tailwind.css')
|
|
19
|
-
css_content = File.read(tailwind_css_path)
|
|
20
|
-
css_content.gsub!(/\/\*.*?\*\//m, '')
|
|
21
|
-
css_content.gsub!(/\{[^}]*}/m, '{}')
|
|
22
|
-
css_content.gsub!('>:not([hidden])~:not([hidden])', '')
|
|
23
|
-
css_content.gsub!(/\\\[/, '[')
|
|
24
|
-
css_content.gsub!( /\\\]/, ']')
|
|
25
|
-
css_content.gsub!( /\\\//, '/')
|
|
26
|
-
css_content.gsub!( /\\:/, ':')
|
|
15
|
+
IMPORT = '@import "../builds/tailwind/turbo_material.css";'.freeze
|
|
27
16
|
|
|
28
|
-
|
|
29
|
-
|
|
17
|
+
def add_turbo_material_tailwind
|
|
18
|
+
return if options[:update_tailwind_only]
|
|
30
19
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
#{START_MARKER}
|
|
36
|
-
{ raw: '<div class="#{classes.join(' ')}"></div>', extension: 'html' },
|
|
37
|
-
#{END_MARKER} #{TurboMaterial::VERSION}
|
|
38
|
-
CONFIG
|
|
20
|
+
tailwind_path = Rails.root.join('app/assets/tailwind/application.css')
|
|
21
|
+
unless tailwind_path.exist?
|
|
22
|
+
raise '`app/assets/tailwind/application.css` does not exist'
|
|
23
|
+
end
|
|
39
24
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
insert_into_file tailwind_config_path, after: "content: [" do
|
|
46
|
-
"\n" + content_config.strip
|
|
47
|
-
end
|
|
25
|
+
if tailwind_path.read.include?(IMPORT)
|
|
26
|
+
puts "`app/assets/tailwind/application.css` already contains `#{IMPORT}`"
|
|
27
|
+
else
|
|
28
|
+
insert_into_file tailwind_path, after: '@import "tailwindcss";' do
|
|
29
|
+
"\n#{IMPORT}\n"
|
|
48
30
|
end
|
|
49
31
|
end
|
|
50
32
|
end
|
|
51
33
|
|
|
52
34
|
def add_turbo_material_js_controllers
|
|
35
|
+
return if options[:update_tailwind_only]
|
|
36
|
+
|
|
53
37
|
controllers_path = Rails.root.join('app/javascript/controllers/index.js')
|
|
54
38
|
if controllers_path.exist? && controllers_path.read.include?('eagerLoadControllersFrom("controllers", application)')
|
|
55
39
|
if controllers_path.read.include?('eagerLoadControllersFrom("turbo_material", application)')
|
|
56
|
-
puts
|
|
40
|
+
puts '`app/javascript/controllers/index.js` already contains `eagerLoadControllersFrom("turbo_material", application)`'
|
|
57
41
|
else
|
|
58
42
|
insert_into_file controllers_path, after: 'eagerLoadControllersFrom("controllers", application)' do
|
|
59
43
|
"\neagerLoadControllersFrom(\"turbo_material\", application)\n"
|
|
60
44
|
end
|
|
61
45
|
end
|
|
62
46
|
else
|
|
63
|
-
puts
|
|
47
|
+
puts '`app/javascript/controllers/index.js` does not exist or does not contain `eagerLoadControllersFrom("controllers", application)`'
|
|
64
48
|
end
|
|
65
49
|
end
|
|
66
50
|
|
|
67
51
|
def add_material_components_web_to_app_layout
|
|
52
|
+
return if options[:update_tailwind_only]
|
|
53
|
+
|
|
68
54
|
layout_path = Rails.root.join('app/views/layouts/application.html.erb')
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
end
|
|
76
|
-
end
|
|
55
|
+
unless layout_path.exist? && layout_path.read.include?('<%= csp_meta_tag %>')
|
|
56
|
+
raise '`app/views/layouts/application.html.erb` does not exist or does not contain `<%= csp_meta_tag %>`'
|
|
57
|
+
end
|
|
58
|
+
|
|
59
|
+
if layout_path.read.include?('<link href="//cdn.jsdelivr.net/npm/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">')
|
|
60
|
+
puts '`app/views/layouts/application.html.erb` head already contains material components web links'
|
|
77
61
|
else
|
|
78
|
-
|
|
62
|
+
insert_into_file layout_path, after: '<%= csp_meta_tag %>' do
|
|
63
|
+
HEAD_LINKS
|
|
64
|
+
end
|
|
79
65
|
end
|
|
80
66
|
end
|
|
81
67
|
end
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
+
class CheckboxPreview < Lookbook::Preview
|
|
3
4
|
# @param label text
|
|
4
5
|
# @param disabled toggle
|
|
5
6
|
def default(label: 'Checkbox', disabled: false)
|
|
6
|
-
render 'common/form', helper_name: 'material_checkbox', label: label, name: 'checkbox', id: 'Checkbox',
|
|
7
|
+
render 'common/form', helper_name: 'material_checkbox', label: label, name: 'checkbox', id: 'Checkbox',
|
|
8
|
+
disabled: disabled
|
|
7
9
|
end
|
|
8
10
|
end
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
+
class ChipsSelectPreview < Lookbook::Preview
|
|
3
4
|
# @param label text
|
|
4
5
|
# @param disabled toggle
|
|
5
6
|
# @param required toggle
|
|
6
7
|
def default(label: 'Chips Select', disabled: false, required: false)
|
|
7
8
|
render 'common/form', helper_name: 'material_chips_select', label: label, name: 'checkbox',
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
id: 'Input', disabled: disabled, value: [],
|
|
10
|
+
options: [
|
|
11
|
+
{ value: '1', label: 'Option 1' },
|
|
12
|
+
{ value: '2', label: 'Option 2' },
|
|
13
|
+
{ value: '3', label: 'Option 3' }
|
|
14
|
+
]
|
|
14
15
|
end
|
|
15
16
|
end
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
+
class InputPreview < Lookbook::Preview
|
|
3
4
|
# @param label text
|
|
4
5
|
# @param disabled toggle
|
|
5
6
|
# @param required toggle
|
|
6
7
|
# @param style select { choices: [filled, outlined] }
|
|
7
8
|
def default(label: 'Input', disabled: false, required: false, style: 'filled')
|
|
8
|
-
render 'common/form', helper_name: 'material_input', label: label, name: 'checkbox', id: 'Input',
|
|
9
|
+
render 'common/form', helper_name: 'material_input', label: label, name: 'checkbox', id: 'Input',
|
|
10
|
+
disabled: disabled, required: required, style: style
|
|
9
11
|
end
|
|
10
12
|
end
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
+
class RadioPreview < Lookbook::Preview
|
|
3
4
|
# @param label text
|
|
4
5
|
# @param disabled toggle
|
|
5
6
|
# @param required toggle
|
|
6
7
|
def default(label: 'Radio', disabled: false, required: false)
|
|
7
|
-
render 'common/form', helper_name: 'material_radio', label: label, name: 'checkbox', id: 'Input',
|
|
8
|
+
render 'common/form', helper_name: 'material_radio', label: label, name: 'checkbox', id: 'Input',
|
|
9
|
+
disabled: disabled, required: required
|
|
8
10
|
end
|
|
9
11
|
end
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
+
class SwitchPreview < Lookbook::Preview
|
|
3
4
|
# @param label text
|
|
4
5
|
# @param true_label text
|
|
5
6
|
# @param false_label text
|
|
6
7
|
# @param disabled toggle
|
|
7
8
|
def default(label: 'Switch', disabled: false, required: false, true_label: nil, false_label: nil)
|
|
8
|
-
render 'common/form', helper_name: 'material_switch', label: label, name: 'checkbox', id: 'Input',
|
|
9
|
+
render 'common/form', helper_name: 'material_switch', label: label, name: 'checkbox', id: 'Input',
|
|
10
|
+
disabled: disabled, true_label: true_label, false_label: false_label
|
|
9
11
|
end
|
|
10
12
|
end
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
+
class TextareaPreview < Lookbook::Preview
|
|
3
4
|
# @param label text
|
|
4
5
|
# @param disabled toggle
|
|
5
6
|
# @param required toggle
|
|
6
7
|
def default(label: 'Textarea', disabled: false, required: false)
|
|
7
|
-
render 'common/form', helper_name: 'material_textarea', label: label, name: 'textarea', id: 'Text',
|
|
8
|
+
render 'common/form', helper_name: 'material_textarea', label: label, name: 'textarea', id: 'Text',
|
|
9
|
+
disabled: disabled, required: required
|
|
8
10
|
end
|
|
9
11
|
end
|
data/lib/tasks/install.rake
CHANGED
|
@@ -5,4 +5,9 @@ namespace :turbo_material do
|
|
|
5
5
|
task install: :environment do
|
|
6
6
|
Rails::Command.invoke :generate, ['turbo_material:install']
|
|
7
7
|
end
|
|
8
|
+
|
|
9
|
+
desc 'Updates Tailwind configuration'
|
|
10
|
+
task update_tailwind: :environment do
|
|
11
|
+
Rails::Command.invoke :generate, %w[turbo_material:install --update-tailwind-only]
|
|
12
|
+
end
|
|
8
13
|
end
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# frozen_string_literal: true
|
|
2
2
|
|
|
3
|
-
require
|
|
3
|
+
require 'importmap-rails'
|
|
4
4
|
|
|
5
5
|
module TurboMaterial
|
|
6
6
|
class Engine < ::Rails::Engine
|
|
@@ -26,26 +26,33 @@ module TurboMaterial
|
|
|
26
26
|
end
|
|
27
27
|
end
|
|
28
28
|
|
|
29
|
-
initializer
|
|
29
|
+
initializer 'turbo_material.tailwindcss' do |app|
|
|
30
|
+
ActiveSupport.on_load(:tailwindcss_rails) do
|
|
31
|
+
config.tailwindcss_rails.engines << TurboMaterial::Engine.engine_name
|
|
32
|
+
end
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
initializer 'turbo_material.importmap', before: 'importmap' do |app|
|
|
30
37
|
# NOTE: this will add pins from this engine to the main app
|
|
31
38
|
# https://github.com/rails/importmap-rails#composing-import-maps
|
|
32
|
-
app.config.importmap.paths << root.join(
|
|
39
|
+
app.config.importmap.paths << root.join('config/importmap.rb')
|
|
33
40
|
|
|
34
41
|
# NOTE: something about cache; I did not look into it.
|
|
35
42
|
# https://github.com/rails/importmap-rails#sweeping-the-cache-in-development-and-test
|
|
36
|
-
app.config.importmap.cache_sweepers << root.join(
|
|
43
|
+
app.config.importmap.cache_sweepers << root.join('app/assets/javascripts')
|
|
37
44
|
end
|
|
38
45
|
|
|
39
46
|
# NOTE: add engine manifest to precompile assets in production
|
|
40
|
-
initializer
|
|
47
|
+
initializer 'turbo_material.assets' do |app|
|
|
41
48
|
app.config.assets.precompile += %w[turbo_material_manifest]
|
|
42
49
|
end
|
|
43
50
|
|
|
44
|
-
initializer
|
|
45
|
-
app.config.assets.paths << root.join(
|
|
46
|
-
app.config.assets.precompile <<
|
|
47
|
-
app.config.assets.paths << root.join(
|
|
48
|
-
app.config.assets.precompile <<
|
|
51
|
+
initializer 'turbo_material.precompile' do |app|
|
|
52
|
+
app.config.assets.paths << root.join('app/assets/javascripts')
|
|
53
|
+
app.config.assets.precompile << 'turbo_material/application.js'
|
|
54
|
+
app.config.assets.paths << root.join('app/assets/dist')
|
|
55
|
+
app.config.assets.precompile << 'turbo_material/tailwind.css'
|
|
49
56
|
end
|
|
50
57
|
end
|
|
51
58
|
end
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module TurboMaterial
|
|
4
|
+
def self.post_install
|
|
5
|
+
puts 'TurboMaterial: Running post install tasks...'
|
|
6
|
+
rescue StandardError => e
|
|
7
|
+
puts "TurboMaterial: Failed to update Tailwind configuration. Error: #{e.message}"
|
|
8
|
+
puts "You may need to run 'bin/rails turbo_material:install' manually to complete the setup."
|
|
9
|
+
end
|
|
10
|
+
end
|
data/lib/turbo_material.rb
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
require
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
require 'turbo_material/version'
|
|
4
|
+
require 'turbo_material/engine'
|
|
5
|
+
require 'turbo_material/configuration'
|
|
4
6
|
|
|
5
7
|
module TurboMaterial
|
|
6
8
|
class << self
|
metadata
CHANGED
|
@@ -1,49 +1,48 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: turbo_material
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Sergey Moiseev
|
|
8
|
-
autorequire:
|
|
9
8
|
bindir: bin
|
|
10
9
|
cert_chain: []
|
|
11
|
-
date:
|
|
10
|
+
date: 1980-01-02 00:00:00.000000000 Z
|
|
12
11
|
dependencies:
|
|
13
12
|
- !ruby/object:Gem::Dependency
|
|
14
|
-
name: rails
|
|
13
|
+
name: importmap-rails
|
|
15
14
|
requirement: !ruby/object:Gem::Requirement
|
|
16
15
|
requirements:
|
|
17
16
|
- - "~>"
|
|
18
17
|
- !ruby/object:Gem::Version
|
|
19
|
-
version:
|
|
20
|
-
- - ">="
|
|
21
|
-
- !ruby/object:Gem::Version
|
|
22
|
-
version: 7.1.2
|
|
18
|
+
version: 2.0.1
|
|
23
19
|
type: :runtime
|
|
24
20
|
prerelease: false
|
|
25
21
|
version_requirements: !ruby/object:Gem::Requirement
|
|
26
22
|
requirements:
|
|
27
23
|
- - "~>"
|
|
28
24
|
- !ruby/object:Gem::Version
|
|
29
|
-
version:
|
|
30
|
-
- - ">="
|
|
31
|
-
- !ruby/object:Gem::Version
|
|
32
|
-
version: 7.1.2
|
|
25
|
+
version: 2.0.1
|
|
33
26
|
- !ruby/object:Gem::Dependency
|
|
34
|
-
name:
|
|
27
|
+
name: rails
|
|
35
28
|
requirement: !ruby/object:Gem::Requirement
|
|
36
29
|
requirements:
|
|
37
|
-
- - "
|
|
30
|
+
- - ">="
|
|
38
31
|
- !ruby/object:Gem::Version
|
|
39
|
-
version:
|
|
32
|
+
version: 7.1.2
|
|
33
|
+
- - "<"
|
|
34
|
+
- !ruby/object:Gem::Version
|
|
35
|
+
version: '9.0'
|
|
40
36
|
type: :runtime
|
|
41
37
|
prerelease: false
|
|
42
38
|
version_requirements: !ruby/object:Gem::Requirement
|
|
43
39
|
requirements:
|
|
44
|
-
- - "
|
|
40
|
+
- - ">="
|
|
45
41
|
- !ruby/object:Gem::Version
|
|
46
|
-
version:
|
|
42
|
+
version: 7.1.2
|
|
43
|
+
- - "<"
|
|
44
|
+
- !ruby/object:Gem::Version
|
|
45
|
+
version: '9.0'
|
|
47
46
|
- !ruby/object:Gem::Dependency
|
|
48
47
|
name: stimulus-rails
|
|
49
48
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -62,23 +61,16 @@ dependencies:
|
|
|
62
61
|
name: tailwindcss-rails
|
|
63
62
|
requirement: !ruby/object:Gem::Requirement
|
|
64
63
|
requirements:
|
|
65
|
-
- -
|
|
66
|
-
- !ruby/object:Gem::Version
|
|
67
|
-
version: '2.0'
|
|
68
|
-
- - ">="
|
|
64
|
+
- - '='
|
|
69
65
|
- !ruby/object:Gem::Version
|
|
70
|
-
version:
|
|
66
|
+
version: 4.3.0.rc1
|
|
71
67
|
type: :runtime
|
|
72
68
|
prerelease: false
|
|
73
69
|
version_requirements: !ruby/object:Gem::Requirement
|
|
74
70
|
requirements:
|
|
75
|
-
- -
|
|
76
|
-
- !ruby/object:Gem::Version
|
|
77
|
-
version: '2.0'
|
|
78
|
-
- - ">="
|
|
71
|
+
- - '='
|
|
79
72
|
- !ruby/object:Gem::Version
|
|
80
|
-
version:
|
|
81
|
-
description:
|
|
73
|
+
version: 4.3.0.rc1
|
|
82
74
|
email:
|
|
83
75
|
- moiseev.sergey@gmail.com
|
|
84
76
|
executables: []
|
|
@@ -108,6 +100,7 @@ files:
|
|
|
108
100
|
- app/assets/javascripts/turbo_material/material_tooltip_controller.js
|
|
109
101
|
- app/assets/stylesheets/turbo_material/application.css
|
|
110
102
|
- app/assets/stylesheets/turbo_material/application.tailwind.css
|
|
103
|
+
- app/assets/tailwind/turbo_material/engine.css
|
|
111
104
|
- app/controllers/turbo_material/application_controller.rb
|
|
112
105
|
- app/controllers/turbo_material/lookbook_controller.rb
|
|
113
106
|
- app/helpers/turbo_material/application_helper.rb
|
|
@@ -171,6 +164,7 @@ files:
|
|
|
171
164
|
- lib/turbo_material.rb
|
|
172
165
|
- lib/turbo_material/configuration.rb
|
|
173
166
|
- lib/turbo_material/engine.rb
|
|
167
|
+
- lib/turbo_material/post_install.rb
|
|
174
168
|
- lib/turbo_material/version.rb
|
|
175
169
|
homepage: https://github.com/full-stack-biz/turbo_material
|
|
176
170
|
licenses:
|
|
@@ -179,7 +173,11 @@ metadata:
|
|
|
179
173
|
allowed_push_host: https://rubygems.org
|
|
180
174
|
homepage_uri: https://github.com/full-stack-biz/turbo_material
|
|
181
175
|
source_code_uri: https://github.com/full-stack-biz/turbo_material
|
|
182
|
-
|
|
176
|
+
changelog_uri: https://github.com/full-stack-biz/turbo_material/blob/main/CHANGELOG.md
|
|
177
|
+
post_install_message: |
|
|
178
|
+
Installing `turbo_material` gem. Please, follow the instructions in the README.md file.
|
|
179
|
+
|
|
180
|
+
After that, please, run `bin/rails turbo_material:install` to install the gem and add necessary files and configurations to your project.
|
|
183
181
|
rdoc_options: []
|
|
184
182
|
require_paths:
|
|
185
183
|
- lib
|
|
@@ -194,8 +192,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
194
192
|
- !ruby/object:Gem::Version
|
|
195
193
|
version: '0'
|
|
196
194
|
requirements: []
|
|
197
|
-
rubygems_version: 3.
|
|
198
|
-
signing_key:
|
|
195
|
+
rubygems_version: 3.6.9
|
|
199
196
|
specification_version: 4
|
|
200
197
|
summary: Material Web Components for Hotwire Turbo.
|
|
201
198
|
test_files: []
|