Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 1 day 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 (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-21T19:39:57.000Z (3 months ago)
- Last Synced: 2024-11-22T17:45:29.548Z (3 months ago)
- Topics: design-system, scss, storybook, ui-components, vite, vue, vue-components, vue2, vue3, vuejs
- Language: Vue
- Homepage: https://main--6168a1779cac8c003ab99c2d.chromatic.com
- Size: 24.2 MB
- Stars: 21
- Watchers: 5
- Forks: 6
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
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:
```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
app.provide('cdsUtils', cdsUtils);
```
- Agora para utilizar os componentes, basta usá-los no seu template. Como exemplo, para usar a
[Badge](https://sysvale.github.io/cuida/?path=/docs/componentes-display-badge--badge):
```html
Conteúdo
```
- Para utilizar os tokens, importe-os 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 aplicação estará disponível na porta `6006`, em [http://localhost:6006/](http://localhost:6006).
- Caso não queira usar docker, instale as dependências com:
```bash
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/](http://localhost:6006). O progresso pode ser acompanhado também executando `docker-compose logs -f main`.
.
- Ou alternativamente, sem o docker, rode apenas:
```bash
npm run storybook
```
### 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
```
## Contribuindo
Para informações sobre como contribuir com o projeto, acesse o [CONTRIBUTING.MD](https://github.com/Sysvale/cuida/blob/main/CONTRIBUTING.md)