wilday_ui 0.4.0 → 0.5.0

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

@@ -22,11 +22,12 @@ module WildayUi
 
       def w_button(
         content,
-        variant: :primary,
+        variant: :solid,
         size: :medium,
         radius: :rounded,
         icon: nil,
         icon_position: :left,
+        icon_only: false,
         loading: false,
         loading_text: nil,
         disabled: false,
@@ -35,17 +36,25 @@ module WildayUi
         href: nil,
         method: :get,
         target: nil,
+        underline: true,
         dropdown: false,
         dropdown_items: nil,
         dropdown_icon: nil,
+        theme: nil,
         **options
       )
-        content_for(:head) { stylesheet_link_tag "wilday_ui/button", media: "all" }
+        content_for(:head) { stylesheet_link_tag "wilday_ui/components/button/index", media: "all" }
 
         options[:data] ||= {}
         wrapper_data = {}
         wrapper_options = nil
 
+        # 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)
@@ -86,12 +95,14 @@ module WildayUi
           radius_class,
           icon,
           icon_position,
+          icon_only,
           loading,
           loading_text,
           additional_classes,
           disabled,
           options,
           href,
+          underline,
           dropdown,
           dropdown_items,
           dropdown_icon,
@@ -101,12 +112,23 @@ module WildayUi
 
       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)
         {
-          primary: "w-button-primary",
-          secondary: "w-button-secondary",
-          outline: "w-button-outline"
-        }[variant] || "w-button-primary"
+          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)
@@ -125,6 +147,95 @@ module WildayUi
         }[radius] || "w-button-rounded"
       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"]
+          }
+        when :subtle
+          {
+            "--w-button-color": colors["500"],
+            "--w-button-bg": colors["50"],
+            "--w-button-hover-bg": colors["100"]
+          }
+        when :surface
+          {
+            "--w-button-color": colors["500"],
+            "--w-button-bg": colors["50"],
+            "--w-button-hover-bg": colors["100"],
+            "--w-button-border": colors["100"]
+          }
+        when :outline
+          {
+            "--w-button-color": colors["500"],
+            "--w-button-border": colors["200"],
+            "--w-button-hover-bg": colors["50"]
+          }
+        when :ghost
+          {
+            "--w-button-color": colors["500"],
+            "--w-button-hover-bg": colors["50"]
+          }
+        when :plain
+          {
+            "--w-button-color": colors["500"],
+            "--w-button-hover-color": colors["600"]
+          }
+        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 determine_active_features(loading, dropdown, loading_text = nil, use_default_controller = true)
         features = {}
         features[:loading] = true if (loading || loading_text.present?) && use_default_controller
@@ -247,9 +358,10 @@ module WildayUi
         "#{base}#{index}"
       end
 
