okonomi_ui_kit 0.1.5 → 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

@@ -0,0 +1,68 @@
+module OkonomiUiKit
+  module Components
+    class Typography < OkonomiUiKit::Component
+      TYPOGRAPHY_COMPONENTS = {
+        body1: 'p',
+        body2: 'p',
+        h1: 'h1',
+        h2: 'h2',
+        h3: 'h3',
+        h4: 'h4',
+        h5: 'h5',
+        h6: 'h6',
+      }.freeze
+
+      def render(text = nil, options = {}, &block)
+        options, text = text, nil if block_given?
+        options ||= {}
+        options = options.with_indifferent_access
+
+        variant = (options.delete(:variant) || 'body1').to_sym
+        component = (TYPOGRAPHY_COMPONENTS[variant] || 'span').to_s
+        color = (options.delete(:color) || 'default').to_sym
+
+        classes = [
+          style(:variants, variant) || '',
+          style(:colors, color) || '',
+          options.delete(:class) || ''
+        ].reject(&:blank?).join(' ')
+
+        view.render(
+          template_path,
+          text: text,
+          options: options,
+          variant: variant,
+          component: component,
+          classes: classes,
+          &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",
@@ -98,6 +98,58 @@ module OkonomiUiKit
           hint: {
             root: "cursor-pointer text-sm text-gray-400"
           }
+        },
+        modal: {
+          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",
+          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: {
+            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: {
+            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: {
+            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: {
+            wrapper: "mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"
+          }
         }
       }
     }

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,40 +35,48 @@ module OkonomiUiKit
         ].join(' ')
       end
 
-      def page(&block)
-        @template.page(&block)
+      def confirmation_modal(title:, message:, confirm_text: "Confirm", cancel_text: "Cancel", variant: :warning, size: :md, **options, &block)
+        modal_options = {
+          title: title,
+          message: message, 
+          confirm_text: confirm_text,
+          cancel_text: cancel_text,
+          variant: variant,
+          size: size,
+          has_custom_actions: block_given?,
+          **options
+        }
+        @template.render("okonomi/modals/confirmation_modal", options: modal_options, ui: self, &block)
       end
 
-      TYPOGRAPHY_COMPONENTS = {
-        body1: 'p',
-        body2: 'p',
-        h1: 'h1',
-        h2: 'h2',
-        h3: 'h3',
-        h4: 'h4',
-        h5: 'h5',
-        h6: 'h6',
-      }.freeze
+      def modal_data_attributes(options)
+        return "" unless options[:data]
+        
+        options[:data].map { |k, v| "data-#{k.to_s.dasherize}=\"#{v}\"" }.join(' ').html_safe
+      end
 
-      def typography(text = nil, options = nil, &block)
-        options, text = text, nil if block_given?
-        options ||= {}
+      def modal_panel_class(size)
+        [
+          get_theme.dig(:components, :modal, :panel, :base),
+          get_theme.dig(:components, :modal, :panel, :sizes, size)
+        ].compact.join(' ')
+      end
 
-        variant = (options.delete(:variant) || 'body1').to_sym
-        component = (TYPOGRAPHY_COMPONENTS[variant] || 'span').to_s
-        color = (options.delete(:color) || 'default').to_sym
-        classes = [
-          get_theme.dig(:components, :typography, :variants, variant) || '',
-          get_theme.dig(:components, :typography, :colors, color) || '',
-          options.delete(:class) || ''
-        ]
+      def modal_icon_wrapper_class(variant)
+        [
+          get_theme.dig(:components, :modal, :icon, :wrapper),
+          get_theme.dig(:components, :modal, :icon, :variants, variant, :wrapper)
+        ].compact.join(' ')
+      end
 
-        if block_given?
-          @template.render("okonomi/components/typography", options:, variant:, component:, classes:, &block)
+      def method_missing(method_name, *args, &block)
+        component_name = "OkonomiUiKit::Components::#{method_name.to_s.camelize}"
+        if Object.const_defined?(component_name)
+          return component_name.constantize.new(@template, get_theme).render(*args, &block)
         else
-          @template.render("okonomi/components/typography", text:, options:, variant:, component:, classes:)
+          super
         end
       end
     end
   end
-end
+end

data/app/javascript/okonomi_ui_kit/controllers/modal_controller.js

@@ -0,0 +1,94 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["container", "backdrop", "panel"]
+  static values = { 
+    size: String,
+    autoOpen: Boolean 
+  }
+
+  connect() {
+    this.close()
+    if (this.autoOpenValue) {
+      this.open()
+    }
+    
+    // Bind escape key handler
+    this.handleEscape = this.handleEscape.bind(this)
+  }
+
+  disconnect() {
+    this.unlockBodyScroll()
+    document.removeEventListener('keydown', this.handleEscape)
+  }
+
+  open() {
+    this.containerTarget.style.display = 'block'
+    this.lockBodyScroll()
+    document.addEventListener('keydown', this.handleEscape)
+    
+    // Focus trap - focus first focusable element in modal
+    this.focusFirstElement()
+    
+    // Add entrance animations
+    requestAnimationFrame(() => {
+      this.backdropTarget.classList.remove('opacity-0')
+      this.backdropTarget.classList.add('opacity-100')
+      
+      this.panelTarget.classList.remove('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95')
+      this.panelTarget.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100')
+    })
+  }
+
+  close() {
+    // Add exit animations
+    this.backdropTarget.classList.remove('opacity-100')
+    this.backdropTarget.classList.add('opacity-0')
+    
+    this.panelTarget.classList.remove('opacity-100', 'translate-y-0', 'sm:scale-100')
+    this.panelTarget.classList.add('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95')
+    
+    // Hide after animation completes
+    setTimeout(() => {
+      this.containerTarget.style.display = 'none'
+      this.unlockBodyScroll()
+      document.removeEventListener('keydown', this.handleEscape)
+    }, 200)
+  }
+
+  confirm() {
+    // Dispatch confirm event for custom handling
+    this.dispatch('confirm', { detail: { modal: this } })
+    this.close()
+  }
+
+  cancel() {
+    // Dispatch cancel event for custom handling  
+    this.dispatch('cancel', { detail: { modal: this } })
+    this.close()
+  }
+
+  handleEscape(event) {
+    if (event.key === 'Escape') {
+      this.close()
+    }
+  }
+
+  lockBodyScroll() {
+    document.body.style.overflow = 'hidden'
+  }
+
+  unlockBodyScroll() {
+    document.body.style.overflow = ''
+  }
+
+  focusFirstElement() {
+    const focusableElements = this.panelTarget.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+    
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus()
+    }
+  }
+}

data/app/views/okonomi/components/alert/_alert.html.erb

@@ -0,0 +1,3 @@
+<div class="hover:bg-blue-700">
+  <%= title %>
+</div>

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/app/views/okonomi/components/typography/_typography.html.erb

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