okonomi_ui_kit 0.1.8 → 0.1.9

data/app/helpers/okonomi_ui_kit/application_helper.rb

@@ -1,4 +1,12 @@
 module OkonomiUiKit
   module ApplicationHelper
+    def active_link_to(path, options = {}, &block)
+      path_to_check = path.split("?").first
+      if (options[:exact] && request.path == path_to_check) || (!options[:exact] && request.path.include?(path_to_check))
+        options[:class] = options[:active_class].presence || [ options[:class], "active" ].compact.join(" ")
+      end
+
+      link_to(path, options, &block)
+    end
   end
 end

data/app/helpers/okonomi_ui_kit/attribute_section_helper.rb

@@ -3,7 +3,7 @@ module OkonomiUiKit
     def attribute_section(title:, description: nil, **options, &block)
       builder = AttributeSectionBuilder.new(self)
 
-      render 'okonomi/attribute_sections/section',
+      render "okonomi/attribute_sections/section",
              builder: builder,
              title: title,
              description: description,
@@ -22,11 +22,11 @@ module OkonomiUiKit
       def attribute(label, value = nil, **options, &block)
         content = if block_given?
                     capture(&block)
-                  elsif value.respond_to?(:call)
+        elsif value.respond_to?(:call)
                     value.call
-                  else
+        else
                     value
-                  end
+        end
 
         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")
@@ -47,4 +47,4 @@ module OkonomiUiKit
       end
     end
   end
-end
+end

data/app/helpers/okonomi_ui_kit/component.rb

@@ -1,14 +1,13 @@
 module OkonomiUiKit
   class Component
-    attr_reader :view, :theme
+    attr_reader :view
 
-    def initialize(view, theme)
+    def initialize(view)
       @view = view
-      @theme = theme || OkonomiUiKit::Theme::DEFAULT_THEME
     end
 
     def template_path
-      "okonomi/components/#{name}/#{name}"
+      [ self.class.name.underscore.gsub("okonomi_ui_kit/", "okonomi/"), name ].join("/")
     end
 
     def name
@@ -50,7 +49,8 @@ module OkonomiUiKit
 
       raise ArgumentError, "Styles must be a Hash" unless styles.is_a?(Hash)
 
-      internal_styles_registry[theme] = styles if styles.is_a?(Hash)
+      internal_styles_registry[theme] ||= {}
+      internal_styles_registry[theme] = deep_merge(internal_styles_registry[theme], styles)
     end
 
     def self.internal_styles_registry
@@ -84,7 +84,11 @@ module OkonomiUiKit
     end
 
     def self.config_class_name
-      "OkonomiUiKit::Configs::#{name.demodulize}"
+      "#{config_namespace.name}::#{name.demodulize}"
+    end
+
+    def self.config_namespace
+      OkonomiUiKit::Configs
     end
 
     def self.config_class?

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

@@ -2,7 +2,7 @@ module OkonomiUiKit
   module Components
     class Alert < OkonomiUiKit::Component
       def render(title, options = {}, &block)
-        view.render(template_path, title:, options: options.with_indifferent_access, &block)
+        view.render(template_path, title: title, options: options.with_indifferent_access, &block)
       end
     end
   end

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

@@ -7,9 +7,9 @@ module OkonomiUiKit
 
         classes = [
           style(:base),
-          style(:severities, severity) || '',
-          options.delete(:class) || ''
-        ].reject(&:blank?).join(' ')
+          style(:severities, severity) || "",
+          options.delete(:class) || ""
+        ].reject(&:blank?).join(" ")
 
         view.tag.span(text, class: classes, **options)
       end

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

@@ -28,7 +28,7 @@ module OkonomiUiKit
         }
       end
 
-      def initialize(template, options = {})
+      def initialize(template)
         super
         @items = []
         @builder = BreadcrumbBuilder.new(self)
@@ -36,9 +36,9 @@ module OkonomiUiKit
 
       def render(options = {}, &block)
         return "" if block.nil?
-        
+
         block.call(@builder)
