Este projeto foi construído utilizando o framework astro. Os formulários são montados dinamicamente com base no JSON Schema. A interface, também utiliza um json schema que poderá ser visualizado aqui.
A validação dos dados, é feita utilizando um schema dinâmico do Zod, combinada com a biblioteca React Hook Form.
A ui é montada com a biblioteca Shadcn e estilizada com o tailwind. Os ícones são do lucide-react.
Para exibir um pre-loading enquanto carrega o ui schema e os dados do servidor:
delay=5000
rating=custom
ui-schema=none
Para instalar, é necessário executar o comando:
npm install
Você irá precisar criar um arquivo .env na raiz do projeto com o endereço de onde está o projeto, como eu estou rodando localmente na porta 4000, minha variável de ambiente está configurada assim:
PUBLIC_API_PATH=http://localhost:4000
Você também poderá apontar para o servidor online em: https://dynamic-form.ericdomingos.com.br Lembre-se: Não adicionar uma barra ao final da rota.
Feito isso, agora é só executar o comando para ver a "magia da mágica":
npm run build && npm run start
Você encontra o demo do projeto em: https://dynamic-form.ericdomingos.com.br/
A ideia foi utilizar o framework Astro pois a arquitetura de ilha dele é mais performática comparado a outros frameworks. O schema principal foi carregado do lado do servidor e os dados e o ui schema foram carregados no cliente. Como poderia ser uma atualização dinâmica, optei por esse caminho, mas nada impede de carregar todos os schemas do lado do servidor.
Optei por construir uma versão simplificada do renderizador dinâmico dos componentes pois os problemas de re-render do react causavam lentidão com formulários maiores. Criei um componente wrapper para facilitar a integração e construção de novos componentes.
Enjoy!