Version: 1.0.0 · Astro 7 · React 19 · UnoCSS · GSAP 3 · Lenis · Sentry · Playwright · Storybook
flowchart TD
subgraph Navegador
A[Pagina HTML] -->|Request| B[Vercel Edge]
end
subgraph Servidor Vercel
C[Astro SSR]
D[React Islands]
E[Componentes Astro]
C --> D
C --> E
end
B --> C
D -->|Hidratacion Parcial| A
sequenceDiagram
participant U as Usuario
participant N as Navegador
participant V as Vercel
participant A as Astro SSR
U->>N: Navega a /productos
N->>V: GET request
V->>A: Renderiza HTML completo
Note over A: Componentes estaticos se renderizan<br/>en servidor (sin JS)
A->>V: HTML listo
V->>N: Entrega HTML + CSS
Note over N: Pagina visible INMEDIATAMENTE
N->>N: Carga JS de las islas
Note over N: PyonCart, PyonContactForm,<br/>PyonGSAPAnimations, PyonSmoothScroll
N->>N: Hidrata solo las islas
Note over N: El resto de la pagina<br/>sigue siendo HTML estatico
| Tecnologia | Version package.json | Proposito |
|---|---|---|
| Astro | ^7.0.6 | Framework SSR con partial hydration |
| React 19 | ^19.0.0 | Islas interactivas (carrito, formularios) |
| UnoCSS | ^66.7.4 | Utilidades CSS atomicas + iconos + tipografia |
| Vercel Adapter | @astrojs/vercel ^11.0.2 | SSR en Vercel Edge |
| GSAP | ^3.15.0 | Animaciones profesionales |
| Lenis | ^1.3.25 | Smooth scroll optimizado |
| @astrojs/react | ^6.0.1 | Integracion React islands |
| @astrojs/sitemap | ^3.7.3 | Sitemap automatico |
| Phosphor Icons | @iconify-json/ph ^1.2.0 | Iconos SVG |
| @procyon/shared | github:RaccoonCaffeine/ProcyonShared | Tipos y schemas compartidos |
| Sentry | @sentry/astro ^10.63.0 | Error tracking en produccion |
| Playwright | ^1.61.1 | Testing E2E automatizado |
| Storybook | ^10.4.6 | Catalogo visual de componentes |
| Biome | ^2.5.2 | Linter + formatter unificado |
| Husky | ^9.1.7 | Git hooks pre-commit |
| lint-staged | ^17.0.8 | Solo lintear archivos staged |
| Knip | ^6.24.0 | Dead code elimination |
| Zod | ^4.4.3 | Validacion de schemas |
| Vite | ^6.0.0 | Bundler subyacente |
| TypeScript | ^6.0.3 | Tipado estricto |
| Sass | ^1.80.0 | Preprocesador CSS |
src/
├── components/
│ ├── ui/ # Componentes estaticos Astro (Pyon*)
│ │ ├── PyonHeader.astro
│ │ ├── PyonFooter.astro
│ │ ├── PyonHero.astro
│ │ └── PyonProdCard.astro
│ ├── islands/ # Islas React 19 (se hidratan en cliente)
│ │ ├── PyonCart.tsx # Carrito de compras interactivo
│ │ ├── PyonContactForm.tsx # Formulario de contacto con validacion
│ │ ├── PyonGSAPAnimations.tsx # Animaciones scroll (fade, slide-up)
│ │ └── PyonSmoothScroll.tsx # Lenis wrapper para smooth scroll
│ └── blocks/ # Bloques reutilizables (futuro)
├── layouts/
│ ├── PyonBaseLayout.astro # Layout base con SEO, meta
│ └── PyonEcommerceLayout.astro # Layout ecommerce con header/footer
├── pages/
│ ├── index.astro # Home con Hero + productos destacados + features
│ ├── productos.astro # Catalogo completo (100% estatico)
│ ├── producto/[id].astro # Detalle de producto (getStaticPaths)
│ ├── nosotros.astro # Pagina institucional
│ └── contacto.astro # Formulario de contacto (React island)
├── lib/
│ ├── constants.ts # SITE_CONFIG, NAV_LINKS, MOCK_PRODUCTS (6 productos mock)
│ └── utils.ts # formatPrice, slugify, truncate
├── content.config.ts # Astro Content Collections (Zod)
├── sentry.client.config.ts # Sentry config cliente
├── sentry.server.config.ts # Sentry config servidor
└── stories/
├── PyonProdCard.stories.ts # Storybook: card de producto
└── storybook-astro.d.ts # Types para Storybook + Astro
Archivos de configuracion en la raiz:
astro.config.mjs # Astro SSR + Vercel adapter + React + UnoCSS + Sentry
uno.config.ts # UnoCSS: presetWind3 + presetIcons + presetTypography
playwright.config.ts # Playwright E2E config
package.json # v1.0.0
| Ruta | Tipo | Componentes | Hidratacion | Datos |
|---|---|---|---|---|
/ |
Inicio | PyonHero, PyonProdCard grid, features section | Isla GSAP (visible) | MOCK_PRODUCTS |
/productos |
Catalogo | PyonProdCard grid | 100% estatico | MOCK_PRODUCTS |
/producto/[id] |
Detalle | Imagen, precio, botones | 100% estatico | MOCK_PRODUCTS |
/nosotros |
Info | Cards mision/vision/valores | 100% estatico | Constantes locales |
/contacto |
Formulario | PyonContactForm (React) | Isla React (visible) | Zod validation |
| Isla | Props | Comportamiento |
|---|---|---|
| PyonCart | — | Carrito de compras con items, total, checkout |
| PyonContactForm | — | Formulario de contacto con validacion y envio |
| PyonGSAPAnimations | children | Envuelve contenido con animaciones fade/slide-up al hacer scroll |
| PyonSmoothScroll | — | Activa Lenis smooth scroll con configuracion por defecto |
pnpm dev # Desarrollo (puerto 3000)
pnpm build # Build produccion
pnpm preview # Preview del build
pnpm test # Tests E2E Playwright
pnpm test:ui # Tests E2E con UI interactiva
pnpm storybook # Catalogo visual de componentes (puerto 6006)
pnpm build:storybook # Build del catalogo Storybook
pnpm lint # Biome check
pnpm lint:fix # Biome check con auto-fix
pnpm format # Biome format
pnpm typecheck # TypeScript + Astro check
pnpm knip # Detectar codigo muerto| Shortcut | Uso |
|---|---|
pyon-btn |
Boton base con padding, border-radius, transicion |
pyon-btn-primary |
Boton primary (indigo) |
pyon-btn-secondary |
Boton secondary (purpura) |
pyon-btn-outline |
Boton outline con hover efecto |
pyon-container |
Container responsivo max-7xl |
pyon-section |
Seccion con padding vertical |
pyon-card |
Card con sombra y hover |
pyon-input |
Input estilizado con focus ring |
pyon-gradient-text |
Texto con gradiente primary→secondary |
- Keyframes personalizados: fadeIn, slideUp (definidos en preflights de UnoCSS)
- GSAP: Control fino de animaciones scroll via PyonGSAPAnimations island
- Lenis: Smooth scroll con
html.lenis { scroll-behavior: auto }
Todos los derechos reservados. Desarrollo privado — Ecosistema Procyon.