0.0.23 • Published 4 months ago
quasar-cosmos-design-system v0.0.23
Cosmos Design System 🚀
Tecnologias utilizadas 🛠️
- Vue.js 3: Framework progressivo de JavaScript para construção de interfaces de usuário
- Quasar Framework: Biblioteca de componentes Vue com design responsivo e suporte multiplataforma
- TypeScript: Superset de JavaScript que adiciona tipagem estática ao código
- Sass: Pré-processador CSS para estilos mais dinâmicos e organizados
- Vite: Ferramenta de build moderna e rápida para projetos front-end
Caso possua alguma dúvida, acesse o Figma para consultar os componentes do Design System 😊
Também é possível visualizar os componentes em nossa Documentação
Nosso objetivo é fornecer uma biblioteca de componentes consistente, acessível e altamente personalizável para projetos do Cosmos.
1- Instalação - Cosmos Design System 🎉
A seguir, está a maneira utilizada para instalar a biblioteca em um projeto Quasar.
1.1 Instalação via npm 📦
npm install quasar-cosmos-design-system
1.2 Crie o arquivo de boot 🚀
// src/boot/cosmos-design-system.ts
import { boot } from 'quasar/wrappers'
import CosmosDesignSystem from 'quasar-cosmos-design-system'
import 'quasar-cosmos-design-system/dist/quasar-cosmos-design-system.css'
export default boot(({ app }) => {
app.use(CosmosDesignSystem)
})
1.3 Adicione o boot na configuração do Quasar ⚙️
// quasar.config.js
module.exports = configure(function (/* ctx */) {
return {
// ...
boot: ['cosmos-design-system'],
// ...
}
})
1.4 Exemplo de Uso 💡
<template>
<c-btn variant="primary">
Botão Cosmos
</c-btn>
<c-breadcrumbs
:items="[
{ text: 'Home', to: '/' },
{ text: 'Página atual', active: true }
]"
/>
</template>
2 - Guia de Desenvolvimento e Publicação 📚
2.1 - Fluxo de Desenvolvimento 💻
- Clonar o repositório 🤖
git clone git@bitbucket.org:adm-digital-cosmos/cosmos-design-system-lib.git
- Instale as dependências 🤖
cd cosmos-design-system-lib
npm install
- Rodar o ambiente de desenvolvimento 🚀
npm run dev
- Desenvolver o componente conforme as diretrizes do projeto. ✨
- Criar a documentação do componente (exemplos, props, eventos, uso). 📝
- Subir a Pull Request (PR) para revisão. 🔍
- Fazer o merge na branch
master/main
após aprovação. ✅
2.2 - Fluxo de Publicação 📦
- Gerar a versão da biblioteca 🛠️
npm run build:lib
- Logar no NPM (se necessário) 🔑
npm login
- Atualizar a versão do pacote (ajustar conforme o tipo de atualização:
patch
,minor
,major
) 🔢
npm version patch
- Publicar a nova versão 📤
npm publish
- Comunicar aos desenvolvedores sobre a nova versão e as mudanças realizadas. 📣
0.0.23
4 months ago
0.0.22
4 months ago
0.0.21
4 months ago
0.0.20
4 months ago
0.0.19
4 months ago
0.0.18
4 months ago
0.0.17
5 months ago
0.0.16
5 months ago
0.0.15
5 months ago
0.0.14
5 months ago
0.0.13
5 months ago
0.0.11
5 months ago
0.0.10
5 months ago
0.0.9
5 months ago
0.0.8
5 months ago
0.0.7
5 months ago
0.0.6
5 months ago
0.0.5
5 months ago
0.0.4
5 months ago
0.0.3
5 months ago
0.0.1
5 months ago