Lib Admin - Component Library

Una potente librería de componentes React construida con Ant Design y Tailwind CSS, diseñada para crear paneles de administración de forma rápida, estética y responsive.

🚀 Instalación

Instala la librería usando npm:

npm install lib-admin-devsoft

O usando yarn:

yarn add lib-admin-devsoft

🛠️ Configuración Inicial

Para que los estilos y los componentes se visualicen correctamente, sigue estos pasos:

1. Importar Estilos Requeridos

En tu archivo principal de entrada (ej. main.tsx o App.tsx), importa el CSS de la librería:

import "lib-admin-devsoft/styles"; // Estilos base de la librería
import "antd/dist/reset.css"; // Reseteo de Ant Design (si no lo tienes)

2. Configurar Tailwind CSS

Si usas Tailwind en tu proyecto, añade la ruta de la librería a tu configuración para que los estilos de los componentes se generen correctamente:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/lib-admin-devsoft/dist/**/*.{js,ts,jsx,tsx}", // Añade esta línea
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

📦 Componentes Principales

TableComp (Tabla Responsive)

Un componente de tabla avanzado con búsqueda integrada, paginación y optimización para móviles.

import { TableComp } from "lib-admin-devsoft/components";

const columns = [
  { title: "Nombre", dataIndex: "name", key: "name" },
  { title: "Email", dataIndex: "email", key: "email" },
  { title: "Rol", dataIndex: "role", key: "role" },
];

const MyPage = () => (
  <TableComp
    columns={columns}
    dataSource={myData}
    searchPlaceholder="Buscar usuarios..."
    showSearch={true}
  />
);

DashboardComp

Componentes listos para mostrar estadísticas y gráficos.

import { DashboardCard } from "lib-admin/components";

const Stats = () => (
  <DashboardCard title="Usuarios Totales" value={1500} type="success" />
);

🔌 Providers

La librería incluye contextos para manejar el layout y suscripciones de forma centralizada.

AdminLayoutProvider

Envuelve tu aplicación para habilitar la funcionalidad del panel:

import { AdminLayoutProvider } from "lib-admin/provider";

function App() {
  return (
    <AdminLayoutProvider>
      <Router />
    </AdminLayoutProvider>
  );
}

📂 Estructura de Exportación

Puedes importar elementos de forma específica para reducir el bundle size:

• lib-admin/components: Todos los componentes UI.
• lib-admin/provider: Contextos y proveedores.
• lib-admin/interfaces: Tipos de TypeScript.
• lib-admin/styles: Archivo CSS compilado.

📝 Scripts Útiles (Para Desarrollo)

Si estás trabajando dentro del repo de la librería:

• npm run dev: Compila en modo "watch".
• npm run build: Genera la versión de producción en la carpeta /dist.
• npm run build:fresh: Limpia la caché y compila desde cero.

Hecho con ❤️ por DevSoft.