relay_ui 0.1.1 → 0.2.3

data/lib/rui/buttons/base.rb

@@ -0,0 +1,27 @@
+class RUI::Buttons::Base < RUI::Base
+  def initialize(icon: nil, data: {})
+    @icon = icon
+    @data = data
+  end
+
+  def view_template
+    button(class: classes, data: @data) do
+      div(class: "rui:flex rui:flex-row rui:items-center rui:gap-2") do
+        if @icon
+          div(class: "rui:size-4 rui: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 = "rui:inline-block rui:px-3 rui:py-1 rui:hover:cursor-pointer rui:rounded rui:transition rui:duration-200 rui:ease-in-out"
+end

data/lib/rui/buttons/destructive.rb

@@ -0,0 +1,5 @@
+class RUI::Buttons::Destructive < RUI::Buttons::Base
+  private
+
+  def variant_classes = "rui:bg-red-700 rui:hover:bg-red-900 rui:text-white"
+end

data/lib/rui/buttons/ghost.rb

@@ -0,0 +1,5 @@
+class RUI::Buttons::Ghost < RUI::Buttons::Base
+  private
+
+  def variant_classes = "rui:hover:bg-zinc-100"
+end

data/lib/rui/buttons/outline.rb

@@ -0,0 +1,5 @@
+class RUI::Buttons::Outline < RUI::Buttons::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"
+end

data/lib/rui/buttons/primary.rb

@@ -0,0 +1,5 @@
+class RUI::Buttons::Primary < RUI::Buttons::Base
+  private
+
+  def variant_classes = "rui:bg-blue-700 rui:hover:bg-blue-900 rui:text-white"
+end

data/lib/rui/buttons/secondary.rb

@@ -0,0 +1,5 @@
+class RUI::Buttons::Secondary < RUI::Buttons::Base
+  private
+
+  def variant_classes = "rui:bg-zinc-700 rui:hover:bg-zinc-900 rui:text-white"
+end

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

@@ -1,4 +1,6 @@
-class RelayUi::Icon < RelayUi::Base
+require "tabler_icons_ruby"
+
+class RUI::Icon < RUI::Base
   def initialize(icon)
     @icon = icon
   end

data/lib/rui/links/base.rb

@@ -0,0 +1,28 @@
+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: "rui:flex rui:flex-row rui:items-center rui:gap-2") do
+        if @icon
+          div(class: "rui:size-4 rui: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 = "rui:inline-block rui:px-3 rui:py-1 rui:hover:cursor-pointer rui:rounded rui:transition rui:duration-200 rui:ease-in-out"
+end

data/lib/rui/links/destructive.rb

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

data/lib/rui/links/ghost.rb

@@ -0,0 +1,5 @@
+class RUI::Links::Ghost < RUI::Links::Base
+  private
+
+  def variant_classes = "rui:hover:bg-zinc-100"
+end

data/lib/rui/links/outline.rb

@@ -0,0 +1,5 @@
+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"
+end

data/lib/rui/links/primary.rb

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

data/lib/rui/links/secondary.rb

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

data/lib/rui/markdown/generator.rb

@@ -0,0 +1,35 @@
+require "redcarpet"
+
+class RUI::Markdown::Generator
+  include Singleton
+
+  def initialize
+    options = {
+      filter_html: true,
+      hard_wrap: true,
+      link_attributes: { rel: "nofollow", target: "_blank" },
+      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,7 @@
+  class RUI::Markdown::Safe < RUI::Base
+    def view_template(&block)
+      article(class: "rui:markdown") do
+        RUI::Markdown::Generator.instance.get_safe(capture(&block))
+      end
+    end
+  end

data/lib/rui/markdown/safe_renderer.rb

@@ -0,0 +1,13 @@
+require "rouge"
+require "rouge/plugins/redcarpet"
+require "redcarpet"
+
+class RUI::Markdown::SafeRenderer < Redcarpet::Render::XHTML
+  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,7 @@
+  class RUI::Markdown::Unsafe < RUI::Base
+    def view_template(&block)
+      article(class: "rui:markdown") do
+        RUI::Markdown::Generator.instance.get_unsafe(capture(&block))
+      end
+    end
+  end

data/lib/rui/markdown/unsafe_renderer.rb

@@ -0,0 +1,34 @@
+require "rouge"
+require "rouge/plugins/redcarpet"
+require "redcarpet"
+
+class RUI::Markdown::UnsafeRenderer < Redcarpet::Render::XHTML
+  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
+
+  private
+
+  def rouge_formatter(lexer)
+    Rouge::Formatters::HTMLLegacy.new(inline_theme: "github.dark")
+  end
+end

data/lib/rui/navigation.rb

@@ -0,0 +1,51 @@
+class RUI::Navigation < RUI::Base
+  register_value_helper :request
+
+  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

data/lib/rui/slideout.rb

@@ -0,0 +1,20 @@
+class RUI::Slideout < RUI::Base
+  include Phlex::Rails::Helpers::TurboFrameTag
+
+  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" })
+        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
+          end
+        end
+      end
+    end
+  end
+end

data/lib/rui/text.rb

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

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: relay_ui
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.3
 platform: ruby
 authors:
 - logicrelay
 bindir: bin
 cert_chain: []
-date: 2025-03-06 00:00:00.000000000 Z
+date: 2025-03-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -15,28 +15,56 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.1.0
+        version: '2.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.1.0
+        version: '2.1'
 - !ruby/object:Gem::Dependency
   name: tabler_icons_ruby
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.11.0
+        version: '3.11'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.11.0
+        version: '3.11'
+- !ruby/object:Gem::Dependency
+  name: redcarpet
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.6'
+- !ruby/object:Gem::Dependency
+  name: rouge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.5'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -93,6 +121,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: rubocop-rails-omakase
+  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'
 description: 'RelayUI is an opinionated UI kit for Rails applications, leveraging
   Phlex and TailwindCSS to provide a robust and cohesive design system, particularly
   suited for B2B backend interfaces.
@@ -104,40 +146,41 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- Rakefile
-- app/assets/javascripts/relay_ui/index.js
-- app/assets/stylesheets/relay_ui/application.css
-- app/components/badges/base.rb
-- app/components/badges/blue.rb
-- app/components/badges/gray.rb
-- app/components/badges/green.rb
-- app/components/badges/purple.rb
-- app/components/badges/red.rb
-- app/components/badges/yellow.rb
-- app/components/base.rb
-- app/components/buttons/base.rb
-- app/components/buttons/destructive.rb
-- app/components/buttons/ghost.rb
-- app/components/buttons/link.rb
-- app/components/buttons/outline.rb
-- app/components/buttons/primary.rb
-- app/components/buttons/secondary.rb
-- app/components/code_block.rb
-- app/components/headings.rb
-- app/components/icon.rb
-- app/components/lists/base.rb
-- app/components/lists/ordered.rb
-- app/components/lists/unordered.rb
-- app/components/navigation.rb
-- app/components/slideout.rb
-- app/components/text.rb
+- LICENSE.txt
+- README.md
+- dist/relay_ui/relay_ui.css
 - lib/relay_ui.rb
 - lib/relay_ui/engine.rb
 - lib/relay_ui/version.rb
-- package.json
-- tailwind.config.js
-- vendor/assets/javascripts/relay_ui/dist/relay_ui.js
-- vendor/assets/stylesheets/relay_ui/relay_ui.css
+- lib/rui/badges/base.rb
+- lib/rui/badges/blue.rb
+- lib/rui/badges/gray.rb
+- lib/rui/badges/green.rb
+- lib/rui/badges/purple.rb
+- lib/rui/badges/red.rb
+- lib/rui/badges/yellow.rb
+- lib/rui/base.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/icon.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/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/slideout.rb
+- lib/rui/text.rb
 homepage: https://www.relayui.com
 licenses:
 - MIT

data/Rakefile

@@ -1,64 +0,0 @@
-# frozen_string_literal: true
-
-require "bundler/gem_tasks"
-require "rspec/core/rake_task"
-
-RSpec::Core::RakeTask.new(:spec)
-
-require "rubocop/rake_task"
-
-RuboCop::RakeTask.new
-
-task default: %i[spec rubocop]
-
-namespace :build do
-  desc "Build JavaScript"
-  task :js do
-    sh "npm run build:js"
-  end
-
-  desc "Build CSS"
-  task :css do
-    sh "npm run build:css"
-  end
-
-  desc "Build all assets"
-  task :assets => [:js, :css]
-end
-
-namespace :watch do
-  desc "Watch JavaScript files and rebuild on changes"
-  task :js do
-    sh "npm run watch:js"
-  end
-
-  desc "Watch CSS files and rebuild on changes"
-  task :css do
-    sh "npm run watch:css"
-  end
-
-  desc "Watch all assets and rebuild on changes"
-  task :assets do
-    puts "Starting asset watchers for both JS and CSS..."
-    puts "Press Ctrl-C to stop watching"
-    
-    # Run both watchers in parallel using a basic approach that works across platforms
-    trap("INT") { exit }
-    
-    # Fork processes for each watcher
-    pid1 = Process.fork { sh "npm run watch:js" }
-    pid2 = Process.fork { sh "npm run watch:css" }
-    
-    # Wait for any process to exit
-    Process.wait(pid1)
-    Process.wait(pid2)
-  rescue Interrupt
-    puts "\nShutting down watchers..."
-  end
-end
-
-task :build => ["build:assets"]
-task :watch => ["watch:assets"]
-task :default => ["build"]
-
-CLEAN.include("vendor")

data/app/assets/javascripts/relay_ui/index.js

@@ -1,5 +0,0 @@
-import ToggleController from './controllers/toggle_controller'
-import { Application } from '@hotwired/stimulus'
-
-const application = Application.start();
-application.register("toggle", ToggleController);

data/app/assets/stylesheets/relay_ui/application.css

@@ -1 +0,0 @@
-@import 'tailwindcss';

data/app/components/badges/base.rb

@@ -1,5 +0,0 @@
-class RelayUi::Badges::Base < RelayUi::Base
-  def view_template
-    span(class: "px-3 py-0.5 text-xs rounded-full #{variant_classes}") { yield }
-  end
-end

data/app/components/badges/blue.rb

@@ -1,5 +0,0 @@
-class RelayUi::Badges::Blue < RelayUi::Badges::Base
-  private
-  
-  def variant_classes = "bg-blue-100 text-blue-700"
-end

data/app/components/badges/gray.rb

@@ -1,5 +0,0 @@
-class RelayUi::Badges::Gray < RelayUi::Badges::Base
-  private
-  
-  def variant_classes = "bg-gray-100 text-gray-700"
-end

data/app/components/badges/green.rb

@@ -1,5 +0,0 @@
-class RelayUi::Badges::Green < RelayUi::Badges::Base
-  private
-  
-  def variant_classes = "bg-green-100 text-green-700"
-end

data/app/components/badges/purple.rb

@@ -1,5 +0,0 @@
-class RelayUi::Badges::Purple < RelayUi::Badges::Base
-  private
-  
-  def variant_classes = "bg-purple-100 text-purple-700"
-end

data/app/components/badges/red.rb

@@ -1,5 +0,0 @@
-class RelayUi::Badges::Red < RelayUi::Badges::Base
-  private
-  
-  def variant_classes = "bg-red-100 text-red-700"
-end

data/app/components/badges/yellow.rb

@@ -1,5 +0,0 @@
-class RelayUi::Badges::Yellow < RelayUi::Badges::Base
-  private
-  
-  def variant_classes = "bg-yellow-100 text-yellow-700"
-end

data/app/components/buttons/base.rb

@@ -1,30 +0,0 @@
-class RelayUi::Buttons::Base < RelayUi::Base
-  def initialize(data: {}, href: "#", icon: nil)
-    @data = data
-    @href = href
-    @icon = icon
-  end
-
-  def view_template
-    div do
-      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 RelayUi::Icon.new(@icon)
-            end
-          end
-          span { yield } if block_given?
-        end
-      end
-    end
-  end
-
-  private
-
-  def classes
-    "#{base_classes} #{variant_classes}"
-  end
-
-  def base_classes = "inline-block px-3 py-1 hover:cursor-pointer rounded transition duration-200 ease-in-out"
-end

data/app/components/buttons/destructive.rb

@@ -1,5 +0,0 @@
-class RelayUi::Buttons::Destructive < RelayUi::Buttons::Base
-  private
-
-  def variant_classes = "bg-red-700 hover:bg-red-900 text-white"
-end

data/app/components/buttons/ghost.rb

@@ -1,5 +0,0 @@
-class RelayUi::Buttons::Ghost < RelayUi::Buttons::Base
-  private
-
-  def variant_classes = "hover:bg-zinc-100"
-end