anima-ds-nucleus 1.0.0

package/src/components/Atoms/Tooltip/Tooltip.jsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+
+export const Tooltip = ({
+  content,
+  children,
+  position = 'top',
+  className = '',
+  ...props
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const positionClasses = {
+    top: 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 transform -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 transform -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 transform -translate-y-1/2 ml-2',
+  };
+
+  const arrowClasses = {
+    top: 'top-full left-1/2 transform -translate-x-1/2 border-t-gray-900',
+    bottom: 'bottom-full left-1/2 transform -translate-x-1/2 border-b-gray-900',
+    left: 'left-full top-1/2 transform -translate-y-1/2 border-l-gray-900',
+    right: 'right-full top-1/2 transform -translate-y-1/2 border-r-gray-900',
+  };
+
+  return (
+    <div
+      className={`relative inline-block ${className}`}
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+      {...props}
+    >
+      {children}
+      {isVisible && (
+        <div
+          className={`absolute z-50 px-4 py-3 text-sm text-white bg-gray-900 rounded-lg shadow-lg whitespace-nowrap ${positionClasses[position]}`}
+        >
+          {content}
+          <div
+            className={`absolute w-0 h-0 border-4 ${arrowClasses[position]}`}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;
+

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

@@ -0,0 +1,58 @@
+import { Tooltip } from './Tooltip';
+import { Button } from '../Button/Button';
+import { Icon } from '../Icon/Icon';
+
+export default {
+  title: 'Atoms/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+    },
+  },
+};
+
+export const Top = {
+  args: {
+    content: 'Este es un tooltip en la parte superior',
+    position: 'top',
+    children: <Button>Pasa el mouse aquí</Button>,
+  },
+};
+
+export const Bottom = {
+  args: {
+    content: 'Este es un tooltip en la parte inferior',
+    position: 'bottom',
+    children: <Button>Pasa el mouse aquí</Button>,
+  },
+};
+
+export const Left = {
+  args: {
+    content: 'Este es un tooltip a la izquierda',
+    position: 'left',
+    children: <Button>Pasa el mouse aquí</Button>,
+  },
+};
+
+export const Right = {
+  args: {
+    content: 'Este es un tooltip a la derecha',
+    position: 'right',
+    children: <Button>Pasa el mouse aquí</Button>,
+  },
+};
+
+export const WithIcon = {
+  render: () => (
+    <Tooltip content="Información adicional">
+      <button className="p-2 rounded-full hover:bg-gray-100">
+        <Icon name="InformationCircleIcon" className="h-5 w-5 text-gray-500" />
+      </button>
+    </Tooltip>
+  ),
+};
+

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

@@ -0,0 +1,52 @@
+export const Typography = ({
+  variant = 'body1',
+  component,
+  children,
+  className = '',
+  weight,
+  color,
+  ...props
+}) => {
+  // Clases genéricas basadas en Figma - Usando las clases predefinidas
+  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',
+  };
+
+  const Component = component || (variant.startsWith('h') ? variant : 'p');
+  
+  // Construir clases base
+  let baseClasses = variantClasses[variant] || variantClasses.body1;
+  
+  // Si se especifica un peso, agregarlo
+  if (weight && weightClasses[weight]) {
+    baseClasses = `${baseClasses} ${weightClasses[weight]}`;
+  }
+
+  // Si se especifica un color, agregarlo (remover color por defecto si existe, como en caption)
+  if (color && colorClasses[color]) {
+    // Remover cualquier color previo de las clases base
+    baseClasses = baseClasses.replace(/color-\w+(-\w+)?/g, '');
+    baseClasses = `${baseClasses} ${colorClasses[color]}`.trim();
+  }
+
+  const classes = `${baseClasses} ${className}`.trim();
+
+  return (
+    <Component className={classes} {...props}>
+      {children}
+    </Component>
+  );
+};
+
+export default Typography;
+

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

@@ -0,0 +1,267 @@
+import { Typography } from './Typography';
+
+export default {
+  title: 'Atoms/Typography',
+  component: Typography,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body-lg', 'body-md', 'body-sm', 'body1', 'body2', 'caption', 'overline'],
+    },
+    weight: {
+      control: 'select',
+      options: ['light', 'regular', 'medium', 'semibold', 'bold'],
+    },
+    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'],
+      description: 'Color del texto usando clases genéricas predefinidas',
+    },
+  },
+};
+
+// Ejemplos usando el componente Typography
+export const Heading1 = {
+  args: {
+    variant: 'pruebaColor',
+    children: 'Heading 1',
+  },
+};
+
+export const Heading2 = {
+  args: {
+    variant: 'h2',
+    children: 'Heading 2 - IBM Plex Sans 36/54 Bold',
+  },
+};
+
+export const Heading3 = {
+  args: {
+    variant: 'h3',
+    children: 'Heading 3 - IBM Plex Sans 32/48 Semi Bold',
+  },
+};
+
+export const Heading4 = {
+  args: {
+    variant: 'h4',
+    children: 'Heading 4 - IBM Plex Sans 28/42 Semi Bold',
+  },
+};
+
+export const Heading5 = {
+  args: {
+    variant: 'h5',
+    children: 'Heading 5 - IBM Plex Sans 24/36 Medium',
+  },
+};
+
+export const Heading6 = {
+  args: {
+    variant: 'h6',
+    children: 'Heading 6 - IBM Plex Sans 20/30 Medium',
+  },
+};
+
+export const BodyLarge = {
+  args: {
+    variant: 'body-lg',
+    children: 'Body Large - IBM Plex Sans 16/24 Regular. Este es un texto de ejemplo que muestra el estilo body-lg.',
+  },
+};
+
+export const BodyMedium = {
+  args: {
+    variant: 'body-md',
+    children: 'Body Medium - IBM Plex Sans 14/21 Regular (-1%). Este es un texto de ejemplo que muestra el estilo body-md con letter-spacing ajustado.',
+  },
+};
+
+export const BodySmall = {
+  args: {
+    variant: 'body-sm',
+    children: 'Body Small - IBM Plex Sans 12/18 Regular (-2%). Este es un texto pequeño con letter-spacing ajustado.',
+  },
+};
+
+export const Body1 = {
+  args: {
+    variant: 'body1',
+    children: 'Body 1 (Alias de body-lg) - IBM Plex Sans 16/24 Regular',
+  },
+};
+
+export const Body2 = {
+  args: {
+    variant: 'body2',
+    children: 'Body 2 (Alias de body-md) - IBM Plex Sans 14/21 Regular',
+  },
+};
+
+export const Caption = {
+  args: {
+    variant: 'caption',
+    children: 'Caption - IBM Plex Sans 12/18 con color gris',
+  },
+};
+
+export const Overline = {
+  args: {
+    variant: 'overline',
+    children: 'OVERLINE TEXT',
+  },
+};
+
+// Ejemplos con clases genéricas directamente (sin componente)
+export const ClasesGenericasHeadings = () => (
+  <div className="space-y-4">
+    <h1 className="text-h1">Clase text-h1 - 40px/60px Bold</h1>
+    <h2 className="text-h2">Clase text-h2 - 36px/54px Bold</h2>
+    <h3 className="text-h3">Clase text-h3 - 32px/48px Semi Bold</h3>
+    <h4 className="text-h4">Clase text-h4 - 28px/42px Semi Bold</h4>
+    <h5 className="text-h5">Clase text-h5 - 24px/36px Medium</h5>
+    <h6 className="text-h6">Clase text-h6 - 20px/30px Medium</h6>
+  </div>
+);
+
+export const ClasesGenericasBody = () => (
+  <div className="space-y-4">
+    <p className="text-body-lg">Clase text-body-lg - 16px/24px Regular</p>
+    <p className="text-body-md">Clase text-body-md - 14px/21px Regular (-1%)</p>
+    <p className="text-body-sm">Clase text-body-sm - 12px/18px Regular (-2%)</p>
+  </div>
+);
+
+export const ClasesDeColores = () => (
+  <div className="space-y-3 bg-gray-50 p-6 rounded-lg">
+    <p className="text-body-lg color-black">Color black - color-black</p>
+    <p className="text-body-lg color-gray-900">Color gray 900 - color-gray-900</p>
+    <p className="text-body-lg color-gray-700">Color gray 700 - color-gray-700</p>
+    <p className="text-body-lg color-gray-600">Color gray 600 - color-gray-600</p>
+    <p className="text-body-lg color-gray-500">Color gray 500 - color-gray-500</p>
+    <p className="text-body-lg color-red-600">Color red 600 - color-red-600</p>
+    <p className="text-body-lg color-blue-600">Color blue 600 - color-blue-600</p>
+    <p className="text-body-lg color-green-600">Color green 600 - color-green-600</p>
+    <p className="text-body-lg bg-gray-900 color-white p-2 rounded">Color white - color-white (con fondo oscuro)</p>
+  </div>
+);
+
+export const NumerosConPlexMono = () => (
+  <div className="space-y-4">
+    <p className="text-body-lg">Números con fuente IBM Plex Mono:</p>
+    <p className="text-body-lg font-numbers text-2xl">1234567890</p>
+    <p className="text-body-lg text-numbers text-2xl color-blue-600">9876543210</p>
+    <p className="text-body-lg">
+      Precio: <span className="font-numbers color-green-600 font-bold">$1,234.56</span>
+    </p>
+    <p className="text-body-lg">
+      Código: <span className="text-numbers color-gray-600">ABC-123-XYZ</span>
+    </p>
+  </div>
+);
+
+export const PesosPermitidos = () => (
+  <div className="space-y-3">
+    <p className="text-body-lg font-light">Font Light (300)</p>
+    <p className="text-body-lg font-regular">Font Regular (400)</p>
+    <p className="text-body-lg font-medium">Font Medium (500)</p>
+    <p className="text-body-lg font-semibold">Font Semi Bold (600)</p>
+    <p className="text-body-lg font-bold">Font Bold (700)</p>
+  </div>
+);
+
+export const EjemplosCombinados = () => (
+  <div className="space-y-6 p-6">
+    <div>
+      <h1 className="text-h1 color-black">Título Principal</h1>
+      <p className="text-body-lg color-gray-600 mt-2">Subtítulo o descripción con color gris</p>
+    </div>
+    
+    <div className="border-t pt-4">
+      <h2 className="text-h3 color-gray-900 font-bold">Sección Importante</h2>
+      <p className="text-body-md color-gray-700 mt-2">
+        Este es un ejemplo de texto body-md combinado con colores. 
+        Puedes usar múltiples clases genéricas juntas.
+      </p>
+    </div>
+    
+    <div className="border-t pt-4">
+      <h3 className="text-h5 color-blue-600">Con Color Personalizado</h3>
+      <p className="text-body-sm color-gray-500 mt-1">
+        Texto pequeño con estilo personalizado.
+      </p>
+    </div>
+    
+    <div className="border-t pt-4 bg-gray-50 p-4 rounded">
+      <p className="text-body-lg font-semibold color-black">Ejemplo con peso Semi Bold:</p>
+      <p className="text-body-md color-gray-600 mt-2">
+        Número de teléfono: <span className="text-numbers color-blue-600 font-medium">+54 11 1234-5678</span>
+      </p>
+    </div>
+  </div>
+);
+
+export const ConPropColor = () => (
+  <div className="space-y-4 p-6">
+    <Typography variant="h1" color="black">
+      H1 con color black (prop)
+    </Typography>
+    <Typography variant="h2" color="gray-700">
+      H2 con color gray-700 (prop)
+    </Typography>
+    <Typography variant="h3" color="blue-600">
+      H3 con color blue-600 (prop)
+    </Typography>
+    <Typography variant="body-lg" color="gray-600">
+      Body Large con color gray-600 usando el prop color
+    </Typography>
+    <Typography variant="body-md" color="red-600">
+      Body Medium con color red-600 usando el prop color
+    </Typography>
+    <div className="bg-gray-900 p-4 rounded mt-4">
+      <Typography variant="h4" color="white">
+        H4 con color white sobre fondo oscuro
+      </Typography>
+    </div>
+  </div>
+);
+
+export const ColorConClassName = () => (
+  <div className="space-y-4 p-6">
+    <Typography variant="h1" className="color-black">
+      H1 con color usando className
+    </Typography>
+    <Typography variant="body-lg" className="color-blue-600">
+      Body con color blue usando className
+    </Typography>
+    <Typography variant="body-md" className="color-red-600">
+      También puedes combinar: <span className="color-green-600">colores diferentes</span> dentro del mismo componente
+    </Typography>
+  </div>
+);
+
+export const ComparacionAntesDespues = () => (
+  <div className="space-y-8 p-6">
+    <div>
+      <h3 className="text-h4 color-gray-900 mb-4">Antes (con Tailwind directo):</h3>
+      <p className="text-2xl font-bold text-gray-900">Texto con clases Tailwind</p>
+    </div>
+    
+    <div>
+      <h3 className="text-h4 color-gray-900 mb-4">Ahora (con clases genéricas):</h3>
+      <p className="text-h3 color-black">Texto con clases genéricas</p>
+      <p className="text-body-lg color-gray-600 mt-2">
+        Ahora puedes usar: <code className="bg-gray-100 px-2 py-1 rounded">text-h3 color-black</code>
+      </p>
+    </div>
+
+    <div>
+      <h3 className="text-h4 color-gray-900 mb-4">O usando el prop color:</h3>
+      <Typography variant="h3" color="black">
+        Typography con prop color="black"
+      </Typography>
+    </div>
+  </div>
+);
+

