robinsandborg commented 4 years ago

Inputs are core in the functionality Bento provides. It is therefore important that there is as little friction and hurdles when working with inputs as possible.

After recently working on a very input-heavy project, I have some thoughts and pains I'd like to discuss. The best solution however is something we should work on together. Here are some of my thoughts:

Splitting the different inputs into different components might not be the right approach. Could we send the desired mask/formatting as props instead? <Input formatting={CURRENCY} /> or something to that effect?
Number formats should somehow be i18n-sensitive. This means that asking an Input to format its output as currency should yield different results based on language without having to do someting like <Input formatting={locale = "no" ? CURRENCY.NO : locale = "fi" ? CURRENCY.FI : CURRENCY} />
We need to improve our test coverage for both controlled and uncontrolled components. Some of our Input components behave badly when operating as controlled components.
Easy compatability with react-hook form. This might have been improved since last time I checked, but at that time the syntax described in the react-hook-form documentation did not work and you had to use their <Controller /> implementation.

Regarding my thoughts on the i18n-formatting, this needs to be customizable in case the client does not agree with what's "correct" or you need to use one locales rules on another locales language. Could we take some inspiration from our theming implementation for this?

XSlemX commented 4 years ago

Agree that this is pressing. Also agree on not having n components. We should normalize. Also love the thought of having it being i18n sensitive. This would be 💯 .

I will start on a proposal.

Thymas1 commented 4 years ago

@XSlemX could you at the same time take a look at the way defaultValue now works? As it is now, we are getting spammed with warnings as we have none-cleave inputs and Input now uses seRawValue from cleave. We need a way to set a defaultValue without getting all these warnings. It works fine as it is now, so maybe remove the warnings maybe?

robinsandborg commented 4 years ago

@Thymas1 This would hopefully be covered by expanding the test coverage to include controlled components for all input components (including SelectSimple, Radios, etc)

XSlemX commented 4 years ago

Should we add first class support for react-hook-form? Seems like this is go-to for most X'ers.

XSlemX commented 4 years ago

staccx / bento

Input improvements #20

22 , #23 , #24 #21