relay_ui 0.2.3 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 26bbb6690e73af9858e034ddd1f4165dc3e566da75a598df32697bfbda4eb326
-  data.tar.gz: a717467cf909cb32f506d9dd5f8cd0931256b6c8e05de7dfa02634ff943fadd2
+  metadata.gz: 7158b2530047c016d6353aba1125ad761104ae2f553656c3d28c40cf6fc74f4a
+  data.tar.gz: 917a96410664ca64d92e4f41c86d7af74ebcbdc27511dbcf167fc74bd45bec26
 SHA512:
-  metadata.gz: 6b210e15c31c9dc210e201c67862410d2b768c7cf4f7a838dcc07b92c0925c782a25abbe4323d3c12eb9930c694eba1ed1a16205da3be220f42a6ef36e6c9042
-  data.tar.gz: 76d07201379e1e1bfbff8cb914b58012d8868a2dcee91146856bedca312ad07f20e1e7de1de07ce256b20bd9a8547ed6492e44de165588f435c9749b172265e3
+  metadata.gz: cad6bf23e5f39a374115580a70469e382cfdb3578f0c553a04394b73632902484ba479755430eed9ad5af782a7ec633f57fe8d97ea5e75404a7609463221ebf9
+  data.tar.gz: 9f9bc6189f61911c6691b73ba0e6822fd586d339c859714d492db5b5587d3e2fcc2ea5e6c20ae0b18fff65f92872124999798c66200a84308f119e5ce7aeeab1

data/lib/relay_ui/engine.rb

@@ -1,18 +1,16 @@
 # frozen_string_literal: true
 
 module RUI
-  class Engine < ::Rails::Engine
-    isolate_namespace RUI
+  if defined?(Rails)
+    class Engine < ::Rails::Engine
+      isolate_namespace RUI
 
-    initializer "relay_ui.assets.precompile" do |app|
-      app.config.assets.paths << root.join("dist")
-    end
-
-    initializer "relay_ui.autoload.components" do
-      Rails.autoloaders.main.push_dir(
-        "#{Gem::Specification.find_by_name('relay_ui').gem_dir}/lib/rui",
-        namespace: RUI
-      )
+      initializer "relay_ui.autoload.components" do
+        Rails.autoloaders.main.push_dir(
+          "#{Gem::Specification.find_by_name('relay_ui').gem_dir}/lib/rui",
+          namespace: RUI
+        )
+      end
     end
   end
 end

data/lib/relay_ui/version.rb

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

data/lib/rui/badges/base.rb

@@ -1,5 +1,9 @@
+# frozen_string_literal: true
+
 class RUI::Badges::Base < RUI::Base
   def view_template
-    span(class: "rui:px-3 rui:py-0.5 rui:text-xs rui:rounded-full #{variant_classes}") { yield }
+    div do
+      span(class: "whitespace-nowrap px-3 py-0.5 text-xs rounded-full text-center font-medium #{variant_classes}") { yield }
+    end
   end
 end

data/lib/rui/badges/blue.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Badges::Blue < RUI::Badges::Base
   private
 
-  def variant_classes = "rui:bg-blue-100 rui:text-blue-700"
+  def variant_classes = "bg-blue-100 text-blue-700"
 end

data/lib/rui/badges/gray.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Badges::Gray < RUI::Badges::Base
   private
 
-  def variant_classes = "rui:bg-gray-100 rui:text-gray-700"
+  def variant_classes = "bg-gray-100 text-gray-700"
 end

data/lib/rui/badges/green.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Badges::Green < RUI::Badges::Base
   private
 
-  def variant_classes = "rui:bg-green-100 rui:text-green-700"
+  def variant_classes = "bg-green-100 text-green-700"
 end

data/lib/rui/badges/purple.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Badges::Purple < RUI::Badges::Base
   private
 
-  def variant_classes = "rui:bg-purple-100 rui:text-purple-700"
+  def variant_classes = "bg-purple-100 text-purple-700"
 end

data/lib/rui/badges/red.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Badges::Red < RUI::Badges::Base
   private
 
-  def variant_classes = "rui:bg-red-100 rui:text-red-700"
+  def variant_classes = "bg-red-100 text-red-700"
 end

data/lib/rui/badges/yellow.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Badges::Yellow < RUI::Badges::Base
   private
 
-  def variant_classes = "rui:bg-yellow-100 rui:text-yellow-700"
+  def variant_classes = "bg-yellow-100 text-yellow-700"
 end

data/lib/rui/badges.rb

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

