anima-ds-nucleus 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anima-ds-nucleus",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Anima Design System - A comprehensive React component library",
   "author": "Nucleus Labs <ipvasallo@nucleus.com.ar>",
   "license": "UNLICENSED",

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

@@ -1,113 +1,404 @@
-import { Typography } from '../../Atoms/Typography/Typography';
+import { useState } from 'react';
 import { Icon } from '../../Atoms/Icon/Icon';
-import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
+import { Avatar } from '../../Atoms/Avatar/Avatar';
+import { Typography } from '../../Atoms/Typography/Typography';
 
 export const HeaderPoint = ({
-  logo,
-  companyName = 'Point',
-  date,
-  pointLabel = 'HEXA Core',
-  onPointClick,
-  backgroundColor,
-  borderColor,
-  verticalLineColor = '#9CA3AF',
-  logoBackgroundColor = '#FFFFFF',
-  logoIconColor,
-  companyNameColor,
-  dateColor = '#6B7280',
-  buttonBackgroundColor = '#000000',
-  buttonBorderColor = '#FFFFFF',
-  buttonTextColor = '#FFFFFF',
+  searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
+  userName,
+  userAvatar,
+  notificationCount = 0,
+  onSearch,
+  onNotificationClick,
+  onUserClick,
   className = '',
   ...props
 }) => {
-  // Formatear fecha si no se proporciona
-  const formattedDate = date || new Date().toLocaleDateString('es-AR', {
-    weekday: 'long',
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleSearchChange = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
 
-  // Capitalizar primera letra de la fecha
-  const capitalizedDate = formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    if (onSearch) {
+      onSearch(searchValue);
+    }
+  };
 
-  // Determinar colores del logo
-  const logoBgColor = logoBackgroundColor;
-  const logoIconStrokeColor = logoIconColor || backgroundColor || '#2D5C63';
-  
   return (
     <header
-      className={`${className}`}
+      className={`bg-white header-point-mobile ${className}`}
       style={{
-        backgroundColor: backgroundColor || '#FFFFFF',
-        borderBottom: borderColor ? `1px solid ${borderColor}` : '1px solid #E5E7EB'
+        ...(props.style || {}),
       }}
       {...props}
     >
-      <div className="w-full">
-        <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
-          {/* Lado izquierdo: logo y nombre */}
-          <div className="flex items-center space-x-2">
-            {/* Logo hexagonal */}
-            {logo ? (
-              <img
-                src={logo}
-                alt={companyName}
-                className="w-8 h-8"
+      <style>{`
+        .header-search-input {
+          border-color: #9ca3af;
+        }
+        .header-search-input::placeholder {
+          color: #9ca3af !important;
+          opacity: 1 !important;
+        }
+        .header-search-icon-container {
+          border-color: #9ca3af;
+        }
+        .header-search-form:focus-within .header-search-input {
+          border-color: #3b82f6 !important;
+          box-shadow: 0 0 0 1px #3b82f6;
+        }
+        .header-search-form:focus-within .header-search-icon-container {
+          border-color: #3b82f6 !important;
+          box-shadow: 0 0 0 1px #3b82f6;
+        }
+        @media (max-width: 768px) {
+          header.header-point-mobile,
+          .header-point-mobile,
+          header.bg-white.header-point-mobile {
+            background-color: transparent !important;
+            background: transparent !important;
+            border-bottom: none !important;
+          }
+          header.header-point-mobile[style*="background"],
+          .header-point-mobile[style*="background"],
+          header.header-point-mobile[style*="backgroundColor"] {
+            background-color: transparent !important;
+            background: transparent !important;
+          }
+          .header-mobile-layout {
+            display: block !important;
+            position: relative !important;
+          }
+          .header-mobile-top-row {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: space-between !important;
+            padding: 24px 24px 12px 24px !important;
+            min-height: 64px !important;
+            height: 64px !important;
+          }
+          .header-mobile-menu-button,
+          .header-mobile-notification-button {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+          }
+          .header-mobile-point-text {
+            display: flex !important;
+            align-items: center !important;
+          }
+          .header-mobile-layout::after {
+            content: '' !important;
+            position: absolute !important;
+            top: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            width: 100% !important;
+            height: calc(64px + 12px + 20px) !important;
+            background-color: var(--color-main) !important;
+            background: var(--color-main) !important;
+            z-index: 0 !important;
+            border-bottom: 1px solid var(--color-main-800) !important;
+            pointer-events: none !important;
+            display: block !important;
+            visibility: visible !important;
+            opacity: 1 !important;
+          }
+          .header-mobile-top-row {
+            position: relative;
+            z-index: 2 !important;
+          }
+          .header-mobile-search-row {
+            position: relative;
+            z-index: 2 !important;
+          }
+          .header-mobile-search-row {
+            display: block;
+            padding: 12px 24px 0 24px;
+            margin-top: -8px;
+          }
+          .header-desktop-layout {
+            display: none !important;
+          }
+          .header-mobile-layout .header-search-input {
+            font-size: 12px !important;
+            padding-left: 8px !important;
+            padding-right: 8px !important;
+          }
+          .header-mobile-layout .header-search-icon-container {
+            width: 44px !important;
+            height: 44px !important;
+          }
+          .header-mobile-menu-icon {
+            color: var(--color-neutrals-white) !important;
+          }
+          .header-mobile-notification-icon {
+            color: var(--color-neutrals-white) !important;
+          }
+          .header-mobile-point-text {
+            color: var(--color-neutrals-white) !important;
+          }
+        }
+        @media (min-width: 769px) {
+          .header-mobile-layout {
+            display: none;
+          }
+          header.header-point-mobile {
+            border-bottom: none !important;
+          }
+        }
+      `}</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'
+                }}
               />
-            ) : (
-              <LogoHexa 
-                width={36}
-                height={40}
-              />
-            )}
-            
-            {/* Nombre de la empresa */}
-            <Typography
-              variant="body-md"
-              className="font-bold"
-              style={{ color: companyNameColor }}
-            >
-              {companyName}
-            </Typography>
+              
+              {/* 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>
 
-          {/* Centro: Fecha */}
-          <div className="flex-1 flex justify-center">
-            <Typography
-              variant="body-md"
-              style={{ color: dateColor }}
-            >
-              {capitalizedDate}
-            </Typography>
+          {/* 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" 
+                />
+                {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>
 
-          {/* Lado derecho: Botón HEXA Core */}
-          <div className="flex items-center">
-            <button
-              onClick={onPointClick}
-              className="px-4 py-2 border rounded-lg 
-                       transition-colors flex items-center space-x-2"
+        {/* 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
+                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={{ 
-                borderColor: buttonBorderColor,
-                backgroundColor: buttonBackgroundColor,
-                color: buttonTextColor
+                position: 'absolute', 
+                left: '50%', 
+                top: '54%',
+                transform: 'translate(-50%, -50%)',
+                display: 'flex',
+                alignItems: 'center'
               }}
             >
               <Typography
-                variant="body-md"
-                style={{ color: buttonTextColor }}
+                variant="h6"
+                className="header-mobile-point-text"
+                style={{
+                  fontSize: '20px',
+                  fontFamily: 'IBM Plex Sans',
+                  fontWeight: 600,
+                  lineHeight: '1.2',
+                  margin: 0
+                }}
               >
-                {pointLabel}
+                Point
               </Typography>
-              <Icon
-                name="ArrowUpRightIcon"
-                variant="24-outline"
-                size={16}
-                style={{ color: buttonTextColor }}
+            </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"
+                  style={{ cursor: 'pointer', padding: '8px' }}
+                  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"
+                      style={{ 
+                        backgroundColor: '#6D3856',
+                        borderRadius: '12px'
+                      }}
+                    >
+                      {notificationCount > 9 ? '9+' : notificationCount}
+                    </span>
+                  )}
+                </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'
+                }}
               />
-            </button>
+              
+              {/* 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>
         </div>
       </div>
@@ -116,5 +407,3 @@ export const HeaderPoint = ({
 };
 
 export default HeaderPoint;
-
-

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

@@ -9,102 +9,44 @@ export default {
 export const Default = {
   render: () => (
     <HeaderPoint
-      backgroundColor="#2D5C63"
-      borderColor="#1F4549"
-      verticalLineColor="#4A8A92"
-      logoIconColor="#2D5C63"
-      companyNameColor="#FFFFFF"
-      dateColor="#E5E7EB"
-      buttonBackgroundColor="#2D5C63"
-      buttonBorderColor="#FFFFFF"
-      buttonTextColor="#FFFFFF"
-      date="Martes, 20 de octubre de 2023"
-      onPointClick={() => console.log('HEXA Core clickeado')}
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Maria García Alonso"
+      userAvatar="https://i.pravatar.cc/150?img=12"
+      notificationCount={7}
+      onSearch={(value) => console.log('Búsqueda:', value)}
+      onNotificationClick={() => console.log('Notificaciones clickeadas')}
+      onUserClick={() => console.log('Usuario clickeado')}
     />
   ),
 };
 
-export const ConFechaAutomatica = {
+export const SinNotificaciones = {
   render: () => (
     <HeaderPoint
-      backgroundColor="#2D5C63"
-      borderColor="#1F4549"
-      verticalLineColor="#4A8A92"
-      logoIconColor="#2D5C63"
-      companyNameColor="#FFFFFF"
-      dateColor="#E5E7EB"
-      buttonBackgroundColor="#2D5C63"
-      buttonBorderColor="#FFFFFF"
-      buttonTextColor="#FFFFFF"
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Juan Pérez"
+      userAvatar="https://i.pravatar.cc/150?img=33"
+      notificationCount={0}
     />
   ),
 };
 
-export const ConLogoPersonalizado = {
+export const ConMuchasNotificaciones = {
   render: () => (
     <HeaderPoint
-      companyName="Mi Empresa"
-      logo="https://via.placeholder.com/32"
-      date="Lunes, 15 de enero de 2024"
-      pointLabel="Mi Punto"
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Ana Martínez"
+      userAvatar="https://i.pravatar.cc/150?img=47"
+      notificationCount={15}
     />
   ),
 };
 
-export const ConLabelsPersonalizados = {
+export const SinUsuario = {
   render: () => (
     <HeaderPoint
-      companyName="ACME Corp"
-      date="Viernes, 25 de diciembre de 2024"
-      pointLabel="ACME Hub"
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      notificationCount={3}
     />
   ),
 };
-
-export const ConFondoNegro = {
-  render: () => (
-    <HeaderPoint
-      backgroundColor="#000000"
-      borderColor="#333333"
-      verticalLineColor="#666666"
-      logoIconColor="#000000"
-      companyNameColor="#FFFFFF"
-      dateColor="#CCCCCC"
-      date="Martes, 20 de octubre de 2023"
-      onPointClick={() => console.log('HEXA Core clickeado')}
-    />
-  ),
-};
-
-export const ConBotonesPersonalizados = {
-  render: () => (
-    <HeaderPoint
-      backgroundColor="#000000"
-      buttonBackgroundColor="#FF5733"
-      buttonBorderColor="#FFFFFF"
-      buttonTextColor="#FFFFFF"
-      date="Martes, 20 de octubre de 2023"
-      onPointClick={() => console.log('HEXA Core clickeado')}
-    />
-  ),
-};
-
-export const ConTodosLosColoresPersonalizados = {
-  render: () => (
-    <HeaderPoint
-      backgroundColor="#1A1A1A"
-      borderColor="#333333"
-      verticalLineColor="#666666"
-      logoBackgroundColor="#FFFFFF"
-      logoIconColor="#1A1A1A"
-      companyNameColor="#FFFFFF"
-      dateColor="#CCCCCC"
-      buttonBackgroundColor="#FF5733"
-      buttonBorderColor="#FFFFFF"
-      buttonTextColor="#FFFFFF"
-      date="Martes, 20 de octubre de 2023"
-      onPointClick={() => console.log('HEXA Core clickeado')}
-    />
-  ),
-};
-