Pyme360 UI Components

Una librería moderna de componentes React diseñada específicamente para aplicaciones empresariales y PYMEs.

🚀 Características

• ✅ TypeScript completo - Tipado seguro y autocompletado
• 🎨 Tailwind CSS - Diseño moderno y customizable
• 🌙 Modo oscuro - Soporte nativo para temas claro/oscuro
• 📱 Responsive - Diseño adaptativo para todos los dispositivos
• 🔧 Tree-shaking - Importa solo lo que necesitas
• 📦 Importaciones modulares - Importa componentes específicos
• ♿ Accesibilidad - Cumple estándares WCAG
• 🎭 Headless UI - Componentes accesibles de alta calidad

📦 Instalación

# npm
npm install pyme360

# yarn
yarn add pyme360

# pnpm
pnpm add pyme360

Peer Dependencies

npm install react react-dom @headlessui/react

🎯 Uso

Importación completa

import { Button, Card, Modal } from "pyme360";
import "pyme360/styles";

function App() {
  return (
    <Card>
      <Button variant="primary">Click me</Button>
    </Card>
  );
}

Importaciones específicas (Tree-shaking optimizado)

// Importar solo el componente Button
import { Button } from "pyme360/components";

// Importar todos los componentes de formularios
import { Input, Select, TextArea } from "pyme360/components";

// Importar utilidades específicas
import { cn, formatDate } from "pyme360/utils";

// Importar hooks específicos
import { useTheme, useSidebar } from "pyme360/hooks";

Configuración de estilos

Para usar los componentes correctamente, importa los estilos CSS:

// En tu archivo principal (main.tsx, App.tsx, etc.)
import "pyme360/index.css";

Usar con TailwindCSS

Si ya tienes TailwindCSS en tu proyecto y prefieres controlar los estilos directamente, también puedes importar el tema del paquete en tu archivo donde configures los estilos de Tailwind (por ejemplo index.css o globals.css):

@import 'tailwindcss';
@import '../node_modules/pyme360/dist/styles/theme.css';

Además, asegúrate de agregar la ruta de los componentes del paquete en la configuración de content de Tailwind, para que compile correctamente las clases usadas en la librería:

@source "../node_modules/pyme360/dist/**/*.{js,jsx,ts,tsx,vue,html}";

📌 Nota: la ruta es relativa a node_modules, por lo que si tu gestor de paquetes instala las dependencias en otra ubicación, deberás ajustar el path según corresponda.

📚 Componentes Disponibles

🧱 Componentes Base

• Alert - Notificaciones y alertas
• Badge - Etiquetas de estado
• Button - Botones con variantes
• Card - Contenedores con estilo
• Modal - Ventanas modales

📝 Formularios

• Input - Campo de texto
• InputPassword - Campo de contraseña
• InputTel - Campo de teléfono
• Select - Selector con búsqueda
• TextArea - Área de texto
• Checkbox - Casillas de verificación
• ToggleSwitch - Interruptores
• DateInput - Selector de fecha
• FileDropzone - Área de carga de archivos

📊 Visualización de Datos

• Table - Tablas con funcionalidades avanzadas
• Charts - Gráficos (LineChart, BarChart, PieChart, etc.)
• Calendar - Calendario interactivo
• Pagination - Paginación

🎛️ Navegación

• Sidebar - Barra lateral
• Dropdown - Menús desplegables
• Layout - Layouts predefinidos
• ThemeToggle - Alternador de tema

🔧 Utilidades

• Toast - Notificaciones toast
• Providers - Contextos globales

🎨 Personalización

Tema personalizado

import { ThemeProvider } from "pyme360/providers";

function App() {
  return (
    <ThemeProvider defaultTheme="dark">
      <YourApp />
    </ThemeProvider>
  );
}

Estilos personalizados con Tailwind

Los componentes están construidos con Tailwind CSS y soportan todas las clases:

<Button
  className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600"
  variant="primary"
>
  Botón personalizado
</Button>

🔧 Configuración avanzada

Vite

// vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
  // ...resto de configuración
});

📖 Documentación completa

Para documentación detallada, ejemplos y guías:

• Storybook - Componentes interactivos