https://github.com/sysvale/cuida
A design system built by Sysvale, using storybook and Vue components
https://github.com/sysvale/cuida
design-system scss storybook ui-components vite vue vue-components vue2 vue3 vuejs
Last synced: 6 months ago
JSON representation
A design system built by Sysvale, using storybook and Vue components
- Host: GitHub
- URL: https://github.com/sysvale/cuida
- Owner: Sysvale
- License: apache-2.0
- Created: 2020-09-11T16:49:29.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T17:18:25.000Z (about 1 year ago)
- Last Synced: 2025-04-09T16:06:25.368Z (about 1 year ago)
- Topics: design-system, scss, storybook, ui-components, vite, vue, vue-components, vue2, vue3, vuejs
- Language: Vue
- Homepage: https://main--6168a1779cac8c003ab99c2d.chromatic.com
- Size: 25.4 MB
- Stars: 22
- Watchers: 4
- Forks: 7
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
A design system built by Sysvale, using Vue components
https://cuida.sysvale.com/
## Instalando
- O Cuida pode ser instalado com o npm:
```bash
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:
```js
import Cuida from "@sysvale/cuida";
```
- Importe os estilos do Cuida:
```js
import '@sysvale/cuida/dist/style.css';
```
- E instale o Cuida:
```js
app.use(Cuida);
```
- Exponha os utils do Cuida:
```js
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:
```html
Conteúdo
```
- Para utilizar os tokens do Cuida instale o sass-embedded
```bash
npm install -D sass-embedded
```
e importe o arquivo de tokens na sua tag script.
```html
@import 'node_modules/@sysvale/cuida/dist/@sysvale/tokens.scss';
...
```
## Desenvolvendo
### Configurando o projeto
- Clone o repositório:
```bash
git clone https://github.com/Sysvale/cuida.git
```
- Instale as dependências e suba o container docker:
```bash
docker-compose up -d
```
A documentação estará disponível na porta `5173`, em [http://localhost:5173/](http://localhost:5173).
- Caso não queira usar docker, instale as dependências com:
```bash
npm i
```
### Executando o Cuida
- Para executar a documentação local, execute:
```bash
npm run docs:dev
```
### Testando-o
- Utilizando o docker:
```bash
docker-compose exec cuida npm run test
```
ou
```bash
./on-server.sh npm run test
```
- Sem o docker:
```bash
npm run test
```
- Para utilizar o ui do vitest:
```bash
npm run test:ui
```
- Para visualizar o detalhamento da cobertura de testes, use o comando abaixo:
```bash
npx open-cli coverage/index.html
```
## Contribuindo
Para informações sobre como contribuir com o projeto, acesse o [CONTRIBUTING.MD](https://github.com/Sysvale/cuida/blob/main/CONTRIBUTING.md)