flysoft-react-ui 1.2.3 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI_CONTEXT.md +1400 -217
- package/AI_INTEGRATION_GUIDE.md +343 -0
- package/INTEGRATION_GUIDE.md +60 -0
- package/README.md +5 -3
- package/dist/components/form-controls/Input.d.ts.map +1 -1
- package/dist/components/form-controls/index.d.ts +2 -2
- package/dist/components/form-controls/index.d.ts.map +1 -1
- package/dist/components/layout/Accordion.d.ts +1 -0
- package/dist/components/layout/Accordion.d.ts.map +1 -1
- package/dist/components/layout/DataTable.d.ts.map +1 -1
- package/dist/components/layout/DropdownMenu.d.ts +2 -1
- package/dist/components/layout/DropdownMenu.d.ts.map +1 -1
- package/dist/components/layout/DropdownPanel.d.ts +2 -1
- package/dist/components/layout/DropdownPanel.d.ts.map +1 -1
- package/dist/components/layout/Filter.d.ts +1 -0
- package/dist/components/layout/Filter.d.ts.map +1 -1
- package/dist/components/layout/Menu.d.ts +2 -1
- package/dist/components/layout/Menu.d.ts.map +1 -1
- package/dist/components/layout/TabsGroup.d.ts +1 -0
- package/dist/components/layout/TabsGroup.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +11889 -24
- package/dist/index.js.map +1 -1
- package/dist/templates/forms/ContactForm.d.ts +1 -0
- package/dist/templates/forms/ContactForm.d.ts.map +1 -1
- package/dist/templates/forms/LoginForm.d.ts +1 -0
- package/dist/templates/forms/LoginForm.d.ts.map +1 -1
- package/dist/templates/forms/RegistrationForm.d.ts +1 -0
- package/dist/templates/forms/RegistrationForm.d.ts.map +1 -1
- package/dist/templates/layouts/DashboardLayout.d.ts +1 -0
- package/dist/templates/layouts/DashboardLayout.d.ts.map +1 -1
- package/dist/templates/layouts/SidebarLayout.d.ts +1 -0
- package/dist/templates/layouts/SidebarLayout.d.ts.map +1 -1
- package/dist/templates/patterns/FormPattern.d.ts +1 -0
- package/dist/templates/patterns/FormPattern.d.ts.map +1 -1
- package/dist/templates/patterns/ListPattern.d.ts +77 -0
- package/dist/templates/patterns/ListPattern.d.ts.map +1 -0
- package/package.json +6 -3
- package/dist/App.d.ts +0 -4
- package/dist/App.d.ts.map +0 -1
- package/dist/App.js +0 -30
- package/dist/components/ThemeSwitcher.js +0 -12
- package/dist/components/form-controls/AutocompleteInput.js +0 -680
- package/dist/components/form-controls/Button.js +0 -211
- package/dist/components/form-controls/Checkbox.js +0 -79
- package/dist/components/form-controls/CurrencyInput.js +0 -106
- package/dist/components/form-controls/DateInput.js +0 -578
- package/dist/components/form-controls/DatePicker.js +0 -144
- package/dist/components/form-controls/Input.js +0 -35
- package/dist/components/form-controls/LinkButton.js +0 -248
- package/dist/components/form-controls/Pagination.js +0 -23
- package/dist/components/form-controls/RadioButtonGroup.js +0 -220
- package/dist/components/form-controls/SearchSelectInput-OLD.d.ts +0 -68
- package/dist/components/form-controls/SearchSelectInput-OLD.d.ts.map +0 -1
- package/dist/components/form-controls/SearchSelectInput-OLD.js +0 -962
- package/dist/components/form-controls/SearchSelectInput.js +0 -336
- package/dist/components/form-controls/index.js +0 -11
- package/dist/components/index.js +0 -7
- package/dist/components/layout/Accordion.js +0 -67
- package/dist/components/layout/AppLayout.js +0 -230
- package/dist/components/layout/Card.js +0 -54
- package/dist/components/layout/Collection.js +0 -18
- package/dist/components/layout/DataField.js +0 -38
- package/dist/components/layout/DataTable.js +0 -164
- package/dist/components/layout/DropdownMenu.js +0 -176
- package/dist/components/layout/DropdownPanel.js +0 -162
- package/dist/components/layout/Filter.js +0 -629
- package/dist/components/layout/Menu.js +0 -21
- package/dist/components/layout/TabPanel.js +0 -11
- package/dist/components/layout/TabsGroup.js +0 -52
- package/dist/components/layout/index.js +0 -12
- package/dist/components/utils/Avatar.js +0 -77
- package/dist/components/utils/Badge.js +0 -151
- package/dist/components/utils/Dialog.js +0 -44
- package/dist/components/utils/FiltersDialog.js +0 -104
- package/dist/components/utils/Loader.js +0 -44
- package/dist/components/utils/RoadMap.js +0 -139
- package/dist/components/utils/Skeleton.js +0 -10
- package/dist/components/utils/Snackbar.js +0 -136
- package/dist/components/utils/SnackbarContainer.js +0 -26
- package/dist/components/utils/iconUtils.js +0 -40
- package/dist/components/utils/index.js +0 -9
- package/dist/contexts/AppLayoutContext.js +0 -104
- package/dist/contexts/AuthContext.js +0 -224
- package/dist/contexts/CrudContext.js +0 -333
- package/dist/contexts/SnackbarContext.js +0 -41
- package/dist/contexts/ThemeContext.js +0 -197
- package/dist/contexts/index.js +0 -13
- package/dist/contexts/presets.js +0 -311
- package/dist/contexts/types.js +0 -1
- package/dist/docs/AccordionDocs.d.ts +0 -4
- package/dist/docs/AccordionDocs.d.ts.map +0 -1
- package/dist/docs/AccordionDocs.js +0 -21
- package/dist/docs/AuthDocs.tsx/AuthDocs.d.ts +0 -13
- package/dist/docs/AuthDocs.tsx/AuthDocs.d.ts.map +0 -1
- package/dist/docs/AuthDocs.tsx/AuthDocs.js +0 -18
- package/dist/docs/AuthDocs.tsx/AuthDocsContent.d.ts +0 -2
- package/dist/docs/AuthDocs.tsx/AuthDocsContent.d.ts.map +0 -1
- package/dist/docs/AuthDocs.tsx/AuthDocsContent.js +0 -22
- package/dist/docs/AuthDocs.tsx/mockAuthService.d.ts +0 -24
- package/dist/docs/AuthDocs.tsx/mockAuthService.d.ts.map +0 -1
- package/dist/docs/AuthDocs.tsx/mockAuthService.js +0 -78
- package/dist/docs/AutocompleteInputDocs.d.ts +0 -4
- package/dist/docs/AutocompleteInputDocs.d.ts.map +0 -1
- package/dist/docs/AutocompleteInputDocs.js +0 -84
- package/dist/docs/AvatarDocs.d.ts +0 -4
- package/dist/docs/AvatarDocs.d.ts.map +0 -1
- package/dist/docs/AvatarDocs.js +0 -7
- package/dist/docs/BadgeDocs.d.ts +0 -4
- package/dist/docs/BadgeDocs.d.ts.map +0 -1
- package/dist/docs/BadgeDocs.js +0 -9
- package/dist/docs/ButtonDocs.d.ts +0 -4
- package/dist/docs/ButtonDocs.d.ts.map +0 -1
- package/dist/docs/ButtonDocs.js +0 -7
- package/dist/docs/CardDocs.d.ts +0 -4
- package/dist/docs/CardDocs.d.ts.map +0 -1
- package/dist/docs/CardDocs.js +0 -22
- package/dist/docs/CheckboxDocs.d.ts +0 -4
- package/dist/docs/CheckboxDocs.d.ts.map +0 -1
- package/dist/docs/CheckboxDocs.js +0 -7
- package/dist/docs/CurrencyInputDocs.d.ts +0 -4
- package/dist/docs/CurrencyInputDocs.d.ts.map +0 -1
- package/dist/docs/CurrencyInputDocs.js +0 -22
- package/dist/docs/DataFieldDocs.d.ts +0 -4
- package/dist/docs/DataFieldDocs.d.ts.map +0 -1
- package/dist/docs/DataFieldDocs.js +0 -7
- package/dist/docs/DataTableDocs.d.ts +0 -4
- package/dist/docs/DataTableDocs.d.ts.map +0 -1
- package/dist/docs/DataTableDocs.js +0 -244
- package/dist/docs/DateInputDocs.d.ts +0 -5
- package/dist/docs/DateInputDocs.d.ts.map +0 -1
- package/dist/docs/DateInputDocs.js +0 -19
- package/dist/docs/DatePickerDocs.d.ts +0 -5
- package/dist/docs/DatePickerDocs.d.ts.map +0 -1
- package/dist/docs/DatePickerDocs.js +0 -16
- package/dist/docs/DialogDocs.d.ts +0 -4
- package/dist/docs/DialogDocs.d.ts.map +0 -1
- package/dist/docs/DialogDocs.js +0 -13
- package/dist/docs/DocAdmin.d.ts +0 -4
- package/dist/docs/DocAdmin.d.ts.map +0 -1
- package/dist/docs/DocAdmin.js +0 -68
- package/dist/docs/DocsMenu.d.ts +0 -2
- package/dist/docs/DocsMenu.d.ts.map +0 -1
- package/dist/docs/DocsMenu.js +0 -5
- package/dist/docs/DocsRouter.d.ts +0 -4
- package/dist/docs/DocsRouter.d.ts.map +0 -1
- package/dist/docs/DocsRouter.js +0 -39
- package/dist/docs/DropdownMenuDocs.d.ts +0 -4
- package/dist/docs/DropdownMenuDocs.d.ts.map +0 -1
- package/dist/docs/DropdownMenuDocs.js +0 -66
- package/dist/docs/DropdownPanelDocs.d.ts +0 -4
- package/dist/docs/DropdownPanelDocs.d.ts.map +0 -1
- package/dist/docs/DropdownPanelDocs.js +0 -7
- package/dist/docs/ExampleFormDocs.d.ts +0 -4
- package/dist/docs/ExampleFormDocs.d.ts.map +0 -1
- package/dist/docs/ExampleFormDocs.js +0 -153
- package/dist/docs/FilterDocs.d.ts +0 -4
- package/dist/docs/FilterDocs.d.ts.map +0 -1
- package/dist/docs/FilterDocs.js +0 -130
- package/dist/docs/InputDocs.d.ts +0 -4
- package/dist/docs/InputDocs.d.ts.map +0 -1
- package/dist/docs/InputDocs.js +0 -17
- package/dist/docs/LinkButtonDocs.d.ts +0 -4
- package/dist/docs/LinkButtonDocs.d.ts.map +0 -1
- package/dist/docs/LinkButtonDocs.js +0 -7
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.d.ts +0 -2
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.d.ts.map +0 -1
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.js +0 -47
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaPersonas.d.ts +0 -2
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaPersonas.d.ts.map +0 -1
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaPersonas.js +0 -34
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaSingle.d.ts +0 -2
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaSingle.d.ts.map +0 -1
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaSingle.js +0 -66
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresas.d.ts +0 -2
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresas.d.ts.map +0 -1
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresas.js +0 -7
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresasPersonasEditDialog.d.ts +0 -10
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresasPersonasEditDialog.d.ts.map +0 -1
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresasPersonasEditDialog.js +0 -39
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.d.ts +0 -2
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.d.ts.map +0 -1
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.js +0 -57
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsEditDialog.d.ts +0 -9
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsEditDialog.d.ts.map +0 -1
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsEditDialog.js +0 -30
- package/dist/docs/LoaderDocs.d.ts +0 -4
- package/dist/docs/LoaderDocs.d.ts.map +0 -1
- package/dist/docs/LoaderDocs.js +0 -33
- package/dist/docs/MenuDocs.d.ts +0 -4
- package/dist/docs/MenuDocs.d.ts.map +0 -1
- package/dist/docs/MenuDocs.js +0 -26
- package/dist/docs/PaginationDocs.d.ts +0 -4
- package/dist/docs/PaginationDocs.d.ts.map +0 -1
- package/dist/docs/PaginationDocs.js +0 -38
- package/dist/docs/RadioButtonGroupDocs.d.ts +0 -4
- package/dist/docs/RadioButtonGroupDocs.d.ts.map +0 -1
- package/dist/docs/RadioButtonGroupDocs.js +0 -46
- package/dist/docs/RoadMapDocs.d.ts +0 -4
- package/dist/docs/RoadMapDocs.d.ts.map +0 -1
- package/dist/docs/RoadMapDocs.js +0 -171
- package/dist/docs/SearchSelectInputDocs.d.ts +0 -4
- package/dist/docs/SearchSelectInputDocs.d.ts.map +0 -1
- package/dist/docs/SearchSelectInputDocs.js +0 -168
- package/dist/docs/SkeletonDocs.d.ts +0 -4
- package/dist/docs/SkeletonDocs.d.ts.map +0 -1
- package/dist/docs/SkeletonDocs.js +0 -7
- package/dist/docs/SnackbarDocs.d.ts +0 -4
- package/dist/docs/SnackbarDocs.d.ts.map +0 -1
- package/dist/docs/SnackbarDocs.js +0 -69
- package/dist/docs/TabsGroupDocs.d.ts +0 -4
- package/dist/docs/TabsGroupDocs.d.ts.map +0 -1
- package/dist/docs/TabsGroupDocs.js +0 -38
- package/dist/docs/ThemeSwitcherDocs.d.ts +0 -4
- package/dist/docs/ThemeSwitcherDocs.d.ts.map +0 -1
- package/dist/docs/ThemeSwitcherDocs.js +0 -11
- package/dist/docs/docMockServices/empresaService.d.ts +0 -38
- package/dist/docs/docMockServices/empresaService.d.ts.map +0 -1
- package/dist/docs/docMockServices/empresaService.js +0 -125
- package/dist/docs/docMockServices/index.d.ts +0 -9
- package/dist/docs/docMockServices/index.d.ts.map +0 -1
- package/dist/docs/docMockServices/index.js +0 -8
- package/dist/docs/docMockServices/initialData.d.ts +0 -6
- package/dist/docs/docMockServices/initialData.d.ts.map +0 -1
- package/dist/docs/docMockServices/initialData.js +0 -132
- package/dist/docs/docMockServices/interfaces.d.ts +0 -38
- package/dist/docs/docMockServices/interfaces.d.ts.map +0 -1
- package/dist/docs/docMockServices/interfaces.js +0 -1
- package/dist/docs/docMockServices/personaEmpresaService.d.ts +0 -43
- package/dist/docs/docMockServices/personaEmpresaService.d.ts.map +0 -1
- package/dist/docs/docMockServices/personaEmpresaService.js +0 -151
- package/dist/docs/docMockServices/personaService.d.ts +0 -39
- package/dist/docs/docMockServices/personaService.d.ts.map +0 -1
- package/dist/docs/docMockServices/personaService.js +0 -190
- package/dist/helpers/currencyFormat.js +0 -3
- package/dist/helpers/getErrorMessage.js +0 -13
- package/dist/helpers/getInitialLetters.js +0 -5
- package/dist/helpers/getQueryString.js +0 -13
- package/dist/helpers/index.js +0 -9
- package/dist/helpers/mappers.js +0 -27
- package/dist/helpers/nameValueArrayToObject.js +0 -3
- package/dist/helpers/objectToQueryString.js +0 -3
- package/dist/helpers/queryStringToObject.js +0 -13
- package/dist/helpers/regularExpressions.js +0 -5
- package/dist/hooks/index.js +0 -6
- package/dist/hooks/useAsyncRequest.js +0 -53
- package/dist/hooks/useBreakpoint.js +0 -59
- package/dist/hooks/useElementScroll.js +0 -58
- package/dist/hooks/useEnum.js +0 -21
- package/dist/hooks/useGlobalThemeStyles.js +0 -40
- package/dist/hooks/useThemeOverride.js +0 -99
- package/dist/interfaces/index.js +0 -1
- package/dist/interfaces/name-value.interface.js +0 -1
- package/dist/interfaces/pagination.interface.js +0 -1
- package/dist/main.d.ts +0 -2
- package/dist/main.d.ts.map +0 -1
- package/dist/main.js +0 -6
- package/dist/services/apiClient.js +0 -216
- package/dist/services/index.js +0 -1
- package/dist/styles.d.ts +0 -2
- package/dist/styles.d.ts.map +0 -1
- package/dist/styles.js +0 -3
- package/dist/templates/forms/ContactForm.js +0 -58
- package/dist/templates/forms/LoginForm.js +0 -36
- package/dist/templates/forms/RegistrationForm.js +0 -54
- package/dist/templates/layouts/DashboardLayout.js +0 -26
- package/dist/templates/layouts/SidebarLayout.js +0 -28
- package/dist/templates/patterns/FormPattern.js +0 -68
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { Card, Button, SnackbarProvider, SnackbarContainer, useSnackbar, } from "../index";
|
|
4
|
-
// Componente wrapper para usar el hook dentro del provider
|
|
5
|
-
const SnackbarExamples = () => {
|
|
6
|
-
const { showSnackbar } = useSnackbar();
|
|
7
|
-
return (_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: "Variantes" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Los snackbars soportan las mismas variantes que el componente Badge:", _jsx("code", { children: "primary" }), ", ", _jsx("code", { children: "secondary" }), ", ", _jsx("code", { children: "success" }), ",", " ", _jsx("code", { children: "warning" }), ", ", _jsx("code", { children: "danger" }), ", e ", _jsx("code", { children: "info" }), "."] }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => showSnackbar("Mensaje de información primaria", "primary"), children: "Primary" }), _jsx(Button, { variant: "outline", onClick: () => showSnackbar("Mensaje secundario", "secondary"), children: "Secondary" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Operación completada exitosamente", "success"), children: "Success" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Advertencia: revisa esta acción", "warning"), children: "Warning" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Error al procesar la solicitud", "danger"), children: "Danger" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Información adicional disponible", "info"), children: "Info" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con \u00EDconos personalizados" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes especificar un \u00EDcono personalizado usando clases de FontAwesome 5. Si no especificas un \u00EDcono, se usa uno por defecto seg\u00FAn la variante." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", icon: "fa-star", onClick: () => showSnackbar("¡Favorito agregado!", "success", {
|
|
8
|
-
icon: "fa-star",
|
|
9
|
-
iconLabel: "Favorito",
|
|
10
|
-
}), children: "Con \u00EDcono estrella" }), _jsx(Button, { variant: "primary", icon: "fa-bell", onClick: () => showSnackbar("Nueva notificación recibida", "info", {
|
|
11
|
-
icon: "fa-bell",
|
|
12
|
-
iconLabel: "Notificación",
|
|
13
|
-
}), children: "Con \u00EDcono campana" }), _jsx(Button, { variant: "primary", icon: "fa-download", onClick: () => showSnackbar("Descarga completada", "success", {
|
|
14
|
-
icon: "fa-download",
|
|
15
|
-
iconLabel: "Descarga",
|
|
16
|
-
}), children: "Con \u00EDcono descarga" }), _jsx(Button, { variant: "primary", icon: "fa-save", onClick: () => showSnackbar("Cambios guardados correctamente", "success", {
|
|
17
|
-
icon: "fa-save",
|
|
18
|
-
iconLabel: "Guardado",
|
|
19
|
-
}), children: "Con \u00EDcono guardar" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Duraci\u00F3n personalizada" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Por defecto, los snackbars se muestran durante 3 segundos. Puedes personalizar la duraci\u00F3n en milisegundos. Usa ", _jsx("code", { children: "0" }), " para que no se cierren autom\u00E1ticamente."] }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este snackbar dura 2 segundos", "info", {
|
|
20
|
-
duration: 2000,
|
|
21
|
-
}), children: "2 segundos" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este snackbar dura 10 segundos", "warning", {
|
|
22
|
-
duration: 10000,
|
|
23
|
-
}), children: "10 segundos" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este snackbar no se cierra automáticamente", "success", {
|
|
24
|
-
duration: 0,
|
|
25
|
-
}), children: "Sin auto-cierre" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Mensajes largos" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los snackbars tienen un ancho fijo de 18rem. Los mensajes largos se ajustan autom\u00E1ticamente ocupando varios renglones sin estirar el snackbar." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este es un mensaje muy largo que debería ocupar varios renglones en el snackbar sin estirarlo, manteniendo el ancho fijo de 18rem.", "info"), children: "Mensaje largo" }), _jsx(Button, { variant: "primary", onClick: () => showSnackbar("Este es otro ejemplo de mensaje extenso que demuestra cómo el texto se ajusta automáticamente dentro del snackbar, permitiendo que el contenido sea legible sin afectar el diseño.", "warning", {
|
|
26
|
-
icon: "fa-exclamation-triangle",
|
|
27
|
-
}), children: "Mensaje muy largo" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "M\u00FAltiples snackbars" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes mostrar m\u00FAltiples snackbars simult\u00E1neamente. Los nuevos aparecen abajo y los antiguos arriba. La barra de progreso se pausa cuando pasas el mouse sobre un snackbar." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", onClick: () => {
|
|
28
|
-
showSnackbar("Primer snackbar", "success");
|
|
29
|
-
setTimeout(() => showSnackbar("Segundo snackbar", "info"), 500);
|
|
30
|
-
setTimeout(() => showSnackbar("Tercer snackbar", "warning"), 1000);
|
|
31
|
-
}, children: "Mostrar 3 snackbars" }), _jsx(Button, { variant: "primary", onClick: () => {
|
|
32
|
-
for (let i = 1; i <= 5; i++) {
|
|
33
|
-
setTimeout(() => showSnackbar(`Snackbar número ${i}`, "primary", {
|
|
34
|
-
duration: 3000,
|
|
35
|
-
}), i * 300);
|
|
36
|
-
}
|
|
37
|
-
}, children: "Mostrar 5 snackbars" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Casos de uso comunes" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Operaci\u00F3n exitosa" }), _jsx(Button, { variant: "primary", icon: "fa-check", onClick: () => showSnackbar("Los cambios se guardaron correctamente", "success", {
|
|
38
|
-
icon: "fa-check-circle",
|
|
39
|
-
}), children: "Guardar cambios" })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Error de validaci\u00F3n" }), _jsx(Button, { variant: "primary", icon: "fa-exclamation-triangle", onClick: () => showSnackbar("Por favor, completa todos los campos requeridos", "danger", {
|
|
40
|
-
icon: "fa-times-circle",
|
|
41
|
-
duration: 6000,
|
|
42
|
-
}), children: "Validar formulario" })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Informaci\u00F3n importante" }), _jsx(Button, { variant: "primary", icon: "fa-info-circle", onClick: () => showSnackbar("Tu sesión expirará en 5 minutos. Guarda tu trabajo.", "warning", {
|
|
43
|
-
icon: "fa-clock",
|
|
44
|
-
duration: 8000,
|
|
45
|
-
}), children: "Mostrar advertencia" })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Posiciones del contenedor" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El ", _jsx("code", { children: "SnackbarContainer" }), " puede posicionarse en diferentes lugares de la pantalla. En esta documentaci\u00F3n est\u00E1 configurado en", " ", _jsx("code", { children: "top-right" }), ". Las opciones disponibles son:"] }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm mb-4", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("code", { children: "top-right" }), " - Esquina superior derecha (por defecto)"] }), _jsxs("li", { children: [_jsx("code", { children: "top-left" }), " - Esquina superior izquierda"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-right" }), " - Esquina inferior derecha"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-left" }), " - Esquina inferior izquierda"] }), _jsxs("li", { children: [_jsx("code", { children: "top-center" }), " - Centro superior"] }), _jsxs("li", { children: [_jsx("code", { children: "bottom-center" }), " - Centro inferior"] })] }), _jsx("div", { className: "bg-gray-100 dark:bg-gray-800 p-4 rounded-md", children: _jsx("code", { className: "text-sm", children: `<SnackbarContainer position="top-right" />` }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Ancho fijo:" }), " 18rem (288px)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Barra de progreso:" }), " Muestra el tiempo restante en el borde inferior con el color de la variante"] }), _jsxs("li", { children: [_jsx("strong", { children: "Auto-cierre:" }), " Se cierra autom\u00E1ticamente despu\u00E9s de la duraci\u00F3n especificada (default: 3 segundos)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Pausa al hover:" }), " La barra de progreso se pausa cuando pasas el mouse sobre el snackbar"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre manual:" }), " Bot\u00F3n X en la esquina superior derecha"] }), _jsxs("li", { children: [_jsx("strong", { children: "\u00CDconos:" }), " Soporte para \u00EDconos FontAwesome 5 con \u00EDconos por defecto seg\u00FAn la variante"] }), _jsxs("li", { children: [_jsx("strong", { children: "Mensajes largos:" }), " El texto se ajusta autom\u00E1ticamente en m\u00FAltiples l\u00EDneas"] }), _jsxs("li", { children: [_jsx("strong", { children: "M\u00FAltiples snackbars:" }), " Soporte para mostrar varios snackbars apilados verticalmente"] }), _jsxs("li", { children: [_jsx("strong", { children: "Posiciones:" }), " Configurable en el SnackbarContainer (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center)"] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Mejor Pr\u00E1ctica: Rendimiento" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Para un rendimiento \u00F3ptimo, utiliza el hook", " ", _jsx("code", { children: "useSnackbarActions" }), ". Este hook solo proporciona las funciones para disparar notificaciones, evitando que tu componente se re-renderice innecesariamente cuando la lista de snackbars cambie o se actualice su progreso."] }), _jsx("div", { className: "max-w-md mx-auto", children: _jsxs(Card, { className: "p-4 border-dashed", children: [_jsx("h4", { className: "font-medium mb-2 text-green-600", children: "Componente Optimizado" }), _jsxs("p", { className: "text-xs mb-3 text-gray-500", children: ["Este componente utiliza ", _jsx("code", { children: "useSnackbarActions" }), ". Observa c\u00F3mo el contador no aumenta mientras el snackbar est\u00E1 en pantalla."] }), _jsx(OptimizedComponent, {})] }) })] }), _jsxs("section", { className: "mt-12 p-6 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-100 dark:border-blue-800", children: [_jsxs("h3", { className: "text-xl font-bold mb-4 text-blue-800 dark:text-blue-300", children: [_jsx("i", { className: "fa fa-magic mr-2" }), "Automatizaci\u00F3n con ", _jsx("code", { children: "useAsyncRequest" })] }), _jsxs("p", { className: "mb-6 text-blue-700 dark:text-blue-400", children: ["El hook ", _jsx("code", { children: "useAsyncRequest" }), " permite gestionar peticiones as\u00EDncronas y mostrar autom\u00E1ticamente snackbars de \u00E9xito o error."] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Card, { className: "bg-white dark:bg-gray-800", title: "Configuraci\u00F3n de Mensajes", children: _jsxs("div", { className: "space-y-4 text-sm", children: [_jsxs("p", { children: [_jsx("strong", { children: "successMessage:" }), " Mensaje a mostrar si la promesa se resuelve."] }), _jsxs("p", { children: [_jsx("strong", { children: "errorMessage:" }), " Puede ser un ", _jsx("code", { children: "string" }), " ", "o una ", _jsx("code", { children: "funci\u00F3n" }), " que recibe el error. Si no se env\u00EDa, no se mostrar\u00E1 feedback de error autom\u00E1ticamente."] }), _jsx("div", { className: "bg-gray-100 dark:bg-gray-900 p-3 rounded font-mono text-xs", children: `const { execute } = useAsyncRequest({
|
|
46
|
-
successMessage: "¡Guardado!",
|
|
47
|
-
// Función para mensajes dinámicos
|
|
48
|
-
errorMessage: (err) => \`Error: \${err.message}\`,
|
|
49
|
-
});` })] }) }), _jsxs(Card, { className: "bg-white dark:bg-gray-800", title: "Sin Feedback Autom\u00E1tico", children: [_jsxs("p", { className: "text-sm mb-4", children: ["Si omites ", _jsx("code", { children: "errorMessage" }), ", el hook no disparar\u00E1 ning\u00FAn snackbar ante errores, permiti\u00E9ndote manejar el feedback de forma manual."] }), _jsx("div", { className: "bg-gray-100 dark:bg-gray-900 p-3 rounded font-mono text-xs", children: `// No mostrará snackbar si falla
|
|
50
|
-
const { execute } = useAsyncRequest({
|
|
51
|
-
successMessage: "Carga completa"
|
|
52
|
-
});` })] })] })] })] }));
|
|
53
|
-
};
|
|
54
|
-
// --- Componentes de Prueba de Rendimiento ---
|
|
55
|
-
const OptimizedComponent = React.memo(() => {
|
|
56
|
-
const { showSnackbar } = useSnackbar();
|
|
57
|
-
// Para detectar renders
|
|
58
|
-
const renderRef = React.useRef(0);
|
|
59
|
-
renderRef.current++;
|
|
60
|
-
// Log para consola
|
|
61
|
-
React.useEffect(() => {
|
|
62
|
-
console.log("%c[Optimized] Renderizado #" + renderRef.current, "color: green");
|
|
63
|
-
});
|
|
64
|
-
return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex justify-between items-center bg-gray-50 p-2 rounded", children: [_jsx("span", { className: "text-sm", children: "Contador de Renders:" }), _jsx("span", { className: "font-bold text-green-600 px-2 py-0.5 bg-green-50 rounded", children: renderRef.current })] }), _jsx(Button, { variant: "primary", className: "w-full", onClick: () => showSnackbar("Este componente es eficiente", "success"), children: "Disparar Snackbar" }), _jsx("p", { className: "text-[10px] text-gray-400 italic text-center", children: "El contador NO aumenta con los cambios de estado de otros snackbars." })] }));
|
|
65
|
-
});
|
|
66
|
-
const SnackbarDocs = () => {
|
|
67
|
-
return (_jsxs(SnackbarProvider, { children: [_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Snackbar - Notificaciones y Mensajes", children: _jsx(SnackbarExamples, {}) }) }), _jsx(SnackbarContainer, { position: "top-right" })] }));
|
|
68
|
-
};
|
|
69
|
-
export default SnackbarDocs;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabsGroupDocs.d.ts","sourceRoot":"","sources":["../../src/docs/TabsGroupDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA+IxC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAsa1B,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React, { useState } from "react";
|
|
3
|
-
import { useSearchParams } from "react-router-dom";
|
|
4
|
-
import { Card, TabsGroup, TabPanel, Button, Badge, Input } from "../index";
|
|
5
|
-
const UrlSyncExample = () => {
|
|
6
|
-
const [searchParams] = useSearchParams();
|
|
7
|
-
const urlTab = searchParams.get("tab");
|
|
8
|
-
const tabsForUrl = [
|
|
9
|
-
{ id: "overview", label: "Resumen" },
|
|
10
|
-
{ id: "details", label: "Detalles" },
|
|
11
|
-
{ id: "settings", label: "Configuración" },
|
|
12
|
-
];
|
|
13
|
-
return (_jsxs("div", { className: "space-y-4", children: [urlTab && (_jsxs("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 desde URL:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: urlTab })] }), _jsxs("p", { className: "text-xs mt-1", style: { color: "var(--flysoft-text-secondary)" }, children: ["URL actual:", " ", _jsxs("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: ["?tab=", urlTab] })] }), _jsxs("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["\uD83D\uDCA1 Prueba cambiar de tab y observa c\u00F3mo se actualiza la URL. Tambi\u00E9n puedes recargar la p\u00E1gina con", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: "?tab=details" }), "en la URL para ver c\u00F3mo se carga directamente ese tab."] })] })), !urlTab && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["\uD83D\uDCA1 Cambia de tab y observa c\u00F3mo se actualiza la URL. Tambi\u00E9n puedes agregar", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: "?tab=details" }), "manualmente en la URL para cargar directamente ese tab."] }) })), _jsxs(TabsGroup, { tabs: tabsForUrl, paramName: "tab", children: [_jsx(TabPanel, { tabId: "overview", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Resumen General" }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es el tab de resumen. Cuando este tab est\u00E9 activo, la URL mostrar\u00E1", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=overview" }), "."] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-chart-bar", children: "Ver Estad\u00EDsticas" }), _jsx(Button, { variant: "outline", icon: "fa-download", children: "Exportar" })] })] }) }), _jsx(TabPanel, { tabId: "details", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Detalles Completos" }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es el tab de detalles. Cuando este tab est\u00E9 activo, la URL mostrar\u00E1", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=details" }), "."] }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Si recargas la p\u00E1gina con", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=details" }), "en la URL, este tab se cargar\u00E1 autom\u00E1ticamente."] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-info-circle", children: "M\u00E1s Informaci\u00F3n" }), _jsx(Button, { variant: "outline", icon: "fa-edit", children: "Editar" })] })] }) }), _jsx(TabPanel, { tabId: "settings", children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "text-lg font-semibold text-[var(--color-text-primary)]", children: "Configuraci\u00F3n" }), _jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es el tab de configuraci\u00F3n. Cuando este tab est\u00E9 activo, la URL mostrar\u00E1", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "?tab=settings" }), "."] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "primary", icon: "fa-cog", children: "Configurar" }), _jsx(Button, { variant: "outline", icon: "fa-save", children: "Guardar" })] })] }) })] })] }));
|
|
14
|
-
};
|
|
15
|
-
const TabsGroupDocs = () => {
|
|
16
|
-
const [selectedTab, setSelectedTab] = useState("");
|
|
17
|
-
const basicTabs = [
|
|
18
|
-
{ id: "users", label: "Usuarios" },
|
|
19
|
-
{ id: "roles", label: "Roles" },
|
|
20
|
-
{ id: "permissions", label: "Permisos" },
|
|
21
|
-
];
|
|
22
|
-
const tabsWithNumbers = [
|
|
23
|
-
{ id: 1, label: "Primero" },
|
|
24
|
-
{ id: 2, label: "Segundo" },
|
|
25
|
-
{ id: 3, label: "Tercero" },
|
|
26
|
-
];
|
|
27
|
-
const tabsWithHeader = [
|
|
28
|
-
{ id: "dashboard", label: "Dashboard" },
|
|
29
|
-
{ id: "analytics", label: "Analytics" },
|
|
30
|
-
{ id: "reports", label: "Reportes" },
|
|
31
|
-
];
|
|
32
|
-
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: "Sincronizaci\u00F3n con URL (paramName)" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El prop", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "paramName" }), " ", "permite sincronizar el tab activo con los par\u00E1metros de la URL. Cuando cambias de tab, se actualiza la URL autom\u00E1ticamente. Si la URL ya contiene el par\u00E1metro al cargar la p\u00E1gina, se mostrar\u00E1 el tab correspondiente. Esto es \u00FAtil para compartir enlaces directos a un tab espec\u00EDfico o para mantener el estado al navegar con el bot\u00F3n atr\u00E1s/adelante del navegador."] }), _jsx(Card, { title: "Ejemplo con sincronizaci\u00F3n de URL", children: _jsx(UrlSyncExample, {}) })] }), _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: [
|
|
33
|
-
{ id: "personal", label: "Personal" },
|
|
34
|
-
{ id: "contact", label: "Contacto" },
|
|
35
|
-
{ id: "security", label: "Seguridad" },
|
|
36
|
-
], 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" })] })] }) })] }) })] })] }) }) }));
|
|
37
|
-
};
|
|
38
|
-
export default TabsGroupDocs;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeSwitcherDocs.d.ts","sourceRoot":"","sources":["../../src/docs/ThemeSwitcherDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAyC1B,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EA2E9B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { Card, Button, Input, ThemeSwitcher, useTheme } from "../index";
|
|
4
|
-
const ThemePreview = () => {
|
|
5
|
-
const { theme } = useTheme();
|
|
6
|
-
return (_jsxs(Card, { title: "Vista previa del tema actual", subtitle: `Tema activo: ${theme.name}`, className: "space-y-4", children: [_jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Los componentes de Flysoft usan autom\u00E1ticamente las variables del tema activo. Cambia el tema con el ThemeSwitcher para ver los estilos actualizados." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsx(Button, { variant: "primary", icon: "fa-moon", children: "Acci\u00F3n primaria" }), _jsx(Button, { variant: "outline", icon: "fa-sun", children: "Acci\u00F3n secundaria" }), _jsx(Button, { variant: "ghost", icon: "fa-adjust", children: "Acci\u00F3n fantasma" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Correo", type: "email", placeholder: "correo@empresa.com", icon: "fa-envelope" })] })] }));
|
|
7
|
-
};
|
|
8
|
-
const ThemeSwitcherDocs = () => {
|
|
9
|
-
return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "ThemeSwitcher - Gu\u00EDa 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: "text-sm mb-6", style: { color: "var(--flysoft-text-secondary)" }, children: "ThemeSwitcher permite alternar entre los temas configurados en la librer\u00EDa. Se integra autom\u00E1ticamente con `ThemeProvider` y aplica los cambios a todos los componentes sin recargar la p\u00E1gina." }), _jsx(Card, { title: "Switcher integrado", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(ThemeSwitcher, {}), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Este ejemplo usa el ThemeSwitcher directamente, ideal para colocarlo en headers o barras laterales." })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Vista previa de tema" }), _jsx(ThemePreview, {})] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Integraci\u00F3n en layouts" }), _jsx(Card, { title: "Recomendaciones", subtitle: "Buenas pr\u00E1cticas para colocar ThemeSwitcher", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", children: [_jsx("li", { children: "Ub\u00EDcalo en lugares visibles como el header o el men\u00FA lateral." }), _jsx("li", { children: "Combina el ThemeSwitcher con informaci\u00F3n del tema actual para mejorar la experiencia del usuario." }), _jsx("li", { children: "Recuerda envolver tu aplicaci\u00F3n con `ThemeProvider` y aplicar los estilos globales con `useGlobalThemeStyles` cuando sea necesario." })] }) })] })] }) }) }));
|
|
10
|
-
};
|
|
11
|
-
export default ThemeSwitcherDocs;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import type { Empresa } from "./interfaces";
|
|
2
|
-
import type { PaginationInterface } from "../../interfaces";
|
|
3
|
-
/**
|
|
4
|
-
* Servicio mock para gestionar Empresas en localStorage
|
|
5
|
-
*/
|
|
6
|
-
export declare const empresaService: {
|
|
7
|
-
/**
|
|
8
|
-
* Obtiene empresas opcionalmente filtradas por nombre
|
|
9
|
-
*/
|
|
10
|
-
listar(params?: {
|
|
11
|
-
filtro?: string;
|
|
12
|
-
}): Promise<Empresa[]>;
|
|
13
|
-
/**
|
|
14
|
-
* Obtiene empresas paginadas opcionalmente filtradas por nombre
|
|
15
|
-
*/
|
|
16
|
-
listarPaginados(params?: {
|
|
17
|
-
filtroEmpresa?: string;
|
|
18
|
-
paginaEmpresa?: number;
|
|
19
|
-
limit?: number;
|
|
20
|
-
}): Promise<PaginationInterface<Empresa>>;
|
|
21
|
-
/**
|
|
22
|
-
* Busca una empresa por ID
|
|
23
|
-
*/
|
|
24
|
-
buscarPorId(id: string): Promise<Empresa>;
|
|
25
|
-
/**
|
|
26
|
-
* Agrega una nueva empresa
|
|
27
|
-
*/
|
|
28
|
-
agregar(empresa: Omit<Empresa, "id">): Promise<Empresa>;
|
|
29
|
-
/**
|
|
30
|
-
* Edita una empresa existente
|
|
31
|
-
*/
|
|
32
|
-
editar(id: number, datos: Partial<Omit<Empresa, "id">>): Promise<Empresa | null>;
|
|
33
|
-
/**
|
|
34
|
-
* Elimina una empresa por ID y todas sus relaciones con personas
|
|
35
|
-
*/
|
|
36
|
-
eliminar(empresa: Empresa): Promise<void>;
|
|
37
|
-
};
|
|
38
|
-
//# sourceMappingURL=empresaService.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"empresaService.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/empresaService.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAoB5D;;GAEG;AACH,eAAO,MAAM,cAAc;IACzB;;OAEG;oBACmB;QAAE,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;IAY9D;;OAEG;6BAC4B;QAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,GAAG,OAAO,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;IA2CzC;;OAEG;oBACmB,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAW/C;;OAEG;qBACoB,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IAe7D;;OAEG;eAEG,MAAM,SACH,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,GAClC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAW1B;;OAEG;sBACqB,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;CAYhD,CAAC"}
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
import { personaEmpresaService } from "./personaEmpresaService";
|
|
2
|
-
const STORAGE_KEY = "docMockServices_empresas";
|
|
3
|
-
/**
|
|
4
|
-
* Simula un delay de red para hacer más realista el mock
|
|
5
|
-
*/
|
|
6
|
-
const simulateNetworkDelay = (ms = 500) => {
|
|
7
|
-
return new Promise((resolve) => setTimeout(resolve, ms));
|
|
8
|
-
};
|
|
9
|
-
/**
|
|
10
|
-
* Obtiene todas las empresas del almacenamiento (función helper interna)
|
|
11
|
-
*/
|
|
12
|
-
const _obtenerTodas = () => {
|
|
13
|
-
const data = localStorage.getItem(STORAGE_KEY);
|
|
14
|
-
return data ? JSON.parse(data) : [];
|
|
15
|
-
};
|
|
16
|
-
/**
|
|
17
|
-
* Servicio mock para gestionar Empresas en localStorage
|
|
18
|
-
*/
|
|
19
|
-
export const empresaService = {
|
|
20
|
-
/**
|
|
21
|
-
* Obtiene empresas opcionalmente filtradas por nombre
|
|
22
|
-
*/
|
|
23
|
-
async listar(params) {
|
|
24
|
-
await simulateNetworkDelay();
|
|
25
|
-
const todas = _obtenerTodas();
|
|
26
|
-
if (!params?.filtro) {
|
|
27
|
-
return todas;
|
|
28
|
-
}
|
|
29
|
-
const filtroLower = params.filtro.toLowerCase();
|
|
30
|
-
return todas.filter((emp) => emp.nombre.toLowerCase().includes(filtroLower));
|
|
31
|
-
},
|
|
32
|
-
/**
|
|
33
|
-
* Obtiene empresas paginadas opcionalmente filtradas por nombre
|
|
34
|
-
*/
|
|
35
|
-
async listarPaginados(params) {
|
|
36
|
-
console.log("Lista empresas paginadas", params);
|
|
37
|
-
await simulateNetworkDelay();
|
|
38
|
-
const pagina = params?.paginaEmpresa ?? 1;
|
|
39
|
-
const limit = params?.limit ?? 20;
|
|
40
|
-
const todas = _obtenerTodas();
|
|
41
|
-
let todasFiltradas = todas;
|
|
42
|
-
if (params?.filtroEmpresa) {
|
|
43
|
-
const filtroLower = params.filtroEmpresa.toLowerCase();
|
|
44
|
-
todasFiltradas = todasFiltradas.filter((emp) => emp.nombre.toLowerCase().includes(filtroLower));
|
|
45
|
-
}
|
|
46
|
-
const total = todasFiltradas.length;
|
|
47
|
-
// Si limit es 0, devolver todos los elementos sin paginar
|
|
48
|
-
if (limit === 0) {
|
|
49
|
-
return {
|
|
50
|
-
list: todasFiltradas,
|
|
51
|
-
limit: 0,
|
|
52
|
-
page: 1,
|
|
53
|
-
pages: 1,
|
|
54
|
-
total,
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
const pages = Math.ceil(total / limit);
|
|
58
|
-
const inicio = (pagina - 1) * limit;
|
|
59
|
-
const fin = inicio + limit;
|
|
60
|
-
const list = todasFiltradas.slice(inicio, fin);
|
|
61
|
-
return {
|
|
62
|
-
list,
|
|
63
|
-
limit,
|
|
64
|
-
page: pagina,
|
|
65
|
-
pages,
|
|
66
|
-
total,
|
|
67
|
-
};
|
|
68
|
-
},
|
|
69
|
-
/**
|
|
70
|
-
* Busca una empresa por ID
|
|
71
|
-
*/
|
|
72
|
-
async buscarPorId(id) {
|
|
73
|
-
console.log("Busca empresa por id", id);
|
|
74
|
-
await simulateNetworkDelay();
|
|
75
|
-
const empresas = _obtenerTodas();
|
|
76
|
-
const empresa = empresas.find((emp) => emp.id.toString() === id.toString());
|
|
77
|
-
if (!empresa) {
|
|
78
|
-
throw new Error("Empresa no encontrada");
|
|
79
|
-
}
|
|
80
|
-
return empresa;
|
|
81
|
-
},
|
|
82
|
-
/**
|
|
83
|
-
* Agrega una nueva empresa
|
|
84
|
-
*/
|
|
85
|
-
async agregar(empresa) {
|
|
86
|
-
await simulateNetworkDelay();
|
|
87
|
-
const empresas = _obtenerTodas();
|
|
88
|
-
const nuevoId = empresas.length > 0 ? Math.max(...empresas.map((e) => e.id)) + 1 : 1;
|
|
89
|
-
// Crear nueva empresa: el id generado siempre sobrescribe cualquier id que venga
|
|
90
|
-
const nuevaEmpresa = {
|
|
91
|
-
...empresa,
|
|
92
|
-
id: nuevoId, // El id siempre se asigna después para sobrescribir cualquier id existente
|
|
93
|
-
};
|
|
94
|
-
empresas.push(nuevaEmpresa);
|
|
95
|
-
localStorage.setItem(STORAGE_KEY, JSON.stringify(empresas));
|
|
96
|
-
return nuevaEmpresa;
|
|
97
|
-
},
|
|
98
|
-
/**
|
|
99
|
-
* Edita una empresa existente
|
|
100
|
-
*/
|
|
101
|
-
async editar(id, datos) {
|
|
102
|
-
await simulateNetworkDelay();
|
|
103
|
-
const empresas = _obtenerTodas();
|
|
104
|
-
const index = empresas.findIndex((emp) => emp.id === id);
|
|
105
|
-
if (index === -1)
|
|
106
|
-
return null;
|
|
107
|
-
empresas[index] = { ...empresas[index], ...datos };
|
|
108
|
-
localStorage.setItem(STORAGE_KEY, JSON.stringify(empresas));
|
|
109
|
-
return empresas[index];
|
|
110
|
-
},
|
|
111
|
-
/**
|
|
112
|
-
* Elimina una empresa por ID y todas sus relaciones con personas
|
|
113
|
-
*/
|
|
114
|
-
async eliminar(empresa) {
|
|
115
|
-
await simulateNetworkDelay();
|
|
116
|
-
const empresas = _obtenerTodas();
|
|
117
|
-
const index = empresas.findIndex((emp) => emp.id === empresa.id);
|
|
118
|
-
if (index === -1)
|
|
119
|
-
return;
|
|
120
|
-
// Eliminar todas las relaciones de esta empresa
|
|
121
|
-
await personaEmpresaService.eliminarPorEmpresa(empresa.id);
|
|
122
|
-
empresas.splice(index, 1);
|
|
123
|
-
localStorage.setItem(STORAGE_KEY, JSON.stringify(empresas));
|
|
124
|
-
},
|
|
125
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Exportaciones del módulo de servicios mock para documentación
|
|
3
|
-
*/
|
|
4
|
-
export * from "./interfaces";
|
|
5
|
-
export * from "./empresaService";
|
|
6
|
-
export * from "./personaService";
|
|
7
|
-
export * from "./personaEmpresaService";
|
|
8
|
-
export * from "./initialData";
|
|
9
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"initialData.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/initialData.ts"],"names":[],"mappings":"AA+FA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAAa,OAAO,CAAC,IAAI,CAsD5D,CAAC"}
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import { empresaService } from "./empresaService";
|
|
2
|
-
import { personaService } from "./personaService";
|
|
3
|
-
import { personaEmpresaService } from "./personaEmpresaService";
|
|
4
|
-
import dayjs from "dayjs";
|
|
5
|
-
/**
|
|
6
|
-
* Datos iniciales de ejemplo para empresas
|
|
7
|
-
*/
|
|
8
|
-
const empresasEjemplo = [
|
|
9
|
-
{ nombre: "TechSolutions S.A." },
|
|
10
|
-
{ nombre: "Innovación Digital Ltda." },
|
|
11
|
-
{ nombre: "Global Systems Inc." },
|
|
12
|
-
{ nombre: "Nexus Technologies" },
|
|
13
|
-
{ nombre: "CloudSoft Enterprise" },
|
|
14
|
-
{ nombre: "DataDrive Solutions" },
|
|
15
|
-
{ nombre: "CyberNet Corp." },
|
|
16
|
-
{ nombre: "FutureSoft Industries" },
|
|
17
|
-
{ nombre: "Quantum Innovations" },
|
|
18
|
-
{ nombre: "SmartCode Systems" },
|
|
19
|
-
{ nombre: "Metro Consulting Group" },
|
|
20
|
-
{ nombre: "Digital Transformation Co." },
|
|
21
|
-
{ nombre: "Agile Development Ltd." },
|
|
22
|
-
{ nombre: "SecureNet Services" },
|
|
23
|
-
{ nombre: "Apex Business Solutions" },
|
|
24
|
-
{ nombre: "Vertex Software" },
|
|
25
|
-
{ nombre: "Matrix Enterprises" },
|
|
26
|
-
{ nombre: "PrimeTech Solutions" },
|
|
27
|
-
{ nombre: "Infinity Tech Corp." },
|
|
28
|
-
{ nombre: "Velocity Systems" },
|
|
29
|
-
];
|
|
30
|
-
/**
|
|
31
|
-
* Genera una fecha aleatoria entre dos años
|
|
32
|
-
*/
|
|
33
|
-
const generarFechaAleatoria = (anoInicio, anoFin) => {
|
|
34
|
-
const ano = Math.floor(Math.random() * (anoFin - anoInicio + 1)) + anoInicio;
|
|
35
|
-
const mes = Math.floor(Math.random() * 12); // 0-11
|
|
36
|
-
const diasEnMes = dayjs(`${ano}-${mes + 1}-01`).daysInMonth();
|
|
37
|
-
const dia = Math.floor(Math.random() * diasEnMes) + 1;
|
|
38
|
-
return dayjs(`${ano}-${String(mes + 1).padStart(2, "0")}-${String(dia).padStart(2, "0")}`);
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* Datos iniciales de ejemplo para personas
|
|
42
|
-
*/
|
|
43
|
-
const personasEjemplo = [
|
|
44
|
-
{ nombre: "Ana García", email: "ana.garcia@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
45
|
-
{ nombre: "Carlos Martínez", email: "carlos.martinez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
46
|
-
{ nombre: "Laura Fernández", email: "laura.fernandez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
47
|
-
{ nombre: "Juan Rodríguez", email: "juan.rodriguez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
48
|
-
{ nombre: "María López", email: "maria.lopez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
49
|
-
{ nombre: "Pedro Sánchez", email: "pedro.sanchez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
50
|
-
{ nombre: "Carmen Ruiz", email: "carmen.ruiz@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
51
|
-
{ nombre: "Diego Torres", email: "diego.torres@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
52
|
-
{ nombre: "Sofia Vargas", email: "sofia.vargas@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
53
|
-
{ nombre: "Miguel Herrera", email: "miguel.herrera@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
54
|
-
{ nombre: "Elena Jiménez", email: "elena.jimenez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
55
|
-
{ nombre: "Roberto Díaz", email: "roberto.diaz@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
56
|
-
{ nombre: "Patricia Moreno", email: "patricia.moreno@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
57
|
-
{ nombre: "Javier Muñoz", email: "javier.munoz@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
58
|
-
{ nombre: "Isabel Gutiérrez", email: "isabel.gutierrez@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
59
|
-
{ nombre: "Fernando Castro", email: "fernando.castro@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
60
|
-
{ nombre: "Lucía Ortega", email: "lucia.ortega@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
61
|
-
{ nombre: "Alejandro Medina", email: "alejandro.medina@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
62
|
-
{ nombre: "Marta Romero", email: "marta.romero@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
63
|
-
{ nombre: "Ricardo Morales", email: "ricardo.morales@email.com", fechaNacimiento: generarFechaAleatoria(1946, 2006) },
|
|
64
|
-
];
|
|
65
|
-
/**
|
|
66
|
-
* Cargos disponibles para las relaciones
|
|
67
|
-
*/
|
|
68
|
-
const cargosEjemplo = [
|
|
69
|
-
"CEO",
|
|
70
|
-
"CTO",
|
|
71
|
-
"CFO",
|
|
72
|
-
"Director de Desarrollo",
|
|
73
|
-
"Gerente de Proyecto",
|
|
74
|
-
"Desarrollador Senior",
|
|
75
|
-
"Desarrollador Junior",
|
|
76
|
-
"Analista de Sistemas",
|
|
77
|
-
"Diseñador UX/UI",
|
|
78
|
-
"Product Manager",
|
|
79
|
-
"Scrum Master",
|
|
80
|
-
"QA Engineer",
|
|
81
|
-
"DevOps Engineer",
|
|
82
|
-
"Marketing Manager",
|
|
83
|
-
"Sales Manager",
|
|
84
|
-
"HR Manager",
|
|
85
|
-
"Contador",
|
|
86
|
-
"Asistente Administrativo",
|
|
87
|
-
"Consultor",
|
|
88
|
-
"Coordinador",
|
|
89
|
-
];
|
|
90
|
-
/**
|
|
91
|
-
* Inicializa los datos de ejemplo en localStorage
|
|
92
|
-
* Crea 20 empresas, 20 personas y establece relaciones entre ellas
|
|
93
|
-
*/
|
|
94
|
-
export const inicializarDatosEjemplo = async () => {
|
|
95
|
-
// Limpiar datos existentes
|
|
96
|
-
localStorage.removeItem("docMockServices_empresas");
|
|
97
|
-
localStorage.removeItem("docMockServices_personas");
|
|
98
|
-
localStorage.removeItem("docMockServices_personaEmpresas");
|
|
99
|
-
// Crear empresas (sin await para crear todas en paralelo, luego esperar)
|
|
100
|
-
const empresasPromesas = empresasEjemplo.map((emp) => empresaService.agregar(emp));
|
|
101
|
-
const empresasCreadas = await Promise.all(empresasPromesas);
|
|
102
|
-
// Crear personas (sin await para crear todas en paralelo, luego esperar)
|
|
103
|
-
const personasPromesas = personasEjemplo.map((per) => personaService.agregar(per));
|
|
104
|
-
const personasCreadas = await Promise.all(personasPromesas);
|
|
105
|
-
// Crear relaciones (cada persona tiene entre 1 y 3 trabajos)
|
|
106
|
-
const relaciones = [];
|
|
107
|
-
personasCreadas.forEach((persona, indexPersona) => {
|
|
108
|
-
// Cada persona trabaja en al menos 1 empresa y hasta 3 empresas
|
|
109
|
-
const numTrabajos = 1 + (indexPersona % 3); // Entre 1 y 3 trabajos
|
|
110
|
-
// Seleccionar empresas aleatorias sin repetir
|
|
111
|
-
const empresasSeleccionadas = [];
|
|
112
|
-
for (let i = 0; i < numTrabajos; i++) {
|
|
113
|
-
let empresaIndex;
|
|
114
|
-
do {
|
|
115
|
-
empresaIndex = Math.floor(Math.random() * empresasCreadas.length);
|
|
116
|
-
} while (empresasSeleccionadas.includes(empresaIndex));
|
|
117
|
-
empresasSeleccionadas.push(empresaIndex);
|
|
118
|
-
}
|
|
119
|
-
// Crear relaciones
|
|
120
|
-
empresasSeleccionadas.forEach((empresaIndex) => {
|
|
121
|
-
const cargo = cargosEjemplo[Math.floor(Math.random() * cargosEjemplo.length)];
|
|
122
|
-
relaciones.push({
|
|
123
|
-
idPersona: persona.id,
|
|
124
|
-
idEmpresa: empresasCreadas[empresaIndex].id,
|
|
125
|
-
cargo,
|
|
126
|
-
});
|
|
127
|
-
});
|
|
128
|
-
});
|
|
129
|
-
// Guardar todas las relaciones (en paralelo)
|
|
130
|
-
const relacionesPromesas = relaciones.map((rel) => personaEmpresaService.agregar(rel));
|
|
131
|
-
await Promise.all(relacionesPromesas);
|
|
132
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import type { Dayjs } from "dayjs";
|
|
2
|
-
/**
|
|
3
|
-
* Interfaces para los servicios mock de documentación
|
|
4
|
-
*/
|
|
5
|
-
export interface Empresa {
|
|
6
|
-
id: number;
|
|
7
|
-
nombre: string;
|
|
8
|
-
}
|
|
9
|
-
export interface Persona {
|
|
10
|
-
id: number;
|
|
11
|
-
nombre: string;
|
|
12
|
-
email: string;
|
|
13
|
-
fechaNacimiento: Dayjs;
|
|
14
|
-
}
|
|
15
|
-
/**
|
|
16
|
-
* Persona con sus empresas relacionadas
|
|
17
|
-
*/
|
|
18
|
-
export interface PersonaConEmpresas extends Persona {
|
|
19
|
-
empresas: Empresa[];
|
|
20
|
-
}
|
|
21
|
-
export interface PersonaEmpresa {
|
|
22
|
-
idPersona: number;
|
|
23
|
-
idEmpresa: number;
|
|
24
|
-
cargo: string;
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* Relación Persona-Empresa con la información completa de la Persona
|
|
28
|
-
*/
|
|
29
|
-
export interface PersonaEmpresaConPersona extends PersonaEmpresa {
|
|
30
|
-
persona: Persona;
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Relación Persona-Empresa con la información completa de la Empresa
|
|
34
|
-
*/
|
|
35
|
-
export interface PersonaEmpresaConEmpresa extends PersonaEmpresa {
|
|
36
|
-
empresa: Empresa;
|
|
37
|
-
}
|
|
38
|
-
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/docs/docMockServices/interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEnC;;GAEG;AAEH,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,KAAK,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,OAAO;IACjD,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,cAAc;IAC9D,OAAO,EAAE,OAAO,CAAC;CAClB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|