Skip to content

bildvitta/asteroid

This branch is 311 commits ahead of main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

12cb09b · Feb 19, 2025
Apr 14, 2023
Jan 20, 2022
Jan 31, 2024
Feb 19, 2025
Nov 13, 2024
Feb 19, 2025
May 30, 2022
Feb 19, 2025
Jan 21, 2022
Apr 25, 2022
Jun 9, 2023
Jan 24, 2022
Apr 30, 2024
Feb 19, 2025
Jan 6, 2022
Jan 23, 2025
Aug 13, 2024
Jan 21, 2022
Feb 19, 2025
Feb 19, 2025
Jan 21, 2022
Jun 22, 2023

Repository files navigation

Asteroid

Asteroid é uma extensão do Quasar (Quasar App Extension) contendo coleções de componentes, plugins, estilos, utilitários, etc. Inicialmente foi idealizado para nos ajudar com o desenvolvimento de aplicações web, principalmente para criações de C.R.U.D. (seguindo nossa API) de uma forma mais rápida, fácil e padronizada.

Com o passar do tempo, o asteroid se tornou mais do que apenas um facilitador e padronizador para desenvolvimento de aplicações web, mas também se tornou nosso framework de Design System para o frontend dentro da Inovação do grupo Bild & Vitta.

Observação: Alguns componentes do Quasar precisam ser importados manualmente dentro de quasar.config.js (por exemplo quando usar o QasFormView terá que importar o QPage).

Estrutura:

.
├── app-extension                              # Onde ficam as configurações do app-extension, como arquivos de boot/
│   └── src/
│       ├── boot/                              # Arquivos boot (https://quasar.dev/quasar-cli-vite/boot-files#introduction)
│       ├── templates/                         # Templates que serão copiados para dentro do projeto na hora de instalar o asteroid
│       ├── index.js                           # https://quasar.dev/app-extensions/development-guide/index-api
│       └── install.js                         # https://quasar.dev/app-extensions/development-guide/install-api
├── docs                                       # Aplicação quasar da documentação (https://asteroid-v3.vercel.app/)/
│   └── src/
│       ├── assets/
│       │   └── menu.js                        # Arquivo onde será adicionado os items para o menu da documentação
│       ├── components/                        # Componentes para serem usados na criação da documentação
│       ├── examples/                          # Aqui vão todos os arquivos .vue que serão usados como exemplos na documentação
│       └── pages/                             # Paginas da documentação, cada arquivo markdown é uma pagina./
│           ├── components/                    # Paginas de componentes
│           ├── composables/                   # Paginas de composables
│           ├── helpers/                       # Paginas de utilitários
│           ├── plugins/                       # Paginas de plugins
│           ├── start/                         # Paginas de iniciando
│           └── styles/                        # Paginas de estilos
├── ui/
│   ├── dev/                                   # Aplicação quasar para ser utilizada nos testes enquanto esta em desenvolvimento
│   └── src/
│       ├── assets/                            # Diretório para adicionar arquivos como images, svg, etc.
│       ├── components                         # Diretório onde ficam de fato os componentes do asteroid/
│       │   └── meu-componente                 # PASTA DE EXEMPLO/
│       │       ├── QasMeuComponente.vue       # COMPONENTE DE EXEMPLO
│       │       └── QasMeuComponente.yml       # ARQUIVO PARA DOCUMENTAÇÃO DE EXEMPLO
│       ├── composables/                       # Arquivos de composables (https://vuejs.org/guide/reusability/composables.html)
│       ├── css                                # CSS da aplicação/
│       │   ├── components/                    # CSS que alteram estilos de componentes
│       │   ├── mixins/                        # SASS mixins (https://sass-lang.com/documentation/at-rules/mixin)
│       │   ├── utils/                         # Classes utilitárias
│       │   └── variables/                     # Diretórios para alterar variáveis do sass e css
│       ├── directives/                        # Diretivas do vue (https://vuejs.org/api/built-in-directives.html#built-in-directives)
│       ├── helpers/                           # Diretório para adicionar funções utilitárias
│       ├── mixins/                            # Mixins do vue (https://vuejs.org/api/options-composition.html#mixins)
│       ├── pages/                             # Diretório para adicionar paginas para aplicação, como por exemplo: paginas de erro 404, 403, 500.
│       ├── plugins/                           # Diretórios para adicionar plugins/
│       │   └── meu-plugin                     # PASTA DE EXEMPLO/
│       │       ├── MeuPlugin.js               # PLUGIN DE EXEMPLO
│       │       └── MeuPlugin.yml              # DOCUMENTAÇÃO DO MEU PLUGIN DE EXEMPLO
│       ├── asteroid.js                        # Arquivo para importar e exportar arquivos de: helpers, mixins, veu-plugin e composables
│       ├── index.scss                         # Arquivo de configurações de algumas variáveis do sass e css e para importar todos os arquivos css do asteroid
│       └── vue-plugin.js                      # Arquivo para importar todos components, diretivas e plugins criados dentro do /ui.
└── eslint                                     # Biblioteca de lint para o asteroid.

