From 73d2d6fe0cbe09ee9e1acab500dcd2b083a9bd36 Mon Sep 17 00:00:00 2001 From: Bruno Luigi Date: Fri, 22 Nov 2024 11:40:14 +0000 Subject: [PATCH 1/3] Added Switch component to the doc --- README.md | 6 ++--- app/components/ruby_ui/switch.rb | 30 ++++++++++++++++++++++ app/controllers/docs_controller.rb | 4 +++ app/views/components/shared/menu.rb | 1 + app/views/docs/switch_view.rb | 40 +++++++++++++++++++++++++++++ config/routes.rb | 1 + 6 files changed, 79 insertions(+), 3 deletions(-) create mode 100644 app/components/ruby_ui/switch.rb create mode 100644 app/views/docs/switch_view.rb diff --git a/README.md b/README.md index a541864a..ce97e995 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ 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 @@ -65,7 +65,7 @@ gem "rbui", path: "../rbui" 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 diff --git a/app/components/ruby_ui/switch.rb b/app/components/ruby_ui/switch.rb new file mode 100644 index 00000000..a8b511c4 --- /dev/null +++ b/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 diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index a26452ee..866a5cae 100644 --- a/app/controllers/docs_controller.rb +++ b/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 diff --git a/app/views/components/shared/menu.rb b/app/views/components/shared/menu.rb index 8834421e..bc6e7094 100644 --- a/app/views/components/shared/menu.rb +++ b/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}, diff --git a/app/views/docs/switch_view.rb b/app/views/docs/switch_view.rb new file mode 100644 index 00000000..da7fab41 --- /dev/null +++ b/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 diff --git a/config/routes.rb b/config/routes.rb index 1774ae51..312bb8c2 100644 --- a/config/routes.rb +++ b/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 From 096d5d54cb4581c3cd7feae92976e5ba0454e02f Mon Sep 17 00:00:00 2001 From: Bruno Luigi Date: Mon, 2 Dec 2024 11:28:32 +0100 Subject: [PATCH 2/3] Adjustments in the Switch component suggested by @stephannv --- app/components/ruby_ui/switch.rb | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/app/components/ruby_ui/switch.rb b/app/components/ruby_ui/switch.rb index a8b511c4..1dcf275a 100644 --- a/app/components/ruby_ui/switch.rb +++ b/app/components/ruby_ui/switch.rb @@ -2,29 +2,23 @@ module RubyUI class Switch < Base - def view_template - attrs => { include_hidden:, **input_attrs } + 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: "0") if include_hidden - input(**input_attrs) + 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 - - private - - def default_attrs - { - class: "hidden peer", - type: "checkbox", - include_hidden: true, - value: "1" - } - end end end From 5db81d50d3fd909968ebb1f57894c9c8d4284c7f Mon Sep 17 00:00:00 2001 From: Bruno Luigi Date: Thu, 5 Dec 2024 13:32:46 +0100 Subject: [PATCH 3/3] Updated gem version based on main branch --- Gemfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gemfile.lock b/Gemfile.lock index 53c7e27c..2c65ec31 100644 --- a/Gemfile.lock +++ b/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)