anima-ds-nucleus 1.0.0

package/src/components/DataDisplay/EmptyState/EmptyState.jsx

@@ -0,0 +1,30 @@
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Button } from '../../Atoms/Button/Button';
+
+export const EmptyState = ({
+  icon = 'DocumentIcon',
+  title = 'No hay datos',
+  description = 'No se encontraron elementos para mostrar.',
+  actionLabel,
+  onAction,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`flex flex-col items-center justify-center py-12 px-4 ${className}`} {...props}>
+      <div className="mb-4">
+        <Icon name={icon} className="h-16 w-16 text-gray-400" />
+      </div>
+      <h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>
+      <p className="text-sm text-gray-500 text-center max-w-sm mb-4">{description}</p>
+      {actionLabel && onAction && (
+        <Button variant="primary" onClick={onAction}>
+          {actionLabel}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default EmptyState;
+

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

@@ -0,0 +1,42 @@
+import { EmptyState } from './EmptyState';
+
+export default {
+  title: 'DataDisplay/EmptyState',
+  component: EmptyState,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    title: 'No hay datos',
+    description: 'No se encontraron elementos para mostrar.',
+  },
+};
+
+export const WithAction = {
+  args: {
+    title: 'Sin resultados',
+    description: 'No se encontraron resultados para tu búsqueda.',
+    actionLabel: 'Crear nuevo',
+    onAction: () => alert('Acción ejecutada'),
+  },
+};
+
+export const CustomIcon = {
+  args: {
+    icon: 'BellIcon',
+    title: 'Sin notificaciones',
+    description: 'No tienes notificaciones pendientes.',
+  },
+};
+
+export const CustomContent = {
+  args: {
+    icon: 'SearchIcon',
+    title: 'Búsqueda sin resultados',
+    description: 'Intenta con otros términos de búsqueda.',
+    actionLabel: 'Limpiar búsqueda',
+    onAction: () => alert('Búsqueda limpiada'),
+  },
+};
+

package/src/components/DataDisplay/LineChart/LineChart.jsx

@@ -0,0 +1,86 @@
+import { useMemo } from 'react';
+import Chart from 'react-apexcharts';
+
+export const LineChart = ({
+  series = [],
+  categories = [],
+  title = '',
+  height = 350,
+  colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
+  showLegend = true,
+  showToolbar = true,
+  className = '',
+  ...props
+}) => {
+  const chartOptions = useMemo(() => ({
+    chart: {
+      type: 'line',
+      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,
+    },
+    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="line"
+        height={height}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default LineChart;
+

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

@@ -0,0 +1,67 @@
+import { LineChart } from './LineChart';
+
+const sampleSeries = [
+  {
+    name: 'Ventas',
+    data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
+  },
+  {
+    name: 'Ingresos',
+    data: [20, 30, 25, 40, 39, 50, 60, 81, 105],
+  },
+];
+
+const sampleCategories = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep'];
+
+export default {
+  title: 'DataDisplay/LineChart',
+  component: LineChart,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+    title: 'Gráfico de Líneas',
+  },
+};
+
+export const WithoutTitle = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+  },
+};
+
+export const SingleSeries = {
+  args: {
+    series: [
+      {
+        name: 'Usuarios',
+        data: [100, 120, 140, 160, 180, 200, 220],
+      },
+    ],
+    categories: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
+    title: 'Usuarios Activos por Día',
+  },
+};
+
+export const CustomColors = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+    title: 'Gráfico con Colores Personalizados',
+    colors: ['#EF4444', '#10B981'],
+  },
+};
+
+export const WithoutLegend = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+    title: 'Sin Leyenda',
+    showLegend: false,
+  },
+};
+

package/src/components/DataDisplay/List/List.jsx

