okonomi_ui_kit 0.1.0

data/app/helpers/okonomi_ui_kit/svg_icons.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module OkonomiUiKit
+  class SvgIcons
+  def self.read(name)
+    registry.merge!(name => File.read(file_path(name))) if registry[name].nil?
+    registry[name]
+  end
+
+  def self.exist?(name)
+    registry[name].present? || file_path(name).present?
+  end
+
+  def self.file_path(name)
+    # First check in the host application
+    host_path = Rails.root.join('app', 'assets', 'images', "#{name}.svg")
+    return host_path if File.exist?(host_path)
+    
+    # Fall back to the engine's icons
+    engine_path = OkonomiUiKit::Engine.root.join('app', 'assets', 'images', "#{name}.svg")
+    return engine_path if File.exist?(engine_path)
+    
+    nil
+  end
+  
+  # Deprecated, kept for backwards compatibility
+  def self.file_name(name)
+    file_path(name)
+  end
+
+  def self.registry
+    @registry ||= {}
+  end
+  end
+end

data/app/helpers/okonomi_ui_kit/table_helper.rb

@@ -0,0 +1,158 @@
+module OkonomiUiKit
+  module TableHelper
+  def table(**options, &block)
+    builder = TableBuilder.new(self)
+
+    render '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/javascript/okonomi_ui_kit/application.js

@@ -0,0 +1,8 @@
+import "@hotwired/turbo-rails"
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+application.debug = false
+window.Stimulus = application
+
+export { application }

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

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu"]
+
+  connect() {
+    this.close()
+  }
+
+  toggle() {
+    this.menuTarget.classList.toggle("hidden")
+  }
+
+  open() {
+    this.menuTarget.classList.remove("hidden")
+  }
+
+  close() {
+    this.menuTarget.classList.add("hidden")
+  }
+
+  closeOnClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+}

data/app/javascript/okonomi_ui_kit_manifest.js

@@ -0,0 +1,2 @@
+//= link okonomi_ui_kit/application.js
+//= link_tree ./okonomi_ui_kit/controllers .js

data/app/jobs/okonomi_ui_kit/application_job.rb

@@ -0,0 +1,4 @@
+module OkonomiUiKit
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/okonomi_ui_kit/application_mailer.rb

@@ -0,0 +1,6 @@
+module OkonomiUiKit
+  class ApplicationMailer < ActionMailer::Base
+    default from: "from@example.com"
+    layout "mailer"
+  end
+end

data/app/models/okonomi_ui_kit/application_record.rb

@@ -0,0 +1,5 @@
+module OkonomiUiKit
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/layouts/okonomi_ui_kit/application.html.erb

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Okonomi UI Kit</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+
+  <%= stylesheet_link_tag "okonomi_ui_kit/application.tailwind", "data-turbo-track": "reload" %>
+  <%= javascript_importmap_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/app/views/okonomi_ui_kit/attribute_sections/_section.html.erb

@@ -0,0 +1,13 @@
+<div class="overflow-hidden bg-white <%= options[:class] || '' %>">
+  <div class="py-6">
+    <h3 class="text-base/7 font-semibold text-gray-900"><%= title %></h3>
+    <% if description.present? %>
+      <p class="mt-1 max-w-2xl text-sm/6 text-gray-500"><%= description %></p>
+    <% end %>
+  </div>
+  <div class="border-t border-gray-100">
+    <dl class="divide-y divide-gray-100">
+      <%= yield(builder) %>
+    </dl>
+  </div>
+</div>

data/app/views/okonomi_ui_kit/forms/tailwind/_checkbox_label.html.erb

@@ -0,0 +1,18 @@
+<%
+  label_options = {}
+  label_options[:for] = options[:id] if options[:id]
+%>
+<%= form.label(method, label_options) do %>
+  <div class="cursor-pointer font-medium text-gray-700">
+    <% if options[:label] %>
+      <%= options[:label] %>
+    <% else %>
+      <%= t("activerecord.attributes.#{form.object.class.name.underscore}.#{method}") %>
+    <% end %>
+  </div>
+  <% if options[:hint] %>
+    <div class="cursor-pointer text-sm text-gray-400">
+      <%= t("activerecord.hints.#{form.object.class.name.underscore}.#{method}") %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/okonomi_ui_kit/forms/tailwind/_field.html.erb

