wilday_ui 0.4.0 → 0.5.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.
@@ -22,11 +22,12 @@ module WildayUi
22
22
 
23
23
  def w_button(
24
24
  content,
25
- variant: :primary,
25
+ variant: :solid,
26
26
  size: :medium,
27
27
  radius: :rounded,
28
28
  icon: nil,
29
29
  icon_position: :left,
30
+ icon_only: false,
30
31
  loading: false,
31
32
  loading_text: nil,
32
33
  disabled: false,
@@ -35,17 +36,25 @@ module WildayUi
35
36
  href: nil,
36
37
  method: :get,
37
38
  target: nil,
39
+ underline: true,
38
40
  dropdown: false,
39
41
  dropdown_items: nil,
40
42
  dropdown_icon: nil,
43
+ theme: nil,
41
44
  **options
42
45
  )
43
- content_for(:head) { stylesheet_link_tag "wilday_ui/button", media: "all" }
46
+ content_for(:head) { stylesheet_link_tag "wilday_ui/components/button/index", media: "all" }
44
47
 
45
48
  options[:data] ||= {}
46
49
  wrapper_data = {}
47
50
  wrapper_options = nil
48
51
 
52
+ # Process theme styles
53
+ if theme.present?
54
+ theme_styles = process_theme(variant, theme)
55
+ options[:style] = theme_styles if theme_styles.present?
56
+ end
57
+
49
58
  variant_class = get_variant_class(variant)
50
59
  size_class = get_size_class(size)
51
60
  radius_class = get_radius_class(radius)
@@ -86,12 +95,14 @@ module WildayUi
86
95
  radius_class,
87
96
  icon,
88
97
  icon_position,
98
+ icon_only,
89
99
  loading,
90
100
  loading_text,
91
101
  additional_classes,
92
102
  disabled,
93
103
  options,
94
104
  href,
105
+ underline,
95
106
  dropdown,
96
107
  dropdown_items,
97
108
  dropdown_icon,
@@ -101,12 +112,23 @@ module WildayUi
101
112
 
102
113
  private
103
114
 
115
+ # def get_variant_class(variant)
116
+ # {
117
+ # primary: "w-button-primary",
118
+ # secondary: "w-button-secondary",
119
+ # outline: "w-button-outline"
120
+ # }[variant] || "w-button-primary"
121
+ # end
122
+
104
123
  def get_variant_class(variant)
105
124
  {
106
- primary: "w-button-primary",
107
- secondary: "w-button-secondary",
108
- outline: "w-button-outline"
109
- }[variant] || "w-button-primary"
125
+ solid: "w-button-solid",
126
+ subtle: "w-button-subtle",
127
+ surface: "w-button-surface",
128
+ outline: "w-button-outline",
129
+ ghost: "w-button-ghost",
130
+ plain: "w-button-plain"
131
+ }[variant] || "w-button-solid"
110
132
  end
111
133
 
112
134
  def get_size_class(size)
@@ -125,6 +147,95 @@ module WildayUi
125
147
  }[radius] || "w-button-rounded"
126
148
  end
127
149
 
