anima-ds-nucleus 1.0.2 → 1.0.4

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

@@ -0,0 +1,183 @@
+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')}
+          Client={false}
+          footerText="v1.0 | Powered by Nucleus"
+        />
+      </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}
+          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">
+        <SidebarPoint
+          sections={customSections}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+          footerText="v1.0 | Powered by Nucleus"
+        />
+      </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"
+          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')}
+        />
+        <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>
+    );
+  },
+};
+
+export const ConFooter = {
+  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')}
+          footerText="v1.0 | Powered by Nucleus"
+        />
+      </div>
+    );
+  },
+};
+
+export const ConFooterPersonalizado = {
+  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')}
+          footerText={{
+            version: 'v2.1',
+            poweredBy: 'Powered by',
+            brand: 'Nucleus'
+          }}
+          footerCollapsedContent={{
+            icon: 'InformationCircleIcon',
+            text: 'v2.1'
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const Client = {
+  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')}
+          Client={false}
+          footerText="v1.0 | Powered by Nucleus"
+        />
+      </div>
+    );
+  },
+};
+
+

package/src/index.js

@@ -14,6 +14,7 @@ export { Divider } from './components/Atoms/Divider/Divider';
 export { Skeleton } from './components/Atoms/Skeleton/Skeleton';
 export { Toast } from './components/Atoms/Toast/Toast';
 export { Tooltip } from './components/Atoms/Tooltip/Tooltip';
+export { LogoHexa } from './components/Atoms/LogoHexa/LogoHexa';
 
 // Inputs
 export { Input } from './components/Inputs/Input/Input';
@@ -27,8 +28,13 @@ export { FileUpload } from './components/Inputs/FileUpload/FileUpload';
 
 // Layout
 export { Layout } from './components/Layout/Layout/Layout';
-export { Header } from './components/Layout/Header/Header';
-export { Sidebar } from './components/Layout/Sidebar/Sidebar';
+export { HeaderConBuscador } from './components/Layout/Header/HeaderConBuscador';
+export { HeaderCore } from './components/Layout/Header/HeaderCore';
+export { HeaderPoint } from './components/Layout/Header/HeaderPoint';
+export { HeaderGeneral } from './components/Layout/Header/HeaderGeneral';
+export { SidebarCore, SidebarCoreMobile } from './components/Layout/Sidebar/SidebarCore';
+export { SidebarPoint, SidebarPointMobile } from './components/Layout/Sidebar/SidebarPoint';
+export { NavPoint } from './components/Layout/NavPoint/NavPoint';
 export { Modal } from './components/Layout/Modal/Modal';
 export { Tabs } from './components/Layout/Tabs/Tabs';
 export { Accordion } from './components/Layout/Accordion/Accordion';
@@ -40,6 +46,13 @@ export { Stepper } from './components/Layout/Stepper/Stepper';
 
 // DataDisplay
 export { Card } from './components/DataDisplay/Card/Card';
+export { CardTituloCorto } from './components/DataDisplay/Card/CardTituloCorto';
+export { CardTituloLargo } from './components/DataDisplay/Card/CardTituloLargo';
+export { CardTituloCortoMasEstado } from './components/DataDisplay/Card/CardTituloCortoMasEstado';
+export { CardTituloLargoMasEstado } from './components/DataDisplay/Card/CardTituloLargoMasEstado';
+export { CardSkeleton } from './components/DataDisplay/Card/CardSkeleton';
+export { CardVacia } from './components/DataDisplay/Card/CardVacia';
+export { CardError } from './components/DataDisplay/Card/CardError';
 export { DBGrid } from './components/DataDisplay/DBGrid/DBGrid';
 export { LineChart } from './components/DataDisplay/LineChart/LineChart';
 export { BarChart } from './components/DataDisplay/BarChart/BarChart';

package/src/style.css

@@ -104,6 +104,31 @@
   font-family: 'IBM Plex Mono', monospace;
 }
 
