- Modified the vitest config in order for tests to run correctly (an error message about
expect
was showing) - Started by using
input type="number"
but had to switch toinput type="text"
in order to handle locale strings and the currency symbol.type="number"
does provide the benefit of showing a number keyboard on mobile, but doesn't accept localised strings. - Kept the possibility of adding negative values.
- The component accepts an error prop as
string
to later on keep the possibility to display an error message instead of simply changing the border color.
- Ability to pass a custom currency as prop. The component currently defaults to
โฌ
as per instructions. However a currency prop could be handled via theIntl.NumberFormat
function, which could return the appropriate currency symbol. - Ability to specify the number of decimals
- Use the @testing-library/user-event library instead of
fireEvent
, as it is closer to user behavior. - Cover more use cases when converting from locale string to number. My custom
localeToNumber
function covers basic use cases but dedicated libraries would probably be more efficient (see globalize or d2l-intl)
We want you to write a controlled form component called MoneyInput
in React with the following criteria:
- The user can input a decimal number (in Euro).
- On change the component will convert the value to integer (in Cents) and emit new value by running the appropriate handler and log the new value in console.
- On blur the component will convert the value to integer (in Cents) and emit new value by running the appropriate handler and log the new value in console.
- Whenever a new value is provided (integer, in Cents) through the
value
prop, the value of the input field will be updated with the new decimal number (in Euro). - The component looks similar to the design in the screenshot below.
- Bonus: The component is documented in Storybook.
- Bonus: The component's interface besides the changes stemming from the functionality described above is identical to the interface of the HTML input element.
- Suppose that the component gets a
locale
passed as a prop (e.g.en
orde
), that you can use to format the string. - You may use the tokens provided in
tokens.css
to style the component. - The code should be placed in the
src/MoneyInput
directory, there is some boilerplate code there created for your convenience.
You can provide your solution either
- as a zipped file containing the code or
- as a link to a fork of this repository.