-        view.render("okonomi/components/breadcrumbs/breadcrumbs", 
+        view.render("okonomi/components/breadcrumbs/breadcrumbs",
           component: self,
           items: @items,
           options: options
@@ -66,4 +66,4 @@ module OkonomiUiKit
       end
     end
   end
-end
+end

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

@@ -1,13 +1,13 @@
 module OkonomiUiKit
   module Components
     class ButtonBase < OkonomiUiKit::Component
-      def build_button_class(variant:, color:, classes: '')
+      def build_button_class(variant:, color:, classes: "")
         [
-          style(:root) || '',
-          style(variant.to_sym, :root) || '',
-          style(variant.to_sym, :colors, color.to_sym) || '',
-          classes,
-        ].reject(&:blank?).join(' ')
+          style(:root) || "",
+          style(variant.to_sym, :root) || "",
+          style(variant.to_sym, :colors, color.to_sym) || "",
+          classes
+        ].reject(&:blank?).join(" ")
       end
 
       register_styles :default do

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

@@ -7,8 +7,8 @@ module OkonomiUiKit
         options ||= {}
         options = options.with_indifferent_access
 
-        variant = (options.delete(:variant) || 'contained').to_sym
-        color = (options.delete(:color) || 'default').to_sym
+        variant = (options.delete(:variant) || "contained").to_sym
+        color = (options.delete(:color) || "default").to_sym
 
         options[:class] = build_button_class(variant: variant, color: color, classes: options[:class])
 
@@ -20,4 +20,4 @@ module OkonomiUiKit
       end
     end
   end
-end
+end

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

@@ -7,8 +7,8 @@ module OkonomiUiKit
         html_options ||= {}
         html_options = html_options.with_indifferent_access
 
-        variant = (html_options.delete(:variant) || 'contained').to_sym
-        color = (html_options.delete(:color) || 'default').to_sym
+        variant = (html_options.delete(:variant) || "contained").to_sym
+        color = (html_options.delete(:color) || "default").to_sym
 
         html_options[:class] = build_button_class(variant: variant, color: color, classes: html_options[:class])
 
@@ -20,4 +20,4 @@ module OkonomiUiKit
       end
     end
   end
-end
+end

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

@@ -8,61 +8,65 @@ module OkonomiUiKit
 
         # Extract component-specific options
         language = options.delete(:language) || options.delete(:lang)
-        variant = (options.delete(:variant) || 'default').to_sym
-        size = (options.delete(:size) || 'default').to_sym
+        variant = (options.delete(:variant) || "default").to_sym
+        size = (options.delete(:size) || "default").to_sym
         wrap = options.delete(:wrap) != false # Default to true
 
         # Build classes
         classes = build_classes(variant: variant, size: size, wrap: wrap, custom_class: options.delete(:class))
 
         # Escape HTML entities in content
-        escaped_content = if block_given?
-                            view.capture(&block)
-                          elsif content
-                            content
-                          else
-                            ""
-                          end
+        raw_content = if block_given?
+                        view.capture(&block)
+        elsif content
+                        content
+        else
+                        ""
+        end
+
+        escaped_content = html_escape(raw_content)
 
         view.render(
           template_path,
-          content: escaped_content.strip.html_safe,
+          content: escaped_content,
           options: options,
           classes: classes,
           language: language
         )
       end
 
+      register_styles :default do
+        {
+          base: "",
+          variants: {
+            default: "bg-gray-900 text-gray-100 p-4 rounded-lg",
+            inline: "bg-gray-100 text-gray-900 px-1 py-0.5 rounded text-sm font-mono",
+            minimal: "bg-gray-900 text-gray-100 p-3 rounded text-xs"
+          },
+          sizes: {
+            xs: "text-xs",
+            sm: "text-sm",
+            default: "text-sm",
+            lg: "text-base"
+          },
+          wrap: {
+            true: "overflow-x-auto",
+            false: "overflow-hidden"
+          }
+        }
+      end
+
       private
 
       def build_classes(variant:, size:, wrap:, custom_class: nil)
-        base_classes = theme.dig(:components, :code, :base) || "bg-gray-900 text-gray-100 rounded-lg"
-
-        variant_classes = case variant
-                          when :inline
-                            "bg-gray-100 text-gray-900 px-1 py-0.5 rounded text-sm font-mono"
-                          when :minimal
-                            "bg-gray-900 text-gray-100 p-3 rounded text-xs"
-                          else
-                            # :default
-                            "bg-gray-900 text-gray-100 p-4 rounded-lg"
-                          end
-
-        size_classes = case size
-                       when :xs
-                         "text-xs"
-                       when :sm
-                         "text-sm"
-                       when :lg
-                         "text-base"
-                       else
-                         # :default
-                         "text-sm"
-                       end
-
-        wrap_classes = wrap ? "overflow-x-auto" : "overflow-hidden"
+        base_classes = style(:base) || ""
+        variant_classes = style(:variants, variant) || ""
+        size_classes = style(:sizes, size) || ""
+        # Convert boolean wrap to symbol for hash access
+        wrap_key = wrap ? :true : :false
+        wrap_classes = style(:wrap, wrap_key) || ""
 
-        [base_classes, variant_classes, size_classes, wrap_classes, custom_class].compact.join(' ')
+        [ base_classes, variant_classes, size_classes, wrap_classes, custom_class ].reject(&:blank?).join(" ")
       end
 
       def html_escape(content)
@@ -70,4 +74,4 @@ module OkonomiUiKit
       end
     end
   end
-end
+end

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

@@ -0,0 +1,130 @@
+module OkonomiUiKit
+  module Components
+    class ConfirmationModal < OkonomiUiKit::Component
+      def render(options = {}, &block)
+        options = options.with_indifferent_access
+        
+        # Extract and validate required options
+        title = options.fetch(:title) { raise ArgumentError, "title is required" }
+        message = options.fetch(:message) { raise ArgumentError, "message is required" }
+        
+        # Extract optional parameters with defaults
+        confirm_text = options.delete(:confirm_text) || "Confirm"
+        cancel_text = options.delete(:cancel_text) || "Cancel"
+        variant = (options.delete(:variant) || :warning).to_sym
+        size = (options.delete(:size) || :md).to_sym
+        auto_open = options.delete(:auto_open) || false
+        
+        # Build component options
+        modal_options = {
+          title: title,
+          message: message,
+          confirm_text: confirm_text,
+          cancel_text: cancel_text,
+          variant: variant,
+          size: size,
+          auto_open: auto_open,
+          has_custom_actions: block_given?,
+          data: options.delete(:data) || {}
+        }.merge(options)
+        
+        view.render(template_path, component: self, options: modal_options, &block)
+      end
+      
+      # Register default styles for the confirmation modal
+      register_styles :default do
+        {
+          # Modal container and backdrop
+          backdrop: "fixed inset-0 bg-gray-500/75 transition-opacity duration-300 ease-out opacity-0",
+          container: "fixed inset-0 z-10 w-screen overflow-y-auto",
+          wrapper: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0",
+          
+          # Modal panel
+          panel: {
+            base: "relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all duration-300 ease-out sm:my-8 sm:w-full sm:p-6 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+            sizes: {
+              sm: "sm:max-w-sm",
+              md: "sm:max-w-lg",
+              lg: "sm:max-w-2xl",
+              xl: "sm:max-w-4xl"
+            }
+          },
+          
+          # Close button
+          close_button: {
+            wrapper: "absolute top-0 right-0 hidden pt-4 pr-4 sm:block",
+            button: "rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none",
+            icon: {
+              file: "heroicons/outline/x-mark",
+              class: "size-6"
+            }
+          },
+          
+          # Icon configuration
+          icon: {
+            wrapper: "mx-auto flex size-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:size-10",
+            class: "size-6",
+            variants: {
+              warning: {
+                wrapper: "bg-red-100",
+                icon: "text-red-600",
+                file: "heroicons/outline/exclamation-triangle"
+              },
+              info: {
+                wrapper: "bg-blue-100",
+                icon: "text-blue-600",
+                file: "heroicons/outline/information-circle"
+              },
+              success: {
+                wrapper: "bg-green-100",
+                icon: "text-green-600",
+                file: "heroicons/outline/check-circle"
+              }
+            }
+          },
+          
+          # Content styling
+          content: {
+            wrapper: "sm:flex sm:items-start",
+            text_wrapper: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left",
+            title: "text-base font-semibold text-gray-900",
+            message: "mt-2 text-sm text-gray-500"
+          },
+          
+          # Actions container
+          actions: {
+            wrapper: "mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"
+          }
+        }
+      end
+      
+      # Helper methods to build classes from styles
+      def modal_panel_class(size)
+        [
+          style(:panel, :base),
+          style(:panel, :sizes, size)
+        ].compact.join(" ")
+      end
+      
+      def modal_icon_wrapper_class(variant)
+        [
+          style(:icon, :wrapper),
+          style(:icon, :variants, variant, :wrapper)
+        ].compact.join(" ")
+      end
+      
+      def modal_icon_class(variant)
+        [
+          style(:icon, :class),
+          style(:icon, :variants, variant, :icon)
+        ].compact.join(" ")
+      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
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/check_box_with_label.rb

