anima-ds-nucleus 1.0.0

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

@@ -0,0 +1,60 @@
+import { BarChart } from './BarChart';
+
+const sampleSeries = [
+  {
+    name: 'Producto A',
+    data: [44, 55, 41, 67, 22, 43],
+  },
+  {
+    name: 'Producto B',
+    data: [13, 23, 20, 8, 13, 27],
+  },
+];
+
+const sampleCategories = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun'];
+
+export default {
+  title: 'DataDisplay/BarChart',
+  component: BarChart,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+    title: 'Gráfico de Barras',
+  },
+};
+
+export const Horizontal = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+    title: 'Gráfico de Barras Horizontal',
+    horizontal: true,
+  },
+};
+
+export const SingleSeries = {
+  args: {
+    series: [
+      {
+        name: 'Ventas',
+        data: [400, 430, 448, 470, 540, 580],
+      },
+    ],
+    categories: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
+    title: 'Ventas Semanales',
+  },
+};
+
+export const CustomColors = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+    title: 'Gráfico con Colores Personalizados',
+    colors: ['#EF4444', '#10B981'],
+  },
+};
+

package/src/components/DataDisplay/Card/Card.jsx

@@ -0,0 +1,31 @@
+export const Card = ({
+  title,
+  children,
+  footer,
+  className = '',
+  headerClassName = '',
+  bodyClassName = '',
+  footerClassName = '',
+  ...props
+}) => {
+  return (
+    <div className={`bg-white rounded-lg shadow-md border border-gray-200 ${className}`} {...props}>
+      {title && (
+        <div className={`px-6 py-4 border-b border-gray-200 ${headerClassName}`}>
+          <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+        </div>
+      )}
+      <div className={`px-6 py-4 ${bodyClassName}`}>
+        {children}
+      </div>
+      {footer && (
+        <div className={`px-6 py-4 border-t border-gray-200 bg-gray-50 ${footerClassName}`}>
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Card;
+

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

@@ -0,0 +1,50 @@
+import { Card } from './Card';
+import { Button } from '../../Atoms/Button/Button';
+
+export default {
+  title: 'DataDisplay/Card',
+  component: Card,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    title: 'Card Title',
+    children: 'This is the card content. It can contain any React elements.',
+  },
+};
+
+export const WithFooter = {
+  args: {
+    title: 'Card with Footer',
+    children: 'This card has a footer section.',
+    footer: (
+      <div className="flex justify-end">
+        <Button size="small">Action</Button>
+      </div>
+    ),
+  },
+};
+
+export const WithoutTitle = {
+  args: {
+    children: 'This card does not have a title.',
+  },
+};
+
+export const ComplexContent = {
+  args: {
+    title: 'Complex Card',
+    children: (
+      <div>
+        <p className="mb-4">This card contains more complex content.</p>
+        <ul className="list-disc list-inside space-y-2">
+          <li>Item 1</li>
+          <li>Item 2</li>
+          <li>Item 3</li>
+        </ul>
+      </div>
+    ),
+  },
+};
+

package/src/components/DataDisplay/ColumnChart/ColumnChart.jsx

@@ -0,0 +1,92 @@
+import { useMemo } from 'react';
+import Chart from 'react-apexcharts';
+
+export const ColumnChart = ({
+  series = [],
+  categories = [],
+  title = '',
+  height = 350,
+  colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
+  showLegend = true,
+  showToolbar = true,
+  className = '',
+  ...props
+}) => {
+  const chartOptions = useMemo(() => ({
+    chart: {
+      type: 'column',
+      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: false,
+        borderRadius: 4,
+        columnWidth: '55%',
+        dataLabels: {
+          position: 'top',
+        },
+      },
+    },
+    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="bar"
+        height={height}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default ColumnChart;
+

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

@@ -0,0 +1,65 @@
+import { ColumnChart } from './ColumnChart';
+
+const sampleSeries = [
+  {
+    name: 'Ventas',
+    data: [44, 55, 41, 67, 22, 43, 21],
+  },
+  {
+    name: 'Gastos',
+    data: [13, 23, 20, 8, 13, 27, 33],
+  },
+];
+
+const sampleCategories = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
+
+export default {
+  title: 'DataDisplay/ColumnChart',
+  component: ColumnChart,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+    title: 'Gráfico de Columnas',
+  },
+};
+
+export const SingleSeries = {
+  args: {
+    series: [
+      {
+        name: 'Usuarios',
+        data: [400, 430, 448, 470, 540, 580, 690],
+      },
+    ],
+    categories: sampleCategories,
+    title: 'Usuarios por Día',
+  },
+};
+
+export const CustomColors = {
+  args: {
+    series: sampleSeries,
+    categories: sampleCategories,
+    title: 'Gráfico con Colores Personalizados',
+    colors: ['#8B5CF6', '#F59E0B'],
+  },
+};
+
+export const WithoutLegend = {
+  args: {
+    series: [
+      {
+        name: 'Ventas',
+        data: [44, 55, 41, 67, 22, 43, 21],
+      },
+    ],
+    categories: sampleCategories,
+    title: 'Sin Leyenda',
+    showLegend: false,
+  },
+};
+

package/src/components/DataDisplay/DBGrid/DBGrid.jsx

@@ -0,0 +1,138 @@
+import { useTranslation } from 'react-i18next';
+import { DataGrid } from '@mui/x-data-grid';
+import { Box } from '@mui/material';
+
+// Localización en español para MUI DataGrid
+const dataGridLocaleTextES = {
+  // Paginación
+  MuiTablePagination: {
+    labelRowsPerPage: 'Filas por página',
+    labelDisplayedRows: ({ from, to, count }) =>
+      `${from}–${to} de ${count !== -1 ? count : `más de ${to}`}`,
+  },
+  // Toolbar
+  toolbarDensity: 'Densidad',
+  toolbarDensityLabel: 'Densidad',
+  toolbarDensityCompact: 'Compacta',
+  toolbarDensityStandard: 'Estándar',
+  toolbarDensityComfortable: 'Cómoda',
+  toolbarFilters: 'Filtros',
+  toolbarFiltersLabel: 'Mostrar filtros',
+  toolbarFiltersTooltipHide: 'Ocultar filtros',
+  toolbarFiltersTooltipShow: 'Mostrar filtros',
+  toolbarExport: 'Exportar',
+  toolbarExportLabel: 'Exportar',
+  toolbarExportCSV: 'Descargar como CSV',
+  toolbarExportPrint: 'Imprimir',
+  toolbarColumns: 'Columnas',
+  toolbarColumnsLabel: 'Seleccionar columnas',
+  // Filtros
+  filterPanelAddFilter: 'Agregar filtro',
+  filterPanelDeleteIconLabel: 'Eliminar',
+  filterPanelOperators: 'Operadores',
+  filterPanelOperatorAnd: 'Y',
+  filterPanelOperatorOr: 'O',
+  filterPanelColumns: 'Columnas',
+  filterPanelInputLabel: 'Valor',
+  filterPanelInputPlaceholder: 'Valor del filtro',
+  filterPanelInputPlaceholderOperator: 'Operador',
+  // Sin datos
+  noRowsLabel: 'No hay datos disponibles',
+  noResultsOverlayLabel: 'No se encontraron resultados',
+  // Errores
+  errorOverlayDefaultLabel: 'Ocurrió un error',
+  // Cargando
+  loadingOverlayLabel: 'Cargando...',
+  // Footer
+  footerRowSelected: (count) =>
+    count !== 1
+      ? `${count} filas seleccionadas`
+      : `${count} fila seleccionada`,
+};
+
+export const DBGrid = ({
+  columns = [],
+  rows = [],
+  loading = false,
+  emptyMessage,
+  pageSize = 10,
+  pageSizeOptions = [5, 10, 25, 50],
+  className = '',
+  ...props
+}) => {
+  const { t } = useTranslation();
+
+  // Traducir las columnas si tienen traducciones
+  const translatedColumns = columns.map((col) => {
+    const translatedLabel = col.translationKey 
+      ? t(col.translationKey) 
+      : col.label || col.headerName;
+    
+    return {
+      ...col,
+      headerName: translatedLabel,
+      label: translatedLabel,
+    };
+  });
+
+  // Si no hay columnas, usar columnas por defecto traducidas
+  const defaultColumns = [
+    { 
+      field: 'id', 
+      headerName: t('table.id'), 
+      width: 90,
+      translationKey: 'table.id',
+    },
+    { 
+      field: 'name', 
+      headerName: t('table.name'), 
+      width: 200,
+      translationKey: 'table.name',
+    },
+    { 
+      field: 'email', 
+      headerName: t('table.email'), 
+      width: 250,
+      translationKey: 'table.email',
+    },
+    { 
+      field: 'role', 
+      headerName: t('table.role'), 
+      width: 150,
+      translationKey: 'table.role',
+    },
+  ];
+
+  const finalColumns = translatedColumns.length > 0 ? translatedColumns : defaultColumns;
+
+  // Usar la localización en español (dataGridLocaleTextES)
+  // y personalizar solo los mensajes que necesitamos
+  const localeText = {
+    ...dataGridLocaleTextES,
+    // Personalizar mensaje de sin datos si se proporciona
+    ...(emptyMessage && { noRowsLabel: emptyMessage }),
+  };
+
+  return (
+    <Box className={className} sx={{ height: 400, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={finalColumns}
+        loading={loading}
+        pageSizeOptions={pageSizeOptions}
+        initialState={{
+          pagination: {
+            paginationModel: {
+              pageSize: pageSize,
+            },
+          },
+        }}
+        localeText={localeText}
+        disableRowSelectionOnClick
+        {...props}
+      />
+    </Box>
+  );
+};
+
+export default DBGrid;

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

@@ -0,0 +1,126 @@
+import { DBGrid } from './DBGrid';
+import { I18nProvider } from '../../../providers/I18nProvider';
+import { Button } from '../../Atoms/Button/Button';
+import { useTranslation } from 'react-i18next';
+
+const SampleColumnsWithTranslation = () => {
+  const { t } = useTranslation();
+  return [
+    { 
+      field: 'id', 
+      headerName: t('table.id'), 
+      width: 90,
+      translationKey: 'table.id',
+    },
+    { 
+      field: 'name', 
+      headerName: t('table.name'), 
+      width: 200,
+      translationKey: 'table.name',
+    },
+    { 
+      field: 'email', 
+      headerName: t('table.email'), 
+      width: 250,
+      translationKey: 'table.email',
+    },
+    { 
+      field: 'role', 
+      headerName: t('table.role'), 
+      width: 150,
+      translationKey: 'table.role',
+    },
+    {
+      field: 'actions',
+      headerName: t('table.actions'),
+      width: 200,
+      translationKey: 'table.actions',
+      renderCell: (params) => (
+        <div className="flex space-x-2">
+          <Button size="small" variant="outline">{t('table.edit')}</Button>
+          <Button size="small" variant="danger">{t('table.delete')}</Button>
+        </div>
+      ),
+    },
+  ];
+};
+
+const GridWithColumns = ({ rows, loading, emptyMessage }) => {
+  const columns = SampleColumnsWithTranslation();
+  return (
+    <DBGrid
+      columns={columns}
+      rows={rows}
+      loading={loading}
+      emptyMessage={emptyMessage}
+    />
+  );
+};
+
+const sampleRows = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
+  { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'Admin' },
+  { id: 5, name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
+];
+
+export default {
+  title: 'DataDisplay/DBGrid',
+  component: DBGrid,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <I18nProvider>
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+
+export const Default = {
+  render: () => (
+    <GridWithColumns rows={sampleRows} />
+  ),
+};
+
+export const Empty = {
+  render: () => (
+    <GridWithColumns rows={[]} />
+  ),
+};
+
+export const Loading = {
+  render: () => (
+    <GridWithColumns rows={[]} loading={true} />
+  ),
+};
+
+export const WithCustomEmptyMessage = {
+  render: () => (
+    <GridWithColumns 
+      rows={[]} 
+      emptyMessage="No se encontraron registros" 
+    />
+  ),
+};
+
+export const WithPagination = {
+  render: () => {
+    const columns = SampleColumnsWithTranslation();
+    const manyRows = Array.from({ length: 50 }, (_, i) => ({
+      id: i + 1,
+      name: `Usuario ${i + 1}`,
+      email: `usuario${i + 1}@example.com`,
+      role: i % 2 === 0 ? 'Admin' : 'User',
+    }));
+    return (
+      <DBGrid
+        columns={columns}
+        rows={manyRows}
+        pageSize={10}
+        pageSizeOptions={[5, 10, 25, 50]}
+      />
+    );
+  },
+};

package/src/components/DataDisplay/DonutChart/DonutChart.jsx

@@ -0,0 +1,83 @@
+import { useMemo } from 'react';
+import Chart from 'react-apexcharts';
+
+export const DonutChart = ({
+  series = [],
+  labels = [],
+  title = '',
+  height = 350,
+  colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
+  showLegend = true,
+  donutSize = '70%',
+  className = '',
+  ...props
+}) => {
+  const chartOptions = useMemo(() => ({
+    chart: {
+      type: 'donut',
+      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: donutSize,
+          labels: {
+            show: true,
+            name: {
+              show: true,
+            },
+            value: {
+              show: true,
+              formatter: (val) => `${val}`,
+            },
+            total: {
+              show: true,
+              label: 'Total',
+              formatter: () => {
+                const total = series.reduce((sum, val) => sum + val, 0);
+                return total.toString();
+              },
+            },
+          },
+        },
+      },
+    },
+  }), [labels, colors, height, showLegend, donutSize, series]);
+
+  return (
+    <div className={className}>
+      {title && (
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
+      )}
+      <Chart
+        options={chartOptions}
+        series={series}
+        type="donut"
+        height={height}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default DonutChart;
+

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

@@ -0,0 +1,48 @@
+import { DonutChart } from './DonutChart';
+
+const sampleData = {
+  series: [44, 55, 13, 43, 22],
+  labels: ['Producto A', 'Producto B', 'Producto C', 'Producto D', 'Producto E'],
+};
+
+export default {
+  title: 'DataDisplay/DonutChart',
+  component: DonutChart,
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  args: {
+    series: sampleData.series,
+    labels: sampleData.labels,
+    title: 'Gráfico de Dona',
+  },
+};
+
+export const LargeDonut = {
+  args: {
+    series: sampleData.series,
+    labels: sampleData.labels,
+    title: 'Dona Grande',
+    donutSize: '80%',
+  },
+};
+
+export const SmallDonut = {
+  args: {
+    series: sampleData.series,
+    labels: sampleData.labels,
+    title: 'Dona Pequeña',
+    donutSize: '50%',
+  },
+};
+
+export const CustomColors = {
+  args: {
+    series: sampleData.series,
+    labels: sampleData.labels,
+    title: 'Gráfico con Colores Personalizados',
+    colors: ['#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899'],
+  },
+};
+