okonomi_ui_kit 0.1.9 → 0.1.10

data/app/helpers/okonomi_ui_kit/components/button_base.rb

@@ -10,31 +10,99 @@ module OkonomiUiKit
         ].reject(&:blank?).join(" ")
       end
 
+      # Extracts and normalizes icon configuration from options
+      # Returns [icon_config, updated_options]
+      # icon_config will be nil or { path: "icon/path", position: :start/:end }
+      def extract_icon_config(options)
+        return [nil, options] unless options.is_a?(Hash)
+        
+        icon_option = options.delete(:icon)
+        return [nil, options] unless icon_option
+        
+        icon_config = case icon_option
+        when String
+          { path: icon_option, position: :start }
+        when Hash
+          if icon_option[:start]
+            { path: icon_option[:start], position: :start }
+          elsif icon_option[:end]
+            { path: icon_option[:end], position: :end }
+          else
+            # Invalid hash format, ignore
+            nil
+          end
+        else
+          nil
+        end
+        
+        [icon_config, options]
+      end
+
+      # Renders button content with optional icon
+      # icon_config: { path: "icon/path", position: :start/:end }
+      # content: String or block content
+      # block: Optional block for content
+      def render_button_content(icon_config, content = nil, &block)
+        icon_html = if icon_config
+          view.ui.icon(icon_config[:path], class: style(:icon, icon_config[:position]))
+        end
+        
+        content_html = if block_given?
+          view.capture(&block)
+        else
+          content
+        end
+        
+        # Check if we have actual content (not empty/nil)
+        has_content = content_html.present?
+        
+        if icon_config && has_content
+          # Both icon and content - wrap in flex container with gap
+          wrapper_class = "inline-flex items-center gap-1.5"
+          
+          if icon_config[:position] == :end
+            view.content_tag(:span, class: wrapper_class) do
+              view.safe_join([content_html, icon_html].compact)
+            end
+          else
+            view.content_tag(:span, class: wrapper_class) do
+              view.safe_join([icon_html, content_html].compact)
+            end
+          end
+        elsif icon_config
+          # Icon only - no wrapper needed
+          icon_html
+        else
+          # Content only
+          content_html
+        end
+      end
+
       register_styles :default do
         {
           root: "hover:cursor-pointer text-sm",
           outlined: {
-            root: "inline-flex border items-center justify-center px-2 py-1 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
+            root: "inline-flex border items-center justify-center px-2 py-1 rounded-md font-medium focus:outline-none",
             colors: {
-              default: "bg-white text-default-700 border-default-700 hover:bg-default-50",
-              primary: "bg-white text-primary-600 border-primary-600 hover:bg-primary-50",
-              secondary: "bg-white text-secondary-600 border-secondary-600 hover:bg-secondary-50",
-              success: "bg-white text-success-600 border-success-600 hover:bg-success-50",
-              danger: "bg-white text-danger-600 border-danger-600 hover:bg-danger-50",
-              warning: "bg-white text-warning-600 border-warning-600 hover:bg-warning-50",
-              info: "bg-white text-info-600 border-info-600 hover:bg-info-50"
+              default: "bg-white text-default-700 border-default-700 hover:bg-default-50 active:bg-default-100",
+              primary: "bg-white text-primary-600 border-primary-600 hover:bg-primary-50 active:bg-primary-100",
+              secondary: "bg-white text-secondary-600 border-secondary-600 hover:bg-secondary-50 active:bg-secondary-100",
+              success: "bg-white text-success-600 border-success-600 hover:bg-success-50 active:bg-success-100",
+              danger: "bg-white text-danger-600 border-danger-600 hover:bg-danger-50 active:bg-danger-100",
+              warning: "bg-white text-warning-600 border-warning-600 hover:bg-warning-50 active:bg-warning-100",
+              info: "bg-white text-info-600 border-info-600 hover:bg-info-50 active:bg-info-100"
             }
           },
           contained: {
-            root: "inline-flex border items-center justify-center px-2 py-1 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
+            root: "inline-flex border items-center justify-center px-2 py-1 rounded-md font-medium focus:outline-none",
             colors: {
-              default: "border-default-700 bg-default-600 text-white hover:bg-default-700",
-              primary: "border-primary-700 bg-primary-600 text-white hover:bg-primary-700",
-              secondary: "border-secondary-700 bg-secondary-600 text-white hover:bg-secondary-700",
-              success: "border-success-700 bg-success-600 text-white hover:bg-success-700",
-              danger: "border-danger-700 bg-danger-600 text-white hover:bg-danger-700",
-              warning: "border-warning-700 bg-warning-600 text-white hover:bg-warning-700",
-              info: "border-info-700 bg-info-600 text-white hover:bg-info-700"
+              default: "border-default-700 bg-default-600 text-white hover:bg-default-700 active:bg-default-500",
+              primary: "border-primary-700 bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-500",
+              secondary: "border-secondary-700 bg-secondary-600 text-white hover:bg-secondary-700 active:bg-secondary-500",
+              success: "border-success-700 bg-success-600 text-white hover:bg-success-700 active:bg-success-500",
+              danger: "border-danger-700 bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-500",
+              warning: "border-warning-700 bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-500",
+              info: "border-info-700 bg-info-600 text-white hover:bg-info-700 active:bg-info-500"
             }
           },
           text: {
@@ -48,6 +116,10 @@ module OkonomiUiKit
               warning: "text-warning-600 hover:underline",
               info: "text-info-600 hover:underline"
             }
+          },
+          icon: {
+            start: "size-3.5",
+            end: "size-3.5"
           }
         }
       end

