relay_ui 0.4.1 → 0.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ac008514b4c6294d178fbcb34b555bbb87f55e71a58ae882f772da69766e9afa
-  data.tar.gz: 49972be6884ac11eb5a932afb0b2e1fa803dcac29f7fc5690f54db358f74bd20
+  metadata.gz: 9a75842c1f5810806bc506c8ca23a86cc8a2a3006e9c6b5855dc2d13ad18b566
+  data.tar.gz: 32856878ae638a4e506ce7737d0ed4a3a8869bace13afb9d189aa27653bbdc56
 SHA512:
-  metadata.gz: e13a3dc12a61096d944ce0d88da1416a9a4a9e05127b1d4cc37a77dbb414629ceee63a02a5d0f87a74cb8488ced3f2d2eda080f49e5f65b5d1abe0f9f5d7d59e
-  data.tar.gz: 5d9f7449fd5c1cb535527fa54ca04e531e4f55b961f18eed4e5f2b02bdb0b6603ab92bb0a0a56ebbbac1df6fdb3b59d04ae68be3670a60a4f148febfe4a2f115
+  metadata.gz: 5f727bcd802a52b62b2a1d24b3f8847be1cbb54663aa9d70a2d229a65bf643da7175bfbd797b582975c86d124a5718eaecbfdbea3daabc49aeb22ef54823d636
+  data.tar.gz: 0ec8ebcb52f7b2a08ad11473b41990cd122dc8260387200584ff8e79fa07cc424cb2bc8fff52f7eabd4970cde06d13ea7237fec69d082a9109c7ba0bff7bad81

data/lib/relay_ui/engine.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-require "rui/forms/tailwind_form_builder"
+require "rui/forms/form_builder"
 
 module RUI
   if defined?(Rails)
@@ -8,7 +8,7 @@ module RUI
       isolate_namespace RUI
 
       initializer "relay_ui.set_default_form_builder" do |app|
-        app.config.action_view.default_form_builder = RUI::Forms::TailwindFormBuilder
+        app.config.action_view.default_form_builder = RUI::Forms::FormBuilder
       end
 
       initializer "relay_ui.autoload.components" do

data/lib/relay_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RUI
-  VERSION = "0.4.1"
+  VERSION = "0.4.2"
 end

data/lib/rui/forms/errors.rb

@@ -0,0 +1,21 @@
+class RUI::Forms::Errors < RUI::Base
+  include Phlex::Rails::Helpers::Pluralize
+
+  def initialize(errors, object_name = "record")
+    @errors = errors
+    @object_name = object_name
+  end
+
+  def view_template
+    if @errors.any?
+      div(class: "bg-red-50 text-red-500 p-10 font-medium rounded-md mt-3") do
+        h2 { pluralize(@errors.count, "error") + " prohibited this #{@object_name} from being saved:" }
+        ul(class: "list-disc ml-6") do
+          @errors.each do |error|
+            li { error.full_message }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/rui/forms/field_group.rb

@@ -1,5 +1,5 @@
 class RUI::Forms::FieldGroup < RUI::Base
   def view_template(&)
-    div(class: "flex flex-col gap-1", &)
+    div(class: "flex flex-col gap-2", &)
   end
 end

data/lib/rui/forms/form_builder.rb

