flysoft-react-ui 0.3.2 → 0.4.0

package/dist/docs/PaginationDocs.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Card, Pagination } from "../index";
+const PaginationDocs = () => {
+    const [searchParams] = useSearchParams();
+    const currentPage = parseInt(searchParams.get("pagina") || "1", 10);
+    const [page, setPage] = useState(currentPage);
+    const [customPage, setCustomPage] = useState(2);
+    useEffect(() => {
+        const pageParam = searchParams.get("pagina");
+        if (pageParam) {
+            setPage(parseInt(pageParam, 10));
+        }
+    }, [searchParams]);
+    useEffect(() => {
+        const customPageParam = searchParams.get("page");
+        if (customPageParam) {
+            setCustomPage(parseInt(customPageParam, 10));
+        }
+    }, [searchParams]);
+    // Ejemplo de datos paginados
+    const mockData = {
+        list: Array.from({ length: 50 }, (_, i) => `Elemento ${i + 1}`),
+        limit: 10,
+        page: page,
+        pages: 5,
+        total: 50,
+    };
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Pagination - Navegaci\u00F3n de P\u00E1ginas", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Pagination permite navegar entre p\u00E1ginas de resultados. Modifica autom\u00E1ticamente el query parameter en la URL para mantener el estado de navegaci\u00F3n." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: mockData.page, pages: mockData.pages, total: mockData.total }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con nombre de campo personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el nombre del query parameter usando la prop", " ", _jsx("code", { children: "fieldName" }), ". Por defecto es \"p\u00E1gina\"."] }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { fieldName: "page", page: customPage, pages: 10, total: 100 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Primera p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los botones de navegaci\u00F3n anterior y primera p\u00E1gina se deshabilitan autom\u00E1ticamente cuando est\u00E1s en la primera p\u00E1gina." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 1, pages: 5, total: 50 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00DAltima p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los botones de navegaci\u00F3n siguiente y \u00FAltima p\u00E1gina se deshabilitan autom\u00E1ticamente cuando est\u00E1s en la \u00FAltima p\u00E1gina." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 5, pages: 5, total: 50 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Una sola p\u00E1gina" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Cuando solo hay una p\u00E1gina, todos los botones de navegaci\u00F3n se deshabilitan autom\u00E1ticamente." }), _jsx("div", { className: "flex justify-center py-8 border border-[var(--color-border-default)] rounded-sm", children: _jsx(Pagination, { page: 1, pages: 1, total: 5 }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Interfaz PaginationInterface" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La interfaz ", _jsx("code", { children: "PaginationInterface<T>" }), " define la estructura de datos para informaci\u00F3n de paginaci\u00F3n:"] }), _jsx("div", { className: "p-4 rounded-sm bg-[var(--color-bg-secondary)]", style: { fontFamily: "monospace", fontSize: "0.875rem" }, children: _jsx("pre", { style: { color: "var(--color-text-primary)" }, children: `export interface PaginationInterface<T> {
+  list: Array<T>;
+  limit: number;
+  page: number;
+  pages: number;
+  total: number;
+}` }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props del componente" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "fieldName?: string" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Nombre del query parameter que se usar\u00E1 para la p\u00E1gina. Por defecto es \"pagina\"." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "page?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero de p\u00E1gina actual. Por defecto es 1." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "pages?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero total de p\u00E1ginas. Por defecto es 1." })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "total?: number" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "N\u00FAmero total de elementos. Por defecto es 0." })] })] })] })] }) }) }));
+};
+export default PaginationDocs;

package/dist/docs/TabsGroupDocs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const TabsGroupDocs: React.FC;
+export default TabsGroupDocs;
+//# sourceMappingURL=TabsGroupDocs.d.ts.map

