relay_ui 0.2.3 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 26bbb6690e73af9858e034ddd1f4165dc3e566da75a598df32697bfbda4eb326
-  data.tar.gz: a717467cf909cb32f506d9dd5f8cd0931256b6c8e05de7dfa02634ff943fadd2
+  metadata.gz: 5bd18a48694c8b8d66e4183e74a7bee705ace0d0b821adba7e037750a49124cb
+  data.tar.gz: d972223721bae1f638121a4ec446cf4eb26ed70f4a6358ab956e1e0273e1d709
 SHA512:
-  metadata.gz: 6b210e15c31c9dc210e201c67862410d2b768c7cf4f7a838dcc07b92c0925c782a25abbe4323d3c12eb9930c694eba1ed1a16205da3be220f42a6ef36e6c9042
-  data.tar.gz: 76d07201379e1e1bfbff8cb914b58012d8868a2dcee91146856bedca312ad07f20e1e7de1de07ce256b20bd9a8547ed6492e44de165588f435c9749b172265e3
+  metadata.gz: 7429340803af5c5c886cec99ae2bd8c78a65033c3f1037318359acdf275c0907f67fb09423ecf3c8ba29a6916b62d3c3e82576863b0de8f10f47eef43e273e39
+  data.tar.gz: 595e27eab36b6c538b96fe30aff5d8d3b3637516a5723e48ff907a39dd845e683af8df449688f49cf79a59febad94dc0ad8eb09cf92c9726c06e8b14b449771d

data/README.md

@@ -25,13 +25,6 @@ All of RelayUI's components are housed in the `RUI::` namespace. This turns your
 
 With this in mind, we prefer pulling basic variants up to the model level. Whereas many UI kits may specify variants via parameters (eg: `Component.new(variant: :primary)`), we prefer to give major variants class-level importance. So, we'll opt for patterns like `RUI::Buttons::Primary` and `RUI::Buttons::Secondary` instead.
 
-## Using TailwindCSS
-
-RelayUI uses [TailwindCSS v4](https://tailwindcss.com/) for styling under the hood. One of the challenges we aimed to solve is how to include the styles Tailwind provides in a way that doesn't collide with any other CSS styles or frameworks being used. For example, we wanted to make sure RelayUI still worked well in projects that used Tailwind v3, or even Bootstrap.
-
-For that reason, we've decided to prefix our CSS classes with `rui:`. This way, RelayUI is able to come out of the box with all of the styles you need to make our components work, but you can choose to use any CSS framework you want and not risk any CSS class conflicts or collisions.
-STRING
-
 # Installation
 
 ### First, add the gem to your `Gemfile`:
@@ -52,12 +45,6 @@ bundle install
 gem install relay_ui
 ```
 
-### Include the gem's stylesheet in your application layout:
-
-```ruby
-stylesheet_link_tag "relay_ui/relay_ui", media: "all"
-```
-
 That's it! All of the basic functionality of the UI kit is now available to you. For certain components that require additional elements (like stimulus controllers), you'll need to include those separately. They will be documented in the component's usage instructions.
 
 # Usage

data/lib/relay_ui/engine.rb

@@ -1,18 +1,22 @@
 # frozen_string_literal: true
 
+require "rui/forms/tailwind_form_builder"
+
 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.set_default_form_builder" do |app|
+        app.config.action_view.default_form_builder = RUI::Forms::TailwindFormBuilder
+      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.4.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,23 @@
+# 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
 
+  # Style string public for use in forms
+  STYLE = "inline-block px-2 py-1 hover:cursor-pointer rounded-md transition duration-200 ease-in-out".freeze
+
   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
@@ -20,8 +25,6 @@ class RUI::Buttons::Base < RUI::Base
   private
 
   def classes
-    "#{base_classes} #{variant_classes}"
+    "#{STYLE} #{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

@@ -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,10 @@
+# frozen_string_literal: true
+
 class RUI::Buttons::Primary < RUI::Buttons::Base
+  # Style string public for use in forms
+  STYLE = "bg-blue-700 hover:bg-blue-900 text-white border border-blue-700 hover:border-blue-900".freeze
+
   private
 
-  def variant_classes = "rui:bg-blue-700 rui:hover:bg-blue-900 rui:text-white"
+  def variant_classes = STYLE
 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/helpers.rb

@@ -0,0 +1,19 @@
+module RUI::Forms::Helpers
+  DEFAULT_CLASSES = "flex flex-col gap-4".freeze
+
+  def rui_form_with(**options, &block)
+    if options.present? && options[:html][:class].present?
+      form_with_merged_classes(options[:html][:class], **options, &block)
+    else
+      # TODO: Remove reference to builder
+      form_with(**options.merge(builder: TailwindFormBuilder, html: { class: DEFAULT_CLASSES }), &block)
+    end
+  end
+
+  private
+
+  def form_with_merged_classes(provided_classes, **options, &block)
+    css = RUI::TailwindMerger.instance.merge(DEFAULT_CLASSES, provided_classes)
+    form_with(**options.merge(html: { class: css }), &block)
+  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