anima-ds-nucleus 1.0.2 → 1.0.3

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

@@ -0,0 +1,440 @@
+import { useState } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+// 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
+  className = '',
+  ...props
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  return (
+    <>
+      <style>{`
+        /* SidebarPoint Responsive Styles - Preparado para diseño distinto */
+        .sidebar-point-responsive {
+          /* Tablet (481px-768px) - breakpoint-md */
+          width: ${isCollapsed ? '5rem' : '16rem'};
+        }
+        
+        /* Desktop Small/Medium (769px-1440px) - breakpoint-base */
+        @media (min-width: 769px) and (max-width: 1440px) {
+          .sidebar-point-responsive {
+            width: ${isCollapsed ? '5rem' : '16rem'};
+          }
+        }
+        
+        /* Desktop Large (1441px+) - breakpoint-lg */
+        @media (min-width: 1441px) {
+          .sidebar-point-responsive {
+            width: ${isCollapsed ? '5rem' : '16rem'};
+          }
+        }
+      `}</style>
+      <aside
+        className={`bg-white border-r border-gray-200 transition-all duration-300 ease-in-out sidebar-point-responsive hidden md:block ${className}`}
+        {...props}
+      >
+      <nav className="h-full flex flex-col">
+
+        {/* Contenido del sidebar */}
+        <div className="flex-1 overflow-y-auto py-4">
+          {/* Item "Inicio" destacado */}
+          <div className="px-4 mb-4">
+            <button
+              onClick={() => onItemClick && onItemClick('inicio')}
+              className={`w-full flex items-center ${
+                isCollapsed ? 'justify-center px-2' : 'px-4'
+              } 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>
+                  {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 ml-2"
+                      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 */}
+              {!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 ${
+                        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>
+      </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>
+          {/* 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 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 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;
+
+

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

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { SidebarPoint, SidebarPointMobile } from './SidebarPoint';
+
+export default {
+  title: 'Layout/SidebarPoint',
+  component: SidebarPoint,
+  tags: ['autodocs'],
+};
+
+// Mock data con 2 títulos y 2 secciones
+const mockSections = [
+  {
+    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 Default = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100">
+        <SidebarPoint
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          companyName="HEXA Point"
+          onCompanyClick={() => console.log('Company clicked')}
+        />
+      </div>
+    );
+  },
+};
+
+export const Colapsado = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100">
+        <SidebarPoint
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          defaultCollapsed={true}
+        />
+      </div>
+    );
+  },
+};
+
+export const ConSeccionesPersonalizadas = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('item1');
+    const customSections = [
+      {
+        title: 'ADMINISTRACIÓN',
+        items: [
+          { id: 'item1', label: 'Usuarios', icon: 'UserIcon' },
+          { id: 'item2', label: 'Roles', icon: 'ShieldCheckIcon' },
+        ],
+      },
+      {
+        title: 'REPORTES',
+        items: [
+          { id: 'item3', label: 'Analíticas', icon: 'ChartBarIcon' },
+          { id: 'item4', label: 'Exportar', icon: 'ArrowDownTrayIcon' },
+        ],
+      },
+    ];
+    return (
+      <div className="h-screen bg-gray-100">
+        <SidebarPoint
+          sections={customSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+        />
+      </div>
+    );
+  },
+};
+
+export const Mobile = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100 relative">
+        <SidebarPointMobile
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          companyName="HEXA Point"
+          onCompanyClick={() => console.log('Company clicked')}
+        />
+        <div className="p-4">
+          <p className="text-sm text-gray-600">
+            Haz clic en el botón hamburguesa (esquina superior izquierda) para abrir el menú mobile.
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+

package/src/index.js

@@ -28,7 +28,11 @@ export { FileUpload } from './components/Inputs/FileUpload/FileUpload';
 // Layout
 export { Layout } from './components/Layout/Layout/Layout';
 export { Header } from './components/Layout/Header/Header';
+export { HeaderConBuscador } from './components/Layout/Header/HeaderConBuscador';
+export { HeaderCore } from './components/Layout/Header/HeaderCore';
 export { Sidebar } from './components/Layout/Sidebar/Sidebar';
+export { SidebarCore } from './components/Layout/Sidebar/SidebarCore';
+export { SidebarPoint, SidebarPointMobile } from './components/Layout/Sidebar/SidebarPoint';
 export { Modal } from './components/Layout/Modal/Modal';
 export { Tabs } from './components/Layout/Tabs/Tabs';
 export { Accordion } from './components/Layout/Accordion/Accordion';

package/src/style.css

@@ -153,6 +153,18 @@
   color: #dcfce7;
 }
 
+.color-brand {
+  color: #56B676; /* Brand color principal */
+}
+
+.color-main {
+  color: #38656D; /* Main color (verde-azulado oscuro) */
+}
+
+.color-teal {
+  color: #2D5C63; /* Teal color (usado en botones) */
+}
+
 /* --- FONT WEIGHTS PERMITIDOS (según Figma) --- */
 .font-light {
   font-weight: 300;