Biblioteca de compontens T1

Esta diseñada para entregar una biblioteca de componentes para poder se reutilizados en cualqueir proyecto

Autor

• Nombre: Jose Alberto Cano Govea
• Email: [email protected]

Tecnologías Utilizadas

• React
• TypeScript
• Vite
• Tailwind CSS
• class-variance-authority
• tailwind-merge
• clsx
• Storybook
• Jest
• React Testing Library
• @testing-library/user-event
• ts-jest
• ESLint
• Prettier

Requisitos

• Node.js >= v22.13.1
• npm >= 10.9.2
• Git - Para control de versiones

Navegadores Soportados

• Chrome >= 90
• Firefox >= 88
• Safari >= 14
• Edge >= 90

Pasos para ejecutar el proyecto

1. Instalar las dependencias

  npm install

2. Levantar el servidor de la documentación

    npm run storybook

Pasos para compilar y publicar en npm

1. No tener ningun trabajo en progreso.
2. Compilar la libreria

   npm run build

3. Subir version al paquete

   npm version patch

3. Publicar. en el npm registry

   npm publish

Pruebas unitarias

1. Ejecutar

   npm test

Estructura del Proyecto

ui-library-t1/
├── 📁 src/
│   ├── 📄 index.css                  # Estilos globales
│   ├── 📄 main.ts                    # Punto de entrada principal
│   ├── 📁 Button/
│   │   ├── 📄 Button.tsx             # Componente Button
│   │   └── 📄 Button.stories.tsx     # Historias de Storybook
│   ├── 📁 Card/
│   │   └── 📄 Card.tsx               # Componente Card
│   ├── 📁 Input/
│   │   └── 📄 Input.tsx              # Componente Input
│   ├── 📁 Modal/
│   │   └── 📄 Modal.tsx              # Componente Modal
│   ├── 📁 tokens/
│   │   ├── 📄 index.ts               # Exportaciones de tokens
│   │   ├── 📄 breakpoints.ts         # Breakpoints responsivos
│   │   ├── 📄 colors.ts              # Paleta de colores
│   │   ├── 📄 spacing.ts             # Sistema de espaciado
│   │   └── 📄 theme.ts               # Configuración del tema
│   ├── 📁 types/
│   │   └── 📄 index.ts               # Tipos TypeScript
│   ├── 📁 utils/
│   │   └── 📄 index.ts               # Utilidades y helpers
│   └── 📁 __tests__/
│       ├── 📄 Button.test.tsx        # Tests del Button (9 tests)
│       ├── 📄 Card.test.tsx          # Tests del Card (9 tests)
│       ├── 📄 Input.test.tsx         # Tests del Input (12 tests)
│       └── 📄 Modal.test.tsx         # Tests del Modal (12 tests)
├── 📁 __mocks__/
│   ├── 📄 clsx.js                    # Mock para clsx
│   ├── 📄 tailwind-merge.js          # Mock para tailwind-merge
│   └── 📄 class-variance-authority.js # Mock para CVA
├── 📄 package.json                   # Configuración del proyecto
├── 📄 tsconfig.json                  # Configuración de TypeScript
├── 📄 vite.config.ts                 # Configuración de Vite
├── 📄 tailwind.config.js             # Configuración de Tailwind CSS
├── 📄 eslint.config.js               # Configuración de ESLint
├── 📄 jest.config.js                 # Configuración de Jest
├── 📄 index.html                     # Archivo HTML principal
└── 📄 README.md                      # Documentación del proyecto

Componentes Disponibles

Button

• Variantes: primary, secondary, outline, ghost
• Tamaños: sm, md, lg
• Estados: loading, disabled
• Cobertura: 9 tests unitarios

Card

• Secciones: CardHeader, CardContent, CardFooter, CardImage
• Opciones: border, borderType, rounded, separator
• Cobertura: 9 tests unitarios

Input

• Tipos: text, email, password, number
• Estados: error, success, disabled
• Validación automática para email
• Cobertura: 12 tests unitarios

Modal

• Tamaños: sm, md, lg, xl
• Overlay personalizable
• Gestión de eventos de teclado
• Cobertura: 12 tests unitarios

Sistema de Tokens

• Colores: Paleta completa con variantes
• Espaciado: Sistema consistente de spacing
• Breakpoints: Configuración responsive
• Tema: Configuración centralizada