Add MaskedInput component (#189)

Author: stephannv

lib/ruby_ui/index.js

@@ -16,6 +16,7 @@ import DialogController from "./dialog/dialog_controller";
 import DropdownMenuController from "./dropdown_menu/dropdown_menu_controller";
 import FormFieldController from "./form/form_field_controller";
 import HoverCardController from "./hover_card/hover_card_controller";
+import MaskedInputController from "./masked_input/masked_input_controller";
 import PopoverController from "./popover/popover_controller";
 import TabsController from "./tabs/tabs_controller";
 import ThemeToggleController from "./theme_toggle/theme_toggle_controller";
@@ -51,6 +52,7 @@ function initialize(application) {
   registerIfNotExists("ruby-ui--dropdown-menu", DropdownMenuController);
   registerIfNotExists("ruby-ui--form-field", FormFieldController);
   registerIfNotExists("ruby-ui--hover-card", HoverCardController);
+  registerIfNotExists("ruby-ui--masked-input", MaskedInputController);
   registerIfNotExists("ruby-ui--popover", PopoverController);
   registerIfNotExists("ruby-ui--tabs", TabsController);
   registerIfNotExists("ruby-ui--theme-toggle", ThemeToggleController);

lib/ruby_ui/masked_input/masked_input.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MaskedInput < Base
+    def view_template
+      Input(type: "text", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {data: {controller: "ruby-ui--masked-input"}}
+    end
+  end
+end

lib/ruby_ui/masked_input/masked_input_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus";
+import { MaskInput } from "maska";
+
+// Connects to data-controller="ruby-ui--masked-input"
+export default class extends Controller {
+  connect() {
+    new MaskInput(this.element)
+  }
+}

package.json

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

test/ruby_ui/masked_input_test.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::MaskedInputTest < Minitest::Test
+  include Phlex::Testing::ViewHelper
+
+  def test_render
+    output = phlex_context do
+      RubyUI.MaskedInput(data: {maska: "#####-###"})
+    end
+
+    assert_match(/<input type="text"/, output)
+    assert_match(/data-controller="ruby-ui--masked-input"/, output)
+    assert_match(/data-maska="#####-###"/, output)
+  end
+end

yarn.lock

@@ -126,6 +126,11 @@ hey-listen@^1.0.8:
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
+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==
+
 motion@^10.16.4:
   version "10.18.0"
   resolved "https://registry.yarnpkg.com/motion/-/motion-10.18.0.tgz#8fd035cc3a668800fe7e2479568eeb98af484ab3"