okonomi_ui_kit 0.1.7 → 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
@@ -30,7 +29,7 @@ module OkonomiUiKit
       internal_styles = internal_styles_registry[internal_name] || {}
       config_styles = config_styles_registry[config_name] || {}
 
-      {}.deep_merge(internal_styles).deep_merge(config_styles)
+      deep_merge({}, internal_styles, config_styles)
     end
 
     def internal_styles_registry
@@ -45,36 +44,60 @@ module OkonomiUiKit
       :default
     end
 
-    def self.config_styles_registry
-      return Hash.new({}) unless config_class?
+    def self.register_styles(theme = :default, &block)
+      styles = block.call if block_given?
 
-      config_class.styles_registry
+      raise ArgumentError, "Styles must be a Hash" unless styles.is_a?(Hash)
+
+      internal_styles_registry[theme] ||= {}
+      internal_styles_registry[theme] = deep_merge(internal_styles_registry[theme], styles)
     end
 
-    def self.config_class
-      return nil unless config_class?
+    def self.internal_styles_registry
+      @internal_styles_registry ||= deep_merge({}, parent_styles_registry)
+    end
 
-      Object.const_get(config_class_name)
+    def self.parent_styles_registry
+      if superclass.respond_to?(:internal_styles_registry)
+        superclass.internal_styles_registry
+      else
+        {}
+      end
     end
 
-    def self.config_class_name
-      "OkonomiUiKit::Configs::#{name.demodulize}"
+    def self.config_styles_registry
+      @config_styles_registry ||= config_classes.reverse.reduce({}) do |hash, klass|
+        deep_merge(hash, klass.styles_registry)
+      end
     end
 
-    def self.config_class?
-      Object.const_defined?(config_class_name)
+    def self.config_classes
+      @config_classes ||= resolve_config_classes
     end
 
-    def self.register_styles(theme = :default, &block)
-      styles = block.call if block_given?
+    def self.resolve_config_classes
+      classes = []
+      classes << Object.const_get(config_class_name) if config_class?
+      classes += superclass.config_classes if superclass <= OkonomiUiKit::Component
 
-      raise ArgumentError, "Styles must be a Hash" unless styles.is_a?(Hash)
+      classes.compact
+    end
 
-      internal_styles_registry[theme] = styles if styles.is_a?(Hash)
+    def self.config_class_name
+      "#{config_namespace.name}::#{name.demodulize}"
     end
 
-    def self.internal_styles_registry
-      @internal_styles_registry ||= {}
+    def self.config_namespace
+      OkonomiUiKit::Configs
+    end
+
+    def self.config_class?
+      Object.const_defined?(config_class_name)
+    end
+
+    def self.deep_merge(*hashes)
+      OkonomiUiKit::TWMerge.deep_merge_all(*hashes)
     end
+    delegate :deep_merge, to: :class
   end
 end

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

@@ -3,13 +3,13 @@ module OkonomiUiKit
     class Badge < OkonomiUiKit::Component
       def render(text, options = {})
         options = options.with_indifferent_access
-        severity = (options.delete(:severity) || :default).to_sym
-        
+        severity = (options.delete(:severity) || options.delete(:variant) || :default).to_sym
+
         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

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module OkonomiUiKit
+  module Components
+    class Breadcrumbs < Component
+      register_styles do
+        {
+          base: "flex",
+          container: "isolate flex -space-x-px rounded-lg shadow-sm",
+          nav: "",
+          list: "flex items-center space-x-4",
+          item: {
+            base: "",
+            first: "",
+            last: "",
+            current: ""
+          },
+          link: {
+            base: "ml-4 text-sm font-medium text-gray-500 hover:text-gray-700",
+            first: "text-sm font-medium text-gray-500 hover:text-gray-700",
+            current: "ml-4 text-sm font-medium text-gray-500"
+          },
+          separator: {
+            base: "size-5 shrink-0 text-gray-400",
+            wrapper: ""
+          },
+          icon: "size-5 text-gray-400"
+        }
+      end
+
+      def initialize(template)
+        super
+        @items = []
+        @builder = BreadcrumbBuilder.new(self)
+      end
+
+      def render(options = {}, &block)
+        return "" if block.nil?
+
+        block.call(@builder)
+        view.render("okonomi/components/breadcrumbs/breadcrumbs",
+          component: self,
+          items: @items,
+          options: options
+        )
+      end
+
+      def add_item(text, path = nil, current: false, icon: nil)
+        @items << {
+          text: text,
+          path: path,
+          current: current,
+          icon: icon
+        }
+      end
+
+      class BreadcrumbBuilder
+        def initialize(component)
+          @component = component
+        end
+
+        def link(text, path = nil, current: false, icon: nil, **options)
+          # Ignore extra options for now
+          @component.add_item(text, path, current: current, icon: icon)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,56 @@
+module OkonomiUiKit
+  module Components
+    class ButtonBase < OkonomiUiKit::Component
+      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(" ")
+      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",
+            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"
+            }
+          },
+          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",
+            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"
+            }
+          },
+          text: {
+            root: "text-base",
+            colors: {
+              default: "text-default-700 hover:underline",
+              primary: "text-primary-600 hover:underline",
+              secondary: "text-secondary-600 hover:underline",
+              success: "text-success-600 hover:underline",
+              danger: "text-danger-600 hover:underline",
+              warning: "text-warning-600 hover:underline",
+              info: "text-info-600 hover:underline"
+            }
+          }
+        }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+module OkonomiUiKit
+  module Components
+    class ButtonTag < OkonomiUiKit::Components::ButtonBase
+      def render(name = nil, options = {}, &block)
+        options, name = options, block if block_given?
+
+        options ||= {}
+        options = options.with_indifferent_access
+
+        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])
+
+        if block_given?
+          view.button_tag(options, &block)
+        else
+          view.button_tag(name, options)
+        end
+      end
+    end
+  end
+end

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

@@ -1,14 +1,14 @@
 module OkonomiUiKit
   module Components
-    class ButtonTo < OkonomiUiKit::Component
+    class ButtonTo < OkonomiUiKit::Components::ButtonBase
       def render(name = nil, options = nil, html_options = nil, &block)
         html_options, options, name = options, name, block if block_given?
 
         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])
 
@@ -18,17 +18,6 @@ module OkonomiUiKit
           view.button_to(name, options, html_options)
         end
       end
-
-      private
-
-      def build_button_class(variant:, color:, classes: '')
-        [
-          theme.dig(:components, :link, :root) || '',
-          theme.dig(:components, :link, variant.to_sym, :root) || '',
-          theme.dig(:components, :link, variant.to_sym, :colors, color.to_sym) || '',
-          classes,
-        ].reject(&:blank?).join(' ')
-      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