Sobre • Funcionalidade • Rodando localmente • Documentação • Tecnologias • Licença

💻 Sobre o projeto

Ayla, Design System da LogComex, foi desenvolvido pensando em facilitar o trabalho da nossa equipe de desenvovedores. Unindo design e agilidade, você poderá criar novos produtos LogComex sem perder tempo e seguindo o padrão dos nossos demais produtos!

Curtiu? Clique aqui para acessar o nosso pacote NPM, qualquer um pode testar :)

---

⚙️ Como tudo funciona

O Design System - Ayla, da LogComex, pode ser entendido como uma extensão de componentes do Vuetify adaptados para as necessidades do nosso time, contendo também regras de layout, cores e tipografia da Log. Dessa forma, temos aqui todos os nossos padrões de componentes para que a equipe possa usufruir sem a necessidade de pensar em regras de design e funcionalidades de componentes, maneiro né?

---

🚀 Como executar o projeto

Pré-requisitos

• Git
• Node.js - v12.x.x (Recomendamos a instalação pelo NVM)
• Yarn

Rodando o projeto

# Clone o repositório
$ git clone https://github.com/comexio/design-system.git

# Acesse a pasta do projeto do pacote pelo terminal
$ cd design-system/

# Instale as dependências
$ yarn

# Crie um link local do pacote
$ yarn link

# Vá até a pasta do projeto que vai utilizar o pacote
$ cd ..
$ cd projeto-exemplo/

# Faça o link da dependência local do pacote no seu projeto
$ yarn link @logcomex/design-system

# Novamente na pasta do pacote, rode
$ yarn watch

# ou então
$ yarn build

# Por fim, rode o projeto que vai utilizar o pacote
$ yarn dev

Importante:

1. Caso opte pelo yarn watch para assistir as suas alterações, é preciso comentar o import do CSS do Design System no arquivo design.plugin.ts presente no seu projeto.

2. Após terminar de usar o pacote localmente, siga este procedimento:

# Na raíz do projeto que está usando o pacote localmente, rode
$ yarn unlink @logcomex/design-system

# Na raíz do pacote, rode
$ yarn unlink

# Desta forma você desfaz o link local do pacote, e o projeto volta a referenciar o link do pacote NPM.

# Obs: Se vocẽ estava rodando o pacote com o yarn watch, não esqueça de descomentar o css no design.plugin.ts!

---

📂 Docs

Nosso Design System é uma documentação viva, e por isso, é atualizada constantemente. Acesse-a clicando aqui

---

🛠 Tecnologias

As seguintes ferramentas são usadas na construção do projeto:

• Vue.js - JS Framework
• Vuetify.js - Vue UI Framework
• TypeScript - JS Superset
• Sass - CSS Framework

Dependências do projeto no package.json

Utilitários

• Editor: Visual Studio Code → Extensions: ESLint, Prettier, Vetur, Vuetify-VSCode
• Padrão CSS: BEM
• Markdown: EmojiCopy, Markdown Emoji
• Badges: Shields.io

📝 Licença

Este projeto está sob a licença MIT.

---