@@ -0,0 +1,34 @@
+<div class="w-full flex flex-col gap-2">
+  <div class="flex justify-between items-center" x-data="{ open: false }">
+    <% if field_id %>
+      <%= form.label field_id, t("activerecord.attributes.#{form.object_name}.#{field_id}"), class: form.label_class(options.dig(:label, :class)) %>
+    <% end %>
+    <% if options[:hint] %>
+      <div class="relative">
+        <div class="text-primary-600 text-sm hover:cursor-help" @mouseover="open = true" @mouseover.away = "open = false">
+          Hilfe
+        </div>
+        <div x-show="open"
+             class="text-xs absolute border rounded-md bg-gray-100 border-gray-600 text-gray-600 p-1 z-10"
+             style="top: 32px; right: -10px; width: 200px; max-width: 400px; display: none;"
+             x-transition:enter="transition duration-200 transform ease-out"
+             x-transition:enter-start="scale-75"
+             x-transition:leave="transition duration-100 transform ease-in"
+             x-transition:leave-end="opacity-0 scale-90"
+        >
+          <%= options[:hint].is_a?(String) ? options[:hint] : t("activerecord.hints.#{form.object_name}.#{field_id}") %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  <div class="block">
+    <div class="grid grid-cols-<%= options[:columns] || 1 %> gap-2">
+      <%= yield %>
+    </div>
+    <% if field_id && form.object.errors.include?(field_id) %>
+      <div class="mt-1 text-red-500 text-sm">
+        <%= form.object.errors[field_id].join(", ") %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/okonomi_ui_kit/forms/tailwind/_field_set.html.erb

@@ -0,0 +1,3 @@
+<div class="w-full flex flex-col gap-4 col-span-1 sm:col-span-3 md:col-span-5">
+  <%= yield %>
+</div>

data/app/views/okonomi_ui_kit/forms/tailwind/_multi_select.html.erb

@@ -0,0 +1,17 @@
+<%# app/views/forms/tailwind/_multi_select.html.erb %>
+<% association = form.object.class.reflect_on_association(method) %>
+<% raise "#{method} is not a valid association" unless association %>
+
+<% associated_class = association.klass %>
+<% associated_records = options[:collection] || associated_class.all %>
+
+<% p associated_records %>
+
+<div class="grid grid-cols-2 gap-2">
+  <% associated_records.each do |record| %>
+    <div class="flex items-center">
+      <% id = "#{method}_#{record.id}" %>
+      <%= form.check_box_with_label method, { label: record.send(options[:label] || :name), multiple: true, id: id, checked: form.object.send(method).include?(record) }, record.id, nil %>
+    </div>
+  <% end %>
+</div>

data/app/views/okonomi_ui_kit/forms/tailwind/_radio_button.html.erb

@@ -0,0 +1,10 @@
+<%= form.label("#{method}_#{tag_value}".to_sym) do %>
+  <div class="cursor-pointer font-medium text-gray-700">
+    <%= t("activerecord.attributes.#{form.object.class.name.underscore}.#{method}_#{tag_value}") %>
+  </div>
+  <% if options[:hint] %>
+    <div class="cursor-pointer text-sm text-gray-400">
+      <%= t("activerecord.hints.#{form.object.class.name.underscore}.#{method}_#{tag_value}") %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/okonomi_ui_kit/forms/tailwind/_upload_field.html.erb

@@ -0,0 +1,45 @@
+<div
+  data-controller="upload"
+  data-upload-target="dropzone"
+  class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center cursor-pointer hover:bg-gray-50 relative"
+>
+  <%= form.label method, class: "block cursor-pointer" do %>
+    <div class="flex flex-col items-center text-gray-600 space-y-2">
+      <div data-upload-target="preview" class="w-full flex justify-center items-center">
+        <% if form.object.send(method).attached? %>
+          <% blob = form.object.send(method).blob %>
+          <% if blob.image? %>
+            <%= image_tag url_for(blob), class: "max-h-32" %>
+          <% else %>
+            <%= svg_icon("heroicons/solid/document", class: "size-12 text-gray-400") %>
+          <% end %>
+        <% else %>
+          <%= svg_icon("heroicons/solid/plus", class: "size-12 w-12 text-gray-400") %>
+        <% end %>
+      </div>
+
+      <p class="text-sm text-gray-500" data-upload-target="filename">
+        <% if form.object.send(method).attached? %>
+          <%= form.object.send(method).filename %>
+        <% else %>
+          No file selected
+        <% end %>
+      </p>
+    </div>
+
+    <%= form.file_field method,
+                        class: "hidden",
+                        data: {
+                          upload_target: "input",
+                          action: "change->upload#updatePreview"
+                        } %>
+  <% end %>
+
+  <%= form.hidden_field :"remove_#{method}", value: "0", data: { upload_target: "destroyInput" } %>
+
+  <button type="button"
+          data-action="upload#clear"
+          class="absolute top-2 right-2 bg-red-100 text-red-700 px-2 py-1 text-xs rounded hover:bg-red-200">
+    Clear
+  </button>
+</div>

