okonomi_ui_kit 0.1.8 → 0.1.10

data/app/helpers/okonomi_ui_kit/form_builder.rb

@@ -7,202 +7,111 @@ module OkonomiUiKit
     end
 
     def field_set(options = {}, &block)
-      @template.render('okonomi/forms/tailwind/field_set', options:, form: self, &block)
+      ui.forms.field_set(self, options, &block)
     end
 
     def field(field_id = nil, options = {}, &block)
-      @template.render('okonomi/forms/tailwind/field', field_id:, options:, form: self, &block)
+      ui.forms.field(self, field_id, options, &block)
     end
 
     def upload_field(method, options = {})
-      @template.render('okonomi/forms/tailwind/upload_field', method:, options:, form: self)
+      ui.forms.upload_field(self, method, options)
     end
 
     def text_field(method, options = {})
-      css = input_field_classes(method, :text, options)
-      super(method, { autocomplete: "off" }.merge(options).merge(class: css))
+      super(*resolve_arguments(:text_field, method, options))
     end
 
     def email_field(method, options = {})
-      css = input_field_classes(method, :email, options)
-      super(method, options.merge(class: css))
+      super(*resolve_arguments(:email_field, method, options))
     end
 
     def url_field(method, options = {})
-      css = input_field_classes(method, :url, options)
-      super(method, options.merge(class: css))
+      super(*resolve_arguments(:url_field, method, options))
+    end
+
+    def resolve_arguments(component_name, *args)
+      component = ui.forms.resolve_component(component_name)
+
+      if component.nil?
+        args
+      else
+        component.render_arguments(object, *args)
+      end
     end
 
     def password_field(method, options = {})
-      css = input_field_classes(method, :password, options)
-      super(method, options.merge(class: css))
+      super(*resolve_arguments(:password_field, method, options))
     end
 
     def number_field(method, options = {})
-      css = input_field_classes(method, :number, options)
-      super(method, options.merge(class: css))
+      super(*resolve_arguments(:number_field, method, options))
     end
 
     def telephone_field(method, options = {})
-      css = input_field_classes(method, :telephone_field, options)
-      super(method, options.merge(class: css))
+      super(*resolve_arguments(:telephone_field, method, options))
     end
 
     def search_field(method, options = {})
-      css = input_field_classes(method, :search, options)
-      super(method, options.merge(class: css))
+      super(*resolve_arguments(:search_field, method, options))
     end
 
     def date_field(method, options = {})
-      css = input_field_classes(method, :date, options)
-      super(method, options.merge(class: css))
+      super(*resolve_arguments(:date_field, method, options))
     end
 
     def datetime_local_field(method, options = {})
-      css = input_field_classes(method, :datetime_local, options)
-      super(method, options.merge(class: css))
+      super(*resolve_arguments(:datetime_local_field, method, options))
     end
 
     def time_field(method, options = {})
-      css = input_field_classes(method, :time, options)
-      super(method, options.merge(class: css))
+      super(*resolve_arguments(:time_field, method, options))
     end
 
     def text_area(method, options = {})
-      css = input_field_classes(method, :textarea, options, include_disabled: false)
-      super(method, options.merge(class: css))
+      super(*resolve_arguments(:text_area, method, options))
     end
 
     def select(method, choices = nil, options = {}, html_options = {}, &block)
-      css = [
-        ui.get_theme.dig(:components, :select, :root),
-        when_errors(
-          method,
-          ui.get_theme.dig(:components, :select, :error),
-          ui.get_theme.dig(:components, :select, :valid)
-        ),
-        html_options[:class]
-      ].compact.join(' ').split(' ').uniq
-
-      select_html = super(method, choices, options, html_options.merge(class: css), &block)
-      icon_html = @template.ui.icon(
-        ui.get_theme.dig(:components, :select, :icon, :file),
-        class: ui.get_theme.dig(:components, :select, :icon, :class)
-      )
-
-      @template.content_tag(:div, class: ui.get_theme.dig(:components, :select, :wrapper)) do
-        @template.concat(select_html)
-        @template.concat(icon_html)
-      end
+      ui.forms.select(self, method, choices, options, html_options, &block)
     end
 
     def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