data/app/helpers/okonomi_ui_kit/components/button_tag.rb

@@ -2,20 +2,26 @@ module OkonomiUiKit
   module Components
     class ButtonTag < OkonomiUiKit::Components::ButtonBase
       def render(name = nil, options = {}, &block)
-        options, name = options, block if block_given?
+        # Handle different parameter patterns
+        if name.is_a?(Hash) && options.empty?
+          # Called as button_tag(options) with block
+          options = name
+          name = nil
+        end
 
         options ||= {}
         options = options.with_indifferent_access
 
         variant = (options.delete(:variant) || "contained").to_sym
         color = (options.delete(:color) || "default").to_sym
+        
+        # Extract icon configuration
+        icon_config, options = extract_icon_config(options)
 
         options[:class] = build_button_class(variant: variant, color: color, classes: options[:class])
 
-        if block_given?
-          view.button_tag(options, &block)
-        else
-          view.button_tag(name, options)
+        view.button_tag(options) do
+          render_button_content(icon_config, name, &block)
         end
       end
     end

data/app/helpers/okonomi_ui_kit/components/button_to.rb

@@ -9,13 +9,14 @@ module OkonomiUiKit
 
         variant = (html_options.delete(:variant) || "contained").to_sym
         color = (html_options.delete(:color) || "default").to_sym
+        
+        # Extract icon configuration
+        icon_config, html_options = extract_icon_config(html_options)
 
         html_options[:class] = build_button_class(variant: variant, color: color, classes: html_options[:class])
 
-        if block_given?
-          view.button_to(options, html_options, &block)
-        else
-          view.button_to(name, options, html_options)
+        view.button_to(options, html_options) do
+          render_button_content(icon_config, name, &block)
         end
       end
     end

data/app/helpers/okonomi_ui_kit/components/dropdown_button.rb

