anima-ds-nucleus 1.0.2 → 1.0.4

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

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Typography } from '../../Atoms/Typography/Typography';
+import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
+
+export const HeaderGeneral = ({
+  logoText = 'HEXA',
+  suiteText = 'Suite',
+  languages = [
+    { code: 'es-AR', name: 'Español' },
+    { code: 'en', name: 'English' },
+  ],
+  currentLanguageCode = 'es-AR',
+  onLanguageChange,
+  className = '',
+  ...props
+}) => {
+  const [isLanguageOpen, setIsLanguageOpen] = useState(false);
+
+  const currentLanguage = languages.find(lang => lang.code === currentLanguageCode) || languages[0];
+
+  const handleLanguageChange = (langCode) => {
+    if (onLanguageChange) {
+      onLanguageChange(langCode);
+    }
+    setIsLanguageOpen(false);
+  };
+
+  return (
+    <header className={`w-full flex justify-between items-center bg-white ${className}`} style={{ paddingTop: '4px', paddingBottom: '4px', paddingLeft: '8px', paddingRight: '12px' }} {...props}>
+      {/* Logo */}
+      <div className="flex items-center gap-2">
+        <LogoHexa width={32} height={36} />
+        <div className="flex items-center" style={{ gap: '4px' }}>
+          <Typography variant="h6" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
+            {logoText}
+          </Typography>
+          <Typography variant="h6" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
+            {suiteText}
+          </Typography>
+        </div>
+      </div>
+
+      {/* Language Selector - Solo se muestra si hay idiomas */}
+      {languages && languages.length > 0 && (
+        <div className="relative flex items-center gap-2">
+          <Icon name="LanguageIcon" variant="24-outline" size={18} style={{ color: '#374151' }} />
+          <button
+            onClick={() => setIsLanguageOpen(!isLanguageOpen)}
+            className="flex items-center gap-2 px-3 py-2 text-body-md color-gray-700 bg-white hover:bg-gray-50 rounded-lg transition-colors"
+            style={{ border: '1px solid #2D5C63' }}
+          >
+            <span>{currentLanguage.name}</span>
+            <Icon
+              name="ChevronDownIcon"
+              variant="24-outline"
+              size={16}
+              className={`transition-transform ${isLanguageOpen ? 'rotate-180' : ''}`}
+            />
+          </button>
+
+          {isLanguageOpen && (
+            <>
+              <div
+                className="fixed inset-0 z-10"
+                onClick={() => setIsLanguageOpen(false)}
+              />
+              <div className="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-lg z-20 py-1" style={{ border: '1px solid #2D5C63' }}>
+                {languages.map((lang) => (
+                  <button
+                    key={lang.code}
+                    onClick={() => handleLanguageChange(lang.code)}
+                    className={`w-full text-left px-4 py-2 text-body-md hover:bg-gray-50 transition-colors ${
+                      currentLanguage.code === lang.code
+                        ? 'bg-gray-50 color-brand font-medium'
+                        : 'color-gray-700'
+                    }`}
+                  >
+                    {lang.name}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </header>
+  );
+};
+
+export default HeaderGeneral;
+

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

@@ -0,0 +1,64 @@
+import { HeaderGeneral } from './HeaderGeneral';
+
+export default {
+  title: 'Layout/HeaderGeneral',
+  component: HeaderGeneral,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => (
+    <HeaderGeneral
+      logoText="HEXA"
+      suiteText="Suite"
+      languages={[
+        { code: 'es-AR', name: 'Español' },
+        { code: 'en', name: 'English' },
+      ]}
+      currentLanguageCode="es-AR"
+      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
+    />
+  ),
+};
+
+export const ConIdiomaIngles = {
+  render: () => (
+    <HeaderGeneral
+      logoText="HEXA"
+      suiteText="Suite"
+      languages={[
+        { code: 'es-AR', name: 'Español' },
+        { code: 'en', name: 'English' },
+      ]}
+      currentLanguageCode="en"
+      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
+    />
+  ),
+};
+
+export const ConTextosPersonalizados = {
+  render: () => (
+    <HeaderGeneral
+      logoText="MI"
+      suiteText="EMPRESA"
+      languages={[
+        { code: 'es-AR', name: 'Español' },
+        { code: 'en', name: 'English' },
+        { code: 'pt', name: 'Português' },
+      ]}
+      currentLanguageCode="es-AR"
+      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
+    />
+  ),
+};
+
+export const SinIdiomas = {
+  render: () => (
+    <HeaderGeneral
+      logoText="HEXA"
+      suiteText="Suite"
+      languages={[]}
+    />
+  ),
+};
+

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

@@ -0,0 +1,120 @@
+import { Typography } from '../../Atoms/Typography/Typography';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
+
+export const HeaderPoint = ({
+  logo,
+  companyName = 'Point',
+  date,
+  pointLabel = 'HEXA Core',
+  onPointClick,
+  backgroundColor,
+  borderColor,
+  verticalLineColor = '#9CA3AF',
+  logoBackgroundColor = '#FFFFFF',
+  logoIconColor,
+  companyNameColor,
+  dateColor = '#6B7280',
+  buttonBackgroundColor = '#000000',
+  buttonBorderColor = '#FFFFFF',
+  buttonTextColor = '#FFFFFF',
+  className = '',
+  ...props
+}) => {
+  // Formatear fecha si no se proporciona
+  const formattedDate = date || new Date().toLocaleDateString('es-AR', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  // Capitalizar primera letra de la fecha
+  const capitalizedDate = formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);
+
+  // Determinar colores del logo
+  const logoBgColor = logoBackgroundColor;
+  const logoIconStrokeColor = logoIconColor || backgroundColor || '#2D5C63';
+  
+  return (
+    <header
+      className={`${className}`}
+      style={{
+        backgroundColor: backgroundColor || '#FFFFFF',
+        borderBottom: borderColor ? `1px solid ${borderColor}` : '1px solid #E5E7EB'
+      }}
+      {...props}
+    >
+      <div className="w-full">
+        <div className="flex items-center justify-between h-16 px-4 sm:px-6 lg:px-8">
+          {/* Lado izquierdo: logo y nombre */}
+          <div className="flex items-center space-x-2">
+            {/* Logo hexagonal */}
+            {logo ? (
+              <img
+                src={logo}
+                alt={companyName}
+                className="w-8 h-8"
+              />
+            ) : (
+              <LogoHexa 
+                width={36}
+                height={40}
+              />
+            )}
+            
+            {/* Nombre de la empresa */}
+            <Typography
+              variant="body-md"
+              className="font-bold"
+              style={{ color: companyNameColor }}
+            >
+              {companyName}
+            </Typography>
+          </div>
+
+          {/* Centro: Fecha */}
+          <div className="flex-1 flex justify-center">
+            <Typography
+              variant="body-md"
+              style={{ color: dateColor }}
+            >
+              {capitalizedDate}
+            </Typography>
+          </div>
+
+          {/* Lado derecho: Botón HEXA Core */}
+          <div className="flex items-center">
+            <button
+              onClick={onPointClick}
+              className="px-4 py-2 border rounded-lg 
+                       transition-colors flex items-center space-x-2"
+              style={{ 
+                borderColor: buttonBorderColor,
+                backgroundColor: buttonBackgroundColor,
+                color: buttonTextColor
+              }}
+            >
+              <Typography
+                variant="body-md"
+                style={{ color: buttonTextColor }}
+              >
+                {pointLabel}
+              </Typography>
+              <Icon
+                name="ArrowUpRightIcon"
+                variant="24-outline"
+                size={16}
+                style={{ color: buttonTextColor }}
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default HeaderPoint;
+
+

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

@@ -0,0 +1,110 @@
+import { HeaderPoint } from './HeaderPoint';
+
+export default {
+  title: 'Layout/HeaderPoint',
+  component: HeaderPoint,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => (
+    <HeaderPoint
+      backgroundColor="#2D5C63"
+      borderColor="#1F4549"
+      verticalLineColor="#4A8A92"
+      logoIconColor="#2D5C63"
+      companyNameColor="#FFFFFF"
+      dateColor="#E5E7EB"
+      buttonBackgroundColor="#2D5C63"
+      buttonBorderColor="#FFFFFF"
+      buttonTextColor="#FFFFFF"
+      date="Martes, 20 de octubre de 2023"
+      onPointClick={() => console.log('HEXA Core clickeado')}
+    />
+  ),
+};
+
+export const ConFechaAutomatica = {
+  render: () => (
+    <HeaderPoint
+      backgroundColor="#2D5C63"
+      borderColor="#1F4549"
+      verticalLineColor="#4A8A92"
+      logoIconColor="#2D5C63"
+      companyNameColor="#FFFFFF"
+      dateColor="#E5E7EB"
+      buttonBackgroundColor="#2D5C63"
+      buttonBorderColor="#FFFFFF"
+      buttonTextColor="#FFFFFF"
+    />
+  ),
+};
+
+export const ConLogoPersonalizado = {
+  render: () => (
+    <HeaderPoint
+      companyName="Mi Empresa"
+      logo="https://via.placeholder.com/32"
+      date="Lunes, 15 de enero de 2024"
+      pointLabel="Mi Punto"
+    />
+  ),
+};
+
+export const ConLabelsPersonalizados = {
+  render: () => (
+    <HeaderPoint
+      companyName="ACME Corp"
+      date="Viernes, 25 de diciembre de 2024"
+      pointLabel="ACME Hub"
+    />
+  ),
+};
+
+export const ConFondoNegro = {
+  render: () => (
+    <HeaderPoint
+      backgroundColor="#000000"
+      borderColor="#333333"
+      verticalLineColor="#666666"
+      logoIconColor="#000000"
+      companyNameColor="#FFFFFF"
+      dateColor="#CCCCCC"
+      date="Martes, 20 de octubre de 2023"
+      onPointClick={() => console.log('HEXA Core clickeado')}
+    />
+  ),
+};
+
+export const ConBotonesPersonalizados = {
+  render: () => (
+    <HeaderPoint
+      backgroundColor="#000000"
+      buttonBackgroundColor="#FF5733"
+      buttonBorderColor="#FFFFFF"
+      buttonTextColor="#FFFFFF"
+      date="Martes, 20 de octubre de 2023"
+      onPointClick={() => console.log('HEXA Core clickeado')}
+    />
+  ),
+};
+
+export const ConTodosLosColoresPersonalizados = {
+  render: () => (
+    <HeaderPoint
+      backgroundColor="#1A1A1A"
+      borderColor="#333333"
+      verticalLineColor="#666666"
+      logoBackgroundColor="#FFFFFF"
+      logoIconColor="#1A1A1A"
+      companyNameColor="#FFFFFF"
+      dateColor="#CCCCCC"
+      buttonBackgroundColor="#FF5733"
+      buttonBorderColor="#FFFFFF"
+      buttonTextColor="#FFFFFF"
+      date="Martes, 20 de octubre de 2023"
+      onPointClick={() => console.log('HEXA Core clickeado')}
+    />
+  ),
+};
+

package/src/components/Layout/NavPoint/NavPoint.jsx

@@ -0,0 +1,64 @@
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+const DEFAULT_ITEMS = [
+  { id: 'inicio', label: 'Inicio', icon: 'Squares2X2Icon' },
+  { id: 'docs', label: 'Docs', icon: 'DocumentTextIcon' },
+  { id: 'equipo', label: 'Equipo', icon: 'UserGroupIcon' },
+  { id: 'perfil', label: 'Mi perfil', icon: 'UserIcon' },
+];
+
+export const NavPoint = ({
+  items = DEFAULT_ITEMS,
+  activeItem,
+  onItemClick,
+  className = '',
+  ...props
+}) => {
+  return (
+    <nav
+      className={`fixed bottom-0 left-0 right-0 z-50 md:hidden bg-white rounded-t-lg shadow-md overflow-hidden ${className}`}
+      style={{ 
+        boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.1)'
+      }}
+      {...props}
+    >
+      <div className="flex items-stretch">
+        {items.map((item, index) => {
+          const isActive = activeItem === item.id;
+          const isFirst = index === 0;
+          const isLast = index === items.length - 1;
+          return (
+            <button
+              key={item.id}
+              onClick={() => onItemClick && onItemClick(item.id)}
+              className="flex flex-col items-center justify-center px-4 py-3 transition-all duration-200 cursor-pointer flex-1 relative"
+              style={{
+                backgroundColor: isActive ? '#2D5C63' : 'transparent',
+                borderRadius: isActive 
+                  ? (isFirst ? '16px 0 0 0' : isLast ? '0 16px 0 0' : '0')
+                  : '0',
+              }}
+            >
+              <Icon
+                name={item.icon}
+                variant="24-outline"
+                size={24}
+                style={{ color: isActive ? '#FFFFFF' : '#374151' }}
+              />
+              <Typography
+                variant="body-sm"
+                className="mt-1 font-medium"
+                style={{ color: isActive ? '#FFFFFF' : '#374151' }}
+              >
+                {item.label}
+              </Typography>
+            </button>
+          );
+        })}
+      </div>
+    </nav>
+  );
+};
+
+export default NavPoint;

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

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { NavPoint } from './NavPoint';
+
+export default {
+  title: 'Layout/NavPoint',
+  component: NavPoint,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('inicio');
+    return (
+      <div className="h-screen bg-gray-100 relative pb-20">
+        <div className="p-4">
+          <p className="text-gray-600">Contenido de la aplicación</p>
+          <p className="text-gray-600 mt-4">
+            El NavPoint está fijo en la parte inferior
+          </p>
+        </div>
+        <NavPoint
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+        />
+      </div>
+    );
+  },
+};
+
+export const ConItemsPersonalizados = {
+  render: () => {
+    const [activeItem, setActiveItem] = useState('dashboard');
+    const customItems = [
+      { id: 'dashboard', label: 'Dashboard', icon: 'ChartBarIcon' },
+      { id: 'mensajes', label: 'Mensajes', icon: 'ChatBubbleLeftRightIcon' },
+      { id: 'notificaciones', label: 'Notificaciones', icon: 'BellIcon' },
+      { id: 'configuracion', label: 'Config', icon: 'Cog6ToothIcon' },
+    ];
+    return (
+      <div className="h-screen bg-gray-100 relative pb-20">
+        <div className="p-4">
+          <p className="text-gray-600">Contenido con items personalizados</p>
+        </div>
+        <NavPoint
+          items={customItems}
+          activeItem={activeItem}
+          onItemClick={setActiveItem}
+        />
+      </div>
+    );
+  },
+};