relay_ui 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7158b2530047c016d6353aba1125ad761104ae2f553656c3d28c40cf6fc74f4a
-  data.tar.gz: 917a96410664ca64d92e4f41c86d7af74ebcbdc27511dbcf167fc74bd45bec26
+  metadata.gz: 5bd18a48694c8b8d66e4183e74a7bee705ace0d0b821adba7e037750a49124cb
+  data.tar.gz: d972223721bae1f638121a4ec446cf4eb26ed70f4a6358ab956e1e0273e1d709
 SHA512:
-  metadata.gz: cad6bf23e5f39a374115580a70469e382cfdb3578f0c553a04394b73632902484ba479755430eed9ad5af782a7ec633f57fe8d97ea5e75404a7609463221ebf9
-  data.tar.gz: 9f9bc6189f61911c6691b73ba0e6822fd586d339c859714d492db5b5587d3e2fcc2ea5e6c20ae0b18fff65f92872124999798c66200a84308f119e5ce7aeeab1
+  metadata.gz: 7429340803af5c5c886cec99ae2bd8c78a65033c3f1037318359acdf275c0907f67fb09423ecf3c8ba29a6916b62d3c3e82576863b0de8f10f47eef43e273e39
+  data.tar.gz: 595e27eab36b6c538b96fe30aff5d8d3b3637516a5723e48ff907a39dd845e683af8df449688f49cf79a59febad94dc0ad8eb09cf92c9726c06e8b14b449771d

data/README.md

@@ -25,13 +25,6 @@ All of RelayUI's components are housed in the `RUI::` namespace. This turns your
 
 With this in mind, we prefer pulling basic variants up to the model level. Whereas many UI kits may specify variants via parameters (eg: `Component.new(variant: :primary)`), we prefer to give major variants class-level importance. So, we'll opt for patterns like `RUI::Buttons::Primary` and `RUI::Buttons::Secondary` instead.
 
