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 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,8 @@
1
+ require "bundler/setup"
2
+
3
+ APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
4
+ load "rails/tasks/engine.rake"
5
+
6
+ load "rails/tasks/statistics.rake"
7
+
8
+ require "bundler/gem_tasks"
@@ -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,4 @@
1
+ module WildayUi
2
+ class ApplicationController < ActionController::Base
3
+ end
4
+ end
@@ -0,0 +1,5 @@
1
+ module WildayUi
2
+ module ApplicationHelper
3
+ include WildayUi::Components::ButtonHelper
4
+ end
5
+ end
@@ -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,9 @@
1
+ document.addEventListener("DOMContentLoaded", () => {
2
+ document.querySelectorAll(".w-button").forEach((button) => {
3
+ button.addEventListener("click", (event) => {
4
+ if (button.disabled) {
5
+ event.preventDefault();
6
+ }
7
+ });
8
+ });
9
+ });
@@ -0,0 +1 @@
1
+ import "./components/button";
@@ -0,0 +1,4 @@
1
+ module WildayUi
2
+ class ApplicationJob < ActiveJob::Base
3
+ end
4
+ end
@@ -0,0 +1,6 @@
1
+ module WildayUi
2
+ class ApplicationMailer < ActionMailer::Base
3
+ default from: "from@example.com"
4
+ layout "mailer"
5
+ end
6
+ end
@@ -0,0 +1,5 @@
1
+ module WildayUi
2
+ class ApplicationRecord < ActiveRecord::Base
3
+ self.abstract_class = true
4
+ end
5
+ end
@@ -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>
@@ -0,0 +1,7 @@
1
+ <button
2
+ class="w-button <%= variant_class %> <%= size_class %> <%= radius_class %> <%= additional_classes %>"
3
+ <%= attributes %>
4
+ <%= "disabled" if disabled %>
5
+ >
6
+ <%= content %>
7
+ </button>
data/config/routes.rb ADDED
@@ -0,0 +1,2 @@
1
+ WildayUi::Engine.routes.draw do
2
+ end
@@ -0,0 +1,4 @@
1
+ # desc "Explaining what the task does"
2
+ # task :wilday_ui do
3
+ # # Task goes here
4
+ # end
@@ -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
@@ -0,0 +1,3 @@
1
+ module WildayUi
2
+ VERSION = "0.1.0"
3
+ end
data/lib/wilday_ui.rb ADDED
@@ -0,0 +1,6 @@
1
+ require "wilday_ui/version"
2
+ require "wilday_ui/engine"
3
+
4
+ module WildayUi
5
+ # Your code goes here...
6
+ end
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: []