wilday_ui 0.2.3 → 0.4.0

data/app/javascript/wilday_ui/controllers/dropdown_controller.js

@@ -0,0 +1,270 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["button", "menu", "submenu"];
+  static values = {
+    trigger: { type: String, default: "click" },
+    position: { type: String, default: "bottom" },
+    align: { type: String, default: "start" },
+  };
+
+  connect() {
+    const position = this.element.dataset.dropdownPositionValue;
+    const align = this.element.dataset.dropdownAlignValue;
+
+    if (position) this.positionValue = position;
+    if (align) this.alignValue = align;
+
+    // Set up hover events if trigger is hover
+    if (this.triggerValue === "hover") {
+      this.element.addEventListener("mouseenter", () => {
+        console.log("Mouse enter - showing menu");
+        this.handleHover(true);
+      });
+
+      this.element.addEventListener("mouseleave", () => {
+        console.log("Mouse leave - hiding menu");
+        this.handleHover(false);
+      });
+    }
+
+    // Set up keyboard navigation
+    this.element.addEventListener("keydown", this.handleKeydown.bind(this));
+
+    // Close on click outside
+    document.addEventListener("click", this.handleClickOutside.bind(this));
+
+    // Set up parent dropdown items to handle submenus
+    this.setupSubmenus();
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.handleClickOutside.bind(this));
+  }
+
+  handleHover(show) {
+    if (show) {
+      this.menuTarget.classList.add("show");
+      this.buttonTarget.classList.add("active");
+      this.buttonTarget.setAttribute("aria-expanded", "true");
+    } else {
+      this.menuTarget.classList.remove("show");
+      this.buttonTarget.classList.remove("active");
+      this.buttonTarget.setAttribute("aria-expanded", "false");
+    }
+  }
+
+  toggle(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.isOpen) {
+      this.menuTarget.classList.remove("show");
+    } else {
+      this.menuTarget.classList.add("show");
+    }
+  }
+
+  show() {
+    const menuElement = this.element.querySelector(".w-button-dropdown-menu");
+    const buttonElement = this.element.querySelector(
+      "[data-dropdown-target='button']"
+    );
+
+    this.updatePosition();
+    menuElement.classList.add("show");
+    buttonElement.classList.add("active");
+    buttonElement.setAttribute("aria-expanded", "true");
+
+    // Apply position and alignment
+    menuElement.dataset.position = this.positionValue || "bottom";
+    menuElement.dataset.align = this.alignValue || "start";
+
+    // Focus first menu item
+    const firstItem = menuElement.querySelector(".w-button-dropdown-item");
+    if (firstItem) firstItem.focus();
+  }
+
+  hide() {
+    const menuElement = this.element.querySelector(".w-button-dropdown-menu");
+    const buttonElement = this.element.querySelector(
+      "[data-dropdown-target='button']"
+    );
+
+    menuElement.classList.remove("show");
+    buttonElement.classList.remove("active");
+    buttonElement.setAttribute("aria-expanded", "false");
+  }
+
+  handleClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      console.log("Click outside detected. Closing all dropdowns.");
+      this.closeAllSubmenus();
+      this.hide(); // Close the main dropdown
+    }
+  }
+
+  handleKeydown(event) {
+    if (!this.isOpen && event.key === "Enter") {
+      this.show();
+      return;
+    }
+
+    if (this.isOpen) {
+      switch (event.key) {
+        case "Escape":
+          this.hide();
+          this.buttonTarget.focus();
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          this.focusNextItem();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          this.focusPreviousItem();
+          break;
+        case "ArrowRight":
+          this.openSubmenu(event.target);
+          break;
+        case "ArrowLeft":
+          this.closeSubmenu(event.target);
+          break;
+        case "Tab":
+          this.hide();
+          break;
+      }
+    }
+  }
+
+  setupSubmenus() {
+    this.element
+      .querySelectorAll(".w-button-dropdown-parent")
+      .forEach((parent) => {
+        const submenu = parent.querySelector(".w-button-dropdown-menu");
+        const arrow = parent.querySelector(".w-button-dropdown-arrow");
+
+        if (!submenu) {
+          return;
+        }
+
+        // Determine the trigger (hover or click)
+        const trigger =
+          parent.closest(".w-button-wrapper")?.dataset.dropdownTriggerValue ||
+          "click";
+
+        if (trigger === "hover") {
+          parent.addEventListener("mouseenter", () => {
+            this.showSubmenu(submenu, arrow);
+          });
+          parent.addEventListener("mouseleave", () => {
+            this.hideSubmenu(submenu, arrow);
+          });
+        } else if (trigger === "click") {
+          parent.addEventListener("click", (event) => {
+            event.stopPropagation(); // Prevent closing parent dropdown
+            this.toggleSubmenu(submenu, arrow);
+          });
+
+          // Close the submenu when clicking outside
+          document.addEventListener("click", (event) => {
+            if (!parent.contains(event.target)) {
+              this.hideSubmenu(submenu, arrow);
+            }
+          });
+        }
+      });
+  }
+
+  toggleSubmenu(submenu, arrow) {
+    if (submenu.classList.contains("show")) {
+      this.hideSubmenu(submenu, arrow);
+    } else {
+      this.showSubmenu(submenu, arrow);
+    }
+  }
+
+  showSubmenu(submenu, arrow) {
+    submenu.classList.add("show");
+    submenu.setAttribute("aria-expanded", "true");
+
+    // Rotate arrow if present
+    if (arrow) {
+      arrow.classList.add("active");
+    }
+  }
+
+  hideSubmenu(submenu, arrow) {
+    submenu.classList.remove("show");
+    submenu.setAttribute("aria-expanded", "false");
+
+    // Reset arrow rotation if present
+    if (arrow) {
+      arrow.classList.remove("active");
+    }
+  }
+
+  isParentOpen(parent) {
+    const parentMenu = parent.closest(".w-button-dropdown-menu");
+    return parentMenu && parentMenu.classList.contains("show");
+  }
+
+  closeAllSubmenus() {
+    this.element
+      .querySelectorAll(".w-button-dropdown-menu.show")
+      .forEach((menu) => {
+        menu.classList.remove("show");
+        menu.setAttribute("aria-expanded", "false");
+      });
+  }
+
+  openSubmenu(parentItem) {
+    const submenu = parentItem.querySelector(".w-button-dropdown-menu");
+    if (submenu) {
+      this.showSubmenu(submenu);
+      submenu.querySelector(".w-button-dropdown-item").focus();
+    }
+  }
+
+  closeSubmenu(parentItem) {
+    const submenu = parentItem.closest(".w-button-dropdown-menu");
+    if (submenu) {
+      this.hideSubmenu(submenu);
+      parentItem.closest(".w-button-dropdown-parent").focus();
+    }
+  }
+
+  focusNextItem() {
+    const items = this.getMenuItems();
+    const currentIndex = items.indexOf(document.activeElement);
+    const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;
+    items[nextIndex].focus();
+  }
+
+  focusPreviousItem() {
+    const items = this.getMenuItems();
+    const currentIndex = items.indexOf(document.activeElement);
+    const previousIndex =
+      currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+    items[previousIndex].focus();
+  }
+
+  getMenuItems() {
+    return Array.from(
+      this.menuTarget.querySelectorAll(".w-button-dropdown-item")
+    );
+  }
+
+  updatePosition() {
+    const menuElement = this.element.querySelector(".w-button-dropdown-menu");
+    const position = this.hasPositionValue ? this.positionValue : "bottom";
+    const align = this.hasAlignValue ? this.alignValue : "start";
+
+    menuElement.setAttribute("data-position", position);
+    menuElement.setAttribute("data-align", align);
+  }
+
+  get isOpen() {
+    return this.menuTarget.classList.contains("show");
+  }
+}

