okonomi_ui_kit 0.1.2 → 0.1.4

data/app/helpers/okonomi_ui_kit/ui_helper.rb

@@ -0,0 +1,110 @@
+module OkonomiUiKit
+  module UiHelper
+    def ui
+      @ui ||= UiBuilder.new(self)
+    end
+
+    class UiBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::CaptureHelper
+
+      def initialize(template)
+        @template = template
+      end
+
+      def theme(t = {}, &block)
+        old_theme = get_theme
+
+        @_okonomi_ui_kit_theme = {}.merge(old_theme).merge(t || {})
+
+        yield(@_okonomi_ui_kit_theme)
+
+        @_okonomi_ui_kit_theme = old_theme
+      end
+
+      def get_theme
+        @_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) || '',
+          get_theme.dig(:components, :link, variant.to_sym, :root) || '',
+          get_theme.dig(:components, :link, variant.to_sym, :colors, color.to_sym) || '',
+          classes,
+        ].join(' ')
+      end
+
+      def page(&block)
+        @template.page(&block)
+      end
+
+      TYPOGRAPHY_COMPONENTS = {
+        body1: 'p',
+        body2: 'p',
+        h1: 'h1',
+        h2: 'h2',
+        h3: 'h3',
+        h4: 'h4',
+        h5: 'h5',
+        h6: 'h6',
+      }.freeze
+
+      def typography(text = nil, options = nil, &block)
+        options, text = text, nil if block_given?
+        options ||= {}
+
+        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) || ''
+        ]
+
+        if block_given?
+          @template.render("okonomi/components/typography", options:, variant:, component:, classes:, &block)
+        else
+          @template.render("okonomi/components/typography", text:, options:, variant:, component:, classes:)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+// app/javascript/controllers/file_input_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.input = this.element
+    this.label = document.getElementById("file-name")
+
+    this.input.addEventListener("change", () => {
+      this.label.textContent = this.input.files[0]?.name || "No file chosen"
+    })
+  }
+}

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

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["message"]
+  static values = { autoDismiss: Number }
+
+  connect() {
+    if (this.hasAutoDismissValue && this.autoDismissValue > 0) {
+      setTimeout(() => {
+        this.dismiss()
+      }, this.autoDismissValue)
+    }
+  }
+
+  dismiss() {
+    this.element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out'
+    this.element.style.opacity = '0'
+    this.element.style.transform = 'translateX(100%)'
+    
+    setTimeout(() => {
+      if (this.element.parentNode) {
+        this.element.remove()
+      }
+    }, 300)
+  }
+
+  close(event) {
+    event.preventDefault()
+    this.dismiss()
+  }
+}

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

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { fieldId: String, equals: String }
+
+  connect() {
+    console.log("FormFieldVisibilityController connected")
+    this.field = document.getElementById(this.fieldIdValue)
+    if (this.field) {
+      this.toggle()
+      this.field.addEventListener("change", this.toggle.bind(this))
+    }
+  }
+
+  toggle() {
+    let currentValue
+
+    if (this.field.type === "checkbox") {
+      currentValue = this.field.checked ? this.field.value : null
+    } else {
+      currentValue = this.field.value
+    }
+
+    const shouldShow = currentValue === this.equalsValue
+    this.element.classList.toggle("hidden", !shouldShow)
+  }
+}

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

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "filename", "dropzone", "preview", "destroyInput"]
+
+  connect() {
+    this.dropzoneTarget.addEventListener("dragover", (e) => {
+      e.preventDefault()
+      this.dropzoneTarget.classList.add("bg-gray-100")
+    })
+
+    this.dropzoneTarget.addEventListener("dragleave", () => {
+      this.dropzoneTarget.classList.remove("bg-gray-100")
+    })
+
+    this.dropzoneTarget.addEventListener("drop", (e) => {
+      e.preventDefault()
+      this.dropzoneTarget.classList.remove("bg-gray-100")
+      const files = e.dataTransfer.files
+      if (files.length > 0) {
+        this.inputTarget.files = files
+        this.updatePreview()
+      }
+    })
+  }
+
+  updatePreview() {
+    const file = this.inputTarget.files[0]
+    this.filenameTarget.textContent = file ? file.name : "No file selected"
+    this.destroyInputTarget.value = "0"
+
+    if (file && file.type.startsWith("image/")) {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        this.previewTarget.innerHTML = `<img src="${e.target.result}" class="max-h-32 rounded" />`
+      }
+      reader.readAsDataURL(file)
+    } else if (file) {
+      this.previewTarget.innerHTML = `
+        <svg class="size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16v-4m0 0V7m0 5H3m4 0h4" />
+        </svg>`
+    }
+  }
+
+  clear() {
+    this.inputTarget.value = ""
+    this.filenameTarget.textContent = "No file selected"
+    this.previewTarget.innerHTML = `
+      <svg class="size-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16v-4m0 0V7m0 5H3m4 0h4" />
+      </svg>`
+    this.destroyInputTarget.value = "1"
+  }
+}

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

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

