# Coruja Web UI

Estratégia

# Sumário

Problemas erros ou novas sugestões e funcionalidades
Projeto
Pré-requisitos
Instalação
Executando o Design System em ambiente local
Testes
Tecnologias
Informações adicionais
Como contribuir

# Problemas erros ou novas sugestões e funcionalidades

Caso tenha alguma sugestão de funcionalidade ou erro para reportar, recomendamos que crie uma nova Issue (opens new window), assim conseguimos manter um histório de decisões além de facilitar a gestão do projeto 😄

# Projeto

Esse repositório é dedicado ao desenvolvimento do Design System da Estratégia Educacional o CorujaDS Web. Foi desenvolvido usando essas tecnologias.

# Pré-requisitos

# Instalando o Design System no seu projeto

Configure a variável de ambiente NODE_AUTH_TOKEN no seu projeto local para dependências privadas e poder instalar o design system:

$ export NODE_AUTH_TOKEN=<seu token>

Não possui um token? Gere um novo através desse link (opens new window), com as permissões repo e read:packages.

Instale esse pacote como dependência do projeto:
```
$ npm install @estrategiahq/coruja-web-ui
```
1

Importe os estilos:

import '@estrategiahq/coruja-web-ui/dist/coruja-web-ui.css';

// Caso você deseje utilizar o Tailwind já seguindo os padrões do Chapter Web:
// OBS: Hoje esse import é OBRIGATÓRIO, pois estamos migrando os componentes
// e removendo o Tailwind internamente
import '@estrategiahq/coruja-web-ui/dist/coruja-tailwind.css';

1
2
3
4
5
6

Normalmente, no arquivo principal da sua aplicação.

Agora é só começar a usar:

<template>
    <div class="c-container">
      <div class="c-row">
        <div class="c-col">
          <h1 class="c-text-h1 c-text-primary">
            Bem Vindo
          </h1>
          <c-button>Enviar</c-button>
        </div>
      </div>
    </div>
</template>

<script>
import { CButton } from '@estrategiahq/coruja-web-ui'

export default {
  name: 'App',
  components: {
    CButton
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Nota: As classes do Design System começam com o prefixo c-.

# Utilizando as utilidades de Sass

Temos também disponível utilidades feitas usando Sass (opens new window), que permitem mais flexibilidade na hora de usar o que o Design System fornece.

Para usar basta importar nosso arquivo Sass:

<style lang="scss">
  @import '~@estrategiahq/coruja-web-ui/dist/sass/utils.scss';

  body {
    // Usa nosso mixin de media-query
    @include c-mq(lg) {
      background-color: red;
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10

Para mais informações consulte nosso guia (opens new window)

# Executando o Design System em ambiente local

Instale as dependências:
```
$ npm install
```
1
Para iniciar o storybook:
```
$ npm run story
```
1
Para iniciar a documentação:
```
$ npm run docs
```
1

# Tarefas comuns

Aqui temos alguns dos comandos que você pode querer usar:

Comando	Uso
`npm run build`	Usa o `rollup` pra fazer o build do projeto
`npm run build:bundle`	Executa o build do bundle de produção
`npm run build:watch`	Performa um build a cada vez que um arquivo é alterado
`npm run build:report`	Executa o build e, ao final, abre o relatório do bundle analyzer
`npm run test`	Roda a suite de testes
`npm run test:clearCache`	Remove o diretório de cache do Jest
`npm run test:watch`	Inicia uma instância do jest que roda os testes sempre que há uma alteração em um arquivo
`npm run docs`	Inicia a documentação do Design System em vuepress
`npm run docs:build`	Executa o build da documentação. Output encontra-se em `docs-dist`
`npm run story`	Inicia o storybook do projeto
`npm run lint`	Roda o linter do projeto
`npm run lint:fix`	Corrige os erros apontados pelo linter
`npm run healthcheck`	Executa o healthcheck

# Testes

Os testes são feitos usando o Jest (opens new window). Alguns dos comandos disponíveis (e que podem ser úteis):

# executa os testes
$ npm run test
# limpa o diretório de cache do Jest
$ npm run test:cleanCache
# inicia o Jest e roda os testes a cada nova mudança
$ npm run test:watch

1
2
3
4
5
6
7

# Tecnologias

Este projeto foi feito usando: - VueJS - Sass

Testes: - Jest

Documentação: - Storybook - Vuepress

Bundle Tools - Rollup