package/src/components/DataDisplay/AreaChart/AreaChart.jsx

@@ -0,0 +1,95 @@
+import { useMemo } from 'react';
+import Chart from 'react-apexcharts';
+
+export const AreaChart = ({
+  series = [],
+  categories = [],
+  title = '',
+  height = 350,
+  colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
+  showLegend = true,
+  showToolbar = true,
+  className = '',
+  ...props
+}) => {
+  const chartOptions = useMemo(() => ({
+    chart: {
+      type: 'area',
+      height: height,
+      toolbar: {
+        show: showToolbar,
+        tools: {
+          download: true,
+          selection: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true,
+        },
+      },
+    },
+    colors: colors,
+    stroke: {
+      curve: 'smooth',
+      width: 2,
+    },
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.7,
+        opacityTo: 0.3,
+        stops: [0, 90, 100],
+      },
+    },
+    xaxis: {
+      categories: categories,
+      labels: {
+        style: {
+          colors: '#6B7280',
+        },
+      },
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: '#6B7280',
+        },
+      },
+    },
+    legend: {
+      show: showLegend,
+      position: 'top',
+      horizontalAlign: 'center',
+    },
+    grid: {
+      borderColor: '#E5E7EB',
+      strokeDashArray: 4,
+    },
+    tooltip: {
+      theme: 'light',
+    },
+    dataLabels: {
+      enabled: false,
+    },
+  }), [categories, colors, height, showLegend, showToolbar]);
+
+  return (
+    <div className={className}>
+      {title && (
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+      )}
+      <Chart
+        options={chartOptions}
+        series={series}
+        type="area"
+        height={height}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default AreaChart;
+

package/src/components/DataDisplay/AreaChart/AreaChart.stories.jsx

@@ -0,0 +1,51 @@
+import { AreaChart } from './AreaChart';
+
+const sampleSeries = [
+  {
+    name: 'Ingresos',
+    data: [31, 40, 28, 51, 42, 109, 100],
+  },
+  {
+    name: 'Gastos',
+    data: [11, 32, 45, 32, 34, 52, 41],
+  },
+];
+
+const sampleCategories = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
+
+export default {
+  title: 'DataDisplay/AreaChart',
+  component: AreaChart,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+    title: 'Gráfico de Área',
+  },
+};
+
+export const SingleSeries = {
+  args: {
+    series: [
+      {
+        name: 'Ventas',
+        data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
+      },
+    ],
+    categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep'],
+    title: 'Ventas Mensuales',
+  },
+};
+
+export const CustomColors = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+    title: 'Gráfico con Colores Personalizados',
+    colors: ['#8B5CF6', '#F59E0B'],
+  },
+};
+

