grimorio.md

Primeiros passos

Primeiro, precisamos clonar e instalar as dependências. Para isso é preciso:

git clone [email protected]:b2wads/grimorio-ui.git
cd grimorio-ui
yarn

Depois disso, precisamos rodar o storybook que é uma ferramenta para auxiliar a criação de componentes visuais. Ele nos perminte criar casos de uso e exemplos para os componentes que usamos.

yarn storybook

Após rodar o comando a cima, a interface do storybook vai abrir na url http://localhost:9000/. Quando fazemos alguma modifição nos arquivos de qualquer componente, podemos ver que o resultado é atualizado automaticamente na tela!

Para fazer um teste, que tal mexer no componente Button?

Criando um componente

Para criarmos um novo componente para o Grimório basta usar um comando no terminal que se encarregará de criar todos os arquivos necessários.

yarn create:comp nome-do-componente

Esse comando vai gerar a seguinte lista de arquivos, que é o padrão de todos os componentes:

• index.js - É onde importamos e exportamos o código do componente para facilitar a importação;
• [nome-do-componente]-component.js - É o arquivo onde o código do componente de fato se encontra;
• [nome-do-componente].stories.js - Este é o local onde podemos usar o componente e visualizar através do storybook;
• [nome-do-componente].spec.js - Aqui escrevemos os testes para este componente;
• [nome-do-componente].styl - E por fim o local onde escrevemos o CSS usando o pre-processador stylus;