search

artsy / palette

Artsy's design system
https://palette-storybook.artsy.net/
MIT License
214 stars 45 forks source link

<back>: example input mask #1340

Closed dzucconi closed 5 months ago

dzucconi commented 9 months ago

Bit of a journey on this one. And, ultimately, wondering what next steps should be.

Initially I thought this would be easy to implement, but as you get into the problem, doing it correctly is very difficult.

Looking for a library, I was dismayed at how incomplete some solutions were, then, when finding a library that seemed to work they tend to be bloated, buggy, and unmaintained. Eventually came across this library, Maskito, which ticks all the boxes.

The authors did a nice blog post explaining some of the issues and their motivation, which is worth the read: https://medium.com/its-tinkoff/maskito-is-a-new-collection-of-libraries-for-text-field-masking-f64ec71951df

Before moving forward with anything we need to take stock and see where we could use masking and what masked inputs are actually required. I don't think it makes a ton of sense to just include this lib and wrap its props. I think it's also perfectly acceptable to not include this in Palette at all and instead to simply use it, as you can see it's pretty straightforward.

Depending on our needs https://github.com/nosir/cleave-zen could solve the simpler cases while being a bit lighter.

damassi commented 9 months ago

Thanks @dzucconi - lemme read up 👍