data/app/javascript/wilday_ui/controllers/index.js

@@ -0,0 +1,17 @@
+import { Application } from "@hotwired/stimulus";
+import ButtonController from "./button_controller";
+import DropdownController from "./dropdown_controller";
+
+// Initialize Stimulus
+const application = Application.start();
+window.Stimulus = application;
+
+// Register the button controller
+application.register("button", ButtonController);
+application.register("dropdown", DropdownController);
+// Debug check to ensure Stimulus is loaded
+// if (window.Stimulus) {
+//   console.log("✅ Stimulus is loaded and initialized.");
+// } else {
+//   console.error("❌ Stimulus failed to load.");
+// }

data/app/javascript/wilday_ui/index.js

@@ -1 +1,4 @@
+import "./controllers";
 import "./components/button";
+
+// console.log("JavaScript loaded");

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

@@ -8,6 +8,7 @@
   <%= yield :head %>
 
   <%= stylesheet_link_tag    "wilday_ui/application", media: "all" %>
+  <%= javascript_include_tag "wilday_ui/index", "data-turbo-track": "reload", type: "module" %>
 </head>
 <body>
 

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

@@ -1,13 +1,38 @@
-<button
-    class="w-button <%= variant_class %> <%= size_class %> <%= radius_class %> <%= additional_classes %>"
-    <%= attributes %>
-    <%= "disabled" if disabled %>
->
-    <% if icon_position == :left && icon.present? %>
-        <i class="w-button-icon-left <%= icon %>"></i>
+<%
+# Prepare base HTML options
+html_options = {
+  class: ["w-button", variant_class, size_class, radius_class, additional_classes, ("w-button-loading" if loading)].compact.join(" "),
+  disabled: disabled || loading,
+  "aria-busy": loading,
+  "aria-disabled": disabled || loading,
+  "aria-expanded": dropdown ? "false" : nil,
+  "aria-haspopup": dropdown ? "true" : nil
+}
+
+# Only add Stimulus data attributes if they're in the passed options
+if local_assigns[:html_options]&.dig(:data, :controller)
+  html_options[:data] = (local_assigns[:html_options][:data] || {})
+end
+
+# Merge any remaining options
+html_options.merge!(local_assigns[:html_options] || {})
+
+tag_type = href.present? ? :a : :button
+
+# Conditionally render wrapper for dropdowns or advanced features
+if local_assigns[:wrapper_options].present?
+%>
+  <div <%= tag.attributes(wrapper_options) %>>
+    <%= content_tag tag_type, html_options do %>
+      <%= render partial: "wilday_ui/button/content", locals: local_assigns %>
     <% end %>
