qonto / ember-amount-input Goto Github PK

When latest 6.0.0 version is used, Embroider throws this error:

Build Error (PackagerRunner) in components/amount-input.js

Module not found: Error: Can't resolve '../node_modules/.pnpm/[email protected][email protected]/node_modules/ember-amount-input/components/amount-input' in '$TMPDIR/embroider/3a02e1/components/amount-input.js'

ember-amount-input v2.1.0 triggers the following deprecation warning

DEPRECATION: The `value` property path was used in a template for the `ember-amount-input/components/amount-input/template.hbs` component without using `this`. This fallback behavior has been deprecated, all properties must be looked up on `this` when used in the template: {{this.value}} [deprecation id: this-property-fallback] See https://deprecations.emberjs.com/v3.x#toc_this-property-fallback for more details.\n

We should add a new ember-try scenario to test the app against Embroider (safe & optimized)

See https://github.com/embroider-build/embroider/tree/main/packages/test-setup

Today, it is possible to explicitly pass undefined or null to the @currency argument of the AmountInput component.

It is convenient when we want to benefit from the behavior of the amount input without showing any currency information (use case example: the currency information is displayed in another element, next to the input - here we wouldn't want to have the currency displayed twice for the same information).

However, when doing so, the padding stays the same, meaning we have a larger padding-right (i.e. 41px) in the input, that is usually set to be able to display the currency.

If the currency is explicitly set to undefined, null, or to an empty string, we should reset the padding (from 41px to 12px).

Our official documentation refers to a number type for the value argument (see docs). However, we can in fact support both string and number (and that's what we defined when migrating to TypeScript and helped us figure out the issue - see PR). Plus, the documentation also mentions that the value should be updated using the update function argument, which for now only returns a string.

It seems we have a wobbly API for our component, as it requires us to parse the value returned by the update function before using it to set our new value.

A suggestion could be the following:

interface AmountInputArgs {
  ...
- update: (value: string) => void;
- value: number | string;
+ update: (value: number) => void;
+ value: number;
}

Note that if the suggestion is accepted and implemented, it will be a breaking change.

If numberOfDecimals=0 is used, we should probably prevent the user from entering . or , characters.

Some browsers permits characters + and - to be typed into input with type number. These can be inserted anywhere in the input and not constrained to the first character (for example, using - to declare a negative value). This often leads to issue in JavaScript. One of them is the fact that the returned value by the input becomes inaccessible.

To avoid this kind of behavior, the e character is often prevented from being typed in input type number. This is the case for ember-amount-input.

Could this behavior also exists for + and - characters ? As they could be expected by users (for some negative values), should this be only accessible with an arg as absoluteOnly or integerOnly ?

We would like to convert to Embroider addon v2

Some resources:
https://github.com/embroider-build/embroider/blob/main/PORTING-ADDONS-TO-V2.md
https://github.com/NullVoxPopuli/ember-addon-migrator
https://www.kaliber5.de/en/blog/v2-addon_en

Often end user doesn't type the amount but copy-paste it from another source.

In that case , the value passed from the clipboard is a string and might have trailing whitespace or be formatted in the locale ( that is including white space for thousands separator).

As we're using input type text, we suffer in that case of inconsistencies between browser :

• https://bugzilla.mozilla.org/show_bug.cgi?id=1199665
  Firefox picks the decimal and the thousands separator based on the locale: https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#Localization -- while Chrome (at least here) parses both ',' and '.' as a decimal separator.

• If the value is invalid , the onInput callback will be triggered with an empty string. In that case the form validation to differentiate between missing value and invalid one.

We should investigate the proposal made by @LukaM17 in this PR. It was closed due to the current reshaping of the addon.

Depends on #419

We should use Embroider build system for this addon

See https://github.com/embroider-build/embroider#how-to-try-it

e.g. when using numberOfDecimals=0 and pressing the up button the value 42 will change to 42.01 instead of 43.

When we want to contrain the user in what values he can enter it will be useful to set the min and max values on the <input> element, but it looks like these are not exposed as arguments for this component yet.

In case we want to display a prefilled amount, which should not be editable, we would like to set the input as readonly. So could it be possible to expose a readonly attribute?