okonomi_ui_kit 0.1.5 → 0.1.7

data/app/views/okonomi/modals/_confirmation_modal.html.erb

@@ -0,0 +1,77 @@
+<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"
+     <%= ui.modal_data_attributes(options) %>>
+  
+  <!-- Backdrop -->
+  <div class="<%= ui.get_theme.dig(:components, :modal, :backdrop) %>" 
+       data-modal-target="backdrop" 
+       data-action="click->modal#close"
+       aria-hidden="true"></div>
+  
+  <!-- Modal container -->
+  <div class="<%= ui.get_theme.dig(:components, :modal, :container) %>">
+    <div class="<%= ui.get_theme.dig(:components, :modal, :wrapper) %>">
+      <!-- Modal panel -->
+      <div class="<%= ui.modal_panel_class(options[:size]) %>" 
+           data-modal-target="panel"
+           role="dialog" 
+           aria-modal="true" 
+           aria-labelledby="modal-title">
+        
+        <!-- Close button -->
+        <div class="<%= ui.get_theme.dig(:components, :modal, :close_button, :wrapper) %>">
+          <button type="button" 
+                  class="<%= ui.get_theme.dig(:components, :modal, :close_button, :button) %>" 
+                  data-action="click->modal#close">
+            <span class="sr-only">Close</span>
+            <%= svg_icon(ui.get_theme.dig(:components, :modal, :close_button, :icon, :file), 
+                         class: ui.get_theme.dig(:components, :modal, :close_button, :icon, :class)) %>
+          </button>
+        </div>
+        
+        <!-- Content -->
+        <div class="<%= ui.get_theme.dig(:components, :modal, :content, :wrapper) %>">
+          <!-- Icon -->
+          <div class="<%= ui.modal_icon_wrapper_class(options[:variant]) %>">
+            <%= svg_icon(ui.get_theme.dig(:components, :modal, :icon, :variants, options[:variant], :file), 
+                         class: [ui.get_theme.dig(:components, :modal, :icon, :class), 
+                                ui.get_theme.dig(:components, :modal, :icon, :variants, options[:variant], :icon)].join(' ')) %>
+          </div>
+          
+          <!-- Text content -->
+          <div class="<%= ui.get_theme.dig(:components, :modal, :content, :text_wrapper) %>">
+            <h3 id="modal-title" class="<%= ui.get_theme.dig(:components, :modal, :content, :title) %>">
+              <%= options[:title] %>
+            </h3>
+            <div class="<%= ui.get_theme.dig(:components, :modal, :content, :message) %>">
+              <p><%= options[:message] %></p>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Actions -->
+        <div class="<%= ui.get_theme.dig(:components, :modal, :actions, :wrapper) %>">
+          <% if options[:has_custom_actions] %>
+            <%= yield %>
+          <% else %>
+            <% button_color = options[:variant] == :warning ? :danger : options[:variant] %>
+            <button type="button" 
+                    class="<%= ui.button_class(variant: :contained, color: button_color) %> sm:ml-3 sm:w-auto" 
+                    data-action="click->modal#confirm">
+              <%= options[:confirm_text] %>
+            </button>
+            <button type="button" 
+                    class="<%= ui.button_class(variant: :outlined, color: :default) %> mt-3 sm:mt-0 sm:w-auto" 
+                    data-action="click->modal#close">
+              <%= options[:cancel_text] %>
+            </button>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/okonomi_ui_kit/engine.rb

@@ -22,12 +22,9 @@ module OkonomiUiKit
       ActiveSupport.on_load(:action_view) do
         include OkonomiUiKit::ApplicationHelper
         include OkonomiUiKit::AttributeSectionHelper
-        include OkonomiUiKit::BadgeHelper
         include OkonomiUiKit::BreadcrumbsHelper
         include OkonomiUiKit::IconHelper
         include OkonomiUiKit::NavigationHelper
-        include OkonomiUiKit::PageBuilderHelper
-        include OkonomiUiKit::TableHelper
         include OkonomiUiKit::UiHelper
 
         ActionView::Base.field_error_proc = ->(html_tag, _instance) { html_tag.html_safe }

data/lib/okonomi_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module OkonomiUiKit
-  VERSION = "0.1.5"
+  VERSION = "0.1.7"
 end

metadata

@@ -1,13 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: okonomi_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.1.7
 platform: ruby
 authors:
 - Okonomi GmbH
+autorequire:
 bindir: bin
 cert_chain: []
-date: 1980-01-02 00:00:00.000000000 Z
+date: 2025-08-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1356,14 +1357,21 @@ files:
 - app/controllers/okonomi_ui_kit/application_controller.rb
 - app/helpers/okonomi_ui_kit/application_helper.rb
 - app/helpers/okonomi_ui_kit/attribute_section_helper.rb
