anima-ds-nucleus 1.0.3 → 1.0.5

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

@@ -1,113 +1,342 @@
-import { Typography } from '../../Atoms/Typography/Typography';
+import { useState } from 'react';
 import { Icon } from '../../Atoms/Icon/Icon';
+import { Avatar } from '../../Atoms/Avatar/Avatar';
+import { Typography } from '../../Atoms/Typography/Typography';
 
 export const HeaderCore = ({
-  logo,
-  companyName = 'HEXA Core',
-  date,
-  pointLabel = 'HEXA Point',
-  onPointClick,
+  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);
+    }
+  };
 
   return (
     <header
       className={`bg-white border-b border-gray-200 ${className}`}
       {...props}
     >
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          {/* Lado izquierdo: Línea vertical, logo y nombre */}
-          <div className="flex items-center space-x-4">
-            {/* Línea vertical */}
-            <div className="w-px h-8 bg-gray-400"></div>
-            
-            {/* 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-mobile-layout {
+            display: block;
+          }
+          .header-mobile-top-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 8px 4px;
+            min-height: 48px;
+          }
+          .header-mobile-search-row {
+            display: block;
+            padding: 12px 4px 8px 4px;
+          }
+          .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: 36px !important;
+          }
+        }
+        @media (min-width: 769px) {
+          .header-mobile-layout {
+            display: none;
+          }
+        }
+      `}</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'
+                }}
               />
-            ) : (
-              <svg
-                width="36"
-                height="36"
-                viewBox="0 0 36 36"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                className="w-9 h-9"
+              
+              {/* 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'
+                }}
               >
-                {/* Hexágono con fondo verde oscuro y esquinas redondeadas - más ancho */}
-                <path
-                  d="M18 4L28 9L28 27L18 32L8 27L8 9L18 4Z"
-                  fill="#2D5C63"
-                  stroke="#2D5C63"
-                  strokeWidth="0.5"
-                  strokeLinejoin="round"
+                <Icon 
+                  name="MagnifyingGlassIcon" 
+                  variant="24-outline" 
+                  size={20} 
+                  className="color-gray-600" 
                 />
-                {/* H estilizada en blanco - bold con bordes redondeados */}
-                <path
-                  d="M15 13V23M21 13V23M15 18H21"
-                  stroke="white"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
+              </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" 
                 />
-              </svg>
+                {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>
             )}
-            
-            {/* Nombre de la empresa */}
-            <Typography
-              variant="body-md"
-              className="color-teal font-bold"
-            >
-              {companyName}
-            </Typography>
-          </div>
 
-          {/* Centro: Fecha */}
-          <div className="flex-1 flex justify-center">
-            <Typography
-              variant="body-md"
-              className="color-gray-500"
-            >
-              {capitalizedDate}
-            </Typography>
+            {/* 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 Point */}
-          <div className="flex items-center">
-            <button
-              onClick={onPointClick}
-              className="px-4 py-2 border bg-white rounded-lg 
-                       hover:bg-gray-50 transition-colors flex items-center space-x-2"
-              style={{ borderColor: '#2D5C63' }}
-            >
+        {/* Layout Mobile (768px o menos) */}
+        <div className="header-mobile-layout">
+          {/* Primera fila: Menú, Core, Notificaciones y Avatar */}
+          <div className="header-mobile-top-row">
+            {/* Lado izquierdo: Menú hamburguesa y Core */}
+            <div className="flex items-center space-x-2">
+              {/* Botón menú hamburguesa */}
+              <button
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                aria-label="Menú"
+              >
+                <Icon 
+                  name="Bars3Icon" 
+                  variant="24-outline" 
+                  size={24} 
+                  className="color-gray-700" 
+                />
+              </button>
+              
+              {/* Texto "Core" */}
               <Typography
-                variant="body-md"
-                className="color-teal"
+                variant="h6"
+                style={{
+                  color: '#2D5C63',
+                  fontSize: '24px',
+                  fontFamily: 'IBM Plex Sans',
+                  fontWeight: 600,
+                  lineHeight: '1.2',
+                  margin: 0
+                }}
               >
-                {pointLabel}
+                Core
               </Typography>
-              <Icon
-                name="ArrowUpRightIcon"
-                variant="24-outline"
-                size={16}
-                className="color-teal"
+            </div>
+
+            {/* Lado derecho: Notificaciones y Avatar */}
+            <div className="flex items-center space-x-3">
+              {/* 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>
+              )}
+
+              {/* Avatar (sin nombre) */}
+              {userAvatar && (
+                <button
+                  onClick={onUserClick}
+                  className="hover:bg-gray-50 rounded-lg transition-colors"
+                  aria-label="Perfil de usuario"
+                >
+                  <Avatar
+                    src={userAvatar}
+                    name={userName || ''}
+                    size="medium"
+                    variant="circle"
+                  />
+                </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-3 pr-3 py-2 bg-white border border-gray-400 rounded-l-lg 
+                         focus:outline-none text-sm"
+                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'
+                }}
               />
-            </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>

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

