@soyfri/shared-library 2.0.0-beta.20 → 2.0.0-beta.22

package/src/components/Table/exportsUtils.ts

@@ -1,195 +0,0 @@
-import React from 'react';
-import { AlertProps } from '@mui/material/Alert';
-import { ColumnProps } from '../Column/Column'; // Importa ColumnProps y FieldName desde Column.tsx
-
-// Define las propiedades comunes para las funciones de exportación
-interface ExportOptions<T> {
-  data: T[]; // Los datos a exportar
-  columns: React.ReactElement<ColumnProps<T>>[]; // Las definiciones de las columnas
-  fileName: string; // El nombre del archivo a descargar
-  exportColumns?: string[]; // Nombres de columnas específicas para exportar
-  setSnackbarOpen: React.Dispatch<React.SetStateAction<boolean>>; // Setter para abrir/cerrar el Snackbar
-  setSnackbarMessage: React.Dispatch<React.SetStateAction<string>>; // Setter para el mensaje del Snackbar
-  setSnackbarSeverity: React.Dispatch<React.SetStateAction<AlertProps['severity']>>; // Setter para la severidad del Snackbar
-}
-
-/**
- * Función para exportar datos a un archivo CSV.
- * @param options Opciones de exportación, incluyendo datos, columnas, nombre de archivo y setters de Snackbar.
- */
-export const exportToCSV = <T>(options: ExportOptions<T>) => {
-  const { data, columns, fileName, exportColumns, setSnackbarOpen, setSnackbarMessage, setSnackbarSeverity } = options;
-
-  if (!data || data.length === 0) {
-    setSnackbarMessage("No hay datos para exportar a CSV.");
-    setSnackbarSeverity('warning');
-    setSnackbarOpen(true);
-    return;
-  }
-
-  setSnackbarMessage("Exportando datos a CSV...");
-  setSnackbarSeverity('info');
-  setSnackbarOpen(true);
-
-  try {
-    // Filtra las columnas si se especifican columnas para exportar, de lo contrario, usa todas las columnas definidas.
-    const columnsToExport = exportColumns
-      ? columns.filter(col => exportColumns.includes(col.props.name))
-      : columns;
-
-    // Obtiene los encabezados (nombres de las columnas) y los escapa para CSV.
-    const headers = columnsToExport.map(col => `"${col.props.name.replace(/"/g, '""')}"`).join(',');
-
-    // Mapea los datos a filas CSV.
-    const csvRows = data.map(row => {
-      const values = columnsToExport.map(col => {
-        const field = col.props.field;
-        let cellValue: any;
-
-        // Si 'field' es un array, toma el valor del primer campo para la exportación.
-        if (Array.isArray(field)) {
-          cellValue = (row as any)[field[0]];
-        } else {
-          cellValue = (row as any)[field];
-        }
-
-        // Convierte a string y maneja comas, comillas dobles y saltos de línea para CSV.
-        let formattedValue = String(cellValue || '');
-        if (formattedValue.includes(',') || formattedValue.includes('"') || formattedValue.includes('\n')) {
-          formattedValue = `"${formattedValue.replace(/"/g, '""')}"`;
-        }
-        return formattedValue;
-      });
-      return values.join(',');
-    });
-
-    const csvContent = [headers, ...csvRows].join('\n'); // Une los encabezados y las filas.
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-    const link = document.createElement('a');
-
-    if (link.download !== undefined) {
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', fileName + '.csv');
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-
-      setSnackbarMessage("¡Exportación a CSV completada!");
-      setSnackbarSeverity('success');
-    } else {
-      setSnackbarMessage("Tu navegador no soporta la descarga directa para CSV. Por favor, copia el contenido manualmente.");
-      setSnackbarSeverity('error');
-    }
-  } catch (error) {
-    console.error("Error al exportar los datos a CSV:", error);
-    setSnackbarMessage("Error al exportar los datos a CSV.");
-    setSnackbarSeverity('error');
-  } finally {
-    setSnackbarOpen(true);
-  }
-};
-
-/**
- * Función para exportar datos a un archivo Excel (formato XLSX).
- * Genera una tabla HTML que luego se descarga como un archivo .xlsx.
- * @param options Opciones de exportación, incluyendo datos, columnas, nombre de archivo y setters de Snackbar.
- */
-export const exportToExcel = <T>(options: ExportOptions<T>) => {
-  const { data, columns, fileName, exportColumns, setSnackbarOpen, setSnackbarMessage, setSnackbarSeverity } = options;
-
-  if (!data || data.length === 0) {
-    setSnackbarMessage("No hay datos para exportar a Excel.");
-    setSnackbarSeverity('warning');
-    setSnackbarOpen(true);
-    return;
-  }
-
-  setSnackbarMessage("Exportando datos a Excel (XLSX)...");
-  setSnackbarSeverity('info');
-  setSnackbarOpen(true);
-
-  try {
-    const columnsToExport = exportColumns
-      ? columns.filter(col => exportColumns.includes(col.props.name))
-      : columns;
-
-    // Construye el contenido HTML de la tabla.
-    let tableHTML = `
-      <html xmlns:o="urn:schemas-microsoft-com:office:office"
-      xmlns:x="urn:schemas-microsoft-com:office:excel"
-      xmlns="http://www.w3.org/TR/REC-html40">
-      <head>
-          <meta charset="utf-8" />
-          <!--[if gte mso 9]><xml>
-          <x:ExcelWorkbook>
-              <x:ExcelWorksheets>
-                  <x:ExcelWorksheet>
-                      <x:Name>Hoja1</x:Name>
-                      <x:WorksheetOptions>
-                          <x:DisplayGridlines/>
-                      </x:WorksheetOptions>
-                  </x:ExcelWorksheet>
-              </x:ExcelWorksheets>
-          </x:ExcelWorkbook>
-          </xml><![endif]-->
-      </head>
-      <body>
-          <table>
-              <thead>
-                  <tr>
-                      ${columnsToExport.map(col => `<th>${col.props.name}</th>`).join('')}
-                  </tr>
-              </thead>
-              <tbody>
-                  ${data.map(row => `
-                      <tr>
-                          ${columnsToExport.map(col => {
-                              const field = col.props.field;
-                              let cellValue: any;
-                              if (Array.isArray(field)) {
-                                  cellValue = (row as any)[field[0]];
-                              } else {
-                                  cellValue = (row as any)[field];
-                              }
-                              // Escapa caracteres HTML para el contenido de la celda.
-                              return `<td>${String(cellValue || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</td>`;
-                          }).join('')}
-                      </tr>
-                  `).join('')}
-              </tbody>
-          </table>
-      </body>
-      </html>
-    `;
-
-    // Crea un Blob con el contenido HTML y el tipo MIME de XLSX.
-    const blob = new Blob([tableHTML], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8;' }); 
-
-    const link = document.createElement('a');
-    if (link.download !== undefined) {
-      const url = URL.createObjectURL(blob);
-      link.setAttribute('href', url);
-      link.setAttribute('download', fileName + '.xlsx'); // Usa la extensión .xlsx
-      link.style.visibility = 'hidden';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-
-      setSnackbarMessage("¡Exportación a Excel (XLSX) completada!");
-      setSnackbarSeverity('success');
-    } else {
-      setSnackbarMessage("Tu navegador no soporta la descarga directa para Excel (XLSX). Por favor, copia el contenido manualmente.");
-      setSnackbarSeverity('error');
-    }
-  } catch (error) {
-    console.error("Error al exportar los datos a Excel (XLSX):", error);
-    setSnackbarMessage("Error al exportar los datos a Excel (XLSX).");
-    setSnackbarSeverity('error');
-  } finally {
-    setSnackbarOpen(true);
-  }
-};

package/src/components/Table/index.ts

@@ -1,3 +0,0 @@
-// import './styles.css';
-export { default as Table } from './Table'
-// export { default } from './Table';

package/src/components/Table/types.ts

@@ -1,34 +0,0 @@
-// Interfaces de ejemplo
-interface Usuario {
-    id: number
-    nombre: string
-    email: string
-    avatar: string
-    edad: number
-    activo: boolean
-    rol: 'admin' | 'usuario' | 'moderador'
-    fechaRegistro: string
-    puntuacion: number
-  }
-  
-  interface Producto {
-    id: number
-    nombre: string
-    precio: number
-    categoria: string
-    stock: number
-    imagen: string
-    enOferta: boolean
-    rating: number
-  }
-  
-  interface Empleado {
-    id: number
-    nombre: string
-    apellido: string
-    departamento: string
-    salario: number
-    fechaIngreso: string
-    activo: boolean
-    avatar: string
-  }

package/src/components/Tabs/Tab.definition.ts

@@ -1,53 +0,0 @@
-import { ScrollTab } from './Tabs.stories';
-export const DefaultTabDefinition = `
-<Tabs>
-  <Tab label="Home" icon={<Home />}>
-    <div>
-      hola 1
-    </div>
-  </Tab>
-  <Tab label="Settings" icon={<Settings />}>
-    <div>
-      hola 2
-    </div>
-  </Tab>
-  <Tab label="Profile" icon={<Settings />}>
-    <div>
-      hola 3
-    </div>
-  </Tab>
-</Tabs>`.trim();
-
-
-export const ScrollTabDefinition = `
-<Tabs {...args} variant="scrollable" scrollButtons="auto" allowScrollButtonsMobile>
-  {Array.from({ length: 20 }).map((_, idx) => (
-    <Tab key={idx} label={\`Tab \${idx + 1}\`} icon={<Settings />}>
-      <div>
-        hola {idx + 1}
-      </div>
-    </Tab>
-  ))}
-</Tabs>
-`.trim();
-
-
-export const VeriticalTabDefinition = `
-   <Tabs orientation="vertical">
-        <Tab label="Home"  >
-          <div>
-            hola 1
-          </div>
-        </Tab>
-        <Tab label="Settings"  >
-          <div>
-            hola 2
-          </div>
-        </Tab>
-        <Tab label="Profile" >
-          <div>
-            hola 3
-          </div>
-        </Tab>
-    </Tabs>
-`

package/src/components/Tabs/Tab.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { TabProps as MuiTabProps } from "@mui/material";
-
-type PickMuiTabProps = Pick<
-  MuiTabProps,
-  "label" | "icon" | "disabled" | "sx" | "value" | "wrapped" | "iconPosition" | "className" | "disabled"| 'disableRipple'
->;
-
-export interface TabProps extends PickMuiTabProps {
-  value?: number;
-  onChange?: () => void;
-  children?: React.ReactNode;
-}
-
-export const Tab = (_: TabProps): null => null;
-
-Tab.displayName = "Tab";
-
-export default Tab;

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,118 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Tabs from "./Tabs";
-import Tab from "./Tab";
-import { Home, Settings } from "@mui/icons-material";
-import { DefaultTabDefinition, ScrollTabDefinition, VeriticalTabDefinition } from "./Tab.definition";
-
-const meta: Meta<typeof Tabs> = {
-  title: "Components/Tabs",
-  component: Tabs,
-  tags: ["autodocs"]
-};
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-export const DefaultTab: Story = {
-  render: (args) => {
-    return (
-      <Tabs {...args}>
-        <Tab label="Home" icon={<Home />} >
-          <div>
-            hola 1
-          </div>
-        </Tab>
-        <Tab label="Settings" icon={<Settings />} >
-          <div>
-            hola 2
-          </div>
-        </Tab>
-        <Tab label="Profile" icon={<Settings />}>
-          <div>
-            hola 3
-          </div>
-        </Tab>
-      </Tabs>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Ejemplo básico de timeline"
-      },
-      source: {
-        code: DefaultTabDefinition,
-      }
-    }
-  },
-  argTypes: {
-    children: { control: false, description: 'Componentes `TabItems` que definen la estructura de el timeline' },
-    orientation: { description: 'Indica si la posicion de los tabs, es horizontal o vertical' },
-    defaultValue: { description: 'Indica si, se requiere iniciar con alguna tab preseleccionada, se inicia' },
-    variant: { description: 'Indica el estilo de los tabs "standard" | "scrollable" | "fullWidth" ' },
-    indicatorColor: { description: 'Indica el color del indicador de los tabs "primary" | "secondary"' },
-    labelColor: { description: 'Indica el color de las etiquetas de los tabs "primary" | "secondary" | "inherit"' },
-    sx: { description: 'Estilos personalizados para el tab' },
-    allowScrollButtonsMobile: { description: 'Si se usan scrollButtons, permite que se muestren en dispositivos móviles' },
-    onChangeValue: { control: false, description: 'Callback que recibe el `value` del tab nuevo al cambiar.' },
-  }
-};
-
-export const ScrollTab: Story = {
-  render: (args) => {
-    return (
-      <Tabs {...args} variant="scrollable" scrollButtons="auto" allowScrollButtonsMobile>
-        {Array.from({ length: 20 }).map((_, idx) => (
-          <Tab key={idx} label={`Tab ${idx + 1}`} icon={<Settings />}>
-            <div>
-              hola {idx + 1}
-            </div>
-          </Tab>
-        ))}
-      </Tabs>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Ejemplo tab con scroll"
-      },
-      source: {
-        code: ScrollTabDefinition,
-      }
-    }
-  },
-};
-
-export const VeriticalTab: Story = {
-  render: (args) => {
-    return (
-      <Tabs {...args} orientation="vertical">
-        <Tab label="Home"  >
-          <div>
-            hola 1
-          </div>
-        </Tab>
-        <Tab label="Settings"  >
-          <div>
-            hola 2
-          </div>
-        </Tab>
-        <Tab label="Profile" >
-          <div>
-            hola 3
-          </div>
-        </Tab>
-      </Tabs>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Ejemplo tab vertical"
-      },
-      source: {
-        code: VeriticalTabDefinition,
-      }
-    }
-  },
-};

