wilday_ui 0.8.0 → 0.9.0

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

@@ -7,6 +7,10 @@
   font-size: 1rem;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .w-button:disabled {
@@ -14,3 +18,11 @@
   color: #6c757d;
   cursor: not-allowed;
 }
+
+/* Mobile base styles */
+@media screen and (max-width: 767px) {
+  .w-button {
+    white-space: normal;
+    min-height: 40px; /* Touch-friendly */
+  }
+}

data/app/assets/stylesheets/wilday_ui/components/button/features/animation.css

@@ -0,0 +1,284 @@
+.w-button-animated {
+  animation-duration: var(--animation-duration);
+  animation-delay: var(--animation-delay);
+  animation-timing-function: var(--animation-timing);
+  animation-iteration-count: var(--animation-iteration);
+  animation-direction: var(--animation-direction);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+/* Hover triggered animations */
+.w-button-animation-trigger-hover:hover {
+  animation-name: var(--animation-name);
+}
+
+/* Click triggered animations */
+.w-button-animation-trigger-click.is-animating {
+  animation-name: var(--animation-name);
+}
+
+/* Load triggered animations */
+.w-button-animation-trigger-load.is-animating {
+  animation-name: var(--animation-name);
+}
+
+/* Custom animation handler */
+.w-button-animation-custom {
+  transition-property: transform, background, color, box-shadow, opacity; /* Add all properties we want to transition */
+  transition-duration: var(--animation-custom-duration);
+  transition-timing-function: var(--animation-custom-timing);
+  transition-delay: var(--animation-custom-delay, 0s);
+}
+
+/* Handle hover, click, and load triggers */
+.w-button-animation-trigger-hover:hover.w-button-animation-custom,
+.w-button-animation-trigger-click.is-animating.w-button-animation-custom,
+.w-button-animation-trigger-load.is-animating.w-button-animation-custom {
+  transform: var(--animation-custom-transform);
+  background: var(--animation-custom-background);
+  color: var(--animation-custom-color);
+  box-shadow: var(--animation-custom-box-shadow);
+  opacity: var(--animation-custom-opacity);
+}
+
+/* Animation keyframes */
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes slide {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(10px);
+  }
+}
+
+@keyframes ripple {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--w-button-ripple-color, 0, 0, 0), 0.1);
+  }
+  100% {
+    box-shadow: 0 0 0 15px rgba(var(--w-button-ripple-color, 0, 0, 0), 0);
+  }
+}
+
+/* Rotate animation */
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Swing animation */
+@keyframes swing {
+  20% {
+    transform: rotate(15deg);
+  }
+  40% {
+    transform: rotate(-10deg);
+  }
+  60% {
+    transform: rotate(5deg);
+  }
+  80% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+/* Pop animation */
+@keyframes pop {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Jello animation */
+@keyframes jello {
+  0%,
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+  30% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+  40% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+  50% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+  65% {
+    transform: scale3d(0.95, 1.05, 1);
+  }
+  75% {
+    transform: scale3d(1.05, 0.95, 1);
+  }
+}
+
+/* Wobble animation */
+@keyframes wobble {
+  0%,
+  100% {
+    transform: translateX(0%);
+  }
+  15% {
+    transform: translateX(-25%) rotate(-5deg);
+  }
+  30% {
+    transform: translateX(20%) rotate(3deg);
+  }
+  45% {
+    transform: translateX(-15%) rotate(-3deg);
+  }
+  60% {
+    transform: translateX(10%) rotate(2deg);
+  }
+  75% {
+    transform: translateX(-5%) rotate(-1deg);
+  }
+}
+
+/* Heartbeat animation */
+@keyframes heartbeat {
+  0% {
+    transform: scale(1);
+  }
+  14% {
+    transform: scale(1.3);
+  }
+  28% {
+    transform: scale(1);
+  }
+  42% {
+    transform: scale(1.3);
+  }
+  70% {
+    transform: scale(1);
+  }
+}
+
+/* Rubber band animation */
+@keyframes rubberBand {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  30% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+  40% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+  50% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+  65% {
+    transform: scale3d(0.95, 1.05, 1);
+  }
+  75% {
+    transform: scale3d(1.05, 0.95, 1);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+/* Flash animation */
+@keyframes flash {
+  0%,
+  50%,
+  100% {
+    opacity: 1;
+  }
+  25%,
+  75% {
+    opacity: 0;
+  }
+}
+
+/* Tada animation */
+@keyframes tada {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+  10%,
+  20% {
+    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+  }
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+  }
+  40%,
+  60%,
+  80% {
+    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+  }
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}

data/app/assets/stylesheets/wilday_ui/components/button/features/sizes.css

@@ -13,3 +13,39 @@
   font-size: 1.25rem;
   padding: 0.75rem 1.5rem;
 }
+
+/* Tablet sizes */
+@media screen and (max-width: 767px) {
+  .w-button-small {
+    font-size: 0.8125rem;
+    padding: 0.3rem 0.6rem;
+  }
+
+  .w-button-medium {
+    font-size: 0.9375rem;
+    padding: 0.45rem 0.9rem;
+  }
+
+  .w-button-large {
+    font-size: 1.125rem;
+    padding: 0.6rem 1.2rem;
+  }
+}
+
+/* Mobile sizes */
+@media screen and (max-width: 479px) {
+  .w-button-small {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .w-button-medium {
+    font-size: 0.875rem;
+    padding: 0.4rem 0.8rem;
+  }
+
+  .w-button-large {
+    font-size: 1rem;
+    padding: 0.5rem 1rem;
+  }
+}

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

@@ -11,6 +11,7 @@
  *= require ./features/clipboard
  *= require ./features/confirmation
  *= require ./features/tooltip
+ *= require ./features/animation
  *= require ../../tokens/colors
 */
 

data/app/helpers/wilday_ui/application_helper.rb

@@ -1,6 +1,6 @@
 module WildayUi
   module ApplicationHelper
-    include WildayUi::Components::ButtonHelper
+    include WildayUi::Components::Button::ButtonHelper
     include WildayUi::JavascriptHelper
   end
 end

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

@@ -0,0 +1,348 @@
+module WildayUi
+  module Components
+    module Button
+      module ButtonHelper
+        include WildayUi::Components::Button::FeatureEngine
+
+        def w_button(
+          content,
+          variant: :solid,
+          size: :medium,
+          radius: :rounded,
+          gradient: nil,
+          icon: nil,
+          icon_position: :left,
+          icon_only: false,
+          loading: false,
+          loading_text: nil,
+          disabled: false,
+          additional_classes: "",
+          use_default_controller: true,
+          href: nil,
+          method: :get,
+          target: nil,
+          underline: true,
+          dropdown: false,
+          dropdown_items: nil,
+          dropdown_icon: nil,
+          theme: nil,
+          copy_to_clipboard: nil,
+          confirm: nil,
+          tooltip: nil,
+          animation: nil,
+          **options
+        )
+          content_for(:head) { stylesheet_link_tag "wilday_ui/components/button/index", media: "all" }
+
+          options[:data] ||= {}
+          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)
+            options[:style] = theme_styles if theme_styles.present?
+          end
+
+          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, copy_to_clipboard, confirm, tooltip, animation, use_default_controller)
+
+          setup_features(active_features, options, use_default_controller)
+          setup_loading_data_attributes(options, loading_text) if active_features[:loading]
+
+          setup_link_options(options, href, target, method)
+
+          if dropdown
+            setup_dropdown_options(
+              options,
+              additional_classes,
+              dropdown,
+              dropdown_items,
+              wrapper_data
+            )
+          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
+
+          if animation
+            additional_classes = setup_animation_options(
+              options,
+              additional_classes,
+              animation,
+              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,
+            gradient_class,
+            icon,
+            icon_position,
+            icon_only,
+            loading,
+            loading_text,
+            additional_classes,
+            disabled,
+            options,
+            href,
+            underline,
+            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
+
+        def get_variant_class(variant)
+          {
+            solid: "w-button-solid",
+            subtle: "w-button-subtle",
+            surface: "w-button-surface",
+            outline: "w-button-outline",
+            ghost: "w-button-ghost",
+            plain: "w-button-plain"
+          }[variant] || "w-button-solid"
+        end
+
+        def get_size_class(size)
+          {
+            small: "w-button-small",
+            medium: "w-button-medium",
+            large: "w-button-large"
+          }[size] || "w-button-medium"
+        end
+
+        def get_radius_class(radius)
+          {
+            rounded: "w-button-rounded",
+            pill: "w-button-pill",
+            square: "w-button-square"
+          }[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]
+
+          Rails.logger.debug "[Wilday UI] Processing theme for variant: #{variant}"
+          Rails.logger.debug "[Wilday UI] Theme config: #{theme.inspect}"
+
+          styles = {}
+
+          if theme[:name]
+            theme_colors = get_theme_colors(variant, theme[:name])
+            styles.merge!(theme_colors)
+          end
+
+          if theme[:custom]
+            custom_styles = process_custom_theme(theme[:custom])
+            styles.merge!(custom_styles)
+          end
+
+          generate_styles(styles)
+        end
+
+        def get_theme_colors(variant, theme_name)
+          config = WildayUi::Config::Theme.configuration
+          # Convert theme_name to string
+          return {} unless config&.colors&.[](theme_name.to_s)
+
+          colors = config.colors[theme_name.to_s]
+
+          case variant
+          when :solid
+            {
+              "--w-button-color": "#FFFFFF",
+              "--w-button-bg": colors["500"],
+              "--w-button-hover-bg": colors["600"],
+              "--w-button-active-bg": colors["700"]
+            }
+          when :subtle
+            {
+              "--w-button-color": colors["700"],
+              "--w-button-bg": colors["50"],
+              "--w-button-hover-bg": colors["100"],
+              "--w-button-hover-color": colors["800"]
+            }
+          when :surface
+            {
+              "--w-button-color": colors["700"],
+              "--w-button-bg": colors["50"],
+              "--w-button-hover-bg": colors["100"],
+              "--w-button-border": colors["200"],
+              "--w-button-hover-border": colors["300"]
+            }
+          when :outline
+            {
+              "--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["600"],
+              "--w-button-hover-bg": colors["50"],
+              "--w-button-hover-color": colors["700"]
+            }
+          when :plain
+            {
+              "--w-button-color": colors["600"],
+              "--w-button-hover-color": colors["700"],
+              "--w-button-active-color": colors["800"]
+            }
+          else
+            {}
+          end
+        end
+
+        def process_custom_theme(custom)
+          return {} unless custom
+
+          {
+            "--w-button-color": custom[:color],
+            "--w-button-bg": custom[:background],
+            "--w-button-border": custom[:border],
+            "--w-button-hover-color": custom.dig(:hover, :color),
+            "--w-button-hover-bg": custom.dig(:hover, :background),
+            "--w-button-hover-border": custom.dig(:hover, :border),
+            "--w-button-active-color": custom.dig(:active, :color),
+            "--w-button-active-bg": custom.dig(:active, :background),
+            "--w-button-active-border": custom.dig(:active, :border)
+          }.compact
+        end
+
+        def generate_styles(styles)
+          styles.map { |k, v| "#{k}: #{v}" }.join(";")
+        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_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 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)
+
+          render partial: "wilday_ui/button",
+            locals: {
+              content: content,
+              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,
+              loading: loading,
+              loading_text: loading_text,
+              additional_classes: additional_classes,
+              disabled: disabled,
+              html_options: options,
+              href: href,
+              underline: underline,
+              dropdown: dropdown,
+              dropdown_items: dropdown_items,
+              dropdown_icon: dropdown_icon,
+              wrapper_options: wrapper_options
+            }
+        end
+      end
+    end
+  end
+end