-- app/helpers/okonomi_ui_kit/badge_helper.rb
 - app/helpers/okonomi_ui_kit/breadcrumbs_helper.rb
+- app/helpers/okonomi_ui_kit/component.rb
+- app/helpers/okonomi_ui_kit/components/alert.rb
+- app/helpers/okonomi_ui_kit/components/badge.rb
+- app/helpers/okonomi_ui_kit/components/button_to.rb
+- app/helpers/okonomi_ui_kit/components/code.rb
+- app/helpers/okonomi_ui_kit/components/link_to.rb
+- app/helpers/okonomi_ui_kit/components/page.rb
+- app/helpers/okonomi_ui_kit/components/table.rb
+- app/helpers/okonomi_ui_kit/components/typography.rb
+- app/helpers/okonomi_ui_kit/config.rb
 - app/helpers/okonomi_ui_kit/form_builder.rb
 - app/helpers/okonomi_ui_kit/icon_helper.rb
 - app/helpers/okonomi_ui_kit/navigation_helper.rb
-- app/helpers/okonomi_ui_kit/page_builder_helper.rb
 - app/helpers/okonomi_ui_kit/svg_icons.rb
-- app/helpers/okonomi_ui_kit/table_helper.rb
 - app/helpers/okonomi_ui_kit/theme.rb
 - app/helpers/okonomi_ui_kit/theme_helper.rb
 - app/helpers/okonomi_ui_kit/ui_helper.rb
@@ -1372,6 +1380,7 @@ files:
 - app/javascript/okonomi_ui_kit/controllers/file_input_controller.js
 - app/javascript/okonomi_ui_kit/controllers/flash_controller.js
 - app/javascript/okonomi_ui_kit/controllers/form_field_visibility_controller.js
+- app/javascript/okonomi_ui_kit/controllers/modal_controller.js
 - app/javascript/okonomi_ui_kit/controllers/upload_controller.js
 - app/javascript/okonomi_ui_kit_manifest.js
 - app/jobs/okonomi_ui_kit/application_job.rb
@@ -1379,13 +1388,18 @@ files:
 - app/models/okonomi_ui_kit/application_record.rb
 - app/views/layouts/okonomi_ui_kit/application.html.erb
 - app/views/okonomi/attribute_sections/_section.html.erb
-- app/views/okonomi/components/_typography.html.erb
+- app/views/okonomi/components/alert/_alert.html.erb
+- app/views/okonomi/components/code/_code.html.erb
+- app/views/okonomi/components/page/_page.html.erb
+- app/views/okonomi/components/table/_table.html.erb
+- app/views/okonomi/components/typography/_typography.html.erb
 - app/views/okonomi/forms/tailwind/_checkbox_label.html.erb
 - app/views/okonomi/forms/tailwind/_field.html.erb
 - app/views/okonomi/forms/tailwind/_field_set.html.erb
 - app/views/okonomi/forms/tailwind/_multi_select.html.erb
 - app/views/okonomi/forms/tailwind/_radio_button.html.erb
 - app/views/okonomi/forms/tailwind/_upload_field.html.erb
+- app/views/okonomi/modals/_confirmation_modal.html.erb
 - app/views/okonomi/navigation/_link.html.erb
 - app/views/okonomi/navigation/_menu.html.erb
 - app/views/okonomi/navigation/_navbar.html.erb
@@ -1405,6 +1419,7 @@ metadata:
   homepage_uri: https://okonomi.gmbh
   source_code_uri: https://okonomi.gmbh
   changelog_uri: https://okonomi.gmbh
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -1419,7 +1434,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.7
+rubygems_version: 3.4.10
+signing_key:
 specification_version: 4
 summary: UI Kit for Okonomi applications
 test_files: []

data/app/helpers/okonomi_ui_kit/badge_helper.rb

@@ -1,23 +0,0 @@
-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/page_builder_helper.rb

@@ -1,217 +0,0 @@
-module OkonomiUiKit
-  module PageBuilderHelper
-  def page(**options, &block)
-    builder = PageBuilder.new(self)
-    
-    render 'okonomi/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

data/app/helpers/okonomi_ui_kit/table_helper.rb