package/src/components/Tabs/Tabs.tsx

@@ -1,163 +0,0 @@
-import {
-  Children,
-  isValidElement,
-  useState,
-  type FC,
-  type ReactElement,
-  type ReactNode,
-  type SyntheticEvent,
-} from 'react';
-import {
-  Tabs as MuiTabs,
-  Tab as MuiTab,
-  Box,
-  type TabsProps as MuiTabsProps,
-} from '@mui/material';
-
-import { TabProps } from './Tab';
-import { TAB_DISPLAY_MAP } from './_tabUtils';
-import { mergeSx } from '../_shared/mergeSx';
-
-type PickTabsProps = Pick<
-  MuiTabsProps,
-  | 'centered'
-  | 'indicatorColor'
-  | 'orientation'
-  | 'scrollButtons'
-  | 'variant'
-  | 'className'
-  | 'sx'
-  | 'visibleScrollbar'
-  | 'allowScrollButtonsMobile'
->;
-
-export interface TabsProps extends PickTabsProps {
-  /** Uno o varios `<Tab>`. Children que no sean `<Tab>` se ignoran. */
-  children: ReactNode;
-  /** Valor del tab inicialmente activo. Si no se provee, toma el `value` del primer `<Tab>` o `0`. */
-  defaultValue?: number | string;
-  /** Callback al cambiar de tab. Recibe el `value` del tab nuevo. */
-  onChangeValue?: (newValue: number | string) => void;
-  labelColor?: 'primary' | 'secondary' | 'inherit';
-  /**
-   * Cómo se manejan los paneles al cambiar de tab:
-   * - `false` (default): **unmount** — solo se renderiza el panel activo; los
-   *   demás se desmontan. El state interno de los hijos se pierde al navegar.
-   *   Menor uso de memoria.
-   * - `true`: **keep mounted** — renderiza todos los paneles pero oculta los
-   *   no activos con `display: none`. El state se preserva (inputs, scroll,
-   *   timers, subscripciones) al navegar entre tabs.
-   */
-  keepMounted?: boolean;
-}
-
-export const Tabs: FC<TabsProps> = ({
-  children,
-  defaultValue,
-  onChangeValue,
-  centered = true,
-  orientation = 'horizontal',
-  scrollButtons = 'auto',
-  variant = 'standard',
-  indicatorColor = 'primary',
-  labelColor = 'primary',
-  className,
-  allowScrollButtonsMobile = true,
-  keepMounted = false,
-  sx,
-}) => {
-  // Filtra a solo <Tab> children — acepta arrays, single child, fragments,
-  // y descarta cualquier otra cosa (strings, null, condicionales falsy).
-  const tabs: ReactElement<TabProps>[] = Children.toArray(children).filter(
-    (child): child is ReactElement<TabProps> =>
-      isValidElement(child) &&
-      (child.type as { displayName?: string })?.displayName === 'Tab',
-  );
-
-  const firstValue = tabs[0]?.props.value;
-  const [currentValue, setCurrentValue] = useState<string | number>(
-    defaultValue ?? firstValue ?? 0,
-  );
-
-  const handleChange = (_event: SyntheticEvent, newValue: number | string) => {
-    setCurrentValue(newValue);
-    onChangeValue?.(newValue);
-  };
-
-  const { display, flexDirection } = TAB_DISPLAY_MAP[orientation];
-
-  return (
-    <Box sx={{ display, flexDirection }}>
-      <MuiTabs
-        value={currentValue}
-        onChange={handleChange}
-        centered={centered}
-        indicatorColor={indicatorColor}
-        orientation={orientation}
-        scrollButtons={scrollButtons}
-        variant={variant}
-        className={className}
-        textColor={labelColor}
-        allowScrollButtonsMobile={allowScrollButtonsMobile}
-        sx={mergeSx({}, sx)}
-      >
-        {tabs.map((tab, idx) => {
-          const {
-            label,
-            icon,
-            value = idx,
-            disabled,
-            wrapped,
-            iconPosition,
-            className: tabClassName,
-            sx: tabSx,
-          } = tab.props;
-          return (
-            <MuiTab
-              key={value}
-              label={label}
-              icon={icon}
-              value={value}
-              disabled={disabled}
-              wrapped={wrapped}
-              iconPosition={iconPosition}
-              className={tabClassName}
-              sx={tabSx}
-            />
-          );
-        })}
-      </MuiTabs>
-
-      <Box m={2} sx={{ width: '100%' }}>
-        {keepMounted
-          ? tabs.map((tab, idx) => {
-            const value = tab.props.value ?? idx;
-            const isActive = value === currentValue;
-            return (
-              <Box
-                key={value}
-                role="tabpanel"
-                // `display: none` mantiene el nodo en el DOM — state de los
-                // hijos (inputs, useState, etc.) no se pierde al navegar.
-                sx={{ display: isActive ? 'block' : 'none' }}
-                aria-hidden={!isActive}
-              >
-                {tab.props.children}
-              </Box>
-            );
-          })
-          : tabs.map((tab, idx) => {
-            const value = tab.props.value ?? idx;
-            if (value !== currentValue) return null;
-            return (
-              <Box key={value} role="tabpanel">
-                {tab.props.children}
-              </Box>
-            );
-          })}
-      </Box>
-    </Box>
-  );
-};
-
-export default Tabs;

