flysoft-react-ui 0.4.0 → 0.5.2
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/dist/App.d.ts.map +1 -1
- package/dist/App.js +20 -4
- package/dist/components/form-controls/AutocompleteInput.d.ts +11 -3
- package/dist/components/form-controls/AutocompleteInput.d.ts.map +1 -1
- package/dist/components/form-controls/AutocompleteInput.js +410 -31
- package/dist/components/form-controls/Button.js +1 -1
- package/dist/components/form-controls/Checkbox.d.ts +14 -0
- package/dist/components/form-controls/Checkbox.d.ts.map +1 -0
- package/dist/components/form-controls/Checkbox.js +77 -0
- package/dist/components/form-controls/DateInput.d.ts +20 -4
- package/dist/components/form-controls/DateInput.d.ts.map +1 -1
- package/dist/components/form-controls/DateInput.js +425 -70
- package/dist/components/form-controls/DatePicker.d.ts +4 -3
- package/dist/components/form-controls/DatePicker.d.ts.map +1 -1
- package/dist/components/form-controls/DatePicker.js +26 -30
- package/dist/components/form-controls/Input.d.ts +10 -1
- package/dist/components/form-controls/Input.d.ts.map +1 -1
- package/dist/components/form-controls/Input.js +16 -10
- package/dist/components/form-controls/Pagination.d.ts +1 -0
- package/dist/components/form-controls/Pagination.d.ts.map +1 -1
- package/dist/components/form-controls/Pagination.js +3 -40
- package/dist/components/form-controls/RadioButtonGroup.d.ts +62 -0
- package/dist/components/form-controls/RadioButtonGroup.d.ts.map +1 -0
- package/dist/components/form-controls/RadioButtonGroup.js +220 -0
- package/dist/components/form-controls/SearchSelectInput-OLD.d.ts +68 -0
- package/dist/components/form-controls/SearchSelectInput-OLD.d.ts.map +1 -0
- package/dist/components/form-controls/SearchSelectInput-OLD.js +962 -0
- package/dist/components/form-controls/SearchSelectInput.d.ts +70 -0
- package/dist/components/form-controls/SearchSelectInput.d.ts.map +1 -0
- package/dist/components/form-controls/SearchSelectInput.js +335 -0
- package/dist/components/form-controls/index.d.ts +7 -1
- package/dist/components/form-controls/index.d.ts.map +1 -1
- package/dist/components/form-controls/index.js +3 -0
- package/dist/components/layout/AppLayout.d.ts +3 -2
- package/dist/components/layout/AppLayout.d.ts.map +1 -1
- package/dist/components/layout/AppLayout.js +104 -31
- package/dist/components/layout/Card.d.ts +4 -1
- package/dist/components/layout/Card.d.ts.map +1 -1
- package/dist/components/layout/Card.js +30 -1
- package/dist/components/layout/Collection.js +1 -1
- package/dist/components/layout/DataTable.d.ts +29 -0
- package/dist/components/layout/DataTable.d.ts.map +1 -0
- package/dist/components/layout/DataTable.js +165 -0
- package/dist/components/layout/index.d.ts +2 -0
- package/dist/components/layout/index.d.ts.map +1 -1
- package/dist/components/layout/index.js +1 -0
- package/dist/components/utils/Avatar.d.ts +49 -0
- package/dist/components/utils/Avatar.d.ts.map +1 -0
- package/dist/components/utils/Avatar.js +93 -0
- package/dist/components/utils/Badge.d.ts +3 -0
- package/dist/components/utils/Badge.d.ts.map +1 -1
- package/dist/components/utils/Badge.js +130 -26
- package/dist/components/utils/Dialog.d.ts.map +1 -1
- package/dist/components/utils/Dialog.js +5 -1
- package/dist/components/utils/DropdownMenu.d.ts +25 -0
- package/dist/components/utils/DropdownMenu.d.ts.map +1 -0
- package/dist/components/utils/DropdownMenu.js +145 -0
- package/dist/components/utils/Filter.d.ts +57 -0
- package/dist/components/utils/Filter.d.ts.map +1 -0
- package/dist/components/utils/Filter.js +580 -0
- package/dist/components/utils/FiltersDialog.d.ts +21 -0
- package/dist/components/utils/FiltersDialog.d.ts.map +1 -0
- package/dist/components/utils/FiltersDialog.js +104 -0
- package/dist/components/utils/Loader.js +1 -1
- package/dist/components/utils/RoadMap.d.ts +59 -0
- package/dist/components/utils/RoadMap.d.ts.map +1 -0
- package/dist/components/utils/RoadMap.js +138 -0
- package/dist/components/utils/Snackbar.d.ts +13 -0
- package/dist/components/utils/Snackbar.d.ts.map +1 -0
- package/dist/components/utils/Snackbar.js +121 -0
- package/dist/components/utils/SnackbarContainer.d.ts +7 -0
- package/dist/components/utils/SnackbarContainer.d.ts.map +1 -0
- package/dist/components/utils/SnackbarContainer.js +25 -0
- package/dist/components/utils/index.d.ts +12 -0
- package/dist/components/utils/index.d.ts.map +1 -1
- package/dist/components/utils/index.js +6 -0
- package/dist/contexts/AppLayoutContext.d.ts +40 -0
- package/dist/contexts/AppLayoutContext.d.ts.map +1 -0
- package/dist/contexts/AppLayoutContext.js +98 -0
- package/dist/contexts/ListCrudContext.d.ts +29 -0
- package/dist/contexts/ListCrudContext.d.ts.map +1 -0
- package/dist/contexts/ListCrudContext.js +209 -0
- package/dist/contexts/SnackbarContext.d.ts +26 -0
- package/dist/contexts/SnackbarContext.d.ts.map +1 -0
- package/dist/contexts/SnackbarContext.js +34 -0
- package/dist/contexts/index.d.ts +6 -0
- package/dist/contexts/index.d.ts.map +1 -1
- package/dist/contexts/index.js +6 -0
- package/dist/contexts/presets.js +6 -6
- package/dist/docs/AuthDocs.tsx/AuthDocsContent.js +3 -1
- package/dist/docs/AvatarDocs.d.ts +4 -0
- package/dist/docs/AvatarDocs.d.ts.map +1 -0
- package/dist/docs/AvatarDocs.js +7 -0
- package/dist/docs/BadgeDocs.d.ts.map +1 -1
- package/dist/docs/BadgeDocs.js +4 -2
- package/dist/docs/CardDocs.d.ts.map +1 -1
- package/dist/docs/CardDocs.js +7 -1
- package/dist/docs/CheckboxDocs.d.ts +4 -0
- package/dist/docs/CheckboxDocs.d.ts.map +1 -0
- package/dist/docs/CheckboxDocs.js +7 -0
- package/dist/docs/DataTableDocs.d.ts +4 -0
- package/dist/docs/DataTableDocs.d.ts.map +1 -0
- package/dist/docs/DataTableDocs.js +244 -0
- package/dist/docs/DateInputDocs.d.ts +1 -0
- package/dist/docs/DateInputDocs.d.ts.map +1 -1
- package/dist/docs/DateInputDocs.js +7 -9
- package/dist/docs/DatePickerDocs.d.ts +1 -0
- package/dist/docs/DatePickerDocs.d.ts.map +1 -1
- package/dist/docs/DatePickerDocs.js +6 -8
- package/dist/docs/DocAdmin.d.ts +4 -0
- package/dist/docs/DocAdmin.d.ts.map +1 -0
- package/dist/docs/DocAdmin.js +68 -0
- package/dist/docs/DocsMenu.d.ts.map +1 -1
- package/dist/docs/DocsMenu.js +1 -1
- package/dist/docs/DocsRouter.d.ts.map +1 -1
- package/dist/docs/DocsRouter.js +13 -1
- package/dist/docs/DropdownMenuDocs.d.ts +4 -0
- package/dist/docs/DropdownMenuDocs.d.ts.map +1 -0
- package/dist/docs/DropdownMenuDocs.js +66 -0
- package/dist/docs/ExampleFormDocs.d.ts +4 -0
- package/dist/docs/ExampleFormDocs.d.ts.map +1 -0
- package/dist/docs/ExampleFormDocs.js +148 -0
- package/dist/docs/FilterDocs.d.ts +4 -0
- package/dist/docs/FilterDocs.d.ts.map +1 -0
- package/dist/docs/FilterDocs.js +112 -0
- package/dist/docs/InputDocs.d.ts.map +1 -1
- package/dist/docs/InputDocs.js +11 -1
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.d.ts +11 -0
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.d.ts.map +1 -0
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.js +25 -0
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.d.ts +2 -0
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.d.ts.map +1 -0
- package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentPersonas.js +51 -0
- package/dist/docs/PaginationDocs.js +6 -6
- package/dist/docs/RadioButtonGroupDocs.d.ts +4 -0
- package/dist/docs/RadioButtonGroupDocs.d.ts.map +1 -0
- package/dist/docs/RadioButtonGroupDocs.js +46 -0
- package/dist/docs/RoadMapDocs.d.ts +4 -0
- package/dist/docs/RoadMapDocs.d.ts.map +1 -0
- package/dist/docs/RoadMapDocs.js +171 -0
- package/dist/docs/SearchSelectInputDocs.d.ts +4 -0
- package/dist/docs/SearchSelectInputDocs.d.ts.map +1 -0
- package/dist/docs/SearchSelectInputDocs.js +168 -0
- package/dist/docs/SnackbarDocs.d.ts +4 -0
- package/dist/docs/SnackbarDocs.d.ts.map +1 -0
- package/dist/docs/SnackbarDocs.js +50 -0
- package/dist/docs/TabsGroupDocs.d.ts.map +1 -1
- package/dist/docs/TabsGroupDocs.js +12 -1
- package/dist/docs/docMockServices/empresaService.d.ts +38 -0
- package/dist/docs/docMockServices/empresaService.d.ts.map +1 -0
- package/dist/docs/docMockServices/empresaService.js +116 -0
- package/dist/docs/docMockServices/index.d.ts +9 -0
- package/dist/docs/docMockServices/index.d.ts.map +1 -0
- package/dist/docs/docMockServices/index.js +8 -0
- package/dist/docs/docMockServices/initialData.d.ts +6 -0
- package/dist/docs/docMockServices/initialData.d.ts.map +1 -0
- package/dist/docs/docMockServices/initialData.js +132 -0
- package/dist/docs/docMockServices/interfaces.d.ts +26 -0
- package/dist/docs/docMockServices/interfaces.d.ts.map +1 -0
- package/dist/docs/docMockServices/interfaces.js +1 -0
- package/dist/docs/docMockServices/personaEmpresaService.d.ts +43 -0
- package/dist/docs/docMockServices/personaEmpresaService.d.ts.map +1 -0
- package/dist/docs/docMockServices/personaEmpresaService.js +113 -0
- package/dist/docs/docMockServices/personaService.d.ts +39 -0
- package/dist/docs/docMockServices/personaService.d.ts.map +1 -0
- package/dist/docs/docMockServices/personaService.js +180 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/useAsyncRequest.d.ts +17 -0
- package/dist/hooks/useAsyncRequest.d.ts.map +1 -0
- package/dist/hooks/useAsyncRequest.js +70 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +22 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +11 -0
- package/dist/index.js.map +1 -1
- package/package.json +5 -2
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React, { useState, useEffect } from "react";
|
|
3
|
+
import { useSearchParams } from "react-router-dom";
|
|
4
|
+
import { Button } from "../form-controls/Button";
|
|
5
|
+
import { Dialog } from "./Dialog";
|
|
6
|
+
import { Filter } from "./Filter";
|
|
7
|
+
import { Collection } from "../layout/Collection";
|
|
8
|
+
export const FiltersDialog = ({ filters }) => {
|
|
9
|
+
const [searchParams, setSearchParams] = useSearchParams();
|
|
10
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
11
|
+
const [filterValues, setFilterValues] = useState({});
|
|
12
|
+
// Inicializar filterValues con los valores actuales de la URL
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
const initialValues = {};
|
|
15
|
+
filters.forEach((filter) => {
|
|
16
|
+
const urlValue = searchParams.get(filter.paramName);
|
|
17
|
+
initialValues[filter.paramName] = urlValue || undefined;
|
|
18
|
+
});
|
|
19
|
+
setFilterValues(initialValues);
|
|
20
|
+
}, []); // Solo al montar el componente
|
|
21
|
+
// Sincronizar filterValues cuando se abre el dialog con los valores actuales de la URL
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
if (isOpen) {
|
|
24
|
+
const currentValues = {};
|
|
25
|
+
filters.forEach((filter) => {
|
|
26
|
+
const urlValue = searchParams.get(filter.paramName);
|
|
27
|
+
currentValues[filter.paramName] = urlValue || undefined;
|
|
28
|
+
});
|
|
29
|
+
setFilterValues(currentValues);
|
|
30
|
+
}
|
|
31
|
+
}, [isOpen, filters, searchParams]);
|
|
32
|
+
const handleFilterChange = (paramName, value) => {
|
|
33
|
+
setFilterValues((prev) => ({
|
|
34
|
+
...prev,
|
|
35
|
+
[paramName]: value,
|
|
36
|
+
}));
|
|
37
|
+
};
|
|
38
|
+
const handleApplyFilters = () => {
|
|
39
|
+
const newSearchParams = new URLSearchParams(searchParams);
|
|
40
|
+
// Aplicar todos los filtros a la URL
|
|
41
|
+
filters.forEach((filter) => {
|
|
42
|
+
const value = filterValues[filter.paramName];
|
|
43
|
+
if (value) {
|
|
44
|
+
newSearchParams.set(filter.paramName, value);
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
newSearchParams.delete(filter.paramName);
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
setSearchParams(newSearchParams, { replace: true });
|
|
51
|
+
setIsOpen(false);
|
|
52
|
+
};
|
|
53
|
+
const handleClose = () => {
|
|
54
|
+
setIsOpen(false);
|
|
55
|
+
};
|
|
56
|
+
const handleOpen = () => {
|
|
57
|
+
setIsOpen(true);
|
|
58
|
+
};
|
|
59
|
+
// Construir las props de Filter para cada filtro
|
|
60
|
+
const getFilterProps = (filterConfig) => {
|
|
61
|
+
const baseProps = {
|
|
62
|
+
label: filterConfig.label,
|
|
63
|
+
staticOptions: filterConfig.staticOptions,
|
|
64
|
+
inputWidth: filterConfig.inputWidth,
|
|
65
|
+
value: filterValues[filterConfig.paramName],
|
|
66
|
+
onChange: (value) => handleFilterChange(filterConfig.paramName, value),
|
|
67
|
+
};
|
|
68
|
+
switch (filterConfig.filterType) {
|
|
69
|
+
case "text":
|
|
70
|
+
return {
|
|
71
|
+
...baseProps,
|
|
72
|
+
filterType: "text",
|
|
73
|
+
};
|
|
74
|
+
case "number":
|
|
75
|
+
return {
|
|
76
|
+
...baseProps,
|
|
77
|
+
filterType: "number",
|
|
78
|
+
min: filterConfig.min,
|
|
79
|
+
max: filterConfig.max,
|
|
80
|
+
};
|
|
81
|
+
case "date":
|
|
82
|
+
return {
|
|
83
|
+
...baseProps,
|
|
84
|
+
filterType: "date",
|
|
85
|
+
};
|
|
86
|
+
case "autocomplete":
|
|
87
|
+
return {
|
|
88
|
+
...baseProps,
|
|
89
|
+
filterType: "autocomplete",
|
|
90
|
+
options: filterConfig.options || [],
|
|
91
|
+
getOptionLabel: filterConfig.getOptionLabel,
|
|
92
|
+
getOptionValue: filterConfig.getOptionValue,
|
|
93
|
+
renderOption: filterConfig.renderOption,
|
|
94
|
+
noResultsText: filterConfig.noResultsText,
|
|
95
|
+
};
|
|
96
|
+
default:
|
|
97
|
+
return {
|
|
98
|
+
...baseProps,
|
|
99
|
+
filterType: "text",
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "fa-filter", variant: "outline", size: "sm", onClick: handleOpen, "aria-label": "Abrir filtros", children: "Filtrar" }), _jsx(Dialog, { isOpen: isOpen, title: "Filtros", dialogBody: _jsx("div", { className: "space-y-4", children: _jsx(Collection, { direction: "column", gap: "1rem", children: filters.map((filter) => (_jsx(Filter, { ...getFilterProps(filter) }, filter.paramName))) }) }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: handleClose, children: "Cerrar" }), _jsx(Button, { variant: "primary", onClick: handleApplyFilters, children: "Aplicar filtros" })] }), onClose: handleClose, closeOnOverlayClick: false })] }));
|
|
104
|
+
};
|
|
@@ -34,7 +34,7 @@ export const Loader = ({ isLoading = false, text, children, keepContentWhileLoad
|
|
|
34
34
|
if (children) {
|
|
35
35
|
// Si keepContentWhileLoading es true, mostrar children con overlay
|
|
36
36
|
if (keepContentWhileLoading) {
|
|
37
|
-
return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "pointer-events-none select-none", children: children }), _jsx("div", { className: `absolute inset-0 flex items-center justify-center z-10 pointer-events-auto px-4 ${overlayClasses}`, children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] w-full", children: _jsx(ProgressBar, {}) }) })] }));
|
|
37
|
+
return (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "pointer-events-none select-none", children: children }), _jsx("div", { className: `absolute inset-0 flex items-center justify-center z-10 pointer-events-auto px-4 ${overlayClasses}`, children: _jsx("div", { className: "bg-[var(--color-bg-default)] rounded-lg p-6 shadow-lg border border-[var(--color-border-default)] w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) })] }));
|
|
38
38
|
}
|
|
39
39
|
// Si no tiene keepContentWhileLoading, ocultar children y mostrar solo loader básico
|
|
40
40
|
return (_jsx("div", { className: "flex items-center justify-center p-6 w-full", children: _jsx("div", { className: "w-full max-w-2xl", children: _jsx(ProgressBar, {}) }) }));
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface RoadMapStage {
|
|
3
|
+
/**
|
|
4
|
+
* Name of the stage
|
|
5
|
+
*/
|
|
6
|
+
name: string;
|
|
7
|
+
/**
|
|
8
|
+
* Optional description shown below the name
|
|
9
|
+
*/
|
|
10
|
+
description?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Optional FontAwesome 5 icon class (e.g., "fa-check", "fa-user")
|
|
13
|
+
*/
|
|
14
|
+
icon?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the stage is disabled (shown with 0.5 opacity)
|
|
17
|
+
*/
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Color variant for the stage circle
|
|
21
|
+
*/
|
|
22
|
+
variant?: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
|
|
23
|
+
/**
|
|
24
|
+
* Custom background color (hexadecimal, rgb, or color name)
|
|
25
|
+
* Takes precedence over variant if provided
|
|
26
|
+
*/
|
|
27
|
+
bg?: string;
|
|
28
|
+
}
|
|
29
|
+
export interface RoadMapProps {
|
|
30
|
+
/**
|
|
31
|
+
* Array of stages to display
|
|
32
|
+
*/
|
|
33
|
+
stages: RoadMapStage[];
|
|
34
|
+
/**
|
|
35
|
+
* Optional additional CSS classes
|
|
36
|
+
*/
|
|
37
|
+
className?: string;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* RoadMap component displays a series of stages like metro stations
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* // Basic usage
|
|
44
|
+
* <RoadMap stages={[
|
|
45
|
+
* { name: "Start", variant: "primary" },
|
|
46
|
+
* { name: "Middle", variant: "success" },
|
|
47
|
+
* { name: "End", variant: "info" }
|
|
48
|
+
* ]} />
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* // With icons and descriptions
|
|
52
|
+
* <RoadMap stages={[
|
|
53
|
+
* { name: "Planning", description: "Define requirements", icon: "fa-clipboard", variant: "primary" },
|
|
54
|
+
* { name: "Development", description: "Build the feature", icon: "fa-code", variant: "success" },
|
|
55
|
+
* { name: "Testing", description: "Test thoroughly", icon: "fa-check-circle", variant: "warning" }
|
|
56
|
+
* ]} />
|
|
57
|
+
*/
|
|
58
|
+
export declare const RoadMap: React.FC<RoadMapProps>;
|
|
59
|
+
//# sourceMappingURL=RoadMap.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RoadMap.d.ts","sourceRoot":"","sources":["../../../src/components/utils/RoadMap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4E1B,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9E;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgH1C,CAAC"}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Helper function to convert color names to CSS values
|
|
5
|
+
*/
|
|
6
|
+
const getColorValue = (color) => {
|
|
7
|
+
if (!color)
|
|
8
|
+
return undefined;
|
|
9
|
+
// If already a valid CSS value (hex, rgb, rgba, hsl, etc.), return it
|
|
10
|
+
if (color.startsWith("#") ||
|
|
11
|
+
color.startsWith("rgb") ||
|
|
12
|
+
color.startsWith("hsl")) {
|
|
13
|
+
return color;
|
|
14
|
+
}
|
|
15
|
+
// Map common color names
|
|
16
|
+
const colorMap = {
|
|
17
|
+
white: "#ffffff",
|
|
18
|
+
black: "#000000",
|
|
19
|
+
"gray-800": "#1f2937",
|
|
20
|
+
"gray-700": "#374151",
|
|
21
|
+
"gray-600": "#4b5563",
|
|
22
|
+
"gray-500": "#6b7280",
|
|
23
|
+
"gray-400": "#9ca3af",
|
|
24
|
+
"gray-300": "#d1d5db",
|
|
25
|
+
"gray-200": "#e5e7eb",
|
|
26
|
+
"gray-100": "#f3f4f6",
|
|
27
|
+
"gray-50": "#f9fafb",
|
|
28
|
+
};
|
|
29
|
+
return colorMap[color.toLowerCase()] || color;
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Get the CSS variable name for a variant color
|
|
33
|
+
*/
|
|
34
|
+
const getVariantColorVar = (variant) => {
|
|
35
|
+
if (!variant)
|
|
36
|
+
return "var(--color-primary)";
|
|
37
|
+
const variantMap = {
|
|
38
|
+
primary: "var(--color-primary)",
|
|
39
|
+
secondary: "var(--color-secondary)",
|
|
40
|
+
success: "var(--color-success)",
|
|
41
|
+
warning: "var(--color-warning)",
|
|
42
|
+
danger: "var(--color-danger)",
|
|
43
|
+
info: "var(--color-info)",
|
|
44
|
+
};
|
|
45
|
+
return variantMap[variant];
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Get the actual color value for a variant (for gradients)
|
|
49
|
+
* This reads the CSS variable value from the computed styles
|
|
50
|
+
*/
|
|
51
|
+
const getVariantColorValue = (variant) => {
|
|
52
|
+
if (!variant)
|
|
53
|
+
return "#007aff"; // default primary color
|
|
54
|
+
const variantColorMap = {
|
|
55
|
+
primary: "#007aff",
|
|
56
|
+
secondary: "#6b7280",
|
|
57
|
+
success: "#10b981",
|
|
58
|
+
warning: "#f59e0b",
|
|
59
|
+
danger: "#ef4444",
|
|
60
|
+
info: "#06b6d4",
|
|
61
|
+
};
|
|
62
|
+
return variantColorMap[variant];
|
|
63
|
+
};
|
|
64
|
+
/**
|
|
65
|
+
* RoadMap component displays a series of stages like metro stations
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* // Basic usage
|
|
69
|
+
* <RoadMap stages={[
|
|
70
|
+
* { name: "Start", variant: "primary" },
|
|
71
|
+
* { name: "Middle", variant: "success" },
|
|
72
|
+
* { name: "End", variant: "info" }
|
|
73
|
+
* ]} />
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* // With icons and descriptions
|
|
77
|
+
* <RoadMap stages={[
|
|
78
|
+
* { name: "Planning", description: "Define requirements", icon: "fa-clipboard", variant: "primary" },
|
|
79
|
+
* { name: "Development", description: "Build the feature", icon: "fa-code", variant: "success" },
|
|
80
|
+
* { name: "Testing", description: "Test thoroughly", icon: "fa-check-circle", variant: "warning" }
|
|
81
|
+
* ]} />
|
|
82
|
+
*/
|
|
83
|
+
export const RoadMap = ({ stages, className = "", }) => {
|
|
84
|
+
if (!stages || stages.length === 0) {
|
|
85
|
+
return null;
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Get the background color for a stage
|
|
89
|
+
*/
|
|
90
|
+
const getStageBgColor = (stage) => {
|
|
91
|
+
if (stage.bg) {
|
|
92
|
+
return getColorValue(stage.bg) || stage.bg;
|
|
93
|
+
}
|
|
94
|
+
return getVariantColorVar(stage.variant || "primary");
|
|
95
|
+
};
|
|
96
|
+
/**
|
|
97
|
+
* Get the color value for gradient calculations
|
|
98
|
+
*/
|
|
99
|
+
const getStageColorValue = (stage) => {
|
|
100
|
+
if (stage.bg) {
|
|
101
|
+
return getColorValue(stage.bg) || stage.bg;
|
|
102
|
+
}
|
|
103
|
+
return getVariantColorValue(stage.variant || "primary");
|
|
104
|
+
};
|
|
105
|
+
/**
|
|
106
|
+
* Create a gradient string for the connector line
|
|
107
|
+
* The line transitions smoothly from the source color to the destination color
|
|
108
|
+
*/
|
|
109
|
+
const getConnectorGradient = (fromStage, toStage) => {
|
|
110
|
+
const fromColor = getStageColorValue(fromStage);
|
|
111
|
+
const toColor = getStageColorValue(toStage);
|
|
112
|
+
// Create a smooth gradient that transitions from source to destination
|
|
113
|
+
return `linear-gradient(to bottom, ${fromColor}, ${toColor})`;
|
|
114
|
+
};
|
|
115
|
+
return (_jsx("div", { className: `roadmap-container ${className}`, children: stages.map((stage, index) => {
|
|
116
|
+
const isLast = index === stages.length - 1;
|
|
117
|
+
const isDisabled = stage.disabled;
|
|
118
|
+
const bgColor = getStageBgColor(stage);
|
|
119
|
+
const connectorGradient = !isLast
|
|
120
|
+
? getConnectorGradient(stage, stages[index + 1])
|
|
121
|
+
: null;
|
|
122
|
+
return (_jsxs("div", { className: "relative flex items-start gap-3", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: `
|
|
123
|
+
w-6 h-6 rounded-full
|
|
124
|
+
flex items-center justify-center
|
|
125
|
+
flex-shrink-0
|
|
126
|
+
${isDisabled ? "opacity-50" : ""}
|
|
127
|
+
`, style: {
|
|
128
|
+
backgroundColor: bgColor,
|
|
129
|
+
color: "#ffffff",
|
|
130
|
+
}, children: stage.icon ? (_jsx("i", { className: `fa ${stage.icon} text-xs` })) : null }), !isLast && (_jsx("div", { className: "w-0.5 h-4 flex-shrink-0", style: {
|
|
131
|
+
background: connectorGradient || undefined,
|
|
132
|
+
} }))] }), _jsxs("div", { className: `
|
|
133
|
+
flex-1
|
|
134
|
+
${isDisabled ? "opacity-50" : ""}
|
|
135
|
+
`, children: [_jsx("h3", { className: "text-sm font-semibold font-[var(--font-default)] mb-0.5", style: { color: "var(--color-text-primary)" }, children: stage.name }), stage.description && (_jsx("p", { className: "text-xs font-[var(--font-default)]", style: { color: "var(--color-text-secondary)" }, children: stage.description }))] })] }, index));
|
|
136
|
+
}) }));
|
|
137
|
+
};
|
|
138
|
+
RoadMap.displayName = "RoadMap";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { SnackbarVariant } from "../../contexts/SnackbarContext";
|
|
3
|
+
export interface SnackbarProps {
|
|
4
|
+
id: string;
|
|
5
|
+
message: string;
|
|
6
|
+
variant: SnackbarVariant;
|
|
7
|
+
duration?: number;
|
|
8
|
+
icon?: string;
|
|
9
|
+
iconLabel?: string;
|
|
10
|
+
onClose: (id: string) => void;
|
|
11
|
+
}
|
|
12
|
+
export declare const Snackbar: React.FC<SnackbarProps>;
|
|
13
|
+
//# sourceMappingURL=Snackbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/utils/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEtE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqM5C,CAAC"}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React, { useEffect, useState, useRef, useCallback } from "react";
|
|
3
|
+
export const Snackbar = ({ id, message, variant, duration = 3000, icon, iconLabel, onClose, }) => {
|
|
4
|
+
const [progress, setProgress] = useState(100);
|
|
5
|
+
const [isClosing, setIsClosing] = useState(false);
|
|
6
|
+
const intervalRef = useRef(null);
|
|
7
|
+
const startTimeRef = useRef(Date.now());
|
|
8
|
+
const remainingTimeRef = useRef(duration);
|
|
9
|
+
// Mapeo de variantes a colores y clases
|
|
10
|
+
const variantConfig = {
|
|
11
|
+
primary: {
|
|
12
|
+
bg: "bg-[var(--color-primary-light)]",
|
|
13
|
+
border: "border-[var(--color-primary)]",
|
|
14
|
+
text: "text-gray-800",
|
|
15
|
+
progressColor: "var(--color-primary)",
|
|
16
|
+
},
|
|
17
|
+
secondary: {
|
|
18
|
+
bg: "bg-[var(--color-secondary-light)]",
|
|
19
|
+
border: "border-[var(--color-secondary)]",
|
|
20
|
+
text: "text-gray-800",
|
|
21
|
+
progressColor: "var(--color-secondary)",
|
|
22
|
+
},
|
|
23
|
+
success: {
|
|
24
|
+
bg: "bg-[var(--color-success-light)]",
|
|
25
|
+
border: "border-[var(--color-success)]",
|
|
26
|
+
text: "text-gray-800",
|
|
27
|
+
progressColor: "var(--color-success)",
|
|
28
|
+
},
|
|
29
|
+
warning: {
|
|
30
|
+
bg: "bg-[var(--color-warning-light)]",
|
|
31
|
+
border: "border-[var(--color-warning)]",
|
|
32
|
+
text: "text-gray-800",
|
|
33
|
+
progressColor: "var(--color-warning)",
|
|
34
|
+
},
|
|
35
|
+
danger: {
|
|
36
|
+
bg: "bg-[var(--color-danger-light)]",
|
|
37
|
+
border: "border-[var(--color-danger)]",
|
|
38
|
+
text: "text-gray-800",
|
|
39
|
+
progressColor: "var(--color-danger)",
|
|
40
|
+
},
|
|
41
|
+
info: {
|
|
42
|
+
bg: "bg-[var(--color-info-light)]",
|
|
43
|
+
border: "border-[var(--color-info)]",
|
|
44
|
+
text: "text-gray-800",
|
|
45
|
+
progressColor: "var(--color-info)",
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
const config = variantConfig[variant];
|
|
49
|
+
// Función para cerrar el snackbar
|
|
50
|
+
const handleClose = useCallback(() => {
|
|
51
|
+
setIsClosing(true);
|
|
52
|
+
// Esperar a que termine la animación antes de remover
|
|
53
|
+
setTimeout(() => {
|
|
54
|
+
onClose(id);
|
|
55
|
+
}, 300); // Duración de la animación de salida
|
|
56
|
+
}, [id, onClose]);
|
|
57
|
+
// Efecto para la barra de progreso
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
if (duration <= 0) {
|
|
60
|
+
// Si duration es 0 o negativo, no se cierra automáticamente
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const updateProgress = () => {
|
|
64
|
+
const elapsed = Date.now() - startTimeRef.current;
|
|
65
|
+
const newProgress = Math.max(0, 100 - (elapsed / duration) * 100);
|
|
66
|
+
setProgress(newProgress);
|
|
67
|
+
if (newProgress <= 0) {
|
|
68
|
+
handleClose();
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
// Actualizar cada 50ms para una animación suave
|
|
72
|
+
intervalRef.current = setInterval(updateProgress, 50);
|
|
73
|
+
return () => {
|
|
74
|
+
if (intervalRef.current) {
|
|
75
|
+
clearInterval(intervalRef.current);
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
}, [duration, handleClose]);
|
|
79
|
+
// Pausar el progreso cuando el mouse está sobre el snackbar
|
|
80
|
+
const handleMouseEnter = () => {
|
|
81
|
+
if (intervalRef.current) {
|
|
82
|
+
clearInterval(intervalRef.current);
|
|
83
|
+
intervalRef.current = null;
|
|
84
|
+
}
|
|
85
|
+
const elapsed = Date.now() - startTimeRef.current;
|
|
86
|
+
remainingTimeRef.current = duration - elapsed;
|
|
87
|
+
};
|
|
88
|
+
// Reanudar el progreso cuando el mouse sale del snackbar
|
|
89
|
+
const handleMouseLeave = () => {
|
|
90
|
+
if (remainingTimeRef.current > 0) {
|
|
91
|
+
startTimeRef.current = Date.now();
|
|
92
|
+
const updateProgress = () => {
|
|
93
|
+
const elapsed = Date.now() - startTimeRef.current;
|
|
94
|
+
const newProgress = Math.max(0, ((remainingTimeRef.current - elapsed) / duration) * 100);
|
|
95
|
+
setProgress(newProgress);
|
|
96
|
+
if (newProgress <= 0) {
|
|
97
|
+
handleClose();
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
intervalRef.current = setInterval(updateProgress, 50);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
// Íconos por defecto según la variante
|
|
104
|
+
const defaultIcons = {
|
|
105
|
+
primary: "fa-info-circle",
|
|
106
|
+
secondary: "fa-info-circle",
|
|
107
|
+
success: "fa-check-circle",
|
|
108
|
+
warning: "fa-exclamation-triangle",
|
|
109
|
+
danger: "fa-times-circle",
|
|
110
|
+
info: "fa-info-circle",
|
|
111
|
+
};
|
|
112
|
+
const displayIcon = icon || defaultIcons[variant];
|
|
113
|
+
return (_jsx("div", { className: `
|
|
114
|
+
relative w-[18rem] bg-white rounded-md shadow-lg border border-gray-200
|
|
115
|
+
overflow-hidden transition-all duration-300 ease-in-out
|
|
116
|
+
${isClosing ? "opacity-0 translate-x-full" : "opacity-100 translate-x-0"}
|
|
117
|
+
`, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "alert", "aria-live": "polite", children: _jsxs("div", { className: `${config.bg} ${config.text} p-4 flex items-start gap-3 relative`, children: [duration > 0 && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[3px] overflow-hidden", children: _jsx("div", { className: "h-full transition-all duration-50 ease-linear", style: {
|
|
118
|
+
width: `${progress}%`,
|
|
119
|
+
backgroundColor: "#00000050",
|
|
120
|
+
} }) })), displayIcon && (_jsx("div", { className: "flex-shrink-0 -mt-0.5", children: _jsx("i", { className: `fa ${displayIcon} text-base`, "aria-hidden": !iconLabel, "aria-label": iconLabel }) })), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("p", { className: "text-sm font-medium break-words max-w-full", children: message }) }), _jsx("button", { onClick: handleClose, className: "flex-shrink-0 ml-2 text-gray-600 hover:text-gray-800 transition-colors cursor-pointer", "aria-label": "Cerrar notificaci\u00F3n", type: "button", children: _jsx("i", { className: "fa fa-times text-sm" }) })] }) }));
|
|
121
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface SnackbarContainerProps {
|
|
3
|
+
position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
|
|
4
|
+
maxSnackbars?: number;
|
|
5
|
+
}
|
|
6
|
+
export declare const SnackbarContainer: React.FC<SnackbarContainerProps>;
|
|
7
|
+
//# sourceMappingURL=SnackbarContainer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SnackbarContainer.d.ts","sourceRoot":"","sources":["../../../src/components/utils/SnackbarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,YAAY,GAAG,eAAe,CAAC;IACtG,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgD9D,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { useSnackbar } from "../../contexts/SnackbarContext";
|
|
4
|
+
import { Snackbar } from "./Snackbar";
|
|
5
|
+
export const SnackbarContainer = ({ position = "top-right", maxSnackbars = 5, }) => {
|
|
6
|
+
const { snackbars, removeSnackbar } = useSnackbar();
|
|
7
|
+
// Limitar el número de snackbars visibles
|
|
8
|
+
const visibleSnackbars = snackbars.slice(-maxSnackbars);
|
|
9
|
+
// Clases de posición
|
|
10
|
+
const positionClasses = {
|
|
11
|
+
"top-right": "top-4 right-4",
|
|
12
|
+
"top-left": "top-4 left-4",
|
|
13
|
+
"bottom-right": "bottom-4 right-4",
|
|
14
|
+
"bottom-left": "bottom-4 left-4",
|
|
15
|
+
"top-center": "top-4 left-1/2 -translate-x-1/2",
|
|
16
|
+
"bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
|
|
17
|
+
};
|
|
18
|
+
if (snackbars.length === 0) {
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
return (_jsx("div", { className: `
|
|
22
|
+
fixed z-50 pointer-events-none
|
|
23
|
+
${positionClasses[position]}
|
|
24
|
+
`, "aria-live": "polite", "aria-atomic": "true", children: _jsx("div", { className: "flex flex-col gap-3 pointer-events-auto", children: visibleSnackbars.map((snackbar) => (_jsx(Snackbar, { id: snackbar.id, message: snackbar.message, variant: snackbar.variant, duration: snackbar.duration, icon: snackbar.icon, iconLabel: snackbar.iconLabel, onClose: removeSnackbar }, snackbar.id))) }) }));
|
|
25
|
+
};
|
|
@@ -1,7 +1,19 @@
|
|
|
1
1
|
export { Badge } from "./Badge";
|
|
2
2
|
export type { BadgeProps } from "./Badge";
|
|
3
|
+
export { Avatar } from "./Avatar";
|
|
4
|
+
export type { AvatarProps } from "./Avatar";
|
|
5
|
+
export { RoadMap } from "./RoadMap";
|
|
6
|
+
export type { RoadMapProps, RoadMapStage } from "./RoadMap";
|
|
3
7
|
export { Dialog } from "./Dialog";
|
|
4
8
|
export type { DialogProps } from "./Dialog";
|
|
5
9
|
export { Loader } from "./Loader";
|
|
6
10
|
export type { LoaderProps } from "./Loader";
|
|
11
|
+
export { Filter } from "./Filter";
|
|
12
|
+
export type { FilterProps } from "./Filter";
|
|
13
|
+
export { FiltersDialog } from "./FiltersDialog";
|
|
14
|
+
export type { FiltersDialogProps, FilterConfig } from "./FiltersDialog";
|
|
15
|
+
export { Snackbar } from "./Snackbar";
|
|
16
|
+
export type { SnackbarProps } from "./Snackbar";
|
|
17
|
+
export { SnackbarContainer } from "./SnackbarContainer";
|
|
18
|
+
export type { SnackbarContainerProps } from "./SnackbarContainer";
|
|
7
19
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
export { Badge } from "./Badge";
|
|
2
|
+
export { Avatar } from "./Avatar";
|
|
3
|
+
export { RoadMap } from "./RoadMap";
|
|
2
4
|
export { Dialog } from "./Dialog";
|
|
3
5
|
export { Loader } from "./Loader";
|
|
6
|
+
export { Filter } from "./Filter";
|
|
7
|
+
export { FiltersDialog } from "./FiltersDialog";
|
|
8
|
+
export { Snackbar } from "./Snackbar";
|
|
9
|
+
export { SnackbarContainer } from "./SnackbarContainer";
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React, { type ReactNode, type Dispatch, type SetStateAction } from "react";
|
|
2
|
+
import type { Theme, ThemeContextType } from "./types";
|
|
3
|
+
export interface NavbarInterface {
|
|
4
|
+
navBarLeftNode?: string | ReactNode;
|
|
5
|
+
navBarRightNode?: string | ReactNode;
|
|
6
|
+
fullWidthNavbar: boolean;
|
|
7
|
+
height?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export interface LeftDrawerInterface {
|
|
11
|
+
headerNode?: ReactNode;
|
|
12
|
+
contentNode?: ReactNode;
|
|
13
|
+
footerNode?: ReactNode;
|
|
14
|
+
className?: string;
|
|
15
|
+
width?: string;
|
|
16
|
+
}
|
|
17
|
+
export interface AppLayoutContextType extends ThemeContextType {
|
|
18
|
+
navbar: NavbarInterface | undefined;
|
|
19
|
+
leftDrawer: LeftDrawerInterface | undefined;
|
|
20
|
+
className: string;
|
|
21
|
+
setNavbar: Dispatch<SetStateAction<NavbarInterface | undefined>>;
|
|
22
|
+
setLeftDrawer: Dispatch<SetStateAction<LeftDrawerInterface | undefined>>;
|
|
23
|
+
setClassName: (className: string) => void;
|
|
24
|
+
setNavBarLeftNode: (node: string | ReactNode | undefined) => void;
|
|
25
|
+
setNavbarRightNode: (node: string | ReactNode | undefined) => void;
|
|
26
|
+
}
|
|
27
|
+
interface AppLayoutProviderProps {
|
|
28
|
+
children: ReactNode;
|
|
29
|
+
initialTheme?: string | Theme;
|
|
30
|
+
storageKey?: string;
|
|
31
|
+
forceInitialTheme?: boolean;
|
|
32
|
+
initialNavbar?: NavbarInterface;
|
|
33
|
+
initialLeftDrawer?: LeftDrawerInterface;
|
|
34
|
+
className?: string;
|
|
35
|
+
}
|
|
36
|
+
export declare const AppLayoutProvider: React.FC<AppLayoutProviderProps>;
|
|
37
|
+
export declare const useAppLayout: () => AppLayoutContextType;
|
|
38
|
+
export declare const useAppLayoutContext: () => boolean;
|
|
39
|
+
export {};
|
|
40
|
+
//# sourceMappingURL=AppLayoutContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppLayoutContext.d.ts","sourceRoot":"","sources":["../../src/contexts/AppLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EAEd,KAAK,QAAQ,EACb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKvD,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAE5D,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC;IACpC,UAAU,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAGlB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC;IACjE,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAC;IACzE,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClE,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;CACpE;AAMD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,iBAAiB,CAAC,EAAE,mBAAmB,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyHD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2B9D,CAAC;AAIF,eAAO,MAAM,YAAY,QAAO,oBAM/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,eAG/B,CAAC"}
|