@@ -0,0 +1,147 @@
+module OkonomiUiKit
+  module Components
+    class DropdownButton < ButtonBase
+      def render(options = {}, &block)
+        raise ArgumentError, "DropdownButton requires a block" unless block_given?
+
+        options = options.with_indifferent_access
+        variant = (options.delete(:variant) || "contained").to_sym
+        color = (options.delete(:color) || "default").to_sym
+
+        base_button_classes = build_button_class(
+          variant: variant,
+          color: color,
+          classes: options.delete(:class)
+        )
+
+        menu_classes = [
+          style(:menu, :root),
+          options.delete(:menu_class)
+        ].compact.join(" ")
+
+        dropdown_builder = DropdownBuilder.new(view)
+
+        view.render(
+          template_path,
+          base_button_classes: base_button_classes,
+          menu_classes: menu_classes,
+          dropdown_builder: dropdown_builder,
+          component: self,
+          options: options,
+          &block
+        )
+      end
+
+      register_styles :default do
+        {
+          primary: {
+            icon: "mr-1.5 size-3.5",
+            chevron: "size-3.5"
+          },
+          menu: {
+            root: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-200 focus:outline-none",
+            divider: "h-0 my-1 border-t border-gray-200",
+            item: {
+              root: "hover:cursor-pointer block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 hover:text-gray-900",
+              icon: "mr-3 h-5 w-5 text-gray-400",
+              label: "flex items-center"
+            }
+          }
+        }
+      end
+
+      class DropdownBuilder
+        attr_reader :view, :items, :is_first
+
+        def initialize(view)
+          @view = view
+          @items = []
+          @is_first = true
+        end
+
+        def link_to(name = nil, options = nil, html_options = nil, &block)
+          # Handle icon extraction
+          if html_options.is_a?(Hash)
+            icon = html_options.delete(:icon)
+          else
+            icon = nil
+          end
+
+          item = {
+            type: :link,
+            name: name,
+            options: options,
+            html_options: html_options || {},
+            block: block,
+            is_first: @is_first,
+            icon: icon
+          }
+          @items << item
+          @is_first = false
+        end
+
+        def button_to(name = nil, options = {}, html_options = {}, &block)
+          # Handle icon extraction
+          if html_options.is_a?(Hash)
+            icon = html_options.delete(:icon)
+          else
+            icon = nil
+          end
+
+          item = {
+            type: :button,
+            name: name,
+            options: options,
+            html_options: html_options,
+            block: block,
+            is_first: @is_first,
+            icon: icon
+          }
+          @items << item
+          @is_first = false
+        end
+        
+        def button_tag(content_or_options = nil, options = nil, &block)
+          # Handle the different argument patterns for button_tag
+          if content_or_options.is_a?(Hash)
+            options = content_or_options
+            content = nil
+          else
+            content = content_or_options
+          end
+          
+          options ||= {}
+          
+          # Handle icon extraction
+          icon = options.delete(:icon) if options.is_a?(Hash)
+          
+          # Ensure type is button for button_tag
+          options[:type] ||= "button"
+          
+          item = {
+            type: :button_tag,
+            name: content,
+            options: options,
+            block: block,
+            is_first: @is_first,
+            icon: icon
+          }
+          @items << item
+          @is_first = false
+        end
+
+        def divider
+          @items << { type: :divider }
+        end
+
+        def primary_item
+          @items.find { |item| item[:is_first] && item[:type] != :divider }
+        end
+
+        def menu_items
+          @items
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/link_to.rb

@@ -9,13 +9,14 @@ module OkonomiUiKit
 
         variant = (html_options.delete(:variant) || "text").to_sym
         color = (html_options.delete(:color) || "default").to_sym
+        
+        # Extract icon configuration
+        icon_config, html_options = extract_icon_config(html_options)
 
         html_options[:class] = build_button_class(variant: variant, color: color, classes: html_options[:class])
 
-        if block_given?
-          view.link_to(options, html_options, &block)
-        else
-          view.link_to(name, options, html_options)
+        view.link_to(options, html_options) do
+          render_button_content(icon_config, name, &block)
         end
       end
     end

data/app/helpers/okonomi_ui_kit/components/page.rb

@@ -2,9 +2,22 @@ module OkonomiUiKit
   module Components
     class Page < OkonomiUiKit::Component
       def render(options = {}, &block)
+        options = options.with_indifferent_access
+
+        classes = tw_merge(
+          style(:root),
+          options.delete(:class)
+        )
+
         builder = PageBuilder.new(view)
 
-        view.render(template_path, builder: builder, options: options, &block)
+        view.render(template_path, builder: builder, options: options.merge(class: classes), &block)
+      end
+
+      register_styles :default do
+        {
+          root: "flex flex-col gap-8 p-8"
+        }
       end
     end
 
@@ -18,17 +31,12 @@ module OkonomiUiKit
       end
 
       def page_header(**options, &block)
