relay_ui 0.1.1 → 0.3.0

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require "tabler_icons_ruby"
+
+class RUI::Icon < RUI::Base
+  def initialize(icon)
+    @icon = icon
+  end
+
+  def view_template
+    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 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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class RUI::Links::Base < RUI::Base
+  def initialize(href: "#", icon: nil, data: {})
+    @href = href
+    @icon = icon
+    @data = data
+  end
+
+  def view_template
+    a(href: @href, class: classes, data: @data) 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
+    end
+  end
+
+  private
+
+  def classes
+    "#{base_classes} #{variant_classes}"
+  end
+
+  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

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class RUI::Links::Destructive < RUI::Links::Base
+  private
+
+  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

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

data/lib/rui/links/outline.rb

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

data/lib/rui/links/primary.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class RUI::Links::Primary < RUI::Links::Base
+  private
+
+  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

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class RUI::Links::Secondary < RUI::Links::Base
+  private
+
+  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

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require "redcarpet"
+
+class RUI::Markdown::Generator
+  include Singleton
+
+  def initialize
+    options = {
+      filter_html: true,
+      hard_wrap: true,
+      escape_html: true
+    }
+
+    unsafe_renderer = RUI::Markdown::UnsafeRenderer.new options
+    safe_renderer = RUI::Markdown::SafeRenderer.new options
+
+    extensions = {
+      autolink: true,
+      tables: true,
+      fenced_code_blocks: true,
+      lax_spacing: true,
+      no_intra_emphasis: true,
+      strikethrough: true,
+      superscript: true,
+      disable_indented_code_blocks: true
+    }
+
+    @unsafe_generator = Redcarpet::Markdown.new unsafe_renderer, extensions
+    @safe_generator = Redcarpet::Markdown.new safe_renderer, extensions
+  end
+
+  def get_unsafe(markdown) = @unsafe_generator.render(markdown).html_safe
+
+  def get_safe(markdown) = @safe_generator.render(markdown).html_safe
+end

data/lib/rui/markdown/safe.rb

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

data/lib/rui/markdown/safe_renderer.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "rouge"
+require "rouge/plugins/redcarpet"
+require "redcarpet"
+
+class RUI::Markdown::SafeRenderer < Redcarpet::Render::HTML
+  include Rouge::Plugins::Redcarpet
+
+  private
+
+  def rouge_formatter(lexer)
+    Rouge::Formatters::HTMLLegacy.new(inline_theme: "github.dark")
+  end
+end

data/lib/rui/markdown/unsafe.rb

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

data/lib/rui/markdown/unsafe_renderer.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+require "rouge"
+require "rouge/plugins/redcarpet"
+require "redcarpet"
+
+class RUI::Markdown::UnsafeRenderer < Redcarpet::Render::HTML
+  include Rouge::Plugins::Redcarpet
+
+  def block_code(code, lang)
+    lexer =
+      begin
+        Rouge::Lexer.find_fancy(lang, code)
+      rescue Rouge::Guesser::Ambiguous => e
+        e.alternatives.first
+      end
+    lexer ||= Rouge::Lexers::PlainText
+
+    if lexer.tag == "make"
+      code.gsub! %r{^    }, "\t"
+    end
+
+    formatter = rouge_formatter(lexer)
+
+    # This is a hack to unescape HTML entities in code blocks
+    unescaped = CGI.unescapeHTML(code)
+
+    formatter.format(lexer.lex(unescaped))
+  end
+
+  def codespan(code)
+    unescaped = CGI.unescapeHTML(code)
+
+    "<code>#{unescaped}</code>"
+  end
+
+  private
+
+  def rouge_formatter(lexer)
+    Rouge::Formatters::HTMLLegacy.new(inline_theme: "github.dark")
+  end
+end

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: "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
+      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

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

data/{app/components → lib/rui}/slideout.rb

@@ -1,20 +1,20 @@
-class RelayUi::Slideout < RelayUi::Base
+# 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: "absolute inset-0 z-50", data: {controller: "slideout"}) do
+      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")
+          div(id: "modal-curtain", class: "w-screen h-screen bg-black transition-opacity opacity-75", data: { slideout_target: "curtain" })
         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") do
-              yield
-            end
+            div(class: "w-full h-full bg-white shadow", &)
           end
         end
       end
     end
   end
-end
+end

data/lib/rui/table.rb

@@ -0,0 +1,54 @@
+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") 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
+            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
+            @columns.each do |column|
+              td(class: "border border-zinc-300 py-1 px-2 #{align(column[:align])}") 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: }
+  end
+
+  def align(align)
+    case align
+    when :right
+      "text-right"
+    when :center
+      "text-center"
+    else
+      "text-left"
+    end
+  end
+end

data/lib/rui/text.rb

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