data/lib/rui/base.rb

@@ -1,13 +1,8 @@
 # frozen_string_literal: true
 
 class RUI::Base < Phlex::HTML
-  include Components
-  include Phlex::Rails::Helpers::Routes
-
-  if Rails.env.development?
-    def before_template
-      comment { "Before #{self.class.name}" }
-      super
-    end
+  def initialize(**attrs, &)
+    @attrs = attrs
+    super(&)
   end
 end

data/lib/rui/buttons/base.rb

@@ -1,18 +1,20 @@
+# frozen_string_literal: true
+
 class RUI::Buttons::Base < RUI::Base
-  def initialize(icon: nil, data: {})
+  def initialize(icon: nil, **attrs)
     @icon = icon
-    @data = data
+    @attrs = attrs
   end
 
   def view_template
-    button(class: classes, data: @data) do
-      div(class: "rui:flex rui:flex-row rui:items-center rui:gap-2") do
+    button(class: classes, **@attrs) 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
-        span { yield } if block_given?
+        span(class: "text-nowrap") { yield } if block_given?
       end
     end
   end
@@ -23,5 +25,5 @@ class RUI::Buttons::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-md transition duration-200 ease-in-out"
 end

data/lib/rui/buttons/destructive.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Buttons::Destructive < RUI::Buttons::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/buttons/ghost.rb

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

data/lib/rui/buttons/outline.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 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"
+  def variant_classes = "border rounded border-zinc-300 hover:border-zinc-700 text-zinc-700"
 end

data/lib/rui/buttons/primary.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Buttons::Primary < RUI::Buttons::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/buttons/secondary.rb

@@ -1,5 +1,7 @@
+# frozen_string_literal: true
+
 class RUI::Buttons::Secondary < RUI::Buttons::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/buttons.rb

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

data/lib/rui/card.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+class RUI::Card < RUI::Base
+  def view_template(&)
+    div(role: "region", aria: { label: "Card" }, **@attrs) do
+      div(
+        class: "#{padding(capture(&))} flex flex-col gap-4 border border-zinc-300 rounded-lg overflow-hidden",
+        data: { component: "card" },
+        &
+      )
+    end
+  end
+
+  def header(&)
+    render Header.new(&)
+  end
+
+  def image(&)
+    img(src: capture(&))
+  end
+
+  def body(&)
+    div(class: "px-4", &)
+  end
+
+  def footer(&)
+    render Footer.new(&)
+  end
+
+  class Header < RUI::Base
+    def view_template(&)
+      header(class: "flex flex-row justify-between items-center gap-4 px-4", &)
+    end
+
+    def thumbnail(&)
+      img(src: capture(&), class: "inline-block rounded-full size-10")
+    end
+
+    def titles(&)
+      render Titles.new(&)
+    end
+
+    def actions(&)
+      div(class: "flex flex-row gap-2 items-center", &)
+    end
+
+    class Titles < RUI::Base
+      def view_template(&)
+        div(class: "grow shrink basis-0 flex flex-col", &)
+      end
+
+      def title(&)
+        h2(class: "text-xl font-semibold", &)
+      end
+
+      def subtitle(&)
+        h3(class: "text-lg", &)
+      end
+    end
+  end
+
+  class Footer < RUI::Base
+    def view_template(&)
+      footer(class: "flex flex-row justify-end items-center gap-4 px-4", &)
+    end
+
+    def actions(&)
+      render Actions.new(&)
+    end
+
+    class Actions < RUI::Base
+      def view_template(&)
+        div(class: "flex flex-row gap-2 items-center", &)
+      end
+
+      def action(href: "#", **kwargs, &)
+        a(href:, class: "text-blue-700 hover:underline uppercase text-sm font-semibold", **kwargs, &)
+      end
+    end
+  end
+
+  private
+
+  def padding(content)
+    return if content.empty?
+    padding = []
+    doc = Nokogiri::HTML::DocumentFragment.parse(content)
+    padding << "pt-4" if doc.children.first.name != "img"
+    padding << "pb-4" if doc.children.last.name != "img"
+    padding.join(" ")
+  end
+end