package/src/components/DataDisplay/BarChart/BarChart.jsx

@@ -0,0 +1,90 @@
+import { useMemo } from 'react';
+import Chart from 'react-apexcharts';
+
+export const BarChart = ({
+  series = [],
+  categories = [],
+  title = '',
+  height = 350,
+  colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
+  showLegend = true,
+  showToolbar = true,
+  horizontal = false,
+  className = '',
+  ...props
+}) => {
+  const chartOptions = useMemo(() => ({
+    chart: {
+      type: 'bar',
+      height: height,
+      toolbar: {
+        show: showToolbar,
+        tools: {
+          download: true,
+          selection: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true,
+        },
+      },
+    },
+    colors: colors,
+    plotOptions: {
+      bar: {
+        horizontal: horizontal,
+        borderRadius: 4,
+        columnWidth: '55%',
+      },
+    },
+    xaxis: {
+      categories: categories,
+      labels: {
+        style: {
+          colors: '#6B7280',
+        },
+      },
+    },
+    yaxis: {
+      labels: {
+        style: {
+          colors: '#6B7280',
+        },
+      },
+    },
+    legend: {
+      show: showLegend,
+      position: 'top',
+      horizontalAlign: 'center',
+    },
+    grid: {
+      borderColor: '#E5E7EB',
+      strokeDashArray: 4,
+    },
+    tooltip: {
+      theme: 'light',
+    },
+    dataLabels: {
+      enabled: false,
+    },
+  }), [categories, colors, height, showLegend, showToolbar, horizontal]);
+
+  return (
+    <div className={className}>
+      {title && (
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+      )}
+      <Chart
+        options={chartOptions}
+        series={series}
+        type="bar"
+        height={height}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default BarChart;
+