relay_ui 0.2.3 → 0.4.0

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/forms/text.rb

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

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

data/lib/rui/forms.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+module RUI::Forms; end

data/lib/rui/helpers.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+module RUI::Helpers; end

data/lib/rui/icon.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require "tabler_icons_ruby"
 
 class RUI::Icon < RUI::Base
@@ -6,6 +8,6 @@ class RUI::Icon < RUI::Base
   end
 
   def view_template
-    raw TablerIconsRuby.render(@icon)
+    div { TablerIconsRuby.render(@icon) }
   end
 end

data/lib/rui/layout/body.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class RUI::Layout::Body < RUI::Base
+  def view_template(&)
+    body(class: "flex flex-col", data: { controller: "navigation" }, &)
+  end
+end

data/lib/rui/layout/main.rb

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

data/lib/rui/layout/page.rb

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

data/lib/rui/layout.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+module RUI::Layout; end

data/lib/rui/links/base.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class RUI::Links::Base < RUI::Base
   def initialize(href: "#", icon: nil, data: {})
     @href = href
@@ -7,9 +9,9 @@ class RUI::Links::Base < RUI::Base
 
   def view_template
     a(href: @href, class: classes, data: @data) do
-      div(class: "rui:flex rui:flex-row rui:items-center rui:gap-2") do
+      div(class: "flex flex-row items-center gap-2") do
         if @icon
-          div(class: "rui:size-4 rui:my-1") do
+          div(class: "size-4 my-1") do
             render RUI::Icon.new(@icon)
           end
         end
@@ -24,5 +26,5 @@ class RUI::Links::Base < RUI::Base
     "#{base_classes} #{variant_classes}"
   end
 
-  def base_classes = "rui:inline-block rui:px-3 rui:py-1 rui:hover:cursor-pointer rui:rounded rui:transition rui:duration-200 rui:ease-in-out"
+  def base_classes = "inline-block px-2 py-1 hover:cursor-pointer rounded transition duration-200 ease-in-out"
 end

data/lib/rui/links/destructive.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Links::Destructive < RUI::Links::Base
   private
 
-  def variant_classes = "rui:bg-red-700 rui:hover:bg-red-900 rui:text-white"
+  def variant_classes = "bg-red-700 hover:bg-red-900 text-white border border-red-700 hover:border-red-900"
 end

data/lib/rui/links/ghost.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Links::Ghost < RUI::Links::Base
   private
 
-  def variant_classes = "rui:hover:bg-zinc-100"
+  def variant_classes = "text-blue-700 hover:text-blue-900 hover:bg-zinc-100"
 end

data/lib/rui/links/outline.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Links::Outline < RUI::Links::Base
   private
 
-  def variant_classes = "rui:border rui:rounded rui:border-zinc-700 rui:hover:border-zinc-900 rui:text-zinc-700 rui:hover:text-zinc-900 rui:hover:bg-zinc-100"
+  def variant_classes = "border rounded border-zinc-300 hover:border-zinc-700 text-zinc-700"
 end

data/lib/rui/links/primary.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Links::Primary < RUI::Links::Base
   private
 
-  def variant_classes = "rui:bg-blue-700 rui:hover:bg-blue-900 rui:text-white"
+  def variant_classes = "bg-blue-700 hover:bg-blue-900 text-white border border-blue-700 hover:border-blue-900"
 end

data/lib/rui/links/secondary.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Links::Secondary < RUI::Links::Base
   private
 
-  def variant_classes = "rui:bg-zinc-700 rui:hover:bg-zinc-900 rui:text-white"
+  def variant_classes = "bg-zinc-700 hover:bg-zinc-900 text-white border border-zinc-700 hover:border-zinc-900"
 end

data/lib/rui/links.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+module RUI::Links; end

data/lib/rui/markdown/generator.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require "redcarpet"
 
 class RUI::Markdown::Generator
@@ -7,7 +9,6 @@ class RUI::Markdown::Generator
     options = {
       filter_html: true,
       hard_wrap: true,
-      link_attributes: { rel: "nofollow", target: "_blank" },
       escape_html: true
     }
 

data/lib/rui/markdown/safe.rb

@@ -1,6 +1,8 @@
+  # frozen_string_literal: true
+
   class RUI::Markdown::Safe < RUI::Base
     def view_template(&block)
-      article(class: "rui:markdown") do
+      article(class: "prose") do
         RUI::Markdown::Generator.instance.get_safe(capture(&block))
       end
     end

data/lib/rui/markdown/safe_renderer.rb

@@ -1,8 +1,10 @@
+# frozen_string_literal: true
+
 require "rouge"
 require "rouge/plugins/redcarpet"
 require "redcarpet"
 
