anima-ds-nucleus 1.0.3 → 1.0.4

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>
+    );
+  },
+};