REACT JS Aplication - Form Builder

Escopo:
Aplicação React/TypeScript para criar formulários e salvar a estrutura em formato JSON em uma Collection no MongoDB.
Esta solicitacao nao requer que seja desenvolvido nenhum backend, mas deve estar pronta para fazer o uso dos endpoint das informacoes.

API Endpoints:
POST /new - Criar novo formulário.
GET /all - Pegar lista de formulários.
GET /form/
- Pegar formulário por ID.
DELETE /form/
- Remover formulário por ID.
PATCH /form/
- Atualizar formulário por ID.
PUT /form/
- Substituir formulário por ID.
Requisitos Funcionais:

Tela #1 - SCRFORM001: Lista de Formulários
Funcionalidade:

Exibir uma tabela listando os formulários existentes com as colunas: ID, Nome, Descrição, Código, Versão, Ações (Editar, Deletar).
Botão para criar um novo formulário.
Ações do Usuário:

Criar Novo Formulário:
Ao clicar no botão "Criar Novo Formulário", um modal deve ser exibido para o usuário inserir:
Nome
Descrição
Código
Versão
Ao clicar em "Salvar", criar um novo documento no banco de dados e atualizar a tabela de formulários.
Estrutura do Documento:

json
Copiar código
{
"name": "form name teste",
"description": "maintenance form",
"code": "mtn001",
"version": "1",
"sections": [],
"createdAt": "xxxx",
"updatedAt": "xxxx"
}
Navegação:

Ao clicar no ID do formulário, redirecionar para a tela de edição do formulário (SCRFORM002).
Tela #2 - SCRFORM002: Editar Formulário
Segmentos da Tela:

Components:
Lista de componentes disponíveis para construção do formulário (e.g., Input, Dropdown, Multiple Choice).
Design:
Área de simulação de uma tela de smartphone onde o usuário pode arrastar e soltar componentes.
Propriedades:
Exibir propriedades configuráveis do componente selecionado (e.g., Label, Placeholder, Required, ReadOnly, Valor, Max/Min Length).
Funcionalidade:

Adicionar Componentes:
O usuário pode arrastar e soltar componentes na área de design.
Configurar Componentes:
Ao clicar em um componente, o segmento de propriedades é exibido, permitindo configuração detalhada.
Reorganizar Componentes:
Permitir que o usuário altere a posição dos componentes arrastando-os.
Excluir Componentes e Telas:
O usuário pode remover componentes específicos e telas inteiras.
Estrutura Final do Documento:

json
Copiar código
{
"id": "2fdb78b3be6a",
"name": "form name teste",
"description": "maintenance form",
"code": "mtn001",
"version": "1",
"sections": [
{
"id": "2fdb78b324e78",
"name": "sections 1",
"components": [
{
"component": "input",
"type": "string",
"label": "component title",
"description": "Describe the input information",
"value": "a optional default value",
"required": true
},
{
"component": "single-choice",
"label": "Gender",
"description": "Your gender",
"enum": ["male", "female", "alien"],
"required": true
},
{
"component": "multiple-choice",
"title": "preferred food",
"description": "Your best food",
"enum": ["pizza", "salad", "hamburger"],
"required": true
}
]
}
]
}
Requisitos Não Funcionais:
Desempenho: A aplicação deve ser responsiva e funcionar sem lentidão, mesmo com uma quantidade considerável de componentes.
Usabilidade: Interface intuitiva e fácil de usar, com foco na experiência do usuário.
Segurança: Implementar medidas básicas de segurança, como a validação de dados antes do envio para o backend.
Compatibilidade: Compatível com os navegadores modernos e responsiva em diferentes tamanhos de tela.
Manutenibilidade: Código bem estruturado e documentado para facilitar a manutenção e futuras expansões.
Considerações Adicionais:
Validação de Dados:
Garantir que todos os campos obrigatórios sejam preenchidos antes de permitir a criação ou atualização de formulários.
Tratamento de Erros:
Mensagens claras para o usuário em caso de erros (e.g., falha ao salvar no banco de dados).
Feedback ao Usuário:
Informar o usuário sobre o sucesso ou falha das operações (e.g., "Formulário criado com sucesso", "Erro ao deletar formulário").
Design:
Referências Visuais:
Incluir anexos com os wireframes ou mockups das telas SCRFORM001 e SCRFORM002 para guiar o desenvolvimento visual.