-        header_builder = PageHeaderBuilder.new(@template)
-        yield(header_builder) if block_given?
-        @content_parts << header_builder.render
+        @content_parts << @template.ui.page_header(options, &block)
         nil
       end
 
       def section(**options, &block)
-        section_builder = SectionBuilder.new(@template)
-        section_builder.title(options[:title]) if options[:title]
-        yield(section_builder) if block_given?
-        @content_parts << section_builder.render
+        @content_parts << @template.ui.page_section(options, &block)
         nil
       end
 
@@ -50,198 +58,5 @@ module OkonomiUiKit
         @template.capture(*args, &block)
       end
     end
-
-    class PageHeaderBuilder
-      include ActionView::Helpers::TagHelper
-      include ActionView::Helpers::CaptureHelper
-
-      def initialize(template)
-        @template = template
-        @breadcrumbs_content = nil
-        @row_content = nil
-      end
-
-      def breadcrumbs(&block)
-        @breadcrumbs_content = @template.ui.breadcrumbs(&block)
-      end
-
-      def row(&block)
-        row_builder = PageHeaderRowBuilder.new(@template)
-        yield(row_builder) if block_given?
-        @row_content = row_builder.render
-      end
-
-      def render
-        content = []
-        content << @breadcrumbs_content if @breadcrumbs_content
-        content << @row_content if @row_content
-
-        tag.div(class: "flex flex-col gap-2") do
-          @template.safe_join(content.compact)
-        end
-      end
-
-      private
-
-      def tag
-        @template.tag
-      end
-
-      def capture(*args, &block)
-        @template.capture(*args, &block)
-      end
-    end
-
-    class PageHeaderRowBuilder
-      include ActionView::Helpers::TagHelper
-      include ActionView::Helpers::CaptureHelper
-
-      def initialize(template)
-        @template = template
-        @title_content = nil
-        @actions_content = nil
-      end
-
-      def title(text, **options)
-        @title_content = tag.h1(text, class: "text-2xl font-bold leading-7 text-gray-900 truncate sm:text-3xl sm:tracking-tight")
-      end
-
-      def actions(&block)
-        @actions_content = tag.div(class: "mt-4 flex md:ml-4 md:mt-0 gap-2") do
-          capture(&block) if block_given?
-        end
-      end
-
-      def render
-        tag.div(class: "flex w-full justify-between items-center") do
-          content = []
-          content << @title_content if @title_content
-          content << @actions_content if @actions_content
-          @template.safe_join(content.compact)
-        end
-      end
-
-      private
-
-      def tag
-        @template.tag
-      end
-
-      def capture(*args, &block)
-        @template.capture(*args, &block)
-      end
-    end
-
-    class SectionBuilder
-      include ActionView::Helpers::TagHelper
-      include ActionView::Helpers::CaptureHelper
-
-      def initialize(template)
-        @template = template
-        @title_content = nil
-        @subtitle_content = nil
-        @actions_content = nil
-        @body_content = nil
-        @attributes = []
-      end
-
-      def title(text, **options)
-        @title_content = tag.h3(text, class: "text-base/7 font-semibold text-gray-900")
-      end
-
-      def subtitle(text, **options)
-        @subtitle_content = tag.p(text, class: "mt-1 max-w-2xl text-sm/6 text-gray-500")
-      end
-
-      def actions(&block)
-        @actions_content = tag.div(class: "mt-4 flex md:ml-4 md:mt-0") do
-          capture(&block) if block_given?
-        end
-      end
-
-      def body(&block)
-        if block_given?
-          # Capture the content first to see if attributes were used
-          content = capture { yield(self) }
-
-          @body_content = if @attributes.any?
-            # If attributes were added, wrap them in dl
-            tag.div do
-              tag.dl(class: "divide-y divide-gray-100") do
-                @template.safe_join(@attributes)
-              end
-            end
-          else
-            # Otherwise, just return the captured content
-            tag.div do
-              content
-            end
-          end
-        end
-      end
-
-      def attribute(label, value = nil, **options, &block)
-        content = if block_given?
-          capture(&block)
-        elsif value.respond_to?(:call)
-          value.call
-        else
-          value
-        end
-
-        attribute_html = tag.div(class: "py-6 sm:grid sm:grid-cols-3 sm:gap-4") do
-          dt_content = tag.dt(label, class: "text-sm font-medium text-gray-900")
-          dd_content = tag.dd(content, class: "mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0")
-
-          dt_content + dd_content
-        end
-
-        @attributes << attribute_html
-      end
-
-      def render
-        tag.div(class: "overflow-hidden bg-white") do
-          header_content = build_header
-          content_parts = []
-          content_parts << header_content if header_content.present?
-          content_parts << @body_content if @body_content
-          @template.safe_join(content_parts.compact)
-        end
-      end
-
-      private
-
-      def build_header
-        return nil unless @title_content || @subtitle_content || @actions_content
-
-        tag.div(class: "py-6") do
-          if @actions_content
-            tag.div(class: "flex w-full justify-between items-start") do
-              title_section = tag.div do
-                content_parts = []
-                content_parts << @title_content if @title_content
-                content_parts << @subtitle_content if @subtitle_content
-                @template.safe_join(content_parts.compact)
-              end
-
-              title_section + @actions_content
-            end
-          else
-            content_parts = []
-            content_parts << @title_content if @title_content
-            content_parts << @subtitle_content if @subtitle_content
-            @template.safe_join(content_parts.compact)
-          end
-        end
-      end
-
-      def tag
-        @template.tag
-      end
-
-      def capture(*args, &block)
-        @template.capture(*args, &block)
-      end
-    end
   end
 end

