Biblioteca de Componentes

Esta es una biblioteca de componentes React reutilizables construida con TypeScript.

Estructura de la Biblioteca

components/
├── Button/
│   ├── Button.tsx
│   └── Button.css
├── Card/
│   ├── Card.tsx
│   └── Card.css
├── Calendar/
│   ├── Calendar.tsx
│   └── Calendar.css
├── components/
│   ├── index.ts
│   └── types/
│       └── common.ts
└── config.ts

Componentes Disponibles

Button

import { Button } from './components';

<Button variant="primary" size="md">Click me</Button>

Card

import { Card } from './components';

<Card variant="elevated" hoverable>
  Card content
</Card>

Calendar

import { Calendar } from './components';

<Calendar 
  events={[
    { 
      title: "Meeting", 
      start: new Date(), 
      end: new Date() 
    }
  ]}
  showWeekends={true}
  locale="es-ES"
/>

Cómo Añadir Nuevos Componentes

1. Crear un nuevo directorio para el componente:

   mkdir components/NuevoComponente

2. Crear los archivos necesarios:

   • NuevoComponente.tsx: Lógica del componente
   • NuevoComponente.css: Estilos del componente

3. Estructura básica del componente:

   import React from 'react';
   import { BaseComponentProps } from '../components/types/common';
   import './NuevoComponente.css';
   
   interface NuevoComponenteProps extends BaseComponentProps {
     // Añadir props específicas del componente
   }
   
   const NuevoComponente: React.FC<NuevoComponenteProps> = (props) => {
     return (
       // Implementación del componente
     );
   };
   
   export default NuevoComponente;

4. Exportar el componente en components/index.ts:

   export { default as NuevoComponente } from '../NuevoComponente/NuevoComponente';
   export type { NuevoComponenteProps } from '../NuevoComponente/NuevoComponente';

Convenciones de Código

1. Usar TypeScript para todos los componentes
2. Extender BaseComponentProps para props comunes
3. Mantener los estilos en archivos CSS separados
4. Documentar props con comentarios
5. Usar interfaces para definir props
6. Exportar tipos junto con los componentes