anima-ds-nucleus 1.0.15 → 1.0.17

package/src/components/Layout/Header/HeaderPoint.jsx

@@ -4,6 +4,30 @@ import { Avatar } from '../../Atoms/Avatar/Avatar';
 import { Typography } from '../../Atoms/Typography/Typography';
 import { SidebarPointMobile } from '../Sidebar/SidebarPoint';
 
+// Constantes de diseño reutilizables
+const HEADER_HEIGHT = '80px';
+const SEARCH_INPUT_HEIGHT = '40px';
+const SEARCH_ICON_SIZE = '40px';
+const NOTIFICATION_BADGE_COLOR = '#6D3856';
+const TEXT_COLOR_GRAY_700 = '#374151';
+const BORDER_COLOR_GRAY_400 = '#9ca3af';
+const FOCUS_BORDER_COLOR = '#3b82f6';
+
+// Constantes de tipografía
+const FONT_FAMILY_IBM_PLEX = 'IBM Plex Sans';
+const FONT_WEIGHT_REGULAR = 400;
+const FONT_WEIGHT_SEMIBOLD = 600;
+const FONT_SIZE_BASE = '14px';
+const LINE_HEIGHT_BASE = '20px';
+
+// Constantes de breakpoints
+const BREAKPOINT_MOBILE_MAX = '480px';
+const BREAKPOINT_DESKTOP_MIN = '481px';
+const BREAKPOINT_TABLET_MAX = '700px';
+
+// Constantes de valores por defecto
+const DEFAULT_MOBILE_BACKGROUND = 'transparent';
+
 export const HeaderPoint = ({
   searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
   userName,
@@ -18,6 +42,7 @@ export const HeaderPoint = ({
   sidebarItemBadges,
   sidebarCompanyName,
   sidebarCompanyLogo,
+  mobileBackgroundColor = DEFAULT_MOBILE_BACKGROUND,
   className = '',
   ...props
 }) => {
@@ -39,34 +64,91 @@ export const HeaderPoint = ({
     }
   };
 
+  const handleSidebarItemClick = (itemId) => {
+    if (onSidebarItemClick) {
+      onSidebarItemClick(itemId);
+    }
+    setIsSidebarOpen(false);
+  };
+
+  const handleCloseSidebar = () => {
+    setIsSidebarOpen(false);
+  };
+
+  const formatNotificationCount = (count) => {
+    return count > 9 ? '9+' : count;
+  };
+
   return (
-    <header
-      className={`bg-white header-point-mobile ${className}`}
-      style={{
-        ...(props.style || {}),
-      }}
-      {...props}
-    >
+    <>
       <style>{`
+        .header-point-container {
+          height: ${HEADER_HEIGHT};
+        }
         .header-search-input {
-          border-color: #9ca3af;
+          border-color: ${BORDER_COLOR_GRAY_400};
+          height: ${SEARCH_INPUT_HEIGHT};
+          color: ${TEXT_COLOR_GRAY_700};
+          font-family: ${FONT_FAMILY_IBM_PLEX};
+          font-weight: ${FONT_WEIGHT_REGULAR};
+          font-style: italic;
+          font-size: ${FONT_SIZE_BASE};
+          line-height: ${LINE_HEIGHT_BASE};
+          letter-spacing: 0px;
         }
         .header-search-input::placeholder {
-          color: #9ca3af !important;
+          color: ${BORDER_COLOR_GRAY_400} !important;
           opacity: 1 !important;
         }
         .header-search-icon-container {
-          border-color: #9ca3af;
+          border-color: ${BORDER_COLOR_GRAY_400};
+          width: ${SEARCH_ICON_SIZE};
+          height: ${SEARCH_ICON_SIZE};
         }
         .header-search-form:focus-within .header-search-input {
-          border-color: #3b82f6 !important;
-          box-shadow: 0 0 0 1px #3b82f6;
+          border-color: ${FOCUS_BORDER_COLOR} !important;
+          box-shadow: 0 0 0 1px ${FOCUS_BORDER_COLOR};
         }
         .header-search-form:focus-within .header-search-icon-container {
-          border-color: #3b82f6 !important;
-          box-shadow: 0 0 0 1px #3b82f6;
+          border-color: ${FOCUS_BORDER_COLOR} !important;
+          box-shadow: 0 0 0 1px ${FOCUS_BORDER_COLOR};
+        }
+        .header-notification-badge {
+          background-color: ${NOTIFICATION_BADGE_COLOR};
+          border-radius: 12px;
+        }
+        .header-desktop-layout {
+          height: ${HEADER_HEIGHT};
+        }
+        .header-search-wrapper {
+          flex: 1 1 0%;
+          min-width: 0;
+        }
+        .header-actions-wrapper {
+          flex-shrink: 0;
+        }
+        /* Estilos para rango intermedio (481px - 700px) */
+        @media (min-width: ${BREAKPOINT_DESKTOP_MIN}) and (max-width: ${BREAKPOINT_TABLET_MAX}) {
+          .header-desktop-layout {
+            gap: 0.5rem;
+            padding-left: 0.25rem;
+            padding-right: 0.25rem;
+          }
+          .header-actions-wrapper {
+            gap: 0.5rem;
+            flex-shrink: 0;
+          }
+          .header-actions-wrapper button {
+            padding: 0.375rem;
+          }
+          .header-user-name {
+            display: none !important;
+          }
+          .header-user-chevron {
+            display: none !important;
+          }
         }
-        @media (max-width: 768px) {
+        @media (max-width: ${BREAKPOINT_MOBILE_MAX}) {
           header.header-point-mobile,
           .header-point-mobile,
           header.bg-white.header-point-mobile {
@@ -128,10 +210,10 @@ export const HeaderPoint = ({
             right: 0 !important;
             width: 100% !important;
             height: calc(64px + 12px + 20px) !important;
-            background-color: var(--color-main) !important;
-            background: var(--color-main) !important;
+            background-color: ${mobileBackgroundColor} !important;
+            background: ${mobileBackgroundColor} !important;
             z-index: 0 !important;
-            border-bottom: 1px solid var(--color-main-800) !important;
+            border-bottom: ${mobileBackgroundColor !== DEFAULT_MOBILE_BACKGROUND ? '1px solid var(--color-main-800)' : 'none'} !important;
             pointer-events: none !important;
             display: block !important;
             visibility: visible !important;
@@ -158,6 +240,7 @@ export const HeaderPoint = ({
             font-size: 12px !important;
             padding-left: 8px !important;
             padding-right: 8px !important;
+            height: 44px !important;
           }
           .header-mobile-layout .header-search-icon-container {
             width: 44px !important;
@@ -172,8 +255,19 @@ export const HeaderPoint = ({
           .header-mobile-point-text {
             color: var(--color-neutrals-white) !important;
           }
+          /* Cambiar color de iconos cuando los botones tienen hover/active/focus */
+          .header-mobile-menu-button:hover .header-mobile-menu-icon,
+          .header-mobile-menu-button:active .header-mobile-menu-icon,
+          .header-mobile-menu-button:focus .header-mobile-menu-icon {
+            color: ${TEXT_COLOR_GRAY_700} !important;
+          }
+          .header-mobile-notification-button:hover .header-mobile-notification-icon,
+          .header-mobile-notification-button:active .header-mobile-notification-icon,
+          .header-mobile-notification-button:focus .header-mobile-notification-icon {
+            color: ${TEXT_COLOR_GRAY_700} !important;
+          }
         }
-        @media (min-width: 769px) {
+        @media (min-width: ${BREAKPOINT_DESKTOP_MIN}) {
           .header-mobile-layout {
             display: none;
           }
@@ -183,275 +277,181 @@ export const HeaderPoint = ({
         }
       `}</style>
       
-      <div className="w-full" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
-        {/* Layout Desktop (más de 768px) */}
-        <div className="header-desktop-layout flex items-center justify-between h-16">
-          {/* Barra de búsqueda con icono a la derecha */}
-          <div className="flex-1 mr-2 md:mr-4" style={{ maxWidth: 'none', minWidth: '0' }}>
-            <form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">
-              {/* Input de búsqueda */}
-              <input
-                type="text"
-                value={searchValue}
-                onChange={handleSearchChange}
-                placeholder={searchPlaceholder}
-                className="header-search-input flex-1 pl-2 md:pl-4 pr-2 md:pr-4 py-2 md:py-2.5 bg-white border border-gray-400 rounded-l-lg 
-                         focus:outline-none text-sm md:text-base"
-                style={{ 
-                  height: '40px', 
-                  borderRight: 'none', 
-                  borderTopRightRadius: '0', 
-                  borderBottomRightRadius: '0',
-                  color: '#374151',
-                  fontFamily: 'IBM Plex Sans',
-                  fontWeight: 400,
-                  fontStyle: 'italic',
-                  fontSize: '14px',
-                  lineHeight: '20px',
-                  letterSpacing: '0px'
-                }}
-              />
-              
-              {/* Recuadro con icono de buscar a la derecha */}
-              <div 
-                className="header-search-icon-container flex items-center justify-center border border-gray-400 rounded-r-lg bg-white"
-                style={{
-                  width: '40px',
-                  height: '40px',
-                  borderTopLeftRadius: '0',
-                  borderBottomLeftRadius: '0'
-                }}
-              >
-                <Icon 
-                  name="MagnifyingGlassIcon" 
-                  variant="24-outline" 
-                  size={20} 
-                  className="color-gray-600" 
-                />
-              </div>
-            </form>
-          </div>
-
-          {/* Notificaciones y Perfil */}
-          <div className="flex items-center space-x-3 md:space-x-6 flex-shrink-0" style={{ marginLeft: 'auto', paddingRight: '0px' }}>
-            {/* Icono de notificaciones */}
-            {notificationCount !== undefined && (
-              <button
-                onClick={onNotificationClick}
-                className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                aria-label="Notificaciones"
-              >
-                <Icon 
-                  name="BellIcon" 
-                  variant="24-outline" 
-                  size={24} 
-                  className="color-gray-600" 
+      <header
+        className={`bg-white header-point-mobile rounded-12 header-point-container ${className}`}
+        {...props}
+      >
+        <div className="w-full px-1">
+          {/* Layout Desktop (más de 480px) */}
+          <div className="header-desktop-layout flex items-center justify-between gap-2 md:gap-4">
+            {/* Barra de búsqueda con icono a la derecha */}
+            <div className="header-search-wrapper">
+              <form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">
+                <input
+                  type="text"
+                  value={searchValue}
+                  onChange={handleSearchChange}
+                  placeholder={searchPlaceholder}
+                  className="header-search-input flex-1 pl-2 md:pl-4 pr-2 md:pr-4 py-2 md:py-2.5 bg-white border border-gray-400 rounded-l-lg focus:outline-none text-sm md:text-base border-r-0 rounded-r-none"
                 />
-                {notificationCount > 0 && (
-                  <span
-                    className="absolute -top-1 -right-1 px-1.5 py-0.5 min-w-[20px] h-5 
-                             text-white rounded-full flex items-center justify-center
-                             text-body-sm font-medium"
-                    style={{ 
-                      backgroundColor: '#6D3856',
-                      borderRadius: '12px'
-                    }}
-                  >
-                    {notificationCount > 9 ? '9+' : notificationCount}
-                  </span>
-                )}
-              </button>
-            )}
-
-            {/* Perfil de usuario */}
-            {userName && (
-              <button
-                onClick={onUserClick}
-                className="flex items-center space-x-3 hover:bg-gray-50 
-                         rounded-lg px-2 py-1.5 transition-colors"
-                aria-label="Perfil de usuario"
-              >
-                <Avatar
-                  src={userAvatar}
-                  name={userName}
-                  size="medium"
-                  variant="circle"
-                />
-                <Typography
-                  variant="body-lg"
-                  className="color-gray-700 hidden md:block"
-                  style={{
-                    fontFamily: 'IBM Plex Sans',
-                    fontWeight: 400,
-                    fontStyle: 'normal',
-                    fontSize: '16px',
-                    lineHeight: '24px',
-                    letterSpacing: '0%',
-                    verticalAlign: 'middle'
-                  }}
-                >
-                  {userName}
-                </Typography>
-                <Icon
-                  name="ChevronDownIcon"
-                  variant="24-outline"
-                  size={20}
-                  className="color-gray-500"
-                />
-              </button>
-            )}
-          </div>
-        </div>
-
-        {/* Layout Mobile (768px o menos) */}
-        <div className="header-mobile-layout">
-          {/* Primera fila: Menú, Point (centrado), Notificaciones */}
-          <div className="header-mobile-top-row" style={{ position: 'relative' }}>
-            {/* Lado izquierdo: Menú hamburguesa */}
-            <div className="flex items-center">
-              <button
-                onClick={() => setIsSidebarOpen(true)}
-                className="p-2 hover:bg-gray-100 rounded-lg transition-colors header-mobile-menu-button"
-                style={{ cursor: 'pointer', padding: '8px' }}
-                aria-label="Menú"
-              >
-                <Icon 
-                  name="Bars3Icon" 
-                  variant="24-outline" 
-                  size={24} 
-                  className="header-mobile-menu-icon" 
-                />
-              </button>
-            </div>
-
-            {/* Centro: Texto "Point" */}
-            <div 
-              style={{ 
-                position: 'absolute', 
-                left: '50%', 
-                top: '54%',
-                transform: 'translate(-50%, -50%)',
-                display: 'flex',
-                alignItems: 'center'
-              }}
-            >
-              <Typography
-                variant="h6"
-                className="header-mobile-point-text"
-                style={{
-                  fontSize: '20px',
-                  fontFamily: 'IBM Plex Sans',
-                  fontWeight: 600,
-                  lineHeight: '1.2',
-                  margin: 0
-                }}
-              >
-                Point
-              </Typography>
+                
+                <div className="header-search-icon-container flex items-center justify-center border border-gray-400 rounded-r-lg bg-white border-l-0">
+                  <Icon 
+                    name="MagnifyingGlassIcon" 
+                    variant="24-outline" 
+                    size={20} 
+                    className="color-gray-600" 
+                  />
+                </div>
+              </form>
             </div>
 
-            {/* Lado derecho: Notificaciones */}
-            <div className="flex items-center ml-auto">
+            {/* Notificaciones y Perfil */}
+            <div className="header-actions-wrapper flex items-center gap-3 md:gap-6">
               {notificationCount !== undefined && (
                 <button
                   onClick={onNotificationClick}
-                  className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors header-mobile-notification-button"
-                  style={{ cursor: 'pointer', padding: '8px' }}
+                  className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors"
                   aria-label="Notificaciones"
                 >
                   <Icon 
                     name="BellIcon" 
                     variant="24-outline" 
                     size={24} 
-                    className="header-mobile-notification-icon" 
+                    className="color-gray-600" 
                   />
                   {notificationCount > 0 && (
-                    <span
-                      className="absolute -top-1 -right-1 px-1.5 py-0.5 min-w-[20px] h-5 
-                               text-white rounded-full flex items-center justify-center
-                               text-body-sm font-medium"
-                      style={{ 
-                        backgroundColor: '#6D3856',
-                        borderRadius: '12px'
-                      }}
-                    >
-                      {notificationCount > 9 ? '9+' : notificationCount}
+                    <span className="absolute -top-1 -right-1 px-1.5 py-0.5 min-w-[20px] h-5 text-white rounded-full flex items-center justify-center text-body-sm font-medium header-notification-badge">
+                      {formatNotificationCount(notificationCount)}
                     </span>
                   )}
                 </button>
               )}
+
+              {userName && (
+                <button
+                  onClick={onUserClick}
+                  className="flex items-center gap-3 hover:bg-gray-50 rounded-lg px-2 py-1.5 transition-colors"
+                  aria-label="Perfil de usuario"
+                >
+                  <Avatar
+                    src={userAvatar}
+                    name={userName}
+                    size="medium"
+                    variant="circle"
+                  />
+                  <Typography
+                    variant="body-lg"
+                    className="color-gray-700 hidden md:block header-user-name"
+                  >
+                    {userName}
+                  </Typography>
+                  <Icon
+                    name="ChevronDownIcon"
+                    variant="24-outline"
+                    size={20}
+                    className="color-gray-500 header-user-chevron hidden md:block"
+                  />
+                </button>
+              )}
             </div>
           </div>
 
-          {/* Segunda fila: Barra de búsqueda */}
-          <div className="header-mobile-search-row">
-            <form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">
-              {/* Input de búsqueda */}
-              <input
-                type="text"
-                value={searchValue}
-                onChange={handleSearchChange}
-                placeholder={searchPlaceholder}
-                className="header-search-input flex-1 pl-4 pr-4 py-2 bg-white border border-gray-400 rounded-l-lg 
-                         focus:outline-none text-sm"
-                style={{ 
-                  height: '44px', 
-                  borderRight: 'none', 
-                  borderTopRightRadius: '0', 
-                  borderBottomRightRadius: '0',
-                  color: '#374151',
-                  fontFamily: 'IBM Plex Sans',
-                  fontWeight: 400,
-                  fontStyle: 'italic',
-                  fontSize: '14px',
-                  lineHeight: '20px',
-                  letterSpacing: '0px'
-                }}
-              />
-              
-              {/* Recuadro con icono de buscar a la derecha */}
-              <div 
-                className="header-search-icon-container flex items-center justify-center border border-gray-400 rounded-r-lg bg-white"
-                style={{
-                  width: '40px',
-                  height: '40px',
-                  borderTopLeftRadius: '0',
-                  borderBottomLeftRadius: '0'
-                }}
-              >
-                <Icon 
-                  name="MagnifyingGlassIcon" 
-                  variant="24-outline" 
-                  size={20} 
-                  className="color-gray-600" 
-                />
+          {/* Layout Mobile (480px o menos) */}
+          <div className="header-mobile-layout">
+            {/* Primera fila: Menú, Point (centrado), Notificaciones */}
+            <div className="header-mobile-top-row relative">
+              {/* Lado izquierdo: Menú hamburguesa */}
+              <div className="flex items-center">
+                <button
+                  onClick={() => setIsSidebarOpen(true)}
+                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors header-mobile-menu-button cursor-pointer"
+                  aria-label="Menú"
+                >
+                  <Icon 
+                    name="Bars3Icon" 
+                    variant="24-outline" 
+                    size={24} 
+                    className="header-mobile-menu-icon" 
+                  />
+                </button>
+              </div>
+
+              {/* Centro: Texto "Point" */}
+              <div className="absolute left-1/2 -translate-x-1/2 flex items-center h-full">
+                <Typography
+                  variant="h6"
+                  className="header-mobile-point-text"
+                >
+                  Point
+                </Typography>
+              </div>
+
+              {/* Lado derecho: Notificaciones */}
+              <div className="flex items-center ml-auto">
+                {notificationCount !== undefined && (
+                  <button
+                    onClick={onNotificationClick}
+                    className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors header-mobile-notification-button cursor-pointer"
+                    aria-label="Notificaciones"
+                  >
+                    <Icon 
+                      name="BellIcon" 
+                      variant="24-outline" 
+                      size={24} 
+                      className="header-mobile-notification-icon" 
+                    />
+                    {notificationCount > 0 && (
+                      <span className="absolute -top-1 -right-1 px-1.5 py-0.5 min-w-[20px] h-5 text-white rounded-full flex items-center justify-center text-body-sm font-medium header-notification-badge">
+                        {formatNotificationCount(notificationCount)}
+                      </span>
+                    )}
+                  </button>
+                )}
               </div>
-            </form>
+            </div>
+
+            {/* Segunda fila: Barra de búsqueda */}
+            <div className="header-mobile-search-row">
+              <form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">
+                <input
+                  type="text"
+                  value={searchValue}
+                  onChange={handleSearchChange}
+                  placeholder={searchPlaceholder}
+                  className="header-search-input flex-1 pl-4 pr-4 py-2 bg-white border border-gray-400 rounded-l-lg focus:outline-none text-sm border-r-0 rounded-r-none"
+                />
+                
+                <div className="header-search-icon-container flex items-center justify-center border border-gray-400 rounded-r-lg bg-white border-l-0">
+                  <Icon 
+                    name="MagnifyingGlassIcon" 
+                    variant="24-outline" 
+                    size={20} 
+                    className="color-gray-600" 
+                  />
+                </div>
+              </form>
+            </div>
           </div>
         </div>
-      </div>
 
-      {/* SidebarPointMobile - Solo visible en móvil cuando está abierto */}
-      {isSidebarOpen && (
-        <div className="header-mobile-sidebar-wrapper">
-          <SidebarPointMobile
-            sections={sidebarSections}
-            activeItem={sidebarActiveItem}
-            onItemClick={(itemId) => {
-              if (onSidebarItemClick) {
-                onSidebarItemClick(itemId);
-              }
-              setIsSidebarOpen(false);
-            }}
-            itemBadges={sidebarItemBadges}
-            companyName={sidebarCompanyName}
-            companyLogo={sidebarCompanyLogo}
-            isOpen={isSidebarOpen}
-            onClose={() => setIsSidebarOpen(false)}
-          />
-        </div>
-      )}
-    </header>
+        {/* SidebarPointMobile - Solo visible en móvil cuando está abierto */}
+        {isSidebarOpen && (
+          <div className="header-mobile-sidebar-wrapper">
+            <SidebarPointMobile
+              sections={sidebarSections}
+              activeItem={sidebarActiveItem}
+              onItemClick={handleSidebarItemClick}
+              itemBadges={sidebarItemBadges}
+              companyName={sidebarCompanyName}
+              companyLogo={sidebarCompanyLogo}
+              isOpen={isSidebarOpen}
+              onClose={handleCloseSidebar}
+            />
+          </div>
+        )}
+      </header>
+    </>
   );
 };