@sysvale/cuida

A design system built by Sysvale, using storybook and Vue components

https://cuida.framer.wiki/

https://main--6168a1779cac8c003ab99c2d.chromatic.com

Instalando

• O Cuida pode ser instalado com o npm:

npm i @sysvale/cuida

Usando

• 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 instale o Cuida:

app.use(Cuida);

• Exponha os utils do Cuida:

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>

Desenvolvendo

Configurando o projeto

• Clone o repositório:

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

• Instale as dependências e suba o container docker:

docker-compose up -d

A aplicação estará disponível na porta 6006, em http://localhost:6006/.

• Caso não queira usar docker, instale as dependências com:

npm i

Executando o Cuida

• Após a execução do comando docker-composer up -d a aplicação iniciará com instalação e build em segundo plano e estará acessível após alguns segundos em http://localhost:6006/. O progresso pode ser acompanhado também executando docker-compose logs -f main. .
• Ou alternativamente, sem o docker, rode apenas:

npm run storybook

Testando-o

• Utilizando o docker:

docker-compose exec cuida npm run test

ou

./on-server.sh npm run test

• Sem 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