okonomi_ui_kit 0.1.0

data/app/helpers/okonomi_ui_kit/attribute_section_helper.rb

@@ -0,0 +1,50 @@
+module OkonomiUiKit
+  module AttributeSectionHelper
+    def attribute_section(title:, description: nil, **options, &block)
+      builder = AttributeSectionBuilder.new(self)
+
+      render 'okonomi_ui_kit/attribute_sections/section',
+             builder: builder,
+             title: title,
+             description: description,
+             options: options,
+             &block
+    end
+
+    class AttributeSectionBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::CaptureHelper
+
+      def initialize(template)
+        @template = template
+      end
+
+      def attribute(label, value = nil, **options, &block)
+        content = if block_given?
+                    capture(&block)
+                  elsif value.respond_to?(:call)
+                    value.call
+                  else
+                    value
+                  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")
+          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
+      end
+
+      private
+
+      def tag
+        @template.tag
+      end
+
+      def capture(*args, &block)
+        @template.capture(*args, &block)
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/badge_helper.rb

@@ -0,0 +1,23 @@
+module OkonomiUiKit
+  module BadgeHelper
+  def badge(text, severity = :default, **options)
+    color_classes = case severity.to_sym
+    when :success
+      "bg-green-100 text-green-800"
+    when :danger
+      "bg-red-100 text-red-800"
+    when :info
+      "bg-blue-100 text-blue-800"
+    when :warning
+      "bg-yellow-100 text-yellow-800"
+    else
+      "bg-gray-100 text-gray-800"
+    end
+
+    base_classes = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
+    full_classes = "#{base_classes} #{color_classes} #{options[:class] || ''}".strip
+
+    tag.span(text, class: full_classes, **options.except(:class))
+  end
+  end
+end

data/app/helpers/okonomi_ui_kit/breadcrumbs_helper.rb

@@ -0,0 +1,60 @@
+module OkonomiUiKit
+  module BreadcrumbsHelper
+  def breadcrumbs
+    content_tag(:nav, class: "flex", aria: { label: "Breadcrumb" }) do
+      content_tag(:ol, class: "flex items-center space-x-4", role: "list") do
+        builder = BreadcrumbBuilder.new(self)
+        yield builder
+        safe_join(builder.items)
+      end
+    end
+  end
+
+  class BreadcrumbBuilder
+    attr_reader :items
+
+    def initialize(view)
+      @view = view
+      @items = []
+      @first = true
+    end
+
+    def link(label, url, icon: nil, current: false)
+      if @first
+        @items << @view.content_tag(:li) do
+          @view.content_tag(:div) do
+            if icon.present?
+              @view.link_to(url, class: "text-gray-400 hover:text-gray-500") do
+                @view.svg_icon(icon, class: "size-5") + @view.content_tag(:span, label, class: "sr-only")
+              end
+            else
+              @view.content_tag(:div, class: "flex items-center") do
+                @view.link_to(label, url, class: breadcrumb_classes(current, first: true), aria: (current ? { current: "page" } : {}))
+              end
+            end
+          end
+        end
+        @first = false
+      else
+        @items << @view.content_tag(:li) do
+          @view.content_tag(:div, class: "flex items-center") do
+            chevron + @view.link_to(label, url, class: breadcrumb_classes(current), aria: (current ? { current: "page" } : {}))
+          end
+        end
+      end
+    end
+
+    private
+
+    def chevron
+      @view.svg_icon("heroicons/solid/chevron-right", class: "size-5 shrink-0 text-gray-400")
+    end
+
+    def breadcrumb_classes(current, first: false)
+      base = "text-sm font-medium"
+      base = "#{base} ml-4" unless first
+      current ? "#{base} text-gray-500" : "#{base} text-gray-500 hover:text-gray-700"
+    end
+  end
+  end
+end

data/app/helpers/okonomi_ui_kit/button_helper.rb

@@ -0,0 +1,39 @@
+module OkonomiUiKit
+  module ButtonHelper
+    def okonomi_button(text, url = nil, variant: :primary, size: :medium, **options)
+      base_classes = "inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors"
+      
+      variant_classes = case variant
+      when :primary
+        "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500"
+      when :secondary
+        "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500"
+      when :danger
+        "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500"
+      when :ghost
+        "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-500"
+      else
+        "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500"
+      end
+      
+      size_classes = case size
+      when :small
+        "px-3 py-1.5 text-sm"
+      when :medium
+        "px-4 py-2 text-sm"
+      when :large
+        "px-6 py-3 text-base"
+      else
+        "px-4 py-2 text-sm"
+      end
+      
+      options[:class] = [base_classes, variant_classes, size_classes, options[:class]].compact.join(" ")
+      
+      if url
+        link_to text, url, options
+      else
+        content_tag :button, text, options
+      end
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/form_builder.rb