-class RUI::Markdown::SafeRenderer < Redcarpet::Render::XHTML
+class RUI::Markdown::SafeRenderer < Redcarpet::Render::HTML
   include Rouge::Plugins::Redcarpet
 
   private

data/lib/rui/markdown/unsafe.rb

@@ -1,6 +1,8 @@
+  # frozen_string_literal: true
+
   class RUI::Markdown::Unsafe < RUI::Base
     def view_template(&block)
-      article(class: "rui:markdown") do
+      article(class: "prose") do
         RUI::Markdown::Generator.instance.get_unsafe(capture(&block))
       end
     end

data/lib/rui/markdown/unsafe_renderer.rb

@@ -1,8 +1,10 @@
+# frozen_string_literal: true
+
 require "rouge"
 require "rouge/plugins/redcarpet"
 require "redcarpet"
 
-class RUI::Markdown::UnsafeRenderer < Redcarpet::Render::XHTML
+class RUI::Markdown::UnsafeRenderer < Redcarpet::Render::HTML
   include Rouge::Plugins::Redcarpet
 
   def block_code(code, lang)
@@ -26,6 +28,12 @@ class RUI::Markdown::UnsafeRenderer < Redcarpet::Render::XHTML
     formatter.format(lexer.lex(unescaped))
   end
 
+  def codespan(code)
+    unescaped = CGI.unescapeHTML(code)
+
+    "<code>#{unescaped}</code>"
+  end
+
   private
 
   def rouge_formatter(lexer)

data/lib/rui/markdown.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+module RUI::Markdown; end

data/lib/rui/navigation/menu_button.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class RUI::Navigation::MenuButton < RUI::Base
+  def view_template
+    render RUI::Buttons::Outline.new(icon: "menu", data: { action: "navigation#toggle", class: "lg:hidden" })
+  end
+end

data/lib/rui/navigation/sidebar.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+class RUI::Navigation::Sidebar < RUI::Base
+  def view_template
+    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" })
+  end
+
+  def section_heading
+    p(class: "pt-8 pb-4 mt-6 text-base md:text-sm font-semibold uppercase text-zinc-400") do
+      yield
+    end
+  end
+
+  def icon_link(icon:, href:, selected: false)
+    if selected
+      state_classes = "border-blue-700 text-zinc-700 **:[svg]:stroke-blue-700 font-semibold"
+    else
+      state_classes = "border-transparent text-zinc-500 hover:border-zinc-200 hover:text-zinc-700 **:[svg]:stroke-zinc-400 hover:**:[svg]:stroke-zinc-700"
+    end
+
+    a(href:, class: "inline-flex items-center gap-2 py-1 #{state_classes}") do
+      div(class: "size-5 md:size-4") do
+        render RUI::Icon.new(icon)
+      end
+      span(class: "text-lg md:text-base") { yield }
+    end
+  end
+
+  def text_link(href:, selected: false)
+    if selected
+      state_classes = "border-blue-700 text-zinc-700 font-semibold"
+    else
+      state_classes = "border-transparent text-zinc-400 hover:border-zinc-200 hover:text-zinc-700"
+    end
+
+    a(href:, class: "text-zinc-400 px-5 py-1 border-l-3 #{state_classes}") do
+      span(class: "text-lg md:text-base") { yield }
+    end
+  end
+end

data/lib/rui/navigation/top.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+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", &)
+      section(class: "lg:hidden p-3 border-b border-zinc-300") do
+        render RUI::Buttons::Ghost.new(
+          icon: "menu",
+          data: { action: "navigation#toggle" }
+        )
+      end
+    end
+  end
+
+  def group(&)
+    section(class: "flex flex-row items-center gap-3", &)
+  end
+end

data/lib/rui/navigation.rb

@@ -1,51 +1,3 @@
-class RUI::Navigation < RUI::Base
-  register_value_helper :request
+# frozen_string_literal: true
 
