wilday_ui 0.8.0 → 0.9.0

data/app/helpers/wilday_ui/components/button/feature_engine.rb

@@ -0,0 +1,74 @@
+module WildayUi
+  module Components
+    module Button
+      module FeatureEngine
+        include WildayUi::Components::Button::Features::Loading
+        include WildayUi::Components::Button::Features::Dropdown
+        include WildayUi::Components::Button::Features::CopyToClipboard
+        include WildayUi::Components::Button::Features::ConfirmDialog
+        include WildayUi::Components::Button::Features::Tooltip
+        include WildayUi::Components::Button::Features::Animation
+
+        BUTTON_FEATURES = begin
+          {}
+          .merge(Features::Loading.feature_config)
+          .merge(Features::Tooltip.feature_config)
+          .merge(Features::Dropdown.feature_config)
+          .merge(Features::CopyToClipboard.feature_config)
+          .merge(Features::ConfirmDialog.feature_config)
+          .merge(Features::Animation.feature_config)
+          .freeze
+        end
+
+        def self.button_features
+          BUTTON_FEATURES
+        end
+
+        def determine_active_features(loading, dropdown, loading_text = nil, copy_to_clipboard = nil, confirm = nil, tooltip = nil, animation = 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[:animation] = true if animation.present? && use_default_controller
+          features
+        end
+
+        def setup_features(active_features, options, use_default_controller)
+          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)
+            end
+          end
+        end
+
+        def setup_feature_controller(options, feature_config)
+          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(" ")
+        end
+      end
+    end
+  end
+end

data/app/helpers/wilday_ui/components/button/features/animation.rb

@@ -0,0 +1,97 @@
+module WildayUi
+  module Components
+    module Button
+      module Features
+        module Animation
+          FEATURE_CONFIG = {
+            wrapper_required: false,
+            stimulus_controller: "animation",
+            default_stimulus_action: "animation#animate animation#disableAfterAnimation"
+          }.freeze
+
+          def self.feature_config
+            { animation: FEATURE_CONFIG }
+          end
+
+          def setup_animation_options(options, additional_classes, animation, wrapper_data)
+            return unless animation.present?
+
+            animation_config = normalize_animation_options(animation)
+
+            # Add animation data attributes
+            options[:data] ||= {}
+            options[:data][:animation] = animation_config.to_json
+            options[:data][:controller] = "animation"
+            options[:data][:animation_target] = "button"
+            options[:data][:action] = FEATURE_CONFIG[:default_stimulus_action]
+
+            additional_classes = [
+              additional_classes,
+              "w-button-animated",
+              "w-button-animation-#{animation_config[:name]}",
+              "w-button-animation-trigger-#{animation_config[:trigger]}"
+            ].compact.join(" ")
+          end
+
+          private
+
+          def normalize_animation_options(options)
+            if options.is_a?(Symbol)
+              {
+                name: options,
+                trigger: :hover,
+                timing: :ease,
+                duration: 0.3,
+                iteration: 1,
+                direction: :normal,
+                fill_mode: :none,
+                disabled: false
+              }
+            else
+              config = {
+                name: options[:name]&.to_sym,
+                trigger: options[:trigger]&.to_sym || :hover,
+                timing: normalize_timing(options[:timing]),
+                direction: options[:direction]&.to_sym || :normal,
+                iteration: normalize_iteration(options[:iteration]),
+                fill_mode: options[:fill_mode]&.to_sym || :none,
+                duration: options[:duration] || 0.3,
+                delay: options[:delay] || 0,
+                disabled: options[:disabled] || false
+              }
+
+              # Handle properties based on animation type
+              if options[:properties]
+                if config[:name] == :custom
+                  config[:properties] = options[:properties]  # Pass through all properties for custom animations
+                elsif config[:timing] == :cubic_bezier
+                  config[:properties] = { cubic_bezier: options[:properties][:cubic_bezier] }  # Handle cubic-bezier timing
+                end
+              end
+
+              config.compact
+            end
+          end
+
+          def normalize_timing(timing)
+            return :ease unless timing
+
+            timing = timing.to_sym if timing.is_a?(String)
+            case timing
+            when :linear, :ease, :ease_in, :ease_out, :ease_in_out, :cubic_bezier
+              timing
+            else
+              :ease # default if invalid timing provided
+            end
+          end
+
+          def normalize_iteration(value)
+            return value if value.is_a?(Integer)
+            return :infinite if value.to_s.downcase == "infinite"
+            value&.to_sym
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/wilday_ui/components/button/features/confirm_dialog.rb

