From eaf944ce56af6942a605f486dd520013a556c240 Mon Sep 17 00:00:00 2001 From: stephann <3025661+stephannv@users.noreply.github.com> Date: Mon, 11 Nov 2024 14:30:34 -0300 Subject: [PATCH] Add MaskedInput component (#130) * Add MaskedInput component * Update ruby ui version --- Gemfile.lock | 28 ++++-------------- app/controllers/docs_controller.rb | 4 +++ app/views/components/shared/menu.rb | 1 + app/views/docs/masked_input_view.rb | 45 +++++++++++++++++++++++++++++ config/routes.rb | 1 + yarn.lock | 10 ++++++- 6 files changed, 66 insertions(+), 23 deletions(-) create mode 100644 app/views/docs/masked_input_view.rb diff --git a/Gemfile.lock b/Gemfile.lock index 8d0b1d0..3b0cd7e 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -14,7 +14,7 @@ GIT GIT remote: https://github.com/ruby-ui/ruby_ui.git - revision: 6fb08c975c3f9f162fb3f510f5b42372dfeb9fc7 + revision: 992944de9fcead84da66ff5a6f6c8662a021acae branch: main specs: ruby_ui (1.0.0.pre.alpha.4) @@ -172,6 +172,7 @@ GEM matrix (0.4.2) method_source (1.1.0) mini_mime (1.1.5) + mini_portile2 (2.8.7) minitest (5.25.1) msgpack (1.7.3) net-imap (0.5.0) @@ -184,17 +185,8 @@ GEM net-smtp (0.5.0) net-protocol nio4r (2.7.4) - nokogiri (1.16.7-aarch64-linux) - racc (~> 1.4) - nokogiri (1.16.7-arm-linux) - racc (~> 1.4) - nokogiri (1.16.7-arm64-darwin) - racc (~> 1.4) - nokogiri (1.16.7-x86-linux) - racc (~> 1.4) - nokogiri (1.16.7-x86_64-darwin) - racc (~> 1.4) - nokogiri (1.16.7-x86_64-linux) + nokogiri (1.16.7) + mini_portile2 (~> 2.8.2) racc (~> 1.4) parallel (1.26.3) parser (3.3.6.0) @@ -284,16 +276,8 @@ GEM rexml (~> 3.2, >= 3.2.5) rubyzip (>= 1.2.2, < 3.0) websocket (~> 1.0) - sqlite3 (2.2.0-aarch64-linux-gnu) - sqlite3 (2.2.0-aarch64-linux-musl) - sqlite3 (2.2.0-arm-linux-gnu) - sqlite3 (2.2.0-arm-linux-musl) - sqlite3 (2.2.0-arm64-darwin) - sqlite3 (2.2.0-x86-linux-gnu) - sqlite3 (2.2.0-x86-linux-musl) - sqlite3 (2.2.0-x86_64-darwin) - sqlite3 (2.2.0-x86_64-linux-gnu) - sqlite3 (2.2.0-x86_64-linux-musl) + sqlite3 (2.2.0) + mini_portile2 (~> 2.8.0) standard (1.41.1) language_server-protocol (~> 3.17.0.2) lint_roller (~> 1.0) diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index 2c9e897..a26452e 100644 --- a/app/controllers/docs_controller.rb +++ b/app/controllers/docs_controller.rb @@ -134,6 +134,10 @@ def link render Docs::LinkView.new end + def masked_input + render Docs::MaskedInputView.new + end + def pagination render Docs::PaginationView.new end diff --git a/app/views/components/shared/menu.rb b/app/views/components/shared/menu.rb index 3705465..cf1cb97 100644 --- a/app/views/components/shared/menu.rb +++ b/app/views/components/shared/menu.rb @@ -86,6 +86,7 @@ def components {name: "Input", path: helpers.docs_input_path}, {name: "Hover Card", path: helpers.docs_hover_card_path}, {name: "Link", path: helpers.docs_link_path}, + {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: "Select", path: helpers.docs_select_path, badge: "New"}, diff --git a/app/views/docs/masked_input_view.rb b/app/views/docs/masked_input_view.rb new file mode 100644 index 0000000..3b14111 --- /dev/null +++ b/app/views/docs/masked_input_view.rb @@ -0,0 +1,45 @@ +# frozen_string_literal: true + +class Docs::MaskedInputView < ApplicationView + def view_template + component = "MaskedInput" + + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do + render Docs::Header.new(title: "MaskedInput", description: "Displays a form input field with applied mask.") + + Heading(level: 2) { "Usage" } + + Text do + plain "For advanced usage, check out the " + InlineLink(href: "https://beholdr.github.io/maska/v3", target: "_blank") { "Maska website" } + plain "." + end + + render Docs::VisualCodeExample.new(title: "Phone number", context: self) do + <<~RUBY + div(class: 'grid w-full max-w-sm items-center gap-1.5') do + MaskedInput(data: {maska: "(##) #####-####"}) + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Hex color code", context: self) do + <<~RUBY + div(class: 'grid w-full max-w-sm items-center gap-1.5') do + MaskedInput(data: {maska: "!#HHHHHH", maska_tokens: "H:[0-9a-fA-F]"}) + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "CPF / CNPJ", context: self) do + <<~RUBY + div(class: 'grid w-full max-w-sm items-center gap-1.5') do + MaskedInput(data: {maska: "['###.###.###-##', '##.###.###/####-##']"}) + end + RUBY + end + + render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) + end + end +end diff --git a/config/routes.rb b/config/routes.rb index 3a72bd1..f90d8c0 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -41,6 +41,7 @@ get "hover_card", to: "docs#hover_card", as: :docs_hover_card get "input", to: "docs#input", as: :docs_input get "link", to: "docs#link", as: :docs_link + 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 "select", to: "docs#select", as: :docs_select diff --git a/yarn.lock b/yarn.lock index e4feda0..5d32bf2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -726,6 +726,11 @@ lru-cache@^10.2.0: resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119" integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ== +maska@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/maska/-/maska-3.0.3.tgz#36e3c2c77bf35db09842f318315c590e2855a9ce" + integrity sha512-ItFbuqVeBKk1JmC4QCRxKeNaX+Ym/oMUYZVXwvAPKAwMeO4bYZpIGjNWOcZy+L8YXQaPvCZ68+5eYpGRdyaA8w== + merge2@^1.3.0: version "1.4.1" resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae" @@ -950,13 +955,14 @@ reusify@^1.0.4: ruby_ui_js@ruby-ui/ruby_ui: version "1.0.0-alpha.4" - resolved "https://codeload.github.com/ruby-ui/ruby_ui/tar.gz/6fb08c975c3f9f162fb3f510f5b42372dfeb9fc7" + resolved "https://codeload.github.com/ruby-ui/ruby_ui/tar.gz/992944de9fcead84da66ff5a6f6c8662a021acae" dependencies: "@floating-ui/dom" "^1.6.8" "@hotwired/stimulus" "^3.2.2" chart.js "^4.4.1" date-fns "^2.30.0" fuse.js "^7.0.0" + maska "^3.0.3" motion "^10.16.4" mustache "^4.2.0" tippy.js "^6.3.7" @@ -991,6 +997,7 @@ source-map-js@^1.2.0, source-map-js@^1.2.1: integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA== "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: + name string-width-cjs version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -1009,6 +1016,7 @@ string-width@^5.0.1, string-width@^5.1.2: strip-ansi "^7.0.1" "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: + name strip-ansi-cjs version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==