@@ -0,0 +1,38 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class CheckBoxWithLabel < OkonomiUiKit::FormComponent
+        def render(form, method, options = {}, checked_value = true, unchecked_value = false)
+          options = options.with_indifferent_access
+
+          view.content_tag(:div, class: style(:wrapper)) do
+            view.concat form.check_box(
+              method,
+              {
+                class: style(:input, :root)
+              }.merge(options || {}),
+              checked_value,
+              unchecked_value
+            )
+            view.concat view.render(template_path, component: self, method: method, options: options, form: form)
+          end
+        end
+
+        register_styles :default do
+          {
+            wrapper: "flex gap-x-3",
+            input: {
+              root: "size-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600"
+            },
+            label: {
+              root: "text-sm/6 font-medium text-gray-900"
+            },
+            hint: {
+              root: "text-gray-500"
+            }
+          }
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/collection_select.rb

@@ -0,0 +1,57 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class CollectionSelect < OkonomiUiKit::FormComponent
+        def render(form, method, collection, value_method, text_method, options = {}, html_options = {})
+          html_options = html_options.with_indifferent_access
+          css = build_select_classes(form, method, html_options)
+
+          select_html = form.collection_select(method, collection, value_method, text_method, options, html_options.merge(class: css))
+          icon_html = view.ui.icon(
+            style(:icon, :file),
+            class: style(:icon, :class)
+          )
+
+          view.content_tag(:div, class: style(:wrapper)) do
+            view.concat(select_html)
+            view.concat(icon_html)
+          end
+        end
+
+        register_styles :default do
+          {
+            wrapper: "relative",
+            root: "w-full appearance-none border-0 pl-3 pr-10 py-2 rounded-md ring-1 focus:outline-none focus-within:ring-1",
+            error: "bg-danger-100 text-danger-400 ring-danger-400 focus:ring-danger-600",
+            valid: "text-default-700 ring-gray-300 focus-within:ring-gray-400",
+            icon: {
+              file: "heroicons/mini/chevron-down",
+              class: "absolute right-2 top-1/2 -translate-y-1/2 size-5 text-gray-400 pointer-events-none"
+            }
+          }
+        end
+
+        private
+
+        def build_select_classes(form, method, html_options)
+          css = [
+            style(:root),
+            when_errors(form, method, style(:error), style(:valid)),
+            html_options[:class]
+          ].compact.join(" ").split(" ").uniq
+
+          TWMerge.merge(css)
+        end
+
+        def when_errors(form, method, value, default_value = nil)
+          key = method.to_s.gsub("_id", "").to_sym
+          if form.object.errors.include?(key) || form.object.errors.include?(method)
+            value
+          else
+            default_value
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/date_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class DateField < OkonomiUiKit::Components::Forms::InputBase
+        type :date
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/datetime_local_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class DatetimeLocalField < OkonomiUiKit::Components::Forms::InputBase
+        type :datetime_local
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/email_field.rb