@@ -0,0 +1,189 @@
+module OkonomiUiKit
+  class FormBuilder < ActionView::Helpers::FormBuilder
+  delegate :tag, :content_tag, :safe_join, to: :@template
+
+  def field_set(options = {}, &block)
+    @template.render('okonomi_ui_kit/forms/tailwind/field_set', options:, form: self, &block)
+  end
+
+  def field(field_id = nil, options = {}, &block)
+    @template.render('okonomi_ui_kit/forms/tailwind/field', field_id:, options:, form: self, &block)
+  end
+
+  def upload_field(method, options = {})
+    @template.render('okonomi_ui_kit/forms/tailwind/upload_field', method:, options:, form: self)
+  end
+
+  def text_field(method, options = {})
+    css = input_field_classes(method, options, focus_ring: 'focus-within:ring-0.5')
+    super(method, { autocomplete: "off" }.merge(options).merge(class: css))
+  end
+
+  def email_field(method, options = {})
+    css = input_field_classes(method, options)
+    super(method, options.merge(class: css))
+  end
+
+  def url_field(method, options = {})
+    css = input_field_classes(method, options)
+    super(method, options.merge(class: css))
+  end
+
+  def password_field(method, options = {})
+    css = input_field_classes(method, options)
+    super(method, options.merge(class: css))
+  end
+
+  def number_field(method, options = {})
+    css = input_field_classes(method, options)
+    super(method, options.merge(class: css))
+  end
+
+  def telephone_field(method, options = {})
+    css = input_field_classes(method, options)
+    super(method, options.merge(class: css))
+  end
+
+  def search_field(method, options = {})
+    css = input_field_classes(method, options)
+    super(method, options.merge(class: css))
+  end
+
+  def date_field(method, options = {})
+    css = input_field_classes(method, options)
+    super(method, options.merge(class: css))
+  end
+
+  def datetime_local_field(method, options = {})
+    css = input_field_classes(method, options)
+    super(method, options.merge(class: css))
+  end
+
+  def time_field(method, options = {})
+    css = input_field_classes(method, options)
+    super(method, options.merge(class: css))
+  end
+
+  def text_area(method, options = {})
+    css = input_field_classes(method, options, include_disabled: false)
+    super(method, options.merge(class: css))
+  end
+
+  def select(method, choices = nil, options = {}, html_options = {}, &block)
+    css = [
+      select_class_base,
+      when_errors(method,
+                  'bg-red-100 text-red-600 ring-1 ring-inset ring-red-300 focus-within:ring-2 focus-within:ring-red-400',
+                  select_class_default_state),
+      html_options[:class]
+    ].compact.join(' ').split(' ').uniq
+    super(method, choices, options, html_options.merge(class: css), &block)
+  end
+
+  def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
+    css = [
+      select_class_base,
+      when_errors(method,
+                  'bg-red-100 text-red-600 ring-1 ring-inset ring-red-300 focus-within:ring-2 focus-within:ring-red-400',
+                  select_class_default_state),
+      html_options[:class]
+    ].compact.join(' ').split(' ').uniq
+    super(method, collection, value_method, text_method, options, html_options.merge(class: css))
+  end
+
+  def select_class_default
+    [select_class_base, select_class_default_state].join(' ')
+  end
+
+  def select_class_base
+    "col-start-1 row-start-1 w-full rounded-md bg-white py-2 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600 sm:text-sm/6"
+  end
+
+  def select_class_default_state
+    'ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-gray-400'
+  end
+
+  def label(method, text = nil, options = {}, &block)
+    base_classes = "block text-sm/6 font-medium text-gray-900"
+    super(method, text, merge_class(options, base_classes), &block)
+  end
+
+  def submit(value = nil, options = {})
+    base_classes = "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+    super(value, merge_class(options, base_classes))
+  end
+
+  def label_class(label_css = nil)
+    ["block text-base font-medium leading-6 text-gray-900 whitespace-nowrap", label_css].compact_blank.join(' ')
+  end
+
+  def check_box_with_label(method, options = {}, checked_value = true, unchecked_value = false)
+    @template.content_tag(:div, class: 'flex gap-2 items-center') do
+      @template.concat check_box(
+                         method,
+                         {
+                           class: 'cursor-pointer h-4 w-4 rounded-sm border-gray-300 text-primary-600 focus:ring-0 focus:ring-primary-600'
+                         }.merge(options || {}),
+                         checked_value,
+                         unchecked_value
+                       )
+      @template.concat @template.render('okonomi_ui_kit/forms/tailwind/checkbox_label', method:, options:, form: self)
+    end
+  end
+
+  def multi_select(method, **options)
+    @template.render(
+      partial: 'okonomi_ui_kit/forms/tailwind/multi_select',
+      locals: {
+        form: self,
+        method: method,
+        options: options
+      }
+    )
+  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
+    )
+  end
+
+  private
+
+  def input_field_classes(method, options, focus_ring: 'focus-within:ring-1', include_disabled: true)
+    css_classes = [
+      'w-full border-0 text-gray-700 px-3 py-2 rounded-md',
+      "ring-1 ring-inset ring-gray-300 #{focus_ring} focus-within:ring-gray-400",
+      when_errors(method, 'bg-red-100 ring-2 ring-red-400'),
+      options[:class]
+    ]
+    
+    if include_disabled
+      css_classes << 'disabled:bg-gray-50 disabled:cursor-not-allowed'
+    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
+  end
+  end
+end

