🎨 UI Mathilde Web

Librería de componentes React basada en Atomic Design

Autor: Mathilde DEV

📋 Tabla de Contenidos

• Acerca del Proyecto
• Tecnologías
• Instalación
• Scripts Disponibles
• Arquitectura
• Documentación
• Para Nuevos Desarrolladores
• Changelog

🎯 Acerca del Proyecto

UI Mathilde Web es una librería de componentes React diseñada siguiendo el patrón Atomic Design, proporcionando componentes reutilizables, escalables y bien documentados.

Estadísticas

📊 Total de Componentes: 242
├─ Átomos:      5
├─ Moléculas:   46
├─ Organismos:  33
└─ Templates:   2
---

## 🛠️ Tecnologías

- ⚛️ **React 18** - Librería UI
- 📘 **TypeScript** - Tipado estático
- 🎨 **Tailwind CSS** - Framework de estilos
- 📚 **Storybook** - Documentación de componentes
- 🌸 **Flowbite React** - Base de componentes
- ⚡ **Vite** - Build tool
- 🏗️ **Atomic Design** - Patrón arquitectónico

---

## 📦 Instalación

```bash
# Instalar dependencias
npm install

# Instalar la librería en otro proyecto
npm install ui-mathilde-web

Uso en tu proyecto

import { Button, InputForm, Card } from 'ui-mathilde-web';
import 'ui-mathilde-web/dist/style.css';

function App() {
  return (
    <div>
      <Button onClick={() => alert('¡Hola!')}>
        Click me
      </Button>
      <Card title="Mi Card">
        Contenido del card
      </Card>
    </div>
  );
}

🚀 Scripts Disponibles

Desarrollo

npm run dev              # Inicia Vite dev server
npm run storybook        # Inicia Storybook en puerto 6006

Build

npm run build            # Compila la librería para producción
npm run build-storybook  # Compila Storybook estático

🏗️ Arquitectura

Este proyecto implementa estrictamente el patrón Atomic Design:

src/components/
├── atoms/           🔹 Elementos básicos indivisibles
│   ├── button/
│   ├── icon/
│   └── image/
│
├── molecules/       🔸 Combinación de átomos
│   ├── inputForm/
│   ├── checkbox/
│   └── dropdown/
│
├── organisms/       🔷 Secciones complejas
│   ├── card/
│   ├── table/
│   ├── modal/
│   └── queryBuilder/
│
└── templates/       🔶 Layouts de página
    └── layoutOutside/

Reglas de Dependencias

Templates    → puede importar: organisms, molecules, atoms
Organisms    → puede importar: molecules, atoms
Molecules    → puede importar: atoms
Atoms        → NO importa componentes del proyecto

📚 Documentación

Documentación Generada Automáticamente

El proyecto incluye un sistema de documentación automática que genera:

4. ONBOARDING.md - Guía para nuevos desarrolladores

Storybook

npm run storybook
# Abre http://localhost:6006

👥 Para Nuevos Desarrolladores

Quick Start

1. Lee la guía de onboarding: docs/ONBOARDING.md

Checklist Antes de Commit

• [ ] ¿Tiene archivo .types.tsx? (si es molecule u organism)
• [ ] ¿Tiene archivo .stories.tsx?
• [ ] ¿Está exportado en src/main.ts?
• [ ] ¿Pasa npm run lint?
• [ ] ¿Pasa npm run typecheck?
• [ ] ¿Pasa npm run validate:arch?

📝 Changelog

v1.1.0

• ✨ [NUEVO] Sidebar soporta estado de carga vía el prop isLoading (default false, retrocompatible). Mientras isLoading es true, el logo/header y el footer se renderizan igual que siempre; solo las filas de navegación (top y bottom) se reemplazan por placeholders shimmer construidos con el átomo Skeleton. En collapsed, cada fila muestra solo el bloque de ícono. Configurable vía skeletonTopCount (default 4) y skeletonBottomCount (default 2). El mismo prop está disponible en Sidebar.Navigation para consumidores que usan la API de composición.
  • Uso típico (permisos "fail-closed"): <Sidebar isLoading={!permissionsReady} navItems={...} />
  • Ver historias "2b/2c/2d. Loading" en Storybook (Organisms/Sidebar).

v0.9.5 (Actual)

• ✨ [NUEVO] Guía de onboarding para nuevos desarrolladores

v0.0.1

• 🎉 Componentes iniciales
• ⚛️ Setup React + TypeScript + Vite

📄 Licencia

Este proyecto es privado y pertenece a Mathilde DEV.

🔗 Enlaces Útiles

• Guía de Onboarding

Desarrollado por Mathilde DEV