A design system built by Sysvale, using storybook and Vue components
https://sysvale.github.io/cuida/
Instalando
- O Cuida pode ser instalado com o npm:
$ npm i @sysvale/cuida;
Usando
- Instale o bootstrap-vue como dependência:
$ npm i @sysvale/cuida;
- Para usar o bootstrap-vue, importe a biblioteca no seu entry point, provavelmente vai ser seu main.js ou app.js:
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
- Instale o bootstrap-vue com:
$ npm install bootstrap-vue bootstrap;
- 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";
Vue.use(Cuida);
- 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, importe-os na sua tag script.
<style lang="scss" scoped>
@import 'node_modules/@sysvale/cuida/dist/@sysvale/tokens.scss';
...
</style>
Desenvolvendo
Configurando o projeto
$ 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 já estará rodando no http://localhost:6006/
. - Ou alternativamente, sem o docker, rode apenas:
$ npm run storybook
Testando-o
$ docker-compose exec cuida npm run test
ou
$ ./on-server.sh npm run test
$ npm run test
Contribuindo
Para informações sobre como contribuir com o projeto, acesse o CONTRIBUTING.MD