turbo_material 0.2.19 → 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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fbceaa36f447d1f2c7c2ebd92923b28a9973ac5129768c53da94f5bbcf3a3a3c
4
- data.tar.gz: b303476e7e72c5d1a96761b12cde4a01a8262a71181babe0841d1e416594f91e
3
+ metadata.gz: d82e364c62d4de45bf131c9707a93d6e96085993f75e1badad335050a545ae07
4
+ data.tar.gz: 2155b3a85fad6acc525e0450039189cbb1304908118b47659a301ece5e1b717a
5
5
  SHA512:
6
- metadata.gz: 31ef5cec5146f44354ffcc912dd772efd9b92c69f666646073005186a87746b953c2039899b2fc5a31ad78fffe5b2d448458a231fc92733bcec8ff8ddc10cc8f
7
- data.tar.gz: a3f6ca5281ff7d61282ba1ec72439c1cfd8a377096982ad6dd34fdb5f513b3e0c750113aa4a65eae5ef69cd0864c38c8193f33693b2ebe8d09e9656fa38c2d0d
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
 
@@ -1,6 +1,24 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
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,27 +1,13 @@
1
- const defaultTheme = require('tailwindcss/defaultTheme')
2
-
3
1
  module.exports = {
4
- safelist: [
5
- {
6
- pattern: /prose/,
7
- },
8
- ],
2
+ safelist: [
3
+ {
4
+ pattern: /prose/,
5
+ },
6
+ ],
9
7
  content: [
10
- './public/*.html',
11
- './app/helpers/**/*.rb',
12
- './app/assets/javascript/**/*.js',
13
- './app/views/**/*.{erb,haml,html,slim}'
8
+ "./public/*.html",
9
+ "./app/helpers/**/*.rb",
10
+ "./app/assets/javascript/**/*.js",
11
+ "./app/views/**/*.{erb,haml,html,slim}",
14
12
  ],
15
- theme: {
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
+ };
@@ -4,8 +4,6 @@ module TurboMaterial
4
4
  class InstallGenerator < Rails::Generators::Base
5
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."
8
- END_MARKER = "// End of auto-generated #{Engine.name} raw CSS. Version:"
9
7
  HEAD_LINKS = <<-HTML.rstrip.freeze
10
8
 
11
9
 
@@ -13,38 +11,22 @@ module TurboMaterial
13
11
  <script src="//cdn.jsdelivr.net/npm/material-components-web@latest/dist/material-components-web.min.js"></script>
14
12
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">#{' '}
15
13
  HTML
16
- CLASS_REGEX = %r(\.\\?(!?[-_a-zA-Z0-9\[\]/:]+)(?=[^}]*\{)).freeze
17
- TAILWIND_CONFIG_PATH = Rails.root.join('config/tailwind.config.js')
18
14
 
19
- class_option :update_tailwind_only,
20
- type: :boolean,
21
- default: false,
22
- desc: 'Only update Tailwind configuration'
15
+ IMPORT = '@import "../builds/tailwind/turbo_material.css";'.freeze
23
16
 
24
- def update_tailwind_config
25
- return unless TAILWIND_CONFIG_PATH.exist?
17
+ def add_turbo_material_tailwind
18
+ return if options[:update_tailwind_only]
26
19
 
27
- if tailwind_config_up_to_date?
28
- puts 'Tailwind config is up to date'
29
- return
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'
30
23
  end
31
24
 
32
- classes = extract_tailwind_classes
33
-
34
- content_config = <<~CONFIG.strip_heredoc
35
- #{START_MARKER}
36
- { raw: '<div class="#{classes.join(' ')}"></div>', extension: 'html' },
37
- #{END_MARKER} #{TurboMaterial::VERSION}
38
- CONFIG
39
-
40
- if File.read(TAILWIND_CONFIG_PATH.to_s).include?(START_MARKER)
41
- gsub_file TAILWIND_CONFIG_PATH,
42
- /#{Regexp.escape(START_MARKER)}.*?#{Regexp.escape(END_MARKER)}.*?$/m do |_match|
43
- content_config.strip
44
- end
25
+ if tailwind_path.read.include?(IMPORT)
26
+ puts "`app/assets/tailwind/application.css` already contains `#{IMPORT}`"
45
27
  else
46
- insert_into_file TAILWIND_CONFIG_PATH, after: 'content: [' do
47
- "\n#{content_config.strip}"
28
+ insert_into_file tailwind_path, after: '@import "tailwindcss";' do
29
+ "\n#{IMPORT}\n"
48
30
  end
49
31
  end
50
32
  end
@@ -82,27 +64,5 @@ module TurboMaterial
82
64
  end
83
65
  end
84
66
  end
85
-
86
- private
87
-
88
- def tailwind_config_up_to_date?
89
- return false unless TAILWIND_CONFIG_PATH.exist?
90
-
91
- content = File.read(TAILWIND_CONFIG_PATH)
92
- content.include?("#{END_MARKER} #{TurboMaterial::VERSION}")
93
- end
94
-
95
- def extract_tailwind_classes
96
- tailwind_css_path = Engine.root.join('app/assets/dist/turbo_material/tailwind.css')
97
- css_content = File.read(tailwind_css_path)
98
- css_content.gsub!(%r{/\*.*?\*/}m, '')
99
- css_content.gsub!(/\{[^}]*}/m, '{}')
100
- css_content.gsub!('>:not([hidden])~:not([hidden])', '')
101
- css_content.gsub!(/\\\[/, '[')
102
- css_content.gsub!(/\\\]/, ']')
103
- css_content.gsub!(%r{\\/}, '/')
104
- css_content.gsub!(/\\:/, ':')
105
- css_content.scan(CLASS_REGEX).flatten.uniq.sort
106
- end
107
67
  end
108
68
  end
@@ -26,6 +26,13 @@ module TurboMaterial
26
26
  end
27
27
  end
28
28
 
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
+
29
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
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module TurboMaterial
4
- VERSION = '0.2.19'
4
+ VERSION = '0.3.0'
5
5
  end
metadata CHANGED
@@ -1,14 +1,13 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: turbo_material
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.19
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: 2025-01-09 00:00:00.000000000 Z
10
+ date: 1980-01-02 00:00:00.000000000 Z
12
11
  dependencies:
13
12
  - !ruby/object:Gem::Dependency
14
13
  name: importmap-rails
@@ -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: 2.0.33
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: 2.0.33
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
@@ -180,6 +173,7 @@ metadata:
180
173
  allowed_push_host: https://rubygems.org
181
174
  homepage_uri: https://github.com/full-stack-biz/turbo_material
182
175
  source_code_uri: https://github.com/full-stack-biz/turbo_material
176
+ changelog_uri: https://github.com/full-stack-biz/turbo_material/blob/main/CHANGELOG.md
183
177
  post_install_message: |
184
178
  Installing `turbo_material` gem. Please, follow the instructions in the README.md file.
185
179
 
@@ -198,8 +192,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
198
192
  - !ruby/object:Gem::Version
199
193
  version: '0'
200
194
  requirements: []
201
- rubygems_version: 3.5.3
202
- signing_key:
195
+ rubygems_version: 3.6.9
203
196
  specification_version: 4
204
197
  summary: Material Web Components for Hotwire Turbo.
205
198
  test_files: []