anima-ds-nucleus 1.0.7 → 1.0.9

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Typography } from '../../Atoms/Typography/Typography';
 import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
@@ -50,55 +50,6 @@ export const SidebarPoint = ({
       {...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 && (
@@ -113,38 +64,7 @@ export const SidebarPoint = ({
           </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">
@@ -166,31 +86,34 @@ export const SidebarPoint = ({
                   : {}
               }
             >
-              <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 ${
+              <div className="flex items-center">
+                <Icon
+                  name="HomeIcon"
+                  variant="24-outline"
+                  size={20}
+                  className={`${isCollapsed ? '' : 'mr-3'} ${
                     activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
                   }`}
-                >
-                  Inicio
-                </Typography>
-              )}
+                />
+                {!isCollapsed && (
+                  <Typography
+                    variant="body-md"
+                    className={`font-medium ${
+                      activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                    }`}
+                  >
+                    Inicio
+                  </Typography>
+                )}
+              </div>
               {!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
+                           rounded-full flex items-center justify-center
                            text-body-sm font-medium"
                   style={{ 
-                    backgroundColor: '#6D3856',
+                    backgroundColor: activeItem === 'inicio' ? '#FFFFFF' : '#6D3856',
+                    color: activeItem === 'inicio' ? '#6D3856' : '#FFFFFF',
                     borderRadius: '12px'
                   }}
                 >
@@ -265,10 +188,11 @@ export const SidebarPoint = ({
                       {!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
+                                   rounded-full flex items-center justify-center
                                    text-body-sm font-medium"
                           style={{ 
-                            backgroundColor: '#6D3856',
+                            backgroundColor: activeItem === item.id ? '#FFFFFF' : '#6D3856',
+                            color: activeItem === item.id ? '#6D3856' : '#FFFFFF',
                             borderRadius: '12px'
                           }}
                         >
@@ -407,13 +331,44 @@ const SidebarPointMobile = ({
   companyLogo,
   onCompanyClick,
   itemBadges = {},
+  isOpen: controlledIsOpen,
+  onClose: controlledOnClose,
   className = '',
   ...props
 }) => {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [shouldAnimate, setShouldAnimate] = useState(false);
+  
+  // Si se proporciona control externo, usarlo; si no, usar estado interno
+  const isMobileMenuOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+  const setIsMobileMenuOpen = controlledOnClose ? controlledOnClose : setInternalIsOpen;
+
+  // Efecto para manejar la animación cuando se controla externamente
+  useEffect(() => {
+    if (controlledIsOpen !== undefined) {
+      if (controlledIsOpen) {
+        // Cuando se abre, primero montamos sin animación, luego activamos la animación
+        setShouldAnimate(false);
+        // Pequeño delay para asegurar que el DOM esté listo antes de animar
+        const timer = setTimeout(() => {
+          setShouldAnimate(true);
+        }, 10);
+        return () => clearTimeout(timer);
+      } else {
+        // Cuando se cierra, desactivamos la animación inmediatamente
+        setShouldAnimate(false);
+      }
+    } else {
+      setShouldAnimate(internalIsOpen);
+    }
+  }, [controlledIsOpen, internalIsOpen]);
 
   const toggleMobileMenu = () => {
-    setIsMobileMenuOpen(!isMobileMenuOpen);
+    if (controlledOnClose) {
+      controlledOnClose();
+    } else {
+      setInternalIsOpen(!internalIsOpen);
+    }
   };
 
   // Formatear fecha de hoy
@@ -436,11 +391,20 @@ const SidebarPointMobile = ({
           top: 0;
           height: 100vh;
           z-index: 50;
-          transition: transform 0.3s ease-in-out;
+          transition: ${shouldAnimate ? 'transform 0.3s ease-in-out' : 'none'};
+        }
+        .sidebar-point-mobile-overlay {
+          position: fixed;
+          inset: 0;
+          background-color: rgba(0, 0, 0, 0.5);
+          z-index: 40;
+          transition: opacity 0.3s ease-in-out;
+          opacity: ${isMobileMenuOpen ? '1' : '0'};
+          pointer-events: ${isMobileMenuOpen ? 'auto' : 'none'};
         }
       `}</style>
-      {/* Botón hamburguesa - solo visible cuando el menú está cerrado */}
-      {!isMobileMenuOpen && (
+      {/* Botón hamburguesa - solo visible cuando el menú está cerrado y no hay control externo */}
+      {!isMobileMenuOpen && controlledIsOpen === undefined && (
         <button
           onClick={toggleMobileMenu}
           className="fixed top-4 left-4 z-50 p-2 bg-white border border-gray-200 rounded-lg shadow-md 
@@ -456,19 +420,23 @@ const SidebarPointMobile = ({
         </button>
       )}
       {/* Overlay para cerrar el menú */}
-      {isMobileMenuOpen && (
-        <div
-          className="fixed inset-0 bg-black bg-opacity-50 z-40"
-          onClick={toggleMobileMenu}
-        />
-      )}
+      <div
+        className="sidebar-point-mobile-overlay"
+        onClick={() => {
+          if (controlledOnClose) {
+            controlledOnClose();
+          } else {
+            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' }}>
+          {/* Header MAIN con "Point" y botón X */}
+          <div className="px-4 py-4 flex items-center justify-between" style={{ backgroundColor: 'var(--color-main)' }}>
             <Typography
               variant="h5"
               className="color-white font-bold"
@@ -476,8 +444,15 @@ const SidebarPointMobile = ({
               Point
             </Typography>
             <button
-              onClick={toggleMobileMenu}
+              onClick={() => {
+                if (controlledOnClose) {
+                  controlledOnClose();
+                } else {
+                  toggleMobileMenu();
+                }
+              }}
               className="p-1 hover:bg-opacity-80 rounded transition-colors"
+              style={{ cursor: 'pointer' }}
               aria-label="Cerrar menú"
             >
               <Icon
@@ -497,7 +472,7 @@ const SidebarPointMobile = ({
               {capitalizedDate}
             </Typography>
           </div>
-          {/* Logo de empresa (si se proporciona) */}
+          {/* Logo de empresa (solo si se proporciona) */}
           {companyLogo && (
             <div className="bg-gray-100 px-4 py-6 flex justify-center border-b border-gray-200">
               <img

package/src/components/Layout/TituloPoint/TituloPoint.jsx

@@ -0,0 +1,92 @@
+import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const TituloPoint = ({
+  backgroundColor = 'var(--color-main)',
+  textColor = '#FFFFFF',
+  borderBottomColor = 'var(--color-main-800)',
+  className = '',
+  ...props
+}) => {
+  return (
+    <div
+      className={`titulo-point ${className}`}
+      style={{
+        backgroundColor: backgroundColor,
+        width: '100%',
+        display: 'none',
+        opacity: 1,
+        borderBottomColor: borderBottomColor
+      }}
+      {...props}
+    >
+      <style>{`
+        @media (min-width: 769px) {
+          .titulo-point {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            width: 100%;
+            height: calc(60px * (100vw / 1440px));
+            min-height: 40px;
+            max-height: 60px;
+            padding-top: 20px;
+            padding-right: 16px;
+            padding-left: 16px;
+            padding-bottom: 0;
+            border-bottom-width: 1px;
+            border-bottom-style: solid;
+            box-sizing: border-box;
+            position: relative;
+          }
+          .titulo-point-inner {
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            gap: 12px;
+            width: 100%;
+            margin: 0 auto;
+            padding: 0;
+            flex-shrink: 0;
+          }
+        }
+        @media (min-width: 1440px) {
+          .titulo-point {
+            height: 60px;
+          }
+        }
+        @media (max-width: 768px) {
+          .titulo-point {
+            display: none !important;
+          }
+        }
+      `}</style>
+      <div className="titulo-point-inner" style={{ margin: 0, padding: 0 }}>
+        <LogoHexa 
+          width={28} 
+          height={32}
+          backgroundColor="#FFFFFF"
+          textColor="var(--color-main)"
+        />
+        <Typography
+          variant="h5"
+          style={{
+            color: textColor,
+            fontFamily: 'IBM Plex Sans',
+            fontWeight: 600,
+            fontSize: '18px',
+            lineHeight: '1.2',
+            margin: 0,
+            padding: 0,
+            display: 'flex',
+            alignItems: 'center'
+          }}
+        >
+          HEXA Point
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default TituloPoint;

package/src/components/Layout/TituloPoint/TituloPoint.stories.jsx

@@ -0,0 +1,31 @@
+import { TituloPoint } from './TituloPoint';
+
+export default {
+  title: 'Layout/TituloPoint',
+  component: TituloPoint,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => (
+    <TituloPoint />
+  ),
+};
+
+export const ConColorPersonalizado = {
+  render: () => (
+    <TituloPoint
+      backgroundColor="#000000"
+      textColor="#FFFFFF"
+    />
+  ),
+};
+
+export const ConColorSecundario = {
+  render: () => (
+    <TituloPoint
+      backgroundColor="var(--color-secondary)"
+      textColor="#FFFFFF"
+    />
+  ),
+};