okonomi_ui_kit 0.1.6 → 0.1.8

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, options = {})
+        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

@@ -0,0 +1,23 @@
+module OkonomiUiKit
+  module Components
+    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
+
+        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)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,73 @@
+module OkonomiUiKit
+  module Components
+    class Code < OkonomiUiKit::Component
+      def render(content = nil, options = {}, &block)
+        options, content = content, nil if block_given?
+        options ||= {}
+        options = options.with_indifferent_access
+
+        # 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
+        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
+
+        view.render(
+          template_path,
+          content: escaped_content.strip.html_safe,
+          options: options,
+          classes: classes,
+          language: language
+        )
+      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, variant_classes, size_classes, wrap_classes, custom_class].compact.join(' ')
+      end
+
+      def html_escape(content)
+        ERB::Util.html_escape(content.to_s.strip)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,36 @@
+module OkonomiUiKit
+  module Components
+    class Icon < OkonomiUiKit::Component
+      def render(name, options = {})
+        options = options.with_indifferent_access
+        
+        # Extract specific icon options
+        variant = options.delete(:variant) || :outlined
+        width = options.delete(:width)
+        height = options.delete(:height)
+        
+        # Build classes array
+        classes = [
+          style(:base),
+          options.delete(:class)
+        ].compact.join(' ')
+        
+        view.render(
+          template_path,
+          name: name,
+          variant: variant,
+          width: width,
+          height: height,
+          classes: classes,
+          options: options
+        )
+      end
+      
+      register_styles :default do
+        {
+          base: "inline-block"
+        }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+module OkonomiUiKit
+  module Components
+    class LinkTo < 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) || 'text').to_sym
+        color = (html_options.delete(:color) || 'default').to_sym
+        
+        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)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,247 @@
+module OkonomiUiKit
+  module Components
+    class Page < OkonomiUiKit::Component
+      def render(options = {}, &block)
+        builder = PageBuilder.new(view)
+
+        view.render(template_path, builder: builder, options: options, &block)
+      end
+    end
+
+    class PageBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::CaptureHelper
+
+      def initialize(template)
+        @template = template
+        @content_parts = []
+      end
+
+      def page_header(**options, &block)
+        header_builder = PageHeaderBuilder.new(@template)
+        yield(header_builder) if block_given?
+        @content_parts << header_builder.render
+        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
+        nil
+      end
+
+      def render_content
+        @template.safe_join(@content_parts)
+      end
+      
+      def to_s
+        render_content
+      end
+
+      private
+
+      def tag
+        @template.tag
+      end
+
+      def capture(*args, &block)
+        @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