0.0.23 • Published 4 months ago

quasar-cosmos-design-system v0.0.23

Weekly downloads
-
License
-
Repository
-
Last release
4 months ago

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 git@bitbucket.org:adm-digital-cosmos/cosmos-design-system-lib.git
  1. Instale as dependências 🤖
cd cosmos-design-system-lib
npm install
  1. Rodar o ambiente de desenvolvimento 🚀
npm run dev
  1. Desenvolver o componente conforme as diretrizes do projeto. ✨
  2. Criar a documentação do componente (exemplos, props, eventos, uso). 📝
  3. Subir a Pull Request (PR) para revisão. 🔍
  4. 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
  1. Logar no NPM (se necessário) 🔑
npm login
  1. Atualizar a versão do pacote (ajustar conforme o tipo de atualização: patch, minor, major) 🔢
npm version patch
  1. Publicar a nova versão 📤
npm publish
  1. 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