anima-ds-nucleus 1.0.10 → 1.0.12

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

@@ -0,0 +1,64 @@
+import { SaludoConFechaDashboard } from './SaludoConFechaDashboard';
+
+export default {
+  title: 'Layout/SaludoConFechaDashboard',
+  component: SaludoConFechaDashboard,
+  tags: ['autodocs'],
+  argTypes: {
+    locale: { control: 'text' },
+    saludo: { control: 'text' },
+    userName: { control: 'text' },
+    showDate: { control: 'boolean' },
+    capitalizeDate: { control: 'boolean' },
+    showInicio: { control: 'boolean' },
+    inicioText: { control: 'text' },
+    showInicioIcon: { control: 'boolean' },
+    inicioIconName: { control: 'text' },
+  },
+};
+
+export const Default = {
+  args: {
+    saludo: 'Hola',
+    userName: 'Juan',
+    date: new Date(),
+    locale: 'es-AR',
+    showDate: true,
+    showInicio: true,
+    inicioText: 'Inicio',
+    showInicioIcon: true,
+    inicioIconName: 'ChevronRightIcon',
+  },
+};
+
+export const SinNombre = {
+  args: {
+    saludo: 'Bienvenido',
+    userName: '',
+    date: new Date(),
+    locale: 'es-AR',
+  },
+};
+
+export const Portugues = {
+  args: {
+    saludo: 'Olá',
+    userName: 'Mariana',
+    date: new Date(),
+    locale: 'pt-BR',
+  },
+};
+
+export const EstilosCustom = {
+  args: {
+    saludo: 'Hola',
+    userName: 'Dashboard',
+    date: new Date(),
+    className: 'p-4 bg-white rounded-lg border border-gray-200',
+    rightClassName: 'bg-gray-50 px-3 py-1 rounded-lg border border-gray-200',
+    dateTextClassName: 'color-gray-700',
+    inicioContainerClassName: 'opacity-80',
+  },
+};
+
+

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