150
+ def process_theme(variant, theme)
151
+ return nil unless theme[:name] || theme[:custom]
152
+
153
+ Rails.logger.debug "[Wilday UI] Processing theme for variant: #{variant}"
154
+ Rails.logger.debug "[Wilday UI] Theme config: #{theme.inspect}"
155
+
156
+ styles = {}
157
+
158
+ if theme[:name]
159
+ theme_colors = get_theme_colors(variant, theme[:name])
160
+ styles.merge!(theme_colors)
161
+ end
162
+
163
+ if theme[:custom]
164
+ custom_styles = process_custom_theme(theme[:custom])
165
+ styles.merge!(custom_styles)
166
+ end
167
+
168
+ generate_styles(styles)
169
+ end
170
+
171
+ def get_theme_colors(variant, theme_name)
172
+ config = WildayUi::Config::Theme.configuration
173
+ # Convert theme_name to string
174
+ return {} unless config&.colors&.[](theme_name.to_s)
175
+
176
+ colors = config.colors[theme_name.to_s]
177
+
178
+ case variant
179
+ when :solid
180
+ {
181
+ "--w-button-color": "#FFFFFF",
182
+ "--w-button-bg": colors["500"],
183
+ "--w-button-hover-bg": colors["600"]
184
+ }
185
+ when :subtle
186
+ {
187
+ "--w-button-color": colors["500"],
188
+ "--w-button-bg": colors["50"],
189
+ "--w-button-hover-bg": colors["100"]
190
+ }
191
+ when :surface
192
+ {
193
+ "--w-button-color": colors["500"],
194
+ "--w-button-bg": colors["50"],
195
+ "--w-button-hover-bg": colors["100"],
196
+ "--w-button-border": colors["100"]
197
+ }
198
+ when :outline
199
+ {
200
+ "--w-button-color": colors["500"],
201
+ "--w-button-border": colors["200"],
202
+ "--w-button-hover-bg": colors["50"]
203
+ }
204
+ when :ghost
205
+ {
206
+ "--w-button-color": colors["500"],
207
+ "--w-button-hover-bg": colors["50"]
208
+ }
209
+ when :plain
210
+ {
211
+ "--w-button-color": colors["500"],
212
+ "--w-button-hover-color": colors["600"]
213
+ }
214
+ else
215
+ {}
216
+ end
217
+ end
218
+
219
+ def process_custom_theme(custom)
220
+ return {} unless custom
221
+
222
+ {
223
+ "--w-button-color": custom[:color],
224
+ "--w-button-bg": custom[:background],
225
+ "--w-button-border": custom[:border],
226
+ "--w-button-hover-color": custom.dig(:hover, :color),
227
+ "--w-button-hover-bg": custom.dig(:hover, :background),
228
+ "--w-button-hover-border": custom.dig(:hover, :border),
229
+ "--w-button-active-color": custom.dig(:active, :color),
230
+ "--w-button-active-bg": custom.dig(:active, :background),
231
+ "--w-button-active-border": custom.dig(:active, :border)
232
+ }.compact
233
+ end
234
+
235
+ def generate_styles(styles)
236
+ styles.map { |k, v| "#{k}: #{v}" }.join(";")
237
+ end
238
+
128
239
  def determine_active_features(loading, dropdown, loading_text = nil, use_default_controller = true)
129
240
  features = {}
130
241
  features[:loading] = true if (loading || loading_text.present?) && use_default_controller
@@ -247,9 +358,10 @@ module WildayUi
247
358
  "#{base}#{index}"
248
359
  end
249
360
 
