anima-ds-nucleus 1.0.0

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +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"
+  }
+}

package/src/components/Atoms/Alert/Alert.jsx

@@ -0,0 +1,52 @@
+import { Icon } from '../Icon/Icon';
+
+export const Alert = ({
+  variant = 'info',
+  title,
+  children,
+  onClose,
+  className = '',
+  ...props
+}) => {
+  const variantClasses = {
+    info: 'bg-blue-50 border-blue-200 text-blue-800',
+    success: 'bg-green-50 border-green-200 text-green-800',
+    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    danger: 'bg-red-50 border-red-200 text-red-800',
+  };
+
+  const iconMap = {
+    info: 'InformationCircleIcon',
+    success: 'CheckCircleIcon',
+    warning: 'ExclamationTriangleIcon',
+    danger: 'XCircleIcon',
+  };
+
+  const classes = `border rounded-lg p-4 ${variantClasses[variant]} ${className}`;
+
+  return (
+    <div className={classes} role="alert" {...props}>
+      <div className="flex items-start">
+        <Icon
+          name={iconMap[variant]}
+          className="mr-3 h-5 w-5 flex-shrink-0"
+        />
+        <div className="flex-1">
+          {title && <h3 className="font-semibold mb-1">{title}</h3>}
+          <div>{children}</div>
+        </div>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="ml-4 text-current opacity-50 hover:opacity-75"
+          >
+            <Icon name="XMarkIcon" className="h-5 w-5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Alert;
+

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

@@ -0,0 +1,62 @@
+import { Alert } from './Alert';
+
+export default {
+  title: 'Atoms/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['info', 'success', 'warning', 'danger'],
+    },
+  },
+};
+
+export const Info = {
+  args: {
+    variant: 'info',
+    title: 'Information',
+    children: 'This is an informational alert message.',
+  },
+};
+
+export const Success = {
+  args: {
+    variant: 'success',
+    title: 'Success',
+    children: 'Your action was completed successfully.',
+  },
+};
+
+export const Warning = {
+  args: {
+    variant: 'warning',
+    title: 'Warning',
+    children: 'Please review this information carefully.',
+  },
+};
+
+export const Danger = {
+  args: {
+    variant: 'danger',
+    title: 'Error',
+    children: 'Something went wrong. Please try again.',
+  },
+};
+
+export const WithoutTitle = {
+  args: {
+    variant: 'info',
+    children: 'This is an alert without a title.',
+  },
+};
+
+export const Closable = {
+  args: {
+    variant: 'info',
+    title: 'Closable Alert',
+    children: 'This alert can be closed.',
+    onClose: () => alert('Alert closed'),
+  },
+};
+

package/src/components/Atoms/Avatar/Avatar.jsx

@@ -0,0 +1,60 @@
+import { Icon } from '../Icon/Icon';
+
+export const Avatar = ({
+  src,
+  alt = '',
+  name,
+  size = 'medium',
+  variant = 'circle',
+  className = '',
+  ...props
+}) => {
+  const sizeClasses = {
+    small: 'w-8 h-8 text-xs',
+    medium: 'w-10 h-10 text-sm',
+    large: 'w-12 h-12 text-base',
+    xl: 'w-16 h-16 text-lg',
+  };
+
+  const variantClasses = {
+    circle: 'rounded-full',
+    square: 'rounded-lg',
+  };
+
+  const getInitials = (name) => {
+    if (!name) return '';
+    const parts = name.trim().split(' ');
+    if (parts.length === 1) return parts[0][0].toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  };
+
+  const baseClasses = `inline-flex items-center justify-center bg-gray-200 text-gray-600 font-medium ${sizeClasses[size]} ${variantClasses[variant]} ${className}`;
+
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt={alt || name}
+        className={`${sizeClasses[size]} ${variantClasses[variant]} object-cover ${className}`}
+        {...props}
+      />
+    );
+  }
+
+  if (name) {
+    return (
+      <div className={baseClasses} {...props}>
+        {getInitials(name)}
+      </div>
+    );
+  }
+
+  return (
+    <div className={baseClasses} {...props}>
+      <Icon name="UserIcon" className="w-1/2 h-1/2" />
+    </div>
+  );
+};
+
+export default Avatar;
+

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

