anima-ds-nucleus 1.0.2 → 1.0.4

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

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Avatar } from '../../Atoms/Avatar/Avatar';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const HeaderConBuscador = ({
+  searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
+  userName,
+  userAvatar,
+  notificationCount = 0,
+  onSearch,
+  onNotificationClick,
+  onUserClick,
+  className = '',
+  ...props
+}) => {
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleSearchChange = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
+
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    if (onSearch) {
+      onSearch(searchValue);
+    }
+  };
+
+  return (
+    <header
+      className={`bg-white 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">
+          {/* Barra de búsqueda */}
+          <div className="flex-1 max-w-2xl mr-8">
+            <form onSubmit={handleSearchSubmit} className="relative">
+              <input
+                type="text"
+                value={searchValue}
+                onChange={handleSearchChange}
+                placeholder={searchPlaceholder}
+                className="w-full pl-4 pr-12 py-2.5 bg-slate-50 border border-gray-200 rounded-lg 
+                         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                         text-body-md color-gray-700 placeholder:color-gray-400"
+              />
+              <button
+                type="submit"
+                className="absolute right-3 top-1/2 transform -translate-y-1/2 
+                         hover:opacity-70 transition-opacity"
+                aria-label="Buscar"
+              >
+                <Icon 
+                  name="MagnifyingGlassIcon" 
+                  variant="24-outline" 
+                  size={20} 
+                  className="color-gray-400" 
+                />
+              </button>
+            </form>
+          </div>
+
+          {/* Notificaciones y Perfil */}
+          <div className="flex items-center space-x-6">
+            {/* Icono de notificaciones */}
+            {notificationCount !== undefined && (
+              <button
+                onClick={onNotificationClick}
+                className="flex items-center space-x-2 p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                aria-label="Notificaciones"
+              >
+                <Icon 
+                  name="BellIcon" 
+                  variant="24-outline" 
+                  size={24} 
+                  className="color-gray-600" 
+                />
+                {notificationCount > 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'
+                    }}
+                  >
+                    {notificationCount > 9 ? '9+' : notificationCount}
+                  </span>
+                )}
+              </button>
+            )}
+
+            {/* Perfil de usuario */}
+            {userName && (
+              <button
+                onClick={onUserClick}
+                className="flex items-center space-x-3 hover:bg-gray-50 
+                         rounded-lg px-2 py-1.5 transition-colors"
+                aria-label="Perfil de usuario"
+              >
+                <Avatar
+                  src={userAvatar}
+                  name={userName}
+                  size="medium"
+                  variant="circle"
+                />
+                <Typography
+                  variant="body-md"
+                  className="color-teal font-medium hidden sm:block"
+                >
+                  {userName}
+                </Typography>
+                <Icon
+                  name="ChevronDownIcon"
+                  variant="24-outline"
+                  size={20}
+                  className="color-gray-500 hidden sm:block"
+                />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default HeaderConBuscador;
+

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

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { HeaderConBuscador } from './HeaderConBuscador';
+
+export default {
+  title: 'Layout/HeaderConBuscador',
+  component: HeaderConBuscador,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => {
+    const [searchValue, setSearchValue] = useState('');
+    return (
+      <HeaderConBuscador
+        searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+        userName="Maria Garcia Alonso"
+        userAvatar="https://i.pravatar.cc/150?img=47"
+        notificationCount={2}
+        onSearch={(value) => {
+          setSearchValue(value);
+          console.log('Buscando:', value);
+        }}
+        onNotificationClick={() => {
+          console.log('Notificaciones clickeadas');
+        }}
+        onUserClick={() => {
+          console.log('Perfil clickeado');
+        }}
+      />
+    );
+  },
+};
+
+export const SinNotificaciones = {
+  render: () => (
+    <HeaderConBuscador
+      userName="Juan Pérez"
+      notificationCount={0}
+    />
+  ),
+};
+
+export const SinNotificacionesProp = {
+  render: () => (
+    <HeaderConBuscador
+      userName="Ana López"
+    />
+  ),
+};
+
+export const ConMuchasNotificaciones = {
+  render: () => (
+    <HeaderConBuscador
+      userName="Carlos Rodríguez"
+      notificationCount={15}
+    />
+  ),
+};
+
+export const SinAvatar = {
+  render: () => (
+    <HeaderConBuscador
+      userName="Laura Martínez"
+      notificationCount={3}
+    />
+  ),
+};
+
+export const CustomSearchPlaceholder = {
+  render: () => (
+    <HeaderConBuscador
+      searchPlaceholder="Buscar en el sistema..."
+      userName="Pedro Sánchez"
+      notificationCount={1}
+    />
+  ),
+};
+
+
+
+
+
+
+
+
+

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

@@ -0,0 +1,347 @@
+import { useState } from 'react';
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Avatar } from '../../Atoms/Avatar/Avatar';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const HeaderCore = ({
+  searchPlaceholder = 'Buscar empleados, reportes, configuraciones...',
+  userName,
+  userAvatar,
+  notificationCount = 0,
+  onSearch,
+  onNotificationClick,
+  onUserClick,
+  className = '',
+  ...props
+}) => {
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleSearchChange = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
+
+  const handleSearchSubmit = (e) => {
+    e.preventDefault();
+    if (onSearch) {
+      onSearch(searchValue);
+    }
+  };
+
+  return (
+    <header
+      className={`bg-white border-b border-gray-200 ${className}`}
+      {...props}
+    >
+      <style>{`
+        .header-search-input {
+          border-color: #9ca3af;
+        }
+        .header-search-input::placeholder {
+          color: #9ca3af !important;
+          opacity: 1 !important;
+        }
+        .header-search-icon-container {
+          border-color: #9ca3af;
+        }
+        .header-search-form:focus-within .header-search-input {
+          border-color: #3b82f6 !important;
+          box-shadow: 0 0 0 1px #3b82f6;
+        }
+        .header-search-form:focus-within .header-search-icon-container {
+          border-color: #3b82f6 !important;
+          box-shadow: 0 0 0 1px #3b82f6;
+        }
+        @media (max-width: 768px) {
+          .header-search-input {
+            font-size: 12px !important;
+            padding-left: 8px !important;
+            padding-right: 8px !important;
+          }
+          .header-search-icon-container {
+            width: 36px !important;
+          }
+        }
+        @media (max-width: 480px) {
+          .header-mobile-top-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 8px 4px;
+            min-height: 48px;
+          }
+          .header-mobile-search-row {
+            display: block;
+            padding: 12px 4px 8px 4px;
+          }
+          .header-desktop-layout {
+            display: none;
+          }
+        }
+        @media (min-width: 481px) {
+          .header-mobile-layout {
+            display: none;
+          }
+        }
+      `}</style>
+      
+      <div className="w-full" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
+        {/* Layout Desktop (más de 480px) */}
+        <div className="header-desktop-layout flex items-center justify-between h-16">
+          {/* Barra de búsqueda con icono a la derecha */}
+          <div className="flex-1 mr-2 md:mr-4" style={{ maxWidth: 'none', minWidth: '0' }}>
+            <form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">
+              {/* Input de búsqueda */}
+              <input
+                type="text"
+                value={searchValue}
+                onChange={handleSearchChange}
+                placeholder={searchPlaceholder}
+                className="header-search-input flex-1 pl-2 md:pl-4 pr-2 md:pr-4 py-2 md:py-2.5 bg-white border border-gray-400 rounded-l-lg 
+                         focus:outline-none text-sm md:text-base"
+                style={{ 
+                  height: '40px', 
+                  borderRight: 'none', 
+                  borderTopRightRadius: '0', 
+                  borderBottomRightRadius: '0',
+                  color: '#374151',
+                  fontFamily: 'IBM Plex Sans',
+                  fontWeight: 400,
+                  fontStyle: 'italic',
+                  fontSize: '14px',
+                  lineHeight: '20px',
+                  letterSpacing: '0px'
+                }}
+              />
+              
+              {/* Recuadro con icono de buscar a la derecha */}
+              <div 
+                className="header-search-icon-container flex items-center justify-center border border-gray-400 rounded-r-lg bg-white"
+                style={{
+                  width: '40px',
+                  height: '40px',
+                  borderTopLeftRadius: '0',
+                  borderBottomLeftRadius: '0'
+                }}
+              >
+                <Icon 
+                  name="MagnifyingGlassIcon" 
+                  variant="24-outline" 
+                  size={20} 
+                  className="color-gray-600" 
+                />
+              </div>
+            </form>
+          </div>
+
+          {/* Notificaciones y Perfil */}
+          <div className="flex items-center space-x-3 md:space-x-6 flex-shrink-0" style={{ marginLeft: 'auto', paddingRight: '0px' }}>
+            {/* Icono de notificaciones */}
+            {notificationCount !== undefined && (
+              <button
+                onClick={onNotificationClick}
+                className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                aria-label="Notificaciones"
+              >
+                <Icon 
+                  name="BellIcon" 
+                  variant="24-outline" 
+                  size={24} 
+                  className="color-gray-600" 
+                />
+                {notificationCount > 0 && (
+                  <span
+                    className="absolute -top-1 -right-1 px-1.5 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'
+                    }}
+                  >
+                    {notificationCount > 9 ? '9+' : notificationCount}
+                  </span>
+                )}
+              </button>
+            )}
+
+            {/* Perfil de usuario */}
+            {userName && (
+              <button
+                onClick={onUserClick}
+                className="flex items-center space-x-3 hover:bg-gray-50 
+                         rounded-lg px-2 py-1.5 transition-colors"
+                aria-label="Perfil de usuario"
+              >
+                <Avatar
+                  src={userAvatar}
+                  name={userName}
+                  size="medium"
+                  variant="circle"
+                />
+                <Typography
+                  variant="body-lg"
+                  className="color-gray-700 hidden md:block"
+                  style={{
+                    fontFamily: 'IBM Plex Sans',
+                    fontWeight: 400,
+                    fontStyle: 'normal',
+                    fontSize: '16px',
+                    lineHeight: '24px',
+                    letterSpacing: '0%',
+                    verticalAlign: 'middle'
+                  }}
+                >
+                  {userName}
+                </Typography>
+                <Icon
+                  name="ChevronDownIcon"
+                  variant="24-outline"
+                  size={20}
+                  className="color-gray-500"
+                />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Layout Mobile (480px o menos) */}
+        <div className="header-mobile-layout">
+          {/* Primera fila: Menú, Core, Notificaciones y Avatar */}
+          <div className="header-mobile-top-row">
+            {/* Lado izquierdo: Menú hamburguesa y Core */}
+            <div className="flex items-center space-x-2">
+              {/* Botón menú hamburguesa */}
+              <button
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                aria-label="Menú"
+              >
+                <Icon 
+                  name="Bars3Icon" 
+                  variant="24-outline" 
+                  size={24} 
+                  className="color-gray-700" 
+                />
+              </button>
+              
+              {/* Texto "Core" */}
+              <Typography
+                variant="h6"
+                style={{
+                  color: '#2D5C63',
+                  fontSize: '24px',
+                  fontFamily: 'IBM Plex Sans',
+                  fontWeight: 600,
+                  lineHeight: '1.2',
+                  margin: 0
+                }}
+              >
+                Core
+              </Typography>
+            </div>
+
+            {/* Lado derecho: Notificaciones y Avatar */}
+            <div className="flex items-center space-x-3">
+              {/* Icono de notificaciones */}
+              {notificationCount !== undefined && (
+                <button
+                  onClick={onNotificationClick}
+                  className="relative p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                  aria-label="Notificaciones"
+                >
+                  <Icon 
+                    name="BellIcon" 
+                    variant="24-outline" 
+                    size={24} 
+                    className="color-gray-600" 
+                  />
+                  {notificationCount > 0 && (
+                    <span
+                      className="absolute -top-1 -right-1 px-1.5 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'
+                      }}
+                    >
+                      {notificationCount > 9 ? '9+' : notificationCount}
+                    </span>
+                  )}
+                </button>
+              )}
+
+              {/* Avatar (sin nombre) */}
+              {userAvatar && (
+                <button
+                  onClick={onUserClick}
+                  className="hover:bg-gray-50 rounded-lg transition-colors"
+                  aria-label="Perfil de usuario"
+                >
+                  <Avatar
+                    src={userAvatar}
+                    name={userName || ''}
+                    size="medium"
+                    variant="circle"
+                  />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Segunda fila: Barra de búsqueda */}
+          <div className="header-mobile-search-row">
+            <form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">
+              {/* Input de búsqueda */}
+              <input
+                type="text"
+                value={searchValue}
+                onChange={handleSearchChange}
+                placeholder={searchPlaceholder}
+                className="header-search-input flex-1 pl-3 pr-3 py-2 bg-white border border-gray-400 rounded-l-lg 
+                         focus:outline-none text-sm"
+                style={{ 
+                  height: '40px', 
+                  borderRight: 'none', 
+                  borderTopRightRadius: '0', 
+                  borderBottomRightRadius: '0',
+                  color: '#374151',
+                  fontFamily: 'IBM Plex Sans',
+                  fontWeight: 400,
+                  fontStyle: 'italic',
+                  fontSize: '14px',
+                  lineHeight: '20px',
+                  letterSpacing: '0px'
+                }}
+              />
+              
+              {/* Recuadro con icono de buscar a la derecha */}
+              <div 
+                className="header-search-icon-container flex items-center justify-center border border-gray-400 rounded-r-lg bg-white"
+                style={{
+                  width: '40px',
+                  height: '40px',
+                  borderTopLeftRadius: '0',
+                  borderBottomLeftRadius: '0'
+                }}
+              >
+                <Icon 
+                  name="MagnifyingGlassIcon" 
+                  variant="24-outline" 
+                  size={20} 
+                  className="color-gray-600" 
+                />
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default HeaderCore;
+

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

@@ -0,0 +1,59 @@
+import { HeaderCore } from './HeaderCore';
+
+export default {
+  title: 'Layout/HeaderCore',
+  component: HeaderCore,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => (
+    <HeaderCore
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Maria García Alonso"
+      userAvatar="https://i.pravatar.cc/150?img=12"
+      notificationCount={7}
+      onSearch={(value) => console.log('Búsqueda:', value)}
+      onNotificationClick={() => console.log('Notificaciones clickeadas')}
+      onUserClick={() => console.log('Usuario clickeado')}
+    />
+  ),
+};
+
+export const SinNotificaciones = {
+  render: () => (
+    <HeaderCore
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Juan Pérez"
+      userAvatar="https://i.pravatar.cc/150?img=33"
+      notificationCount={0}
+    />
+  ),
+};
+
+export const ConMuchasNotificaciones = {
+  render: () => (
+    <HeaderCore
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Ana Martínez"
+      userAvatar="https://i.pravatar.cc/150?img=47"
+      notificationCount={15}
+    />
+  ),
+};
+
+export const SinUsuario = {
+  render: () => (
+    <HeaderCore
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      notificationCount={3}
+    />
+  ),
+};
+
+
+
+
+
+
+