250
- def render_button(content, variant_class, size_class, radius_class, icon, icon_position,
251
- loading, loading_text, additional_classes, disabled, options, href,
361
+ def render_button(content, variant_class, size_class, radius_class, icon, icon_position, icon_only,
362
+ loading, loading_text, additional_classes, disabled, options, href, underline,
252
363
  dropdown, dropdown_items, dropdown_icon, wrapper_options)
364
+
253
365
  render partial: "wilday_ui/button",
254
366
  locals: {
255
367
  content: content,
@@ -258,12 +370,14 @@ module WildayUi
258
370
  radius_class: radius_class,
259
371
  icon: icon,
260
372
  icon_position: icon_position,
373
+ icon_only: icon_only,
261
374
  loading: loading,
262
375
  loading_text: loading_text,
263
376
  additional_classes: additional_classes,
264
377
  disabled: disabled,
265
378
  html_options: options,
266
379
  href: href,
380
+ underline: underline,
267
381
  dropdown: dropdown,
268
382
  dropdown_items: dropdown_items,
269
383
  dropdown_icon: dropdown_icon,
@@ -15,6 +15,8 @@ export default class extends Controller {
15
15
  if (position) this.positionValue = position;
16
16
  if (align) this.alignValue = align;
17
17
 
18
+ this.updatePosition();
19
+
18
20
  // Set up hover events if trigger is hover
19
21
  if (this.triggerValue === "hover") {
20
22
  this.element.addEventListener("mouseenter", () => {
@@ -44,6 +46,7 @@ export default class extends Controller {
44
46
 
45
47
  handleHover(show) {
46
48
  if (show) {
49
+ this.updatePosition();
47
50
  this.menuTarget.classList.add("show");
48
51
  this.buttonTarget.classList.add("active");
49
52
  this.buttonTarget.setAttribute("aria-expanded", "true");
@@ -60,8 +63,13 @@ export default class extends Controller {
60
63
 
61
64
  if (this.isOpen) {
62
65
  this.menuTarget.classList.remove("show");
66
+ this.buttonTarget.classList.remove("active");
67
+ this.buttonTarget.setAttribute("aria-expanded", "false");
63
68
  } else {
69
+ this.updatePosition();
64
70
  this.menuTarget.classList.add("show");
71
+ this.buttonTarget.classList.add("active");
72
+ this.buttonTarget.setAttribute("aria-expanded", "true");
65
73
  }
66
74
  }
67
75
 
@@ -256,7 +264,8 @@ export default class extends Controller {
256
264
  }
257
265
 
258
266
  updatePosition() {
259
- const menuElement = this.element.querySelector(".w-button-dropdown-menu");
267
+ // const menuElement = this.element.querySelector(".w-button-dropdown-menu");
268
+ const menuElement = this.menuTarget;
260
269
  const position = this.hasPositionValue ? this.positionValue : "bottom";
261
270
  const align = this.hasAlignValue ? this.alignValue : "start";
262
271
 
@@ -1,8 +1,18 @@
1
1
  <%
2
2
  # Prepare base HTML options
3
3
  html_options = {
4
- class: ["w-button", variant_class, size_class, radius_class, additional_classes, ("w-button-loading" if loading)].compact.join(" "),
4
+ class: [
5
+ "w-button",
6
+ variant_class,
7
+ size_class,
8
+ radius_class,
9
+ additional_classes,
10
+ ("w-button-loading" if loading),
11
+ ("w-button-icon-only" if icon_only),
12
+ (href.present? ? (local_assigns[:underline] == false ? "w-button-no-underline" : "w-button-underline") : nil)
13
+ ].compact.join(" "),
5
14
  disabled: disabled || loading,
15
+ style: local_assigns[:html_options]&.dig(:style),
6
16
  "aria-busy": loading,
7
17
  "aria-disabled": disabled || loading,
8
18
  "aria-expanded": dropdown ? "false" : nil,
@@ -2,21 +2,25 @@
2
2
  <span class="w-button-spinner"></span>
3
3
  <%= loading_text %>
4
4
  <% else %>
5
- <% if icon_position == :left && icon.present? %>
6
- <i class="w-button-icon-left <%= icon %>"></i>
7
- <% end %>
8
-
9
- <%= content %>
5
+ <% if icon_only %>
6
+ <i class="w-button-icon <%= icon %>"></i>
7
+ <% else %>
8
+ <% if icon_position == :left && icon.present? %>
9
+ <i class="w-button-icon-left <%= icon %>"></i>
10
+ <% end %>
11
+
12
+ <%= content %>
10
13
 
11
- <% if dropdown %>
12
- <% if dropdown_icon.present? %>
13
- <i class="w-button-dropdown-arrow <%= dropdown_icon %>"></i>
14
- <% else %>
15
- <span class="w-button-dropdown-arrow"></span>
14
+ <% if dropdown %>
15
+ <% if dropdown_icon.present? %>
16
+ <i class="w-button-dropdown-arrow <%= dropdown_icon %>"></i>
17
+ <% else %>
18
+ <span class="w-button-dropdown-arrow"></span>
19
+ <% end %>
20
+ <% end %>
21
+
22
+ <% if icon_position == :right && icon.present? %>
23
+ <i class="w-button-icon-right <%= icon %>"></i>
16
24
  <% end %>
17
- <% end %>
18
-
19
- <% if icon_position == :right && icon.present? %>
20
- <i class="w-button-icon-right <%= icon %>"></i>
21
25
  <% end %>
22
26
  <% end %>
@@ -0,0 +1,138 @@
1
+ # lib/wilday_ui/config/theme.rb
2
+ module WildayUi
3
+ module Config
4
+ class Theme
5
+ class << self
6
+ attr_accessor :configuration
7
+ end
8
+
9
+ def self.configure
10
+ self.configuration ||= Configuration.new
11
+ yield(configuration) if block_given?
12
+ end
13
+
14
+ class Configuration
15
+ attr_accessor :colors
16
+
17
+ def initialize
18
+ @colors = default_colors
19
+ end
20
+
21
+ private
22
+
23
+ def default_colors
24
+ {
25
+ "primary" => {
26
+ "50" => "#E5F0FF",
27
+ "100" => "#CCE0FF",
28
+ "200" => "#99C2FF",
29
+ "300" => "#66A3FF",
30
+ "400" => "#3385FF",
31
+ "500" => "#0066FF",
32
+ "600" => "#0052CC",
33
+ "700" => "#003D99",
34
+ "800" => "#002966",
35
+ "900" => "#001433"
36
+ },
37
+ "secondary" => {
38
+ "50" => "#F8F9FA",
39
+ "100" => "#E9ECEF",
40
+ "200" => "#DEE2E6",
41
+ "300" => "#CED4DA",
42
+ "400" => "#ADB5BD",
43
+ "500" => "#6C757D",
44
+ "600" => "#5A6268",
45
+ "700" => "#495057",
46
+ "800" => "#343A40",
47
+ "900" => "#212529"
48
+ },
49
+ "success" => {
50
+ "50" => "#ECFDF5",
51
+ "100" => "#D1FAE5",
52
+ "200" => "#A7F3D0",
53
+ "300" => "#6EE7B7",
54
+ "400" => "#34D399",
55
+ "500" => "#10B981",
56
+ "600" => "#059669",
57
+ "700" => "#047857",
58
+ "800" => "#065F46",
59
+ "900" => "#064E3B"
60
+ },
61
+ "danger" => {
62
+ "50" => "#FEE2E2",
63
+ "100" => "#FECACA",
64
+ "200" => "#FCA5A5",
65
+ "300" => "#F87171",
66
+ "400" => "#EF4444",
67
+ "500" => "#DC2626",
68
+ "600" => "#B91C1C",
69
+ "700" => "#991B1B",
70
+ "800" => "#7F1D1D",
71
+ "900" => "#450A0A"
72
+ },
73
+ "warning" => {
74
+ "50" => "#FFFBEB",
75
+ "100" => "#FEF3C7",
76
+ "200" => "#FDE68A",
77
+ "300" => "#FCD34D",
78
+ "400" => "#FBBF24",
79
+ "500" => "#F59E0B",
80
+ "600" => "#D97706",
81
+ "700" => "#B45309",
82
+ "800" => "#92400E",
83
+ "900" => "#78350F"
84
+ },
85
+ "info" => {
86
+ "50" => "#EFF6FF",
87
+ "100" => "#DBEAFE",
88
+ "200" => "#BFDBFE",
89
+ "300" => "#93C5FD",
90
+ "400" => "#60A5FA",
91
+ "500" => "#3B82F6",
92
+ "600" => "#2563EB",
93
+ "700" => "#1D4ED8",
94
+ "800" => "#1E40AF",
95
+ "900" => "#1E3A8A"
96
+ },
97
+ "light" => {
98
+ "50" => "#FFFFFF",
99
+ "100" => "#F8F9FA",
100
+ "200" => "#F1F3F5",
101
+ "300" => "#E9ECEF",
102
+ "400" => "#DEE2E6",
103
+ "500" => "#CED4DA",
104
+ "600" => "#ADB5BD",
105
+ "700" => "#868E96",
106
+ "800" => "#495057",
107
+ "900" => "#212529"
108
+ },
109
+ "dark" => {
110
+ "50" => "#F9FAFB",
111
+ "100" => "#F3F4F6",
112
+ "200" => "#E5E7EB",
113
+ "300" => "#D1D5DB",
114
+ "400" => "#9CA3AF",
115
+ "500" => "#1F2937",
116
+ "600" => "#111827",
117
+ "700" => "#374151",
118
+ "800" => "#1F2937",
119
+ "900" => "#111827"
120
+ },
121
+ "link" => {
122
+ "50" => "#EFF6FF",
123
+ "100" => "#DBEAFE",
124
+ "200" => "#BFDBFE",
125
+ "300" => "#93C5FD",
126
+ "400" => "#60A5FA",
127
+ "500" => "#2563EB",
128
+ "600" => "#1D4ED8",
129
+ "700" => "#1E40AF",
130
+ "800" => "#1E3A8A",
131
+ "900" => "#1E3A8A"
132
+ }
133
+ }
134
+ end
135
+ end
136
+ end
137
+ end
138
+ end
@@ -1,9 +1,22 @@
1
1
  require "wilday_ui/version_check"
2
+ require "wilday_ui/config/theme"
2
3
 
3
4
  module WildayUi
4
5
  class Engine < ::Rails::Engine
5
6
  isolate_namespace WildayUi
6
7
 
8
+ # Add lib to autoload paths
9
+ config.autoload_paths << root.join("lib")
10
+ config.eager_load_paths << root.join("lib")
11
+
12
+ # Initialize theme configuration
13
+ initializer "wilday_ui.configuration", before: :load_config_initializers do
14
+ Rails.application.reloader.to_prepare do
15
+ Rails.logger.info "[Wilday UI] Theme configuration initialized."
16
+ WildayUi::Config::Theme.configuration ||= WildayUi::Config::Theme::Configuration.new
17
+ end
18
+ end
19
+
7
20
  # Automatically check for updates
8
21
  initializer "wilday_ui.version_check", after: :load_config_initializers do
9
22
  Rails.application.reloader.to_prepare do
@@ -19,27 +32,6 @@ module WildayUi
19
32
  end
20
33
  end
21
34
 
22
- # # Configure asset paths and automatic precompilation
23
- # initializer "wilday_ui.assets" do |app|
24
- # app.config.assets.paths << root.join("app/assets/stylesheets")
25
- # app.config.assets.paths << root.join("app/javascript")
26
- # app.config.assets.paths << root.join("app/assets/builds")
27
-
28
- # Rails.logger.info "[Wilday UI] Asset paths added: #{app.config.assets.paths}"
29
-
30
- # # Automatically precompile all CSS files in wilday_ui directory
31
- # css_files = Dir[root.join("app/assets/stylesheets/wilday_ui/**/*.css")].map do |file|
32
- # file.split("app/assets/stylesheets/").last
33
- # end
34
-
35
- # # Precompile only the bundled JavaScript file
36
- # app.config.assets.precompile += css_files
37
- # app.config.assets.precompile += %w[wilday_ui/index.js]
38
-
39
- # Rails.logger.info "[Wilday UI] CSS files precompiled: #{css_files}"
40
- # Rails.logger.info "[Wilday UI] JS files precompiled: wilday_ui/index.js"
41
- # end
42
-
43
35
  # Configure asset paths and automatic precompilation
44
36
  initializer "wilday_ui.assets" do |app|
45
37
  # Add engine asset paths
@@ -1,3 +1,3 @@
1
1
  module WildayUi
2
- VERSION = "0.4.0"
2
+ VERSION = "0.5.0"
3
3
  end
data/lib/wilday_ui.rb CHANGED
@@ -1,5 +1,6 @@
1
1
  require "wilday_ui/version"
2
2
  require "wilday_ui/engine"
3
+ require "wilday_ui/config/theme"
3
4
 
4
5
  module WildayUi
5
6
  # Your code goes here...
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: wilday_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.4.0
4
+ version: 0.5.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - davidwinalda
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-12-15 00:00:00.000000000 Z
11
+ date: 2024-12-17 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -44,6 +44,15 @@ files:
44
44
  - app/assets/config/wilday_ui_manifest.js
45
45
  - app/assets/stylesheets/wilday_ui/application.css
46
46
  - app/assets/stylesheets/wilday_ui/button.css
47
+ - app/assets/stylesheets/wilday_ui/components/button/base.css
48
+ - app/assets/stylesheets/wilday_ui/components/button/features/dropdown.css
49
+ - app/assets/stylesheets/wilday_ui/components/button/features/icons.css
50
+ - app/assets/stylesheets/wilday_ui/components/button/features/loading.css
51
+ - app/assets/stylesheets/wilday_ui/components/button/features/old_variants.css
52
+ - app/assets/stylesheets/wilday_ui/components/button/features/radius.css
53
+ - app/assets/stylesheets/wilday_ui/components/button/features/sizes.css
54
+ - app/assets/stylesheets/wilday_ui/components/button/features/variants.css
55
+ - app/assets/stylesheets/wilday_ui/components/button/index.css
47
56
  - app/controllers/wilday_ui/application_controller.rb
48
57
  - app/helpers/wilday_ui/application_helper.rb
49
58
  - app/helpers/wilday_ui/components/button_helper.rb
@@ -62,6 +71,7 @@ files:
62
71
  - config/routes.rb
63
72
  - lib/tasks/wilday_ui_tasks.rake
64
73
  - lib/wilday_ui.rb
74
+ - lib/wilday_ui/config/theme.rb
65
75
  - lib/wilday_ui/engine.rb
66
76
  - lib/wilday_ui/version.rb
67
77
  - lib/wilday_ui/version_check.rb