Documentation

apps/documentation/README.md

apps/documentation

App de documentación interna del monorepo Nidus. Sirve como punto central de referencia para el equipo: showcase interactivo de componentes de @repo/ui y visor de documentación técnica generada directamente desde los archivos del repositorio.

Propósito

Esta app tiene dos secciones principales:

Sección	URL	Descripción
UI Showcase	`/ui`	Catálogo interactivo de todos los componentes de `@repo/ui` con variantes, props y ejemplos copiables
Docs	`/doc`	Visor de documentación técnica: README, CONTRIBUTING, WORKFLOW, agentes de IA, skills y READMEs de cada app

Estructura de Rutas

app/
├── page.tsx                     # Landing con accesos rápidos a /ui y /doc
├── globals.css                  # Importa Tailwind v4 + tokens de @repo/ui
├── layout.tsx                   # Layout raíz con fuentes y metadata
└── (dev)/
    ├── ui/
    │   ├── page.tsx             # Índice de componentes (base + shared)
    │   ├── base/                # Showcase de primitivos: badge, button, card...
    │   └── shared/              # Showcase de compuestos: logo, sidebar...
    └── doc/
        ├── layout.tsx           # Layout con sidebar colapsable
        ├── page.tsx             # Índice general de documentación
        ├── readme/page.tsx      # Lee README.md del monorepo
        ├── contributing/page.tsx# Lee CONTRIBUTING.md del monorepo
        ├── workflow/page.tsx    # Lee WORKFLOW.md del monorepo
        ├── apps/
        │   ├── page.tsx         # Índice de apps con documentación
        │   └── [app]/page.tsx   # Lee apps/[nombre]/README.md dinámicamente
        ├── agents/
        │   ├── page.tsx         # Índice de agentes de Copilot
        │   └── [name]/page.tsx  # Lee .github/agents/[nombre].md
        └── skills/
            ├── page.tsx         # Índice de skills de Copilot
            └── [name]/page.tsx  # Lee .github/skills/[nombre]/SKILL.md

Desarrollo

bash

# Solo esta app
pnpm dev --filter=documentation

# Todo el monorepo
pnpm dev

La app corre en http://localhost:3001 por defecto (el puerto puede variar si hay otras apps corriendo).

Convenciones

CSS y Estilos

El archivo app/globals.css es el punto de entrada de Tailwind para esta app. El orden de imports es crítico:

css

@import 'tailwindcss';
@plugin 'tailwindcss-animate';
@source '../../../packages/ui/src';
@import '../../../packages/ui/src/styles/globals.css';

@source es necesario para que Tailwind detecte las clases usadas en @repo/ui.
Los tokens de color (primary, secondary, tertiary, quaternary) y las variables de tema vienen de @repo/ui/src/styles/globals.css.

Lectura de Archivos del Monorepo

Las páginas del /doc leen archivos Markdown directamente del sistema de archivos con fs.readFileSync. La ruta base es relativa al process.cwd() de la app (apps/documentation/):

// README del monorepo raíz
path.join(process.cwd(), '..', '..', 'README.md');

// README de otra app
path.join(process.cwd(), '..', '..', 'apps', 'landing', 'README.md');

// Agente de Copilot
path.join(process.cwd(), '..', '..', '.github', 'agents', 'architect.md');

Agregar un Nuevo Componente al Showcase

Crear el componente en packages/ui/src/components/base/ o shared/.
Exportarlo desde el index.ts correspondiente.
Crear apps/documentation/app/(dev)/ui/base/[nombre]/page.tsx con:
- Descripción breve, variantes visuales, casos de uso con datos Nidus y tabla de props.

Agregar Documentación de una Nueva App

Crear un README.md en la raíz de la nueva app (apps/[nueva-app]/README.md).
La sección /doc/apps lo detecta automáticamente y genera la entrada en el índice y la sidebar.

Stack

Tecnología	Uso
Next.js 16 (App Router)	Framework base, RSC por defecto
Tailwind CSS v4	Estilos, sin `tailwind.config`
`@repo/ui`	Componentes del sistema de diseño
`@repo/icons`	Iconografía (lucide-react)
`fs` (Node.js)	Lectura de Markdown en tiempo de build/request
`MarkdownViewer`	Renderizado de contenido Markdown con resaltado de sintaxis