@@ -0,0 +1,61 @@
+import { Avatar } from './Avatar';
+
+export default {
+  title: 'Atoms/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'xl'],
+    },
+    variant: {
+      control: 'select',
+      options: ['circle', 'square'],
+    },
+  },
+};
+
+export const WithImage = {
+  args: {
+    src: 'https://i.pravatar.cc/150?img=1',
+    alt: 'User avatar',
+    size: 'medium',
+  },
+};
+
+export const WithInitials = {
+  args: {
+    name: 'John Doe',
+    size: 'medium',
+  },
+};
+
+export const WithoutName = {
+  args: {
+    size: 'medium',
+  },
+};
+
+export const Small = {
+  args: {
+    name: 'Jane Smith',
+    size: 'small',
+  },
+};
+
+export const Large = {
+  args: {
+    name: 'Bob Johnson',
+    size: 'large',
+  },
+};
+
+export const Square = {
+  args: {
+    name: 'Alice Williams',
+    variant: 'square',
+    size: 'medium',
+  },
+};
+

package/src/components/Atoms/Badge/Badge.jsx

@@ -0,0 +1,34 @@
+export const Badge = ({
+  children,
+  variant = 'default',
+  size = 'medium',
+  className = '',
+  ...props
+}) => {
+  const baseClasses = 'inline-flex items-center font-medium rounded-full';
+
+  const variantClasses = {
+    default: 'bg-gray-100 text-gray-800',
+    primary: 'bg-blue-100 text-blue-800',
+    success: 'bg-green-100 text-green-800',
+    warning: 'bg-yellow-100 text-yellow-800',
+    danger: 'bg-red-100 text-red-800',
+  };
+
+  const sizeClasses = {
+    small: 'px-2 py-0.5 text-xs',
+    medium: 'px-2.5 py-1 text-sm',
+    large: 'px-3 py-1.5 text-base',
+  };
+
+  const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
+
+  return (
+    <span className={classes} {...props}>
+      {children}
+    </span>
+  );
+};
+
+export default Badge;
+

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

@@ -0,0 +1,55 @@
+import { Badge } from './Badge';
+
+export default {
+  title: 'Atoms/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'success', 'warning', 'danger'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    children: 'Badge',
+    variant: 'default',
+  },
+};
+
+export const Primary = {
+  args: {
+    children: 'Primary',
+    variant: 'primary',
+  },
+};
+
+export const Success = {
+  args: {
+    children: 'Success',
+    variant: 'success',
+  },
+};
+
+export const Small = {
+  args: {
+    children: 'Small',
+    variant: 'primary',
+    size: 'small',
+  },
+};
+
+export const Large = {
+  args: {
+    children: 'Large Badge',
+    variant: 'primary',
+    size: 'large',
+  },
+};
+

package/src/components/Atoms/Button/Button.jsx

