@dinnger/atomic-design-vue

🎨 Atomic Design Vue CLI

CLI en TypeScript para generar componentes Vue siguiendo la metodología Atomic Design.

📦 Instalación

Como dependencia global

npm install -g @dinnger/atomic-design-vue

Uso con npx (sin instalación)

npx @dinnger/atomic-design-vue generate

🚀 Uso

Inicializar estructura Atomic Design

Crea la estructura de carpetas siguiendo Atomic Design:

npx @dinnger/atomic-design-vue init

Esto creará la siguiente estructura:

src/components/
├── atoms/          # Componentes básicos
├── molecules/      # Combinaciones de átomos
├── organisms/      # Componentes complejos
├── templates/      # Estructuras de página
└── pages/          # Páginas completas

Generar componentes

npx @dinnger/atomic-design-vue generate
# o usar el alias
npx @dinnger/atomic-design-vue g

El CLI te guiará interactivamente a través de las siguientes opciones:

1. Tipo de componente: Atom, Molecule, Organism, Template o Page
2. Nombre del componente: En PascalCase (ej: MyButton)
3. Ruta de destino: Personalizada o estructura por defecto
4. Composition API: ¿Usar <script setup>?
5. Props: ¿Incluir props de ejemplo?
6. Emits: ¿Incluir eventos de ejemplo?
7. Tests: ¿Generar archivo de tests?
8. Storybook: ¿Generar historia de Storybook?

📚 Metodología Atomic Design

Jerarquía de componentes

Átomos → Moléculas → Organismos → Templates → Páginas

1. ⚛️ Átomos (Atoms)

Componentes básicos e indivisibles:

• Botones
• Inputs
• Labels
• Iconos
• Títulos

Ejemplo:

npx @dinnger/atomic-design-vue g
# Selecciona: Atom
# Nombre: Button

2. 🧬 Moléculas (Molecules)

Combinaciones simples de átomos:

• Campo de formulario (Label + Input + Error)
• Search bar (Input + Button)
• Card simple

Ejemplo:

npx @dinnger/atomic-design-vue g
# Selecciona: Molecule
# Nombre: SearchBar

3. 🦠 Organismos (Organisms)

Componentes complejos:

• Header completo
• Formulario completo
• Card compleja
• Sidebar con navegación

Ejemplo:

npx @dinnger/atomic-design-vue g
# Selecciona: Organism
# Nombre: NavigationHeader

4. 📄 Templates

Estructuras de página:

• Layout principal
• Layout de dashboard
• Layout de autenticación

Ejemplo:

npx @dinnger/atomic-design-vue g
# Selecciona: Template
# Nombre: DashboardLayout

5. 📱 Pages

Páginas completas con datos reales:

• Home page
• Login page
• Dashboard page

Ejemplo:

npx @dinnger/atomic-design-vue g
# Selecciona: Page
# Nombre: HomePage

💡 Ejemplos de uso

Generar un botón (Atom)

npx @dinnger/atomic-design-vue g

Selecciona:

• Tipo: Atom
• Nombre: PrimaryButton
• Composition API: Sí
• Props: Sí
• Emits: Sí

Genera:

src/components/atoms/PrimaryButton/
├── PrimaryButton.vue
├── index.ts
├── PrimaryButton.spec.ts (si se seleccionó)
└── PrimaryButton.stories.ts (si se seleccionó)

Generar un formulario (Organism)

npx @dinnger/atomic-design-vue g

Selecciona:

• Tipo: Organism
• Nombre: LoginForm
• Props: Sí
• Emits: Sí
• Tests: Sí

Usar ruta personalizada

npx @dinnger/atomic-design-vue g

En "Ruta de destino" escribe: src/features/auth/components

🎯 Mejores prácticas

1. Comienza desde abajo: Crea átomos primero, luego moléculas, etc.

2. Composición sobre herencia: Combina componentes simples para crear complejos.

3. Props bien tipadas: Define interfaces TypeScript claras.

4. Componentes presentacionales: Átomos y moléculas deben ser mayormente sin estado.

5. Lógica en niveles superiores: Organismos y páginas manejan la lógica de negocio.

6. Tests unitarios: Especialmente para átomos y moléculas reutilizables.

7. Documentación visual: Usa Storybook para catálogo de componentes.

🛠️ Desarrollo local

Clonar el repositorio

git clone https://github.com/tuusuario/atomic-design-vue.git
cd atomic-design-vue

Instalar dependencias

npm install

Compilar TypeScript

npm run build

Desarrollo con watch mode

npm run dev

Probar localmente

npm link
atomic-vue generate

📝 Estructura de archivos generados

Cada componente genera:

ComponentName/
├── ComponentName.vue          # Componente Vue
├── index.ts                   # Exportación simplificada
├── ComponentName.spec.ts      # Tests (opcional)
└── ComponentName.stories.ts   # Storybook (opcional)

🤝 Contribuir

Las contribuciones son bienvenidas! Por favor:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📄 Licencia

ISC © Walter Ronquillo

🔗 Enlaces útiles

• Atomic Design por Brad Frost
• Vue.js Documentation
• Composition API Guide
• TypeScript Documentation

⭐ Características

• ✅ TypeScript completo
• ✅ Composition API y Options API
• ✅ Generación interactiva
• ✅ Plantillas personalizables
• ✅ Soporte para tests
• ✅ Soporte para Storybook
• ✅ Estructura Atomic Design completa
• ✅ Documentación incluida
• ✅ Ejecutable con npx

🐛 Problemas conocidos

Si encuentras algún problema, por favor abre un issue.

📧 Contacto

Walter Ronquillo - @tuusuario

Proyecto: https://github.com/tuusuario/atomic-design-vue