@@ -1,158 +0,0 @@
-module OkonomiUiKit
-  module TableHelper
-  def table(**options, &block)
-    builder = TableBuilder.new(self)
-
-    render 'okonomi/tables/table', builder: builder, options: options, &block
-  end
-
-  class TableBuilder
-    include ActionView::Helpers::TagHelper
-    include ActionView::Helpers::CaptureHelper
-
-    def initialize(template)
-      @template = template
-      @current_row_cells = []
-      @in_header = false
-      @in_body = false
-    end
-
-    def head(&block)
-      @in_header = true
-      @in_body = false
-      result = tag.thead(&block)
-      @in_header = false
-      result
-    end
-
-    def body(&block)
-      @in_header = false
-      @in_body = true
-      result = tag.tbody(class: "divide-y divide-gray-200 bg-white", &block)
-      @in_body = false
-      result
-    end
-
-    def tr(&block)
-      @current_row_cells = []
-      
-      # Collect all cells first
-      yield if block_given?
-      
-      # Now render each cell with proper first/last detection
-      rendered_cells = @current_row_cells.map.with_index do |cell, index|
-        is_first = index == 0
-        is_last = index == @current_row_cells.length - 1
-        
-        if cell[:type] == :th
-          render_th(cell, is_first, is_last)
-        else
-          render_td(cell, is_first, is_last)
-        end
-      end
-      
-      result = tag.tr do
-        @template.safe_join(rendered_cells)
-      end
-      
-      @current_row_cells = []
-      result
-    end
-
-    def th(scope: "col", align: :left, **options, &block)
-      content = capture(&block) if block_given?
-      
-      # Store cell data for later processing in tr
-      cell = { type: :th, scope: scope, align: align, options: options, content: content }
-      @current_row_cells << cell
-      
-      # Return empty string for now, actual rendering happens in tr
-      ""
-    end
-
-    def td(align: :left, **options, &block)
-      content = capture(&block) if block_given?
-      
-      # Store cell data for later processing in tr
-      cell = { type: :td, align: align, options: options, content: content }
-      @current_row_cells << cell
-      
-      # Return empty string for now, actual rendering happens in tr
-      ""
-    end
-
-
-    def empty_state(title: "No records found", icon: "heroicons/outline/document", colspan: nil, &block)
-      content = if block_given?
-        capture(&block)
-      else
-        tag.div(class: "text-center py-8") do
-          icon_content = @template.svg_icon(icon, class: "mx-auto h-12 w-12 text-gray-400")
-
-          icon_content + tag.p(title, class: "mt-2 text-sm font-medium text-gray-900") + 
-          tag.p("Get started by creating a new record.", class: "mt-1 text-sm text-gray-500")
-        end
-      end
-
-      tr do
-        td(colspan: colspan, class: "text-center py-8 text-gray-500") do
-          content
-        end
-      end
-    end
-
-    private
-
-    def tag
-      @template.tag
-    end
-
-    def capture(*args, &block)
-      @template.capture(*args, &block)
-    end
-
-    def render_th(cell, is_first, is_last)
-      align_class = alignment_class(cell[:align])
-      
-      if is_first
-        full_class = "py-3.5 pr-3 #{align_class} text-sm font-semibold text-gray-900 #{cell[:options][:class] || ""}".strip
-      elsif is_last
-        full_class = "relative py-3.5 #{align_class} text-sm font-semibold text-gray-900 #{cell[:options][:class] || ""}".strip
-      else
-        full_class = "pl-3 pr-3 py-3.5 #{align_class} text-sm font-semibold text-gray-900 #{cell[:options][:class] || ""}".strip
-      end
-      
-      options = cell[:options].except(:class)
-      tag.th(cell[:content], scope: cell[:scope], class: full_class, **options)
-    end
-
-    def render_td(cell, is_first, is_last)
-      align_class = alignment_class(cell[:align])
-      
-      if is_first
-        full_class = "py-4 pr-3 #{align_class} text-sm font-medium whitespace-nowrap text-gray-900 #{cell[:options][:class] || ""}".strip
-      elsif is_last
-        full_class = "relative py-4 #{align_class} text-sm font-medium whitespace-nowrap #{cell[:options][:class] || ""}".strip
-      else
-        full_class = "pl-3 pr-3 py-4 #{align_class} text-sm whitespace-nowrap text-gray-500 #{cell[:options][:class] || ""}".strip
-      end
-      
-      options = cell[:options].except(:class)
-      tag.td(cell[:content], class: full_class, **options)
-    end
-
-    def alignment_class(align)
-      case align.to_sym
-      when :left
-        "text-left"
-      when :center
-        "text-center"
-      when :right
-        "text-right"
-      else
-        "text-left"
-      end
-    end
-  end
-  end
-end

data/app/views/okonomi/components/_typography.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag component, class: classes do %>
-  <% if defined?(text)%>
-    <%= text %>
-  <% else %>
-    <%= yield %>
-  <% end %>
-<% end %>