data/app/helpers/okonomi_ui_kit/icon_helper.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module OkonomiUiKit
+  module IconHelper
+  def icon_tag(icon, variant = :outlined, options = {})
+    if icon.is_a?(Icon)
+      doc = Nokogiri::HTML::DocumentFragment.parse icon.send(:"content_#{variant}")
+      svg = doc.at_css 'svg'
+
+      svg['class'] = options[:class] if options[:class].present?
+      svg['style'] = options[:style] if options[:style].present?
+
+      svg['width'] = options[:width] if options[:width].present?
+      svg['height'] = options[:height] if options[:height].present?
+
+      raw doc
+    else
+      svg_icon(icon, options)
+    end
+  end
+
+  def svg_icon(name, options = {})
+    if OkonomiUiKit::SvgIcons.exist?(name)
+      doc = Nokogiri::HTML::DocumentFragment.parse OkonomiUiKit::SvgIcons.read(name)
+      svg = doc.at_css 'svg'
+
+      svg['class'] = options[:class] if options[:class].present?
+      svg['style'] = options[:style] if options[:style].present?
+
+      svg['width'] = options[:width] if options[:width].present?
+      svg['height'] = options[:height] if options[:height].present?
+    else
+      doc = "<!-- SVG #{name} not found -->"
+    end
+
+    raw doc
+  end
+  end
+end

data/app/helpers/okonomi_ui_kit/navigation_helper.rb

@@ -0,0 +1,72 @@
+module OkonomiUiKit
+  module NavigationHelper
+  def navigation_menu(**options, &block)
+    builder = NavigationBuilder.new(self)
+    render 'okonomi_ui_kit/shared/navigation_menu', builder: builder, options: options, &block
+  end
+
+  class NavigationBuilder
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::CaptureHelper
+
+    def initialize(template)
+      @template = template
+    end
+
+    def group(title, &block)
+      group_builder = NavigationGroupBuilder.new(@template)
+      content = capture(group_builder, &block)
+      
+      tag.li do
+        tag.div(title, class: "text-xs/6 font-semibold text-gray-400") +
+        tag.ul(content, role: "list", class: "-mx-2 mt-2 space-y-1")
+      end
+    end
+
+    def profile_section(&block)
+      content = capture(&block)
+      tag.li(content, class: "-mx-6 mt-auto")
+    end
+
+    private
+
+    def tag
+      @template.tag
+    end
+
+    def capture(*args, &block)
+      @template.capture(*args, &block)
+    end
+  end
+
+  class NavigationGroupBuilder
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::CaptureHelper
+
+    def initialize(template)
+      @template = template
+    end
+
+    def nav_link(title, path, icon: nil, initials: nil, exact: false)
+      tag.li do
+        @template.render "layouts/shared/nav_link", 
+                        path: path, 
+                        title: title, 
+                        icon: icon,
+                        initials: initials,
+                        exact: exact
+      end
+    end
+
+    private
+
+    def tag
+      @template.tag
+    end
+
+    def capture(*args, &block)
+      @template.capture(*args, &block)
+    end
+  end
+  end
+end

data/app/helpers/okonomi_ui_kit/page_builder_helper.rb

@@ -0,0 +1,217 @@
+module OkonomiUiKit
+  module PageBuilderHelper
+  def page(**options, &block)
+    builder = PageBuilder.new(self)
+    
+    render 'okonomi_ui_kit/page_builder/page', builder: builder, options: options, &block
+  end
+
+  class PageBuilder
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::CaptureHelper
+
+    def initialize(template)
+      @template = template
+    end
+
+    def page_header(**options, &block)
+      header_builder = PageHeaderBuilder.new(@template)
+      yield(header_builder) if block_given?
+      header_builder.render
+    end
+
+    def section(**options, &block)
+      section_builder = SectionBuilder.new(@template)
+      yield(section_builder) if block_given?
+      section_builder.render
+    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.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
+    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)
+      @body_content = tag.div do
+        tag.dl(class: "divide-y divide-gray-100") do
+          capture(&block) if block_given?
+        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
+
+      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
+    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