anima-ds-nucleus 1.0.16 → 1.0.17

package/package.json

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

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

@@ -0,0 +1,192 @@
+import { useState } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Avatar } from '../../Atoms/Avatar/Avatar';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+// Constantes de diseño reutilizables
+const NOTIFICATION_BADGE_COLOR = '#6D3856';
+
+export const HeaderCompartido = ({
+  searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
+  userName,
+  userAvatar,
+  notificationCount = 0,
+  onSearch,
+  onNotificationClick,
+  onUserClick,
+  // Borde inferior (subrayado)
+  showBottomBorder = false,
+  bottomBorderClassName = 'border-b border-gray-200',
+  // Overrides de estilo/clases para poder ajustar layout desde el proyecto consumidor
+  desktopLayoutClassName = '',
+  desktopLayoutStyle,
+  desktopSearchContainerClassName = '',
+  desktopSearchContainerStyle,
+  className = '',
+  ...props
+}) => {
+  const [searchValue, setSearchValue] = useState('');
+
+  const formatNotificationCount = (count) => {
+    return count > 9 ? '9+' : count;
+  };
+
+  const handleSearchChange = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
+
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    if (onSearch) {
+      onSearch(searchValue);
+    }
+  };
+
+  return (
+    <header
+      className={`bg-white ${showBottomBorder ? bottomBorderClassName : ''} ${className}`}
+      {...props}
+    >
+      <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;
+        }
+        .header-notification-badge {
+          background-color: ${NOTIFICATION_BADGE_COLOR};
+          border-radius: 12px;
+        }
+        .header-actions-wrapper {
+          flex-shrink: 0;
+        }
+      `}</style>
+      
+      <div className="w-full" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
+        {/* Layout Desktop */}
+        <div
+          className={`header-desktop-layout flex items-center justify-between h-16 ${desktopLayoutClassName}`}
+          style={desktopLayoutStyle}
+        >
+          {/* Barra de búsqueda con icono a la derecha */}
+          <div
+            className={`flex-1 mr-2 md:mr-4 ${desktopSearchContainerClassName}`}
+            style={{ maxWidth: 'none', minWidth: '0', ...(desktopSearchContainerStyle || {}) }}
+          >
+            <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="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"
+                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 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>
+      </div>
+    </header>
+  );
+};
+
+export default HeaderCompartido;

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

@@ -0,0 +1,66 @@
+import { HeaderCompartido } from './HeaderCompartido';
+
+export default {
+  title: 'Layout/HeaderCompartido',
+  component: HeaderCompartido,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => (
+    <HeaderCompartido
+      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 SinNotificaciones = {
+  render: () => (
+    <HeaderCompartido
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Juan Pérez"
+      userAvatar="https://i.pravatar.cc/150?img=33"
+      notificationCount={0}
+    />
+  ),
+};
+
+export const ConNotificaciones = {
+  render: () => (
+    <HeaderCompartido
+      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 ConMuchasNotificaciones = {
+  render: () => (
+    <HeaderCompartido
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Ana Martínez"
+      userAvatar="https://i.pravatar.cc/150?img=47"
+      notificationCount={15}
+    />
+  ),
+};
+
+export const SinUsuario = {
+  render: () => (
+    <HeaderCompartido
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      notificationCount={3}
+    />
+  ),
+};

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

@@ -4,6 +4,7 @@ import { Typography } from '../../Atoms/Typography/Typography';
 import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
 
 export const HeaderGeneral = ({
+  variant,
   logoText = 'HEXA',
   suiteText = 'Suite',
   languages = [
@@ -16,6 +17,9 @@ export const HeaderGeneral = ({
   ...props
 }) => {
   const [isLanguageOpen, setIsLanguageOpen] = useState(false);
+  const [hoveredLangCode, setHoveredLangCode] = useState(null);
+  const [isLanguageButtonHovered, setIsLanguageButtonHovered] = useState(false);
+  const isLoginVariant = variant === 'login';
 
   const currentLanguage = languages.find(lang => lang.code === currentLanguageCode) || languages[0];
 
@@ -27,64 +31,229 @@ export const HeaderGeneral = ({
   };
 
   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>
+    isLoginVariant ? (() => {
+      const { style: styleProp, ...restProps } = props;
 
-      {/* 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>
+      return (
+        <header
+          className={`w-full flex justify-between items-center bg-white ${className}`}
+          style={{
+            boxShadow: '0px 2px 4px -1px #0000000F, 0px 4px 6px -1px #0000001A',
+            padding: '16px var(--mf-ds-grid-margin, 20px)',
+            ...styleProp,
+          }}
+          {...restProps}
+        >
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            <LogoHexa width={36} height={40} />
+            <div className="flex items-center" style={{ gap: '4px' }}>
+              <Typography variant="h5" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
+                {logoText}
+              </Typography>
+              <Typography variant="h5" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
+                {suiteText}
+              </Typography>
+            </div>
+          </div>
 
-          {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>
-                ))}
+          {/* Language Selector - Solo se muestra si hay idiomas */}
+          {languages && languages.length > 0 && (
+            <div className="relative">
+              <div className="flex items-center" style={{ width: '150px', height: '40px', gap: '16px', opacity: 1 }}>
+                <Icon
+                  name="LanguageIcon"
+                  variant="24-outline"
+                  size={20}
+                  style={{ width: '20px', height: '20px', opacity: 1 }}
+                />
+                <button
+                  onClick={() => setIsLanguageOpen(!isLanguageOpen)}
+                  onMouseEnter={() => setIsLanguageButtonHovered(true)}
+                  onMouseLeave={() => setIsLanguageButtonHovered(false)}
+                  className="flex items-center gap-2 text-body-md text-gray-700 bg-white hover:bg-gray-50 transition-colors"
+                  style={{
+                    width: '114px',
+                    height: '40px',
+                    padding: '8px 12px 8px 16px',
+                    gap: '8px',
+                    borderRadius: '8px',
+                    border: '1px solid #38656D',
+                    background: isLanguageButtonHovered ? '#F9FAFB' : 'white',
+                    opacity: 1,
+                    color: '#374151',
+                  }}
+                >
+                  <span>{currentLanguage.name}</span>
+                  <Icon
+                    name="ChevronDownIcon"
+                    variant="24-outline"
+                    size={16}
+                    className={`transition-transform ${isLanguageOpen ? 'rotate-180' : ''}`}
+                  />
+                </button>
               </div>
-            </>
+
+              {isLanguageOpen && (
+                <>
+                  <div
+                    className="fixed inset-0 z-10"
+                    onClick={() => setIsLanguageOpen(false)}
+                  />
+                  <div
+                    className="absolute right-0 mt-2 bg-white z-20"
+                    style={{
+                      width: '224px',
+                      height: '112px',
+                      padding: '12px',
+                      borderRadius: '12px',
+                      border: '1px solid #E5E7EB',
+                      boxShadow: '0px 2px 4px -2px #0000001A, 0px 4px 6px -1px #0000001A',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '8px',
+                    }}
+                  >
+                    {languages.map((lang) => (
+                      <button
+                        key={lang.code}
+                        onClick={() => handleLanguageChange(lang.code)}
+                        className="w-full text-left transition-colors"
+                        style={{
+                          width: '200px',
+                          height: '40px',
+                          padding: 0,
+                          border: 'none',
+                          background: 'transparent',
+                        }}
+                        onMouseEnter={() => setHoveredLangCode(lang.code)}
+                        onMouseLeave={() => setHoveredLangCode(null)}
+                      >
+                        <div
+                          style={{
+                            width: '200px',
+                            height: '40px',
+                            padding: '8px',
+                            borderRadius: '8px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: '16px',
+                            backgroundColor:
+                              currentLanguage.code === lang.code
+                                ? '#6D3856'
+                                : hoveredLangCode === lang.code
+                                  ? '#DDDDDD'
+                                  : 'transparent',
+                            color: currentLanguage.code === lang.code ? '#FFFFFF' : undefined,
+                          }}
+                        >
+                          <span
+                            style={{
+                              fontFamily: 'IBM Plex Sans',
+                              fontWeight: 400,
+                              fontStyle: 'normal',
+                              fontSize: '16px',
+                              lineHeight: '24px',
+                              letterSpacing: '0px',
+                              width: '144px',
+                              height: '24px',
+                              opacity: 1,
+                            }}
+                          >
+                            {lang.name}
+                          </span>
+
+                          {currentLanguage.code === lang.code && (
+                            <div
+                              style={{
+                                width: '24px',
+                                height: '24px',
+                                backgroundColor: '#FFFFFF',
+                                borderRadius: '999px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                              }}
+                            >
+                              <Icon
+                                name="CheckCircleIcon"
+                                variant="24-solid"
+                                size={24}
+                                style={{ width: '24px', height: '24px', color: '#6D3856' }}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
           )}
+        </header>
+      );
+    })() : (
+      <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>
-      )}
-    </header>
+
+        {/* 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>
+    )
   );
 };
 

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

@@ -62,3 +62,37 @@ export const SinIdiomas = {
   ),
 };
 
+export const Login = {
+  render: () => (
+    <HeaderGeneral
+      variant="login"
+      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 LoginConMargenCustom = {
+  render: () => (
+    <div style={{ '--mf-ds-grid-margin': '32px' }}>
+      <HeaderGeneral
+        variant="login"
+        logoText="HEXA"
+        suiteText="Suite"
+        languages={[
+          { code: 'es-AR', name: 'Español' },
+          { code: 'en', name: 'English' },
+        ]}
+        currentLanguageCode="en"
+        onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
+      />
+    </div>
+  ),
+};
+