Skip to content

Add MaskedInput component #189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cirdes merged 1 commit into from
Nov 11, 2024
Merged

Add MaskedInput component #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions lib/ruby_ui/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);
Expand Down
15 changes: 15 additions & 0 deletions lib/ruby_ui/masked_input/masked_input.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# frozen_string_literal: true

module RubyUI
class MaskedInput < Base
def view_template
Input(type: "text", **attrs)
Copy link
Collaborator

@cirdes cirdes Nov 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stephannv , I like the way you did it here. It's using the Input component that we already have, which makes MaskedInput compatible with our forms.

We will have to find a way to mark the dependencies so the component generator could be smart enough to eject all dependencies correctly. But we can do that later

end

private

def default_attrs
{data: {controller: "ruby-ui--masked-input"}}
end
end
end
9 changes: 9 additions & 0 deletions lib/ruby_ui/masked_input/masked_input_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
}
}
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
17 changes: 17 additions & 0 deletions test/ruby_ui/masked_input_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: "#####-###"})
Copy link
Collaborator

@cirdes cirdes Nov 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was wondering if we should try to make it more generic like using mask as the data attribute name. But doing so, we will have to map all data attributes expected by maska. It will be simpler if we explicitly tell the users that maska is doing the mask job and point them to the mask docs.

Copy link
Contributor Author

@stephannv stephannv Nov 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think we are tied to the js lib API anyway, it would be difficult to have a generic approach here since each mask lib have distinct config formats.

Copy link

@brandonzylstra brandonzylstra Nov 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @cirdes. I think mask is a much better name for the attribute.

Copy link
Contributor Author

@stephannv stephannv Nov 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@brandondrew yeah, me too, but we would need to rename all maska config attributes to use mask instead of maska (data-mask, data-mask-tokens, data-mask-tokens-replace, etc). This would create an unwanted abstraction + additional code that I'm not sure if it will bring any benefits.

Copy link
Member

@sethhorsley sethhorsley Nov 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree 100% with @stephannv . This seems odd at first but it makes it explicitly clear that something is going on and if they look into it it will show we are using maska which will make sense.

end

assert_match(/<input type="text"/, output)
assert_match(/data-controller="ruby-ui--masked-input"/, output)
assert_match(/data-maska="#####-###"/, output)
end
end
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down