Skip to content

Latest commit

 

History

History
87 lines (60 loc) · 3.46 KB

GUIDE.md

File metadata and controls

87 lines (60 loc) · 3.46 KB
Raw

Table of Content

Tools

The Disputes app has many tools. A tool is a definition of a process that receives user input and triggers some actions at the end, in our case is legal documents generated for our user.

Directory structure

├── tools
│   ├── tool
│   │   ├── tool-schema.js
│   │   ├── index.js

tool-schema.js

We use JSON Schema to define our tool. This will be used to render the wizard and forms for the tool, as well as validating user input. For a quick intro to JSON Schema check this guide.

Mention the extensions we are making here

index.js

This file exports the Form react component configured with the schema.

Forms

Advance Customization

As we are using the react-jsonschema-form to handle forms all the rules intended to declare schemas will apply, further help related to it can be found within their advanced customization guide

Custom Formats

While JSON Schema supports just certain formats we also need to handle things like telephone and currency in order to do so we have custom formating.

Our <TextField /> component supports an special keyword in their schema called $format where you can specify a mask for the number type field. The values this field can have are telephone, currency or ssn.

{
  phone: {
    $format: "telephone",
    title: "Your telephone",
    type: "number",
  },
}

Take a look to the code at TextField tests for context.

Factories

While we enforce being explicit over abstractions there are some exceptions to facilitate the way of a developer create the schemas. There are common cases that needs a lot of boilerplate to define certain behaviour in which some factories take place.

yesno

This factory is used on the cases where there are yes/no questions that need to be answered and typically one of the answers will lead to a branch within the form (an extra of questions to be filled). Typically the usage can be described as the example below:

"test-group": yesnoSchema({
  defaultValue: false,
  keyName: "test",
  title: "Are you sure about this?",
  yesProps: {
    "test-why": {
      title: "Why you were sure?",
      type: "string",
    },
  },
}),

The example above will return a JSON Schema that renders a question of "Are you sure about this?" with two possible answers yes and no. By default will be selected the No, since defaultValue is false (if defaultValue is not set false will be its value). If the user clicks on Yes it will render an extra question of "Why you were sure?".

Dependencies

We use some custom libraries to render some of our Material Components on top of Marterial UI