anima-ds-nucleus 1.0.0 → 1.0.3

package/package.json

@@ -1,76 +1,76 @@
-{
-  "name": "anima-ds-nucleus",
-  "version": "1.0.0",
-  "description": "Anima Design System - A comprehensive React component library",
-  "author": "Nucleus Labs <ipvasallo@nucleus.com.ar>",
-  "license": "UNLICENSED",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/NucleusNova/anima-ds.git"
-  },
-  "keywords": [
-    "react",
-    "design system",
-    "ui",
-    "components",
-    "anima",
-    "nucleus"
-  ],
-  "type": "module",
-  "main": "./dist/anima-ds.cjs.js",
-  "module": "./dist/anima-ds.esm.js",
-  "exports": {
-    ".": {
-      "import": "./dist/anima-ds.esm.js",
-      "require": "./dist/anima-ds.cjs.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "build:app": "vite build --config vite.app.config.js",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "devDependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "@chromatic-com/storybook": "^4.1.3",
-    "@storybook/addon-a11y": "^10.0.8",
-    "@storybook/addon-docs": "^10.0.8",
-    "@storybook/addon-onboarding": "^10.0.8",
-    "@storybook/addon-vitest": "^10.0.8",
-    "@storybook/react-vite": "^10.0.8",
-    "@tailwindcss/postcss": "^4.1.17",
-    "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/browser-playwright": "^4.0.10",
-    "@vitest/coverage-v8": "^4.0.10",
-    "autoprefixer": "^10.4.22",
-    "playwright": "^1.56.1",
-    "postcss": "^8.5.6",
-    "storybook": "^10.0.8",
-    "tailwindcss": "^4.1.17",
-    "vite": "^7.2.2",
-    "vitest": "^4.0.10"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@heroicons/react": "^2.1.5",
-    "@mui/material": "^7.3.5",
-    "@mui/x-data-grid": "^8.18.0",
-    "apexcharts": "^5.3.6",
-    "i18next": "^25.6.2",
-    "react-apexcharts": "^1.8.0",
-    "react-i18next": "^16.3.3"
-  },
-  "peerDependencies": {
-    "react": ">=18 <21",
-    "react-dom": ">=18 <21"
-  }
-}
+{
+  "name": "anima-ds-nucleus",
+  "version": "1.0.3",
+  "description": "Anima Design System - A comprehensive React component library",
+  "author": "Nucleus Labs <ipvasallo@nucleus.com.ar>",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NucleusNova/anima-ds.git"
+  },
+  "keywords": [
+    "react",
+    "design system",
+    "ui",
+    "components",
+    "anima",
+    "nucleus"
+  ],
+  "type": "module",
+  "main": "./dist/anima-ds.cjs.js",
+  "module": "./dist/anima-ds.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/anima-ds.esm.js",
+      "require": "./dist/anima-ds.cjs.js"
+    },
+    "./styles": "./dist/anima-ds-nucleus.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:app": "vite build --config vite.app.config.js",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@storybook/addon-a11y": "^10.0.8",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-onboarding": "^10.0.8",
+    "@storybook/addon-vitest": "^10.0.8",
+    "@storybook/react-vite": "^10.0.8",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.10",
+    "@vitest/coverage-v8": "^4.0.10",
+    "autoprefixer": "^10.4.22",
+    "playwright": "^1.56.1",
+    "postcss": "^8.5.6",
+    "storybook": "^10.0.8",
+    "tailwindcss": "^4.1.17",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.10"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "react": ">=18 <21",
+    "react-dom": ">=18 <21",
+    "@heroicons/react": "^2.0.0",
+    "i18next": "^25.0.0",
+    "react-i18next": "^16.0.0",
+    "@mui/material": "^7.0.0",
+    "@mui/x-data-grid": "^8.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "apexcharts": "^5.0.0",
+    "react-apexcharts": "^1.8.0"
+  }
+}

package/src/components/Atoms/Typography/Typography.jsx

