domonda/domonda-js

JavaScript libraries developed and used by domonda written in TypeScript.

domonda.js

JavaScript libraries developed and used by domonda written in TypeScript.

domonda-js's Issues

domonda-ui: improve Menu component

Story

As a user

I want to have a dropdown Menu

So that I can have nested/collapsed menu items

Acceptance criteria

• User is able to open the Menu by clicking on it
• User is able to close the Menu by clicking anywhere outside the Menu
• User sees all collapsed items when the Menu open

react-form: setting value to `undefined`

Expected Behaviour

Setting a field value to undefined either sets the value to undefined or removes the path to the value from the values.

Actual Behaviour

Setting a field value to undefined does nothing.

Previous Reasoning

When an existing array in the form values is used through a FormField to render nested array elements which also use any derivation of the FormField component, removing items from the array itself becomes impossible. The child FormField would set the field to undefined before/instead of unmounting. Efficiently preventing any removals of the items in the array.

Say we have a form which looks like this:

const values = { people: ['John', 'Jane'] };
const tree = (
  <Form defaultValues={values}>
    <FormField path="people">
      {(array, setArray) => (
        <>
          {array.map((_0, index) => (
            <FormField path={`people[${index}]`}>
              {(item) => (
                <input manipulate={item} />
              )}
            </FormField>
          ))}
          <RemoveLast onClick={() =>  setArray(array.pop())} />
        </>
      )}
    </FormField>
  </Form>
);

After you click the <RemoveLast /> the array would become: ['John', undefined], instead of: ['John'].

Described in the following test:

domonda-js/packages/domonda-react-form/__tests__/FormField.test.tsx

Lines 330 to 383 in c18bc2f

	it('should not render or set undefined values on array fields', (done) => {
	interface DV {
	people: string[];
	}
	const dv: DV = {
	people: ['John', 'Foo', 'Bar'],
	};
	let form: DomondaForm<DV>;
	const { rerender } = render(
	<Form getForm={(f) => (form = f)} resetOnDefaultValuesChange defaultValues={dv}>
	<FormField<any[]> path="people">
	{({ value }) => (
	<>
	{value.map((person: any, index) => (
	<FormField key={person} path={`people[${index}]`}>
	{() => null}
	</FormField>
	))}
	</>
	)}
	</FormField>
	</Form>,
	);
	// @ts-ignore because form should indeed be set here
	if (!form) {
	throw new Error('form instance should be set here!');
	}
	const nextDv: DV = {
	people: ['Foo'],
	};
	rerender(
	<Form resetOnDefaultValuesChange defaultValues={nextDv}>
	<FormField<any[]> path="people">
	{({ value }) => (
	<>
	{value.map((person: any, index) => (
	<FormField key={person} path={`people[${index}]`}>
	{() => null}
	</FormField>
	))}
	</>
	)}
	</FormField>
	</Form>,
	);
	expect(form.state.values).toEqual(nextDv);
	done();
	});

and such behaviour is allowed by this segment:

domonda-js/packages/domonda-form/src/createFormField.ts

Lines 92 to 95 in c18bc2f

	values:
	rest.value === undefined
	? state.values
	: setWith(() => undefined, path, rest.value, form.state.values),

domonda-react-form: zero after decimal separator not allowed

Expected Behaviour

Typing a zero (0) after a decimal separator appends it.

Actual Behaviour

Typing a zero (0) after a decimal separator removes the zero.

Further Information

Any other number after the decimal separator works.

react-form: number field does not reset

Expected Behaviour

Resetting the form after changing a number input, visually reverts the changes back.

Actual Behaviour

Resetting the form after changing a number input, resets the value but the input stays the same.

react-form: number input `min` ignored

Expected Behaviour

Setting the min prop to 1 on a FormNumberInput does not allow zeroes (0).

Actual Behaviour

Whatever value set on the min prop is ignored. No minimum is implied.

domonda-react-form: Expose `registerLocale` func from the date picker

Currently, if a user wants to use a different locale with the @domonda/react-form date picker, he has to install the react-datepicker lib just to use the registerLocale.

To avoid this unnecessary clutter, simply exporting the registerLocale from within the lib would suffice.

domonda-form: Resetting values triggers auto-submit

Expected Behaviour

When resetting values the form should not auto-submit when using the autoSubmit flag.

Actual Behaviour

Resetting form values auto-submits when using the autoSubmit flag.

domonda-form: `disabled` and `readOnly` states for all fields from the form

Story

As a user

I want to disable or make the whole Form readOnly

Acceptance criteria

• User can disable all FormFields by just updating the state of the parent Form
• User can make all FormFields readOnly by just updating the state of the parent Form

domonda-react-form: number field caret moves left when appending numbers to the end

Expected Behaviour

Appending numbers in a number field leaves the caret at the end.
Ex: 1| -> 12| where | is the caret and 2 is the appended number.

Actual Behaviour

