Droni-kit

Droni-kit es una biblioteca de componentes de interfaz de usuario (UI) desarrollada específicamente para los proyectos asociados a Droni.co. Esta biblioteca está construida con Vue 3, TypeScript y Vite, proporcionando componentes modernos, accesibles y fáciles de usar para acelerar el desarrollo de aplicaciones web.

🚀 Características

• ✅ Componentes Vue 3 con Composition API
• ✅ TypeScript para mejor experiencia de desarrollo
• ✅ Tailwind CSS para estilos consistentes
• ✅ Soporte para Vue Router y Nuxt Router
• ✅ Documentación interactiva con Storybook
• ✅ Accessible siguiendo estándares web
• ✅ Tree-shaking para bundles optimizados

📦 Instalación

Para instalar droni-kit, usa npm dentro de tu proyecto de Vue 3:

npm install @dronico/droni-kit

Luego importa la hoja de estilos en tu archivo principal (main.js o main.ts):

import '@dronico/droni-kit/dist/droni-kit.css';

🎯 Uso Básico

Una vez instalado, puedes usar los componentes en tu aplicación Vue:

<template>
  <div>
    <DuiButton color="primary" @click="handleClick">
      ¡Hola Droni-kit!
    </DuiButton>
  </div>
</template>

<script setup lang="ts">
import { DuiButton } from '@dronico/droni-kit'

const handleClick = () => {
  console.log('¡Botón presionado!')
}
</script>

📚 Componentes Disponibles

🎨 Elements

DuiAlert

Componente para mostrar alertas y notificaciones.

<DuiAlert variant="solid" color="success">
  ¡Operación completada exitosamente!
</DuiAlert>

DuiAction

Componente de acción que soporta navegación con Vue Router y Nuxt Router.

<DuiAction to="/dashboard" variant="outline" color="primary">
  Ir al Dashboard
</DuiAction>

DuiTable

Tabla con soporte para slots personalizados por columna.

<DuiTable :columns="columns" :rows="data">
  <template #age="{ age }">
    <span class="font-bold">{{ age }} años</span>
  </template>
</DuiTable>

📝 Forms

DuiButton

Botón versátil con soporte para navegación y estados de carga.

<DuiButton 
  variant="solid" 
  color="primary" 
  :loading="isLoading"
  @click="submit"
>
  Enviar
</DuiButton>

DuiInput

Campo de entrada con validación y múltiples tipos.

<DuiInput
  v-model="email"
  type="email"
  label="Correo electrónico"
  placeholder="[email protected]"
  required
/>

DuiSelect

Selector desplegable con opciones personalizables.

<DuiSelect
  v-model="selectedCountry"
  :options="countries"
  item-label="name"
  item-value="id"
  label="Selecciona un país"
/>

DuiTextarea

Área de texto con auto-redimensionamiento opcional.

<DuiTextarea
  v-model="message"
  label="Mensaje"
  placeholder="Escribe tu mensaje aquí..."
  :autoheight="true"
/>

🎨 Sistema de Design

Variantes

• solid - Estilo sólido (predeterminado)
• outline - Solo borde
• ghost - Estilo transparente

Colores

• neutral - Gris (predeterminado)
• primary - Azul
• secondary - Rosa
• success - Verde
• warning - Amarillo
• danger - Rojo

Tamaños

• sm - Pequeño
• md - Mediano (predeterminado)
• lg - Grande

Esquinas redondeadas

• all - Todas las esquinas (predeterminado)
• top - Solo arriba
• bottom - Solo abajo
• left - Solo izquierda
• right - Solo derecha
• none - Sin redondeo

🧭 Navegación

Los componentes DuiButton y DuiAction detectan automáticamente si Vue Router o Nuxt Router están disponibles:

<!-- Con Vue Router -->
<DuiButton to="/users">Lista de usuarios</DuiButton>

<!-- Con objeto de ruta -->
<DuiButton :to="{ name: 'user', params: { id: 123 } }">
  Ver perfil
</DuiButton>

<!-- Enlace externo -->
<DuiButton to="https://droni.co">
  Ir a Droni.co
</DuiButton>

📖 Documentación

Puedes explorar todos los componentes y sus variantes en nuestra documentación interactiva de Storybook:

npm run storybook

🛠️ Desarrollo

Prerequisitos

• Node.js 18+
• npm o yarn

Configuración del entorno

# Clona el repositorio
git clone https://github.com/Droni-app/droni-kit.git
cd droni-kit

# Instala las dependencias
npm install

# Inicia el servidor de desarrollo
npm run dev

# Ejecuta Storybook
npm run storybook

Scripts disponibles

npm run dev          # Servidor de desarrollo
npm run build        # Construir para producción
npm run preview      # Vista previa de la build
npm run storybook    # Ejecutar Storybook
npm run build-storybook # Construir Storybook estático
npm run test         # Ejecutar tests (Vitest)

🤝 Contributing

¡Contribuciones son bienvenidas! Por favor sigue estos pasos:

1. Fork y Clone

git clone https://github.com/tu-usuario/droni-kit.git
cd droni-kit
npm install

2. Crear una rama

git checkout -b feature/nombre-de-tu-feature
# o
git checkout -b fix/descripcion-del-fix

3. Desarrollo

• Sigue las convenciones de código existentes
• Asegúrate de que tu código funcione con TypeScript
• Usa el prefijo dk: para las clases de Tailwind
• Agrega tests si es aplicable
• Documenta nuevos componentes en Storybook

4. Testing

# Ejecuta los tests
npm run test

# Verifica que Storybook funcione
npm run storybook

5. Commit

Usamos Conventional Commits:

git commit -m "feat: agregar componente DuiModal"
git commit -m "fix: corregir padding en DuiButton"
git commit -m "docs: actualizar documentación de DuiInput"

6. Pull Request

1. Push tu rama: git push origin feature/nombre-de-tu-feature
2. Abre un Pull Request en GitHub
3. Describe los cambios realizados
4. Asegúrate de que los checks pasen

Directrices para componentes

Estructura de archivos

src/stories/
├── Elements/
│   ├── DuiAlert.vue
│   ├── DuiAlert.stories.ts
│   └── ...
├── Forms/
│   ├── DuiButton.vue
│   ├── DuiButton.stories.ts
│   └── ...

Props estándar

Todos los componentes deben incluir estas props cuando sea aplicable:

• variant: 'solid' | 'outline' | 'ghost'
• color: 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
• size: 'sm' | 'md' | 'lg'
• rounded: 'all' | 'top' | 'bottom' | 'left' | 'right' | 'none'
• disabled: boolean
• block: boolean

TypeScript

• Define interfaces para las props
• Exporta los tipos para uso externo
• Usa withDefaults para valores predeterminados

export interface DuiComponentProps {
  variant?: 'solid' | 'outline' | 'ghost'
  color?: 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
}

const props = withDefaults(defineProps<DuiComponentProps>(), {
  variant: 'solid',
  color: 'neutral'
})

📄 Licencia

Este proyecto está bajo la licencia MIT. Ver el archivo LICENSE para más detalles.

🌟 Créditos

Desarrollado con ❤️ por el equipo de Droni.co

¿Necesitas ayuda? Abre un issue o contáctanos en Droni.co