data/app/views/{okonomi_ui_kit → okonomi}/forms/tailwind/_checkbox_label.html.erb

@@ -3,7 +3,7 @@
   label_options[:for] = options[:id] if options[:id]
 %>
 <%= form.label(method, label_options) do %>
-  <div class="cursor-pointer font-medium text-gray-700">
+  <div class="<%= form.ui.get_theme.dig(:components, :checkbox, :label, :root) %>">
     <% if options[:label] %>
       <%= options[:label] %>
     <% else %>
@@ -11,7 +11,7 @@
     <% end %>
   </div>
   <% if options[:hint] %>
-    <div class="cursor-pointer text-sm text-gray-400">
+    <div class="<%= form.ui.get_theme.dig(:components, :checkbox, :hint, :root) %>">
       <%= t("activerecord.hints.#{form.object.class.name.underscore}.#{method}") %>
     </div>
   <% end %>

data/app/views/{okonomi_ui_kit → okonomi}/forms/tailwind/_field.html.erb

@@ -1,7 +1,7 @@
 <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)) %>
+      <%= form.label field_id, t("activerecord.attributes.#{form.object_name}.#{field_id}") %>
     <% end %>
     <% if options[:hint] %>
       <div class="relative">
@@ -26,7 +26,7 @@
       <%= yield %>
     </div>
     <% if field_id && form.object.errors.include?(field_id) %>
-      <div class="mt-1 text-red-500 text-sm">
+      <div class="mt-1 text-danger-600 text-sm">
         <%= form.object.errors[field_id].join(", ") %>
       </div>
     <% end %>

data/config/importmap.rb

@@ -1,2 +1,7 @@
+pin "application", to: "okonomi_ui_kit/application.js", preload: true
+pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
+pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
+
 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/lib/okonomi_ui_kit/engine.rb

@@ -24,12 +24,13 @@ module OkonomiUiKit
         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
+        include OkonomiUiKit::UiHelper
+
+        ActionView::Base.field_error_proc = ->(html_tag, _instance) { html_tag.html_safe }
       end
     end
   end

data/lib/okonomi_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module OkonomiUiKit
-  VERSION = "0.1.2"
+  VERSION = "0.1.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: okonomi_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.4
 platform: ruby
 authors:
 - Okonomi GmbH
@@ -23,6 +23,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 8.0.0
+- !ruby/object:Gem::Dependency
+  name: tailwindcss-ruby
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: tailwindcss-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: UI Kit for Okonomi applications
 email:
 - andre.lahs@okonomi.gmbh
@@ -1330,32 +1358,39 @@ files:
 - 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/button_helper.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
 - app/javascript/okonomi_ui_kit/application.js
 - app/javascript/okonomi_ui_kit/controllers/dropdown_controller.js
+- 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/upload_controller.js
 - app/javascript/okonomi_ui_kit_manifest.js
 - app/jobs/okonomi_ui_kit/application_job.rb
 - app/mailers/okonomi_ui_kit/application_mailer.rb
 - app/models/okonomi_ui_kit/application_record.rb
 - app/views/layouts/okonomi_ui_kit/application.html.erb
-- app/views/okonomi_ui_kit/attribute_sections/_section.html.erb
-- app/views/okonomi_ui_kit/forms/tailwind/_checkbox_label.html.erb
-- app/views/okonomi_ui_kit/forms/tailwind/_field.html.erb
-- app/views/okonomi_ui_kit/forms/tailwind/_field_set.html.erb
-- app/views/okonomi_ui_kit/forms/tailwind/_multi_select.html.erb
-- app/views/okonomi_ui_kit/forms/tailwind/_radio_button.html.erb
-- app/views/okonomi_ui_kit/forms/tailwind/_upload_field.html.erb
-- app/views/okonomi_ui_kit/navigation/_link.html.erb
-- app/views/okonomi_ui_kit/navigation/_menu.html.erb
-- app/views/okonomi_ui_kit/navigation/_navbar.html.erb
-- app/views/okonomi_ui_kit/page_builder/_page.html.erb
-- app/views/okonomi_ui_kit/tables/_table.html.erb
+- app/views/okonomi/attribute_sections/_section.html.erb
+- app/views/okonomi/components/_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/navigation/_link.html.erb
+- app/views/okonomi/navigation/_menu.html.erb
+- app/views/okonomi/navigation/_navbar.html.erb
+- app/views/okonomi/page_builder/_page.html.erb
+- app/views/okonomi/tables/_table.html.erb
 - config/importmap.rb
 - config/routes.rb
 - config/tailwind.config.js

data/app/helpers/okonomi_ui_kit/button_helper.rb

@@ -1,39 +0,0 @@
-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