wilday_ui 0.5.6 → 0.7.0

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

@@ -11,6 +11,16 @@ 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"
         }
         # Add more features here as needed
         # tooltip: {
@@ -25,6 +35,7 @@ module WildayUi
         variant: :solid,
         size: :medium,
         radius: :rounded,
+        gradient: nil,
         icon: nil,
         icon_position: :left,
         icon_only: false,
@@ -41,6 +52,8 @@ module WildayUi
         dropdown_items: nil,
         dropdown_icon: nil,
         theme: nil,
+        copy_to_clipboard: nil,
+        confirm: nil,
         **options
       )
         content_for(:head) { stylesheet_link_tag "wilday_ui/components/button/index", media: "all" }
@@ -49,6 +62,12 @@ module WildayUi
         wrapper_data = {}
         wrapper_options = nil
 
+        # Process gradient styles if present
+        if gradient.present?
+          gradient_styles = process_gradient(gradient)
+          options[:style] = [ options[:style], gradient_styles ].compact.join(";") if gradient_styles.present?
+        end
+
         # Process theme styles
         if theme.present?
           theme_styles = process_theme(variant, theme)
@@ -58,17 +77,13 @@ module WildayUi
         variant_class = get_variant_class(variant)
         size_class = get_size_class(size)
         radius_class = get_radius_class(radius)
+        gradient_class = get_gradient_class(gradient)
 
         # 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}"
+        active_features = determine_active_features(loading, dropdown, loading_text, copy_to_clipboard, confirm, use_default_controller)
 
         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
@@ -81,6 +96,24 @@ 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
+
         # Setup wrapper options if any feature requires it
         wrapper_options = setup_wrapper_options(
           active_features,
@@ -93,6 +126,7 @@ module WildayUi
           variant_class,
           size_class,
           radius_class,
+          gradient_class,
           icon,
           icon_position,
           icon_only,
@@ -147,6 +181,26 @@ module WildayUi
         }[radius] || "w-button-rounded"
       end
 
+      def get_gradient_class(gradient)
+        return nil unless gradient
+
+        if gradient.is_a?(Hash) && gradient[:from] && gradient[:to]
+          "w-button-gradient-custom"
+        else
+          "w-button-gradient-#{gradient}"
+        end
+      end
+
+      def process_gradient(gradient)
+        return nil unless gradient.is_a?(Hash) && gradient[:from] && gradient[:to]
+
+        if gradient[:via]
+          "background: linear-gradient(135deg, #{gradient[:from]}, #{gradient[:via]}, #{gradient[:to]})"
+        else
+          "background: linear-gradient(135deg, #{gradient[:from]}, #{gradient[:to]})"
+        end
+      end
+
       def process_theme(variant, theme)
         return nil unless theme[:name] || theme[:custom]
 
@@ -180,36 +234,43 @@ module WildayUi
           {
             "--w-button-color": "#FFFFFF",
             "--w-button-bg": colors["500"],
-            "--w-button-hover-bg": colors["600"]
+            "--w-button-hover-bg": colors["600"],
+            "--w-button-active-bg": colors["700"]
           }
         when :subtle
           {
-            "--w-button-color": colors["500"],
+            "--w-button-color": colors["700"],
             "--w-button-bg": colors["50"],
-            "--w-button-hover-bg": colors["100"]
+            "--w-button-hover-bg": colors["100"],
+            "--w-button-hover-color": colors["800"]
           }
         when :surface
           {
-            "--w-button-color": colors["500"],
+            "--w-button-color": colors["700"],
             "--w-button-bg": colors["50"],
             "--w-button-hover-bg": colors["100"],
-            "--w-button-border": colors["100"]
+            "--w-button-border": colors["200"],
+            "--w-button-hover-border": colors["300"]
           }
         when :outline
           {
-            "--w-button-color": colors["500"],
-            "--w-button-border": colors["200"],
-            "--w-button-hover-bg": colors["50"]
+            "--w-button-color": colors["600"],
+            "--w-button-border": colors["300"],
+            "--w-button-hover-bg": colors["50"],
+            "--w-button-hover-border": colors["400"],
+            "--w-button-hover-color": colors["700"]
           }
         when :ghost
           {
-            "--w-button-color": colors["500"],
-            "--w-button-hover-bg": colors["50"]
+            "--w-button-color": colors["600"],
+            "--w-button-hover-bg": colors["50"],
+            "--w-button-hover-color": colors["700"]
           }
         when :plain
           {
-            "--w-button-color": colors["500"],
-            "--w-button-hover-color": colors["600"]
+            "--w-button-color": colors["600"],
+            "--w-button-hover-color": colors["700"],
+            "--w-button-active-color": colors["800"]
           }
         else
           {}
@@ -236,10 +297,12 @@ 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, 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
       end
 
@@ -358,7 +421,93 @@ module WildayUi
         "#{base}#{index}"
       end
 
-      def render_button(content, variant_class, size_class, radius_class, icon, icon_position, icon_only,
+      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 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)
 
@@ -368,6 +517,7 @@ module WildayUi
             variant_class: variant_class,
             size_class: size_class,
             radius_class: radius_class,
+            gradient_class: gradient_class,
             icon: icon,
             icon_position: icon_position,
             icon_only: icon_only,

data/app/helpers/wilday_ui/theme_helper.rb

@@ -0,0 +1,19 @@
+module WildayUi
+  module ThemeHelper
+    def generate_theme_css_variables
+      colors = WildayUi::Config::Theme.configuration.colors
+      css_vars = colors.map do |color_name, shades|
+        shades.map do |shade, value|
+          "--w-color-#{color_name}-#{shade}: #{value};"
+        end
+      end.flatten.join("\n")
+
+      "<style>:root { #{css_vars} }</style>".html_safe
+    end
+
+    # Helper to get specific color value
+    def theme_color(name, shade = "500")
+      WildayUi::Config::Theme.configuration.colors.dig(name.to_s, shade.to_s)
+    end
+  end
+end

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,8 @@
 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";
 // Initialize Stimulus
 const application = Application.start();
 window.Stimulus = application;
@@ -9,6 +10,8 @@ window.Stimulus = application;
 // Register the button controller
 application.register("button", ButtonController);
 application.register("dropdown", DropdownController);
+application.register("clipboard", ClipboardController);
+application.register("confirmation", ConfirmationController);
 // Debug check to ensure Stimulus is loaded
 // if (window.Stimulus) {
 //   console.log("✅ Stimulus is loaded and initialized.");

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

@@ -6,6 +6,7 @@ html_options = {
     variant_class,
     size_class,
     radius_class,
+    gradient_class,
     additional_classes,
     ("w-button-loading" if loading),
     ("w-button-icon-only" if icon_only),

data/lib/wilday_ui/config/theme.rb

@@ -111,12 +111,12 @@ module WildayUi
               "100" => "#F3F4F6",
               "200" => "#E5E7EB",
               "300" => "#D1D5DB",
-              "400" => "#9CA3AF",
-              "500" => "#1F2937",
-              "600" => "#111827",
-              "700" => "#374151",
-              "800" => "#1F2937",
-              "900" => "#111827"
+              "400" => "#1F2937",
+              "500" => "#111827",
+              "600" => "#0F172A",
+              "700" => "#0A0F1A",
+              "800" => "#060912",
+              "900" => "#030509"
             },
             "link" => {
               "50" => "#EFF6FF",

data/lib/wilday_ui/version.rb

@@ -1,3 +1,3 @@
 module WildayUi
-  VERSION = "0.5.6"
+  VERSION = "0.7.0"
 end