Add MaskedInput component (#130)

* Add MaskedInput component

* Update ruby ui version

Author: stephannv

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)

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

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"},

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

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

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==