anima-ds-nucleus 1.0.2 → 1.0.4

package/src/components/Layout/Sidebar/SidebarPoint.jsx

@@ -0,0 +1,645 @@
+import { useState } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Typography } from '../../Atoms/Typography/Typography';
+import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
+
+// Mock data con 2 títulos y 2 secciones
+const MOCK_SECTIONS = [
+  {
+    title: 'PERSONAS',
+    items: [
+      { id: 'empleados', label: 'Empleados', icon: 'UserGroupIcon' },
+      { id: 'organizacion', label: 'Organización', icon: 'BuildingOfficeIcon' },
+    ],
+  },
+  {
+    title: 'TALENTO',
+    items: [
+      { id: 'reclutamiento', label: 'Reclutamiento', icon: 'UserPlusIcon' },
+      { id: 'desarrollo', label: 'Desarrollo', icon: 'AcademicCapIcon' },
+    ],
+  },
+];
+
+export const SidebarPoint = ({
+  sections = MOCK_SECTIONS,
+  activeItem,
+  onItemClick,
+  defaultCollapsed = false,
+  companyName = 'HEXA Point',
+  companyLogo,
+  onCompanyClick,
+  itemBadges = {}, // Objeto con { itemId: number } para los badges
+  footerText, // Texto del footer: puede ser string "v1.0 | Powered by Nucleus" o objeto { version: "v1.0", poweredBy: "Powered by", brand: "Nucleus" }
+  footerCollapsedContent, // Contenido a mostrar en el footer cuando está colapsado (puede ser string, ReactNode, o objeto con icon y text)
+  Client = false, // Propiedad booleana para mostrar el logo de la empresa en la parte superior
+  className = '',
+  ...props
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  return (
+    <aside
+      className={`bg-white border-r border-gray-200 transition-all duration-300 ease-in-out h-full ${
+        isCollapsed ? 'w-20' : 'w-64'
+      } ${className}`}
+      {...props}
+    >
+      <nav className="h-full flex flex-col" style={{ overflow: 'hidden' }}>
+        {/* Barra superior con HEXA Point */}
+        {!isCollapsed && (
+          <div className="p-4 border-b border-gray-200 flex-shrink-0">
+            <button
+              onClick={onCompanyClick}
+              className="w-full bg-white rounded-lg px-3 py-2.5 
+                       flex items-center justify-between hover:bg-gray-50 transition-colors"
+            >
+              <div className="flex items-center space-x-3">
+                {/* Logo hexagonal */}
+                {companyLogo ? (
+                  <img
+                    src={companyLogo}
+                    alt={companyName}
+                    className="w-8 h-8 rounded"
+                  />
+                ) : (
+                  <LogoHexa width={36} height={40} />
+                )}
+                {/* Nombre de la empresa */}
+                <Typography
+                  variant="body-md"
+                  className="color-gray-900 font-medium"
+                >
+                  {companyName}
+                </Typography>
+              </div>
+            </button>
+          </div>
+        )}
+
+        {/* Botón de colapsar/expandir - Solo visible cuando está expandido */}
+        {!isCollapsed && (
+          <div className="px-4 pt-2 pb-2 flex justify-end flex-shrink-0">
+            <button
+              onClick={toggleCollapse}
+              className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+              aria-label="Colapsar sidebar"
+              style={{ marginRight: '10px' }}
+            >
+              <Icon
+                name="ChevronDoubleLeftIcon"
+                variant="24-outline"
+                size={20}
+                className="color-teal"
+              />
+            </button>
+          </div>
+        )}
+
+        {/* Header con logo de empresa cuando Client es true - entre botón colapsar y botón Inicio */}
+        {Client && companyLogo && !isCollapsed && (
+          <div className="flex-shrink-0 border-b border-gray-200" style={{ borderStyle: 'dashed' }}>
+            <div className="px-4 py-6 flex flex-col items-center justify-center">
+              <img
+                src={companyLogo}
+                alt={companyName || 'Company Logo'}
+                className="max-w-[200px] max-h-[80px] object-contain"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Logo cuando está colapsado */}
+        {isCollapsed && (
+          <div className="p-4 border-b border-gray-200 flex justify-center flex-shrink-0">
+            {companyLogo ? (
+              <img
+                src={companyLogo}
+                alt={companyName}
+                className="w-8 h-8 rounded"
+              />
+            ) : (
+              <LogoHexa width={36} height={40} />
+            )}
+          </div>
+        )}
+
+        {/* Botón para expandir - Solo visible cuando está colapsado */}
+        {isCollapsed && (
+          <div className="px-4 pt-2 pb-2 flex justify-center flex-shrink-0">
+            <button
+              onClick={toggleCollapse}
+              className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+              aria-label="Expandir sidebar"
+            >
+              <Icon
+                name="ChevronDoubleRightIcon"
+                variant="24-outline"
+                size={20}
+                className="color-teal"
+              />
+            </button>
+          </div>
+        )}
+
+        {/* Contenido del sidebar - Wrapper para controlar el espacio */}
+        <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+          <div className={`flex-1 overflow-y-auto ${isCollapsed ? 'py-2' : 'py-4'}`} style={{ overflowX: 'hidden' }}>
+          {/* Item "Inicio" destacado */}
+          <div className="px-4 mb-4">
+            <button
+              onClick={() => onItemClick && onItemClick('inicio')}
+              className={`w-full flex items-center cursor-pointer ${
+                isCollapsed ? 'justify-center px-2' : 'px-4 justify-between'
+              } py-2.5 rounded-lg transition-all duration-200 ${
+                activeItem === 'inicio'
+                  ? ''
+                  : 'color-gray-700 hover:bg-gray-100'
+              }`}
+              style={
+                activeItem === 'inicio'
+                  ? { backgroundColor: '#2D5C63' }
+                  : {}
+              }
+            >
+              <Icon
+                name="HomeIcon"
+                variant="24-outline"
+                size={20}
+                className={`${isCollapsed ? '' : 'mr-3'} ${
+                  activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                }`}
+              />
+              {!isCollapsed && (
+                <Typography
+                  variant="body-md"
+                  className={`font-medium ${
+                    activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                  }`}
+                >
+                  Inicio
+                </Typography>
+              )}
+              {!isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
+                <span
+                  className="px-2 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'
+                  }}
+                >
+                  {itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
+                </span>
+              )}
+            </button>
+          </div>
+
+          {/* Secciones */}
+          {sections.map((section, sectionIndex) => (
+            <div key={sectionIndex} className="mb-6">
+              {/* Línea separadora cuando está colapsado - antes de cada sección */}
+              {isCollapsed && (
+                <div className="px-4 mb-4">
+                  <div className="border-t" style={{ borderColor: '#2D5C63' }}></div>
+                </div>
+              )}
+              
+              {/* Título de la sección - solo visible cuando NO está colapsado */}
+              {!isCollapsed && (
+                <div className="px-4 mb-2">
+                  <Typography
+                    variant="body-sm"
+                    className="color-gray-500 uppercase font-medium tracking-wider"
+                  >
+                    {section.title}
+                  </Typography>
+                </div>
+              )}
+
+              {/* Items de la sección */}
+              <div className="space-y-1">
+                {section.items.map((item) => (
+                  <div key={item.id} className="px-4">
+                    <button
+                      onClick={() => onItemClick && onItemClick(item.id)}
+                      className={`w-full flex items-center cursor-pointer ${
+                        isCollapsed ? 'justify-center px-2' : 'px-4 justify-between'
+                      } py-2.5 rounded-lg transition-all duration-200 ${
+                        activeItem === item.id
+                          ? ''
+                          : 'color-gray-700 hover:bg-gray-100'
+                      }`}
+                      style={
+                        activeItem === item.id
+                          ? { backgroundColor: '#2D5C63' }
+                          : {}
+                      }
+                      title={isCollapsed ? item.label : ''}
+                    >
+                      <div className="flex items-center">
+                        <Icon
+                          name={item.icon}
+                          variant="24-outline"
+                          size={20}
+                          className={`${isCollapsed ? '' : 'mr-3'} ${
+                            activeItem === item.id ? 'color-white' : 'color-gray-700'
+                          }`}
+                        />
+                        {!isCollapsed && (
+                          <Typography
+                            variant="body-md"
+                            className={`font-medium ${
+                              activeItem === item.id ? 'color-white' : 'color-gray-700'
+                            }`}
+                          >
+                            {item.label}
+                          </Typography>
+                        )}
+                      </div>
+                      {!isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
+                        <span
+                          className="px-2 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'
+                          }}
+                        >
+                          {item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
+                        </span>
+                      )}
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+          </div>
+        </div>
+
+        {/* Footer con texto configurable - cuando está expandido */}
+        {footerText && !isCollapsed && (
+          <div className="px-4 pb-4 flex-shrink-0">
+            <div 
+              className="bg-white border rounded-lg px-3 py-2 flex items-center justify-center"
+              style={{ 
+                borderColor: '#2D5C63',
+                borderRadius: '8px'
+              }}
+            >
+              {typeof footerText === 'string' ? (
+                <Typography
+                  variant="body-sm"
+                  style={{ color: '#2D5C63' }}
+                  className="text-center"
+                >
+                  {(() => {
+                    const parts = footerText.split('|');
+                    if (parts.length === 2) {
+                      const leftPart = parts[0].trim();
+                      const rightPart = parts[1].trim();
+                      // Si contiene "Powered by", separar y poner la marca en bold
+                      if (rightPart.includes('Powered by')) {
+                        const poweredByMatch = rightPart.match(/Powered by (.+)/);
+                        if (poweredByMatch) {
+                          return (
+                            <>
+                              {leftPart} | Powered by <span className="font-bold">{poweredByMatch[1]}</span>
+                            </>
+                          );
+                        }
+                      }
+                      return `${leftPart} | ${rightPart}`;
+                    }
+                    return footerText;
+                  })()}
+                </Typography>
+              ) : (
+                <Typography
+                  variant="body-sm"
+                  style={{ color: '#2D5C63' }}
+                  className="text-center"
+                >
+                  {footerText.version && `${footerText.version}`}
+                  {footerText.version && (footerText.poweredBy || footerText.brand) && ' | '}
+                  {footerText.poweredBy && `${footerText.poweredBy} `}
+                  {footerText.brand && <span className="font-bold">{footerText.brand}</span>}
+                </Typography>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Footer cuando está colapsado */}
+        {footerCollapsedContent && isCollapsed && (
+          <div className="px-1 pt-2 pb-2 flex justify-center flex-shrink-0" style={{ zIndex: 10 }}>
+            <div 
+              className="bg-white border rounded px-1 py-0.5 flex items-center justify-center"
+              style={{ 
+                borderColor: '#2D5C63',
+                borderRadius: '4px',
+                width: 'calc(100% - 8px)',
+                minHeight: '20px'
+              }}
+            >
+              {typeof footerCollapsedContent === 'string' ? (
+                <span
+                  style={{ 
+                    color: '#2D5C63', 
+                    fontSize: '9px', 
+                    lineHeight: '1.2',
+                    fontWeight: '600',
+                    textAlign: 'center',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '100%'
+                  }}
+                >
+                  {footerCollapsedContent}
+                </span>
+              ) : typeof footerCollapsedContent === 'object' && footerCollapsedContent.icon ? (
+                <div className="flex items-center justify-center">
+                  {footerCollapsedContent.icon && (
+                    <Icon
+                      name={footerCollapsedContent.icon}
+                      variant="24-outline"
+                      size={14}
+                      style={{ color: '#2D5C63' }}
+                    />
+                  )}
+                  {footerCollapsedContent.text && (
+                    <span
+                      style={{ 
+                        color: '#2D5C63', 
+                        fontSize: '10px',
+                        marginLeft: footerCollapsedContent.icon ? '4px' : '0'
+                      }}
+                    >
+                      {footerCollapsedContent.text}
+                    </span>
+                  )}
+                </div>
+              ) : (
+                footerCollapsedContent
+              )}
+            </div>
+          </div>
+        )}
+      </nav>
+    </aside>
+  );
+};
+
+// Componente SidebarPoint Mobile
+const SidebarPointMobile = ({
+  sections = MOCK_SECTIONS,
+  activeItem,
+  onItemClick,
+  companyName = 'HEXA Point',
+  companyLogo,
+  onCompanyClick,
+  itemBadges = {},
+  className = '',
+  ...props
+}) => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
+  // Formatear fecha de hoy
+  const formattedDate = new Date().toLocaleDateString('es-AR', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+  const capitalizedDate = formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);
+
+  return (
+    <>
+      <style>{`
+        .sidebar-point-mobile {
+          width: 100%;
+          transform: ${isMobileMenuOpen ? 'translateX(0)' : 'translateX(-100%)'};
+          position: fixed;
+          left: 0;
+          top: 0;
+          height: 100vh;
+          z-index: 50;
+          transition: transform 0.3s ease-in-out;
+        }
+      `}</style>
+      {/* Botón hamburguesa - solo visible cuando el menú está cerrado */}
+      {!isMobileMenuOpen && (
+        <button
+          onClick={toggleMobileMenu}
+          className="fixed top-4 left-4 z-50 p-2 bg-white border border-gray-200 rounded-lg shadow-md 
+                   hover:bg-gray-50 transition-colors"
+          aria-label="Toggle menu"
+        >
+          <Icon
+            name="Bars3Icon"
+            variant="24-outline"
+            size={24}
+            className="color-gray-700"
+          />
+        </button>
+      )}
+      {/* Overlay para cerrar el menú */}
+      {isMobileMenuOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 z-40"
+          onClick={toggleMobileMenu}
+        />
+      )}
+      <aside
+        className={`bg-gray-100 border-r border-gray-200 sidebar-point-mobile ${className}`}
+        {...props}
+      >
+        <nav className="h-full flex flex-col">
+          {/* Header verde con "Point" y botón X */}
+          <div className="bg-brand px-4 py-4 flex items-center justify-between" style={{ backgroundColor: '#56B676' }}>
+            <Typography
+              variant="h5"
+              className="color-white font-bold"
+            >
+              Point
+            </Typography>
+            <button
+              onClick={toggleMobileMenu}
+              className="p-1 hover:bg-opacity-80 rounded transition-colors"
+              aria-label="Cerrar menú"
+            >
+              <Icon
+                name="XMarkIcon"
+                variant="24-outline"
+                size={24}
+                className="color-white"
+              />
+            </button>
+          </div>
+          {/* Sección gris con fecha */}
+          <div className="bg-gray-100 px-4 py-3 border-b border-gray-200">
+            <Typography
+              variant="body-md"
+              className="color-gray-700"
+            >
+              {capitalizedDate}
+            </Typography>
+          </div>
+          {/* Logo de empresa (si se proporciona) */}
+          {companyLogo && (
+            <div className="bg-gray-100 px-4 py-6 flex justify-center border-b border-gray-200">
+              <img
+                src={companyLogo}
+                alt={companyName || 'Company Logo'}
+                className="max-w-[120px] max-h-[120px] object-contain"
+              />
+            </div>
+          )}
+          {/* Contenido del sidebar mobile */}
+          <div className="flex-1 overflow-y-auto py-4">
+            {/* Item "Inicio" destacado */}
+            <div className="px-4 mb-4">
+              <button
+                onClick={() => {
+                  onItemClick && onItemClick('inicio');
+                  toggleMobileMenu();
+                }}
+                className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
+                  activeItem === 'inicio'
+                    ? ''
+                    : 'color-gray-700 hover:bg-gray-100'
+                }`}
+                style={
+                  activeItem === 'inicio'
+                    ? { backgroundColor: '#2D5C63' }
+                    : {}
+                }
+              >
+                <div className="flex items-center">
+                  <Icon
+                    name="HomeIcon"
+                    variant="24-outline"
+                    size={20}
+                    className={`mr-3 ${
+                      activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                    }`}
+                  />
+                  <Typography
+                    variant="body-md"
+                    className={`font-medium ${
+                      activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                    }`}
+                  >
+                    Inicio
+                  </Typography>
+                </div>
+                {itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
+                  <span
+                    className="px-2 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'
+                    }}
+                  >
+                    {itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
+                  </span>
+                )}
+              </button>
+            </div>
+
+            {/* Secciones */}
+            {sections.map((section, sectionIndex) => (
+              <div key={sectionIndex} className="mb-6">
+                {/* Título de la sección */}
+                <div className="px-4 mb-2">
+                  <Typography
+                    variant="body-sm"
+                    className="color-gray-500 uppercase font-medium tracking-wider"
+                  >
+                    {section.title}
+                  </Typography>
+                </div>
+
+                {/* Items de la sección */}
+                <div className="space-y-1">
+                  {section.items.map((item) => (
+                    <div key={item.id} className="px-4">
+                      <button
+                        onClick={() => {
+                          onItemClick && onItemClick(item.id);
+                          toggleMobileMenu();
+                        }}
+                        className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
+                          activeItem === item.id
+                            ? ''
+                            : 'color-gray-700 hover:bg-gray-100'
+                        }`}
+                        style={
+                          activeItem === item.id
+                            ? { backgroundColor: '#2D5C63' }
+                            : {}
+                        }
+                      >
+                        <div className="flex items-center">
+                          <Icon
+                            name={item.icon}
+                            variant="24-outline"
+                            size={20}
+                            className={`mr-3 ${
+                              activeItem === item.id ? 'color-white' : 'color-gray-700'
+                            }`}
+                          />
+                          <Typography
+                            variant="body-md"
+                            className={`font-medium ${
+                              activeItem === item.id ? 'color-white' : 'color-gray-700'
+                            }`}
+                          >
+                            {item.label}
+                          </Typography>
+                        </div>
+                        {((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
+                          <span
+                            className="px-2 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'
+                            }}
+                          >
+                            {item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
+                          </span>
+                        )}
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </nav>
+      </aside>
+    </>
+  );
+};
+
+// Exportar ambos componentes
+export { SidebarPointMobile };
+export default SidebarPoint;
+
+