okonomi_ui_kit 0.1.6 → 0.1.7

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

@@ -0,0 +1,207 @@
+module OkonomiUiKit
+  module Components
+    class Table < OkonomiUiKit::Component
+      def render(options = {}, &block)
+        options = options.with_indifferent_access
+        variant = (options.delete(:variant) || :default).to_sym
+        
+        builder = TableBuilder.new(view, theme, self, variant)
+        view.render(template_path, builder: builder, options: options, &block)
+      end
+
+      register_styles :default do
+        {
+          default: {
+            body: {
+              base: "divide-y divide-gray-200 bg-white"
+            },
+            th: {
+              base: "text-sm font-semibold text-gray-900",
+              first: "py-3.5 pr-3",
+              last: "relative py-3.5",
+              middle: "pl-3 pr-3 py-3.5"
+            },
+            td: {
+              base: "text-sm whitespace-nowrap",
+              first: "py-4 pr-3 font-medium text-gray-900",
+              last: "relative py-4 font-medium",
+              middle: "pl-3 pr-3 py-4 text-gray-500"
+            },
+            alignment: {
+              left: "text-left",
+              center: "text-center",
+              right: "text-right"
+            },
+            empty_state: {
+              wrapper: "text-center py-8",
+              icon: "mx-auto h-12 w-12 text-gray-400",
+              title: "mt-2 text-sm font-medium text-gray-900",
+              subtitle: "mt-1 text-sm text-gray-500",
+              cell: "text-center py-8 text-gray-500"
+            }
+          }
+        }
+      end
+    end
+
+    class TableBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::CaptureHelper
+
+      def initialize(template, theme, style_provider, variant = :default)
+        @template = template
+        @theme = theme
+        @style_provider = style_provider
+        @variant = variant
+        @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: style(:body, :base), &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: style(:empty_state, :wrapper)) do
+            icon_content = if @template.respond_to?(:svg_icon)
+              @template.svg_icon(icon, class: style(:empty_state, :icon))
+            else
+              tag.div(class: style(:empty_state, :icon))
+            end
+
+            icon_content + tag.p(title, class: style(:empty_state, :title)) +
+            tag.p("Get started by creating a new record.", class: style(:empty_state, :subtitle))
+          end
+        end
+
+        tr do
+          td(colspan: colspan, class: style(:empty_state, :cell)) 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 = style(:alignment, cell[:align]) || style(:alignment, :left)
+        
+        position_class = if is_first
+          style(:th, :first)
+        elsif is_last
+          style(:th, :last)
+        else
+          style(:th, :middle)
+        end
+
+        classes = [
+          style(:th, :base),
+          position_class,
+          align_class,
+          cell[:options][:class]
+        ].compact.join(' ')
+
+        options = cell[:options].except(:class)
+        tag.th(cell[:content], scope: cell[:scope], class: classes, **options)
+      end
+
+      def render_td(cell, is_first, is_last)
+        align_class = style(:alignment, cell[:align]) || style(:alignment, :left)
+        
+        position_class = if is_first
+          style(:td, :first)
+        elsif is_last
+          style(:td, :last)
+        else
+          style(:td, :middle)
+        end
+
+        classes = [
+          style(:td, :base),
+          position_class,
+          align_class,
+          cell[:options][:class]
+        ].compact.join(' ')
+
+        options = cell[:options].except(:class)
+        tag.td(cell[:content], class: classes, **options)
+      end
+
+      def style(*keys)
+        @style_provider.style(@variant, *keys)
+      end
+    end
+  end
+end

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

@@ -20,10 +20,10 @@ module OkonomiUiKit
         variant = (options.delete(:variant) || 'body1').to_sym
         component = (TYPOGRAPHY_COMPONENTS[variant] || 'span').to_s
         color = (options.delete(:color) || 'default').to_sym
-        
+
         classes = [
-          theme.dig(:components, :typography, :variants, variant) || '',
-          theme.dig(:components, :typography, :colors, color) || '',
+          style(:variants, variant) || '',
+          style(:colors, color) || '',
           options.delete(:class) || ''
         ].reject(&:blank?).join(' ')
 
@@ -37,6 +37,32 @@ module OkonomiUiKit
           &block
         )
       end
+
+      register_styles :default do
+        {
+          variants: {
+            body1: "text-base font-normal",
+            body2: "text-sm font-normal",
+            h1: "text-3xl font-bold",
+            h2: "text-2xl font-bold",
+            h3: "text-xl font-semibold",
+            h4: "text-lg font-semibold",
+            h5: "text-base font-semibold",
+            h6: "text-sm font-semibold"
+          },
+          colors: {
+            default: "text-default-700",
+            dark: "text-default-900",
+            muted: "text-default-500",
+            primary: "text-primary-600",
+            secondary: "text-secondary-600",
+            success: "text-success-600",
+            danger: "text-danger-600",
+            warning: "text-warning-600",
+            info: "text-info-600"
+          }
+        }
+      end
     end
   end
 end