-    <%= content %>
-    <% if icon_position == :right && icon.present? %>
-        <i class="w-button-icon-right <%= icon %>"></i>
+
+    <% if dropdown && dropdown_items %>
+      <%= render partial: "wilday_ui/button/dropdown_menu", locals: { items: dropdown_items, dropdown: dropdown } %>
     <% end %>
-</button>
+  </div>
+<% else %>
+  <%= content_tag tag_type, html_options do %>
+    <%= render partial: "wilday_ui/button/content", locals: local_assigns %>
+  <% end %>
+<% end %>

data/app/views/wilday_ui/button/_content.html.erb

@@ -0,0 +1,22 @@
+<% if loading %>
+  <span class="w-button-spinner"></span>
+  <%= loading_text %>
+<% else %>
+  <% if icon_position == :left && icon.present? %>
+    <i class="w-button-icon-left <%= icon %>"></i>
+  <% end %>
+  
+  <%= content %>
+
+  <% if dropdown %>
+    <% if dropdown_icon.present? %>
+      <i class="w-button-dropdown-arrow <%= dropdown_icon %>"></i>
+    <% else %>
+      <span class="w-button-dropdown-arrow"></span>
+    <% end %>
+  <% end %>
+  
+  <% if icon_position == :right && icon.present? %>
+    <i class="w-button-icon-right <%= icon %>"></i>
+  <% end %>
+<% end %>

data/app/views/wilday_ui/button/_dropdown_menu.html.erb

@@ -0,0 +1,26 @@
+<% if items.present? %>
+  <div class="w-button-dropdown-menu" data-dropdown-target="menu" role="menu">
+    <% items.each do |item| %>
+      <% if item[:divider] %>
+        <div class="w-button-dropdown-divider" role="separator"></div>
+      <% elsif item[:children].present? %>
+        <div class="w-button-dropdown-item w-button-dropdown-parent" role="menuitem">
+          <%= item[:text] %>
+          <span class="w-button-dropdown-arrow"></span>
+          <%= render partial: "wilday_ui/button/dropdown_menu", 
+                     locals: { 
+                       items: item[:children],
+                       parent_id: item[:id]
+                     } %>
+        </div>
+      <% else %>
+        <%= link_to item[:text], 
+            item[:href], 
+            class: "w-button-dropdown-item",
+            role: "menuitem",
+            tabindex: "-1" 
+        %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/lib/wilday_ui/engine.rb

