@zauru-sdk/components 2.0.53 → 2.0.54
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
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.54](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.53...v2.0.54) (2024-11-12)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @zauru-sdk/components
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [2.0.53](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.52...v2.0.53) (2024-11-08)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @zauru-sdk/components
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
export const ButtonSectionContainer = (props) => {
|
|
3
|
-
const { children, className, whitBg =
|
|
3
|
+
const { children, className, whitBg = false } = props;
|
|
4
4
|
return (_jsx("div", { className: `${whitBg ? "bg-gray-50" : ""} px-4 py-3 text-right sm:px-6 ${className}`, children: children }));
|
|
5
5
|
};
|
|
@@ -3,9 +3,9 @@ import React, { useState, useEffect } from "react";
|
|
|
3
3
|
import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonSvgIcon, } from "@zauru-sdk/icons";
|
|
4
4
|
import { COLORS } from "./NavBar.utils.js";
|
|
5
5
|
import { Link, useNavigate } from "@remix-run/react";
|
|
6
|
-
const OptionsDropDownButton = ({ color, options, name
|
|
6
|
+
const OptionsDropDownButton = ({ color, options, name }) => {
|
|
7
7
|
const [showOptionsMenu, setShowOptionsMenu] = useState(true);
|
|
8
|
-
return (
|
|
8
|
+
return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_jsxs("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _jsx("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option, index) => (_jsx(React.Fragment, { children: option }, index))) })] }) }) }));
|
|
9
9
|
};
|
|
10
10
|
const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => (_jsx("li", { className: "nav-item", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: color, specialColor: specialColor, options: childrens.map((x, index) => (_jsx(Link, { to: x.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`, children: x.name }, index))) })) : (_jsx("div", { className: `${specialColor ? specialColor.bg700 : color.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: _jsx(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }) }) })) }));
|
|
11
11
|
export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
|
|
@@ -45,5 +45,5 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, }) => {
|
|
|
45
45
|
_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", prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [_jsx(LogoutDropDownSvgIcon, {}), _jsx("span", { children: "Cerrar sesi\u00F3n" })] }) }),
|
|
46
46
|
_jsx("button", { className: `block w-full text-left px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white`, onClick: toggleDarkMode, children: _jsxs("div", { className: "mx-auto pt-2", children: [isDarkMode ? "🌞" : "🌙", _jsx("span", { children: isDarkMode ? "Modo Claro" : "Modo Oscuro" })] }) }),
|
|
47
47
|
] })) })] }));
|
|
48
|
-
return (_jsx("nav", { className: `py-3 ${color.bg600}
|
|
48
|
+
return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between items-center w-full lg:w-auto", children: [_jsx(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), version !== currentVersion && (_jsx("button", { className: `ml-2 px-2 py-1 text-xs text-white ${color.bg700} rounded-full hover:${color.bg900} transition-colors duration-200`, onClick: refreshPage, children: "\uD83D\uDD04 Actualizar versi\u00F3n" })), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { open: NavBarOpen }) })] }), _jsx("div", { className: `lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${color.bg700} dark:bg-gray-900 shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out overflow-y-auto`, children: _jsx("div", { className: "p-4", children: options }) }), _jsx("div", { className: "hidden lg:flex lg:items-center w-full lg:w-auto", children: options })] }) }));
|
|
49
49
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zauru-sdk/components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.54",
|
|
4
4
|
"description": "Componentes reutilizables en las WebApps de Zauru.",
|
|
5
5
|
"main": "./dist/esm/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@reduxjs/toolkit": "^2.2.1",
|
|
35
35
|
"@remix-run/react": "^2.8.1",
|
|
36
36
|
"@zauru-sdk/common": "^2.0.51",
|
|
37
|
-
"@zauru-sdk/hooks": "^2.0.
|
|
37
|
+
"@zauru-sdk/hooks": "^2.0.54",
|
|
38
38
|
"@zauru-sdk/icons": "^2.0.0",
|
|
39
39
|
"@zauru-sdk/types": "^2.0.51",
|
|
40
40
|
"@zauru-sdk/utils": "^2.0.53",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"styled-components": "^5.3.5",
|
|
50
50
|
"zod": "^3.23.8"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "a3ae870a638640d5f86c30fe5b3cf0d58f2f44d3"
|
|
53
53
|
}
|
package/src/NavBar/NavBar.tsx
CHANGED
|
@@ -15,35 +15,30 @@ import type {
|
|
|
15
15
|
} from "./NavBar.types.js";
|
|
16
16
|
import { Link, useNavigate } from "@remix-run/react";
|
|
17
17
|
|
|
18
|
-
const OptionsDropDownButton = ({
|
|
19
|
-
color,
|
|
20
|
-
options,
|
|
21
|
-
name,
|
|
22
|
-
specialColor,
|
|
23
|
-
}: EntityProps) => {
|
|
18
|
+
const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
|
|
24
19
|
const [showOptionsMenu, setShowOptionsMenu] = useState(true);
|
|
25
20
|
|
|
26
21
|
return (
|
|
27
|
-
<div
|
|
28
|
-
className=
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
22
|
+
<div className="nav-item ml-auto">
|
|
23
|
+
<div className="flex justify-center">
|
|
24
|
+
<div className="relative inline-block">
|
|
25
|
+
<button
|
|
26
|
+
onClick={() => setShowOptionsMenu(!showOptionsMenu)}
|
|
27
|
+
className={`relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`}
|
|
28
|
+
>
|
|
29
|
+
{name ?? <OpcionButtonSvgIcon />}
|
|
30
|
+
<DropDownArrowSvgIcon />
|
|
31
|
+
</button>
|
|
32
|
+
<div
|
|
33
|
+
className="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800"
|
|
34
|
+
hidden={showOptionsMenu}
|
|
35
|
+
onMouseLeave={() => setShowOptionsMenu(true)}
|
|
36
|
+
>
|
|
37
|
+
{options.map((option, index) => (
|
|
38
|
+
<React.Fragment key={index}>{option}</React.Fragment>
|
|
39
|
+
))}
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
47
42
|
</div>
|
|
48
43
|
</div>
|
|
49
44
|
);
|
|
@@ -189,7 +184,7 @@ export const NavBar = ({
|
|
|
189
184
|
);
|
|
190
185
|
|
|
191
186
|
return (
|
|
192
|
-
<nav className={`py-3 ${color.bg600}
|
|
187
|
+
<nav className={`py-3 ${color.bg600}`}>
|
|
193
188
|
<div className="flex items-center justify-between ml-5 mr-5">
|
|
194
189
|
<div className="flex justify-between items-center w-full lg:w-auto">
|
|
195
190
|
<Link
|