-## Using TailwindCSS
-
-RelayUI uses [TailwindCSS v4](https://tailwindcss.com/) for styling under the hood. One of the challenges we aimed to solve is how to include the styles Tailwind provides in a way that doesn't collide with any other CSS styles or frameworks being used. For example, we wanted to make sure RelayUI still worked well in projects that used Tailwind v3, or even Bootstrap.
-
-For that reason, we've decided to prefix our CSS classes with `rui:`. This way, RelayUI is able to come out of the box with all of the styles you need to make our components work, but you can choose to use any CSS framework you want and not risk any CSS class conflicts or collisions.
-STRING
-
 # Installation
 
 ### First, add the gem to your `Gemfile`:
@@ -52,12 +45,6 @@ bundle install
 gem install relay_ui
 ```
 
-### Include the gem's stylesheet in your application layout:
-
-```ruby
-stylesheet_link_tag "relay_ui/relay_ui", media: "all"
-```
-
 That's it! All of the basic functionality of the UI kit is now available to you. For certain components that require additional elements (like stimulus controllers), you'll need to include those separately. They will be documented in the component's usage instructions.
 
 # Usage

data/lib/relay_ui/engine.rb

@@ -1,10 +1,16 @@
 # frozen_string_literal: true
 
+require "rui/forms/tailwind_form_builder"
+
 module RUI
   if defined?(Rails)
     class Engine < ::Rails::Engine
       isolate_namespace RUI
 
+      initializer "relay_ui.set_default_form_builder" do |app|
+        app.config.action_view.default_form_builder = RUI::Forms::TailwindFormBuilder
+      end
+
       initializer "relay_ui.autoload.components" do
         Rails.autoloaders.main.push_dir(
           "#{Gem::Specification.find_by_name('relay_ui').gem_dir}/lib/rui",

data/lib/relay_ui/version.rb

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

data/lib/rui/buttons/base.rb

@@ -6,6 +6,9 @@ class RUI::Buttons::Base < RUI::Base
     @attrs = attrs
   end
 
+  # Style string public for use in forms
+  STYLE = "inline-block px-2 py-1 hover:cursor-pointer rounded-md transition duration-200 ease-in-out".freeze
+
   def view_template
     button(class: classes, **@attrs) do
       div(class: "flex flex-row items-center gap-2") do
@@ -22,8 +25,6 @@ class RUI::Buttons::Base < RUI::Base
   private
 
   def classes
-    "#{base_classes} #{variant_classes}"
+    "#{STYLE} #{variant_classes}"
   end
-
-  def base_classes = "inline-block px-2 py-1 hover:cursor-pointer rounded-md transition duration-200 ease-in-out"
 end

data/lib/rui/buttons/primary.rb

@@ -1,7 +1,10 @@
 # frozen_string_literal: true
 
 class RUI::Buttons::Primary < RUI::Buttons::Base
+  # Style string public for use in forms
+  STYLE = "bg-blue-700 hover:bg-blue-900 text-white border border-blue-700 hover:border-blue-900".freeze
+
   private
 
-  def variant_classes = "bg-blue-700 hover:bg-blue-900 text-white border border-blue-700 hover:border-blue-900"
+  def variant_classes = STYLE
 end

data/lib/rui/forms/helpers.rb

@@ -0,0 +1,19 @@
+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/tailwind_form_builder.rb

@@ -0,0 +1,142 @@
+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/layout/main.rb

@@ -1,5 +1,5 @@
 class RUI::Layout::Main < RUI::Base
   def view_template(&)
-    main(class: "p-5 lg:p-10 w-full max-w-[800px]", &)
+    main(class: "p-5 lg:p-10 lg:ml-72 w-full max-w-[800px]", &)
   end
 end

data/lib/rui/navigation/sidebar.rb

@@ -2,7 +2,7 @@
 
 class RUI::Navigation::Sidebar < RUI::Base
   def view_template
-    div(class: "p-10 pb-36 hidden lg:flex flex-col bg-white z-50 lg:z-auto fixed lg:relative w-screen md:w-auto h-screen lg:h-auto overflow-auto", data: { "navigation-target": "sidebar" }) do
+    div(class: "lg:w-72 p-10 pb-36 hidden lg:flex flex-col bg-white z-50 lg:z-auto fixed w-screen md:w-auto h-screen lg:max-h-full overflow-y-auto", data: { "navigation-target": "sidebar" }) do
       yield
     end
     button(class: "lg:hidden hidden bg-black/75 fixed w-screen h-screen", data: { navigation_target: "curtain", action: "navigation#toggle" })

data/lib/rui/table.rb

@@ -7,48 +7,38 @@ class RUI::Table < RUI::Base
   def view_template(&)
     vanish(&)
 
-    table(class: "bg-white w-full table-auto border-collapse") do
+    table(class: "bg-white w-full table-auto border-collapse rounded") do
       thead(class: "bg-blue-50") do
         @columns.each do |column|
-          th(class: "border border-zinc-300 py-2 px-2 #{align(column[:align])}") do
+          th(class: classes(column[:attrs][:class])) do
             column[:header]
           end
         end
-        th(class: "border border-zinc-300 px-2 text-center") { "" }
       end
 
       tbody do
         @rows.each do |row|
-          tr(class: "hover:bg-zinc-50") do
+          tr(class: "odd:bg-white even:bg-zinc-100 hover:bg-zinc-200") do
             @columns.each do |column|
-              td(class: "border border-zinc-300 py-1 px-2 #{align(column[:align])}") do
+              td(class: classes(column[:attrs][:class])) do
                 column[:content].call(row)
               end
             end
-            td(class: "border border-zinc-300 py-1 px-2 text-center") do
-              div(class: "flex flex-row justify-center gap-3") do
-                render RUI::Buttons::Ghost.new(icon: "edit")
-                render RUI::Buttons::Ghost.new(icon: "archive")
-              end
-            end
           end
         end
       end
     end
   end
 
-  def column(header, align = :left, &content)
-    @columns << { header:, align:, content: }
+  def column(header = "", **attrs, &content)
+    @columns << { header:, attrs:, content: }
   end
 
-  def align(align)
-    case align
-    when :right
-      "text-right"
-    when :center
-      "text-center"
-    else
-      "text-left"
-    end
+  private
+
+  def base_classes = "border border-zinc-300 py-1 px-2 text-left"
+
+  def classes(custom_classes)
+    RUI::TailwindMerger.instance.merge(base_classes, custom_classes)
   end
 end

data/lib/rui/tailwind_merger.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal
+
+require "tailwind_merge"
+
+class RUI::TailwindMerger
+  include Singleton
+  include TailwindMerge
+
+  def initialize
+    @merger = TailwindMerge::Merger.new
+  end
+
+  def merge(base_classes, given_classes)
+    return base_classes if given_classes.nil?
+    @merger.merge([ base_classes, given_classes ])
+  end
+end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: relay_ui
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - logicrelay
 bindir: bin
 cert_chain: []
-date: 2025-03-21 00:00:00.000000000 Z
+date: 2025-04-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -79,6 +79,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.18'
+- !ruby/object:Gem::Dependency
+  name: tailwind_merge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -215,11 +229,13 @@ files:
 - lib/rui/forms/checkbox.rb
 - lib/rui/forms/email.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/helpers.rb
@@ -247,6 +263,7 @@ files:
 - lib/rui/navigation/top.rb
 - lib/rui/slideout.rb
 - lib/rui/table.rb
+- lib/rui/tailwind_merger.rb
 - lib/rui/text.rb
 homepage: https://www.relayui.com
 licenses: