feat(ui): introduce fields validation - WF-140

[madeindjs]

Introduce validator key on components fields to validate the field value using JSON Schema with Ajv like this:

export default {
  writer: {
    name: "Rating Input",
    // ...
    fields: {
      // ...
      minValue: {
        name: "Minimum value",
        type: FieldType.Number,
        default: "1",
        desc: "Valid values are 0 and 1.",
        validator: { type: "number", minimum: 0, maximum: 1 },
      },
    },
  },
};

Everything is handled by a new composable useFieldsErrors which will:

1. evaluate each field of the component
2. retrieve the validation of each field
3. run the validator if any and store the error

[ramedina86]

When I type a non-object into an Object it fails and then the page stops working.

[ramedina86]

I realized the messages comes straight from the library, but can we change the formatting so that the first letter is capitalized, as shown in the picture? Right now it starts with "must be" (lowercase).

[ramedina86]

Also would probably be a good idea to have custom messages, the "yes,no" is also irritating me a bit, I'd much prefer "yes, no".

[madeindjs]

Also would probably be a good idea to have custom messages, the "yes,no" is also irritating me a bit, I'd much prefer "yes, no".

@ramedina86, yes, most of the message is coming from the library, but I customized this a bit

writer-framework/src/ui/src/renderer/useFieldsErrors.ts

Lines 87 to 91 in 0bdbc2b

	message += error.message;
	if (Array.isArray(error.params?.allowedValues)) {
	message += `: ${error.params.allowedValues}`;
	}

I simply have to add a .join(', ') to fix the issue you pointed

[madeindjs]

When I type a non-object into an Object it fails and then the page stops working.

I fixed it throught 04c008d . The issue was not linked to this feature though, it was because the string was converted to an object with the spread operator like this

const a = {..."src"} // { '0': 's', '1': 'r', '2': 'c' }

And a number is not a valid HTML attribute. So I applied a REGEX to filter invalid keys