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 💻

1. Clonar o repositório 🤖

git clone [email protected]:adm-digital-cosmos/cosmos-design-system-lib.git

1. Instale as dependências 🤖

cd cosmos-design-system-lib
npm install

3. Rodar o ambiente de desenvolvimento 🚀

npm run dev

4. Desenvolver o componente conforme as diretrizes do projeto. ✨
5. Criar a documentação do componente (exemplos, props, eventos, uso). 📝
6. Subir a Pull Request (PR) para revisão. 🔍
7. Fazer o merge na branch master/main após aprovação. ✅

2.2 - Fluxo de Publicação 📦

1. Gerar a versão da biblioteca 🛠️

npm run build:lib

2. Logar no NPM (se necessário) 🔑

npm login

3. Atualizar a versão do pacote (ajustar conforme o tipo de atualização: patch, minor, major) 🔢

npm version patch

4. Publicar a nova versão 📤

npm publish

5. Comunicar aos desenvolvedores sobre a nova versão e as mudanças realizadas. 📣