DC Components

Librería de componentes Vue 3 para DealRock.

Instalación

npm install @dealrock/dc-components

Uso

import { createApp } from 'vue'
import { DCButton } from '@dealrock/dc-components'
import '@dealrock/dc-components/dist/style.css'

const app = createApp({})
app.component('DCButton', DCButton)

Desarrollo

# Instalar dependencias
npm install

# Desarrollo
npm run dev

# Construir librería
npm run build

# Ejecutar tests
npm run test

# Linting
npm run lint

Componentes

• DCButton: Componente de botón personalizable
• DCIcon: 82 iconos SVG incluidos en el bundle ✨
• DCAvatar: Avatar con soporte para imágenes y QR
• DCBadge: Insignias y etiquetas
• DCBlock: Bloques de contenido
• DCHeader: Cabecera de perfil
• DCJoin: Componente de unión
• DCTabs: Sistema de pestañas

🎨 Uso de Iconos

<template>
  <DCIcon icon="github" />
  <DCIcon icon="linkedin" auxClass="my-class" />
</template>

<script setup>
import { DCIcon, getAvailableIcons, hasIcon } from '@dealrock/dc-components'

// Utilidades disponibles
const icons = getAvailableIcons() // Array de 82 iconos
const exists = hasIcon('github')  // true/false
</script>

📖 Consulta ICONS-GUIDE.md para la lista completa de iconos y ejemplos avanzados.

Estructura del proyecto

src/
├── components/                    # Componentes Vue
│   ├── DCButton/
│   │   ├── DCButton.vue          # Componente Vue
│   │   ├── DCButton.scss         # Estilos del componente
│   │   ├── index.ts              # Exportación
│   │   └── __tests__/
│   │       └── DCButton.test.ts  # Tests unitarios
│   ├── DCIcon/
│   ├── DCAvatar/
│   ├── DCBadge/
│   ├── DCBlock/
│   ├── DCHeader/
│   ├── DCJoin/
│   └── DCTabs/
├── types/                        # Definiciones de tipos TypeScript
├── styles/                       # Estilos SCSS globales
│   ├── 01_abstracts/             # Variables, mixins, funciones
│   │   ├── _variables.scss
│   │   ├── _functions.scss
│   │   ├── _mixins.scss
│   │   └── _breakpoints.scss
│   ├── components/               # Estilos compartidos
│   │   └── _form.scss
│   ├── _designtokens.scss        # Tokens de diseño
│   └── index.scss                # Archivo principal de estilos
├── scripts/                      # Scripts de utilidad
│   └── create-component.js       # Generador de componentes
└── index.ts                      # Punto de entrada principal

Crear un nuevo componente

Para crear un nuevo componente con la estructura correcta:

npm run create:component DCNuevoComponente

Esto creará automáticamente:

• ✅ Archivo Vue con estructura base
• ✅ Archivo SCSS con imports correctos
• ✅ Archivo de exportación (index.ts)
• ✅ Test unitario base
• ✅ Todas las carpetas necesarias

🚀 Publicación de Releases

Para Maintainers

Este proyecto está configurado para publicación automática. Para crear una nueva versión:

# Release patch (0.1.0 → 0.1.1) - bugfixes
npm run release patch

# Release minor (0.1.0 → 0.2.0) - nuevas características
npm run release minor

# Release major (0.1.0 → 1.0.0) - breaking changes
npm run release major

¿Qué sucede automáticamente?

1. 🔍 Validaciones: Tests, linter y build locales
2. 📦 Versionado: Incremento automático en package.json
3. 📝 CHANGELOG: Actualización automática con template
4. 🏷️ Git Tag: Creación del tag v0.1.x
5. ☁️ GitHub Actions: Publicación automática en npm y creación de release

Requisitos previos

• Estar en la rama master
• No tener cambios sin commitear
• Tener configurado NPM_TOKEN en GitHub Secrets

📖 Para configuración inicial, consulta GITHUB-SETUP.md