Variáveis de ambiente

Variável Descrição
BUCKET_URL Endereço de hospedagem dos arquivos
SERVER_BASE_URL Endereço base de acesso do servidor
DEBUGGING Habilita os loggers dos componentes
MAPS_API_KEY Key do google maps
ABLY_KEY Key do Ably (notificações)
ME_VERSION Versão do endpoint /me

Roadmap:

  • Finalizar eslint-plugin-asteroid;
  • Desenvolver um novo asteroid-starter-kit para o Quasar v2 + Asteroid v3, com suporte ao Webpack e Vite;
  • Adicionar componentes específicos criados nos projetos e que fazem sentido estar no Asteroid;
  • Melhoria geral na documentação (adicionar mais exemplos, links etc);
  • Refatoração de código dos componentes para uma melhorar a performance;
  • Testes unitários nos componentes;
  • Desenvolver uma CLI para facilitar o desenvolvimento dentro do Asteroid;
  • Desenvolver uma CLI para facilitar o desenvolvimento fora do Asteroid;
  • Adicionar exemplos de uso com lazy loading no QasSearchBox e QasSelect;
  • Adicionar handleProcess em todas variáveis de ambiente que não são obrigatórias.
  • Migrar todos componentes para Composition API:
    • QasActions.vue
    • QasActionsMenu.vue
    • QasAlert.vue
    • QasAppBar.vue
    • QasAppMenu.vue
    • QasAppUser.vue
    • QasAvatar.vue
    • QasBadge.vue
    • QasBox.vue
    • QasBreakline.vue
    • QasButton.vue
    • QasBtnDropdown.vue
    • QasCard.vue
    • QasCheckboxGroup.vue
    • QasCopy.vue
    • QasDate.vue
    • QasDateTimeInput.vue
    • QasDebugger.vue
    • QasDelete.vue
    • QasDialog.vue
    • QasDialogRouter.vue
    • QasEmptyResultText.vue
    • QasField.vue
    • QasFilters.vue
    • QasFormGenerator.vue
    • QasFormView.vue
    • QasGallery.vue
    • QasGalleryCard.vue
    • QasGridGenerator.vue
    • QasHeaderActions.vue
    • QasInput.vue
    • QasLabel.vue
    • QasLayout.vue
    • QasListItems.vue
    • QasListView.vue
    • QasMap.vue
    • QasNestedFields.vue
    • QasNumericInput.vue
    • QasOptionGroup.vue
    • QasPageHeader.vue
    • QasPagination.vue
    • QasPasswordInput.vue
    • QasPasswordStrengthChecker.vue
    • QasProfile.vue
    • QasResizer.vue
    • QasSearchBox.vue
    • QasSearchInput.vue
    • QasSelect.vue
    • QasSelectList.vue
    • QasSignaturePad.vue
    • QasSignatureUploader.vue
    • QasSingleView.vue
    • QasSortable.vue
    • QasStatus.vue
    • QasTableGenerator.vue
    • QasTabsGenerator.vue
    • QasTextTruncate.vue
    • QasTransfer.vue
    • QasTreeGenerator.vue
    • QasUploader.vue
    • QasWelcome.vue

Licença

MIT (c) Bild & Vitta [email protected]