@@ -0,0 +1,70 @@
+module WildayUi
+  module Components
+    module Button
+      module Features
+        module ConfirmDialog
+          FEATURE_CONFIG = {
+            wrapper_required: true,
+            stimulus_controller: "confirmation",
+            default_stimulus_action: "click->confirmation#showDialog"
+          }.freeze
+
+          def self.feature_config
+            { confirm: FEATURE_CONFIG }
+          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: FEATURE_CONFIG[:stimulus_controller],
+              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
+        end
+      end
+    end
+  end
+end

data/app/helpers/wilday_ui/components/button/features/copy_to_clipboard.rb

@@ -0,0 +1,56 @@
+module WildayUi
+  module Components
+    module Button
+      module Features
+        module CopyToClipboard
+          FEATURE_CONFIG = {
+            wrapper_required: true,
+            stimulus_controller: "clipboard button",
+            default_stimulus_action: "click->clipboard#copy click->button#toggleLoading"
+          }.freeze
+
+          def self.feature_config
+            { copy_to_clipboard: FEATURE_CONFIG }
+          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: FEATURE_CONFIG[:stimulus_controller],
+              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
+
+          private
+
+          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
+        end
+      end
+    end
+  end
+end

data/app/helpers/wilday_ui/components/button/features/dropdown.rb

@@ -0,0 +1,74 @@
+module WildayUi
+  module Components
+    module Button
+      module Features
+        module Dropdown
+          FEATURE_CONFIG = {
+            wrapper_required: true,
+            stimulus_controller: "dropdown",
+            default_stimulus_action: "click->dropdown#toggle"
+          }.freeze
+
+          def self.feature_config
+            { dropdown: FEATURE_CONFIG }
+          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: FEATURE_CONFIG[:stimulus_controller],
+              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
+
+          private
+
+          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
+        end
+      end
+    end
+  end
+end

data/app/helpers/wilday_ui/components/button/features/loading.rb

@@ -0,0 +1,32 @@
+module WildayUi
+  module Components
+    module Button
+      module Features
+        module Loading
+          FEATURE_CONFIG = {
+            wrapper_required: false,
+            stimulus_controller: "button",
+            default_stimulus_action: "click->button#toggleLoading"
+          }.freeze
+
+          def self.feature_config
+            { loading: FEATURE_CONFIG }
+          end
+
+          def setup_loading_options(options, loading_text)
+            return unless loading_text.present?
+
+            feature_config = FEATURE_CONFIG
+            setup_feature_controller(options, feature_config, loading_text)
+          end
+
+          def setup_loading_data_attributes(options, loading_text)
+            return unless loading_text.present?
+            options[:data] ||= {}
+            options[:data][:button_loading_text] = loading_text
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/wilday_ui/components/button/features/tooltip.rb

