npm package: @soyleninjs/code-generator
Description: Script para generar código
Author: @soyleninjs
Latest version: 1.0.1

# 🚀 Generador de Código

Script automatizado para generar secciones, snippets y componentes con sus respectivos archivos de estructura (Liquid, CSS y JavaScript).

## 📋 Descripción

Este generador te permite crear rápidamente la estructura de archivos necesaria para:
- **Secciones** de Shopify (nuevas o prefabricadas)
- **Snippets** reutilizables
- **Componentes** interactivos (Accordion, Popup, Modal, Tabs)

El script utiliza plantillas predefinidas y reemplaza variables dinámicamente para generar código personalizado.

## 🚀 Uso

Para ejecutar el generador:

```bash
bun run gen
```

O directamente:

```bash
bun run generator.js
```

## 🎯 Funcionalidades

### 1️⃣ Generación de Secciones

#### Opción A: Nueva Sección

Crea una sección desde cero con plantillas personalizables.

**Proceso:**
1. Selecciona "Section"
2. Elige "Nueva Sección"
3. Ingresa el nombre de la sección
4. Decide si generar archivos de estilos (CSS)
5. Decide si generar archivos de scripts (JS)

**Archivos generados:**

```
sections/
  └── [nombre-seccion].liquid

zrc/styles/sections/[nombre-seccion]/
  ├── index.css
  ├── [nombre-seccion].css
  └── responsive.css

zrc/scripts/sections/[nombre-seccion]/
  ├── index.js
  └── [nombre-seccion].js
```

**Variables reemplazadas en plantillas:**
- `[[handle_section_name]]` → nombre normalizado (kebab-case)
- `[[section_name]]` → nombre original
- `[[name_custom_element]]` → nombre en PascalCase para Web Components

#### Opción B: Sección Prefabricada

Genera secciones completas con código pre-diseñado.

**Secciones disponibles:**
- ✅ **Testimonials** - Sección de testimonios de clientes

**Archivos generados:** Los mismos que en "Nueva Sección", pero con contenido predefinido.

### 2️⃣ Generación de Snippets

Crea snippets reutilizables de Liquid.

**Proceso:**
1. Selecciona "Snippet"
2. Ingresa el nombre del snippet

> ⚠️ **En desarrollo:** Esta funcionalidad está parcialmente implementada.

### 3️⃣ Generación de Componentes

Crea componentes interactivos JavaScript.

**Componentes disponibles:**
- Accordion
- Popup
- Modal
- Tabs

**Proceso:**
1. Selecciona "Component"
2. Elige el tipo de componente
3. Responde "Por qué este component?"

> ⚠️ **En desarrollo:** Esta funcionalidad está parcialmente implementada.

## 🔧 Utilidades

El generador incluye funciones de transformación de texto en `utils/utils.js`:

### `handleText(string)`
Normaliza texto a formato kebab-case:
```javascript
handleText("Mi Sección Ejemplo") // → "mi-seccion-ejemplo"
```

### `toCamelCase(string)`
Convierte a camelCase:
```javascript
toCamelCase("mi-seccion-ejemplo") // → "miSeccionEjemplo"
```

### `toPascalCase(string)`
Convierte a PascalCase:
```javascript
toPascalCase("mi-seccion-ejemplo") // → "MiSeccionEjemplo"
```

### `toSnakeCase(string)`
Convierte a snake_case:
```javascript
toSnakeCase("mi-seccion-ejemplo") // → "mi_seccion_ejemplo"
```

### `toTrainCase(string)`
Convierte a Train-Case:
```javascript
toTrainCase("mi seccion ejemplo") // → "Mi-Seccion-Ejemplo"
```

## 📝 Sistema de Plantillas

El generador utiliza un sistema de reemplazo de variables con la sintaxis `[[variable]]`.

### Función `copyTemplate(from, to, vars)`

**Parámetros:**
- `from` - Ruta de la plantilla origen
- `to` - Ruta de destino del archivo generado
- `vars` - Objeto con variables a reemplazar

**Ejemplo de uso:**
```javascript
copyTemplate(
  'templates/section/liquid/template.liquid',
  'sections/hero.liquid',
  {
    handle_section_name: 'hero',
    section_name: 'Hero'
  }
);
```

**En la plantilla:**
```liquid
<div class="[[handle_section_name]]">
  <h1>[[section_name]]</h1>
</div>
```

**Resultado generado:**
```liquid
<div class="hero">
  <h1>Hero</h1>
</div>
```

## 🎨 Convenciones de Nombres

El generador aplica automáticamente las siguientes convenciones:

| Tipo | Formato | Ejemplo | Uso |
|------|---------|---------|-----|
| Archivos Liquid | kebab-case | `hero-banner.liquid` | Nombres de archivo |
| Clases CSS | kebab-case | `.hero-banner` | Selectores CSS |
| Custom Elements | PascalCase | `HeroBanner` | Web Components JS |
| Variables JS | camelCase | `heroBanner` | Variables JavaScript |

## 🔍 Ejemplo Completo

### Crear una nueva sección "Hero Banner"

```bash
bun run gen
```

**Respuestas:**
1. Tipo: `Section`
2. Tipo de sección: `Nueva Sección`
3. Nombre: `Hero Banner`
4. ¿Generar estilos?: `Sí`
5. ¿Generar scripts?: `Sí`

**Resultado:**

```
✅ sections/hero-banner.liquid
✅ zrc/styles/sections/hero-banner/index.css
✅ zrc/styles/sections/hero-banner/hero-banner.css
✅ zrc/styles/sections/hero-banner/responsive.css
✅ zrc/scripts/sections/hero-banner/index.js
✅ zrc/scripts/sections/hero-banner/hero-banner.js
```

## ⚙️ Tecnologías

- **Runtime:** Bun
- **Interactividad:** prompts v2.4.2
- **File System:** Node.js fs/promises
- **Licencia:** MIT

## 👤 Autor

**@soyleninjs**

## 📄 Licencia

MIT

---

💡 **Tip:** Para personalizar las plantillas, modifica los archivos en la carpeta `templates/`.