@soyfri/shared-library 2.0.0-beta.10 → 2.0.0-beta.11

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' },
-    onChange: { control: false, description: 'Permite enviar una función, al cambiar entre tabs, para obtener el id actual' },
-  }
-};
-
-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,99 +0,0 @@
-import React, { useState, ReactElement } from "react";
-import { Tabs as MuiTabs, Tab as MuiTab, Box, TabsProps as MuiTabsProps } from "@mui/material";
-import { TabProps } from "./Tab";
-import { TAB_DISPLAY_MAP } from "./_tabUtils";
-
-type PickTabsProps = Pick<
-  MuiTabsProps,
-  "centered" | "indicatorColor" | "orientation" | "scrollButtons" | "variant" | "className" | "sx" | "visibleScrollbar" | 'indicatorColor'| 'allowScrollButtonsMobile'
->;
-
-interface MyTabsProps extends PickTabsProps {
-  children: ReactElement<TabProps>[];
-  defaultValue?: number;
-  onChange?: () => void;
-  centered?: boolean;
-  orientation?: "horizontal" | "vertical";
-  scrollButtons?: "auto" | false | true;
-  variant?: "standard" | "scrollable" | "fullWidth";
-  indicatorColor?: "primary" | "secondary";
-  labelColor?: "primary" | "secondary" | "inherit";
-  onChangeValue?: (newValue: number) => void;
-  allowScrollButtonsMobile?: boolean;
-}
-
-export const Tabs: React.FC<MyTabsProps> = ({
-  children,
-  defaultValue,
-  onChange,
-  centered = true,
-  orientation = 'horizontal',
-  scrollButtons = "auto",
-  variant = "standard",
-  indicatorColor = "primary",
-  labelColor = "primary",
-  className,
-  onChangeValue,
-  allowScrollButtonsMobile = true,
-  sx,
-}) => {
-  const firstValue = children[0]?.props.value;
-  const [currentValue, setCurrentValue] = useState<string | number>(
-    defaultValue ?? firstValue ?? 0
-  );
-
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    setCurrentValue(newValue);
-    onChange?.();
-    onChangeValue?.(newValue);
-  };
-
-  return (
-    <Box sx={{ display: TAB_DISPLAY_MAP[orientation].display, flexDirection: TAB_DISPLAY_MAP[orientation].flexDirection}}>
-      <MuiTabs
-        value={currentValue}
-        onChange={handleChange}
-        centered={centered}
-        indicatorColor={indicatorColor}
-        orientation={orientation}
-        scrollButtons={scrollButtons}
-        variant={variant}
-        className={className}
-        textColor={labelColor}
-        sx={{ ...sx }}
-        allowScrollButtonsMobile={allowScrollButtonsMobile}
-        
-
-      >
-        {children.map((child, idx) => {
-          const { label, icon, value = idx, disabled, wrapped, iconPosition, className: tabClassName, sx: tabSx } = child.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} role="tabpanel" sx={{width:'100%'}} >
-        {children.map((child, idx) => {
-          const value = child.props.value ?? idx;
-          return value === currentValue ? (
-            <Box key={value}>{child.props.children}</Box>
-          ) : null;
-        })}
-      </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,2 +0,0 @@
-export { default as Tabs } from './Tabs';
-export { default as Tab } 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();

package/src/components/Timeline/Timeline.stories.tsx

@@ -1,108 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { TimelineItem } from "./TimelineItem";
-import { DefaultTimelineDefinition } from "./Timeline.definition";
-import { Timeline } from "./Timeline";
-import { Box } from "@mui/material";
-
-const meta: Meta<typeof Timeline> = {
-  title: "Components/Timeline",
-  component: Timeline,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"]
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Timeline>;
-
-export const Default: Story = {
-  args: {
-      position: "right"
-  },
-  render: (args) => (
-    <Box sx={{ width: 300 }}>
-      <Timeline {...args}>
-        <TimelineItem>
-          eat
-        </TimelineItem>
-        <TimelineItem>
-          code
-        </TimelineItem>
-        <TimelineItem>
-          sleep
-        </TimelineItem>
-      </Timeline>
-    </Box>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Ejemplo básico de timeline"
-      },
-      source: {
-        code: DefaultTimelineDefinition
-      }
-    }
-  }
-};
-
-export const ColorVariant: Story = {
-  render: () => (
-    <Box sx={{ width: 300 }}>
-      <Timeline>
-        <TimelineItem dotColor="success" connectorColor="error">
-          eat
-        </TimelineItem>
-        <TimelineItem dotColor="primary" connectorColor="success">
-          code
-        </TimelineItem>
-        <TimelineItem dotColor="warning">
-          repeat
-        </TimelineItem>
-      </Timeline>
-    </Box>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Variantes de color en los dots y conectores"
-      },
-      source: {
-        code: DefaultTimelineDefinition
-      }
-    }
-  }
-};
-
-export const PositionVariant: Story = {
-  render: () => (
-    <Box sx={{ width: 300 }}>
-      <Timeline position="alternate">
-        <TimelineItem>
-          eat
-        </TimelineItem>
-        <TimelineItem>
-          code
-        </TimelineItem>
-        <TimelineItem>
-          repeat
-        </TimelineItem>
-      </Timeline>
-    </Box>
-  ),
-  args: {
-    position: "alternate"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Variantes de color en los dots y conectores"
-      },
-      source: {
-        code: DefaultTimelineDefinition
-      }
-    }
-  }
-};