Appending numbers in a number field moves the caret to the left.
Ex: 1| -> 1|2 where | is the caret and 2 is the appended number.

domonda-react-form: pasting a number with varying decimal separators

Expected Behaviour

Pasting a number which either contains a dot (.) or a comma (,) as a decimal separator to the number input correctly accepts the number both ways.

Example:

Pasting a number 824,20 in a number field with a decimal separator being dot (.) becomes: 824.20

Actual Behaviour

Pasting a number which either contains a dot (.) or a comma (,) as a decimal separator to the number input correctly accepts only numbers which have a matching decimal separator.

Example:

Pasting a number 824,20 in a number field with a decimal separator being dot (.) becomes: 82,420

[domonda-react-form]: implement `isAllowed` function to the `FormMaskedField`

The isAllowed function will receive an argument of the arriving value and the user would decide if it is allowed by returning either true or false in the function.

Given that the arriving value is not allowed, nothing will change in the input field.

ui: allow different text alignment for inputs

Numbers are often aligned on the right.

domonda-ui: Flex `fill` prop does not consider margin for height

Expected Behaviour

When using fill prop on flex which has spacing defined, the height should be calculated considering the margin offsets.

Actual Behaviour

Using fill prop on Flex which has spacing defined is moved up by the margin offset. It does not fill the container correctly.

domonda-form: Reset on default values change option

When new defaultValues arrive, reset the complete form to display the new default values.

domonda-ui: Text does not inherit font-size

Expected Behaviour

Having a nested <Text /> component with the inherit prop, inherits the font-size from the parent <Text /> component.

Actual Behaviour

Having a nested <Text /> component with the inherit prop, does not inherit the font-size from the parent <Text /> component.

domonda-ui: introduce `TextAreaField`

domonda-ui supports only the TextField which is actually an <input />. Introduce TextAreaField which will be <textarea /> underneath.

domonda-form: autosubmit even if currently submitting

Expected Behaviour

When using autoSubmit, every value change submits the form.

Actual Behaviour

When using autoSubmit, value changes during a submit does not submit the form again.

domonda-ui: `label` typography variant

Introduce a new variant: label in TypographyVariant.

This variant would be useful to mirror the label style currently seen in input/select elements. By simulating the label styles we can compose named values which are not meant to be changed.

domonda-ui: storybook dev server not reloading on src/* change

Expected Behaviour

When running the storybook dev server, changing any file in src should trigger a reload.

Actual Behaviour

When running the storybook dev server, changing a file in src doesn't change or reload anything.

domonda-react-form: `FormDateField` not updating value

Expected Behaviour

Every subsequent value change on the FormDateField should update the value in the related field.

Actual Behaviour

FormDateField changes the value of the related field only on first change. Subsequent changes are ignored.

domonda-ui: avoid dynamic rules

Using dynamic rules in JSS can be a performance bottleneck when many of the same items are rendered. Since the dynamic rules cannot be reused, they will be created for every component.

Instead, try putting the dynamic rules into the styles prop.

domonda-react-form: reset unchanged values on default values change

Expected Behaviour

Changing default values resets unchanged values in the form state.

Actual Behaviour

Changing default values does not change anything.

domonda-ui: Autocomplete open dropdown on click

Whenever the user clicks on the input of an Autocomplete component, open the dropdown list.

Query params allow mutating the resulting object

Expected Behaviour

Query params return an object which, when/if mutated, does not interfere with the internal workings.

Actual Behaviour

Query params returns an object which, when/if mutated, inteferes with the internal workings. For example: it can wrongly replace the URL with the mutated object without reporting the change.

Deep freezing query params result object should prevent this behaviour.

query-params: call replace for query params once per model

Expected Behaviour

Regardless of the number of query param hooks rendered, the history.replace is called once per model.

Actual Behaviour

Number of query param hooks rendered is directly proportional to amount of history.replace calls.

domonda-react-form: broken number field with different decimal and thousands symbol

Expected Behaviour

FormNumberField with adjusted thousandsSeparatorSymbol and decimalSymbol works as intended.

Actual Behaviour

FormNumberField with adjusted thousandsSeparatorSymbol and decimalSymbol does not allow correct decimal input, gets always removed.

[domonda-react-form]: adding decimals to number fields with a `suffix`

Expected Behaviour

Assigning a suffix to a FormNumberField still allows decimal points to be added.

Actual Behaviour

Assigning a suffix to a FormNumberField prevents decimal points to be added.

domonda-react-form: number field treats zero (0) as empty

Expected Behaviour

When FormNumberField receives a zero (0) from the form, it shows 0 in the input.

Actual Behaviour

When FormNumberField receives a zero (0) from the form, it shows nothing in the input.

query-params: Add a Provider and Consumer split

Inherently closes: #56

Provider

Reads, validates and writes to and from the history.

Consumer

Reads and forwards write methods from the nearest Provider