data/app/helpers/okonomi_ui_kit/components/page_header.rb

@@ -0,0 +1,111 @@
+module OkonomiUiKit
+  module Components
+    class PageHeader < OkonomiUiKit::Component
+      def render(options = {}, &block)
+        options = options.with_indifferent_access
+
+        classes = tw_merge(
+          style(:root),
+          options.delete(:class)
+        )
+
+        builder = PageHeaderBuilder.new(view, self)
+
+        view.render(template_path, builder: builder, options: options.merge(class: classes), &block)
+      end
+
+      register_styles :default do
+        {
+          root: "flex flex-col gap-2",
+          row: "flex w-full justify-between items-center",
+          actions: "mt-4 flex md:ml-4 md:mt-0 gap-2"
+        }
+      end
+    end
+
+    class PageHeaderBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::CaptureHelper
+
+      def initialize(template, component)
+        @template = template
+        @component = component
+        @breadcrumbs_content = nil
+        @row_content = nil
+      end
+
+      def breadcrumbs(&block)
+        @breadcrumbs_content = @template.ui.breadcrumbs(&block)
+      end
+
+      def row(&block)
+        row_builder = PageHeaderRowBuilder.new(@template, @component)
+        yield(row_builder) if block_given?
+        @row_content = row_builder.render
+      end
+
+      def render
+        content = []
+        content << @breadcrumbs_content if @breadcrumbs_content
+        content << @row_content if @row_content
+
+        @template.safe_join(content.compact)
+      end
+
+      private
+
+      def tag
+        @template.tag
+      end
+
+      def capture(*args, &block)
+        @template.capture(*args, &block)
+      end
+    end
+
+    class PageHeaderRowBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::CaptureHelper
+
+      attr_reader :template
+
+      delegate :ui, to: :template
+
+      def initialize(template, component)
+        @template = template
+        @component = component
+        @title_content = nil
+        @actions_content = nil
+      end
+
+      def title(text, **options)
+        @title_content = ui.typography(text, variant: "h1", **options)
+      end
+
+      def actions(&block)
+        @actions_content = tag.div(class: @component.style(:actions)) do
+          capture(&block) if block_given?
+        end
+      end
+
+      def render
+        tag.div(class: @component.style(:row)) do
+          content = []
+          content << @title_content if @title_content
+          content << @actions_content if @actions_content
+          @template.safe_join(content.compact)
+        end
+      end
+
+      private
+
+      def tag
+        @template.tag
+      end
+
+      def capture(*args, &block)
+        @template.capture(*args, &block)
+      end
+    end
+  end
+end