@@ -0,0 +1,66 @@
+module RUI::Forms
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    # include ActionView::Helpers::TagHelper
+    include ActiveSupport::Concern
+    # Base styles for different element types
+    TEXT_FIELD_STYLE = "bg-zinc-50 ring ring-zinc-300 hover:ring-zinc-400 focus:ring-blue-500 rounded px-2 py-1".freeze
+    SELECT_FIELD_STYLE = "bg-zinc-50 ring ring-zinc-300 hover:ring-zinc-400 focus:ring-blue-500 rounded px-2 py-2".freeze
+
+    class_attribute :text_field_helpers, default: field_helpers - [ :label, :check_box, :radio_button, :fields_for, :fields, :hidden_field, :file_field ]
+
+    # Style labels and include error messages if present
+    def label(method, content_or_options = nil, options = {}, &block)
+    opts = content_or_options || options
+
+    default_classes = opts[:required] ? "text-sm font-semibold after:content-['*'] after:ml-1 after:text-red-500" : "text-sm font-semibold"
+    error_classes = "text-sm text-red-500 font-semibold"
+
+    label_options = merge_classes(opts, default_classes)
+
+    label_content = if object.present? && object.errors[method].present?
+      @template.content_tag(:div, class: "flex flex-col") do
+        @template.concat(super(method, content_or_options, label_options, &block))
+        @template.concat(@template.content_tag(:span, object.errors.full_messages_for(method).to_sentence, class: error_classes))
+      end
+    else
+      super(method, content_or_options, label_options, &block)
+    end
+
+    # Use metaprogramming to style fields that are like text fields
+
+    text_field_helpers.each do |field_method|
+      class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
+        def #{field_method}(method, options = {})
+          super(method, merge_classes(options, TEXT_FIELD_STYLE))
+        end
+      RUBY_EVAL
+    end
+      label_content
+    end
+
+    # Fields and helpers that are not covered in text-like fields
+    def select(method, choices = nil, options = {}, html_options = {}, &block)
+      super(method, choices, options, merge_classes(html_options, SELECT_FIELD_STYLE), &block)
+    end
+
+    def submit(value = nil, options = {})
+      default_classes = RUI::TailwindMerger.instance.merge(RUI::Buttons::Base::STYLE, RUI::Buttons::Primary::STYLE)
+
+      @template.content_tag("div", super(value, merge_classes(options, default_classes)))
+    end
+
+    private
+
+    # Utility for merging optional classes
+    def merge_classes(hash, default_classes)
+      if hash.nil?
+        { class: default_classes }
+      elsif hash.key?(:class)
+        merged_classes = RUI::TailwindMerger.instance.merge(default_classes, hash[:class])
+        hash.merge!(class: merged_classes)
+      else
+        hash.merge!(class: default_classes)
+      end
+    end
+  end
+end

data/lib/rui/layout/main.rb

@@ -1,5 +1,21 @@
 class RUI::Layout::Main < RUI::Base
+  def initialize(attrs = {})
+    @attrs = attrs
+  end
+
   def view_template(&)
-    main(class: "p-5 lg:p-10 lg:ml-72 w-full max-w-[800px]", &)
+    main(**merged_attributes, &)
+  end
+
+  def merged_attributes
+    default_classes = "p-10 w-full lg:ml-72 lg:w-[calc(100%_-_18rem)]"
+
+    merged_classes = if @attrs[:class]
+      RUI::TailwindMerger.instance.merge(default_classes, @attrs[:class])
+    else
+      default_classes
+    end
+
+    @attrs.merge! class: merged_classes
   end
 end

data/lib/rui/layout/page.rb

@@ -1,5 +1,5 @@
 class RUI::Layout::Page < RUI::Base
   def view_template(&)
-    div(class: "flex flex-row mt-25.5 lg:mt-14", &)
+    div(class: "flex mt-25.5 lg:mt-14", &)
   end
 end

data/lib/rui/links/base.rb

@@ -8,14 +8,16 @@ class RUI::Links::Base < RUI::Base
   end
 
   def view_template
-    a(href: @href, class: classes, **@attrs) do
-      div(class: "flex flex-row items-center gap-2") do
-        if @icon
-          div(class: "size-4 my-1") do
-            render RUI::Icon.new(@icon)
+    div do
+      a(href: @href, class: classes, **@attrs) do
+        div(class: "flex flex-row items-center gap-2") do
+          if @icon
+            div(class: "size-4 my-1") do
+              render RUI::Icon.new(@icon)
+            end
           end
+          span { yield } if block_given?
         end
-        span { yield } if block_given?
       end
     end
   end

data/lib/rui/links/text.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class RUI::Links::Text < RUI::Base
+  def initialize(href: "#", **attrs)
+    @href = href
+    @attrs = attrs
+  end
+
+  def view_template(&) = a(href: @href, class: "text-blue-700 hover:cursor-pointer hover:underline", **@attrs, &)
+
+  private
+
+  def classes
+    ""
+  end
+end

data/lib/rui/navigation/top.rb

@@ -2,8 +2,8 @@
 
 class RUI::Navigation::Top < RUI::Base
   def view_template(&)
