wilday_ui 0.1.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 +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +103 -0
- data/Rakefile +8 -0
- data/app/assets/builds/index.css +1 -0
- data/app/assets/builds/index.js +13 -0
- data/app/assets/builds/index.js.map +7 -0
- data/app/assets/config/wilday_ui_manifest.js +1 -0
- data/app/assets/stylesheets/wilday_ui/application.css +15 -0
- data/app/assets/stylesheets/wilday_ui/button.css +77 -0
- data/app/controllers/wilday_ui/application_controller.rb +4 -0
- data/app/helpers/wilday_ui/application_helper.rb +5 -0
- data/app/helpers/wilday_ui/components/button_helper.rb +45 -0
- data/app/javascript/wilday_ui/components/button.js +9 -0
- data/app/javascript/wilday_ui/index.js +1 -0
- data/app/jobs/wilday_ui/application_job.rb +4 -0
- data/app/mailers/wilday_ui/application_mailer.rb +6 -0
- data/app/models/wilday_ui/application_record.rb +5 -0
- data/app/views/layouts/wilday_ui/application.html.erb +17 -0
- data/app/views/wilday_ui/_button.html.erb +7 -0
- data/config/routes.rb +2 -0
- data/lib/tasks/wilday_ui_tasks.rake +4 -0
- data/lib/wilday_ui/engine.rb +24 -0
- data/lib/wilday_ui/version.rb +3 -0
- data/lib/wilday_ui.rb +6 -0
- metadata +90 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: d9a81a71dc979b91c1437051a2924dc22d1c9ef0cc0923f6606d409b76b6e790
|
4
|
+
data.tar.gz: ae05eaf824740f4b843b13f606a91ac49948eb9c3d68703fc5fb2cee3f0045fe
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 7e09f450b47502c3b8e479c8df576b0226ed14bcb5e8d8534b36b9b55862326c7822d30438ccd5a690c439ae835730f580bb58577362a261241b8847f392769e
|
7
|
+
data.tar.gz: 8087d892f850e81b23da8f3e0a1adb143fc65d63c265f1a3154972ec6baeb02885ab406d855f0f442d5e7cb362faea6f04aa1e56499664456b88cab5adef8656
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright davidwinalda
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,103 @@
|
|
1
|
+
# Wilday UI
|
2
|
+
|
3
|
+
Wilday UI is a simple, customizable UI component library for Ruby on Rails projects. It includes ready-to-use components such as buttons with customizable styles, sizes, and radii, making it easy to create beautiful, consistent UI elements.
|
4
|
+
|
5
|
+
---
|
6
|
+
|
7
|
+
## Features
|
8
|
+
|
9
|
+
- Prebuilt, customizable button component
|
10
|
+
- Flexible variants, sizes, and border radii
|
11
|
+
- Easy integration with Rails as an engine
|
12
|
+
|
13
|
+
---
|
14
|
+
|
15
|
+
## Why These Features Are Important
|
16
|
+
|
17
|
+
1. **Flexibility**: Users can style component without being restricted to predefined classes.
|
18
|
+
2. **Extensibility**: Users can add attributes or integrate component with JavaScript, analytics, or accessibility tools.
|
19
|
+
3. **Framework Integration**: Supports utility classes from frameworks like Bootstrap or Tailwind.
|
20
|
+
|
21
|
+
## Installation
|
22
|
+
|
23
|
+
Add Wilday UI to your application's Gemfile:
|
24
|
+
|
25
|
+
```ruby
|
26
|
+
gem "wilday_ui"
|
27
|
+
```
|
28
|
+
|
29
|
+
Then execute:
|
30
|
+
|
31
|
+
```bash
|
32
|
+
bundle install
|
33
|
+
```
|
34
|
+
|
35
|
+
Or install it directly:
|
36
|
+
|
37
|
+
```bash
|
38
|
+
gem install wilday_ui
|
39
|
+
```
|
40
|
+
|
41
|
+
---
|
42
|
+
|
43
|
+
## Usage
|
44
|
+
|
45
|
+
### Button Component
|
46
|
+
|
47
|
+
Render a button in your Rails views using the `w_button` helper:
|
48
|
+
|
49
|
+
```erb
|
50
|
+
<%= w_button "Click Me", variant: :primary %>
|
51
|
+
```
|
52
|
+
|
53
|
+
### Customization Options
|
54
|
+
|
55
|
+
| Option | Description | Example |
|
56
|
+
| ------------------------ | ----------------------------------------------------- | ---------------------------------------- |
|
57
|
+
| **`variant`** | Button style (`:primary`, `:secondary`, `:outline`) | `variant: :primary` |
|
58
|
+
| **`size`** | Button size (`:small`, `:medium`, `:large`) | `size: :large` |
|
59
|
+
| **`radius`** | Button shape (`:rounded`, `:pill`, `:square`) | `radius: :pill` |
|
60
|
+
| **`additional_classes`** | Add custom CSS classes | `additional_classes: "shadow-md"` |
|
61
|
+
| **`**options`\*\* | Add custom HTML attributes (e.g., `data-*`, `aria-*`) | `data: { tracking: "click" }, id: "btn"` |
|
62
|
+
|
63
|
+
---
|
64
|
+
|
65
|
+
### Examples
|
66
|
+
|
67
|
+
#### Basic Button
|
68
|
+
|
69
|
+
```erb
|
70
|
+
<%= w_button "Submit", variant: :primary %>
|
71
|
+
```
|
72
|
+
|
73
|
+
#### Custom Size and Shape
|
74
|
+
|
75
|
+
```erb
|
76
|
+
<%= w_button "Save", size: :large, radius: :pill %>
|
77
|
+
```
|
78
|
+
|
79
|
+
#### Fully Customized Button
|
80
|
+
|
81
|
+
```erb
|
82
|
+
<%= w_button "Custom",
|
83
|
+
variant: :outline,
|
84
|
+
additional_classes: "text-center shadow-lg",
|
85
|
+
data: { action: "click->controller#action" },
|
86
|
+
aria: { label: "Custom Button" } %>
|
87
|
+
```
|
88
|
+
|
89
|
+
---
|
90
|
+
|
91
|
+
## Contributing
|
92
|
+
|
93
|
+
Contributions are welcome! If you’d like to help improve Wilday UI, feel free to open an issue or submit a pull request.
|
94
|
+
|
95
|
+
---
|
96
|
+
|
97
|
+
## License
|
98
|
+
|
99
|
+
Wilday UI is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
100
|
+
|
101
|
+
---
|
102
|
+
|
103
|
+
This version makes the README user-friendly and focused on practical usage, while being concise for developers exploring the gem. Let me know if you’d like further tweaks! 🚀
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
.wilday-button{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:.375rem;font-size:1rem;cursor:pointer;transition:all .2s ease-in-out}.wilday-button-primary{background-color:#007bff;color:#fff;border:none}.wilday-button-primary:hover{background-color:#0056b3}.wilday-button-secondary{background-color:#6c757d;color:#fff;border:none}.wilday-button-secondary:hover{background-color:#5a6268}.wilday-button-outline{background-color:transparent;color:#007bff;border:1px solid #007bff}.wilday-button-outline:hover{background-color:#e7f1ff}.wilday-button-small{font-size:.875rem;padding:.25rem .5rem}.wilday-button-medium{font-size:1rem;padding:.5rem 1rem}.wilday-button-large{font-size:1.25rem;padding:.75rem 1.5rem}.wilday-button:disabled{background-color:#e0e0e0;color:#6c757d;cursor:not-allowed}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
(() => {
|
2
|
+
// app/javascript/wilday_ui/components/button.js
|
3
|
+
document.addEventListener("DOMContentLoaded", () => {
|
4
|
+
document.querySelectorAll(".w-button").forEach((button) => {
|
5
|
+
button.addEventListener("click", (event) => {
|
6
|
+
if (button.disabled) {
|
7
|
+
event.preventDefault();
|
8
|
+
}
|
9
|
+
});
|
10
|
+
});
|
11
|
+
});
|
12
|
+
})();
|
13
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../javascript/wilday_ui/components/button.js"],
|
4
|
+
"sourcesContent": ["document.addEventListener(\"DOMContentLoaded\", () => {\n document.querySelectorAll(\".w-button\").forEach((button) => {\n button.addEventListener(\"click\", (event) => {\n if (button.disabled) {\n event.preventDefault();\n }\n });\n });\n});\n"],
|
5
|
+
"mappings": ";;AAAA,WAAS,iBAAiB,oBAAoB,MAAM;AAClD,aAAS,iBAAiB,WAAW,EAAE,QAAQ,CAAC,WAAW;AACzD,aAAO,iBAAiB,SAAS,CAAC,UAAU;AAC1C,YAAI,OAAO,UAAU;AACnB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
//= link_directory ../stylesheets/wilday_ui .css
|
@@ -0,0 +1,15 @@
|
|
1
|
+
/*
|
2
|
+
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
3
|
+
* listed below.
|
4
|
+
*
|
5
|
+
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
|
6
|
+
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
|
7
|
+
*
|
8
|
+
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
9
|
+
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
|
10
|
+
* files in this directory. Styles in this file should be added after the last require_* statement.
|
11
|
+
* It is generally better to create a new file per style scope.
|
12
|
+
*
|
13
|
+
*= require_tree .
|
14
|
+
*= require_self
|
15
|
+
*/
|
@@ -0,0 +1,77 @@
|
|
1
|
+
.w-button {
|
2
|
+
display: inline-flex;
|
3
|
+
align-items: center;
|
4
|
+
justify-content: center;
|
5
|
+
padding: 0.5rem 1rem;
|
6
|
+
border-radius: 0.375rem;
|
7
|
+
font-size: 1rem;
|
8
|
+
cursor: pointer;
|
9
|
+
transition: all 0.2s ease-in-out;
|
10
|
+
}
|
11
|
+
|
12
|
+
/* Variants */
|
13
|
+
.w-button-primary {
|
14
|
+
background-color: #007bff;
|
15
|
+
color: #fff;
|
16
|
+
border: none;
|
17
|
+
}
|
18
|
+
|
19
|
+
.w-button-primary:hover {
|
20
|
+
background-color: #0056b3;
|
21
|
+
}
|
22
|
+
|
23
|
+
.w-button-secondary {
|
24
|
+
background-color: #6c757d;
|
25
|
+
color: #fff;
|
26
|
+
border: none;
|
27
|
+
}
|
28
|
+
|
29
|
+
.w-button-secondary:hover {
|
30
|
+
background-color: #5a6268;
|
31
|
+
}
|
32
|
+
|
33
|
+
.w-button-outline {
|
34
|
+
background-color: transparent;
|
35
|
+
color: #007bff;
|
36
|
+
border: 1px solid #007bff;
|
37
|
+
}
|
38
|
+
|
39
|
+
.w-button-outline:hover {
|
40
|
+
background-color: #e7f1ff;
|
41
|
+
}
|
42
|
+
|
43
|
+
/* Sizes */
|
44
|
+
.w-button-small {
|
45
|
+
font-size: 0.875rem;
|
46
|
+
padding: 0.25rem 0.5rem;
|
47
|
+
}
|
48
|
+
|
49
|
+
.w-button-medium {
|
50
|
+
font-size: 1rem;
|
51
|
+
padding: 0.5rem 1rem;
|
52
|
+
}
|
53
|
+
|
54
|
+
.w-button-large {
|
55
|
+
font-size: 1.25rem;
|
56
|
+
padding: 0.75rem 1.5rem;
|
57
|
+
}
|
58
|
+
|
59
|
+
/* Disabled */
|
60
|
+
.w-button:disabled {
|
61
|
+
background-color: #e0e0e0;
|
62
|
+
color: #6c757d;
|
63
|
+
cursor: not-allowed;
|
64
|
+
}
|
65
|
+
|
66
|
+
/* Radius Styles */
|
67
|
+
.w-button-rounded {
|
68
|
+
border-radius: 0.375rem; /* Default rounded */
|
69
|
+
}
|
70
|
+
|
71
|
+
.w-button-pill {
|
72
|
+
border-radius: 9999px; /* Fully rounded */
|
73
|
+
}
|
74
|
+
|
75
|
+
.w-button-square {
|
76
|
+
border-radius: 0; /* No rounding */
|
77
|
+
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
module WildayUi
|
2
|
+
module Components
|
3
|
+
module ButtonHelper
|
4
|
+
def w_button(
|
5
|
+
content,
|
6
|
+
variant: :primary,
|
7
|
+
size: :medium,
|
8
|
+
radius: :rounded,
|
9
|
+
disabled: false,
|
10
|
+
additional_classes: "",
|
11
|
+
**options
|
12
|
+
)
|
13
|
+
content_for(:head) { stylesheet_link_tag "wilday_ui/button", media: "all" }
|
14
|
+
variant_class = {
|
15
|
+
primary: "w-button-primary",
|
16
|
+
secondary: "w-button-secondary",
|
17
|
+
outline: "w-button-outline"
|
18
|
+
}[variant] || "w-button-primary"
|
19
|
+
|
20
|
+
size_class = {
|
21
|
+
small: "w-button-small",
|
22
|
+
medium: "w-button-medium",
|
23
|
+
large: "w-button-large"
|
24
|
+
}[size] || "w-button-medium"
|
25
|
+
|
26
|
+
radius_class = {
|
27
|
+
rounded: "w-button-rounded",
|
28
|
+
pill: "w-button-pill",
|
29
|
+
square: "w-button-square"
|
30
|
+
}[radius] || "w-button-rounded"
|
31
|
+
|
32
|
+
render partial: "wilday_ui/button",
|
33
|
+
locals: {
|
34
|
+
content: content,
|
35
|
+
variant_class: variant_class,
|
36
|
+
size_class: size_class,
|
37
|
+
radius_class: radius_class,
|
38
|
+
additional_classes: additional_classes,
|
39
|
+
disabled: disabled,
|
40
|
+
attributes: options.map { |key, value| "#{key}='#{value}'" }.join(" ")
|
41
|
+
}
|
42
|
+
end
|
43
|
+
end
|
44
|
+
end
|
45
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
import "./components/button";
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title>Wilday ui</title>
|
5
|
+
<%= csrf_meta_tags %>
|
6
|
+
<%= csp_meta_tag %>
|
7
|
+
|
8
|
+
<%= yield :head %>
|
9
|
+
|
10
|
+
<%= stylesheet_link_tag "wilday_ui/application", media: "all" %>
|
11
|
+
</head>
|
12
|
+
<body>
|
13
|
+
|
14
|
+
<%= yield %>
|
15
|
+
|
16
|
+
</body>
|
17
|
+
</html>
|
data/config/routes.rb
ADDED
@@ -0,0 +1,24 @@
|
|
1
|
+
module WildayUi
|
2
|
+
class Engine < ::Rails::Engine
|
3
|
+
isolate_namespace WildayUi
|
4
|
+
|
5
|
+
# Automatically include helpers in views
|
6
|
+
initializer "wilday_ui.helpers" do
|
7
|
+
ActiveSupport.on_load(:action_view) do
|
8
|
+
include WildayUi::ApplicationHelper
|
9
|
+
end
|
10
|
+
end
|
11
|
+
|
12
|
+
# Configure asset paths and automatic precompilation
|
13
|
+
initializer "wilday_ui.assets" do |app|
|
14
|
+
app.config.assets.paths << root.join("app/assets/stylesheets")
|
15
|
+
|
16
|
+
# Automatically precompile all CSS files in wilday_ui directory
|
17
|
+
css_files = Dir[root.join("app/assets/stylesheets/wilday_ui/**/*.css")].map do |file|
|
18
|
+
file.split("app/assets/stylesheets/").last
|
19
|
+
end
|
20
|
+
|
21
|
+
app.config.assets.precompile += css_files
|
22
|
+
end
|
23
|
+
end
|
24
|
+
end
|
data/lib/wilday_ui.rb
ADDED
metadata
ADDED
@@ -0,0 +1,90 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: wilday_ui
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- davidwinalda
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2024-12-09 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: rails
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '7.2'
|
20
|
+
- - ">="
|
21
|
+
- !ruby/object:Gem::Version
|
22
|
+
version: 7.2.1
|
23
|
+
type: :runtime
|
24
|
+
prerelease: false
|
25
|
+
version_requirements: !ruby/object:Gem::Requirement
|
26
|
+
requirements:
|
27
|
+
- - "~>"
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '7.2'
|
30
|
+
- - ">="
|
31
|
+
- !ruby/object:Gem::Version
|
32
|
+
version: 7.2.1
|
33
|
+
description: Reusable UI components for Rails applications
|
34
|
+
email:
|
35
|
+
- davidwinalda94@gmail.com
|
36
|
+
executables: []
|
37
|
+
extensions: []
|
38
|
+
extra_rdoc_files: []
|
39
|
+
files:
|
40
|
+
- MIT-LICENSE
|
41
|
+
- README.md
|
42
|
+
- Rakefile
|
43
|
+
- app/assets/builds/index.css
|
44
|
+
- app/assets/builds/index.js
|
45
|
+
- app/assets/builds/index.js.map
|
46
|
+
- app/assets/config/wilday_ui_manifest.js
|
47
|
+
- app/assets/stylesheets/wilday_ui/application.css
|
48
|
+
- app/assets/stylesheets/wilday_ui/button.css
|
49
|
+
- app/controllers/wilday_ui/application_controller.rb
|
50
|
+
- app/helpers/wilday_ui/application_helper.rb
|
51
|
+
- app/helpers/wilday_ui/components/button_helper.rb
|
52
|
+
- app/javascript/wilday_ui/components/button.js
|
53
|
+
- app/javascript/wilday_ui/index.js
|
54
|
+
- app/jobs/wilday_ui/application_job.rb
|
55
|
+
- app/mailers/wilday_ui/application_mailer.rb
|
56
|
+
- app/models/wilday_ui/application_record.rb
|
57
|
+
- app/views/layouts/wilday_ui/application.html.erb
|
58
|
+
- app/views/wilday_ui/_button.html.erb
|
59
|
+
- config/routes.rb
|
60
|
+
- lib/tasks/wilday_ui_tasks.rake
|
61
|
+
- lib/wilday_ui.rb
|
62
|
+
- lib/wilday_ui/engine.rb
|
63
|
+
- lib/wilday_ui/version.rb
|
64
|
+
homepage: https://github.com/davidwinalda/wildayui
|
65
|
+
licenses:
|
66
|
+
- MIT
|
67
|
+
metadata:
|
68
|
+
homepage_uri: https://github.com/davidwinalda/wildayui
|
69
|
+
source_code_uri: https://github.com/davidwinalda/wildayui
|
70
|
+
changelog_uri: https://github.com/davidwinalda/wildayui/blob/main/CHANGELOG.md
|
71
|
+
post_install_message:
|
72
|
+
rdoc_options: []
|
73
|
+
require_paths:
|
74
|
+
- lib
|
75
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
76
|
+
requirements:
|
77
|
+
- - ">="
|
78
|
+
- !ruby/object:Gem::Version
|
79
|
+
version: '3.2'
|
80
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
81
|
+
requirements:
|
82
|
+
- - ">="
|
83
|
+
- !ruby/object:Gem::Version
|
84
|
+
version: '0'
|
85
|
+
requirements: []
|
86
|
+
rubygems_version: 3.5.11
|
87
|
+
signing_key:
|
88
|
+
specification_version: 4
|
89
|
+
summary: A minimal UI component library for Rails applications
|
90
|
+
test_files: []
|