Cuida Design System

Bem-vindo ao Cuida! ​

Instalação ​

• O Cuida pode ser instalado com o npm:

npm i @sysvale/cuida

Uso ​

• Para usar o cuida, importe a biblioteca no seu entry point, provavelmente vai ser seu main.js ou app.js:

import Cuida from "@sysvale/cuida";

• Importe os estilos do Cuida:

import '@sysvale/cuida/dist/style.css';

• E registre o Cuida:

app.use(Cuida);

• Caso deseje, é possível utilizar os Utils do Cuida expondo-os:

const cdsUtils = Cuida.utils;
app.provide('cdsUtils', cdsUtils);

• Agora, para utilizar os componentes, basta usá-los no seu template. Como exemplo, para usar a Badge:

<cds-badge variant="gray"> Conteúdo </cds-badge>

• Para utilizar os tokens do Cuida instale o sass-embedded

npm install -D sass-embedded

e importe o arquivo de tokens na sua tag script.

<style lang="scss" scoped>
  @import 'node_modules/@sysvale/cuida/dist/@sysvale/tokens.scss';
  ...
</style>

Desenvolvimento ​

Configurando o projeto ​

• Clone o repositório:

git clone https://github.com/Sysvale/cuida.git

• Instale as dependências:

npm i

Executando o Cuida ​

npm run docs:dev

Testando-o ​

• Utilizando o docker:

npm run test

• Para utilizar o ui do vitest:

npm run test:ui

• Para visualizar o detalhamento da cobertura de testes, use o comando abaixo:

npx open-cli coverage/index.html

Contribuindo ​

Para informações sobre como contribuir com o projeto, acesse o CONTRIBUTING.MD