arckode-framework 1.0.0

package/cli/stubs/frontend-stub.ts

@@ -0,0 +1,294 @@
+// cli/stubs/frontend-stub.ts — Stubs para módulos frontend (Vue 3 + Composition API + TypeScript)
+
+export interface FrontendStubParams {
+  name: string        // PascalCase: Producto
+  module: string      // kebab-case: productos
+}
+
+// ─── API Client ─────────────────────────────
+export function apiStub(p: FrontendStubParams): string {
+  return `// ${p.module}/api/${p.module}.api.ts
+// SOLO acá se llama al backend. Los composables usan esto, nunca fetch directo.
+
+const BASE_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3000'
+
+async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const token = localStorage.getItem('token')
+  const res = await fetch(\`\${BASE_URL}\${path}\`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { Authorization: \`Bearer \${token}\` } : {}),
+      ...options.headers,
+    },
+  })
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }))
+    throw new Error(err.error ?? 'Error de red')
+  }
+  return res.json()
+}
+
+export interface ${p.name}DTO {
+  id: string
+  nombre: string
+  activo: boolean
+  createdAt: string
+}
+
+export interface Create${p.name}DTO {
+  nombre: string
+}
+
+export const ${p.module}Api = {
+  list: (params?: Record<string, string>) =>
+    request<{ data: ${p.name}DTO[]; pagination: any }>(\`/${p.module}?\${new URLSearchParams(params)}\`),
+
+  getById: (id: string) =>
+    request<${p.name}DTO>(\`/${p.module}/\${id}\`),
+
+  create: (data: Create${p.name}DTO) =>
+    request<${p.name}DTO>('/${p.module}', { method: 'POST', body: JSON.stringify(data) }),
+
+  update: (id: string, data: Partial<Create${p.name}DTO>) =>
+    request<${p.name}DTO>(\`/${p.module}/\${id}\`, { method: 'PUT', body: JSON.stringify(data) }),
+
+  delete: (id: string) =>
+    request<void>(\`/${p.module}/\${id}\`, { method: 'DELETE' }),
+}
+`
+}
+
+// ─── Composable (hook) ─────────────────────
+export function composableStub(p: FrontendStubParams): string {
+  return `// ${p.module}/composables/use${p.name}.ts
+// Responsabilidad ÚNICA: conectar la UI con la API del módulo.
+
+import { ref, computed } from 'vue'
+import { ${p.module}Api, type ${p.name}DTO, type Create${p.name}DTO } from '../api/${p.module}.api'
+
+export function use${p.name}() {
+  const items = ref<${p.name}DTO[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const hasItems = computed(() => items.value.length > 0)
+
+  async function list(params?: Record<string, string>) {
+    loading.value = true
+    error.value = null
+    try {
+      const result = await ${p.module}Api.list(params)
+      items.value = result.data
+      return result
+    } catch (e) {
+      error.value = (e as Error).message
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function create(data: Create${p.name}DTO) {
+    loading.value = true
+    try {
+      const item = await ${p.module}Api.create(data)
+      items.value.push(item)
+      return item
+    } catch (e) {
+      error.value = (e as Error).message
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function remove(id: string) {
+    loading.value = true
+    try {
+      await ${p.module}Api.delete(id)
+      items.value = items.value.filter(i => i.id !== id)
+    } catch (e) {
+      error.value = (e as Error).message
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { items, loading, error, hasItems, list, create, remove }
+}
+`
+}
+
+// ─── Componente Lista ──────────────────────
+export function listComponentStub(p: FrontendStubParams): string {
+  return `<script setup lang="ts">
+// ${p.module}/components/${p.name}List.vue
+// Lista paginada con carga desde API
+
+import { onMounted } from 'vue'
+import { use${p.name} } from '../composables/use${p.name}'
+
+const { items, loading, error, list, remove } = use${p.name}()
+
+onMounted(() => list())
+
+function confirmarEliminacion(id: string, nombre: string) {
+  if (confirm(\`¿Eliminar \${nombre}?\`)) {
+    remove(id)
+  }
+}
+</script>
+
+<template>
+  <div class="${p.module}-list">
+    <div v-if="loading" class="loading">Cargando...</div>
+    <div v-else-if="error" class="error">{{ error }}</div>
+    <div v-else-if="!items.length" class="empty">No hay ${p.module} registrados</div>
+    <table v-else class="table">
+      <thead>
+        <tr>
+          <th>Nombre</th>
+          <th>Estado</th>
+          <th>Acciones</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in items" :key="item.id">
+          <td>{{ item.nombre }}</td>
+          <td>{{ item.activo ? 'Activo' : 'Inactivo' }}</td>
+          <td>
+            <button @click="confirmarEliminacion(item.id, item.nombre)" class="btn-danger">
+              Eliminar
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table { width: 100%; border-collapse: collapse; }
+.table th, .table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #ddd; }
+.loading { padding: 20px; text-align: center; color: #666; }
+.error { padding: 20px; color: #e74c3c; }
+.empty { padding: 20px; color: #999; text-align: center; }
+.btn-danger { background: #e74c3c; color: white; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer; }
+</style>
+`
+}
+
+// ─── Componente Formulario ─────────────────
+export function formComponentStub(p: FrontendStubParams): string {
+  return `<script setup lang="ts">
+// ${p.module}/components/${p.name}Form.vue
+// Formulario de creación/edición
+
+import { ref } from 'vue'
+import { use${p.name} } from '../composables/use${p.name}'
+
+const props = defineProps<{ item?: { id: string; nombre: string } }>()
+const emit = defineEmits<{ saved: []; canceled: [] }>()
+
+const { create } = use${p.name}()
+const nombre = ref(props.item?.nombre ?? '')
+const submitting = ref(false)
+const formError = ref<string | null>(null)
+
+async function handleSubmit() {
+  if (!nombre.value.trim()) { formError.value = 'El nombre es requerido'; return }
+  submitting.value = true
+  formError.value = null
+  try {
+    await create({ nombre: nombre.value })
+    emit('saved')
+  } catch (e) {
+    formError.value = (e as Error).message
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit" class="${p.module}-form">
+    <div v-if="formError" class="error">{{ formError }}</div>
+    <div class="field">
+      <label>Nombre</label>
+      <input v-model="nombre" type="text" required placeholder="Nombre del ${p.module}" />
+    </div>
+    <div class="actions">
+      <button type="submit" :disabled="submitting" class="btn-primary">
+        {{ submitting ? 'Guardando...' : 'Guardar' }}
+      </button>
+      <button type="button" @click="emit('canceled')" class="btn-secondary">Cancelar</button>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+.field { margin-bottom: 16px; }
+.field label { display: block; margin-bottom: 4px; font-weight: 600; }
+.field input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; }
+.actions { display: flex; gap: 8px; }
+.btn-primary { background: #3498db; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
+.btn-secondary { background: #95a5a6; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
+.error { color: #e74c3c; margin-bottom: 12px; padding: 8px; background: #fdf0ef; border-radius: 4px; }
+</style>
+`
+}
+
+// ─── Página ─────────────────────────────────
+export function pageStub(p: FrontendStubParams): string {
+  return `<script setup lang="ts">
+// ${p.module}/pages/${p.name}Page.vue
+// Página completa con lista + formulario
+
+import { ref } from 'vue'
+import ${p.name}List from '../components/${p.name}List.vue'
+import ${p.name}Form from '../components/${p.name}Form.vue'
+
+const showForm = ref(false)
+</script>
+
+<template>
+  <div class="${p.module}-page">
+    <div class="header">
+      <h1>${p.name}s</h1>
+      <button @click="showForm = !showForm" class="btn-primary">
+        {{ showForm ? 'Cancelar' : 'Nuevo ${p.name}' }}
+      </button>
+    </div>
+
+    <${p.name}Form v-if="showForm" @saved="showForm = false" @canceled="showForm = false" />
+
+    <${p.name}List />
+  </div>
+</template>
+
+<style scoped>
+.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
+.btn-primary { background: #3498db; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
+</style>
+`
+}
+
+// ─── Router ─────────────────────────────────
+export function routerStub(p: FrontendStubParams): string {
+  return `// ${p.module}/router/index.ts
+// Rutas del módulo
+
+import type { RouteRecordRaw } from 'vue-router'
+
+export const ${p.module}Routes: RouteRecordRaw[] = [
+  {
+    path: '/${p.module}',
+    name: '${p.module}',
+    component: () => import('../pages/${p.name}Page.vue'),
+    meta: { requiresAuth: true },
+  },
+]
+`
+}

