Flysoft React UI

Una biblioteca de componentes React moderna y accesible construida con TypeScript, Tailwind CSS y FontAwesome 5. Incluye formularios, layouts, temas y templates para desarrollo rápido.

🚀 Características

- TypeScript First: Completamente tipado con TypeScript
- Tailwind CSS: Utiliza Tailwind CSS para estilos consistentes y personalizables
- FontAwesome 5: Iconos vectoriales de alta calidad integrados
- Accesible: Componentes que siguen las mejores prácticas de accesibilidad
- Personalizable: Fácil de personalizar con clases de Tailwind
- Tree-shakable: Solo importa los componentes que uses
- 🎨 Sistema de Temas: Sistema completo de temas personalizables con Context API
- 📋 Templates Listos: Formularios y layouts pre-construidos
- 🤖 Cursor AI Ready: Optimizado para uso con Cursor AI

📦 Instalación

``bash
npm install flysoft-react-ui
`

⚡ Quick Start

$3

`tsx
import { ThemeProvider } from "flysoft-react-ui";
import "flysoft-react-ui/styles";

function App() {
return (

{/ Tu aplicación aquí /}

);
}
`

$3

`tsx
import { LoginForm } from "flysoft-react-ui";

function LoginPage() {
const handleLogin = (data) => {
console.log("Login data:", data);
};

return ;
}
`

$3

`tsx
import { DashboardLayout } from "flysoft-react-ui";

function Dashboard() {
const stats = [
{
title: "Usuarios",
value: "1,234",
change: "+12%",
changeType: "positive",
},
{
title: "Ventas",
value: "$45,678",
change: "+8%",
changeType: "positive",
},
];

return (



Para que Cursor AI priorice automáticamente estos componentes, crea un archivo .cursorrules en tu proyecto:

`markdown


Priorizar flysoft-react-ui

SIEMPRE usa los componentes de flysoft-react-ui antes de crear nuevos:

Componentes Disponibles:

- Layouts: AppLayout, DashboardLayout, SidebarLayout, Card, Menu, TabsGroup
- Forms: Button, Input, AutocompleteInput, DatePicker, Checkbox
- Data: DataTable, DataField, Pagination
- Templates: LoginForm, RegistrationForm, ContactForm

Para formularios:

- SIEMPRE usar Input y Button de flysoft-react-ui
- SIEMPRE usar Card como contenedor
- SIEMPRE usar FontAwesome 5 para iconos (fa fa-\*)

Importación requerida:

import "flysoft-react-ui/styles";
`

Ver INTEGRATION_GUIDE.md para configuración completa.

🔧 Configuración

$3

Asegúrate de que Tailwind CSS esté configurado en tu proyecto:

`bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
`

$3

La librería incluye FontAwesome 5. Si quieres usar tu propia instalación, puedes sobrescribir los estilos.

🎨 Sistema de Temas

Flysoft React UI incluye un sistema completo de temas personalizables que permite cambiar dinámicamente la apariencia de todos los componentes.

$3

`tsx
import { ThemeProvider } from "flysoft-react-ui";

function App() {
return (

{/ Tu aplicación aquí /}

);
}
`

$3

`tsx
import { useTheme } from "flysoft-react-ui";

function MyComponent() {
const { theme, setTheme, currentThemeName, isDark } = useTheme();

return (


`tsx
import { useThemeOverride } from "flysoft-react-ui";

function MyComponent() {
const { applyOverride, revertOverride } = useThemeOverride();

const handleHover = () => {
applyOverride({ primary: "#ff0000" });
};

const handleLeave = () => {
revertOverride(["primary"]);
};

return (


El sistema proporciona variables CSS con prefijo --flysoft-:

`css
--flysoft-primary / Color primario /
--flysoft-secondary / Color secundario /
--flysoft-success / Color de éxito /
--flysoft-warning / Color de advertencia /
--flysoft-danger / Color de peligro /
--flysoft-bg-default / Fondo por defecto /
--flysoft-text-primary / Texto principal /
--flysoft-border-default / Borde por defecto /
--flysoft-shadow-md / Sombra mediana /
--flysoft-radius-md / Radio de borde mediano /
`

Para más detalles sobre el sistema de temas, consulta THEME_SYSTEM.md.

📚 Uso

$3

`tsx
import { Button, Input, Card, Badge } from "flysoft-react-ui";
`

$3

`tsx
import "flysoft-react-ui/styles";
`

$3

`tsx
import React from "react";
import { Button, Input, Card } from "flysoft-react-ui";
import "flysoft-react-ui/styles";

function App() {
return (


`tsx
import { LoginForm, DashboardLayout, SidebarLayout } from "flysoft-react-ui";

// Formulario de login


// Dashboard con estadísticas



`tsx

Me gusta

`

Props:

- variant: 'primary' | 'secondary' | 'outline' | 'ghost'
- size: 'sm' | 'md' | 'lg'
- icon: Clase de FontAwesome (ej: 'fa-heart')
- iconPosition: 'left' | 'right'
- loading: Estado de carga
- disabled: Estado deshabilitado

$3

Campo de entrada con soporte para labels, iconos y estados de error.

`tsx
label="Email"
type="email"
placeholder="tu@email.com"
icon="fa-envelope"
error="Email inválido"
/>
`

Props:

- label: Texto del label
- error: Mensaje de error
- icon: Clase de FontAwesome
- iconPosition: 'left' | 'right'
- size: 'sm' | 'md' | 'lg'

$3

Contenedor de tarjeta con header, contenido y footer opcionales.

`tsx
title="Título"
subtitle="Subtítulo"
variant="elevated"
headerActions={Acción}
footer={

- title: Título del header
- subtitle: Subtítulo del header
- variant: 'default' | 'elevated' | 'outlined'
- headerActions: Elementos de acción en el header
- footer: Contenido del footer

$3

Etiqueta pequeña para mostrar estados o categorías.

`tsx

Activo

`

Props:

- variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'
- size: 'sm' | 'md' | 'lg'
- rounded: Aplicar bordes redondeados

🎨 Personalización

$3

Puedes personalizar los colores sobrescribiendo las clases de Tailwind CSS:

`css
/ En tu CSS /
.btn-primary {
@apply bg-purple-600 hover:bg-purple-700;
}
`

$3

La librería incluye un tema personalizado con colores primarios y animaciones. Puedes extenderlo en tu configuración de Tailwind:

`js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
500: "#your-color",
// ... más variantes
},
},
},
},
};
`

🚀 Desarrollo

$3

`bash
npm install
`

$3

`bash
npm run dev
`

$3

`bash
npm run build
`

$3

`bash
npm run build:types
`

📝 Licencia

MIT

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor, abre un issue o un pull request.

📚 Recursos Adicionales

- INTEGRATION_GUIDE.md: Guía completa de integración con Cursor AI
- THEME_SYSTEM.md: Documentación detallada del sistema de temas
- examples/common-patterns.tsx: Ejemplos completos de uso
- flysoft-ui.config.ts: Configuración centralizada de la librería
- docs/component-metadata.json: Metadatos de todos los componentes

🔧 Scripts de Mantenimiento

`bash


Actualizar documentación automáticamente

📞 Soporte

Si tienes alguna pregunta o necesitas ayuda, abre un issue en el repositorio.