data/app/views/okonomi_ui_kit/page_builder/_page.html.erb

@@ -0,0 +1,3 @@
+<div class="flex flex-col gap-8 p-8 <%= options[:class] || '' %>">
+  <%= yield(builder) %>
+</div>

data/app/views/okonomi_ui_kit/shared/_navigation_menu.html.erb

@@ -0,0 +1,3 @@
+<ul role="list" class="flex flex-1 flex-col gap-y-7">
+  <%= yield(builder) %>
+</ul>

data/app/views/okonomi_ui_kit/tables/_table.html.erb

@@ -0,0 +1,9 @@
+<div class="flow-root">
+  <div class="overflow-x-auto">
+    <div class="inline-block min-w-full py-2 align-middle">
+      <%= content_tag(:table, class: options[:class] || "min-w-full divide-y divide-gray-300") do %>
+        <%= yield(builder) %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/config/importmap.rb

@@ -0,0 +1,2 @@
+pin "okonomi_ui_kit", to: "okonomi_ui_kit/application.js", preload: true
+pin_all_from OkonomiUiKit::Engine.root.join("app/javascript/okonomi_ui_kit/controllers"), under: "controllers", to: "okonomi_ui_kit/controllers"

data/config/routes.rb

@@ -0,0 +1,2 @@
+OkonomiUiKit::Engine.routes.draw do
+end

data/config/tailwind.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  content: [
+    './app/views/**/*.{erb,haml,html,slim,rb}',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js',
+    './app/components/**/*.{erb,haml,html,slim,rb}',
+    './test/dummy/app/views/**/*.{erb,haml,html,slim}',
+    './test/dummy/app/helpers/**/*.rb',
+    './test/dummy/app/javascript/**/*.js',
+    './test/dummy/app/components/**/*.{erb,haml,html,slim,rb}'
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: []
+}

data/lib/okonomi_ui_kit/engine.rb

@@ -0,0 +1,36 @@
+require "turbo-rails"
+require "stimulus-rails"
+require "importmap-rails"
+require "tailwindcss-rails"
+
+module OkonomiUiKit
+  class Engine < ::Rails::Engine
+    isolate_namespace OkonomiUiKit
+
+    initializer "okonomi_ui_kit.importmap", before: "importmap" do |app|
+      app.config.importmap.paths << root.join("config/importmap.rb")
+      app.config.importmap.cache_sweepers << root.join("app/javascript")
+    end
+
+    initializer "okonomi_ui_kit.assets" do |app|
+      app.config.assets.paths << root.join("app/javascript")
+      app.config.assets.paths << root.join("app/assets/builds")
+      app.config.assets.precompile += %w[okonomi_ui_kit_manifest.js okonomi_ui_kit/application.tailwind.css]
+    end
+
+    initializer "okonomi_ui_kit.view_helpers" do
+      ActiveSupport.on_load(:action_view) do
+        include OkonomiUiKit::ApplicationHelper
+        include OkonomiUiKit::AttributeSectionHelper
+        include OkonomiUiKit::BadgeHelper
+        include OkonomiUiKit::BreadcrumbsHelper
+        include OkonomiUiKit::ButtonHelper
+        include OkonomiUiKit::IconHelper
+        include OkonomiUiKit::NavigationHelper
+        include OkonomiUiKit::PageBuilderHelper
+        include OkonomiUiKit::TableHelper
+        # include OkonomiUiKit::FormBuilder
+      end
+    end
+  end
+end

data/lib/okonomi_ui_kit/version.rb

@@ -0,0 +1,3 @@
+module OkonomiUiKit
+  VERSION = "0.1.0"
+end

data/lib/okonomi_ui_kit.rb

@@ -0,0 +1,6 @@
+require "okonomi_ui_kit/version"
+require "okonomi_ui_kit/engine"
+
+module OkonomiUiKit
+  # Your code goes here...
+end

data/lib/tasks/okonomi_ui_kit_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :okonomi_ui_kit do
+#   # Task goes here
+# end