wilday_ui 0.6.0 → 0.8.0

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

@@ -11,6 +11,24 @@ module WildayUi
           wrapper_required: false,
           stimulus_controller: "button",
           default_stimulus_action: "click->button#toggleLoading"
+        },
+        copy_to_clipboard: {
+          wrapper_required: true,
+          stimulus_controller: "clipboard button",
+          default_stimulus_action: "click->clipboard#copy click->button#toggleLoading"
+        },
+        confirm: {
+          wrapper_required: true,
+          stimulus_controller: "confirmation",
+          default_stimulus_action: "click->confirmation#showDialog"
+        },
+        tooltip: {
+          wrapper_required: true,
+          stimulus_controller: "tooltip",
+          default_stimulus_action: {
+            hover: "mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide",
+            click: "click->tooltip#toggle"
+          }
         }
         # Add more features here as needed
         # tooltip: {
@@ -42,6 +60,9 @@ module WildayUi
         dropdown_items: nil,
         dropdown_icon: nil,
         theme: nil,
+        copy_to_clipboard: nil,
+        confirm: nil,
+        tooltip: nil,
         **options
       )
         content_for(:head) { stylesheet_link_tag "wilday_ui/components/button/index", media: "all" }
@@ -68,7 +89,7 @@ module WildayUi
         gradient_class = get_gradient_class(gradient)
 
         # Setup features that require Stimulus controllers
-        active_features = determine_active_features(loading, dropdown, loading_text, use_default_controller)
+        active_features = determine_active_features(loading, dropdown, loading_text, copy_to_clipboard, confirm, tooltip, use_default_controller)
 
         setup_features(active_features, options, use_default_controller, loading_text)
 
@@ -84,6 +105,33 @@ module WildayUi
           )
         end
 
