Add the radio button component to the doc (#155)

Author: lsouoliveira

app/components/ruby_ui/radio_button.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class RadioButton < Base
+    def view_template
+      input(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "radio",
+        data: {
+          ruby_ui__form_field_target: "input",
+          action: "change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
+        },
+        class: "h-4 w-4 p-0 border-primary rounded-full flex-none"
+      }
+    end
+  end
+end

app/controllers/docs_controller.rb

@@ -150,6 +150,10 @@ def popover
     render Docs::PopoverView.new
   end
 
+  def radio_button
+    render Docs::RadioButtonView.new
+  end
+
   def select
     render Docs::SelectView.new
   end

app/views/components/shared/menu.rb

@@ -90,6 +90,7 @@ def components
       {name: "Masked Input", path: helpers.masked_input_path},
       {name: "Pagination", path: helpers.docs_pagination_path, badge: "New"},
       {name: "Popover", path: helpers.docs_popover_path},
+      {name: "Radio Button", path: helpers.docs_radio_button_path, badge: "New"},
       {name: "Select", path: helpers.docs_select_path, badge: "New"},
       {name: "Sheet", path: helpers.docs_sheet_path},
       {name: "Shortcut Key", path: helpers.docs_shortcut_key_path},

app/views/docs/radio_button_view.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class Docs::RadioButtonView < ApplicationView
+  def view_template
+    component = "RadioButton"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Radio Button", description: "A control that allows users to make a single selection from a list of options.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div(class: "flex items-center space-x-2") do
+            RadioButton(id: "default")
+            FormFieldLabel(for: "default") { "Default" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Checked", context: self) do
+        <<~RUBY
+          div(class: "flex items-center space-x-2") do
+            RadioButton(id: "checked", checked: true)
+            FormFieldLabel(for: "checked") { "Checked" }
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

config/routes.rb

@@ -43,6 +43,7 @@
     get "masked_input", to: "docs#masked_input", as: :masked_input
     get "pagination", to: "docs#pagination", as: :docs_pagination
     get "popover", to: "docs#popover", as: :docs_popover
+    get "radio_button", to: "docs#radio_button", as: :docs_radio_button
     get "select", to: "docs#select", as: :docs_select
     get "sheet", to: "docs#sheet", as: :docs_sheet
     get "shortcut_key", to: "docs#shortcut_key", as: :docs_shortcut_key