anima-ds-nucleus 1.0.2 → 1.0.3

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

@@ -0,0 +1,346 @@
+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 SidebarCore = ({
+  sections = MOCK_SECTIONS,
+  activeItem,
+  onItemClick,
+  defaultCollapsed = false,
+  companyName = 'HEXA Core',
+  companyLogo,
+  onCompanyClick,
+  nucleusName = 'Nucleus AR',
+  nucleusLogo,
+  onNucleusClick,
+  itemBadges = {}, // Objeto con { itemId: number } para los badges
+  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 ${
+        isCollapsed ? 'w-20' : 'w-64'
+      } ${className}`}
+      {...props}
+    >
+      <nav className="h-full flex flex-col overflow-hidden">
+        {/* Barra superior con HEXA Core */}
+        {!isCollapsed && (
+          <div className="p-4 border-b border-gray-200">
+            <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">
+                {/* Icono cuadrado oscuro con H */}
+                {companyLogo ? (
+                  <img
+                    src={companyLogo}
+                    alt={companyName}
+                    className="w-8 h-8 rounded"
+                  />
+                ) : (
+                  <div className="w-8 h-8 bg-gray-700 rounded flex items-center justify-center">
+                    <Typography
+                      variant="body-md"
+                      className="color-white font-bold"
+                    >
+                      H
+                    </Typography>
+                  </div>
+                )}
+                {/* Nombre de la empresa */}
+                <Typography
+                  variant="body-md"
+                  className="color-gray-900 font-medium"
+                >
+                  {companyName}
+                </Typography>
+              </div>
+            </button>
+          </div>
+        )}
+        {/* Botón Nucleus AR */}
+        {!isCollapsed && (
+          <div className="bg-gray-100 py-4 w-full">
+            <div className="px-4">
+              <button
+                onClick={onNucleusClick}
+                className="w-full flex items-center px-4 py-2.5 rounded-lg 
+                         transition-all duration-200 color-gray-700 hover:bg-gray-200
+                         justify-between"
+              >
+              <div className="flex items-center">
+                <Icon
+                  name="BuildingOfficeIcon"
+                  variant="24-outline"
+                  size={20}
+                  className="mr-3 color-teal"
+                />
+                <Typography
+                  variant="body-md"
+                  className="font-medium color-gray-700"
+                >
+                  {nucleusName}
+                </Typography>
+              </div>
+              {/* Chevron hacia abajo */}
+              <Icon
+                name="ChevronDownIcon"
+                variant="24-outline"
+                size={16}
+                className="color-teal"
+              />
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Botón de colapsar/expandir - Solo visible cuando está expandido */}
+        {!isCollapsed && (
+          <div className="px-4 pb-2 flex justify-end">
+            <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>
+        )}
+
+        {/* Logo H cuando está colapsado */}
+        {isCollapsed && (
+          <div className="p-4 border-b border-gray-200 flex justify-center">
+            {companyLogo ? (
+              <img
+                src={companyLogo}
+                alt={companyName}
+                className="w-8 h-8 rounded"
+              />
+            ) : (
+              <div className="w-8 h-8 bg-gray-700 rounded flex items-center justify-center">
+                <Typography
+                  variant="body-md"
+                  className="color-white font-bold"
+                >
+                  H
+                </Typography>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Botón Nucleus AR cuando está colapsado */}
+        {isCollapsed && (
+          <div className="bg-gray-100 py-4 w-full">
+            <div className="px-4 flex justify-center">
+              <button
+                onClick={onNucleusClick}
+                className="flex items-center justify-center p-2.5 rounded-lg 
+                         transition-all duration-200 color-gray-700 hover:bg-gray-200"
+              >
+                <Icon
+                  name="BuildingOfficeIcon"
+                  variant="24-outline"
+                  size={20}
+                  className="color-teal"
+                />
+                <Icon
+                  name="ChevronDownIcon"
+                  variant="24-outline"
+                  size={16}
+                  className="ml-1 color-teal"
+                />
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Botón para expandir - Solo visible cuando está colapsado */}
+        {isCollapsed && (
+          <div className="px-4 pb-2 flex justify-center">
+            <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 */}
+        <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 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={`${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>
+                )}
+              </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
+                           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 */}
+              {!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>
+  );
+};
+
+export default SidebarCore;
+

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

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { SidebarCore } from './SidebarCore';
+
+export default {
+  title: 'Layout/SidebarCore',
+  component: SidebarCore,
+  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">
+        <SidebarCore
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          companyName="HEXA Core"
+          onCompanyClick={() => console.log('Company clicked')}
+        />
+      </div>
+    );
+  },
+};
+
+export const Colapsado = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100">
+        <SidebarCore
+          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">
+        <SidebarCore
+          sections={customSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+        />
+      </div>
+    );
+  },
+};
+
+