package/src/components/Tabs/_tabUtils.tsx

@@ -1,4 +0,0 @@
-export const TAB_DISPLAY_MAP: Record<"horizontal" | "vertical", { display: string, flexDirection: string }> = {
-  horizontal: { display: "flex", flexDirection: "column" },
-  vertical: { display: "flex", flexDirection: "row" }
-};

package/src/components/Tabs/index.ts

@@ -1,5 +0,0 @@
-export { Tabs, default } from './Tabs';
-export type { TabsProps } from './Tabs';
-
-export { Tab } from './Tab';
-export type { TabProps } from './Tab';

package/src/components/Timeline/Timeline.definition.ts

@@ -1,43 +0,0 @@
-import { ColorVariant, PositionVariant } from './Timeline.stories';
-export const DefaultTimelineDefinition = `
-<Timeline>
-  <TimelineItem dotColor="primary" connectorColor="primary">
-    Primer paso
-  </TimelineItem>
-  <TimelineItem dotColor="secondary" connectorColor="secondary">
-    Segundo paso
-  </TimelineItem>
-  <TimelineItem dotColor="success">
-    Tercer paso
-  </TimelineItem>
-</Timeline>
-`.trim();
-
-
-export const ColorVariantTimelineDefinition = `
- <Timeline>
-    <TimelineItem dotColor="success" connectorColor="error">
-        eat
-      </TimelineItem>
-      <TimelineItem dotColor="primary" connectorColor="success">
-        code
-      </TimelineItem>
-      <TimelineItem dotColor="warning">
-        repeat
-      </TimelineItem>
-  </Timeline>`.trim();
-
-
-  export const PositionVariantTimelineDefinition = `
-  <Timeline position="alternate">
-          <TimelineItem>
-            eat
-          </TimelineItem>
-          <TimelineItem>
-            code
-          </TimelineItem>
-          <TimelineItem>
-            repeat
-          </TimelineItem>
-    </Timeline>
-  `.trim();