data/app/helpers/okonomi_ui_kit/config.rb

@@ -0,0 +1,16 @@
+module OkonomiUiKit
+  class Config
+    def self.register_styles(theme = :default, &block)
+      styles = block.call if block_given?
+
+      raise ArgumentError, "Styles must be a Hash" unless styles.is_a?(Hash)
+
+      styles_registry[theme] ||= {}
+      styles_registry[theme] = styles_registry[theme].deep_merge(styles)
+    end
+
+    def self.styles_registry
+      @styles_registry ||= {}
+    end
+  end
+end

data/app/helpers/okonomi_ui_kit/theme.rb

@@ -26,9 +26,9 @@ module OkonomiUiKit
           }
         },
         link: {
-          root: "hover:cursor-pointer",
+          root: "hover:cursor-pointer text-sm",
           outlined: {
-            root: "inline-flex border items-center justify-center px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
+            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",
@@ -40,7 +40,7 @@ module OkonomiUiKit
             }
           },
           contained: {
-            root: "inline-flex border items-center justify-center px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-offset-2",
+            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",

data/app/helpers/okonomi_ui_kit/ui_helper.rb

@@ -26,42 +26,6 @@ module OkonomiUiKit
         @_okonomi_ui_kit_theme ||= OkonomiUiKit::Theme::DEFAULT_THEME
       end
 
-      def link_to(name = nil, options = nil, html_options = nil, &block)
-        html_options, options, name = options, name, block if block_given?
-
-        html_options ||= {}
-        html_options[:class] ||= ''
-
-        variant = (html_options.delete(:variant) || 'text').to_sym
-        color = (html_options.delete(:color) || 'default').to_sym
-
-        html_options[:class] = button_class(variant:, color:, classes: html_options[:class])
-
-        if block_given?
-          @template.link_to(options, html_options, &block)
-        else
-          @template.link_to(name, options, html_options)
-        end
-      end
-
-      def button_to(name = nil, options = nil, html_options = nil, &block)
-        html_options, options, name = options, name, block if block_given?
-
-        html_options ||= {}
-        html_options[:class] ||= ''
-
-        variant = (html_options.delete(:variant) || 'contained').to_sym
-        color = (html_options.delete(:color) || 'default').to_sym
-
-        html_options[:class] = button_class(variant:, color:, classes: html_options[:class])
-
-        if block_given?
-          @template.button_to(options, html_options, &block)
-        else
-          @template.button_to(name, options, html_options)
-        end
-      end
-
       def button_class(variant: 'contained', color: 'default', classes: '')
         [
           get_theme.dig(:components, :link, :root) || '',
@@ -71,10 +35,6 @@ module OkonomiUiKit
         ].join(' ')
       end
 
-      def page(&block)
-        @template.page(&block)
-      end
-
       def confirmation_modal(title:, message:, confirm_text: "Confirm", cancel_text: "Cancel", variant: :warning, size: :md, **options, &block)
         modal_options = {
           title: title,

data/app/views/okonomi/components/code/_code.html.erb

@@ -0,0 +1 @@
+<pre<%= language ? " data-language=\"#{language}\"".html_safe : "" %> class="<%= classes %>"<%= tag.attributes(options) %>><code><%= content %></code></pre>

data/app/views/okonomi/components/page/_page.html.erb

@@ -0,0 +1,5 @@
+<div class="flex flex-col gap-8 p-8 <%= options[:class] || '' %>">
+  <% content = capture { yield(builder) } %>
+  <%= builder.render_content %>
+  <%= content if builder.render_content.blank? %>
+</div>

data/app/views/okonomi/components/table/_table.html.erb

@@ -0,0 +1,3 @@
+<table class="min-w-full divide-y divide-gray-300" <%= tag.attributes(options) %>>
+  <%= yield builder %>
+</table>

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.6"
+  VERSION = "0.1.7"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: okonomi_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.1.7
 platform: ruby
 authors:
 - Okonomi GmbH
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-07-31 00:00:00.000000000 Z
+date: 2025-08-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1357,18 +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
@@ -1386,6 +1389,9 @@ files:
 - app/views/layouts/okonomi_ui_kit/application.html.erb
 - app/views/okonomi/attribute_sections/_section.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

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