💻 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!

:open_file_folder: Docs

LRouteChart

  <l-route-chart
    title="Informações de Origem e Destino"
    description="Rotas mais utilizadas para exportação no período pesquisado"
    :header=""
  />

Parâmetros

header: Array com os titulos da listagem

['Porto de Origem', 'Porto de Descarga', 'Porto de Destino']

lines: Array de objetos com as linhas da listagem

[
  {
    number: '60%',
    quantity: {
      name: 'TEUS',
      value: 22
    },
    values: ['Santos', 'Norfolk', 'Port Everglades']
  },
  {
    number: '20%',
    values: ['Umuarama', 'Bosque Uirapuru', 'Porto do mané']
  },
  {
    number: '20%',
    isLast: true,
    values: 'Outros'
  }
]

LTable

  <l-table
    :headers="[{ text: 'Dessert (100g serving)', value: 'name' }]
    :items="[{
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: '1%',
    }]
  />

Parâmetros

headers e items são iguais aos da tabela do Vuetify e todos os atributos deles estão liberados para serem utilizados, nosso componente está fazendo um bind.

Eventos

@ordination e @updateScroll estão disponiveis como nosso eventos personalizados

LBarChart

<l-bar-chart
  :data="[{
    title: "Titulo",
    description: "Descrição",
    quantity: "100",
    total: "10.000",
    percentage: 50
  }]"
  color="#D4C5EB"
  description-class="text-right"
  hover-color="#F1E8FF"
  :translation="{"total":"Total","quantity":"Quantidade"}"
  loading="false"
  max-quantity="9"
/>

LButton

<l-button
  icon-value="mdi-chevron-left"
  label="Label"
/>

Parâmetros

icon-value: String com o icone do MDI

label: String com um texto para ser renderizado

🛠 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.