@@ -19,16 +19,66 @@ module WildayUi
       end
     end
 
+    # # Configure asset paths and automatic precompilation
+    # initializer "wilday_ui.assets" do |app|
+    #   app.config.assets.paths << root.join("app/assets/stylesheets")
+    #   app.config.assets.paths << root.join("app/javascript")
+    #   app.config.assets.paths << root.join("app/assets/builds")
+
+    #   Rails.logger.info "[Wilday UI] Asset paths added: #{app.config.assets.paths}"
+
+    #   # 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
+
+    #   # Precompile only the bundled JavaScript file
+    #   app.config.assets.precompile += css_files
+    #   app.config.assets.precompile += %w[wilday_ui/index.js]
+
+    #   Rails.logger.info "[Wilday UI] CSS files precompiled: #{css_files}"
+    #   Rails.logger.info "[Wilday UI] JS files precompiled: wilday_ui/index.js"
+    # end
+
     # Configure asset paths and automatic precompilation
     initializer "wilday_ui.assets" do |app|
-      app.config.assets.paths << root.join("app/assets/stylesheets")
+      # Add engine asset paths
+      engine_asset_paths = [
+        root.join("app/assets/stylesheets"),
+        root.join("app/javascript"),
+        root.join("app/assets/builds")
+      ]
+
+      # Add dummy app assets path in development
+      if Rails.env.development?
+        engine_asset_paths << root.join("test/dummy/app/assets/builds")
+
+        # Create symlink for dummy app assets if it doesn't exist
+        dummy_builds_path = root.join("test/dummy/app/assets/builds/wilday_ui")
+        engine_builds_path = root.join("app/assets/builds/wilday_ui")
+
+        unless File.exist?(dummy_builds_path)
+          FileUtils.mkdir_p(dummy_builds_path.parent)
+          FileUtils.ln_sf(engine_builds_path, dummy_builds_path)
+          Rails.logger.info "[Wilday UI] Created symlink for dummy app assets"
+        end
+      end
+
+      # Add all asset paths to Rails
+      engine_asset_paths.each { |path| app.config.assets.paths << path }
+      Rails.logger.info "[Wilday UI] Asset paths added: #{app.config.assets.paths}"
 
       # 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
 
+      # Precompile only the bundled JavaScript file
       app.config.assets.precompile += css_files
+      app.config.assets.precompile += %w[wilday_ui/index.js]
+
+      Rails.logger.info "[Wilday UI] CSS files precompiled: #{css_files}"
+      Rails.logger.info "[Wilday UI] JS files precompiled: wilday_ui/index.js"
     end
   end
 end

data/lib/wilday_ui/version.rb

@@ -1,3 +1,3 @@
 module WildayUi
-  VERSION = "0.2.3"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: wilday_ui
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.4.0
 platform: ruby
 authors:
 - davidwinalda
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-12-10 00:00:00.000000000 Z
+date: 2024-12-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -39,9 +39,8 @@ extra_rdoc_files: []
 files:
 - README.md
 - Rakefile
-- app/assets/builds/index.css
-- app/assets/builds/index.js
-- app/assets/builds/index.js.map
+- app/assets/builds/wilday_ui/index.js
+- app/assets/builds/wilday_ui/index.js.map
 - app/assets/config/wilday_ui_manifest.js
 - app/assets/stylesheets/wilday_ui/application.css
 - app/assets/stylesheets/wilday_ui/button.css
@@ -49,12 +48,17 @@ files:
 - 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/controllers/button_controller.js
+- app/javascript/wilday_ui/controllers/dropdown_controller.js
+- app/javascript/wilday_ui/controllers/index.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
+- app/views/wilday_ui/button/_content.html.erb
+- app/views/wilday_ui/button/_dropdown_menu.html.erb
 - config/routes.rb
 - lib/tasks/wilday_ui_tasks.rake
 - lib/wilday_ui.rb

data/app/assets/builds/index.css

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

@@ -1,13 +0,0 @@
-(() => {
-  // 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

@@ -1,7 +0,0 @@
-{
-  "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": []
-}