-      css = [
-        ui.get_theme.dig(:components, :select, :root),
-        when_errors(
-          method,
-          ui.get_theme.dig(:components, :select, :error),
-          ui.get_theme.dig(:components, :select, :valid)
-        ),
-        html_options[:class]
-      ].compact.join(' ').split(' ').uniq
-
-      select_html = super(method, collection, value_method, text_method, options, html_options.merge(class: css))
-      icon_html = @template.ui.icon(
-        ui.get_theme.dig(:components, :select, :icon, :file),
-        class: ui.get_theme.dig(:components, :select, :icon, :class)
-      )
-
-      @template.content_tag(:div, class: ui.get_theme.dig(:components, :select, :wrapper)) do
-        @template.concat(select_html)
-        @template.concat(icon_html)
-      end
+      ui.forms.collection_select(self, method, collection, value_method, text_method, options, html_options)
     end
 
     def multi_select(method, **options)
-      @template.render(
-        partial: 'okonomi/forms/tailwind/multi_select',
-        locals: {
-          form: self,
-          method: method,
-          options: options
-        }
-      )
+      ui.forms.multi_select(self, method, options)
     end
 
     def label(method, text = nil, options = {}, &block)
-      base_classes = ui.get_theme.dig(:components, :label, :root)
-      super(method, text, merge_class(options, base_classes), &block)
+      ui.forms.label(self, method, text, options, &block)
     end
 
     def submit(value = nil, options = {})
-      variant = options.delete(:variant) || 'contained'
-      color = options.delete(:color) || 'primary'
+      value, options = nil, value if value.is_a?(Hash)
+      value ||= submit_default_value
 
-      base_classes = ui.button_class(variant:, color:)
-      super(value, merge_class(options, base_classes))
+      options ||= {}
+      options[:type] = "submit"
+      options[:variant] ||= "contained"
+      options[:color] ||= "primary"
+
+      ui.button_tag(value, options)
     end
 
     def check_box_with_label(method, options = {}, checked_value = true, unchecked_value = false)
-      @template.content_tag(:div, class: ui.get_theme.dig(:components, :checkbox, :wrapper)) do
-        @template.concat check_box(
-                           method,
-                           {
-                             class: ui.get_theme.dig(:components, :checkbox, :input, :root)
-                           }.merge(options || {}),
-                           checked_value,
-                           unchecked_value
-                         )
-        @template.concat @template.render('okonomi/forms/tailwind/checkbox_label', method:, options:, form: self)
-      end
+      ui.forms.check_box_with_label(self, method, options, checked_value, unchecked_value)
     end
 
     def show_if(field:, equals:, &block)
-      field_id = "#{object_name}_#{field}"
-      @template.tag.div(
-        class: "hidden",
-        data: {
-          controller: "form-field-visibility",
-          "form-field-visibility-field-id-value": field_id,
-          "form-field-visibility-equals-value": equals
-        },
-        &block
-      )
+      ui.forms.show_if(self, field: field, equals: equals, &block)
     end
 
     private
 
-    def input_field_classes(method, type, options, include_disabled: true)
-      css_classes = [
-        ui.get_theme.dig(:components, :input, :types, type, :root) || ui.get_theme.dig(:components, :input, :types, :text, :root),
-        when_errors(
-          method,
-          ui.get_theme.dig(:components, :input, :types, type, :error) || ui.get_theme.dig(:components, :input, :types, :text, :error),
-          ui.get_theme.dig(:components, :input, :types, type, :valid) || ui.get_theme.dig(:components, :input, :types, :text, :valid)
-        ),
-        options[:class]
-      ]
-
-      if include_disabled
-        css_classes << (
-          ui.get_theme.dig(:components, :input, :types, type, :disabled) || ui.get_theme.dig(:components, :input, :types, :text, :disabled)
-        )
-      end
-
-      css_classes.compact.join(' ').split(' ').uniq
-    end
-
-    def when_errors(method, value, default_value = nil)
-      key = method.to_s.gsub('_id', '').to_sym
-      if object.errors.include?(key) || object.errors.include?(method)
-        value
-      else
-        default_value
-      end
-    end
-
     def merge_class(options, new_class)
-      options[:class] = [options[:class], new_class].compact.join(" ")
+      options[:class] = OkonomiUiKit::TWMerge.merge(options[:class] || "", new_class)
       options
     end
   end

data/app/helpers/okonomi_ui_kit/form_component.rb

@@ -0,0 +1,7 @@
+module OkonomiUiKit
+  class FormComponent < Component
+    def self.namespace
+      OkonomiUiKit::Components::Forms
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/svg_icons.rb

@@ -13,16 +13,16 @@ module OkonomiUiKit
 
   def self.file_path(name)
     # First check in the host application
-    host_path = Rails.root.join('app', 'assets', 'images', "#{name}.svg")
+    host_path = Rails.root.join("app", "assets", "images", "#{name}.svg")
     return host_path if File.exist?(host_path)
