kozenet_ui 0.1.6 → 0.1.9
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/CHANGELOG.md +6 -0
- data/app/components/kozenet_ui/header_component/action_button_component.rb +4 -4
- data/app/helpers/kozenet_ui/component_helper.rb +78 -62
- data/lib/generators/kozenet_ui/install/install_generator.rb +1 -1
- data/lib/kozenet_ui/configuration.rb +3 -3
- data/lib/kozenet_ui/engine.rb +84 -61
- data/lib/kozenet_ui/theme/palette.rb +0 -1
- data/lib/kozenet_ui/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2c8f056b728fb765c786721792b4a4d19a75c9192fc566f6c68c1092b19bfbb3
|
|
4
|
+
data.tar.gz: 0bd8d2d5ee30829666efe6b3caf273a2d1d169048a1838355d9d359c23516c6e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 052c7e777a0b901c11745afd01cf6b1e32de55188e2e874a0cc54393c70ced096f8268693918e9a260f1b74a033dbdbdaa7ecad4b683f438181d9a18a3929750
|
|
7
|
+
data.tar.gz: e99ed56ec123737d7a1748b7111c9f6947086ed835591a5cde37ce3567192aba6f5b122467b012826a9ba7a5a28aa8b68b8a180ca288e25855e170a9389ccd38
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
## [Unreleased]
|
|
2
2
|
|
|
3
|
+
## [0.1.7] - 2026-05-31
|
|
4
|
+
|
|
5
|
+
- Fix: CI workflow now properly handles Rails 8.1.3 (commented out config.assets.quiet)
|
|
6
|
+
- Fix: HeaderComponent test now properly validates Stimulus prefix with mobile menu
|
|
7
|
+
- Improvement: Verified all 27 tests pass with Rails 8.1.3
|
|
8
|
+
|
|
3
9
|
## [0.1.5] - 2025-10-31
|
|
4
10
|
|
|
5
11
|
- Feature: Robust icon helper now supports both heroicon and asset-based SVGs, with automatic fallback and variant/class support
|
|
@@ -6,7 +6,8 @@ module KozenetUi
|
|
|
6
6
|
# Renders an action button (icon or text) in the header
|
|
7
7
|
#
|
|
8
8
|
# @example
|
|
9
|
-
# <%= render KozenetUi::HeaderComponent::ActionButtonComponent.new(href:
|
|
9
|
+
# <%= render KozenetUi::HeaderComponent::ActionButtonComponent.new(href:
|
|
10
|
+
# "/cart", icon: :shopping_cart, label: "Cart") %>
|
|
10
11
|
class ActionButtonComponent < BaseComponent
|
|
11
12
|
PLACEMENTS = %i[start end].freeze
|
|
12
13
|
PLACEMENT_ALIASES = {
|
|
@@ -21,8 +22,7 @@ module KozenetUi
|
|
|
21
22
|
both: :always
|
|
22
23
|
}.freeze
|
|
23
24
|
|
|
24
|
-
attr_reader :placement
|
|
25
|
-
attr_reader :visible_on
|
|
25
|
+
attr_reader :placement, :visible_on
|
|
26
26
|
|
|
27
27
|
def initialize(
|
|
28
28
|
href: "#",
|
|
@@ -70,7 +70,7 @@ module KozenetUi
|
|
|
70
70
|
end
|
|
71
71
|
|
|
72
72
|
def visible_text
|
|
73
|
-
@text.presence ||
|
|
73
|
+
@text.presence || content.presence
|
|
74
74
|
end
|
|
75
75
|
|
|
76
76
|
def visible_text?
|
|
@@ -6,6 +6,17 @@ module KozenetUi
|
|
|
6
6
|
module ComponentHelper
|
|
7
7
|
include KozenetUi::IconHelper
|
|
8
8
|
|
|
9
|
+
KOZENET_UI_STYLESHEETS = [
|
|
10
|
+
"kozenet_ui/tokens",
|
|
11
|
+
"kozenet_ui/fonts",
|
|
12
|
+
"kozenet_ui/base",
|
|
13
|
+
"kozenet_ui/components/button",
|
|
14
|
+
"kozenet_ui/components/header",
|
|
15
|
+
"kozenet_ui/components/avatar",
|
|
16
|
+
"kozenet_ui/components/badge",
|
|
17
|
+
"kozenet_ui/components/utilities"
|
|
18
|
+
].freeze
|
|
19
|
+
|
|
9
20
|
# Render a Kozenet UI button
|
|
10
21
|
def kz_button(**options, &block)
|
|
11
22
|
render(KozenetUi::ButtonComponent.new(**options), &block)
|
|
@@ -28,17 +39,7 @@ module KozenetUi
|
|
|
28
39
|
|
|
29
40
|
# Include theme styles in layout
|
|
30
41
|
def kozenet_ui_stylesheet_tag
|
|
31
|
-
stylesheet_link_tag(
|
|
32
|
-
"kozenet_ui/tokens",
|
|
33
|
-
"kozenet_ui/fonts",
|
|
34
|
-
"kozenet_ui/base",
|
|
35
|
-
"kozenet_ui/components/button",
|
|
36
|
-
"kozenet_ui/components/header",
|
|
37
|
-
"kozenet_ui/components/avatar",
|
|
38
|
-
"kozenet_ui/components/badge",
|
|
39
|
-
"kozenet_ui/components/utilities",
|
|
40
|
-
"data-turbo-track": "reload"
|
|
41
|
-
)
|
|
42
|
+
stylesheet_link_tag(*KOZENET_UI_STYLESHEETS, "data-turbo-track": "reload")
|
|
42
43
|
end
|
|
43
44
|
|
|
44
45
|
# Include theme JavaScript
|
|
@@ -67,67 +68,82 @@ module KozenetUi
|
|
|
67
68
|
|
|
68
69
|
# Inject inline theme variables (CSP-compliant)
|
|
69
70
|
def kozenet_ui_theme_variables_tag
|
|
70
|
-
|
|
71
|
-
content_tag(:style, kozenet_ui_theme_variables, nonce: content_security_policy_nonce)
|
|
72
|
-
# rubocop:enable Rails/OutputSafety
|
|
71
|
+
content_tag(:style, build_theme_css, nonce: content_security_policy_nonce)
|
|
73
72
|
end
|
|
74
73
|
|
|
75
|
-
|
|
76
|
-
# rubocop:disable Rails/OutputSafety
|
|
77
|
-
palette = KozenetUi.configuration.palette
|
|
78
|
-
light_palette = palette.to_css_variables(mode: :light)
|
|
79
|
-
dark_palette = palette.to_css_variables(mode: :dark)
|
|
80
|
-
tokens = KozenetUi::Theme::Tokens.to_css_variables
|
|
74
|
+
private
|
|
81
75
|
|
|
76
|
+
def build_theme_css
|
|
77
|
+
theme_vars = compile_theme_variables
|
|
82
78
|
case KozenetUi.configuration.theme
|
|
83
79
|
when :dark, "dark"
|
|
84
|
-
|
|
85
|
-
:root {
|
|
86
|
-
color-scheme: dark;
|
|
87
|
-
#{tokens}
|
|
88
|
-
#{dark_palette}
|
|
89
|
-
}
|
|
90
|
-
[data-theme="light"], .light {
|
|
91
|
-
color-scheme: light;
|
|
92
|
-
#{light_palette}
|
|
93
|
-
}
|
|
94
|
-
CSS
|
|
80
|
+
build_dark_theme_css(*theme_vars)
|
|
95
81
|
when :system, "system"
|
|
96
|
-
|
|
97
|
-
:root {
|
|
98
|
-
color-scheme: light;
|
|
99
|
-
#{tokens}
|
|
100
|
-
#{light_palette}
|
|
101
|
-
}
|
|
102
|
-
@media (prefers-color-scheme: dark) {
|
|
103
|
-
:root:not([data-theme="light"]) {
|
|
104
|
-
color-scheme: dark;
|
|
105
|
-
#{dark_palette}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
[data-theme="dark"], .dark {
|
|
109
|
-
color-scheme: dark;
|
|
110
|
-
#{dark_palette}
|
|
111
|
-
}
|
|
112
|
-
[data-theme="light"], .light {
|
|
113
|
-
color-scheme: light;
|
|
114
|
-
#{light_palette}
|
|
115
|
-
}
|
|
116
|
-
CSS
|
|
82
|
+
build_system_theme_css(*theme_vars)
|
|
117
83
|
else
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
84
|
+
build_light_theme_css(*theme_vars)
|
|
85
|
+
end.html_safe
|
|
86
|
+
end
|
|
87
|
+
|
|
88
|
+
def compile_theme_variables
|
|
89
|
+
palette = KozenetUi.configuration.palette
|
|
90
|
+
[
|
|
91
|
+
KozenetUi::Theme::Tokens.to_css_variables,
|
|
92
|
+
palette.to_css_variables(mode: :light),
|
|
93
|
+
palette.to_css_variables(mode: :dark)
|
|
94
|
+
]
|
|
95
|
+
end
|
|
96
|
+
|
|
97
|
+
def build_dark_theme_css(tokens, light_palette, dark_palette)
|
|
98
|
+
<<~CSS
|
|
99
|
+
:root {
|
|
100
|
+
color-scheme: dark;
|
|
101
|
+
#{tokens}
|
|
102
|
+
#{dark_palette}
|
|
103
|
+
}
|
|
104
|
+
[data-theme="light"], .light {
|
|
105
|
+
color-scheme: light;
|
|
106
|
+
#{light_palette}
|
|
107
|
+
}
|
|
108
|
+
CSS
|
|
109
|
+
end
|
|
110
|
+
|
|
111
|
+
def build_system_theme_css(tokens, light_palette, dark_palette)
|
|
112
|
+
<<~CSS
|
|
113
|
+
:root {
|
|
114
|
+
color-scheme: light;
|
|
115
|
+
#{tokens}
|
|
116
|
+
#{light_palette}
|
|
117
|
+
}
|
|
118
|
+
@media (prefers-color-scheme: dark) {
|
|
119
|
+
:root:not([data-theme="light"]) {
|
|
125
120
|
color-scheme: dark;
|
|
126
121
|
#{dark_palette}
|
|
127
122
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
123
|
+
}
|
|
124
|
+
[data-theme="dark"], .dark {
|
|
125
|
+
color-scheme: dark;
|
|
126
|
+
#{dark_palette}
|
|
127
|
+
}
|
|
128
|
+
[data-theme="light"], .light {
|
|
129
|
+
color-scheme: light;
|
|
130
|
+
#{light_palette}
|
|
131
|
+
}
|
|
132
|
+
CSS
|
|
133
|
+
end
|
|
134
|
+
|
|
135
|
+
def build_light_theme_css(tokens, light_palette, dark_palette)
|
|
136
|
+
<<~CSS
|
|
137
|
+
:root {
|
|
138
|
+
color-scheme: light;
|
|
139
|
+
#{tokens}
|
|
140
|
+
#{light_palette}
|
|
141
|
+
}
|
|
142
|
+
[data-theme="dark"], .dark {
|
|
143
|
+
color-scheme: dark;
|
|
144
|
+
#{dark_palette}
|
|
145
|
+
}
|
|
146
|
+
CSS
|
|
131
147
|
end
|
|
132
148
|
end
|
|
133
149
|
end
|
|
@@ -5,7 +5,7 @@ require "rails/generators/base"
|
|
|
5
5
|
module KozenetUi
|
|
6
6
|
module Generators
|
|
7
7
|
# Generator for installing Kozenet UI into a Rails application
|
|
8
|
-
|
|
8
|
+
# Copies stylesheets, creates initializer, and adds runtime tags
|
|
9
9
|
class InstallGenerator < Rails::Generators::Base
|
|
10
10
|
source_root File.expand_path("templates", __dir__)
|
|
11
11
|
|
|
@@ -10,8 +10,8 @@ module KozenetUi
|
|
|
10
10
|
}
|
|
11
11
|
}.freeze
|
|
12
12
|
|
|
13
|
-
attr_accessor :palette, :default_variant, :default_size, :theme
|
|
14
|
-
attr_reader :component_defaults
|
|
13
|
+
attr_accessor :palette, :default_variant, :default_size, :theme
|
|
14
|
+
attr_reader :component_defaults, :stimulus_prefix
|
|
15
15
|
|
|
16
16
|
def initialize
|
|
17
17
|
@palette = Theme::Palette.new
|
|
@@ -50,7 +50,7 @@ module KozenetUi
|
|
|
50
50
|
private
|
|
51
51
|
|
|
52
52
|
def symbolize_keys(hash)
|
|
53
|
-
hash.to_h.transform_keys
|
|
53
|
+
hash.to_h.transform_keys(&:to_sym)
|
|
54
54
|
end
|
|
55
55
|
end
|
|
56
56
|
end
|
data/lib/kozenet_ui/engine.rb
CHANGED
|
@@ -24,7 +24,9 @@ module KozenetUi
|
|
|
24
24
|
end
|
|
25
25
|
|
|
26
26
|
# Configure where to look for components
|
|
27
|
-
|
|
27
|
+
if Rails.env.development? && config.view_component&.preview_paths
|
|
28
|
+
config.view_component.preview_paths << "#{root}/spec/components/previews"
|
|
29
|
+
end
|
|
28
30
|
|
|
29
31
|
# Add assets paths (for Rails 7/Sprockets only)
|
|
30
32
|
if config.respond_to?(:assets) && config.assets.respond_to?(:paths)
|
|
@@ -102,78 +104,99 @@ module KozenetUi
|
|
|
102
104
|
content_tag(:style, kozenet_ui_theme_variables, nonce: content_security_policy_nonce)
|
|
103
105
|
end
|
|
104
106
|
|
|
105
|
-
# rubocop:disable Rails/OutputSafety
|
|
106
107
|
def kozenet_ui_theme_variables
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
108
|
+
build_theme_css
|
|
109
|
+
end
|
|
110
|
+
|
|
111
|
+
private
|
|
111
112
|
|
|
113
|
+
def build_theme_css
|
|
114
|
+
theme_vars = compile_theme_variables
|
|
112
115
|
case KozenetUi.configuration.theme
|
|
113
116
|
when :dark, "dark"
|
|
114
|
-
|
|
115
|
-
:root {
|
|
116
|
-
color-scheme: dark;
|
|
117
|
-
/* Design Tokens */
|
|
118
|
-
#{tokens}
|
|
119
|
-
/* Color Palette (Dark Mode) */
|
|
120
|
-
#{dark_palette}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
[data-theme="light"], .light {
|
|
124
|
-
color-scheme: light;
|
|
125
|
-
/* Color Palette (Light Mode) */
|
|
126
|
-
#{light_palette}
|
|
127
|
-
}
|
|
128
|
-
CSS
|
|
117
|
+
build_dark_theme_css(*theme_vars)
|
|
129
118
|
when :system, "system"
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
/* Color Palette (Light Mode) */
|
|
136
|
-
#{light_palette}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
@media (prefers-color-scheme: dark) {
|
|
140
|
-
:root:not([data-theme="light"]):not(.light) {
|
|
141
|
-
color-scheme: dark;
|
|
142
|
-
/* Color Palette (Dark Mode) */
|
|
143
|
-
#{dark_palette}
|
|
144
|
-
}
|
|
145
|
-
}
|
|
119
|
+
build_system_theme_css(*theme_vars)
|
|
120
|
+
else
|
|
121
|
+
build_light_theme_css(*theme_vars)
|
|
122
|
+
end.html_safe
|
|
123
|
+
end
|
|
146
124
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
125
|
+
def compile_theme_variables
|
|
126
|
+
palette = KozenetUi.configuration.palette
|
|
127
|
+
[
|
|
128
|
+
KozenetUi::Theme::Tokens.to_css_variables,
|
|
129
|
+
palette.to_css_variables(mode: :light),
|
|
130
|
+
palette.to_css_variables(mode: :dark)
|
|
131
|
+
]
|
|
132
|
+
end
|
|
152
133
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
134
|
+
def build_dark_theme_css(tokens, light_palette, dark_palette)
|
|
135
|
+
<<~CSS
|
|
136
|
+
:root {
|
|
137
|
+
color-scheme: dark;
|
|
138
|
+
/* Design Tokens */
|
|
139
|
+
#{tokens}
|
|
140
|
+
/* Color Palette (Dark Mode) */
|
|
141
|
+
#{dark_palette}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
[data-theme="light"], .light {
|
|
145
|
+
color-scheme: light;
|
|
146
|
+
/* Color Palette (Light Mode) */
|
|
147
|
+
#{light_palette}
|
|
148
|
+
}
|
|
149
|
+
CSS
|
|
150
|
+
end
|
|
168
151
|
|
|
169
|
-
|
|
152
|
+
def build_system_theme_css(tokens, light_palette, dark_palette)
|
|
153
|
+
<<~CSS
|
|
154
|
+
:root {
|
|
155
|
+
color-scheme: light;
|
|
156
|
+
/* Design Tokens */
|
|
157
|
+
#{tokens}
|
|
158
|
+
/* Color Palette (Light Mode) */
|
|
159
|
+
#{light_palette}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@media (prefers-color-scheme: dark) {
|
|
163
|
+
:root:not([data-theme="light"]):not(.light) {
|
|
170
164
|
color-scheme: dark;
|
|
171
165
|
/* Color Palette (Dark Mode) */
|
|
172
166
|
#{dark_palette}
|
|
173
167
|
}
|
|
174
|
-
|
|
175
|
-
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
[data-theme="dark"], .dark {
|
|
171
|
+
color-scheme: dark;
|
|
172
|
+
/* Color Palette (Dark Mode) */
|
|
173
|
+
#{dark_palette}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
[data-theme="light"], .light {
|
|
177
|
+
color-scheme: light;
|
|
178
|
+
/* Color Palette (Light Mode) */
|
|
179
|
+
#{light_palette}
|
|
180
|
+
}
|
|
181
|
+
CSS
|
|
182
|
+
end
|
|
183
|
+
|
|
184
|
+
def build_light_theme_css(tokens, light_palette, dark_palette)
|
|
185
|
+
<<~CSS
|
|
186
|
+
:root {
|
|
187
|
+
color-scheme: light;
|
|
188
|
+
/* Design Tokens */
|
|
189
|
+
#{tokens}
|
|
190
|
+
/* Color Palette (Light Mode) */
|
|
191
|
+
#{light_palette}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
[data-theme="dark"], .dark {
|
|
195
|
+
color-scheme: dark;
|
|
196
|
+
/* Color Palette (Dark Mode) */
|
|
197
|
+
#{dark_palette}
|
|
198
|
+
}
|
|
199
|
+
CSS
|
|
176
200
|
end
|
|
177
|
-
# rubocop:enable Rails/OutputSafety
|
|
178
201
|
end
|
|
179
202
|
end
|
|
@@ -89,7 +89,6 @@ module KozenetUi
|
|
|
89
89
|
variables << "--gradient-accent-from: #{@colors[:gradient_accent_from] || "#6366f1"};"
|
|
90
90
|
variables << "--gradient-accent-via: #{@colors[:gradient_accent_via] || "#0ea5e9"};"
|
|
91
91
|
variables << "--gradient-accent-to: #{@colors[:gradient_accent_to] || "#06b6d4"};"
|
|
92
|
-
# rubocop:disable Naming/VariableNumber
|
|
93
92
|
variables << "--gradient-spot-1: #{@colors[:gradient_spot_1] || "rgba(99,102,241,0.35)"};"
|
|
94
93
|
variables << "--gradient-spot-2: #{@colors[:gradient_spot_2] || "rgba(14,165,233,0.30)"};"
|
|
95
94
|
# rubocop:enable Naming/VariableNumber
|
data/lib/kozenet_ui/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: kozenet_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.9
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Kozenet Pro
|
|
@@ -80,7 +80,7 @@ dependencies:
|
|
|
80
80
|
version: '3.0'
|
|
81
81
|
- - "<"
|
|
82
82
|
- !ruby/object:Gem::Version
|
|
83
|
-
version: '
|
|
83
|
+
version: '5.0'
|
|
84
84
|
type: :runtime
|
|
85
85
|
prerelease: false
|
|
86
86
|
version_requirements: !ruby/object:Gem::Requirement
|
|
@@ -90,7 +90,7 @@ dependencies:
|
|
|
90
90
|
version: '3.0'
|
|
91
91
|
- - "<"
|
|
92
92
|
- !ruby/object:Gem::Version
|
|
93
|
-
version: '
|
|
93
|
+
version: '5.0'
|
|
94
94
|
- !ruby/object:Gem::Dependency
|
|
95
95
|
name: bundler
|
|
96
96
|
requirement: !ruby/object:Gem::Requirement
|