+        if copy_to_clipboard
+          setup_clipboard_options(
+            options,
+            additional_classes,
+            copy_to_clipboard,
+            wrapper_data
+          )
+        end
+
+        if confirm
+          setup_confirmation_options(
+            options,
+            additional_classes,
+            confirm,
+            wrapper_data
+          )
+        end
+
+        if tooltip
+          setup_tooltip_options(
+            options,
+            additional_classes,
+            tooltip,
+            wrapper_data
+          )
+        end
+
         # Setup wrapper options if any feature requires it
         wrapper_options = setup_wrapper_options(
           active_features,
@@ -267,10 +315,13 @@ module WildayUi
         styles.map { |k, v| "#{k}: #{v}" }.join(";")
       end
 
-      def determine_active_features(loading, dropdown, loading_text = nil, use_default_controller = true)
+      def determine_active_features(loading, dropdown, loading_text = nil, copy_to_clipboard = nil, confirm = nil, tooltip = 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[:copy_to_clipboard] = true if copy_to_clipboard.present? && use_default_controller
+        features[:confirm] = true if confirm.present? && use_default_controller
+        features[:tooltip] = true if tooltip.present? && use_default_controller
         features
       end
 
@@ -389,6 +440,206 @@ module WildayUi
         "#{base}#{index}"
       end
 
+      def setup_clipboard_options(options, additional_classes, copy_to_clipboard, wrapper_data)
+        return unless copy_to_clipboard.present?
+
+        clipboard_config = normalize_clipboard_options(copy_to_clipboard)
+
+        wrapper_data.merge!(
+          controller: "clipboard button",
+          clipboard_text_value: clipboard_config[:text],
+          clipboard_feedback_text_value: clipboard_config[:feedback_text],
+          clipboard_feedback_position_value: clipboard_config[:position],
+          clipboard_feedback_duration_value: clipboard_config[:duration]
+        )
+
+        options[:data][:clipboard_target] = "button"
+        options[:data][:button_target] = "button"
+      end
+
+      def normalize_clipboard_options(options)
+        if options.is_a?(Hash)
+          {
+            text: options[:text],
+            feedback_text: options[:feedback_text] || "Copied!",
+            position: options[:position] || "top",
+            duration: options[:duration] || 2000
+          }
+        else
+          {
+            text: options.to_s,
+            feedback_text: "Copied!",
+            position: "top",
+            duration: 2000
+          }
+        end
+      end
+
+      def setup_confirmation_options(options, additional_classes, confirm, wrapper_data)
+        return unless confirm.present?
+
+        confirm_config = normalize_confirmation_options(confirm)
+
+        # Use the same theme processing as regular buttons
+        confirm_theme_styles = process_theme(:solid, { name: confirm_config[:variant] })
+        cancel_theme_styles = process_theme(:subtle, { name: :secondary })
+
+        wrapper_data.merge!(
+          controller: "confirmation",
+          confirmation_title_value: confirm_config[:title],
+          confirmation_message_value: confirm_config[:message],
+          confirmation_icon_color_value: confirm_config[:variant],
+          confirmation_confirm_text_value: confirm_config[:confirm_text],
+          confirmation_cancel_text_value: confirm_config[:cancel_text],
+          confirmation_confirm_styles_value: confirm_theme_styles,
+          confirmation_cancel_styles_value: cancel_theme_styles
+        )
+
+        # Only add loading state if enabled
+        if confirm_config[:loading]
+          wrapper_data.merge!(
+            confirmation_loading_value: "true",
+            confirmation_loading_text_value: confirm_config[:loading_text]
+          )
+        end
+      end
+
+      def normalize_confirmation_options(options)
+        if options.is_a?(String)
+          {
+            title: "Confirm Action",
+            message: options,
+            variant: :info,
+            confirm_text: "Confirm",
+            cancel_text: "Cancel"
+          }
+        else
+          {
+            title: options[:title] || "Confirm Action",
+            message: options[:message],
+            variant: options[:variant] || :info,
+            confirm_text: options[:confirm_text] || "Confirm",
+            cancel_text: options[:cancel_text] || "Cancel",
+            loading: options[:loading] || false,
+            loading_text: options[:loading_text] || "Processing..."
+          }
+        end
+      end
+
+      def setup_tooltip_options(options, additional_classes, tooltip, wrapper_data)
+        tooltip_config = normalize_tooltip_options(tooltip)
+
+        # Check if dropdown is present
+        has_dropdown = wrapper_data[:controller]&.include?("dropdown")
+        has_clipboard = wrapper_data[:controller]&.include?("clipboard")
+
+        # Get the appropriate action based on trigger type
+        # Force hover behavior if dropdown is present
+        trigger_type = (has_dropdown || has_clipboard) ? :hover : tooltip_config[:trigger].to_sym
+        tooltip_action = BUTTON_FEATURES[:tooltip][:default_stimulus_action][trigger_type]
+
+        # Merge controllers
+        existing_controller = wrapper_data[:controller]
+        wrapper_data[:controller] = [
+          existing_controller,
+          "tooltip"
+        ].compact.join(" ")
+
+        # Merge actions
+        existing_action = wrapper_data[:action]
+        if has_dropdown
+          # Keep the dropdown toggle action and add tooltip hover actions
+          wrapper_data[:action] = [
+            "click->dropdown#toggle",  # Ensure dropdown action comes first
+            tooltip_action
+          ].compact.join(" ")
+        elsif has_clipboard
+          # Keep the clipboard copy action and add tooltip hover actions
+          wrapper_data[:action] = [
+            "click->clipboard#copy click->button#toggleLoading",
+            tooltip_action
+          ].compact.join(" ")
+        else
+          wrapper_data[:action] = [
+            existing_action,
+            tooltip_action
+          ].compact.join(" ")
+        end
+
+        # Handle theme data
+        theme = tooltip_config[:theme]
+        theme_name = theme.is_a?(Hash) ? theme[:name] : theme
+
+        wrapper_data.merge!(
+          tooltip_content_value: tooltip_config[:content],
+          tooltip_position_value: tooltip_config[:position],
+          tooltip_align_value: tooltip_config[:align],
+          tooltip_trigger_value: trigger_type,
+          tooltip_show_delay_value: tooltip_config[:delay][:show],
+          tooltip_hide_delay_value: tooltip_config[:delay][:hide],
+          tooltip_offset_value: tooltip_config[:offset],
+          tooltip_theme_value: theme_name,
+          tooltip_size_value: tooltip_config[:size],
+          tooltip_arrow_value: tooltip_config[:arrow]
+        )
+
+        # Add custom theme styles if present
+        if theme.is_a?(Hash) && theme[:custom]
+          custom_styles = []
+          custom_styles << "--tooltip-text-color: #{theme[:custom][:color]}" if theme[:custom][:color]
+          custom_styles << "--tooltip-bg-color: #{theme[:custom][:background]}" if theme[:custom][:background]
+          wrapper_data[:tooltip_custom_style_value] = custom_styles.join(";")
+        end
+
+        options[:data][:tooltip_target] = "trigger"
+        options[:aria] ||= {}
+        options[:aria][:describedby] = "tooltip-#{SecureRandom.hex(4)}"
+      end
+
+      def normalize_tooltip_options(options)
+        if options.is_a?(String)
+          {
+            content: options,
+            position: "top",
+            align: "center",
+            trigger: "hover",
+            delay: { show: 0, hide: 0 },
+            offset: 8,
+            theme: "light",
+            size: "md",
+            arrow: false
+          }
+        else
+          theme = options[:theme]
+          theme_data = if theme.is_a?(Hash) && theme[:custom]
+            {
+              name: "custom",
+              custom: {
+                color: theme.dig(:custom, :color),
+                background: theme.dig(:custom, :background)
+              }
+            }
+          else
+            { name: theme || "light" }
+          end
+
+          {
+            content: options[:content],
+            position: options[:position] || "top",
+            align: options[:align] || "center",
+            trigger: options[:trigger] || "hover",
+            delay: {
+              show: options.dig(:delay, :show) || 0,
+              hide: options.dig(:delay, :hide) || 0
+            },
+            offset: options[:offset] || 8,
+            theme: theme_data,
+            size: options[:size] || "md",
+            arrow: options[:arrow] || false
+          }
+        end
+      end
+
       def render_button(content, variant_class, size_class, radius_class, gradient_class, icon, icon_position, icon_only,
                        loading, loading_text, additional_classes, disabled, options, href, underline,
                        dropdown, dropdown_items, dropdown_icon, wrapper_options)

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

@@ -0,0 +1,76 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["button", "feedback"];
+  static values = {
+    text: String,
+    feedbackText: { type: String, default: "Copied!" },
+    feedbackPosition: { type: String, default: "top" },
+    feedbackDuration: { type: Number, default: 2000 },
+  };
+
+  connect() {
+    // Optional: Initialize any necessary setup
+  }
+
+  async copy(event) {
+    event.preventDefault();
+
+    try {
+      await navigator.clipboard.writeText(this.textValue);
+      this.showFeedback();
+    } catch (err) {
+      console.error("Failed to copy text:", err);
+      // Fallback for older browsers
+      this.fallbackCopy();
+    }
+  }
+
+  fallbackCopy() {
+    const textArea = document.createElement("textarea");
+    textArea.value = this.textValue;
+    textArea.style.position = "fixed";
+    textArea.style.left = "-9999px";
+    document.body.appendChild(textArea);
+    textArea.select();
+
+    try {
+      document.execCommand("copy");
+      this.showFeedback();
+    } catch (err) {
+      console.error("Fallback: Oops, unable to copy", err);
+    }
+
+    document.body.removeChild(textArea);
+  }
+
+  showFeedback() {
+    const feedback = this.hasFeedbackTarget
+      ? this.feedbackTarget
+      : this.createFeedbackElement();
+    feedback.textContent = this.feedbackTextValue;
+
+    // Remove any existing position classes
+    feedback.className = "w-button-feedback";
+
+    // Add position-specific classes
+    const positionClasses = this.feedbackPositionValue.split("-");
+    positionClasses.forEach((pos) => {
+      feedback.classList.add(`w-button-feedback-${pos}`);
+    });
+
+    feedback.classList.add("w-button-feedback-show");
+
+    setTimeout(() => {
+      feedback.classList.remove("w-button-feedback-show");
+    }, this.feedbackDurationValue);
+  }
+
+  createFeedbackElement() {
+    const feedback = document.createElement("div");
+    feedback.classList.add("w-button-feedback");
+    feedback.setAttribute("data-clipboard-target", "feedback");
+    this.element.appendChild(feedback);
+    return feedback;
+  }
+}

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

@@ -0,0 +1,216 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["dialog", "confirmButton", "cancelButton"];
+  static values = {
+    title: String,
+    message: String,
+    iconColor: String,
+    confirmText: String,
+    cancelText: String,
+    confirmStyles: String,
+    cancelStyles: String,
+  };
+
+  // Store the original event to be used later
+  originalEvent = null;
+
+  connect() {
+    // Create and append dialog if it doesn't exist
+    if (!this.hasDialogTarget) {
+      this.element.insertAdjacentHTML("beforeend", this.dialogHTML);
+    }
+  }
+
+  disconnect() {
+    this.originalEvent = null;
+    this.isConfirmed = false;
+  }
+
+  showDialog(event) {
+    // Don't show dialog if already confirmed
+    if (this.isConfirmed) {
+      this.isConfirmed = false;
+      return;
+    }
+
+    // console.log("Show dialog triggered", event);
+    event.preventDefault();
+    // Store the original event and element
+    this.originalEvent = {
+      type: event.type,
+      element: event.currentTarget,
+      ctrlKey: event.ctrlKey,
+      metaKey: event.metaKey,
+    };
+    // console.log("Original event stored:", this.originalEvent);
+    this.dialogTarget.showModal();
+    this.focusConfirmButton();
+  }
+
+  confirm(event) {
+    // console.log("Confirm clicked");
+    event.preventDefault();
+    this.dialogTarget.close();
+
+    if (this.originalEvent?.element) {
+      const element = this.originalEvent.element;
+      // console.log("Processing element:", element);
+
+      // Let Turbo handle its own elements
+      if (
+        this.hasTurbo &&
+        !element.hasAttribute("data-turbo") &&
+        !element.hasAttribute("data-turbo-method")
+      ) {
+        this.resumeOriginalEvent();
+        return;
+      }
+
+      // Dispatch standard DOM custom event
+      const confirmEvent = new CustomEvent("confirm", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          element: element,
+          originalEvent: this.originalEvent,
+        },
+      });
+
+      const wasHandled = !element.dispatchEvent(confirmEvent);
+      if (wasHandled) return;
+
+      // If not handled by custom event, resume original event
+      this.resumeOriginalEvent();
+    }
+  }
+
+  resumeOriginalEvent() {
+    if (!this.originalEvent) return;
+
+    const element = this.originalEvent.element;
+    // console.log("Resuming original event for:", element);
+
+    // Set flag before triggering the event
+    this.isConfirmed = true;
+
+    // Handle form submissions
+    if (element.closest("form")) {
+      const form = element.closest("form");
+      // console.log("Submitting form:", form);
+      const submitEvent = new Event("submit", {
+        bubbles: true,
+        cancelable: true,
+      });
+      form.dispatchEvent(submitEvent); // This will trigger the event listener
+      this.originalEvent = null;
+      return;
+    }
+
+    // Handle links
+    if (element.tagName === "A" || element.hasAttribute("href")) {
+      // console.log("Processing link click");
+      const click = new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        ctrlKey: this.originalEvent.ctrlKey,
+        metaKey: this.originalEvent.metaKey,
+      });
+      element.dispatchEvent(click);
+      this.originalEvent = null;
+      return;
+    }
+
+    // Handle regular button click
+    if (
+      !element.closest("form") &&
+      !(element.tagName === "A" || element.hasAttribute("href"))
+    ) {
+      // console.log("Processing button click");
+      element.click();
+      this.originalEvent = null;
+      return;
+    }
+  }
+
+  cancel(event) {
+    event.preventDefault();
+    this.closeDialog();
+  }
+
+  closeDialog() {
+    this.dialogTarget.close();
+    this.originalEvent = null;
+  }
+
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      this.cancel(event);
+    }
+  }
+
+  handleClickOutside(event) {
+    if (event.target === this.dialogTarget) {
+      this.cancel(event);
+    }
+  }
+
+  focusConfirmButton() {
+    this.confirmButtonTarget.focus();
+  }
+
+  get hasTurbo() {
+    return typeof Turbo !== "undefined";
+  }
+
+  get dialogHTML() {
+    return `
+      <dialog class="w-button-confirmation-dialog" 
+              data-confirmation-target="dialog"
+              data-action="click->confirmation#handleClickOutside keydown->confirmation#handleKeydown">
+        <div class="w-button-confirmation-dialog-content">
+          <div class="w-button-confirmation-dialog-icon ${this.iconColorValue}">
+            ${this.iconHTML}
+          </div>
+  
+          <h3 class="w-button-confirmation-dialog-title">
+            ${this.titleValue}
+          </h3>
+  
+          <div class="w-button-confirmation-dialog-message">
+            ${this.messageValue}
+          </div>
+  
+          <div class="w-button-confirmation-dialog-actions">
+            <button data-confirmation-target="cancelButton"
+                    data-action="click->confirmation#cancel"
+                    class="w-button w-button-subtle w-button-medium w-button-rounded"
+                    style="${this.cancelStylesValue}">
+              ${this.cancelTextValue}
+            </button>
+  
+            <button data-confirmation-target="confirmButton"
+                    data-action="click->confirmation#confirm"
+                    class="w-button w-button-solid w-button-medium w-button-rounded"
+                    style="${this.confirmStylesValue}">
+              ${this.confirmTextValue}
+            </button>
+          </div>
+        </div>
+      </dialog>
+    `;
+  }
+
+  get iconHTML() {
+    const icons = {
+      info: '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+      success:
+        '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+      warning:
+        '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>',
+      danger:
+        '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
+    };
+    return icons[this.iconColorValue] || icons.info;
+  }
+}

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

@@ -1,7 +1,9 @@
 import { Application } from "@hotwired/stimulus";
 import ButtonController from "./button_controller";
 import DropdownController from "./dropdown_controller";
-
+import ClipboardController from "./clipboard_controller";
+import ConfirmationController from "./confirmation_controller";
+import TooltipController from "./tooltip_controller";
 // Initialize Stimulus
 const application = Application.start();
 window.Stimulus = application;
@@ -9,6 +11,9 @@ window.Stimulus = application;
 // Register the button controller
 application.register("button", ButtonController);
 application.register("dropdown", DropdownController);
+application.register("clipboard", ClipboardController);
+application.register("confirmation", ConfirmationController);
+application.register("tooltip", TooltipController);
 // Debug check to ensure Stimulus is loaded
 // if (window.Stimulus) {
 //   console.log("✅ Stimulus is loaded and initialized.");