Add MaskedInput component

Author: stephannv

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