frontend

Interactive form

A React-based solution for interactive forms that follow the same style as the collaborative platform.

What it provides

The application provides a framework for creating interactive formularies. These formularies can have an arbitrary amount of pages, which are implemented as stateful components. Redux is the state store used for providing both the gloabl state and actions for changing it.

How to use it

Weback development server can be easily used by: 1) navigating to the root folder, 2) installing the dependencies with yarn install, and 3) starting the server with yarn dev.

To compile the project use the yarn build command.

How to extend it

A common workflow would include creating the page component in the /src/components folder, creating the necessary auxiliary components and containers, and adding the page to the Body component in addition to the navigation component found in the same /src/components/body/component.js file.

A complete step-by-step development process would go through the following:

1. Create a folder for the component which holds the implementation of the page in the /src/components.
2. Inside the page folder create the component.js, style.module.css, style.css and index.js files.
3. Implement the page in the component.js file.
4. Add styling through css rules in the style.module.css and style.css files. The project is setup so that files with the .modules.css sufix will be treated as modules; therefore the styles are applied by importing the file and adding the classes through the module import:

import styles from 'style.module.css'
<div className={styles.myClass}> </div>

This will hash the class names so that they do not enter in conflict with other rules applied in different places of the application.

5. Add the export in the index.js file and import the page component in the /src/components/body/component.js.
6. Add the page in the order you whish inside the Navigation component and the desired icon in the icons prop; there are currently four icons supported: mail, home-1, torso, circle.
7. Now the page is added to the project.

* The project follows the convention of discerning bwetween components that have or not state by separating them intio the components and containers folders:

• Components are stateful components.
• Containers are components that use the Redux global store.