Added Switch component to the doc

Author: brunoluigi

README.md

@@ -57,15 +57,15 @@ Here is the list of components that are being built. For reference, see here htt
 To contribute to this project, it's recommended to install the gem locally and point to it in your Gemfile:
 
 ```ruby
-gem "rbui", path: "../rbui"
+gem "ruby_ui", path: "../ruby_ui"
 ```
 
 ### Link the JavaScript Package
 
 Similarly, link the rbui-js package locally using yarn:
 
 ```bash
-yarn add ../rbui
+yarn add ../ruby_ui
 ```
 
 ## Working with Components
@@ -74,7 +74,7 @@ yarn add ../rbui
 
 1. Eject the component you want to modify using the generator:
    ```bash
-   rails generate rbui:component combobox
+   rails generate ruby_ui:component combobox
    ```
 2. Make your desired changes to the ejected component
 3. Once you're satisfied with the modifications, integrate the component back into the gem in the appropriate location

app/components/ruby_ui/switch.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Switch < Base
+    def view_template
+      attrs => { include_hidden:, **input_attrs }
+
+      label(
+        role: "switch",
+        class: "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 bg-input has-[:checked]:bg-primary"
+      ) do
+        input(type: "hidden", name: attrs[:name], value: "0") if include_hidden
+        input(**input_attrs)
+
+        span(class: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform translate-x-0 peer-checked:translate-x-5 ")
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden peer",
+        type: "checkbox",
+        include_hidden: true,
+        value: "1"
+      }
+    end
+  end
+end

app/controllers/docs_controller.rb

@@ -158,6 +158,10 @@ def shortcut_key
     render Docs::ShortcutKeyView.new
   end
 
+  def switch
+    render Docs::SwitchView.new
+  end
+
   def table
     render Docs::TableView.new
   end

app/views/components/shared/menu.rb

@@ -92,6 +92,7 @@ def components
       {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},
+      {name: "Switch", path: helpers.docs_switch_path},
       {name: "Table", path: helpers.docs_table_path},
       {name: "Tabs", path: helpers.docs_tabs_path},
       {name: "Textarea", path: helpers.docs_textarea_path},

app/views/docs/switch_view.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+class Docs::SwitchView < ApplicationView
+  def view_template
+    component = "Switch"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Switch", description: "A control that allows the user to toggle between checked and not checked.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          Switch(name: "switch")
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Checked", context: self) do
+        <<~RUBY
+          Switch(name: "switch", checked: true)
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          Switch(name: "switch", disabled: true)
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With flag include_hidden false", context: self) do
+        <<~RUBY
+          # Supports the creation of a hidden input to be used in forms inspired by the Ruby on Rails implementation of check_box. Default is true.
+          Switch(name: "switch", include_hidden: false)
+        RUBY
+      end
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

config/routes.rb

@@ -45,6 +45,7 @@
     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
+    get "switch", to: "docs#switch", as: :docs_switch
     get "table", to: "docs#table", as: :docs_table
     get "tabs", to: "docs#tabs", as: :docs_tabs
     get "textarea", to: "docs#textarea", as: :docs_textarea