package/cli/stubs/fullstack-stub.ts

@@ -0,0 +1,46 @@
+// cli/stubs/fullstack-stub.ts — Stub de módulo full-stack (backend + frontend juntos)
+// Para la opción de monolito completo.
+
+export interface FullstackStubParams {
+  name: string
+  module: string
+  fields: { name: string; type: string; required: boolean }[]
+}
+
+export function fullstackModuleStub(p: FullstackStubParams): string {
+  return `// ${p.module}/index.ts — Módulo full-stack
+// Exporta backend + frontend. Mismas types compartidas.
+
+export type { ${p.name}DTO, Create${p.name}DTO } from './types'
+export type { ${p.name}Sockets } from './sockets'
+
+// Backend
+export { ${p.name}Service } from './backend/service'
+export { ${p.name}Controller } from './backend/controller'
+
+// Frontend
+export { ${p.name}Api } from './frontend/api/${p.module}.api'
+export { use${p.name} } from './frontend/composables/use${p.name}'
+export { default as ${p.name}List } from './frontend/components/${p.name}List.vue'
+export { default as ${p.name}Form } from './frontend/components/${p.name}Form.vue'
+export { default as ${p.name}Page } from './frontend/pages/${p.name}Page.vue'
+export { ${p.module}Routes } from './frontend/router'
+`
+}
+
+export function fullstackTypesStub(p: FullstackStubParams): string {
+  return `// ${p.module}/types.ts — DTOs COMPARTIDOS entre backend y frontend
+// Misma interfaz, mismo contrato. Un solo lugar para definirlos.
+
+export interface ${p.name}DTO {
+  id: string
+${p.fields.map(f => `  ${f.name}${f.required ? '' : '?'}: ${f.type === 'number' ? 'number' : f.type === 'boolean' ? 'boolean' : 'string'}`).join('\n')}
+  createdAt: string
+  updatedAt: string
+}
+
+export interface Create${p.name}DTO {
+${p.fields.filter(f => f.name !== 'id').map(f => `  ${f.name}${f.required ? '' : '?'}: ${f.type === 'number' ? 'number' : f.type === 'boolean' ? 'boolean' : 'string'}`).join('\n')}
+}
+`
+}