-    
+
     # Fall back to the engine's icons
-    engine_path = OkonomiUiKit::Engine.root.join('app', 'assets', 'images', "#{name}.svg")
+    engine_path = OkonomiUiKit::Engine.root.join("app", "assets", "images", "#{name}.svg")
     return engine_path if File.exist?(engine_path)
-    
+
     nil
   end
-  
+
   # Deprecated, kept for backwards compatibility
   def self.file_name(name)
     file_path(name)

data/app/helpers/okonomi_ui_kit/t_w_merge.rb

@@ -11,7 +11,7 @@ module OkonomiUiKit
       tokens.each do |tok|
         variants, base = split_variants(tok)
         group = conflict_group_for(base)
-        key = [variants, group || "literal:#{base}"]
+        key = [ variants, group || "literal:#{base}" ]
 
         if index_by_key.key?(key)
           pos = index_by_key[key]
@@ -22,7 +22,13 @@ module OkonomiUiKit
         end
       end
 
-      result.join(' ')
+      result.join(" ")
+    end
+
+    def self.merge_all(*args)
+      args.compact.reduce do |merged, arg|
+        merge(merged, arg)
+      end
     end
 
     # Deep-merge two hashes; when both values are strings, merge as Tailwind classes.
@@ -54,39 +60,39 @@ module OkonomiUiKit
     # Conflict groups (minimal, extensible). More specific patterns first.
     CONFLICT_RULES = [
       # Typography
-      [/^text-(?:xs|sm|base|lg|xl|\d+xl|\[\S+\])$/, :text_size],
-      [/^text-(?:inherit|current|transparent|black|white|[a-z]+-\d{2,3}|[a-z]+-950|\[.+\])$/, :text_color],
-      [/^font-(?:thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/, :font_weight],
-      [/^leading-(?:none|tight|snug|normal|relaxed|loose|\d+|\[.+\])$/, :line_height],
-      [/^tracking-(?:tighter|tight|normal|wide|widest|\[.+\])$/, :letter_spacing],
+      [ /^text-(?:xs|sm|base|lg|xl|\d+xl|\[\S+\])$/, :text_size ],
+      [ /^text-(?:inherit|current|transparent|black|white|[a-z]+-\d{2,3}|[a-z]+-950|\[.+\])$/, :text_color ],
+      [ /^font-(?:thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/, :font_weight ],
+      [ /^leading-(?:none|tight|snug|normal|relaxed|loose|\d+|\[.+\])$/, :line_height ],
+      [ /^tracking-(?:tighter|tight|normal|wide|widest|\[.+\])$/, :letter_spacing ],
 
       # Display & position
-      [/^(?:hidden|block|inline|inline-block|flex|inline-flex|grid|inline-grid|table|inline-table|flow-root)$/, :display],
-      [/^(?:static|fixed|absolute|relative|sticky)$/, :position],
+      [ /^(?:hidden|block|inline|inline-block|flex|inline-flex|grid|inline-grid|table|inline-table|flow-root)$/, :display ],
+      [ /^(?:static|fixed|absolute|relative|sticky)$/, :position ],
 
       # Flexbox
-      [/^flex-(?:row|col|row-reverse|col-reverse)$/, :flex_direction],
-      [/^flex-(?:wrap|nowrap|wrap-reverse)$/, :flex_wrap],
-      [/^items-(?:start|end|center|baseline|stretch)$/, :align_items],
-      [/^justify-(?:start|end|center|between|around|evenly)$/, :justify_content],
+      [ /^flex-(?:row|col|row-reverse|col-reverse)$/, :flex_direction ],
+      [ /^flex-(?:wrap|nowrap|wrap-reverse)$/, :flex_wrap ],
+      [ /^items-(?:start|end|center|baseline|stretch)$/, :align_items ],
+      [ /^justify-(?:start|end|center|between|around|evenly)$/, :justify_content ],
 
       # Borders
-      [/^(?:border|border-(?:\d+|\[\S+\]))$/, :border_width_overall],
-      [/^border-[trblxy](?:-\d+|\[\S+\])?$/, :border_width_side],
-      [/^border-(?:solid|dashed|dotted|double|none)$/, :border_style],
-      [/^border-(?:inherit|current|transparent|black|white|[a-z]+-\d{2,3}|[a-z]+-950|\[.+\])$/, :border_color],
+      [ /^(?:border|border-(?:\d+|\[\S+\]))$/, :border_width_overall ],
+      [ /^border-[trblxy](?:-\d+|\[\S+\])?$/, :border_width_side ],
+      [ /^border-(?:solid|dashed|dotted|double|none)$/, :border_style ],
+      [ /^border-(?:inherit|current|transparent|black|white|[a-z]+-\d{2,3}|[a-z]+-950|\[.+\])$/, :border_color ],
 
       # Radius
-      [/^rounded(?:-(?:none|sm|md|lg|xl|2xl|3xl|full|\[.+\]))?$/, :rounded_overall],
-      [/^rounded-(?:t|r|b|l|tl|tr|br|bl)-(?:none|sm|md|lg|xl|2xl|3xl|full|\[.+\])$/, :rounded_corner],
+      [ /^rounded(?:-(?:none|sm|md|lg|xl|2xl|3xl|full|\[.+\]))?$/, :rounded_overall ],
+      [ /^rounded-(?:t|r|b|l|tl|tr|br|bl)-(?:none|sm|md|lg|xl|2xl|3xl|full|\[.+\])$/, :rounded_corner ],
 
       # Background
-      [/^bg-(?:inherit|current|transparent|black|white|[a-z]+-\d{2,3}|[a-z]+-950|\[.+\])$/, :bg_color],
+      [ /^bg-(?:inherit|current|transparent|black|white|[a-z]+-\d{2,3}|[a-z]+-950|\[.+\])$/, :bg_color ],
 
       # Overflow & opacity
-      [/^overflow-(?:auto|hidden|visible|scroll|clip)$/, :overflow],
-      [/^overflow-[xy]-(?:auto|hidden|visible|scroll|clip)$/, :overflow_axis],
-      [/^opacity-(?:\d{1,3}|\[.+\])$/, :opacity],
+      [ /^overflow-(?:auto|hidden|visible|scroll|clip)$/, :overflow ],
+      [ /^overflow-[xy]-(?:auto|hidden|visible|scroll|clip)$/, :overflow_axis ],
+      [ /^opacity-(?:\d{1,3}|\[.+\])$/, :opacity ]
     ].freeze
 
     class << self
@@ -94,9 +100,9 @@ module OkonomiUiKit
 
       # "sm:hover:text-lg" -> ["sm:hover", "text-lg"]
       def split_variants(token)
-        parts = token.split(':')
-        return ["", token] if parts.size == 1
-        [parts[0..-2].join(':'), parts[-1]]
+        parts = token.split(":")
+        return [ "", token ] if parts.size == 1
+        [ parts[0..-2].join(":"), parts[-1] ]
       end
 
       def conflict_group_for(base)
@@ -105,4 +111,4 @@ module OkonomiUiKit
       end
     end
   end
-end
+end

data/app/helpers/okonomi_ui_kit/ui_helper.rb

@@ -8,74 +8,33 @@ module OkonomiUiKit
       include ActionView::Helpers::TagHelper
       include ActionView::Helpers::CaptureHelper
 
-      def initialize(template)
-        @template = template
-      end
-
-      def theme(t = {}, &block)
-        old_theme = get_theme
-
-        @_okonomi_ui_kit_theme = {}.merge(old_theme).merge(t || {})
-
-        yield(@_okonomi_ui_kit_theme)
+      attr_reader :template, :namespace
 
-        @_okonomi_ui_kit_theme = old_theme
-      end
-
-      def get_theme
-        @_okonomi_ui_kit_theme ||= OkonomiUiKit::Theme::DEFAULT_THEME
+      def initialize(template, namespace: OkonomiUiKit::Components)
+        @template = template
+        @namespace = namespace
       end
 
-      def button_class(variant: 'contained', color: 'default', classes: '')
-        [
-          get_theme.dig(:components, :link, :root) || '',
-          get_theme.dig(:components, :link, variant.to_sym, :root) || '',
-          get_theme.dig(:components, :link, variant.to_sym, :colors, color.to_sym) || '',
-          classes,
-        ].join(' ')
-      end
+      def method_missing(method_name, *args, &block)
+        component = resolve_component(method_name)
 
-      def confirmation_modal(title:, message:, confirm_text: "Confirm", cancel_text: "Cancel", variant: :warning, size: :md, **options, &block)
-        modal_options = {
-          title: title,
-          message: message, 
-          confirm_text: confirm_text,
-          cancel_text: cancel_text,
-          variant: variant,
-          size: size,
-          has_custom_actions: block_given?,
-          **options
-        }
-        @template.render("okonomi/modals/confirmation_modal", options: modal_options, ui: self, &block)
+        if component
+          component.render(*args, &block)
+        else
+          super
+        end
       end
 
-      def modal_data_attributes(options)
-        return "" unless options[:data]
-        
-        options[:data].map { |k, v| "data-#{k.to_s.dasherize}=\"#{v}\"" }.join(' ').html_safe
-      end
+      def resolve_component(name)
+        component_name = "#{namespace.name}::#{name.to_s.camelize}"
 
-      def modal_panel_class(size)
-        [
-          get_theme.dig(:components, :modal, :panel, :base),
-          get_theme.dig(:components, :modal, :panel, :sizes, size)
-        ].compact.join(' ')
-      end
+        return nil unless Object.const_defined?(component_name)
 
-      def modal_icon_wrapper_class(variant)
-        [
-          get_theme.dig(:components, :modal, :icon, :wrapper),
-          get_theme.dig(:components, :modal, :icon, :variants, variant, :wrapper)
-        ].compact.join(' ')
+        component_name.constantize.new(@template)
       end
 
-      def method_missing(method_name, *args, &block)
-        component_name = "OkonomiUiKit::Components::#{method_name.to_s.camelize}"
-        if Object.const_defined?(component_name)
-          return component_name.constantize.new(@template, get_theme).render(*args, &block)
-        else
-          super
-        end
+      def forms
+        @forms ||= self.class.new(@template, namespace: OkonomiUiKit::Components::Forms)
       end
     end
   end

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

@@ -19,6 +19,12 @@ export default class extends Controller {
     this.menuTarget.classList.add("hidden")
   }
 
+  closeDeferred() {
+    setTimeout(() => {
+      this.close()
+    }, 50)
+  }
+
   closeOnClickOutside(event) {
     if (!this.element.contains(event.target)) {
       this.close()

data/app/views/okonomi/components/confirmation_modal/_confirmation_modal.html.erb

@@ -0,0 +1,76 @@
+  <div data-controller="modal"
+     data-modal-size-value="<%= options[:size] %>" 
+     <% if options[:auto_open] %>data-modal-auto-open-value="true"<% end %>
+     class="relative z-10" 
+     style="display: none;" 
+     data-modal-target="container"
+     <%= component.modal_data_attributes(options) %>>
+  
+  <!-- Backdrop -->
+  <div class="<%= component.style(:backdrop) %>" 
+       data-modal-target="backdrop" 
+       data-action="click->modal#close"
+       aria-hidden="true"></div>
+  
+  <!-- Modal container -->
+  <div class="<%= component.style(:container) %>">
+    <div class="<%= component.style(:wrapper) %>">
+      <!-- Modal panel -->
+      <div class="<%= component.modal_panel_class(options[:size]) %>" 
+           data-modal-target="panel"
+           role="dialog" 
+           aria-modal="true" 
+           aria-labelledby="modal-title">
+        
+        <!-- Close button -->
+        <div class="<%= component.style(:close_button, :wrapper) %>">
+          <button type="button" 
+                  class="<%= component.style(:close_button, :button) %>" 
+                  data-action="click->modal#close">
+            <span class="sr-only">Close</span>
+            <%= ui.icon(component.style(:close_button, :icon, :file), 
+                         class: component.style(:close_button, :icon, :class)) %>
+          </button>
+        </div>
+        
+        <!-- Content -->
+        <div class="<%= component.style(:content, :wrapper) %>">
+          <!-- Icon -->
+          <div class="<%= component.modal_icon_wrapper_class(options[:variant]) %>">
+            <%= ui.icon(component.style(:icon, :variants, options[:variant], :file), 
+                         class: component.modal_icon_class(options[:variant])) %>
+          </div>
+          
+          <!-- Text content -->
+          <div class="<%= component.style(:content, :text_wrapper) %>">
+            <h3 id="modal-title" class="<%= component.style(:content, :title) %>">
+              <%= options[:title] %>
+            </h3>
+            <div class="<%= component.style(:content, :message) %>">
+              <p><%= options[:message] %></p>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Actions -->
+        <div class="<%= component.style(:actions, :wrapper) %>">
+          <% if options[:has_custom_actions] %>
+            <%= yield %>
+          <% else %>
+            <% button_color = options[:variant] == :warning ? :danger : options[:variant] %>
+            <%= ui.button_to options[:confirm_text], "#", 
+                variant: :contained, 
+                color: button_color,
+                class: "sm:ml-3 sm:w-auto",
+                data: { action: "click->modal#confirm" } %>
+            <%= ui.button_to options[:cancel_text], "#", 
+                variant: :outlined, 
+                color: :default,
+                class: "mt-3 sm:mt-0 sm:w-auto",
+                data: { action: "click->modal#close" } %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>