@@ -0,0 +1,30 @@
+export const List = ({
+  items = [],
+  variant = 'default',
+  className = '',
+  ...props
+}) => {
+  if (items.length === 0) return null;
+
+  const variantClasses = {
+    default: 'divide-y divide-gray-200',
+    none: '',
+  };
+
+  return (
+    <ul className={`${variantClasses[variant]} ${className}`} {...props}>
+      {items.map((item, index) => (
+        <li key={index} className="py-3">
+          {typeof item === 'string' ? (
+            <span className="text-gray-900">{item}</span>
+          ) : (
+            item
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default List;
+

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

@@ -0,0 +1,59 @@
+import { List } from './List';
+import { Avatar } from '../../Atoms/Avatar/Avatar';
+
+export default {
+  title: 'DataDisplay/List',
+  component: List,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    items: [
+      'Elemento 1',
+      'Elemento 2',
+      'Elemento 3',
+      'Elemento 4',
+    ],
+  },
+};
+
+export const WithCustomItems = {
+  args: {
+    items: [
+      <div key="1" className="flex items-center space-x-3">
+        <Avatar name="John Doe" size="small" />
+        <div>
+          <p className="font-medium">John Doe</p>
+          <p className="text-sm text-gray-500">john@example.com</p>
+        </div>
+      </div>,
+      <div key="2" className="flex items-center space-x-3">
+        <Avatar name="Jane Smith" size="small" />
+        <div>
+          <p className="font-medium">Jane Smith</p>
+          <p className="text-sm text-gray-500">jane@example.com</p>
+        </div>
+      </div>,
+      <div key="3" className="flex items-center space-x-3">
+        <Avatar name="Bob Johnson" size="small" />
+        <div>
+          <p className="font-medium">Bob Johnson</p>
+          <p className="text-sm text-gray-500">bob@example.com</p>
+        </div>
+      </div>,
+    ],
+  },
+};
+
+export const WithoutDividers = {
+  args: {
+    items: [
+      'Elemento 1',
+      'Elemento 2',
+      'Elemento 3',
+    ],
+    variant: 'none',
+  },
+};
+

package/src/components/DataDisplay/PieChart/PieChart.jsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import Chart from 'react-apexcharts';
+
+export const PieChart = ({
+  series = [],
+  labels = [],
+  title = '',
+  height = 350,
+  colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
+  showLegend = true,
+  className = '',
+  ...props
+}) => {
+  const chartOptions = useMemo(() => ({
+    chart: {
+      type: 'pie',
+      height: height,
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: colors,
+    labels: labels,
+    legend: {
+      show: showLegend,
+      position: 'bottom',
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: (val) => `${val.toFixed(1)}%`,
+    },
+    tooltip: {
+      theme: 'light',
+      y: {
+        formatter: (val) => `${val}`,
+      },
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '0%',
+        },
+      },
+    },
+  }), [labels, colors, height, showLegend]);
+
+  return (
+    <div className={className}>
+      {title && (
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+      )}
+      <Chart
+        options={chartOptions}
+        series={series}
+        type="pie"
+        height={height}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default PieChart;
+

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

@@ -0,0 +1,47 @@
+import { PieChart } from './PieChart';
+
+const sampleData = {
+  series: [44, 55, 13, 43, 22],
+  labels: ['Producto A', 'Producto B', 'Producto C', 'Producto D', 'Producto E'],
+};
+
+export default {
+  title: 'DataDisplay/PieChart',
+  component: PieChart,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    series: sampleData.series,
+    labels: sampleData.labels,
+    title: 'Gráfico Circular',
+  },
+};
+
+export const Simple = {
+  args: {
+    series: [30, 40, 30],
+    labels: ['A', 'B', 'C'],
+    title: 'Distribución Simple',
+  },
+};
+
+export const CustomColors = {
+  args: {
+    series: sampleData.series,
+    labels: sampleData.labels,
+    title: 'Gráfico con Colores Personalizados',
+    colors: ['#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899'],
+  },
+};
+
+export const WithoutLegend = {
+  args: {
+    series: sampleData.series,
+    labels: sampleData.labels,
+    title: 'Sin Leyenda',
+    showLegend: false,
+  },
+};
+

package/src/components/DataDisplay/StatCard/StatCard.jsx

@@ -0,0 +1,55 @@
+import { Icon } from '../../Atoms/Icon/Icon';
+import { Typography } from '../../Atoms/Typography/Typography';
+
+export const StatCard = ({
+  title,
+  value,
+  change,
+  changeType = 'neutral',
+  icon,
+  iconColor = 'blue',
+  className = '',
+  ...props
+}) => {
+  const iconColorClasses = {
+    blue: 'bg-blue-100 text-blue-600',
+    green: 'bg-green-100 text-green-600',
+    yellow: 'bg-yellow-100 text-yellow-600',
+    red: 'bg-red-100 text-red-600',
+    purple: 'bg-purple-100 text-purple-600',
+  };
+
+  const changeTypeClasses = {
+    positive: 'text-green-600',
+    negative: 'text-red-600',
+    neutral: 'text-gray-600',
+  };
+
+  return (
+    <div className={`bg-white rounded-lg shadow-md p-6 ${className}`} {...props}>
+      <div className="flex items-center justify-between">
+        <div className="flex-1">
+          <Typography variant="body2" className="text-gray-600 mb-1">
+            {title}
+          </Typography>
+          <Typography variant="h3" className="text-gray-900 mb-2">
+            {value}
+          </Typography>
+          {change && (
+            <div className={`flex items-center text-sm ${changeTypeClasses[changeType]}`}>
+              <span>{change}</span>
+            </div>
+          )}
+        </div>
+        {icon && (
+          <div className={`p-3 rounded-lg ${iconColorClasses[iconColor]}`}>
+            <Icon name={icon} className="h-6 w-6" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;
+

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

@@ -0,0 +1,59 @@
+import { StatCard } from './StatCard';
+
+export default {
+  title: 'DataDisplay/StatCard',
+  component: StatCard,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    title: 'Total de Ventas',
+    value: '$45,231',
+    change: '+12.5% desde el mes pasado',
+    changeType: 'positive',
+    icon: 'ChartBarIcon',
+    iconColor: 'blue',
+  },
+};
+
+export const Negative = {
+  args: {
+    title: 'Usuarios Activos',
+    value: '1,234',
+    change: '-5.2% desde la semana pasada',
+    changeType: 'negative',
+    icon: 'UserIcon',
+    iconColor: 'red',
+  },
+};
+
+export const WithoutIcon = {
+  args: {
+    title: 'Total de Pedidos',
+    value: '567',
+    change: '+8.1%',
+    changeType: 'positive',
+  },
+};
+
+export const WithoutChange = {
+  args: {
+    title: 'Total de Productos',
+    value: '1,234',
+    icon: 'DocumentIcon',
+    iconColor: 'green',
+  },
+};
+
+export const CustomColors = {
+  args: {
+    title: 'Ingresos',
+    value: '$12,345',
+    change: '+20%',
+    changeType: 'positive',
+    icon: 'ChartBarIcon',
+    iconColor: 'purple',
+  },
+};
+

package/src/components/DataDisplay/TagList/TagList.jsx

@@ -0,0 +1,37 @@
+import { Badge } from '../../Atoms/Badge/Badge';
+
+export const TagList = ({
+  tags = [],
+  onRemove,
+  variant = 'default',
+  className = '',
+  ...props
+}) => {
+  if (tags.length === 0) return null;
+
+  return (
+    <div className={`flex flex-wrap gap-2 ${className}`} {...props}>
+      {tags.map((tag, index) => {
+        const tagLabel = typeof tag === 'string' ? tag : tag.label;
+        const tagVariant = typeof tag === 'string' ? variant : tag.variant || variant;
+
+        return (
+          <Badge key={index} variant={tagVariant}>
+            {tagLabel}
+            {onRemove && (
+              <button
+                onClick={() => onRemove(index)}
+                className="ml-2 hover:text-gray-800"
+              >
+                ×
+              </button>
+            )}
+          </Badge>
+        );
+      })}
+    </div>
+  );
+};
+
+export default TagList;
+

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

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { TagList } from './TagList';
+
+const sampleTags = ['React', 'JavaScript', 'TypeScript', 'Tailwind CSS', 'Storybook'];
+
+export default {
+  title: 'DataDisplay/TagList',
+  component: TagList,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    tags: sampleTags,
+  },
+};
+
+export const WithRemove = {
+  render: () => {
+    const [tags, setTags] = useState(sampleTags);
+    return (
+      <TagList
+        tags={tags}
+        onRemove={(index) => {
+          setTags(tags.filter((_, i) => i !== index));
+        }}
+      />
+    );
+  },
+};
+
+export const WithVariants = {
+  args: {
+    tags: [
+      { label: 'React', variant: 'primary' },
+      { label: 'JavaScript', variant: 'success' },
+      { label: 'TypeScript', variant: 'warning' },
+      { label: 'Tailwind', variant: 'danger' },
+    ],
+  },
+};
+
+export const Empty = {
+  args: {
+    tags: [],
+  },
+};
+

package/src/components/DataDisplay/Timeline/Timeline.jsx

@@ -0,0 +1,41 @@
+import { Icon } from '../../Atoms/Icon/Icon';
+
+export const Timeline = ({
+  items = [],
+  className = '',
+  ...props
+}) => {
+  if (items.length === 0) return null;
+
+  return (
+    <div className={className} {...props}>
+      <ol className="relative border-l border-gray-200">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return (
+            <li key={index} className={`mb-10 ml-6 ${isLast ? 'mb-0' : ''}`}>
+              <div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -left-1.5 border border-white" />
+              <time className="mb-1 text-sm font-normal leading-none text-gray-400">
+                {item.date}
+              </time>
+              <h3 className="text-lg font-semibold text-gray-900">{item.title}</h3>
+              {item.description && (
+                <p className="mb-4 text-base font-normal text-gray-500">
+                  {item.description}
+                </p>
+              )}
+              {item.icon && (
+                <div className="absolute -left-8 top-0">
+                  <Icon name={item.icon} className="h-6 w-6 text-gray-400" />
+                </div>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+};
+
+export default Timeline;
+