-  def view_template
-    div(class: "rui:flex rui:flex-col rui:sticky rui:top-0 rui:max-h-screen rui:overflow-y-auto rui:mx-10 rui:py-10") do
-      yield
-    end
-  end
-
-  def section_heading
-    p(class: "rui:pt-8 rui:pb-4 rui:mt-6 rui:text-sm rui:font-semibold rui:uppercase rui:text-zinc-400 rui:border-t rui:border-zinc-200") do
-      yield
-    end
-  end
-
-  def icon_link(href:, icon:)
-    if request.path == href
-      state_classes = "rui:border-blue-700 rui:text-zinc-700 rui:**:[svg]:stroke-blue-700"
-    else
-      state_classes = "rui:border-transparent rui:text-zinc-400 rui:hover:border-zinc-200 rui:hover:text-zinc-700 rui:**:[svg]:stroke-zinc-300 rui:hover:**:[svg]:stroke-zinc-700"
-    end
-
-    a(href:, class: "rui:inline-flex rui:items-center rui:gap-2 rui:py-1 #{state_classes}") do
-      div(class: "rui:size-4") do
-        render RUI::Icon.new(icon)
-      end
-      span { yield }
-    end
-  end
-
-  def text_link(href)
-    if request.path == href
-      state_classes = "rui:border-blue-700 rui:text-zinc-700"
-    else
-      state_classes = "rui:border-transparent rui:text-zinc-400 rui:hover:border-zinc-200 rui:hover:text-zinc-700"
-    end
-
-    a(href:, class: "rui:text-zinc-400 rui:px-5 rui:py-1 rui:border-l-3 #{state_classes}") do
-      span { yield }
-    end
-  end
-
-  def coming_soon
-    div(class: "rui:flex rui:flex-row rui:items-center") do
-      span(class: "rui:text-zinc-400 rui:px-5 rui:py-1 rui:border-l-3 rui:border-transparent") do
-        yield
-      end
-      render RUI::Badges::Gray.new { "Coming Soon" }
-    end
-  end
-end
+module RUI::Navigation; end

data/lib/rui/slideout.rb

@@ -1,17 +1,17 @@
+# frozen_string_literal: true
+
 class RUI::Slideout < RUI::Base
   include Phlex::Rails::Helpers::TurboFrameTag
 
-  def view_template
+  def view_template(&)
     turbo_frame_tag "slideout" do
-      div(class: "rui:absolute rui:inset-0 rui:z-50", data: { controller: "slideout" }) do
-        a(href: "#", class: "rui:cursor-default", data: { action: "slideout#hide" }) do
-          div(id: "modal-curtain", class: "rui:w-screen rui:h-screen rui:bg-black rui:transition-opacity rui:opacity-75", data: { slideout_target: "curtain" })
+      div(class: "absolute inset-0 z-50", data: { controller: "slideout" }) do
+        a(href: "#", class: "cursor-default", data: { action: "slideout#hide" }) do
+          div(id: "modal-curtain", class: "w-screen h-screen bg-black transition-opacity opacity-75", data: { slideout_target: "curtain" })
         end
-        div(class: "rui:right-0 rui:fixed rui:inset-y-0 rui:flex rui:max-w-1/2 rui:pointer-events-none") do
-          div(class: "rui:w-screen rui:pointer-events-auto", data: { slideout_target: "slideout" }) do
-            div(class: "rui:w-full rui:h-full rui:bg-white rui:shadow") do
-              yield
-            end
+        div(class: "right-0 fixed inset-y-0 flex max-w-1/2 pointer-events-none") do
+          div(class: "w-screen pointer-events-auto", data: { slideout_target: "slideout" }) do
+            div(class: "w-full h-full bg-white shadow", &)
           end
         end
       end

data/lib/rui/table.rb

@@ -0,0 +1,44 @@
+class RUI::Table < RUI::Base
+  def initialize(rows)
+    @rows = rows
+    @columns = []
+  end
+
+  def view_template(&)
+    vanish(&)
+
+    table(class: "bg-white w-full table-auto border-collapse rounded") do
+      thead(class: "bg-blue-50") do
+        @columns.each do |column|
+          th(class: classes(column[:attrs][:class])) do
+            column[:header]
+          end
+        end
+      end
+
+      tbody do
+        @rows.each do |row|
+          tr(class: "odd:bg-white even:bg-zinc-100 hover:bg-zinc-200") do
+            @columns.each do |column|
+              td(class: classes(column[:attrs][:class])) do
+                column[:content].call(row)
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+
+  def column(header = "", **attrs, &content)
+    @columns << { header:, attrs:, content: }
+  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

data/lib/rui/text.rb

@@ -1,19 +1,21 @@
+# frozen_string_literal: true
+
 module RUI::Text
   class Large < RUI::Base
     def view_template
-      p(class: "rui:text-lg rui:text-zinc-700 rui:mb-4") { yield }
+      p(class: "text-lg text-zinc-700 mb-4", **@attrs) { yield }
     end
   end
 
   class Medium < RUI::Base
     def view_template
-      p(class: "rui:text-base rui:text-zinc-700 rui:mb-4") { yield }
+      p(class: "text-base text-zinc-700 mb-4", **@attrs) { yield }
     end
   end
 
   class Small < RUI::Base
     def view_template
-      p(class: "rui:text-sm rui:text-zinc-700 rui:mb-4") { yield }
+      p(class: "text-sm text-zinc-700 mb-4", **@attrs) { yield }
     end
   end
 end