wilday_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: d9a81a71dc979b91c1437051a2924dc22d1c9ef0cc0923f6606d409b76b6e790
+  data.tar.gz: ae05eaf824740f4b843b13f606a91ac49948eb9c3d68703fc5fb2cee3f0045fe
+SHA512:
+  metadata.gz: 7e09f450b47502c3b8e479c8df576b0226ed14bcb5e8d8534b36b9b55862326c7822d30438ccd5a690c439ae835730f580bb58577362a261241b8847f392769e
+  data.tar.gz: 8087d892f850e81b23da8f3e0a1adb143fc65d63c265f1a3154972ec6baeb02885ab406d855f0f442d5e7cb362faea6f04aa1e56499664456b88cab5adef8656

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright davidwinalda
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,103 @@
+# Wilday UI
+
+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.
+
+---
+
+## Features
+
+- Prebuilt, customizable button component
+- Flexible variants, sizes, and border radii
+- Easy integration with Rails as an engine
+
+---
+
+## Why These Features Are Important
+
+1. **Flexibility**: Users can style component without being restricted to predefined classes.
+2. **Extensibility**: Users can add attributes or integrate component with JavaScript, analytics, or accessibility tools.
+3. **Framework Integration**: Supports utility classes from frameworks like Bootstrap or Tailwind.
+
+## Installation
+
+Add Wilday UI to your application's Gemfile:
+
+```ruby
+gem "wilday_ui"
+```
+
+Then execute:
+
+```bash
+bundle install
+```
+
+Or install it directly:
+
+```bash
+gem install wilday_ui
+```
+
+---
+
+## Usage
+
+### Button Component
+
+Render a button in your Rails views using the `w_button` helper:
+
+```erb
+<%= w_button "Click Me", variant: :primary %>
+```
+
+### Customization Options
+
+| Option                   | Description                                           | Example                                  |
+| ------------------------ | ----------------------------------------------------- | ---------------------------------------- |
+| **`variant`**            | Button style (`:primary`, `:secondary`, `:outline`)   | `variant: :primary`                      |
+| **`size`**               | Button size (`:small`, `:medium`, `:large`)           | `size: :large`                           |
+| **`radius`**             | Button shape (`:rounded`, `:pill`, `:square`)         | `radius: :pill`                          |
+| **`additional_classes`** | Add custom CSS classes                                | `additional_classes: "shadow-md"`        |
+| **`**options`\*\*        | Add custom HTML attributes (e.g., `data-*`, `aria-*`) | `data: { tracking: "click" }, id: "btn"` |
+
+---
+
+### Examples
+
+#### Basic Button
+
+```erb
+<%= w_button "Submit", variant: :primary %>
+```
+
+#### Custom Size and Shape
+
+```erb
+<%= w_button "Save", size: :large, radius: :pill %>
+```
+
+#### Fully Customized Button
+
+```erb
+<%= w_button "Custom",
+    variant: :outline,
+    additional_classes: "text-center shadow-lg",
+    data: { action: "click->controller#action" },
+    aria: { label: "Custom Button" } %>
+```
+
+---
+
+## Contributing
+
+Contributions are welcome! If you’d like to help improve Wilday UI, feel free to open an issue or submit a pull request.
+
+---
+
+## License
+
+Wilday UI is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+---
+
+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

@@ -0,0 +1,8 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/assets/builds/index.css

@@ -0,0 +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}

data/app/assets/builds/index.js

@@ -0,0 +1,13 @@
+(() => {
+  // app/javascript/wilday_ui/components/button.js
+  document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll(".w-button").forEach((button) => {
+      button.addEventListener("click", (event) => {
+        if (button.disabled) {
+          event.preventDefault();
+        }
+      });
+    });
+  });
+})();
+//# sourceMappingURL=index.js.map

data/app/assets/builds/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../javascript/wilday_ui/components/button.js"],
+  "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"],
+  "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;",
+  "names": []
+}

data/app/assets/config/wilday_ui_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/wilday_ui .css

data/app/assets/stylesheets/wilday_ui/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/wilday_ui/button.css

@@ -0,0 +1,77 @@
+.w-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+/* Variants */
+.w-button-primary {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+}
+
+.w-button-primary:hover {
+  background-color: #0056b3;
+}
+
+.w-button-secondary {
+  background-color: #6c757d;
+  color: #fff;
+  border: none;
+}
+
+.w-button-secondary:hover {
+  background-color: #5a6268;
+}
+
+.w-button-outline {
+  background-color: transparent;
+  color: #007bff;
+  border: 1px solid #007bff;
+}
+
+.w-button-outline:hover {
+  background-color: #e7f1ff;
+}
+
+/* Sizes */
+.w-button-small {
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.w-button-medium {
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+}
+
+.w-button-large {
+  font-size: 1.25rem;
+  padding: 0.75rem 1.5rem;
+}
+
+/* Disabled */
+.w-button:disabled {
+  background-color: #e0e0e0;
+  color: #6c757d;
+  cursor: not-allowed;
+}
+
+/* Radius Styles */
+.w-button-rounded {
+  border-radius: 0.375rem; /* Default rounded */
+}
+
+.w-button-pill {
+  border-radius: 9999px; /* Fully rounded */
+}
+
+.w-button-square {
+  border-radius: 0; /* No rounding */
+}

data/app/controllers/wilday_ui/application_controller.rb

@@ -0,0 +1,4 @@
+module WildayUi
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/helpers/wilday_ui/application_helper.rb

@@ -0,0 +1,5 @@
+module WildayUi
+  module ApplicationHelper
+    include WildayUi::Components::ButtonHelper
+  end
+end

data/app/helpers/wilday_ui/components/button_helper.rb

@@ -0,0 +1,45 @@
+module WildayUi
+  module Components
+    module ButtonHelper
+      def w_button(
+        content,
+        variant: :primary,
+        size: :medium,
+        radius: :rounded,
+        disabled: false,
+        additional_classes: "",
+        **options
+      )
+        content_for(:head) { stylesheet_link_tag "wilday_ui/button", media: "all" }
+        variant_class = {
+          primary: "w-button-primary",
+          secondary: "w-button-secondary",
+          outline: "w-button-outline"
+        }[variant] || "w-button-primary"
+
+        size_class = {
+          small: "w-button-small",
+          medium: "w-button-medium",
+          large: "w-button-large"
+        }[size] || "w-button-medium"
+
+        radius_class = {
+          rounded: "w-button-rounded",
+          pill: "w-button-pill",
+          square: "w-button-square"
+        }[radius] || "w-button-rounded"
+
+        render partial: "wilday_ui/button",
+          locals: {
+            content: content,
+            variant_class: variant_class,
+            size_class: size_class,
+            radius_class: radius_class,
+            additional_classes: additional_classes,
+            disabled: disabled,
+            attributes: options.map { |key, value| "#{key}='#{value}'" }.join(" ")
+          }
+      end
+    end
+  end
+end

data/app/javascript/wilday_ui/components/button.js

@@ -0,0 +1,9 @@
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".w-button").forEach((button) => {
+    button.addEventListener("click", (event) => {
+      if (button.disabled) {
+        event.preventDefault();
+      }
+    });
+  });
+});

data/app/javascript/wilday_ui/index.js

@@ -0,0 +1 @@
+import "./components/button";

data/app/jobs/wilday_ui/application_job.rb

@@ -0,0 +1,4 @@
+module WildayUi
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/wilday_ui/application_mailer.rb

@@ -0,0 +1,6 @@
+module WildayUi
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/wilday_ui/application_record.rb

@@ -0,0 +1,5 @@
+module WildayUi
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/layouts/wilday_ui/application.html.erb

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Wilday ui</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <%= stylesheet_link_tag    "wilday_ui/application", media: "all" %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/app/views/wilday_ui/_button.html.erb

@@ -0,0 +1,7 @@
+<button
+    class="w-button <%= variant_class %> <%= size_class %> <%= radius_class %> <%= additional_classes %>"
+    <%= attributes %>
+    <%= "disabled" if disabled %>
+>
+    <%= content %>
+</button>

data/config/routes.rb

@@ -0,0 +1,2 @@
+WildayUi::Engine.routes.draw do
+end

data/lib/tasks/wilday_ui_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :wilday_ui do
+#   # Task goes here
+# end

data/lib/wilday_ui/engine.rb

@@ -0,0 +1,24 @@
+module WildayUi
+  class Engine < ::Rails::Engine
+    isolate_namespace WildayUi
+
+    # Automatically include helpers in views
+    initializer "wilday_ui.helpers" do
+      ActiveSupport.on_load(:action_view) do
+        include WildayUi::ApplicationHelper
+      end
+    end
+
+    # Configure asset paths and automatic precompilation
+    initializer "wilday_ui.assets" do |app|
+      app.config.assets.paths << root.join("app/assets/stylesheets")
+
+      # Automatically precompile all CSS files in wilday_ui directory
+      css_files = Dir[root.join("app/assets/stylesheets/wilday_ui/**/*.css")].map do |file|
+        file.split("app/assets/stylesheets/").last
+      end
+
+      app.config.assets.precompile += css_files
+    end
+  end
+end

data/lib/wilday_ui/version.rb

@@ -0,0 +1,3 @@
+module WildayUi
+  VERSION = "0.1.0"
+end

data/lib/wilday_ui.rb

@@ -0,0 +1,6 @@
+require "wilday_ui/version"
+require "wilday_ui/engine"
+
+module WildayUi
+  # Your code goes here...
+end

metadata

@@ -0,0 +1,90 @@
+--- !ruby/object:Gem::Specification
+name: wilday_ui
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- davidwinalda
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2024-12-09 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '7.2'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.2.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '7.2'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.2.1
+description: Reusable UI components for Rails applications
+email:
+- davidwinalda94@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/builds/index.css
+- app/assets/builds/index.js
+- app/assets/builds/index.js.map
+- app/assets/config/wilday_ui_manifest.js
+- app/assets/stylesheets/wilday_ui/application.css
+- app/assets/stylesheets/wilday_ui/button.css
+- app/controllers/wilday_ui/application_controller.rb
+- app/helpers/wilday_ui/application_helper.rb
+- app/helpers/wilday_ui/components/button_helper.rb
+- app/javascript/wilday_ui/components/button.js
+- app/javascript/wilday_ui/index.js
+- app/jobs/wilday_ui/application_job.rb
+- app/mailers/wilday_ui/application_mailer.rb
+- app/models/wilday_ui/application_record.rb
+- app/views/layouts/wilday_ui/application.html.erb
+- app/views/wilday_ui/_button.html.erb
+- config/routes.rb
+- lib/tasks/wilday_ui_tasks.rake
+- lib/wilday_ui.rb
+- lib/wilday_ui/engine.rb
+- lib/wilday_ui/version.rb
+homepage: https://github.com/davidwinalda/wildayui
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/davidwinalda/wildayui
+  source_code_uri: https://github.com/davidwinalda/wildayui
+  changelog_uri: https://github.com/davidwinalda/wildayui/blob/main/CHANGELOG.md
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.2'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.11
+signing_key:
+specification_version: 4
+summary: A minimal UI component library for Rails applications
+test_files: []