+/* --- MONO TEXT - IBM Plex Mono --- */
+.text-mono-lg {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+  font-weight: 400; /* Regular */
+  letter-spacing: 0;
+}
+
+.text-mono-md {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.3125rem; /* 21px */
+  font-weight: 400; /* Regular */
+  letter-spacing: 0;
+}
+
+.text-mono-sm {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.75rem; /* 12px */
+  line-height: 1.125rem; /* 18px */
+  font-weight: 400; /* Regular */
+  letter-spacing: 0;
+}
+
 /* --- COLORS GENÉRICOS (Clases utilitarias) --- */
 .color-black {
   color: #111827; /* gray-900 */
@@ -153,6 +178,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;

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

@@ -1,50 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Select } from '../../Inputs/Select/Select';
-
-export const Header = ({ 
-  title = 'Anima DS',
-  onLanguageChange,
-  currentLanguage = 'es-AR',
-  className = '',
-  ...props 
-}) => {
-  const { t, i18n } = useTranslation();
-
-  const languageOptions = [
-    { value: 'es-AR', label: 'Español (AR)' },
-    { value: 'pt-BR', label: 'Português (BR)' },
-  ];
-
-  const handleLanguageChange = (e) => {
-    const lang = e.target.value;
-    i18n.changeLanguage(lang);
-    if (onLanguageChange) {
-      onLanguageChange(lang);
-    }
-  };
-
-  return (
-    <header className={`bg-white shadow-sm border-b border-gray-200 ${className}`} {...props}>
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          <div className="flex items-center">
-            <h1 className="text-xl font-bold text-gray-900">{title}</h1>
-          </div>
-          <div className="flex items-center space-x-4">
-            <div className="w-48">
-              <Select
-                value={currentLanguage}
-                options={languageOptions}
-                onChange={handleLanguageChange}
-                className="w-full"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-};
-
-export default Header;
-

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

@@ -1,36 +0,0 @@
-import { useState } from 'react';
-import { Header } from './Header';
-import { I18nProvider } from '../../../providers/I18nProvider';
-
-export default {
-  title: 'Layout/Header',
-  component: Header,
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <I18nProvider>
-        <Story />
-      </I18nProvider>
-    ),
-  ],
-};
-
-export const Default = {
-  render: () => {
-    const [language, setLanguage] = useState('es-AR');
-    return (
-      <Header
-        title="Anima Design System"
-        currentLanguage={language}
-        onLanguageChange={setLanguage}
-      />
-    );
-  },
-};
-
-export const WithCustomTitle = {
-  args: {
-    title: 'My Application',
-  },
-};
-

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

@@ -1,57 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Icon } from '../../Atoms/Icon/Icon';
-
-export const Sidebar = ({
-  items = [],
-  activeItem,
-  onItemClick,
-  className = '',
-  ...props
-}) => {
-  const { t } = useTranslation();
-
-  const defaultItems = [
-    { id: 'home', label: t('nav.home'), icon: 'HomeIcon' },
-    { id: 'dashboard', label: t('nav.dashboard'), icon: 'ChartBarIcon' },
-    { id: 'profile', label: t('nav.profile'), icon: 'UserIcon' },
-    { id: 'settings', label: t('nav.settings'), icon: 'Cog6ToothIcon' },
-  ];
-
-  const menuItems = items.length > 0 ? items : defaultItems;
-
-  return (
-    <aside className={`bg-white shadow-sm border-r border-gray-200 ${className}`} {...props}>
-      <nav className="p-4">
-        <ul className="space-y-2">
-          {menuItems.map((item) => (
-            <li key={item.id}>
-              <button
-                onClick={() => onItemClick && onItemClick(item.id)}
-                className={`
-                  w-full flex items-center px-4 py-2 rounded-lg
-                  transition-colors
-                  ${
-                    activeItem === item.id
-                      ? 'bg-blue-100 text-blue-700 font-medium'
-                      : 'text-gray-700 hover:bg-gray-100'
-                  }
-                `}
-              >
-                {item.icon && (
-                  <Icon
-                    name={item.icon}
-                    className="mr-3 h-5 w-5"
-                  />
-                )}
-                <span>{item.label}</span>
-              </button>
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </aside>
-  );
-};
-
-export default Sidebar;
-

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

@@ -1,51 +0,0 @@
-import { useState } from 'react';
-import { Sidebar } from './Sidebar';
-import { I18nProvider } from '../../../providers/I18nProvider';
-
-export default {
-  title: 'Layout/Sidebar',
-  component: Sidebar,
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <I18nProvider>
-        <Story />
-      </I18nProvider>
-    ),
-  ],
-};
-
-export const Default = {
-  render: () => {
-    const [activeItem, setActiveItem] = useState('home');
-    return (
-      <div className="w-64">
-        <Sidebar
-          activeItem={activeItem}
-          onItemClick={setActiveItem}
-        />
-      </div>
-    );
-  },
-};
-
-export const WithCustomItems = {
-  render: () => {
-    const [activeItem, setActiveItem] = useState('item1');
-    const customItems = [
-      { id: 'item1', label: 'Custom Item 1', icon: 'HomeIcon' },
-      { id: 'item2', label: 'Custom Item 2', icon: 'UserIcon' },
-      { id: 'item3', label: 'Custom Item 3', icon: 'SettingsIcon' },
-    ];
-    return (
-      <div className="w-64">
-        <Sidebar
-          items={customItems}
-          activeItem={activeItem}
-          onItemClick={setActiveItem}
-        />
-      </div>
-    );
-  },
-};
-