Design system

Com o proposito de compartilhar componentes entre os vários repositórios de front-end, foi criado um design system da KOR, o KORA-System.

O KORA foi construído utilizando como motor o turbo, uma ferramenta própria para bibliotecas. Nele, existem 5 pacotes, sendo 4 destes para uso nos projetos, e um de documentação.

O KORA foi publicado no artifacts, do azure. Ela é uma biblioteca privada, portanto nos repositórios onde for utilizada, é necessária uma configuração do npm, inserindo as credenciais para que seja permitido o acesso a biblioteca.

Os pacotes presentes na biblioteca são:

• Web
  O pacote web contém toda a estilização dos componentes. Ele utiliza o stitches, uma ferramenta de estilização agnóstica a frameworks, permitindo que a mesma estilização seja incluída em componentes React, Vue ou Angular.
• React
  O pacote react contém todos os componentes disponíveis para uso no react. Nesse pacote são utilizadas as estilizações do pacote web para criar os componentes do react.
• Icons
  O pacote icons é uma extensão da feather-icons, uma biblioteca de ícones. Nela, tanto os ícones da feather quanto os ícones customizados ficam disponíveis para uso.
• Tokens
  O pacote tokens é a configuração básica dos repositórios. Nesse pacote fica disponível a estilização padrão para os projetos, a paleta de cores, e os tamanhos mais utilizados.
• Docs
  O pacote docs é a documentação do KORA-System. Nele, é possível encontrar os valores já definidos em variáveis de tamanho e de cor, além de ver todos os componentes disponíveis para uso, e interagir com eles.
  Tudo isso é possível graças ao storybook, que é a ferramenta utilizada nesse pacote. Ele pode ser acessado na web a partir do link: https://main.d350kxxva0wctf.amplifyapp.com