@@ -0,0 +1,9 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class EmailField < OkonomiUiKit::Components::Forms::InputBase
+        type :email
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/field.rb

@@ -0,0 +1,24 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class Field < OkonomiUiKit::FormComponent
+        def render(form, field_id = nil, options = {}, &block)
+          view.render(template_path, component: self, form: form, field_id: field_id, options: options, &block)
+        end
+
+        register_styles :default do
+          {
+            wrapper: "w-full flex flex-col gap-2",
+            header: "flex justify-between items-center",
+            hint: {
+              trigger: "text-primary-600 text-sm hover:cursor-help",
+              content: "text-xs absolute border rounded-md bg-gray-100 border-gray-600 text-gray-600 p-1 z-10"
+            },
+            content: "block",
+            error: "mt-1 text-danger-600 text-sm"
+          }
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/field_set.rb

@@ -0,0 +1,17 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class FieldSet < OkonomiUiKit::FormComponent
+        def render(form, options = {}, &block)
+          view.render(template_path, component: self, options: options, form: form, &block)
+        end
+
+        register_styles :default do
+          {
+            root: "w-full flex flex-col gap-4 col-span-1 sm:col-span-3 md:col-span-5"
+          }
+        end
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/components/forms/input_base.rb

@@ -0,0 +1,57 @@
+module OkonomiUiKit
+  module Components
+    module Forms
+      class InputBase < OkonomiUiKit::FormComponent
+        def render_arguments(object, method, options = {})
+          css = input_field_classes(object, method, self.class.type_value, options)
+          [ method, { autocomplete: "off" }.merge(options).merge(class: css) ]
+        end
+
+        register_styles :default do
+          {
+            root: "w-full border-0 px-3 py-2 rounded-md ring-1 focus:outline-none focus-within:ring-1",
+            error: "bg-danger-100 text-danger-400 ring-danger-400 focus:ring-danger-600",
+            valid: "text-default-700 ring-gray-300 focus-within:ring-gray-400",
+            disabled: "disabled:bg-gray-50 disabled:cursor-not-allowed"
+          }
+        end
+
+        def self.type(type)
+          @type = type
+        end
+
+        def self.type_value
+          @type || :text
+        end
+
+        def input_field_classes(object, method, type, options, include_disabled: true)
+          css_classes = OkonomiUiKit::TWMerge.merge_all(
+            style(:root),
+            when_errors(
+              object,
+              method,
+              style(:error),
+              style(:valid)
+            ),
+            options[:class]
+          )
+
+          if include_disabled
+            css_classes = OkonomiUiKit::TWMerge.merge_all(css_classes, style(:disabled))
+          end
+
+          css_classes
+        end
+
+        def when_errors(object, 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
+      end
+    end
+  end
+end