@@ -0,0 +1,281 @@
+import { useState } from 'react';
+
+/**
+ * Button Component
+ * 
+ * Componente de botón reutilizable que sigue el design system de Anima DS.
+ * Soporta múltiples tipos (Primary, Secondary, Ghost), colores (Teal, Grape, Honey) y tamaños (Small, Default, Large).
+ * Los estados deshabilitados se manejan con el prop disabled.
+ * 
+ * @param {string} texto - Texto a mostrar en el botón (alias de children)
+ * @param {React.ReactNode} children - Contenido del botón
+ * @param {string} tipo - Tipo del botón: 'Primary', 'Secondary', 'Ghost' (alias de variant)
+ * @param {string} variant - Alias de tipo para mayor compatibilidad
+ * @param {string} color - Color del botón: 'Teal', 'Grape', 'Honey'
+ * @param {string} tamaño - Tamaño del botón: 'Small', 'Default', 'Large'
+ * @param {function} onClick - Función a ejecutar cuando se hace click
+ * @param {string} type - Tipo de botón HTML (button, submit, reset)
+ * @param {boolean} disabled - Estado deshabilitado
+ * @param {string} className - Clases CSS adicionales
+ * @param {object} props - Props adicionales del botón HTML
+ */
+export const Button = ({
+  texto,
+  children,
+  tipo,
+  variant,
+  color = 'Teal',
+  tamaño = 'Default',
+  onClick,
+  type = 'button',
+  disabled = false,
+  className = '',
+  ...props
+}) => {
+  // Normalizar props para compatibilidad:
+  // - permitir usar variant además de tipo
+  // - permitir usar children además de texto
+  const resolvedTipo = tipo || variant || 'Primary';
+  const resolvedContent = children != null ? children : texto;
+  // Colores del design system
+  const COLOR_PALETTE = {
+    Teal: '#2D5C63',
+    Grape: '#6D3856', // morado/plum profundo
+    Honey: '#E8B061', // naranja/ámbar claro
+  };
+  
+  // Color de texto para Primary según el color del botón
+  const PRIMARY_TEXT_COLOR = {
+    Teal: '#ffffff',
+    Grape: '#ffffff',
+    Honey: '#374151', // gray-700 (gris oscuro/carbón)
+  };
+  
+  // Color para Secondary según el color del botón (puede diferir del Primary)
+  const SECONDARY_COLOR = {
+    Teal: COLOR_PALETTE.Teal,
+    Grape: COLOR_PALETTE.Grape,
+    Honey: '#80501F', // marrón medio-oscuro para Secondary
+  };
+  
+  // Color para Ghost según el color del botón
+  const GHOST_COLOR = {
+    Teal: COLOR_PALETTE.Teal,
+    Grape: COLOR_PALETTE.Grape,
+    Honey: '#80501F', // marrón medio-oscuro para Ghost (igual que Secondary)
+  };
+  
+  // Color de texto para Ghost según el color del botón
+  const GHOST_TEXT_COLOR = {
+    Teal: COLOR_PALETTE.Teal,
+    Grape: COLOR_PALETTE.Grape,
+    Honey: '#6E4D11', // marrón oscuro para Ghost
+  };
+  
+  // Colores para estados deshabilitados (grises)
+  const DISABLED_COLORS = {
+    border: '#D1D5DB', // gray-300
+    text: '#9CA3AF',   // gray-400
+    background: '#F3F4F6', // gray-100
+  };
+  
+  const BUTTON_COLOR = COLOR_PALETTE[color] || COLOR_PALETTE.Teal;
+  
+  // Estado para manejar hover
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // Determinar si el botón está deshabilitado
+  const isDisabled = disabled;
+  
+  // Clases base comunes a todos los botones
+  const baseClasses = 'font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
+  
+  // Clases de tamaño con padding y texto
+  const sizeClasses = {
+    Small: 'px-3 py-1.5 text-sm rounded-md',
+    Default: 'px-4 py-2 text-base rounded-lg',
+    Large: 'px-6 py-3 text-lg rounded-lg',
+  };
+  
+  // Función helper para convertir hex a rgba
+  const hexToRgba = (hex, alpha = 1) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  };
+  
+  // Estilos inline con colores según el tipo y color
+  const getInlineStyles = () => {
+    const styles = {};
+    
+    // Si está deshabilitado, usar colores grises
+    if (isDisabled) {
+      switch (resolvedTipo) {
+        case 'Primary':
+          styles.backgroundColor = DISABLED_COLORS.background;
+          styles.color = DISABLED_COLORS.text;
+          break;
+        
+        case 'Secondary':
+          styles.borderColor = DISABLED_COLORS.border;
+          styles.color = DISABLED_COLORS.text;
+          styles.borderWidth = '1px';
+          styles.borderStyle = 'solid';
+          styles.backgroundColor = 'transparent';
+          break;
+        
+        case 'Ghost':
+          styles.color = DISABLED_COLORS.text;
+          styles.backgroundColor = 'transparent';
+          break;
+      }
+      return styles;
+    }
+    
+    // Estilos para estados habilitados
+    switch (resolvedTipo) {
+      case 'Primary':
+        styles.backgroundColor = BUTTON_COLOR;
+        styles.color = PRIMARY_TEXT_COLOR[color] || '#ffffff';
+        if (isHovered) {
+          styles.opacity = '0.9';
+        }
+        break;
+      
+      case 'Secondary':
+        const secondaryColor = SECONDARY_COLOR[color] || BUTTON_COLOR;
+        styles.borderColor = secondaryColor;
+        styles.color = secondaryColor;
+        styles.borderWidth = '1px';
+        styles.borderStyle = 'solid';
+        if (isHovered) {
+          styles.backgroundColor = hexToRgba(secondaryColor, 0.1);
+        } else {
+          // Fondo blanco para Honey y Grape Secondary, transparente para los demás
+          styles.backgroundColor = (color === 'Honey' || color === 'Grape') ? '#ffffff' : 'transparent';
+        }
+        break;
+      
+      case 'Ghost':
+        const ghostColor = GHOST_COLOR[color] || BUTTON_COLOR;
+        const ghostTextColor = GHOST_TEXT_COLOR[color] || BUTTON_COLOR;
+        
+        // Para Honey, Ghost tiene fondo blanco y texto oscuro, sin borde
+        if (color === 'Honey') {
+          styles.color = ghostTextColor;
+          styles.backgroundColor = '#ffffff';
+          if (isHovered) {
+            styles.backgroundColor = hexToRgba(ghostColor, 0.1);
+          }
+        } else {
+          // Para otros colores, Ghost es sin borde
+          styles.color = ghostTextColor;
+          styles.backgroundColor = isHovered 
+            ? hexToRgba(ghostColor, 0.1) 
+            : 'transparent';
+        }
+        break;
+    }
+    
+    return styles;
+  };
+  
+  // Clases según el tipo/variante
+  const getVariantClasses = () => {
+    if (isDisabled) {
+      switch (resolvedTipo) {
+        case 'Primary':
+          return {
+            base: 'active:opacity-80',
+            disabled: 'cursor-not-allowed',
+          };
+        
+        case 'Secondary':
+          return {
+            base: 'border active:opacity-80',
+            disabled: 'cursor-not-allowed',
+          };
+        
+        case 'Ghost':
+          return {
+            base: 'active:opacity-80',
+            disabled: 'cursor-not-allowed',
+          };
+        
+        default:
+          return {
+            base: 'active:opacity-80',
+            disabled: 'cursor-not-allowed',
+          };
+      }
+    }
+    
+    switch (resolvedTipo) {
+      case 'Primary':
+        // Para Honey, el texto no debe ser blanco
+        const primaryTextClass = color === 'Honey' ? '' : 'text-white';
+        return {
+          base: `${primaryTextClass} active:opacity-80`.trim(),
+          disabled: 'opacity-50 cursor-not-allowed',
+        };
+      
+      case 'Secondary':
+        return {
+          base: 'border active:opacity-80',
+          disabled: 'opacity-50 cursor-not-allowed',
+        };
+      
+      case 'Ghost':
+        return {
+          base: 'active:opacity-80',
+          disabled: 'opacity-50 cursor-not-allowed',
+        };
+      
+      default:
+        return {
+          base: 'text-white active:opacity-80',
+          disabled: 'opacity-50 cursor-not-allowed',
+        };
+    }
+  };
+  
+  const variantClasses = getVariantClasses();
+  const sizeClass = sizeClasses[tamaño] || sizeClasses.Default;
+  const inlineStyles = getInlineStyles();
+  
+  // Construir clases finales
+  const classes = `
+    ${baseClasses}
+    ${sizeClass}
+    ${variantClasses.base}
+    ${isDisabled ? variantClasses.disabled : 'cursor-pointer'}
+    ${className}
+  `.trim().replace(/\s+/g, ' ');
+  
+  // Manejar el click - no ejecutar si está deshabilitado
+  const handleClick = (e) => {
+    if (!isDisabled && onClick) {
+      onClick(e);
+    }
+  };
+  
+  return (
+    <button
+      type={type}
+      className={classes}
+      style={inlineStyles}
+      disabled={isDisabled}
+      onClick={handleClick}
+      onMouseEnter={() => !isDisabled && setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      {...props}
+    >
+      {resolvedContent}
+    </button>
+  );
+};
+
+
+export default Button;
+