@@ -0,0 +1,138 @@
+module WildayUi
+  module Components
+    module Button
+      module Features
+        module Tooltip
+          FEATURE_CONFIG = {
+            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"
+            }
+          }.freeze
+
+          def self.feature_config
+            { tooltip: FEATURE_CONFIG }
+          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 = FEATURE_CONFIG[:default_stimulus_action][trigger_type]
+
+            # Merge controllers
+            existing_controller = wrapper_data[:controller]
+            wrapper_data[:controller] = [
+              existing_controller,
+              FEATURE_CONFIG[:stimulus_controller]
+            ].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
+
+          private
+
+          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
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,97 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    console.log("AnimationController connected");
+    this.setupAnimation();
+  }
+
+  setupAnimation() {
+    const animationData = JSON.parse(this.element.dataset.animation || "{}");
+    if (!animationData.name) return;
+
+    const {
+      name,
+      trigger,
+      duration = 0.3,
+      timing = "ease",
+      delay = 0, // Add default value here
+      iteration = 1,
+      direction = "normal",
+      fill_mode = "none",
+      properties,
+    } = animationData;
+
+    // Set up CSS custom properties
+    this.element.style.setProperty("--animation-name", name);
+    this.element.style.setProperty("--animation-duration", `${duration}s`);
+    this.element.style.setProperty("--animation-delay", `${delay}s`); // This will now be "0s" instead of "undefineds"
+    this.element.style.setProperty(
+      "--animation-timing",
+      this.getTimingFunction(timing, properties)
+    );
+    this.element.style.setProperty(
+      "--animation-iteration",
+      iteration === "infinite" ? "infinite" : iteration || 1
+    );
+    this.element.style.setProperty(
+      "--animation-direction",
+      direction.replace(/_/g, "-")
+    );
+    this.element.style.setProperty(
+      "--animation-fill-mode",
+      fill_mode.replace(/_/g, "-")
+    );
+
+    // Handle custom properties
+    if (properties && name === "custom") {
+      Object.entries(properties).forEach(([key, value]) => {
+        this.element.style.setProperty(`--animation-custom-${key}`, value);
+      });
+    }
+
+    if (trigger === "click") {
+      this.element.addEventListener("click", () => this.animate());
+    } else if (trigger === "load") {
+      this.animate();
+    }
+  }
+
+  animate() {
+    const animationData = JSON.parse(this.element.dataset.animation || "{}");
+    if (!animationData.name) return;
+
+    // Remove existing animation class to allow re-triggering
+    this.element.classList.remove("is-animating");
+    // Force a reflow to ensure the animation runs again
+    void this.element.offsetWidth;
+    // Add animation class
+    this.element.classList.add("is-animating");
+  }
+
+  getTimingFunction(timing, properties) {
+    if (!timing) return "ease";
+
+    if (timing === "cubic_bezier" && properties?.cubic_bezier) {
+      const [x1, y1, x2, y2] = properties.cubic_bezier;
+      return `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})`;
+    }
+    return timing.replace(/_/g, "-");
+  }
+
+  disableAfterAnimation() {
+    const animationConfig = JSON.parse(this.element.dataset.animation || "{}");
+    if (!animationConfig.disabled) return; // Only disable if config says so
+
+    const duration =
+      parseFloat(this.element.style.getPropertyValue("--animation-duration")) *
+      1000;
+    const delay =
+      parseFloat(this.element.style.getPropertyValue("--animation-delay")) *
+      1000;
+
+    setTimeout(() => {
+      this.element.disabled = true;
+    }, duration + delay);
+  }
+}

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

@@ -4,6 +4,7 @@ import DropdownController from "./dropdown_controller";
 import ClipboardController from "./clipboard_controller";
 import ConfirmationController from "./confirmation_controller";
 import TooltipController from "./tooltip_controller";
+import AnimationController from "./animation_controller";
 // Initialize Stimulus
 const application = Application.start();
 window.Stimulus = application;
@@ -14,6 +15,7 @@ application.register("dropdown", DropdownController);
 application.register("clipboard", ClipboardController);
 application.register("confirmation", ConfirmationController);
 application.register("tooltip", TooltipController);
+application.register("animation", AnimationController);
 // Debug check to ensure Stimulus is loaded
 // if (window.Stimulus) {
 //   console.log("✅ Stimulus is loaded and initialized.");