package/dist/docs/TabsGroupDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsGroupDocs.d.ts","sourceRoot":"","sources":["../../src/docs/TabsGroupDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAwY1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/docs/TabsGroupDocs.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Card, TabsGroup, TabPanel, Button, Badge, Input } from "../index";
+const TabsGroupDocs = () => {
+    const [selectedTab, setSelectedTab] = useState("");
+    const basicTabs = [
+        { id: "users", label: "Usuarios" },
+        { id: "roles", label: "Roles" },
+        { id: "permissions", label: "Permisos" },
+    ];
+    const tabsWithNumbers = [
+        { id: 1, label: "Primero" },
+        { id: 2, label: "Segundo" },
+        { id: 3, label: "Tercero" },
+    ];
+    const tabsWithHeader = [
+        { id: "dashboard", label: "Dashboard" },
+        { id: "analytics", label: "Analytics" },
+        { id: "reports", label: "Reportes" },
+    ];
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "TabsGroup - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente TabsGroup permite organizar contenido en pesta\u00F1as. Cada TabPanel muestra su contenido cuando el tab correspondiente est\u00E1 activo." }), _jsx(Card, { title: "Ejemplo b\u00E1sico", children: _jsxs(TabsGroup, { tabs: basicTabs, children: [_jsx(TabPanel, { tabId: "users", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Lista de Usuarios" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de usuarios. Aqu\u00ED puedes mostrar una lista, formulario, o cualquier contenido relacionado con usuarios." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-user-plus", children: "Agregar Usuario" }), _jsx(Button, { variant: "outline", icon: "fa-search", children: "Buscar" })] })] }) }), _jsx(TabPanel, { tabId: "roles", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Gesti\u00F3n de Roles" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de roles. Aqu\u00ED puedes gestionar los diferentes roles del sistema." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-shield-alt", children: "Crear Rol" }), _jsx(Button, { variant: "outline", icon: "fa-list", children: "Ver Todos" })] })] }) }), _jsx(TabPanel, { tabId: "permissions", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Permisos del Sistema" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido del panel de permisos. Aqu\u00ED puedes configurar los permisos disponibles en el sistema." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-key", children: "Asignar Permisos" }), _jsx(Button, { variant: "outline", icon: "fa-cog", children: "Configurar" })] })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabs con IDs num\u00E9ricos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los tabs pueden usar tanto strings como n\u00FAmeros como identificadores." }), _jsx(Card, { title: "Ejemplo con IDs num\u00E9ricos", children: _jsxs(TabsGroup, { tabs: tabsWithNumbers, children: [_jsx(TabPanel, { tabId: 1, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Primer Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 1." })] }) }), _jsx(TabPanel, { tabId: 2, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Segundo Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 2." })] }) }), _jsx(TabPanel, { tabId: 3, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Contenido del Tercer Tab" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab usa el ID num\u00E9rico 3." })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tabs con headerNode" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El prop headerNode permite agregar contenido adicional en la misma l\u00EDnea que los tabs, alineado a la derecha. \u00DAtil para botones de acci\u00F3n, badges, o cualquier otro contenido." }), _jsx(Card, { title: "Ejemplo con headerNode", children: _jsxs(TabsGroup, { tabs: tabsWithHeader, headerNode: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "info", children: "Nuevo" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-plus", children: "Agregar" })] }), children: [_jsx(TabPanel, { tabId: "dashboard", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Dashboard" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Vista general del sistema con m\u00E9tricas y estad\u00EDsticas importantes." })] }) }), _jsx(TabPanel, { tabId: "analytics", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Analytics" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "An\u00E1lisis detallado de datos y tendencias del sistema." })] }) }), _jsx(TabPanel, { tabId: "reports", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Reportes" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Generaci\u00F3n y visualizaci\u00F3n de reportes del sistema." })] }) })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con callback onChangeTab" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El prop onChangeTab permite ejecutar una funci\u00F3n cuando se cambia de tab. \u00DAtil para sincronizar estado externo o realizar acciones al cambiar de pesta\u00F1a." }), _jsx(Card, { title: "Ejemplo con onChangeTab", children: _jsxs("div", { className: "space-y-4", children: [selectedTab && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Tab seleccionado:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: selectedTab })] }) })), _jsxs(TabsGroup, { tabs: basicTabs, onChangeTab: (tab) => setSelectedTab(tab), children: [_jsx(TabPanel, { tabId: "users", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Usuarios" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab notifica el cambio mediante onChangeTab." })] }) }), _jsx(TabPanel, { tabId: "roles", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Roles" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab tambi\u00E9n notifica el cambio mediante onChangeTab." })] }) }), _jsx(TabPanel, { tabId: "permissions", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Permisos" }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este tab tambi\u00E9n notifica el cambio mediante onChangeTab." })] }) })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo completo con formularios" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo pr\u00E1ctico usando TabsGroup con TabPanel para organizar formularios en diferentes secciones." }), _jsx(Card, { title: "Formulario de Configuraci\u00F3n", children: _jsxs(TabsGroup, { tabs: [
+                                        { id: "personal", label: "Personal" },
+                                        { id: "contact", label: "Contacto" },
+                                        { id: "security", label: "Seguridad" },
+                                    ], headerNode: _jsx(Button, { size: "sm", variant: "primary", icon: "fa-save", children: "Guardar Cambios" }), children: [_jsx(TabPanel, { tabId: "personal", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Informaci\u00F3n Personal" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Apellido", placeholder: "Ingresa tu apellido", icon: "fa-user" }), _jsx(Input, { label: "Fecha de Nacimiento", type: "date", icon: "fa-calendar" })] })] }) }), _jsx(TabPanel, { tabId: "contact", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Informaci\u00F3n de Contacto" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Email", type: "email", placeholder: "correo@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" }), _jsx(Input, { label: "Direcci\u00F3n", placeholder: "Calle, n\u00FAmero, ciudad", icon: "fa-map-marker-alt" })] })] }) }), _jsx(TabPanel, { tabId: "security", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Configuraci\u00F3n de Seguridad" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Contrase\u00F1a Actual", type: "password", placeholder: "Ingresa tu contrase\u00F1a actual", icon: "fa-lock" }), _jsx(Input, { label: "Nueva Contrase\u00F1a", type: "password", placeholder: "Ingresa tu nueva contrase\u00F1a", icon: "fa-key" }), _jsx(Input, { label: "Confirmar Contrase\u00F1a", type: "password", placeholder: "Confirma tu nueva contrase\u00F1a", icon: "fa-key" })] })] }) })] }) })] })] }) }) }));
+};
+export default TabsGroupDocs;