@zauru-sdk/components 2.0.221 → 2.0.222
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/CHANGELOG.md +8 -0
- package/dist/NavBar/NavBar.d.ts +1 -1
- package/dist/NavBar/NavBar.types.d.ts +1 -0
- package/dist/esm/NavBar/NavBar.js +2 -1
- package/dist/esm/Skeletons/LoadingWindow.js +1 -1
- package/package.json +3 -3
- package/src/NavBar/NavBar.tsx +28 -0
- package/src/NavBar/NavBar.types.ts +1 -0
- package/src/Skeletons/LoadingWindow.tsx +30 -22
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.222](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.221...v2.0.222) (2025-06-04)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @zauru-sdk/components
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [2.0.221](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.220...v2.0.221) (2025-06-02)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @zauru-sdk/components
|
package/dist/NavBar/NavBar.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { NavBarProps } from "./NavBar.types.js";
|
|
2
|
-
export declare const NavBar: ({ title, loggedIn, items, selectedColor, version, }: NavBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const NavBar: ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, }: NavBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -30,7 +30,7 @@ const NavItem = ({ name, link, icon, selectedColor, childrens = [], reduxNotific
|
|
|
30
30
|
// De lo contrario, usamos el color normal (bg700)
|
|
31
31
|
className: `${isActive ? specialColor.bg900 : specialColor.bg700} container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150`, children: _jsxs(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75 relative", to: link, children: [_jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }), notificationBadge !== undefined && (_jsx("span", { className: "absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center w-5 h-5", children: notificationBadge }))] }) }) }));
|
|
32
32
|
};
|
|
33
|
-
export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
|
|
33
|
+
export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, }) => {
|
|
34
34
|
const color = COLORS[selectedColor];
|
|
35
35
|
const [NavBarOpen, setNavBarOpen] = useState(false);
|
|
36
36
|
const [currentVersion, setCurrentVersion] = useState(version);
|
|
@@ -53,6 +53,7 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
|
|
|
53
53
|
return (_jsxs(_Fragment, { children: [_jsx("ul", { className: "w-full lg:flex lg:items-center", children: renderNavItems(items
|
|
54
54
|
.filter((item) => item.loggedIn === loggedIn)
|
|
55
55
|
.filter((item) => item.hide !== true)) }), _jsx("ul", { className: "sm:flex sm:flex-col lg:flex-row ml-auto", children: loggedIn && (_jsx(OptionsDropDownButton, { color: color, options: [
|
|
56
|
+
reloadCatalogsOption && (_jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`, to: "/reload-catalogs", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsxs("svg", { className: `h-5 w-5 mr-1`, width: "24", height: "24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M20.5 8c-1.392-3.179-4.823-5-8.522-5C7.299 3 3.453 6.552 3 11.1" }), _jsx("path", { d: "M16.489 8.4h3.97A.54.54 0 0 0 21 7.86V3.9M3.5 16c1.392 3.179 4.823 5 8.522 5 4.679 0 8.525-3.552 8.978-8.1" }), _jsx("path", { d: "M7.511 15.6h-3.97a.54.54 0 0 0-.541.54v3.96" })] }), _jsx("span", { children: "Recargar cat\u00E1logos" })] }) }, "recargar-catalogos")),
|
|
56
57
|
_jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`, to: "/logout", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsx(LogoutDropDownSvgIcon, {}), _jsx("span", { children: "Cerrar sesi\u00F3n" })] }) }, "cerrar-sesion"),
|
|
57
58
|
] })) })] }));
|
|
58
59
|
}, [items, loggedIn, hiddenItemsChange]);
|
|
@@ -9,6 +9,6 @@ export const LoadingWindow = ({ loadingItems = [], description = "Por favor, esp
|
|
|
9
9
|
if (!hasMounted) {
|
|
10
10
|
return null;
|
|
11
11
|
}
|
|
12
|
-
return (
|
|
12
|
+
return (_jsxs("div", { className: "min-h-screen bg-gray-200 flex flex-col justify-center items-center", children: [_jsxs(motion.div, { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.5 }, className: "text-center flex flex-col items-center", children: [_jsx("img", { src: "/logo.png", alt: "Zauru Logo", className: "mb-8 h-20" }), _jsx("h1", { className: "text-3xl font-bold text-gray-800 mb-4", children: loadingItems.some((x) => x.loading) ? "Cargando..." : "Cargado" }), _jsx("p", { className: "text-gray-600 mb-4", children: description }), loadingItems && (_jsx("ul", { className: "text-left mb-4", children: loadingItems.map((item, index) => (_jsxs("li", { className: "flex items-center mb-2", children: [_jsx("svg", { className: `${item.loading ? "" : "hidden"} w-5 h-5 text-blue-500 mr-2 animate-spin loading-spinner`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), _jsx("svg", { className: `${item.loading ? "hidden" : ""} w-5 h-5 text-green-500 mr-2 check-mark`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), _jsx("span", { children: item.name })] }, index))) }))] }), _jsx("div", { className: "flex flex-col items-center", children: loadingItems.some((x) => x.loading) ? (_jsx(motion.div, { animate: { rotate: 360 }, transition: { duration: 2, repeat: Infinity, ease: "linear" }, className: "mt-8", children: _jsx("svg", { className: "w-12 h-12 text-blue-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx(motion.path, { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15", animate: { rotate: 360 }, transition: { duration: 2, repeat: Infinity, ease: "linear" } }) }) })) : (_jsx("span", { className: "text-green-500", children: "\u2705" })) })] }));
|
|
13
13
|
};
|
|
14
14
|
export default LoadingWindow;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zauru-sdk/components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.222",
|
|
4
4
|
"description": "Componentes reutilizables en las WebApps de Zauru.",
|
|
5
5
|
"main": "./dist/esm/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"@zauru-sdk/hooks": "^2.0.221",
|
|
40
40
|
"@zauru-sdk/icons": "^2.0.188",
|
|
41
41
|
"@zauru-sdk/types": "^2.0.221",
|
|
42
|
-
"@zauru-sdk/utils": "^2.0.
|
|
42
|
+
"@zauru-sdk/utils": "^2.0.222",
|
|
43
43
|
"browser-image-compression": "^2.0.2",
|
|
44
44
|
"framer-motion": "^11.7.0",
|
|
45
45
|
"jsonwebtoken": "^9.0.2",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"styled-components": "^5.3.5",
|
|
53
53
|
"zod": "^3.23.8"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "6d2aeab534dc2248f8cd2a355f35cfd42626f38e"
|
|
56
56
|
}
|
package/src/NavBar/NavBar.tsx
CHANGED
|
@@ -127,6 +127,7 @@ export const NavBar = ({
|
|
|
127
127
|
items,
|
|
128
128
|
selectedColor,
|
|
129
129
|
version,
|
|
130
|
+
reloadCatalogsOption,
|
|
130
131
|
}: NavBarProps) => {
|
|
131
132
|
const color: ColorInterface = COLORS[selectedColor];
|
|
132
133
|
const [NavBarOpen, setNavBarOpen] = useState(false);
|
|
@@ -185,6 +186,33 @@ export const NavBar = ({
|
|
|
185
186
|
<OptionsDropDownButton
|
|
186
187
|
color={color}
|
|
187
188
|
options={[
|
|
189
|
+
reloadCatalogsOption && (
|
|
190
|
+
<Link
|
|
191
|
+
key="recargar-catalogos"
|
|
192
|
+
className={`block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`}
|
|
193
|
+
to="/reload-catalogs"
|
|
194
|
+
>
|
|
195
|
+
<div className="mx-auto pt-2">
|
|
196
|
+
<svg
|
|
197
|
+
className={`h-5 w-5 mr-1`}
|
|
198
|
+
width="24"
|
|
199
|
+
height="24"
|
|
200
|
+
fill="none"
|
|
201
|
+
stroke="currentColor"
|
|
202
|
+
strokeWidth="1.5"
|
|
203
|
+
viewBox="0 0 24 24"
|
|
204
|
+
strokeLinecap="round"
|
|
205
|
+
strokeLinejoin="round"
|
|
206
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
207
|
+
>
|
|
208
|
+
<path d="M20.5 8c-1.392-3.179-4.823-5-8.522-5C7.299 3 3.453 6.552 3 11.1" />
|
|
209
|
+
<path d="M16.489 8.4h3.97A.54.54 0 0 0 21 7.86V3.9M3.5 16c1.392 3.179 4.823 5 8.522 5 4.679 0 8.525-3.552 8.978-8.1" />
|
|
210
|
+
<path d="M7.511 15.6h-3.97a.54.54 0 0 0-.541.54v3.96" />
|
|
211
|
+
</svg>
|
|
212
|
+
<span>Recargar catálogos</span>
|
|
213
|
+
</div>
|
|
214
|
+
</Link>
|
|
215
|
+
),
|
|
188
216
|
<Link
|
|
189
217
|
key="cerrar-sesion"
|
|
190
218
|
className={`block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-red-100 dark:hover:bg-gray-700 dark:hover:text-white`}
|
|
@@ -34,7 +34,9 @@ export const LoadingWindow: React.FC<LoadingWindowProps> = ({
|
|
|
34
34
|
className="text-center flex flex-col items-center"
|
|
35
35
|
>
|
|
36
36
|
<img src="/logo.png" alt="Zauru Logo" className="mb-8 h-20" />
|
|
37
|
-
<h1 className="text-3xl font-bold text-gray-800 mb-4">
|
|
37
|
+
<h1 className="text-3xl font-bold text-gray-800 mb-4">
|
|
38
|
+
{loadingItems.some((x) => x.loading) ? "Cargando..." : "Cargado"}
|
|
39
|
+
</h1>
|
|
38
40
|
<p className="text-gray-600 mb-4">{description}</p>
|
|
39
41
|
{loadingItems && (
|
|
40
42
|
<ul className="text-left mb-4">
|
|
@@ -75,28 +77,34 @@ export const LoadingWindow: React.FC<LoadingWindowProps> = ({
|
|
|
75
77
|
))}
|
|
76
78
|
</ul>
|
|
77
79
|
)}
|
|
78
|
-
<motion.div
|
|
79
|
-
animate={{ rotate: 360 }}
|
|
80
|
-
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
|
|
81
|
-
className="mt-8"
|
|
82
|
-
>
|
|
83
|
-
<svg
|
|
84
|
-
className="w-12 h-12 text-blue-500"
|
|
85
|
-
fill="none"
|
|
86
|
-
viewBox="0 0 24 24"
|
|
87
|
-
stroke="currentColor"
|
|
88
|
-
>
|
|
89
|
-
<motion.path
|
|
90
|
-
strokeLinecap="round"
|
|
91
|
-
strokeLinejoin="round"
|
|
92
|
-
strokeWidth={2}
|
|
93
|
-
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
94
|
-
animate={{ rotate: 360 }}
|
|
95
|
-
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
|
|
96
|
-
/>
|
|
97
|
-
</svg>
|
|
98
|
-
</motion.div>
|
|
99
80
|
</motion.div>
|
|
81
|
+
<div className="flex flex-col items-center">
|
|
82
|
+
{loadingItems.some((x) => x.loading) ? (
|
|
83
|
+
<motion.div
|
|
84
|
+
animate={{ rotate: 360 }}
|
|
85
|
+
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
|
|
86
|
+
className="mt-8"
|
|
87
|
+
>
|
|
88
|
+
<svg
|
|
89
|
+
className="w-12 h-12 text-blue-500"
|
|
90
|
+
fill="none"
|
|
91
|
+
viewBox="0 0 24 24"
|
|
92
|
+
stroke="currentColor"
|
|
93
|
+
>
|
|
94
|
+
<motion.path
|
|
95
|
+
strokeLinecap="round"
|
|
96
|
+
strokeLinejoin="round"
|
|
97
|
+
strokeWidth={2}
|
|
98
|
+
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
99
|
+
animate={{ rotate: 360 }}
|
|
100
|
+
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
|
|
101
|
+
/>
|
|
102
|
+
</svg>
|
|
103
|
+
</motion.div>
|
|
104
|
+
) : (
|
|
105
|
+
<span className="text-green-500">✅</span>
|
|
106
|
+
)}
|
|
107
|
+
</div>
|
|
100
108
|
</div>
|
|
101
109
|
);
|
|
102
110
|
};
|