CPS Elements - Exemplo - React

Projeto de exemplo da integração de componentes CPS Elements com React e Vite.

CPS Elements é parte do projeto de UI/UX institucional, que também sustenta o CPS Design System, projetados originalmente pelo professor Erick Petrucelli. Independentemente de suas origens e motivações iniciais, é um projeto totalmente open-source disponível sob os termos da licença MIT.

Executando o projeto

Para execução local, é necessário um ambiente Node pré-configurado. Em seguida, executa a instalação dos pacotes:

npm install

Para executar em modo de desenvolvimento, com suporte a hot-reload, executar em seguida:

npm run dev

Para testar a checagem de tipos, compilação e minificação para produção:

npm run build

Como a integração funciona

Este projeto de exemplo simples já está pronto para execução, utilizando-se dos comandos já apresentados.

Sua estruturação se baseia na documentação de integração com React do CPS Elements. Embora detalhes possam ser obtidos em tal documentação, segue resumo do que foi realizado no projeto para que a integração funcione:

• Instalação do CPS Elements usando npm install @cps-elements/web, ficando então registrado no package.json;
• Importação do tema base light.css e chamada ao método setBasePath em src/main.tsx;
• [Opcional] Registrada biblioteca de ícones adicional em src/main.tsx usando o método registerIconLibrary, apenas como exemplo;
• Nos componentes React que utilizarão CPS Elements, basta importar cada componente desejado a partir de @cps-elements/web/react, como exibido em src/App.tsx;