forms-flow-ai-micro-front-ends

forms-flow-ai-micro-front-ends is a collection of micro front-end applications to support formsflow.ai.

components overview

1. forms-flow-admin

The admin module includes functionalities available for the user with admin privilages. Currently admin module contains dashboard management, role management, user management. This UI is only available for users with formsflow-admin role.

2. forms-flow-nav

The navbar for formsflow.ai, this module is available for all users. This module trigger the routing, internationalization, and login/logout functionalities.

3. forms-flow-service

This module contains all the common functionalties used by micro front-ends. The common services include authentication service, storage APIs etc.

4. forms-flow-theme

This module contains the common style sheet shared by all micro-front-ends. This module supports theming by providing the option to use desired themes by modifying the css variables.

5. forms-flow-components

This module contains reusable UI components.

6. forms-flow-review

This module contains all the functionalities related to reviewer journey including filters, tasks and all the related actions

7. forms-flow-submissions

This modules contains the functionalities related to analyze submissions

All the modules are built with single-spa, a javascript router for micro front-end microsevices.

Prerequisites

• Nodejs 16 or above
• Make sure the ports 8080, 8001, 8081, 8082 are available.

Getting started

1. Clone the repo
2. run npm install && npm start by checking into all modules note: while running npm install in forms-flow-admin might throw some error due to version conflict, just run the same command with --force flag to resolve this issue. This is happening since we migrated the specific module from legacy codebase and some dependencies are to be maintained and will resolve this in future.
3. clone the formsflow.ai [https://github.com/AOT-Technologies/forms-flow-ai] repo.
4. check into master brach
5. check into forms-flow-web-root-config directory
6. update public/config/config.js with all the configurations
7. run npm install && npm start
8. check into forms-flow-web directory
9. run npm install && npm start make sure this module run on port 3001
10. The application should be available at port 3000

Running Storybook

Storybook is available for the forms-flow-components module to showcase and test UI components.

Prerequisites for Storybook

• Nodejs 16 or above
• Make sure port 6006 is available for Storybook

Steps to run Storybook

1. Navigate to the forms-flow-components directory
2. Run npm install to install dependencies
3. Run npm run storybook to start the Storybook development server
4. Storybook will be available at http://localhost:6006

Storybook Features

• Interactive component playground
• Component documentation
• Visual testing capabilities
• Design system showcase
• Accessibility testing tools

Storybook Commands

• npm run storybook - Start Storybook development server
• npm run build-storybook - Build static Storybook for production
• npm run storybook:test - Run Storybook tests