wilday_ui 0.2.3 → 0.4.0

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

@@ -90,3 +90,281 @@
   display: inline-flex;
   align-items: center;
 }
+
+/* Loading ButtonSpinner */
+.w-button-spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid transparent;
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: w-button-spin 0.6s linear infinite;
+}
+
+@keyframes w-button-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Loading Button State */
+.w-button.w-button-loading {
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+.w-button.w-button-loading .w-button-spinner {
+  display: inline-block;
+}
+
+.w-button.w-button-loading > *:not(.w-button-spinner) {
+  display: none;
+}
+
+/* Dropdown Wrapper */
+.w-button-wrapper {
+  position: relative !important;
+  display: inline-block !important;
+  padding: 0;
+  margin: 0;
+  overflow: visible !important;
+}
+
+/* Dropdown Button */
+.w-button-dropdown {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+/* Dropdown Arrow */
+.w-button-dropdown-arrow {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.5rem;
+  transition: transform 0.2s ease;
+}
+
+.w-button-dropdown-arrow:not(i) {
+  width: 0.5em;
+  height: 0.5em;
+  border: 0.15em solid currentColor;
+  border-top: 0;
+  border-left: 0;
+  transform: translateY(-25%) rotate(45deg);
+}
+
+/* Arrow Active State */
+.w-button.active .w-button-dropdown-arrow:not(i) {
+  transform: translateY(25%) rotate(225deg);
+}
+
+.w-button.active .w-button-dropdown-arrow i {
+  transform: rotate(180deg);
+}
+
+/* Reset Arrow State */
+.w-button-dropdown-arrow i:not(.active) {
+  transform: rotate(0);
+}
+
+/* Dropdown Menu */
+.w-button-dropdown-menu {
+  position: absolute;
+  display: none;
+  width: max-content;
+  min-width: 100%;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 1000;
+  overflow: visible;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.w-button-dropdown-menu.show {
+  display: block;
+  animation: fadeIn 0.2s ease-in-out;
+}
+
+/* Dropdown Items */
+.w-button-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  font-size: inherit;
+  line-height: inherit;
+  text-align: left;
+  white-space: nowrap;
+  background-color: transparent;
+  color: #374151;
+  text-decoration: none;
+  transition: all 0.15s ease-in-out;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.w-button-dropdown-item:hover,
+.w-button-dropdown-item:focus {
+  background-color: #f3f4f6;
+  color: #111827;
+  outline: none;
+}
+
+/* Dropdown Divider */
+.w-button-dropdown-divider {
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid #e9ecef;
+}
+
+/* Animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translate(var(--translate-x, 0), var(--translate-y, 0));
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+/* Position Variations */
+.w-button-dropdown-menu[data-position="top"] {
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 0.125rem;
+  --translate-y: -10px;
+}
+
+.w-button-dropdown-menu[data-position="bottom"] {
+  top: 100%;
+  left: 0;
+  margin-top: 0.125rem;
+  --translate-y: 10px;
+}
+
+.w-button-dropdown-menu[data-position="right"] {
+  left: 100%;
+  margin-left: 0.125rem;
+  top: 0;
+  --translate-x: 10px;
+}
+
+.w-button-dropdown-menu[data-position="left"] {
+  right: 100%;
+  margin-right: 0.125rem;
+  left: auto;
+  top: 0;
+  --translate-x: -10px;
+}
+
+.w-button-dropdown-menu[data-position="top"][data-align="start"],
+.w-button-dropdown-menu[data-position="bottom"][data-align="start"] {
+  left: 0 !important;
+  right: auto !important;
+}
+
+.w-button-dropdown-menu[data-position="top"][data-align="end"],
+.w-button-dropdown-menu[data-position="bottom"][data-align="end"] {
+  left: auto !important;
+  right: 0 !important;
+}
+
+.w-button-dropdown-menu[data-position="top"][data-align="center"],
+.w-button-dropdown-menu[data-position="bottom"][data-align="center"] {
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+}
+
+.w-button-dropdown-menu[data-position="top"][data-align="center"].show,
+.w-button-dropdown-menu[data-position="bottom"][data-align="center"].show {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Submenu */
+.w-button-dropdown-parent {
+  position: relative;
+  cursor: pointer;
+}
+
+.w-button-dropdown-parent .w-button-dropdown-menu {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  z-index: 1100;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(-10px);
+  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+  min-width: 10rem;
+  background-color: white;
+  padding: 0.5rem 0;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.w-button-dropdown-parent .w-button-dropdown-menu.show {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+
+.w-button-dropdown-parent .w-button-dropdown-menu[data-position="left"] {
+  left: auto;
+  right: 100%;
+}
+
+/* Nested Submenu Styling */
+.w-button-dropdown-menu .w-button-dropdown-parent .w-button-dropdown-menu {
+  top: 0;
+  left: 100%;
+  z-index: 1200;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(-10px);
+  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+}
+
+.w-button-dropdown-menu .w-button-dropdown-parent .w-button-dropdown-menu.show {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+  pointer-events: auto;
+}
+
+/* Arrow State for Submenus */
+.w-button-dropdown-parent .w-button-dropdown-arrow:not(i).active {
+  transform: translateY(25%) rotate(225deg);
+}
+
+.w-button-dropdown-arrow i.active {
+  transform: rotate(180deg);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .w-button-dropdown-menu[data-position="right"],
+  .w-button-dropdown-menu[data-position="left"] {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    margin-top: 0.5rem;
+    margin-left: 0;
+    margin-right: 0;
+    --translate-x: 0;
+    --translate-y: 10px;
+  }
+}

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

@@ -1,6 +1,25 @@
 module WildayUi
   module Components
     module ButtonHelper
+      BUTTON_FEATURES = {
+        dropdown: {
+          wrapper_required: true,
+          stimulus_controller: "dropdown",
+          default_stimulus_action: "click->dropdown#toggle"
+        },
+        loading: {
+          wrapper_required: false,
+          stimulus_controller: "button",
+          default_stimulus_action: "click->button#toggleLoading"
+        }
+        # Add more features here as needed
+        # tooltip: {
+        #   wrapper_required: true,
+        #   stimulus_controller: "tooltip",
+        #   default_stimulus_action: "mouseenter->tooltip#show mouseleave->tooltip#hide"
+        # }
+      }.freeze
+
       def w_button(
         content,
         variant: :primary,
@@ -8,29 +27,229 @@ module WildayUi
         radius: :rounded,
         icon: nil,
         icon_position: :left,
+        loading: false,
+        loading_text: nil,
         disabled: false,
         additional_classes: "",
+        use_default_controller: true,
+        href: nil,
+        method: :get,
+        target: nil,
+        dropdown: false,
+        dropdown_items: nil,
+        dropdown_icon: nil,
         **options
       )
         content_for(:head) { stylesheet_link_tag "wilday_ui/button", media: "all" }
-        variant_class = {
+
+        options[:data] ||= {}
+        wrapper_data = {}
+        wrapper_options = nil
+
+        variant_class = get_variant_class(variant)
+        size_class = get_size_class(size)
+        radius_class = get_radius_class(radius)
+
+        # Setup features that require Stimulus controllers
+        active_features = determine_active_features(loading, dropdown, loading_text, use_default_controller)
+
+        Rails.logger.debug "Active Features: #{active_features.inspect}"
+        Rails.logger.debug "Options before setup: #{options.inspect}"
+
+        setup_features(active_features, options, use_default_controller, loading_text)
+
+        Rails.logger.debug "Options after setup: #{options.inspect}"
+
+        setup_link_options(options, href, target, method)
+
+        if dropdown
+          setup_dropdown_options(
+            options,
+            additional_classes,
+            dropdown,
+            dropdown_items,
+            wrapper_data
+          )
+        end
+
+        # Setup wrapper options if any feature requires it
+        wrapper_options = setup_wrapper_options(
+          active_features,
+          additional_classes,
+          wrapper_data
+        )
+
+        render_button(
+          content,
+          variant_class,
+          size_class,
+          radius_class,
+          icon,
+          icon_position,
+          loading,
+          loading_text,
+          additional_classes,
+          disabled,
+          options,
+          href,
+          dropdown,
+          dropdown_items,
+          dropdown_icon,
+          wrapper_options
+        )
+      end
+
+      private
+
+      def get_variant_class(variant)
+        {
           primary: "w-button-primary",
           secondary: "w-button-secondary",
           outline: "w-button-outline"
         }[variant] || "w-button-primary"
+      end
 
-        size_class = {
+      def get_size_class(size)
+        {
           small: "w-button-small",
           medium: "w-button-medium",
           large: "w-button-large"
         }[size] || "w-button-medium"
+      end
 
-        radius_class = {
+      def get_radius_class(radius)
+        {
           rounded: "w-button-rounded",
           pill: "w-button-pill",
           square: "w-button-square"
         }[radius] || "w-button-rounded"
+      end
+
+      def determine_active_features(loading, dropdown, loading_text = nil, use_default_controller = true)
+        features = {}
+        features[:loading] = true if (loading || loading_text.present?) && use_default_controller
+        features[:dropdown] = true if dropdown && use_default_controller
+        features
+      end
+
+      def setup_features(active_features, options, use_default_controller, loading_text)
+        return unless use_default_controller && active_features.any?
+
+        active_features.each do |feature, _value|
+          feature_config = BUTTON_FEATURES[feature]
+          next unless feature_config
+
+          # Skip adding controller for dropdown feature since it's handled by wrapper
+          if feature_config[:wrapper_required]
+            # For dropdown, only set the action, not the controller
+            options[:data][:action] = feature_config[:default_stimulus_action]
+          else
+            setup_feature_controller(options, feature_config, loading_text)
+          end
+        end
+      end
+
+      def setup_feature_controller(options, feature_config, loading_text)
+        options[:data] ||= {}
+
+        existing_controller = options.dig(:data, :controller)
+        existing_action = options.dig(:data, :action)
+
+        options[:data][:controller] = [
+          existing_controller,
+          feature_config[:stimulus_controller]
+        ].compact.join(" ")
+
+        options[:data][:action] = [
+          existing_action,
+          feature_config[:default_stimulus_action]
+        ].compact.join(" ")
+
+        # Add feature-specific data attributes
+        if feature_config[:stimulus_controller] == "button" && loading_text.present?
+          options[:data][:button_loading_text] = loading_text
+        end
+      end
+
+      def setup_link_options(options, href, target, method)
+        return unless href.present?
+
+        options[:href] = href
+        options[:target] = target if target
+        options[:data][:method] = method if method != :get
+        options[:rel] = "noopener noreferrer" if target == "_blank"
+      end
+
+      def setup_dropdown_options(options, additional_classes, dropdown, dropdown_items, wrapper_data)
+        additional_classes = "#{additional_classes} w-button-dropdown"
+
+        options[:data][:dropdown_target] = "button"
+
+        wrapper_data.merge!(
+          controller: "dropdown",
+          dropdown_id: "dropdown-#{SecureRandom.hex(4)}"
+        )
+
+        if dropdown.is_a?(Hash)
+          wrapper_data.merge!(
+            dropdown_position_value: dropdown[:position]&.to_s || "bottom",
+            dropdown_align_value: dropdown[:align]&.to_s || "start",
+            dropdown_trigger_value: dropdown[:trigger]&.to_s || "click"
+          )
+        else
+          wrapper_data.merge!(
+            dropdown_position_value: "bottom",
+            dropdown_align_value: "start",
+            dropdown_trigger_value: "click"
+          )
+        end
+
+        normalize_dropdown_items(dropdown_items)
+      end
+
+      def setup_wrapper_options(active_features, additional_classes, wrapper_data)
+        return nil unless needs_wrapper?(active_features)
+
+        {
+          class: [ "w-button-wrapper", additional_classes ].compact.join(" "),
+          data: wrapper_data,
+          role: active_features[:dropdown] ? "menu" : nil
+        }.compact
+      end
+
+      def needs_wrapper?(active_features)
+        active_features.any? { |feature, _| BUTTON_FEATURES[feature][:wrapper_required] }
+      end
+
+      def normalize_dropdown_items(items, parent_id = nil)
+        return [] unless items
+
+        items.map.with_index do |item, index|
+          item_id = generate_item_id(parent_id, index)
+
+          normalized_item = {
+            id: item_id,
+            text: item[:text],
+            href: item[:href],
+            divider: item[:divider]
+          }
+
+          if item[:children].present?
+            normalized_item[:children] = normalize_dropdown_items(item[:children], item_id)
+          end
+
+          normalized_item.compact
+        end
+      end
+
+      def generate_item_id(parent_id, index)
+        base = parent_id ? "#{parent_id}-" : "dropdown-item-"
+        "#{base}#{index}"
+      end
 
+      def render_button(content, variant_class, size_class, radius_class, icon, icon_position,
+                       loading, loading_text, additional_classes, disabled, options, href,
+                       dropdown, dropdown_items, dropdown_icon, wrapper_options)
         render partial: "wilday_ui/button",
           locals: {
             content: content,
@@ -39,9 +258,16 @@ module WildayUi
             radius_class: radius_class,
             icon: icon,
             icon_position: icon_position,
+            loading: loading,
+            loading_text: loading_text,
             additional_classes: additional_classes,
             disabled: disabled,
-            attributes: options.map { |key, value| "#{key}='#{value}'" }.join(" ")
+            html_options: options,
+            href: href,
+            dropdown: dropdown,
+            dropdown_items: dropdown_items,
+            dropdown_icon: dropdown_icon,
+            wrapper_options: wrapper_options
           }
       end
     end

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

@@ -1,8 +1,10 @@
 document.addEventListener("DOMContentLoaded", () => {
+  console.log("Button component loaded heah");
   document.querySelectorAll(".w-button").forEach((button) => {
     button.addEventListener("click", (event) => {
       if (button.disabled) {
         event.preventDefault();
+        return;
       }
     });
   });

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

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class ButtonController extends Controller {
+  static values = {
+    loadingDuration: { type: Number, default: 2000 },
+  };
+
+  initialize() {}
+
+  connect() {}
+
+  toggleLoading(event) {
+    const button = this.element;
+    const isLink = button.tagName.toLowerCase() === "a";
+    const hasLoadingText = button.dataset.buttonLoadingText;
+
+    // Always prevent default if we have loading text
+    if (hasLoadingText) {
+      event.preventDefault();
+
+      if (button.disabled || button.classList.contains("w-button-loading")) {
+        return;
+      }
+
+      this.startLoading(button);
+
+      setTimeout(() => {
+        this.stopLoading(button);
+
+        // Only navigate if it's a link with href
+        if (isLink && button.href) {
+          window.location.href = button.href;
+        }
+      }, this.loadingDurationValue);
+    }
+  }
+
+  startLoading(button) {
+    this.originalContent = button.innerHTML;
+    const loadingText = button.dataset.buttonLoadingText;
+
+    button.classList.add("w-button-loading");
+    button.setAttribute("aria-busy", "true");
+    button.style.pointerEvents = "none";
+    button.disabled = true;
+    button.innerHTML = `<span class="w-button-spinner"></span> ${loadingText}`;
+  }
+
+  stopLoading(button) {
+    button.classList.remove("w-button-loading");
+    button.removeAttribute("aria-busy");
+    button.style.pointerEvents = "";
+    button.disabled = false;
+    button.innerHTML = this.originalContent;
+  }
+}