@soyfri/shared-library 2.0.0-beta.3 → 2.0.0-beta.4

package/src/components/Table/exportsUtils.ts

@@ -0,0 +1,195 @@
+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

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

package/src/components/Table/types.ts

@@ -0,0 +1,34 @@
+// 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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,2 @@
+export { default as Tabs } from './Tabs';
+export { default as Tab } from './Tab';

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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,108 @@
+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
+      }
+    }
+  }
+};