data/lib/rui/flash.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class RUI::Flash < RUI::Base
+  def initialize(variant = "alert")
+    @variant = variant
+  end
+
+  def view_template
+    div(role: "alert", data: { controller: "flash" }, class: "lg:max-w-lg border p-3 lg:px-5 lg:py-3 rounded-lg opacity-0 transition-opacity duration-100 ease-in-out " + classes) do
+      div(class: "flex flex-row items-center justify-between gap-3") do
+        div(class: "w-6") { render RUI::Icon.new(icon) }
+        p(class: "w-full") { yield }
+        button(class: "w-6 hover:cursor-pointer", data: { action: "flash#close" }) do
+          render RUI::Icon.new("x")
+        end
+      end
+    end
+  end
+
+  private
+
+  def classes = {
+    "notice" => "bg-blue-50 text-blue-900 border-blue-500",
+    "success" => "bg-green-50 text-green-900 border-green-500",
+    "alert" => "bg-yellow-50 text-yellow-900 border-yellow-500",
+    "failure" => "bg-red-50 text-red-900 border-red-500"
+  }.fetch @variant, "bg-zinc-50 text-zinc-900 border-zinc-500"
+
+  def icon = {
+    "notice" => "info-circle",
+    "success" => "circle-check",
+    "alert" => "alert-triangle",
+    "failure" => "flag"
+  }.fetch @variant, "alert-circle-filled"
+
+  class Wrapper < RUI::Base
+    def view_template(&)
+      div(class: "fixed left-0 lg:left-auto bottom-0 right-0 m-5 lg:m-10 flex flex-col gap-3", &)
+    end
+  end
+
+  module Helper
+    def success(message)
+      flash[:success] = message
+    end
+
+    def failure(message)
+      flash[:failure] = message
+    end
+  end
+end

data/lib/rui/forms/checkbox.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class RUI::Forms::Checkbox < RUI::Base
+  def initialize(**kwargs)
+    @kwargs = kwargs
+  end
+
+  def view_template(&)
+  div(class: "flex flex-row gap-3 items-center") do
+      input(
+        type: "hidden",
+        value: "0",
+        autocomplete: "off",
+        **@kwargs
+      )
+      input(
+        type: "checkbox",
+        value: "1",
+        class: "appearance-none size-4 border border-zinc-300 rounded hover:border-zinc-500 hover:cursor-pointer checked:bg-blue-700",
+        **@kwargs
+      )
+      render RUI::Forms::Label.new(&) if block_given?
+    end
+  end
+end

data/lib/rui/forms/email.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class RUI::Forms::Email < 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(
+        type: "email",
+        class: "border border-zinc-300 hover:border-zinc-400 rounded px-2 py-1",
+        **@kwargs
+      )
+    end
+    div
+  end
+end

data/lib/rui/forms/field_group.rb

@@ -0,0 +1,5 @@
+class RUI::Forms::FieldGroup < RUI::Base
+  def view_template(&)
+    div(class: "flex flex-col gap-1", &)
+  end
+end

data/lib/rui/forms/label.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class RUI::Forms::Label < RUI::Base
+  def view_template(&)
+    label(class: "text-sm font-semibold", &)
+  end
+end

data/lib/rui/forms/password.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class RUI::Forms::Password < 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(
+        type: "password",
+        class: "border border-zinc-300 hover:border-zinc-400 rounded px-2 py-1",
+        **@kwargs
+      )
+    end
+  end
+end

data/lib/rui/forms/phone.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class RUI::Forms::Phone < 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(
+        type: :tel,
+        class: "border border-zinc-300 hover:border-zinc-400 rounded px-2 py-1",
+        **@kwargs
+      )
+    end
+  end
+end

data/lib/rui/forms/radio.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class RUI::Forms::Radio < RUI::Base
+  def initialize(label:, &)
+    @label = label
+    super(&)
+  end
+
+  def view_template
+    render RUI::Forms::FieldGroup.new do
+      render RUI::Forms::Label.new { @label }
+      yield
+    end
+  end
+
+  def option(**attrs, &)
+    div(class: "flex flex-row gap-3 items-center") do
+      input(class: "hover:cursor-pointer", type: :radio, **attrs)
+      label(&)
+    end
+  end
+end

data/lib/rui/forms/select.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class RUI::Forms::Select < RUI::Base
+  def initialize(label:, **attrs, &)
+    @label = label
+    @attrs = attrs
+    super(&)
+  end
+
+  def view_template(&)
+    render RUI::Forms::FieldGroup.new do
+      render RUI::Forms::Label.new { @label }
+      select(
+        class: "border border-zinc-300 hover:border-zinc-400 rounded px-2 py-1.5 hover:cursor-pointer",
+        **@attrs,
+        &
+      )
+    end
+  end
+
+  def option(**attrs, &)
+    tag(:option, **attrs, &)
+  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 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