@@ -34,17 +34,40 @@ const SidebarCoreMobile = ({
   footerCollapsedContent, // Contenido a mostrar en el footer cuando está colapsado (puede ser string, ReactNode, o objeto con icon y text)
   coreContainerStyle, // Estilos personalizados para el contenedor de LogoHexa y "Core"
   coreTextStyle, // Estilos personalizados para el texto "Core"
+  transitionDurationMs = 300,
+  transitionEasing = 'ease-in-out',
+  // UX: permitir que el item se pinte inmediatamente aunque el padre tarde en actualizar activeItem
+  enableOptimisticActiveItem = true,
+  closeOnItemClickAnimationFrame = true,
   isOpen: controlledIsOpen,
   onClose: controlledOnClose,
   className = '',
   ...props
 }) => {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [optimisticActiveItem, setOptimisticActiveItem] = useState(null);
   
   // Si se proporciona control externo, usarlo; si no, usar estado interno
   const isMobileMenuOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
   const setIsMobileMenuOpen = controlledOnClose ? controlledOnClose : setInternalIsOpen;
 
+  const effectiveActiveItem =
+    enableOptimisticActiveItem && optimisticActiveItem != null ? optimisticActiveItem : activeItem;
+
+  useEffect(() => {
+    if (!enableOptimisticActiveItem) return;
+    if (optimisticActiveItem != null && optimisticActiveItem === activeItem) {
+      setOptimisticActiveItem(null);
+    }
+  }, [activeItem, optimisticActiveItem, enableOptimisticActiveItem]);
+
+  useEffect(() => {
+    if (!enableOptimisticActiveItem) return;
+    if (!isMobileMenuOpen && optimisticActiveItem != null) {
+      setOptimisticActiveItem(null);
+    }
+  }, [isMobileMenuOpen, optimisticActiveItem, enableOptimisticActiveItem]);
+
   const toggleMobileMenu = () => {
     if (controlledOnClose) {
       controlledOnClose();
@@ -86,7 +109,7 @@ const SidebarCoreMobile = ({
           top: 0;
           height: 100vh;
           z-index: 50;
-          transition: transform 0.3s ease-in-out;
+          transition: transform ${transitionDurationMs}ms ${transitionEasing};
         }
       `}</style>
       {/* Botón hamburguesa - solo visible cuando el menú está cerrado y no hay control externo */}
@@ -112,7 +135,7 @@ const SidebarCoreMobile = ({
         style={{
           opacity: isMobileMenuOpen ? 1 : 0,
           pointerEvents: isMobileMenuOpen ? 'auto' : 'none',
-          transition: 'opacity 0.3s ease-in-out'
+          transition: `opacity ${transitionDurationMs}ms ${transitionEasing}`
         }}
         onClick={() => {
           if (controlledOnClose) {
@@ -132,7 +155,7 @@ const SidebarCoreMobile = ({
           <div className="bg-white px-4 py-4 flex items-center justify-between border-b border-gray-200">
             {/* Lado izquierdo: LogoHexa y "Core" */}
             <div 
-              className="flex items-center space-x-2"
+              className="flex items-center space-x-2 min-w-0 flex-1"
               style={coreContainerStyle}
             >
               {/* Logo Hexa */}
@@ -153,10 +176,10 @@ const SidebarCoreMobile = ({
                   lineHeight: '1.2',
                   margin: 0,
                   marginLeft: '8px',
-                  width: '272px',
-                  height: '40px',
                   display: 'flex',
                   alignItems: 'center',
+                  minWidth: 0,
+                  flex: 1,
                   ...coreTextStyle
                 }}
               >
@@ -198,12 +221,12 @@ const SidebarCoreMobile = ({
                   }
                 }}
                 className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
-                  activeItem === 'inicio'
+                  effectiveActiveItem === 'inicio'
                     ? ''
                     : 'color-gray-700 hover:bg-gray-100'
                 }`}
                 style={
-                  activeItem === 'inicio'
+                  effectiveActiveItem === 'inicio'
                     ? { backgroundColor: '#2D5C63' }
                     : {}
                 }
@@ -214,13 +237,13 @@ const SidebarCoreMobile = ({
                     variant="24-outline"
                     size={20}
                     className={`mr-3 ${
-                      activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                      effectiveActiveItem === 'inicio' ? 'color-white' : 'color-gray-700'
                     }`}
                   />
                   <Typography
                     variant="body-md"
                     className={`font-medium ${
-                      activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
+                      effectiveActiveItem === 'inicio' ? 'color-white' : 'color-gray-700'
                     }`}
                   >
                     Inicio
@@ -232,8 +255,8 @@ const SidebarCoreMobile = ({
                              rounded-full flex items-center justify-center
                              text-body-sm font-medium"
                     style={{ 
-                      backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
-                      color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
+                      backgroundColor: effectiveActiveItem === 'inicio' ? '#ffffff' : '#6D3856',
+                      color: effectiveActiveItem === 'inicio' ? '#6D3856' : '#ffffff',
                       borderRadius: '12px'
                     }}
                   >
@@ -262,20 +285,27 @@ const SidebarCoreMobile = ({
                     <div key={item.id} className="px-4">
                       <button
                         onClick={() => {
+                          if (enableOptimisticActiveItem) {
+                            setOptimisticActiveItem(item.id);
+                          }
                           onItemClick && onItemClick(item.id);
                           if (controlledOnClose) {
-                            controlledOnClose();
+                            if (closeOnItemClickAnimationFrame) {
+                              requestAnimationFrame(() => controlledOnClose());
+                            } else {
+                              controlledOnClose();
+                            }
                           } else {
                             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
+                          effectiveActiveItem === item.id
                             ? ''
                             : 'color-gray-700 hover:bg-gray-100'
                         }`}
                         style={
-                          activeItem === item.id
+                          effectiveActiveItem === item.id
                             ? { backgroundColor: '#2D5C63' }
                             : {}
                         }
@@ -286,13 +316,13 @@ const SidebarCoreMobile = ({
                             variant="24-outline"
                             size={20}
                             className={`mr-3 ${
-                              activeItem === item.id ? 'color-white' : 'color-gray-700'
+                              effectiveActiveItem === item.id ? 'color-white' : 'color-gray-700'
                             }`}
                           />
                           <Typography
                             variant="body-md"
                             className={`font-medium ${
-                              activeItem === item.id ? 'color-white' : 'color-gray-700'
+                              effectiveActiveItem === item.id ? 'color-white' : 'color-gray-700'
                             }`}
                           >
                             {item.label}
@@ -304,8 +334,8 @@ const SidebarCoreMobile = ({
                                      rounded-full flex items-center justify-center
                                      text-body-sm font-medium"
                             style={{ 
-                              backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
-                              color: activeItem === item.id ? '#6D3856' : '#ffffff',
+                              backgroundColor: effectiveActiveItem === item.id ? '#ffffff' : '#6D3856',
+                              color: effectiveActiveItem === item.id ? '#6D3856' : '#ffffff',
                               borderRadius: '12px'
                             }}
                           >
@@ -386,6 +416,29 @@ export const SidebarCore = ({
   companyName = 'HEXA Core',
   companyLogo,
   onCompanyClick,
+  // Overrides desktop para el header "HEXA Core"
+  desktopCompanyButtonClassName = '',
+  desktopCompanyButtonStyle,
+  desktopCompanyNameClassName = '',
+  desktopCompanyNameStyle,
+  // Desktop: overrides para el control de colapsar (solo cuando NO está colapsado)
+  desktopCollapseControlWrapperClassName = '',
+  desktopCollapseControlWrapperStyle,
+  desktopCollapseButtonClassName = '',
+  desktopCollapseButtonStyle,
+  desktopCollapseIconSize = 20,
+  desktopCollapseIconStrokeWidth = 1.5,
+  desktopCollapseIconColor = '#0F172A',
+  desktopCollapseIconClassName = '',
+  desktopCollapseIconStyle,
+  // Desktop: overrides para el control de expandir (solo cuando está colapsado)
+  desktopExpandButtonClassName = '',
+  desktopExpandButtonStyle,
+  desktopExpandIconSize = 20,
+  desktopExpandIconStrokeWidth = 1.5,
+  desktopExpandIconColor = '#0F172A',
+  desktopExpandIconClassName = '',
+  desktopExpandIconStyle,
   nucleusName = 'Nucleus AR',
   nucleusLogo,
   onNucleusClick,
@@ -478,8 +531,9 @@ export const SidebarCore = ({
           <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"
+              className={`w-full bg-white rounded-lg pl-0 pr-3 py-0 h-10 
+                       flex items-center justify-between hover:bg-gray-50 transition-colors ${desktopCompanyButtonClassName}`}
+              style={desktopCompanyButtonStyle}
             >
               <div className="flex items-center space-x-3">
                 {/* Logo hexagonal */}
@@ -495,7 +549,18 @@ export const SidebarCore = ({
                 {/* Nombre de la empresa */}
                 <Typography
                   variant="body-md"
-                  className="color-gray-900 font-medium"
+                  className={`color-gray-900 ${desktopCompanyNameClassName}`}
+                  style={{
+                    fontFamily: 'IBM Plex Sans',
+                    fontWeight: 600,
+                    fontStyle: 'normal',
+                    fontSize: '18px',
+                    lineHeight: '28px',
+                    letterSpacing: '0px',
+                    opacity: 1,
+                    transform: 'rotate(0deg)',
+                    ...(desktopCompanyNameStyle || {}),
+                  }}
                 >
                   {companyName}
                 </Typography>
@@ -506,20 +571,54 @@ export const SidebarCore = ({
 
         {/* 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' }}
+          <div className="px-4 pt-2 flex justify-end flex-shrink-0">
+            {/* Wrapper con medidas Figma (overrideable por props) */}
+            <div
+              className={`flex justify-end ${desktopCollapseControlWrapperClassName}`}
+              style={{
+                width: '228px',
+                height: '36px',
+                opacity: 1,
+                transform: 'rotate(0deg)',
+                paddingBottom: '16px',
+                boxSizing: 'border-box',
+                borderTopRightRadius: '8px',
+                borderBottomRightRadius: '8px',
+                ...(desktopCollapseControlWrapperStyle || {}),
+              }}
             >
-              <Icon
-                name="ChevronDoubleLeftIcon"
-                variant="24-outline"
-                size={20}
-                className="color-teal"
-              />
-            </button>
+              <button
+                onClick={toggleCollapse}
+                className={`hover:bg-gray-100 transition-colors rounded-lg ${desktopCollapseButtonClassName}`}
+                aria-label="Colapsar sidebar"
+                style={{
+                  width: '36px',
+                  height: '36px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  opacity: 1,
+                  transform: 'rotate(0deg)',
+                  ...(desktopCollapseButtonStyle || {}),
+                }}
+              >
+                <Icon
+                  name="ChevronDoubleLeftIcon"
+                  variant="24-outline"
+                  size={desktopCollapseIconSize}
+                  strokeWidth={desktopCollapseIconStrokeWidth}
+                  className={desktopCollapseIconClassName}
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    opacity: 1,
+                    transform: 'rotate(0deg)',
+                    color: desktopCollapseIconColor,
+                    ...(desktopCollapseIconStyle || {}),
+                  }}
+                />
+              </button>
+            </div>
           </div>
         )}
 
@@ -543,14 +642,20 @@ export const SidebarCore = ({
           <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"
+              className={`p-1.5 hover:bg-gray-100 rounded-lg transition-colors ${desktopExpandButtonClassName}`}
               aria-label="Expandir sidebar"
+              style={desktopExpandButtonStyle}
             >
               <Icon
                 name="ChevronDoubleRightIcon"
                 variant="24-outline"
-                size={20}
-                className="color-teal"
+                size={desktopExpandIconSize}
+                strokeWidth={desktopExpandIconStrokeWidth}
+                className={desktopExpandIconClassName}
+                style={{
+                  color: desktopExpandIconColor,
+                  ...(desktopExpandIconStyle || {}),
+                }}
               />
             </button>
           </div>
@@ -587,7 +692,7 @@ export const SidebarCore = ({
                 />
                 {!isCollapsed && (
                   <Typography
-                    variant="body-md"
+                    variant="body-lg"
                     className={`font-medium ${
                       activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
                     }`}
@@ -683,7 +788,7 @@ export const SidebarCore = ({
                         />
                         {!isCollapsed && (
                           <Typography
-                            variant="body-md"
+                            variant="body-lg"
                             className={`font-medium ${
                               activeItem === item.id ? 'color-white' : 'color-gray-700'
                             }`}

package/src/index.js

@@ -43,6 +43,7 @@ export { Pagination } from './components/Layout/Pagination/Pagination';
 export { Drawer } from './components/Layout/Drawer/Drawer';
 export { Dropdown } from './components/Layout/Dropdown/Dropdown';
 export { Stepper } from './components/Layout/Stepper/Stepper';
+export { SaludoConFechaDashboard } from './components/Layout/SaludoConFechaDashboard/SaludoConFechaDashboard';
 
 // DataDisplay
 export { Card } from './components/DataDisplay/Card/Card';