Capítulo 1: Introducción y estructura del monorepo

¿Por qué un monorepo?

Al usar un monorepo:

• Centralizas la configuración y mantenimiento.
• Compartes código entre paquetes fácilmente.
• Puedes crear documentación y tests comunes.
• Tienes un único punto de entrada para build y CI/CD.

En este caso, construiremos una librería que podrá:

• Usarse por paquetes independientes.
• Mantener documentación viva con Storybook.
• Publicarse automáticamente en npm mediante GitHub Actions y Changesets.

Estructura base del proyecto

Creamos una estructura clara con dos workspaces: packages/ para los componentes y docs/ para la documentación:

📁 myui/                  # Nombre del proyecto
├── packages/
│   └── button/           # Primer componente
│   └── input/            # Otro componente
├── docs/                 # Documentación o Storybook
├── .github/              # Workflows de GitHub Actions
├── node_modules/         # Administrado por pnpm
├── package.json          # Scripts y dependencias globales
├── pnpm-workspace.yaml   # Workspaces declarados
├── turbo.json            # Configuración de Turborepo
└── tsconfig.base.json    # Configuración base de TypeScript

Tecnologías que usaremos

Inicialización rápida del proyecto

Para empezar, creamos el repositorio y lo inicializamos con pnpm, turborepo y git.

mkdir myui && cd myui
pnpm init
pnpm add -D turbo
git init

Creamos el archivo pnpm-workspace.yaml para declarar nuestros workspaces:

packages:
  - "packages/*"
  - "docs"

Creamos la configuración de Turborepo en turbo.json:

{
  "$schema": "https://turborepo.org/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false
    },
    "lint": {},
    "test": {}
  }
}

Creamos nuestro archivo .gitignore para ignorar node_modules:

node_modules

Scripts útiles y organización

Modificamos nuestro package.json para añadir scripts útiles y organización.

{
  "name": "myui",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build",
    "lint": "turbo run lint",
    "test": "turbo run test"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "packageManager": "pnpm@10.4.1",
  "devDependencies": {
    "@swc/cli": "0.7.8",
    "@swc/core": "1.12.14",
    "turbo": "^2.5.5"
  }
}

Próximo capítulo

En el Capítulo 2 veremos cómo:

• Configurar correctamente tsconfig y swcrc.
• Crear tu primer paquete de componentes.
• Usar SWC para transpilar código de forma eficiente.
• Preparar la salida para distribución.