@@ -9,47 +9,51 @@ export default {
 export const Default = {
   render: () => (
     <HeaderCore
-      companyName="HEXA Corp"
-      date="Martes, 20 de octubre de 2023"
-      newElementLabel="NUEVO ELEMENTO"
-      pointLabel="HEXA Point"
-      onNewElementClick={() => console.log('Nuevo elemento clickeado')}
-      onPointClick={() => console.log('HEXA Point 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: () => (
     <HeaderCore
-      companyName="HEXA Corp"
-      newElementLabel="NUEVO ELEMENTO"
-      pointLabel="HEXA Point"
+      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: () => (
     <HeaderCore
-      companyName="Mi Empresa"
-      logo="https://via.placeholder.com/32"
-      date="Lunes, 15 de enero de 2024"
-      newElementLabel="CREAR"
-      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: () => (
     <HeaderCore
-      companyName="ACME Corp"
-      date="Viernes, 25 de diciembre de 2024"
-      newElementLabel="AGREGAR"
-      pointLabel="ACME Hub"
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      notificationCount={3}
     />
   ),
 };
 
 
+
+
+
+
+

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

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Typography } from '../../Atoms/Typography/Typography';
+import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
+
+export const HeaderGeneral = ({
+  logoText = 'HEXA',
+  suiteText = 'Suite',
+  languages = [
+    { code: 'es-AR', name: 'Español' },
+    { code: 'en', name: 'English' },
+  ],
+  currentLanguageCode = 'es-AR',
+  onLanguageChange,
+  className = '',
+  ...props
+}) => {
+  const [isLanguageOpen, setIsLanguageOpen] = useState(false);
+
+  const currentLanguage = languages.find(lang => lang.code === currentLanguageCode) || languages[0];
+
+  const handleLanguageChange = (langCode) => {
+    if (onLanguageChange) {
+      onLanguageChange(langCode);
+    }
+    setIsLanguageOpen(false);
+  };
+
+  return (
+    <header className={`w-full flex justify-between items-center bg-white ${className}`} style={{ paddingTop: '4px', paddingBottom: '4px', paddingLeft: '8px', paddingRight: '12px' }} {...props}>
+      {/* Logo */}
+      <div className="flex items-center gap-2">
+        <LogoHexa width={32} height={36} />
+        <div className="flex items-center" style={{ gap: '4px' }}>
+          <Typography variant="h6" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
+            {logoText}
+          </Typography>
+          <Typography variant="h6" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
+            {suiteText}
+          </Typography>
+        </div>
+      </div>
+
+      {/* Language Selector - Solo se muestra si hay idiomas */}
+      {languages && languages.length > 0 && (
+        <div className="relative flex items-center gap-2">
+          <Icon name="LanguageIcon" variant="24-outline" size={18} style={{ color: '#374151' }} />
+          <button
+            onClick={() => setIsLanguageOpen(!isLanguageOpen)}
+            className="flex items-center gap-2 px-3 py-2 text-body-md color-gray-700 bg-white hover:bg-gray-50 rounded-lg transition-colors"
+            style={{ border: '1px solid #2D5C63' }}
+          >
+            <span>{currentLanguage.name}</span>
+            <Icon
+              name="ChevronDownIcon"
+              variant="24-outline"
+              size={16}
+              className={`transition-transform ${isLanguageOpen ? 'rotate-180' : ''}`}
+            />
+          </button>
+
+          {isLanguageOpen && (
+            <>
+              <div
+                className="fixed inset-0 z-10"
+                onClick={() => setIsLanguageOpen(false)}
+              />
+              <div className="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-lg z-20 py-1" style={{ border: '1px solid #2D5C63' }}>
+                {languages.map((lang) => (
+                  <button
+                    key={lang.code}
+                    onClick={() => handleLanguageChange(lang.code)}
+                    className={`w-full text-left px-4 py-2 text-body-md hover:bg-gray-50 transition-colors ${
+                      currentLanguage.code === lang.code
+                        ? 'bg-gray-50 color-brand font-medium'
+                        : 'color-gray-700'
+                    }`}
+                  >
+                    {lang.name}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </header>
+  );
+};
+
+export default HeaderGeneral;
+

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

@@ -0,0 +1,64 @@
+import { HeaderGeneral } from './HeaderGeneral';
+
+export default {
+  title: 'Layout/HeaderGeneral',
+  component: HeaderGeneral,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => (
+    <HeaderGeneral
+      logoText="HEXA"
+      suiteText="Suite"
+      languages={[
+        { code: 'es-AR', name: 'Español' },
+        { code: 'en', name: 'English' },
+      ]}
+      currentLanguageCode="es-AR"
+      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
+    />
+  ),
+};
+
+export const ConIdiomaIngles = {
+  render: () => (
+    <HeaderGeneral
+      logoText="HEXA"
+      suiteText="Suite"
+      languages={[
+        { code: 'es-AR', name: 'Español' },
+        { code: 'en', name: 'English' },
+      ]}
+      currentLanguageCode="en"
+      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
+    />
+  ),
+};
+
+export const ConTextosPersonalizados = {
+  render: () => (
+    <HeaderGeneral
+      logoText="MI"
+      suiteText="EMPRESA"
+      languages={[
+        { code: 'es-AR', name: 'Español' },
+        { code: 'en', name: 'English' },
+        { code: 'pt', name: 'Português' },
+      ]}
+      currentLanguageCode="es-AR"
+      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
+    />
+  ),
+};
+
+export const SinIdiomas = {
+  render: () => (
+    <HeaderGeneral
+      logoText="HEXA"
+      suiteText="Suite"
+      languages={[]}
+    />
+  ),
+};
+