-    div(class: "fixed top-0 left-0 right-0 bg-white flex flex-col z-50") do
-      section(class: "flex flex-row items-center justify-between gap-3 border-b border-zinc-300 p-3 lg:px-10", &)
+    div(class: "fixed top-0 left-0 right-0 bg-white flex flex-col z-30") do
+      section(class: "flex flex-row items-center justify-between gap-3 border-b border-zinc-300 p-3 lg:px-10 min-h-16", &)
       section(class: "lg:hidden p-3 border-b border-zinc-300") do
         render RUI::Buttons::Ghost.new(
           icon: "menu",

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: relay_ui
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.4.2
 platform: ruby
 authors:
 - logicrelay
 bindir: bin
 cert_chain: []
-date: 2025-04-10 00:00:00.000000000 Z
+date: 2025-04-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -226,18 +226,9 @@ files:
 - lib/rui/card.rb
 - lib/rui/flash.rb
 - lib/rui/forms.rb
-- lib/rui/forms/checkbox.rb
-- lib/rui/forms/email.rb
+- lib/rui/forms/errors.rb
 - lib/rui/forms/field_group.rb
-- lib/rui/forms/helpers.rb
-- lib/rui/forms/label.rb
-- lib/rui/forms/password.rb
-- lib/rui/forms/phone.rb
-- lib/rui/forms/radio.rb
-- lib/rui/forms/select.rb
-- lib/rui/forms/tailwind_form_builder.rb
-- lib/rui/forms/text.rb
-- lib/rui/forms/textarea.rb
+- lib/rui/forms/form_builder.rb
 - lib/rui/helpers.rb
 - lib/rui/icon.rb
 - lib/rui/layout.rb
@@ -251,6 +242,7 @@ files:
 - lib/rui/links/outline.rb
 - lib/rui/links/primary.rb
 - lib/rui/links/secondary.rb
+- lib/rui/links/text.rb
 - lib/rui/markdown.rb
 - lib/rui/markdown/generator.rb
 - lib/rui/markdown/safe.rb

data/lib/rui/forms/checkbox.rb

@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-class RUI::Forms::Checkbox < RUI::Base
-  def initialize(**kwargs)
-    @kwargs = kwargs
-  end
-
-  def view_template(&)
-  div(class: "flex flex-row gap-3 items-center") do
-      input(
-        type: "hidden",
-        value: "0",
-        autocomplete: "off",
-        **@kwargs
-      )
-      input(
-        type: "checkbox",
-        value: "1",
-        class: "appearance-none size-4 border border-zinc-300 rounded hover:border-zinc-500 hover:cursor-pointer checked:bg-blue-700",
-        **@kwargs
-      )
-      render RUI::Forms::Label.new(&) if block_given?
-    end
-  end
-end

data/lib/rui/forms/email.rb

@@ -1,19 +0,0 @@
-# frozen_string_literal: true
-
-class RUI::Forms::Email < RUI::Base
-  def initialize(**kwargs)
-    @kwargs = kwargs
-  end
-
-  def view_template(&)
-    render RUI::Forms::FieldGroup.new do
-      render RUI::Forms::Label.new(&) if block_given?
-      input(
-        type: "email",
-        class: "border border-zinc-300 hover:border-zinc-400 rounded px-2 py-1",
-        **@kwargs
-      )
-    end
-    div
-  end
-end

data/lib/rui/forms/helpers.rb

@@ -1,19 +0,0 @@
-module RUI::Forms::Helpers
-  DEFAULT_CLASSES = "flex flex-col gap-4".freeze
-
-  def rui_form_with(**options, &block)
-    if options.present? && options[:html][:class].present?
-      form_with_merged_classes(options[:html][:class], **options, &block)
-    else
-      # TODO: Remove reference to builder
-      form_with(**options.merge(builder: TailwindFormBuilder, html: { class: DEFAULT_CLASSES }), &block)
-    end
-  end
-
-  private
-
-  def form_with_merged_classes(provided_classes, **options, &block)
-    css = RUI::TailwindMerger.instance.merge(DEFAULT_CLASSES, provided_classes)
-    form_with(**options.merge(html: { class: css }), &block)
-  end
-end

data/lib/rui/forms/label.rb

@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-class RUI::Forms::Label < RUI::Base
-  def view_template(&)
-    label(class: "text-sm font-semibold", &)
-  end
-end

data/lib/rui/forms/password.rb

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-class RUI::Forms::Password < RUI::Base
-  def initialize(**kwargs)
-    @kwargs = kwargs
-  end
-
-  def view_template(&)
-    render RUI::Forms::FieldGroup.new do
-      render RUI::Forms::Label.new(&) if block_given?
-      input(
-        type: "password",
-        class: "border border-zinc-300 hover:border-zinc-400 rounded px-2 py-1",
-        **@kwargs
-      )
-    end
-  end
-end

data/lib/rui/forms/phone.rb

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-class RUI::Forms::Phone < RUI::Base
-  def initialize(**kwargs)
-    @kwargs = kwargs
-  end
-
-  def view_template(&)
-    render RUI::Forms::FieldGroup.new do
-      render RUI::Forms::Label.new(&) if block_given?
-      input(
-        type: :tel,
-        class: "border border-zinc-300 hover:border-zinc-400 rounded px-2 py-1",
-        **@kwargs
-      )
-    end
-  end
-end

data/lib/rui/forms/radio.rb

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-class RUI::Forms::Radio < RUI::Base
-  def initialize(label:, &)
-    @label = label
-    super(&)
-  end
-
-  def view_template
-    render RUI::Forms::FieldGroup.new do
-      render RUI::Forms::Label.new { @label }
-      yield
-    end
-  end
-
-  def option(**attrs, &)
-    div(class: "flex flex-row gap-3 items-center") do
-      input(class: "hover:cursor-pointer", type: :radio, **attrs)
-      label(&)
-    end
-  end
-end

data/lib/rui/forms/select.rb

@@ -1,24 +0,0 @@
-# frozen_string_literal: true
-
-class RUI::Forms::Select < RUI::Base
-  def initialize(label:, **attrs, &)
-    @label = label
-    @attrs = attrs
-    super(&)
-  end
-
-  def view_template(&)
-    render RUI::Forms::FieldGroup.new do
-      render RUI::Forms::Label.new { @label }
-      select(
-        class: "border border-zinc-300 hover:border-zinc-400 rounded px-2 py-1.5 hover:cursor-pointer",
-        **@attrs,
-        &
-      )
-    end
-  end
-
-  def option(**attrs, &)
-    tag(:option, **attrs, &)
-  end
-end

data/lib/rui/forms/tailwind_form_builder.rb

@@ -1,142 +0,0 @@
-module RUI::Forms
-  class TailwindFormBuilder < ActionView::Helpers::FormBuilder
-    include ActionView::Helpers::TagHelper
-
-    class_attribute :text_field_helpers, default: field_helpers - [ :label, :check_box, :radio_button, :fields_for, :fields, :hidden_field, :file_field ]
-
-    TEXT_FIELD_STYLE = "bg-white ring ring-zinc-100 hover:ring-zinc-400 rounded px-2 py-1".freeze
-    SELECT_FIELD_STYLE = "block bg-white ring ring-zinc-100 hover:ring-zinc-400 rounded px-2 py-1".freeze
-
-    text_field_helpers.each do |field_method|
-      class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
-          def #{field_method}(method, options = {})
-            if options.delete(:tailwindified)
-              super
-            else
-              text_like_field(#{field_method.inspect}, method, options)
-            end
-          end
-      RUBY_EVAL
-    end
-
-    def submit(value = nil, options = {})
-      custom_opts, opts = partition_custom_opts(options)
-      style_classes = RUI::TailwindMerger.instance.merge(
-        RUI::Buttons::Base::STYLE,
-        RUI::Buttons::Primary::STYLE
-      )
-      classes = apply_style_classes(style_classes, custom_opts)
-
-      @template.content_tag("div", super(value, { class: classes }.merge(opts)))
-    end
-
-    def select(method, choices = nil, options = {}, html_options = {}, &block)
-      custom_opts, opts = partition_custom_opts(options)
-      classes = apply_style_classes(SELECT_FIELD_STYLE, custom_opts, method)
-
-      labels = labels(method, custom_opts[:label], options)
-      field = super(method, choices, opts, html_options.merge({ class: classes }), &block)
-
-      labels + field
-    end
-
-    def collection_check_boxes(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
-      custom_opts = partition_custom_opts(options)
-
-      check_boxes = @template.collection_check_boxes(@object_name, method, collection, value_method, text_method, objectify_options(options), @default_html_options.merge(html_options), &block)
-
-      labels = labels(method, custom_opts, options)
-
-      @template.content_tag("div", labels + check_boxes, { class: "flex flex-col gap-3 items-start justify-middle" })
-    end
-
-      # def collection_radio_buttons(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
-      #   custom_opts = partition_custom_opts(options)
-
-      #   buttons = @template.collection_radio_buttons(@object_name, method, collection, value_method, text_method, objectify_options(options), @default_html_options.merge(html_options), &block)
-
-      #   labels = labels(method, custom_opts, options)
-
-      #   @template.content_tag("div", labels + buttons, { class: "flex flex-col gap-3 items-start justify-middle" })
-      # end
-
-      def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
-        @template.collection_select(@object_name, method, collection, value_method, text_method, objectify_options(options), @default_html_options.merge(html_options))
-      end
-
-    private
-
-    def text_like_field(field_method, object_method, options = {})
-      custom_opts, opts = partition_custom_opts(options)
-
-      classes = apply_style_classes(TEXT_FIELD_STYLE, custom_opts, object_method)
-
-      field = send(field_method, object_method, {
-        class: classes,
-        title: errors_for(object_method)&.join(" ")
-      }.compact.merge(opts).merge({ tailwindified: true }))
-
-      labels = labels(object_method, custom_opts[:label], options)
-
-      @template.content_tag("div", labels + field, { class: "flex flex-col gap-1" })
-    end
-
-    def labels(object_method, label_options, field_options)
-      label = tailwind_label(object_method, label_options, field_options)
-      error_label = error_label(object_method, field_options)
-
-      @template.content_tag("div", label + error_label, { class: "flex flex-col items-start" })
-    end
-
-    def tailwind_label(object_method, label_options, field_options)
-      text, label_opts = if label_options.present?
-        [ label_options[:text], label_options.except(:text) ]
-      else
-        [ nil, {} ]
-      end
-
-      label_classes = label_opts[:class] || "text-sm font-semibold"
-      label_classes += " font-zinc-500" if field_options[:disabled]
-      label(object_method, text, {
-        class: label_classes
-      }.merge(label_opts.except(:class)))
-    end
-
-    def error_label(object_method, options)
-      if errors_for(object_method).present?
-        error_message = @object.errors[object_method].collect(&:titleize).join(", ")
-        tailwind_label(object_method, { text: error_message, class: " font-bold text-red-500" }, options)
-      end
-    end
-
-    def border_color_classes(object_method)
-      if errors_for(object_method).present?
-        " border-2 border-red-400 focus:border-rose-200"
-      else
-        " border border-gray-300 focus:border-yellow-700"
-      end
-    end
-
-    def apply_style_classes(classes, custom_opts, object_method = nil)
-      classes + border_color_classes(object_method) + " #{custom_opts[:class]}"
-    end
-
-    CUSTOM_OPTS = [ :label, :class ].freeze
-    def partition_custom_opts(opts)
-      opts.partition { |k, v| CUSTOM_OPTS.include?(k) }.map(&:to_h)
-    end
-
-    def errors_for(object_method)
-      return unless @object.present? && object_method.present?
-
-      @object.errors[object_method]
-    end
-
-    def check_box_classes(method, field_classes = nil)
-      classes = <<~CLASSES.strip
-        block rounded size-3.5 focus:ring focus:ring-success checked:bg-success checked:hover:bg-success/90 cursor-pointer focus:ring-opacity-50
-      CLASSES
-      "#{classes} #{field_classes} #{border_color_classes(method)}"
-    end
-  end
-end

data/lib/rui/forms/text.rb

@@ -1,17 +0,0 @@
-# frozen_string_literal: true
-
-class RUI::Forms::Text < RUI::Base
-  def initialize(**kwargs)
-    @kwargs = kwargs
-  end
-
-  def view_template(&)
-    render RUI::Forms::FieldGroup.new do
-      render RUI::Forms::Label.new(&) if block_given?
-      input(
-        class: "border border-zinc-300 hover:border-zinc-400 rounded px-2 py-1",
-        **@kwargs
-      )
-    end
-  end
-end

data/lib/rui/forms/textarea.rb

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-class RUI::Forms::Textarea < RUI::Base
-  def initialize(**kwargs)
-    @kwargs = kwargs
-  end
-
-  def view_template(&)
-    render RUI::Forms::FieldGroup.new do
-      render RUI::Forms::Label.new(&) if block_given?
-      textarea(
-        rows: 5,
-        class: "border border-zinc-300 hover:border-zinc-400 rounded px-2 py-1",
-        **@kwargs
-      )
-    end
-  end
-end