relay_ui 0.2.3 → 0.3.0

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

@@ -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,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

@@ -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

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: relay_ui
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.3.0
 platform: ruby
 authors:
 - logicrelay
 bindir: bin
 cert_chain: []
-date: 2025-03-12 00:00:00.000000000 Z
+date: 2025-03-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -65,6 +65,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4.5'
+- !ruby/object:Gem::Dependency
+  name: nokogiri
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.18'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.18'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -93,6 +107,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: guard-rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: guard-livereload
   requirement: !ruby/object:Gem::Requirement
@@ -148,10 +190,10 @@ extra_rdoc_files: []
 files:
 - LICENSE.txt
 - README.md
-- dist/relay_ui/relay_ui.css
 - lib/relay_ui.rb
 - lib/relay_ui/engine.rb
 - lib/relay_ui/version.rb
+- lib/rui/badges.rb
 - lib/rui/badges/base.rb
 - lib/rui/badges/blue.rb
 - lib/rui/badges/gray.rb
@@ -160,26 +202,51 @@ files:
 - lib/rui/badges/red.rb
 - lib/rui/badges/yellow.rb
 - lib/rui/base.rb
+- lib/rui/buttons.rb
 - lib/rui/buttons/base.rb
 - lib/rui/buttons/destructive.rb
 - lib/rui/buttons/ghost.rb
 - lib/rui/buttons/outline.rb
 - lib/rui/buttons/primary.rb
 - lib/rui/buttons/secondary.rb
+- 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/field_group.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/text.rb
+- lib/rui/forms/textarea.rb
+- lib/rui/helpers.rb
 - lib/rui/icon.rb
+- lib/rui/layout.rb
+- lib/rui/layout/body.rb
+- lib/rui/layout/main.rb
+- lib/rui/layout/page.rb
+- lib/rui/links.rb
 - lib/rui/links/base.rb
 - lib/rui/links/destructive.rb
 - lib/rui/links/ghost.rb
 - lib/rui/links/outline.rb
 - lib/rui/links/primary.rb
 - lib/rui/links/secondary.rb
+- lib/rui/markdown.rb
 - lib/rui/markdown/generator.rb
 - lib/rui/markdown/safe.rb
 - lib/rui/markdown/safe_renderer.rb
 - lib/rui/markdown/unsafe.rb
 - lib/rui/markdown/unsafe_renderer.rb
 - lib/rui/navigation.rb
+- lib/rui/navigation/menu_button.rb
+- lib/rui/navigation/sidebar.rb
+- lib/rui/navigation/top.rb
 - lib/rui/slideout.rb
+- lib/rui/table.rb
 - lib/rui/text.rb
 homepage: https://www.relayui.com
 licenses: