Switch Component (#143)

Co-authored-by: Seth Horsley <[email protected]>

Gemfile.lock

@@ -14,7 +14,7 @@ GIT
 
 GIT
   remote: https://github.com/ruby-ui/ruby_ui.git
-  revision: aa983e83f1ece8a3f62c4e816c07d2a2f17b6b90
+  revision: 6c79d377e1c550b606f28987c8e04587cb7221ac
   branch: main
   specs:
     ruby_ui (1.0.0.beta1)

README.md

@@ -11,6 +11,7 @@ To contribute to this project, it's recommended to install the gem locally and p
 ```ruby
 gem "ruby_ui", path: "../ruby_ui"
 ```
+
 ## Working with Components
 
 ### Component Development Workflow

app/components/ruby_ui/switch.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Switch < Base
+    def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", **attrs)
+      @include_hidden = include_hidden
+      @checked_value = checked_value
+      @unchecked_value = unchecked_value
+      super(**attrs)
+    end
+
+    def view_template
+      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: @unchecked_value) if @include_hidden
+        input(**attrs.merge(type: "checkbox", class: "hidden peer", value: @checked_value))
+
+        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
+  end
+end

app/controllers/docs_controller.rb

@@ -162,6 +162,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

@@ -93,6 +93,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

@@ -46,6 +46,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