Form Layouts

[berdyshev]

Here is the FieldLayout component with a possibility to define fields config and variations (dependent fields) in a simple javascript structure.

• <FieldLayout /> (src/Components/FieldLayout.jsx) doesn't provide an entire form and could be used as a part of the form.
• All "business" logic is extracted into separate modules (src/layouts/) to leave only rendering-related code in the FieldLayout component and this allowed to cover this logic with unit tests (see tests/jest/Layout/layout.js).
• There are 6 comparison operators defined: eq, gt (greater than), gte (greater or equal), lt (less than), lte (less or equal), in (value is in array of allowed values)
• Supported field components are

  const components = {
      file:        FileUpload,
      text:        Text,
      textarea:    Textarea,
      date:        DatePicker,
      datetime:    DateTimePicker,
      checkbox:    Checkboxes,
      choice:      DropDown,
      radio:       Radio,
      multichoice: MultipleDropDown
  };

• There are 7 validation functions are defined required, min, max, minLength, maxLength, regex, dateRange with possibility to pass parameters into them
• Existed ticket_form storybook is completely reproduced with a new FieldLayout functionality (with a small bonus — now form values are not reseted once the layout changed)

[coveralls]

Pull Request Test Coverage Report for Build 43

• 64 of 141 (45.39%) changed or added relevant lines in 6 files are covered.
• 2 unchanged lines in 1 file lost coverage.
• Overall coverage increased (+10.4%) to 31.358%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/Components/Field.jsx	3	4	75.0%
src/layouts/Layout.js	21	22	95.45%
src/layouts/validations.js	39	44	88.64%
src/layouts/conditions.js	1	6	16.67%
src/Components/FieldLayout.jsx	0	31	0.0%
src/Components/TicketForm.jsx	0	34	0.0%

Files with Coverage Reduction	New Missed Lines	%
src/Components/TicketForm.jsx	2	0.0%

Totals
Change from base Build 38:	10.4%
Covered Lines:	152
Relevant Lines:	479

---

💛 - Coveralls

[jducro]

I would move this file into /tests/DemoState as it is only needed for tests and storybook and would need to be provided when using this library

[jducro]

That should be a dev dependency, it is not used outside the tests

[berdyshev]

I had an idea to use this validation in the LayoutConfig helper in order to warn developers that the layout is not valid. But the library is a bit heavy so I decided to not implement that. What do you think?

[jducro]

Probably better to keep things lightweight. I'm already worried by moment size ...

[berdyshev]

we can replace moment with date-fns...

[jducro]

I will look into that. Does it support hijri calendar?

[berdyshev]

sorry, I don't know..

[berdyshev]

@jducro I have fixed two your comments