anima-ds-nucleus 1.0.11 → 1.0.12

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Avatar } from '../../Atoms/Avatar/Avatar';
 import { Typography } from '../../Atoms/Typography/Typography';
@@ -6,12 +6,23 @@ import { SidebarCoreMobile } from '../Sidebar/SidebarCore';
 
 export const HeaderCore = ({
   searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
+  mobileSearchPlaceholder = 'Busca lo que necesites',
   userName,
   userAvatar,
   notificationCount = 0,
   onSearch,
   onNotificationClick,
   onUserClick,
+  // Borde inferior (subrayado)
+  showBottomBorder = false,
+  bottomBorderClassName = 'border-b border-gray-200',
+  // Sidebar mobile (animación/cierre controlado)
+  mobileSidebarTransitionDurationMs = 300,
+  mobileSidebarTransitionEasing = 'ease-in-out',
+  // Mobile background
+  mobileBackgroundColor = '#F3F3F3',
+  mobileHeaderClassName = '',
+  mobileHeaderStyle,
   // Overrides de estilo/clases para poder ajustar layout desde el proyecto consumidor
   desktopLayoutClassName = '',
   desktopLayoutStyle,
@@ -52,6 +63,8 @@ export const HeaderCore = ({
   sidebarSections,
   sidebarActiveItem,
   onSidebarItemClick,
+  // Mobile: permitir persistir el item activo aunque el consumidor no controle sidebarActiveItem
+  enableInternalSidebarActiveItem = true,
   sidebarItemBadges,
   sidebarCompanyName,
   sidebarCompanyLogo,
@@ -64,6 +77,48 @@ export const HeaderCore = ({
 }) => {
   const [searchValue, setSearchValue] = useState('');
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [shouldRenderSidebarMobile, setShouldRenderSidebarMobile] = useState(false);
+  const [internalSidebarActiveItem, setInternalSidebarActiveItem] = useState(undefined);
+  const closeTimeoutRef = useRef(null);
+
+  const openSidebarMobile = () => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    // Para que se vea la animación de apertura:
+    // 1) montamos el sidebar en estado cerrado
+    // 2) lo abrimos en el siguiente frame (después de pintar)
+    setShouldRenderSidebarMobile(true);
+    setIsSidebarOpen(false);
+    requestAnimationFrame(() => setIsSidebarOpen(true));
+  };
+
+  const closeSidebarMobile = () => {
+    setIsSidebarOpen(false);
+  };
+
+  const resolvedSidebarActiveItem =
+    sidebarActiveItem !== undefined && sidebarActiveItem !== null
+      ? sidebarActiveItem
+      : enableInternalSidebarActiveItem
+        ? internalSidebarActiveItem
+        : sidebarActiveItem;
+
+  useEffect(() => {
+    if (!isSidebarOpen && shouldRenderSidebarMobile) {
+      closeTimeoutRef.current = setTimeout(() => {
+        setShouldRenderSidebarMobile(false);
+        closeTimeoutRef.current = null;
+      }, mobileSidebarTransitionDurationMs);
+    }
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+    };
+  }, [isSidebarOpen, shouldRenderSidebarMobile, mobileSidebarTransitionDurationMs]);
 
   const handleSearchChange = (e) => {
     const value = e.target.value;
@@ -82,7 +137,7 @@ export const HeaderCore = ({
 
   return (
     <header
-      className={`bg-white border-b border-gray-200 ${className}`}
+      className={`bg-white ${showBottomBorder ? bottomBorderClassName : ''} ${className}`}
       {...props}
     >
       <style>{`
@@ -222,10 +277,10 @@ export const HeaderCore = ({
                     opacity: 1,
                     ...(notificationDesktopIconWrapperStyle || {}),
                   }}
-                >
+              >
                   <Icon 
-                    name="BellAlertIcon" 
-                    variant="24-outline" 
+                    name="BellIcon" 
+                  variant="24-outline" 
                     size={notificationDesktopIconSize}
                     strokeWidth={notificationDesktopIconStrokeWidth}
                     className={`color-gray-600 ${notificationIconClassName}`}
@@ -240,7 +295,7 @@ export const HeaderCore = ({
                       ...(notificationIconStyle || {}),
                       ...(notificationDesktopIconStyle || {}),
                     }}
-                  />
+                />
                 </span>
                 {notificationCount > 0 && (
                   <span
@@ -318,14 +373,17 @@ export const HeaderCore = ({
         </div>
 
         {/* Layout Mobile (768px o menos) */}
-        <div className="header-mobile-layout">
+        <div
+          className={`header-mobile-layout ${mobileHeaderClassName}`}
+          style={{ background: mobileBackgroundColor, ...(mobileHeaderStyle || {}) }}
+        >
           {/* 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
-                onClick={() => setIsSidebarOpen(true)}
+                onClick={openSidebarMobile}
                 className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                 aria-label="Menú"
               >
@@ -381,10 +439,10 @@ export const HeaderCore = ({
                       opacity: 1,
                       ...(notificationMobileIconWrapperStyle || {}),
                     }}
-                  >
+                >
                     <Icon 
-                      name="BellAlertIcon" 
-                      variant="24-outline" 
+                      name="BellIcon" 
+                    variant="24-outline" 
                       size={notificationMobileIconSize}
                       strokeWidth={notificationMobileIconStrokeWidth}
                       className={`color-gray-600 ${notificationIconClassName}`}
@@ -404,7 +462,7 @@ export const HeaderCore = ({
                   {showNotificationBadgeOnMobile && notificationCount > 0 && (
                     <span
                       className={`h-5 text-white flex items-center justify-center text-body-sm font-medium ${notificationBadgeClassName}`}
-                      style={{
+                      style={{ 
                         backgroundColor: '#6D3856',
                         minWidth: '24px',
                         width: 'fit-content',
@@ -455,7 +513,7 @@ export const HeaderCore = ({
                 type="text"
                 value={searchValue}
                 onChange={handleSearchChange}
-                placeholder={searchPlaceholder}
+                placeholder={mobileSearchPlaceholder}
                 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={{ 
@@ -495,17 +553,21 @@ export const HeaderCore = ({
         </div>
       </div>
 
-      {/* SidebarCoreMobile - Solo visible en móvil cuando está abierto */}
-      {isSidebarOpen && (
+      {/* SidebarCoreMobile - mantener montado para animación de cierre */}
+      {shouldRenderSidebarMobile && (
         <div className="header-core-mobile-sidebar-wrapper">
           <SidebarCoreMobile
             sections={sidebarSections}
-            activeItem={sidebarActiveItem}
+            activeItem={resolvedSidebarActiveItem}
             onItemClick={(itemId) => {
+              if (enableInternalSidebarActiveItem) {
+                setInternalSidebarActiveItem(itemId);
+              }
               if (onSidebarItemClick) {
                 onSidebarItemClick(itemId);
               }
-              setIsSidebarOpen(false);
+              // permitir que el item se "pinte" y luego cerrar con animación
+              requestAnimationFrame(() => closeSidebarMobile());
             }}
             itemBadges={sidebarItemBadges}
             companyName={sidebarCompanyName}
@@ -515,7 +577,9 @@ export const HeaderCore = ({
             coreContainerStyle={sidebarCoreContainerStyle}
             coreTextStyle={sidebarCoreTextStyle}
             isOpen={isSidebarOpen}
-            onClose={() => setIsSidebarOpen(false)}
+            onClose={closeSidebarMobile}
+            transitionDurationMs={mobileSidebarTransitionDurationMs}
+            transitionEasing={mobileSidebarTransitionEasing}
           />
         </div>
       )}

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

@@ -0,0 +1,262 @@
+import { Typography } from '../../Atoms/Typography/Typography';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+const defaultDateOptions = {
+  weekday: 'long',
+  day: '2-digit',
+  month: 'long',
+  year: 'numeric',
+};
+
+const coerceDate = (value) => {
+  if (!value) return null;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  const d = new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+};
+
+const capitalizeFirst = (value) => {
+  if (!value) return value;
+  return value.charAt(0).toUpperCase() + value.slice(1);
+};
+
+/**
+ * SaludoConFechaDashboard
+ *
+ * Encabezado de dashboard con saludo y fecha formateada (locale-aware).
+ * Todas las medidas/estilos se pueden overridear por props para que el proyecto consumidor ajuste sin tocar la librería.
+ */
+export const SaludoConFechaDashboard = ({
+  // Content
+  userName,
+  saludo = 'Hola',
+  date = new Date(),
+  showDate = true,
+
+  // Breadcrumb / inicio (arriba del saludo)
+  showInicio = true,
+  inicioText = 'Inicio',
+  showInicioIcon = true,
+  inicioIconName = 'ChevronRightIcon',
+  inicioIconVariant = '20-solid', // heroicons "mini"
+  inicioIconSize = 16,
+  // Responsive behavior (<= breakpoint): centrar saludo y ocultar el resto
+  responsiveBreakpointPx = 768,
+  responsiveHideInicio = true,
+  responsiveHideDate = true,
+  responsiveCenterGreeting = true,
+
+  // Date formatting
+  locale = 'es-AR',
+  dateOptions = defaultDateOptions,
+  formatDate, // (date, { locale, dateOptions }) => string
+  capitalizeDate = true,
+
+  // Layout / styles (overrideable)
+  className = '',
+  style,
+  leftClassName = '',
+  leftStyle,
+  rightClassName = '',
+  rightStyle,
+  saludoFechaContainerClassName = '',
+  saludoFechaContainerStyle,
+  inicioContainerClassName = '',
+  inicioContainerStyle,
+  inicioTextClassName = '',
+  inicioTextStyle,
+  inicioIconClassName = '',
+  inicioIconStyle,
+  greetingClassName = '',
+  greetingStyle,
+  greetingPrefix = '¡',
+  greetingSuffix = '!',
+  nameClassName = '',
+  nameStyle,
+  dateTextClassName = '',
+  dateTextStyle,
+  ...props
+}) => {
+  const resolvedDate = showDate ? coerceDate(date) : null;
+
+  let formattedDate = '';
+  if (resolvedDate) {
+    if (typeof formatDate === 'function') {
+      formattedDate = formatDate(resolvedDate, { locale, dateOptions });
+    } else {
+      formattedDate = new Intl.DateTimeFormat(locale, dateOptions).format(resolvedDate);
+    }
+    if (capitalizeDate) {
+      formattedDate = capitalizeFirst(formattedDate);
+    }
+  }
+
+  return (
+    <div
+      className={`w-full ${className}`}
+      style={style}
+      {...props}
+    >
+      <style>{`
+        @media (max-width: ${responsiveBreakpointPx}px) {
+          .scfd-inicio {
+            display: ${responsiveHideInicio ? 'none' : 'flex'};
+          }
+          .scfd-date {
+            display: ${responsiveHideDate ? 'none' : 'flex'};
+          }
+          .scfd-saludo-fecha {
+            justify-content: ${responsiveCenterGreeting ? 'center' : 'space-between'};
+          }
+          .scfd-greeting-wrapper {
+            width: 100%;
+          }
+          .scfd-greeting {
+            text-align: ${responsiveCenterGreeting ? 'center' : 'left'};
+          }
+        }
+      `}</style>
+      {/* Grid de 2 filas:
+          - Fila 1: "Inicio >" (solo izquierda)
+          - Fila 2: "Hola, Nombre" (izquierda) + Fecha (derecha) alineados a la misma altura */}
+      <div className="grid grid-cols-[minmax(0,1fr)_auto] grid-rows-[auto_auto] gap-x-4 gap-y-1 items-center">
+        {showInicio && (
+          <div
+            className={`scfd-inicio col-start-1 row-start-1 flex items-center gap-1 ${inicioContainerClassName}`}
+            style={{
+              // Mantener "Inicio" alineado al mismo borde que "Hola" (padding-left del contenedor inferior)
+              paddingLeft: '8px',
+              ...(inicioContainerStyle || {}),
+            }}
+          >
+            <Typography
+              variant="body-md"
+              className={inicioTextClassName}
+              style={{
+                color: '#223B40',
+                fontFamily: 'IBM Plex Sans',
+                fontWeight: 700,
+                fontStyle: 'normal',
+                fontSize: '14px',
+                lineHeight: '20px',
+                letterSpacing: '0%',
+                verticalAlign: 'middle',
+                ...(inicioTextStyle || {}),
+              }}
+            >
+              {inicioText}
+            </Typography>
+            {showInicioIcon && inicioIconName ? (
+              <Icon
+                name={inicioIconName}
+                variant={inicioIconVariant}
+                size={inicioIconSize}
+                className={inicioIconClassName}
+                style={{
+                  color: '#223B40',
+                  opacity: 1,
+                  transform: 'rotate(0deg)',
+                  ...(inicioIconStyle || {}),
+                }}
+              />
+            ) : null}
+          </div>
+        )}
+
+        {/* Contenedor padre de la fila "Hola + Fecha" (Figma) */}
+        <div
+          className={`scfd-saludo-fecha col-start-1 col-end-3 row-start-2 flex items-center justify-between ${saludoFechaContainerClassName}`}
+          style={{
+            // Responsive: ocupar el ancho disponible sin generar scroll horizontal,
+            // manteniendo el ancho Figma como máximo.
+            width: '100%',
+            maxWidth: '1250px',
+            minHeight: '74px',
+            gap: '24px',
+            opacity: 1,
+            transform: 'rotate(0deg)',
+            paddingTop: '16px',
+            paddingBottom: '16px',
+            paddingLeft: '8px',
+            boxSizing: 'border-box',
+            ...(saludoFechaContainerStyle || {}),
+          }}
+        >
+          <div className={`scfd-greeting-wrapper min-w-0 ${leftClassName}`} style={leftStyle}>
+            <Typography
+              variant="h5"
+              className={`scfd-greeting ${greetingClassName}`}
+              style={{
+                color: '#223B40',
+                fontFamily: 'IBM Plex Sans',
+                fontWeight: 400,
+                fontStyle: 'normal',
+                fontSize: '28px',
+                lineHeight: '42px',
+                letterSpacing: '0%',
+                verticalAlign: 'middle',
+                ...(greetingStyle || {}),
+              }}
+            >
+              <span
+                style={{
+                  display: 'inline-block',
+                  verticalAlign: 'middle',
+                  fontFamily: 'IBM Plex Sans',
+                  fontWeight: 400,
+                  fontStyle: 'normal',
+                  fontSize: '28px',
+                  lineHeight: '42px',
+                  letterSpacing: '0%',
+                  color: '#223B40',
+                }}
+              >
+                {greetingPrefix}
+                {saludo}
+              </span>
+              {userName ? (
+                <>
+                  <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>{',\u00A0'}</span>
+                  <span
+                    className={nameClassName}
+                    style={{
+                      display: 'inline-block',
+                      verticalAlign: 'middle',
+                      color: '#223B40',
+                      fontFamily: 'IBM Plex Sans',
+                      fontWeight: 400,
+                      fontStyle: 'normal',
+                      fontSize: '28px',
+                      lineHeight: '42px',
+                      letterSpacing: '0%',
+                      ...(nameStyle || {}),
+                    }}
+                  >
+                    {userName}
+                  </span>
+                </>
+              ) : null}
+              <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>{greetingSuffix}</span>
+            </Typography>
+          </div>
+
+          {showDate && formattedDate ? (
+            <div className={`scfd-date flex items-center flex-shrink-0 ${rightClassName}`} style={rightStyle}>
+              <Typography
+                variant="body-lg"
+                className={`color-gray-600 ${dateTextClassName}`}
+                style={dateTextStyle}
+              >
+                {formattedDate}
+              </Typography>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SaludoConFechaDashboard;
+
+

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',
+  },
+};
+
+