@sbseguros/design-system NPM

🎨 SBS Design System

Sistema de diseño para Vue 3 con Tailwind CSS y Lucide icons, desarrollado por SBS Seguros Colombia. Una librería de componentes reutilizables que proporciona una base sólida para el desarrollo de interfaces de usuario consistentes y escalables.

🚀 Características Clave

Vue 3: Framework reactivo moderno con Composition API y <script setup>
TypeScript: Tipado estático para mayor robustez y mantenibilidad del código
Tailwind CSS: Framework de utilidades CSS para diseño rápido y consistente
Lucide Icons: Biblioteca de iconos moderna y ligera
Vite: Bundler ultrarrápido con HMR instantáneo
Storybook: Documentación interactiva y desarrollo aislado de componentes
Vitest: Framework de testing moderno y rápido
Class Variance Authority: Gestión avanzada de variantes de componentes
Distribución Multi-formato: Soporte para ESM, CJS, UMD e IIFE

🛠️ Configuración del Proyecto

Requisitos Previos

Asegúrate de tener instalado:

Node.js versión 20.18.0 o superior
npm versión 10.8.2 o superior, o Yarn

📦 Instalación

Para Usuarios del Design System

Instala el paquete en tu proyecto:

npm install @sbs/design-system
# O con Yarn:
yarn add @sbs/design-system

Para Desarrollo del Design System

Clona el repositorio e instala las dependencias:

git clone https://github.com/sbs-seguros-col/sbs-common-components.git
cd sbs-common-components
npm install

🛠️ Herramientas de Desarrollo

IDE y Extensiones Recomendadas

Se recomienda usar VS Code con las siguientes extensiones:

Vue Language Features (Volar): Extensión oficial de VS Code para Vue 3
TypeScript Vue Plugin (Volar): Para mejor soporte de TypeScript en archivos .vue
Tailwind CSS IntelliSense: Autocompletado para clases de Tailwind
ESLint: Para garantizar la consistencia del código
Prettier: Para formatear el código automáticamente

Stack Tecnológico

Framework: Vue 3.5.13+ con Composition API
Lenguaje: TypeScript 5.8.3
Bundler: Vite 6.3.5
CSS Framework: Tailwind CSS 3.4.17
Iconos: Lucide Vue Next 0.511.0
Testing: Vitest 3.1.4 + Playwright 1.52.0
Documentación: Storybook 8.6.14
Utilidades: Class Variance Authority, clsx, tailwind-merge

Compatibilidad de Navegadores

Este design system es compatible con:

Últimas 2 versiones de navegadores principales
Navegadores con más del 1% de uso global
Excluye Internet Explorer 11 y navegadores obsoletos

🚀 Comandos Disponibles

Desarrollo

Inicia el servidor de desarrollo:

npm run dev
# O
yarn dev

Storybook

Ejecuta Storybook para documentación y desarrollo de componentes:

npm run storybook
# O
yarn storybook

Accede a Storybook en http://localhost:6006.

Build

Compila la librería para producción:

npm run build
# O
yarn build

Compila Storybook para producción:

npm run build-storybook
# O
yarn build-storybook

Testing

Ejecuta las pruebas:

npm run test
# O
yarn test

Linting

Analiza el código en busca de errores y problemas de estilo:

npm run lint
# O
yarn lint

Releases

Genera una nueva versión automáticamente:

# Versión automática basada en commits
npm run release

# Versiones específicas
npm run release:major    # 1.0.0 -> 2.0.0
npm run release:minor    # 1.0.0 -> 1.1.0
npm run release:patch    # 1.0.0 -> 1.0.1

🤝 Contribución

Si deseas contribuir a este design system, sigue estos pasos:

Fork este repositorio
Crea una nueva rama: git checkout -b feature/nombre-de-tu-caracteristica
Realiza tus cambios y asegúrate de que pasen las pruebas y el linting
Haz commits siguiendo la convención de Conventional Commits

Ejemplos de commits:

feat(components): añade componente DatePicker
fix(button): corrige estilos en modo oscuro
docs(readme): actualiza guía de instalación
style(card): mejora espaciado interno
test(input): añade pruebas unitarias

Envía tus cambios: git push origin feature/nombre-de-tu-caracteristica
Abre un Pull Request describiendo tus cambios

Proceso de Release

Este proyecto utiliza commit-and-tag-version para automatizar releases. Los maintainers pueden generar nuevas versiones usando:

npm run release        # Versión automática
npm run release:patch  # Incremento de patch (bugfixes)
npm run release:minor  # Incremento menor (nuevas features)
npm run release:major  # Incremento mayor (breaking changes)