anima-ds-nucleus 1.0.2 → 1.0.4

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

@@ -0,0 +1,167 @@
+import { useState } from 'react';
+import { SidebarCore, SidebarCoreMobile } 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')}
+          footerText="v1.0 | Powered by Nucleus"
+          footerCollapsedContent="v1.0"
+        />
+      </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}
+          footerText="v1.0 | Powered by Nucleus"
+          footerCollapsedContent="v1.0"
+        />
+      </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>
+    );
+  },
+};
+
+export const ConFooter = {
+  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')}
+          footerText="v1.0 | Powered by Nucleus"
+        />
+      </div>
+    );
+  },
+};
+
+export const ConFooterPersonalizado = {
+  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')}
+          footerText={{
+            version: 'v2.1',
+            poweredBy: 'Powered by',
+            brand: 'Nucleus'
+          }}
+          footerCollapsedContent={{
+            icon: 'InformationCircleIcon',
+            text: 'v2.1'
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const Mobile = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100 relative">
+        <SidebarCoreMobile
+          sections={mockSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          companyName="HEXA Core"
+          companyLogo="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAJQAmAMBIgACEQEDEQH/xAAbAAEBAAMBAQEAAAAAAAAAAAAABQMEBgIBB//EADYQAAICAgECAwQHBwUAAAAAAAABAgMEEQUSIQYxURMUQWEVNXFygZGyIiM2g7HBwjIzQlRz/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAECAwUE/8QAHxEBAQEAAgIDAQEAAAAAAAAAAAECAxEhMQQSQWFR/9oADAMBAAIRAxEAPwD9bAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGtZn4leT7tZkQjc9Lofn38jZCTUvoBr5WbjYbism6FfV/p6t9zOmmk13T7oEst6fQAFADzZZCquVlklGEVtyfwQHoGHGyqMut2Y1kbIJ6bXqZgkvc7gAAoAAAAAAAAAAOL8QVTu5+dVS3ZJQUVvzfSix4e5Z5MfdMp6yILSb85pevzNHM/jCr79f6UbPiHi5dX0hhbjbD9qxR83r/kvmcJ3LbHm4ms61vP5fLB4z/wBzF+7L+qLt2bj4WNTPJs6IySSem++vkchy/JfSNGNKS1dXGSn6Py7oseK/q3F++v0lmvNsazy+eTeV53VrHd7l+7UOvq+Rjw8yjNrdmNPrgnptJ+ZrWfUDT/6v+JH4a6dHhzOtrepqT0/wS2burK+i81mpP52s5XM4GLY67b05rzUE5a/I8ZeZj5vD5s8axTUapJ9ta7E7wxx+LfiTyciuNs3NxXtF1JaS+Hr3KediUYvFZ/u9Ua1OqTko9lvRJbZ2znfJvH2vpp+D/q63/wBn/RG7k81x+Na67MhOSemoJy1+RG4a2dHhvOsrepqUtP07RMHBuyvHnKHE+9uUmnY9dvlpmZrqSOOOa5xnM/x1WLk0ZdftMe2Nkd63H4GPF5DFy7Z1UW9c4Lclp9u+iPwOPmUctbN4dmPjWpvpemo+hh8L/Wub9j/Uamr4ds8+rcyz3V6/kMWjKhjW2qN09dMdPvt6R8zeRxMHXvVyi35RXdv8CFzf8TYX8r9bPfP4WXXyUeRopV8El+y49Wteq9Bd3z0mufc+3U9VawuSxM5tY1vVKK24taaRtkTg87BzL3KvGjj5fQ1KMeyktrevx0WzWb3Hfi39892gANOgAAIeRxWTZ4hhnRUPYxlBvcu+ku/YufAAkzIxjjznvr9czy/hyy3JdmB7NQn3cJS10v5fIqcvxr5Dj40xlGNsNOLflvWmikDP0jE+Pid+PbnIcfzduG8S66uumMdLT7zXwW/Q3OG4yzG4+/FzVB+1k9qMt9taK4LMRM/Hzm9uaq4rluMtn9HWwnVL4Tet/an8fmjfqxuTtwM2vOnXK26txrjF9o7RWAmOjPBmer4SeE42eLx92NmqElZJ7UZb7NJf2NKnjOW4u2a42yuymT2ozevzXbv9h0YFxC8GepJ+JnH0cm8n2/I319Ci1GmtdvtJ9nE8jh8jZk8ZKDjY22ptdtvbTTOjA+i3glklt8Oalw3JT5KjLvtqtcZQlY+rWtPyS18Fo38+vmI5crcCyuVLS/dzfkVgT6SJPj5kvVvlD4fisqrkLc/OdaslvUK/Lb+JcANSSOnHxzjnUAAVsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH/9k="
+          onCompanyClick={() => console.log('Company clicked')}
+          footerText="v1.0 | Powered by Nucleus"
+        />
+        <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>
+    );
+  },
+};
+
+
+
+
+