-      def render_button(content, variant_class, size_class, radius_class, icon, icon_position,
-                       loading, loading_text, additional_classes, disabled, options, href,
+      def render_button(content, variant_class, size_class, radius_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,
@@ -258,12 +370,14 @@ module WildayUi
             radius_class: radius_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,

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

@@ -15,6 +15,8 @@ export default class extends Controller {
     if (position) this.positionValue = position;
     if (align) this.alignValue = align;
 
+    this.updatePosition();
+
     // Set up hover events if trigger is hover
     if (this.triggerValue === "hover") {
       this.element.addEventListener("mouseenter", () => {
@@ -44,6 +46,7 @@ export default class extends Controller {
 
   handleHover(show) {
     if (show) {
+      this.updatePosition();
       this.menuTarget.classList.add("show");
       this.buttonTarget.classList.add("active");
       this.buttonTarget.setAttribute("aria-expanded", "true");
@@ -60,8 +63,13 @@ export default class extends Controller {
 
     if (this.isOpen) {
       this.menuTarget.classList.remove("show");
+      this.buttonTarget.classList.remove("active");
+      this.buttonTarget.setAttribute("aria-expanded", "false");
     } else {
+      this.updatePosition();
       this.menuTarget.classList.add("show");
+      this.buttonTarget.classList.add("active");
+      this.buttonTarget.setAttribute("aria-expanded", "true");
     }
   }
 
@@ -256,7 +264,8 @@ export default class extends Controller {
   }
 
   updatePosition() {
-    const menuElement = this.element.querySelector(".w-button-dropdown-menu");
+    // const menuElement = this.element.querySelector(".w-button-dropdown-menu");
+    const menuElement = this.menuTarget;
     const position = this.hasPositionValue ? this.positionValue : "bottom";
     const align = this.hasAlignValue ? this.alignValue : "start";
 

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

@@ -1,8 +1,18 @@
 <%
 # Prepare base HTML options
 html_options = {
-  class: ["w-button", variant_class, size_class, radius_class, additional_classes, ("w-button-loading" if loading)].compact.join(" "),
+  class: [
+    "w-button",
+    variant_class,
+    size_class,
+    radius_class,
+    additional_classes,
+    ("w-button-loading" if loading),
+    ("w-button-icon-only" if icon_only),
+    (href.present? ? (local_assigns[:underline] == false ? "w-button-no-underline" : "w-button-underline") : nil)
+  ].compact.join(" "),
   disabled: disabled || loading,
+  style: local_assigns[:html_options]&.dig(:style),
   "aria-busy": loading,
   "aria-disabled": disabled || loading,
   "aria-expanded": dropdown ? "false" : nil,

data/app/views/wilday_ui/button/_content.html.erb

@@ -2,21 +2,25 @@
   <span class="w-button-spinner"></span>
   <%= loading_text %>
 <% else %>
-  <% if icon_position == :left && icon.present? %>
-    <i class="w-button-icon-left <%= icon %>"></i>
-  <% end %>
-  
-  <%= content %>
+  <% if icon_only %>
+    <i class="w-button-icon <%= icon %>"></i>
+  <% else %>
+    <% if icon_position == :left && icon.present? %>
+      <i class="w-button-icon-left <%= icon %>"></i>
+    <% end %>
+    
+    <%= content %>
 
-  <% if dropdown %>
-    <% if dropdown_icon.present? %>
-      <i class="w-button-dropdown-arrow <%= dropdown_icon %>"></i>
-    <% else %>
-      <span class="w-button-dropdown-arrow"></span>
+    <% if dropdown %>
+      <% if dropdown_icon.present? %>
+        <i class="w-button-dropdown-arrow <%= dropdown_icon %>"></i>
+      <% else %>
+        <span class="w-button-dropdown-arrow"></span>
+      <% end %>
+    <% end %>
+    
+    <% if icon_position == :right && icon.present? %>
+      <i class="w-button-icon-right <%= icon %>"></i>
     <% end %>
-  <% end %>
-  
-  <% if icon_position == :right && icon.present? %>
-    <i class="w-button-icon-right <%= icon %>"></i>
   <% end %>
 <% end %>

data/lib/wilday_ui/config/theme.rb

@@ -0,0 +1,138 @@
+# lib/wilday_ui/config/theme.rb
+module WildayUi
+  module Config
+    class Theme
+      class << self
+        attr_accessor :configuration
+      end
+
+      def self.configure
+        self.configuration ||= Configuration.new
+        yield(configuration) if block_given?
+      end
+
+      class Configuration
+        attr_accessor :colors
+
+        def initialize
+          @colors = default_colors
+        end
+
+        private
+
+        def default_colors
+          {
+            "primary" => {
+              "50" => "#E5F0FF",
+              "100" => "#CCE0FF",
+              "200" => "#99C2FF",
+              "300" => "#66A3FF",
+              "400" => "#3385FF",
+              "500" => "#0066FF",
+              "600" => "#0052CC",
+              "700" => "#003D99",
+              "800" => "#002966",
+              "900" => "#001433"
+            },
+            "secondary" => {
+              "50" => "#F8F9FA",
+              "100" => "#E9ECEF",
+              "200" => "#DEE2E6",
+              "300" => "#CED4DA",
+              "400" => "#ADB5BD",
+              "500" => "#6C757D",
+              "600" => "#5A6268",
+              "700" => "#495057",
+              "800" => "#343A40",
+              "900" => "#212529"
+            },
+            "success" => {
+              "50" => "#ECFDF5",
+              "100" => "#D1FAE5",
+              "200" => "#A7F3D0",
+              "300" => "#6EE7B7",
+              "400" => "#34D399",
+              "500" => "#10B981",
+              "600" => "#059669",
+              "700" => "#047857",
+              "800" => "#065F46",
+              "900" => "#064E3B"
+            },
+            "danger" => {
+              "50" => "#FEE2E2",
+              "100" => "#FECACA",
+              "200" => "#FCA5A5",
+              "300" => "#F87171",
+              "400" => "#EF4444",
+              "500" => "#DC2626",
+              "600" => "#B91C1C",
+              "700" => "#991B1B",
+              "800" => "#7F1D1D",
+              "900" => "#450A0A"
+            },
+            "warning" => {
+              "50" => "#FFFBEB",
+              "100" => "#FEF3C7",
+              "200" => "#FDE68A",
+              "300" => "#FCD34D",
+              "400" => "#FBBF24",
+              "500" => "#F59E0B",
+              "600" => "#D97706",
+              "700" => "#B45309",
+              "800" => "#92400E",
+              "900" => "#78350F"
+            },
+            "info" => {
+              "50" => "#EFF6FF",
+              "100" => "#DBEAFE",
+              "200" => "#BFDBFE",
+              "300" => "#93C5FD",
+              "400" => "#60A5FA",
+              "500" => "#3B82F6",
+              "600" => "#2563EB",
+              "700" => "#1D4ED8",
+              "800" => "#1E40AF",
+              "900" => "#1E3A8A"
+            },
+            "light" => {
+              "50" => "#FFFFFF",
+              "100" => "#F8F9FA",
+              "200" => "#F1F3F5",
+              "300" => "#E9ECEF",
+              "400" => "#DEE2E6",
+              "500" => "#CED4DA",
+              "600" => "#ADB5BD",
+              "700" => "#868E96",
+              "800" => "#495057",
+              "900" => "#212529"
+            },
+            "dark" => {
+              "50" => "#F9FAFB",
+              "100" => "#F3F4F6",
+              "200" => "#E5E7EB",
+              "300" => "#D1D5DB",
+              "400" => "#9CA3AF",
+              "500" => "#1F2937",
+              "600" => "#111827",
+              "700" => "#374151",
+              "800" => "#1F2937",
+              "900" => "#111827"
+            },
+            "link" => {
+              "50" => "#EFF6FF",
+              "100" => "#DBEAFE",
+              "200" => "#BFDBFE",
+              "300" => "#93C5FD",
+              "400" => "#60A5FA",
+              "500" => "#2563EB",
+              "600" => "#1D4ED8",
+              "700" => "#1E40AF",
+              "800" => "#1E3A8A",
+              "900" => "#1E3A8A"
+            }
+          }
+        end
+      end
+    end
+  end
+end

data/lib/wilday_ui/engine.rb

@@ -1,9 +1,22 @@
 require "wilday_ui/version_check"
+require "wilday_ui/config/theme"
 
 module WildayUi
   class Engine < ::Rails::Engine
     isolate_namespace WildayUi
 
+    # Add lib to autoload paths
+    config.autoload_paths << root.join("lib")
+    config.eager_load_paths << root.join("lib")
+
+    # Initialize theme configuration
+    initializer "wilday_ui.configuration", before: :load_config_initializers do
+      Rails.application.reloader.to_prepare do
+        Rails.logger.info "[Wilday UI] Theme configuration initialized."
+        WildayUi::Config::Theme.configuration ||= WildayUi::Config::Theme::Configuration.new
+      end
+    end
+
     # Automatically check for updates
     initializer "wilday_ui.version_check", after: :load_config_initializers do
       Rails.application.reloader.to_prepare do
@@ -19,27 +32,6 @@ module WildayUi
       end
     end
 
-    # # Configure asset paths and automatic precompilation
-    # initializer "wilday_ui.assets" do |app|
-    #   app.config.assets.paths << root.join("app/assets/stylesheets")
-    #   app.config.assets.paths << root.join("app/javascript")
-    #   app.config.assets.paths << root.join("app/assets/builds")
-
-    #   Rails.logger.info "[Wilday UI] Asset paths added: #{app.config.assets.paths}"
-
-    #   # Automatically precompile all CSS files in wilday_ui directory
-    #   css_files = Dir[root.join("app/assets/stylesheets/wilday_ui/**/*.css")].map do |file|
-    #     file.split("app/assets/stylesheets/").last
-    #   end
-
-    #   # Precompile only the bundled JavaScript file
-    #   app.config.assets.precompile += css_files
-    #   app.config.assets.precompile += %w[wilday_ui/index.js]
-
-    #   Rails.logger.info "[Wilday UI] CSS files precompiled: #{css_files}"
-    #   Rails.logger.info "[Wilday UI] JS files precompiled: wilday_ui/index.js"
-    # end
-
     # Configure asset paths and automatic precompilation
     initializer "wilday_ui.assets" do |app|
       # Add engine asset paths

data/lib/wilday_ui/version.rb

@@ -1,3 +1,3 @@
 module WildayUi
-  VERSION = "0.4.0"
+  VERSION = "0.5.0"
 end

data/lib/wilday_ui.rb

@@ -1,5 +1,6 @@
 require "wilday_ui/version"
 require "wilday_ui/engine"
+require "wilday_ui/config/theme"
 
 module WildayUi
   # Your code goes here...

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: wilday_ui
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - davidwinalda
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-12-15 00:00:00.000000000 Z
+date: 2024-12-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -44,6 +44,15 @@ files:
 - app/assets/config/wilday_ui_manifest.js
 - app/assets/stylesheets/wilday_ui/application.css
 - app/assets/stylesheets/wilday_ui/button.css
+- app/assets/stylesheets/wilday_ui/components/button/base.css
+- app/assets/stylesheets/wilday_ui/components/button/features/dropdown.css
+- app/assets/stylesheets/wilday_ui/components/button/features/icons.css
+- app/assets/stylesheets/wilday_ui/components/button/features/loading.css
+- app/assets/stylesheets/wilday_ui/components/button/features/old_variants.css
+- app/assets/stylesheets/wilday_ui/components/button/features/radius.css
+- app/assets/stylesheets/wilday_ui/components/button/features/sizes.css
+- app/assets/stylesheets/wilday_ui/components/button/features/variants.css
+- app/assets/stylesheets/wilday_ui/components/button/index.css
 - app/controllers/wilday_ui/application_controller.rb
 - app/helpers/wilday_ui/application_helper.rb
 - app/helpers/wilday_ui/components/button_helper.rb
@@ -62,6 +71,7 @@ files:
 - config/routes.rb
 - lib/tasks/wilday_ui_tasks.rake
 - lib/wilday_ui.rb
+- lib/wilday_ui/config/theme.rb
 - lib/wilday_ui/engine.rb
 - lib/wilday_ui/version.rb
 - lib/wilday_ui/version_check.rb