@@ -1,5 +1,5 @@
 export const Typography = ({
-  variant = 'body1',
+  variant = 'body-lg',
   component,
   children,
   className = '',
@@ -7,29 +7,61 @@ export const Typography = ({
   color,
   ...props
 }) => {
-  // Clases genéricas basadas en Figma - Usando las clases predefinidas
+  // Mapeo de pesos a clases CSS genéricas
+  const weightClasses = {
+    light: 'font-light',
+    regular: 'font-regular',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+  };
+
+  // Mapeo de colores a clases CSS genéricas
+  const colorClasses = {
+    black: 'color-black',
+    white: 'color-white',
+    'gray-900': 'color-gray-900',
+    'gray-700': 'color-gray-700',
+    'gray-600': 'color-gray-600',
+    'gray-500': 'color-gray-500',
+    'gray-400': 'color-gray-400',
+    'red-600': 'color-red-600',
+    'red-500': 'color-red-500',
+    'blue-600': 'color-blue-600',
+    'green-600': 'color-green-600',
+    'green-100': 'color-green-100',
+    brand: 'color-brand', // Color brand principal del sistema (#56B676)
+    main: 'color-main', // Main color (verde-azulado oscuro #38656D)
+    teal: 'color-teal', // Teal color (usado en botones #2D5C63)
+  };
+
+  // Clases genéricas basadas en Figma - Usando las clases predefinidas del CSS
   const variantClasses = {
-    pruebaColor: 'text-4xl font-bold text-brand-600',
-    h1: 'text-4xl font-bold',
-    h2: 'text-3xl font-bold',
-    h3: 'text-2xl font-semibold',
-    h4: 'text-xl font-semibold',
-    h5: 'text-lg font-medium',
-    h6: 'text-base font-medium',
-    body1: 'text-base',
-    body2: 'text-sm',
-    caption: 'text-xs text-gray-600',
-    overline: 'text-xs uppercase tracking-wide',
+    h1: 'text-h1',
+    h2: 'text-h2',
+    h3: 'text-h3',
+    h4: 'text-h4',
+    h5: 'text-h5',
+    h6: 'text-h6',
+    'body-lg': 'text-body-lg',
+    'body-md': 'text-body-md',
+    'body-sm': 'text-body-sm',
+    body1: 'text-body-lg', // Alias de body-lg
+    body2: 'text-body-md', // Alias de body-md
+    caption: 'text-body-sm color-gray-600', // Body small con color gris por defecto
+    overline: 'text-body-sm uppercase tracking-wide',
   };
 
   const Component = component || (variant.startsWith('h') ? variant : 'p');
   
-  // Construir clases base
-  let baseClasses = variantClasses[variant] || variantClasses.body1;
+  // Construir clases base usando las clases genéricas CSS
+  let baseClasses = variantClasses[variant] || variantClasses['body-lg'];
   
-  // Si se especifica un peso, agregarlo
+  // Si se especifica un peso, agregarlo (remover peso por defecto si existe)
   if (weight && weightClasses[weight]) {
-    baseClasses = `${baseClasses} ${weightClasses[weight]}`;
+    // Remover cualquier peso previo de las clases base (font-light, font-regular, etc.)
+    baseClasses = baseClasses.replace(/font-(light|regular|medium|semibold|bold)/g, '');
+    baseClasses = `${baseClasses} ${weightClasses[weight]}`.trim();
   }
 
   // Si se especifica un color, agregarlo (remover color por defecto si existe, como en caption)
@@ -49,4 +81,3 @@ export const Typography = ({
 };
 
 export default Typography;
-

package/src/components/Atoms/Typography/Typography.stories.jsx

@@ -15,7 +15,7 @@ export default {
     },
     color: {
       control: 'select',
-      options: ['black', 'white', 'gray-900', 'gray-700', 'gray-600', 'gray-500', 'gray-400', 'red-600', 'red-500', 'blue-600', 'green-600', 'green-100'],
+      options: ['black', 'white', 'gray-900', 'gray-700', 'gray-600', 'gray-500', 'gray-400', 'red-600', 'red-500', 'blue-600', 'green-600', 'green-100', 'brand', 'main', 'teal'],
       description: 'Color del texto usando clases genéricas predefinidas',
     },
   },
@@ -24,8 +24,8 @@ export default {
 // Ejemplos usando el componente Typography
 export const Heading1 = {
   args: {
-    variant: 'pruebaColor',
-    children: 'Heading 1',
+    variant: 'h1',
+    children: 'Heading 1 - IBM Plex Sans 40/60 Bold',
   },
 };
 

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,79 @@
+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,119 @@
+import { Typography } from '../../Atoms/Typography/Typography';
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const HeaderCore = ({
+  logo,
+  companyName = 'HEXA Core',
+  date,
+  pointLabel = 'HEXA Point',
+  onPointClick,
+  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);
+
+  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">
+          {/* Lado izquierdo: Línea vertical, logo y nombre */}
+          <div className="flex items-center space-x-4">
+            {/* Línea vertical */}
+            <div className="w-px h-8 bg-gray-400"></div>
+            
+            {/* Logo hexagonal */}
+            {logo ? (
+              <img
+                src={logo}
+                alt={companyName}
+                className="w-8 h-8"
+              />
+            ) : (
+              <svg
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="w-9 h-9"
+              >
+                {/* Hexágono con fondo verde oscuro y esquinas redondeadas - más ancho */}
+                <path
+                  d="M18 4L28 9L28 27L18 32L8 27L8 9L18 4Z"
+                  fill="#2D5C63"
+                  stroke="#2D5C63"
+                  strokeWidth="0.5"
+                  strokeLinejoin="round"
+                />
+                {/* H estilizada en blanco - bold con bordes redondeados */}
+                <path
+                  d="M15 13V23M21 13V23M15 18H21"
+                  stroke="white"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
+            
+            {/* Nombre de la empresa */}
+            <Typography
+              variant="body-md"
+              className="color-teal font-bold"
+            >
+              {companyName}
+            </Typography>
+          </div>
+
+          {/* Centro: Fecha */}
+          <div className="flex-1 flex justify-center">
+            <Typography
+              variant="body-md"
+              className="color-gray-500"
+            >
+              {capitalizedDate}
+            </Typography>
+          </div>
+
+          {/* Lado derecho: Botón HEXA Point */}
+          <div className="flex items-center">
+            <button
+              onClick={onPointClick}
+              className="px-4 py-2 border bg-white rounded-lg 
+                       hover:bg-gray-50 transition-colors flex items-center space-x-2"
+              style={{ borderColor: '#2D5C63' }}
+            >
+              <Typography
+                variant="body-md"
+                className="color-teal"
+              >
+                {pointLabel}
+              </Typography>
+              <Icon
+                name="ArrowUpRightIcon"
+                variant="24-outline"
+                size={16}
+                className="color-teal"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default HeaderCore;
+

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

@@ -0,0 +1,55 @@
+import { HeaderCore } from './HeaderCore';
+
+export default {
+  title: 'Layout/HeaderCore',
+  component: HeaderCore,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  render: () => (
+    <HeaderCore
+      companyName="HEXA Corp"
+      date="Martes, 20 de octubre de 2023"
+      newElementLabel="NUEVO ELEMENTO"
+      pointLabel="HEXA Point"
+      onNewElementClick={() => console.log('Nuevo elemento clickeado')}
+      onPointClick={() => console.log('HEXA Point clickeado')}
+    />
+  ),
+};
+
+export const ConFechaAutomatica = {
+  render: () => (
+    <HeaderCore
+      companyName="HEXA Corp"
+      newElementLabel="NUEVO ELEMENTO"
+      pointLabel="HEXA Point"
+    />
+  ),
+};
+
+export const ConLogoPersonalizado = {
+  render: () => (
+    <HeaderCore
+      companyName="Mi Empresa"
+      logo="https://via.placeholder.com/32"
+      date="Lunes, 15 de enero de 2024"
+      newElementLabel="CREAR"
+      pointLabel="Mi Punto"
+    />
+  ),
+};
+
+export const ConLabelsPersonalizados = {
+  render: () => (
+    <HeaderCore
+      companyName="ACME Corp"
+      date="Viernes, 25 de diciembre de 2024"
+      newElementLabel="AGREGAR"
+      pointLabel="ACME Hub"
+    />
+  ),
+};
+
+