@soyfri/shared-library 1.5.0 → 1.6.0-beta.0

package/src/components/StatusMessage/StatusMessage.stories.tsx

@@ -1,130 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { Button } from '@mui/material';
-import StatusMessage from './StatusMessage';
-
-const meta = {
-  title: 'Components/StatusMessage',
-  component: StatusMessage,
-  tags: ['autodocs'],
-  argTypes: {
-    title: { control: 'text' },
-    description: { control: 'text' },
-    messageType: {
-      control: 'select',
-      options: ['success', 'danger', 'warning'],
-    },
-    displayType: {
-      control: 'select',
-      options: ['alert', 'modal'],
-    },
-    open: {
-      control: 'boolean',
-      if: { arg: 'displayType', eq: 'modal' },
-    },
-    close: { action: 'closed' },
-  },
-  args: {
-    title: 'Título del Mensaje',
-    description: 'Esta es una descripción detallada del mensaje de estado.',
-  },
-} satisfies Meta<typeof StatusMessage>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-// --- Historias de Alerta (Alert) ---
-export const AlertSuccess: Story = {
-  args: {
-    messageType: 'success',
-    displayType: 'alert',
-    title: 'Operación Exitosa',
-    description: 'La operación se ha completado correctamente.',
-  },
-};
-
-export const AlertWarning: Story = {
-  args: {
-    messageType: 'warning',
-    displayType: 'alert',
-    title: 'Advertencia',
-    description: 'Esta acción podría tener consecuencias no deseadas.',
-  },
-};
-
-export const AlertDanger: Story = {
-  args: {
-    messageType: 'danger',
-    displayType: 'alert',
-    title: 'Error de Procesamiento',
-    description: 'Se ha producido un error inesperado al procesar la solicitud.',
-  },
-};
-
-// --- Historias de Modal (Dialog) ---
-export const ModalSuccess: Story = {
-  render: (args) => {
-    const [open, setOpen] = useState(true);
-    const handleClose = () => setOpen(false);
-
-    return (
-      <>
-        <Button onClick={() => setOpen(true)} variant="contained" color="success">
-          Mostrar Modal de Éxito
-        </Button>
-        <StatusMessage {...args} open={open} close={handleClose} />
-      </>
-    );
-  },
-  args: {
-    messageType: 'success',
-    displayType: 'modal',
-    title: 'Operación Exitosa',
-    description: 'La operación se ha completado correctamente.',
-  },
-};
-
-export const ModalWarning: Story = {
-  render: (args) => {
-    const [open, setOpen] = useState(false);
-    const handleClose = () => setOpen(false);
-
-    return (
-      <>
-        <Button onClick={() => setOpen(true)} variant="contained" color="warning">
-          Mostrar Modal de Advertencia
-        </Button>
-        <StatusMessage {...args} open={open} close={handleClose} />
-      </>
-    );
-  },
-  args: {
-    messageType: 'warning',
-    displayType: 'modal',
-    title: 'Advertencia',
-    description: 'Esta acción podría tener consecuencias no deseadas.',
-  },
-};
-
-export const ModalDanger: Story = {
-  render: (args) => {
-    const [open, setOpen] = useState(false);
-    const handleClose = () => setOpen(false);
-
-    return (
-      <>
-        <Button onClick={() => setOpen(true)} variant="contained" color="error">
-          Mostrar Modal de Error
-        </Button>
-        <StatusMessage {...args} open={open} close={handleClose} />
-      </>
-    );
-  },
-  args: {
-    messageType: 'danger',
-    displayType: 'modal',
-    title: 'Error de Procesamiento',
-    description: 'Se ha producido un error inesperado al procesar la solicitud.',
-  },
-};

package/src/components/StatusMessage/StatusMessage.tsx

@@ -1,162 +0,0 @@
-import React from 'react';
-import {
-  Alert,
-  Box,
-  Typography,
-  Dialog,
-  DialogContent,
-  DialogActions,
-  Button
-} from '@mui/material';
-import {
-  ErrorOutline as ErrorOutlineIcon,
-  CheckCircleOutline as CheckCircleOutlineIcon,
-  WarningAmber as WarningAmberIcon
-} from '@mui/icons-material';
-
-/**
- * `StatusMessage` es un componente de React que muestra mensajes de éxito, error o advertencia
- * en un modal o una alerta, utilizando el sistema de diseño de Material-UI.
- *
- * El componente puede mostrar alertas con estilos específicos o un modal personalizable
- * usando `Dialog` y otros componentes de MUI. También puede incluir una función opcional
- * para cerrar el mensaje.
- *
- * @param {StatusMessageProps} props - Las propiedades del componente.
- * @param {string | undefined} props.title - Título del mensaje que se muestra en el modal o alerta.
- * @param {string} [props.description] - Descripción o contenido detallado del mensaje.
- * @param {'success' | 'danger' | 'warning'} [props.messageType='success'] - Tipo de mensaje que determina el estilo visual. 'danger' se mapea a 'error' de MUI.
- * @param {'alert' | 'modal'} [props.displayType='alert'] - Determina si el mensaje se muestra como alerta o modal.
- * @param {() => void} [props.close] - Función opcional para ejecutar al cerrar el mensaje.
- * @returns {React.FC<StatusMessageProps>} Un componente funcional de React que muestra mensajes personalizados.
- *
- * @example
- * // Ejemplo de uso como una alerta:
- * <StatusMessage
- * title="Operación Exitosa"
- * description="La operación se ha completado correctamente."
- * messageType="success"
- * displayType="alert"
- * />
- *
- * // Ejemplo de uso como un modal:
- * <StatusMessage
- * title="Advertencia"
- * description="Se ha producido un error inesperado."
- * messageType="danger"
- * displayType="modal"
- * close={() => console.log('Modal cerrado')}
- * />
- */
-
-export interface StatusMessageProps {
-  title: string | undefined;
-  description?: string;
-  messageType?: 'success' | 'danger' | 'warning';
-  displayType?: 'alert' | 'modal';
-  close?: () => void;
-  // Propiedad para controlar la visibilidad del modal desde el padre
-  open?: boolean;
-}
-
-const StatusMessage = ({
-  title,
-  description,
-  messageType = 'success',
-  displayType = 'alert',
-  close,
-  open = true,
-}: StatusMessageProps) => {
-
-  const getAlertVariant = () => {
-    switch (messageType) {
-      case 'success':
-        return 'success';
-      case 'danger':
-        return 'error';
-      case 'warning':
-        return 'warning';
-      default:
-        return 'info'; // Fallback
-    }
-  };
-
-  const getIcon = () => {
-    switch (messageType) {
-      case 'success':
-        return <CheckCircleOutlineIcon sx={{ fontSize: '64px', color: 'success.main' }} />;
-      case 'danger':
-        return <ErrorOutlineIcon sx={{ fontSize: '64px', color: 'error.main' }} />;
-      case 'warning':
-        return <WarningAmberIcon sx={{ fontSize: '64px', color: 'warning.main' }} />;
-      default:
-        return null;
-    }
-  };
-
-  const alertVariant = getAlertVariant();
-
-  if (!description) {
-    return null;
-  }
-
-  return (
-    <>
-      {displayType === 'modal' ? (
-        <Dialog
-          open={open}
-          onClose={close}
-          aria-labelledby="message-dialog-title"
-          maxWidth="md"
-          PaperProps={{
-            sx: {
-              borderRadius: '16px',
-              p: 2,
-            },
-          }}
-        >
-          <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', p: 4, gap: 2 }}>
-            <Box sx={{ mb: 2 }}>
-              {getIcon()}
-            </Box>
-            <Typography variant="h4" component="h2" sx={{ fontWeight: 'bold' }}>
-              {title || ''}
-            </Typography>
-            <Typography variant="body1" color="text.secondary">
-              {description}
-            </Typography>
-          </DialogContent>
-          {close && (
-            <DialogActions sx={{ justifyContent: 'center', p: 2 }}>
-              <Button onClick={close} variant="contained" color={alertVariant}>
-                Aceptar
-              </Button>
-            </DialogActions>
-          )}
-        </Dialog>
-      ) : (
-        <Alert
-          severity={alertVariant}
-          sx={{ mb: 2, mt: 2 }}
-          onClose={close}
-          action={
-            close && (
-              <Button onClick={close} size="small" color="inherit">
-                Cerrar
-              </Button>
-            )
-          }
-        >
-          <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-            {title}
-          </Typography>
-          <Typography variant="body2" sx={{ mt: 1 }}>
-            {description}
-          </Typography>
-        </Alert>
-      )}
-    </>
-  );
-};
-
-export default StatusMessage;

package/src/components/StatusMessage/index.ts

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

package/src/components/Stepper/Step.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { StepProps as MuiStepProps } from "@mui/material";
-
-type PickMuiStepProps = Pick<MuiStepProps, "completed" | "disabled" | "sx" | "className">;
-
-export interface StepProps extends PickMuiStepProps {
-  label: React.ReactNode;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  sx?: object;
-  dotColor?: string;          // dot base
-  activeDotColor?: string;    // dot activa
-  completedDotColor?: string; // dot completada
-  iconTextColor?: string;     // número o check dentro
-}
-
-export const Step = (_: StepProps): null => null;
-
-Step.displayName = "Step";
-
-export default Step;

package/src/components/Stepper/Stepper.definition.ts

@@ -1,75 +0,0 @@
-export const defaultStepper = `
-  const [currentStep, setCurrentStep] = useState(0);
-        return (
-            <Box>
-                <Stepper currentStep={currentStep}  {...args}>
-                    <Step label="Paso 1">
-                        <div>Contenido del paso 1</div>
-                    </Step>
-                    <Step label="Paso 2">
-                        <div>Contenido del paso 2</div>
-                    </Step>
-                    <Step label="Paso 3">
-                        <div>Contenido del paso 3</div>
-                    </Step>
-                </Stepper>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Atras
-                </Button>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.min(prev + 1, 2))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Siguiente
-                </Button>
-            </Box>
-        );
-`.trim();
-
-export const stepperWithColorDots = `
-const [currentStep, setCurrentStep] = useState(0);
-
-return (
-  <Box>
-    <Stepper currentStep={currentStep} {...args}>
-      <Step
-        label="Paso 1"
-        dotColor="#1976d2"
-      >
-        <div>Contenido del paso 1</div>
-      </Step>
-      <Step
-        label="Paso 2"
-        dotColor="#ffa726"
-      >
-        <div>Contenido del paso 2</div>
-      </Step>
-      <Step
-        label="Paso 3"
-        dotColor="#4caf50"
-      >
-        <div>Contenido del paso 3</div>
-      </Step>
-    </Stepper>
-    <Button
-      type="button"
-      onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
-      sx={{ marginTop: 16 }}
-    >
-      Atras
-    </Button>
-    <Button
-      type="button"
-      onClick={() => setCurrentStep((prev) => Math.min(prev + 1, 2))}
-      sx={{ marginTop: 16 }}
-    >
-      Siguiente
-    </Button>
-  </Box>
-);
-`.trim();

package/src/components/Stepper/Stepper.stories.tsx

@@ -1,122 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
-import Step from "./Step";
-import { Button } from "../Button";
-import { Box } from "@mui/material";
-import Stepper from "./Stepper";
-import { defaultStepper, stepperWithColorDots } from "./Stepper.definition";
-
-const meta: Meta<typeof Stepper> = {
-    title: "Components/Stepper",
-    component: Stepper,
-    tags: ["autodocs"]
-};
-export default meta;
-type Story = StoryObj<typeof Stepper>;
-
-export const DefaultStepper: Story = {
-    render: (args) => {
-        const [currentStep, setCurrentStep] = useState(0);
-        return (
-            <Box>
-                <Stepper currentStep={currentStep}  {...args}>
-                    <Step label="Paso 1">
-                        <div>Contenido del paso 1</div>
-                    </Step>
-                    <Step label="Paso 2">
-                        <div>Contenido del paso 2</div>
-                    </Step>
-                    <Step label="Paso 3">
-                        <div>Contenido del paso 3</div>
-                    </Step>
-                </Stepper>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Atras
-                </Button>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.min(prev + 1, 2))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Siguiente
-                </Button>
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: "Ejemplo básico de timeline"
-            },
-            source: {
-                code: defaultStepper
-            }
-        }
-    },
-    argTypes: {
-        children: { control: false, description: 'Componentes `Step` que definen la estructura de el stepper' },
-        orientation: { description: 'Indica si la posicion de los steps, es horizontal o vertical' },
-        alternateLabel: { description: 'Indica si las etiquetas de los steps, se muestran debajo de los iconos' },
-        currentStep: { description: 'Indica el step actual, el cual se encuentra activo' },
-        sx: { description: 'Estilos personalizados para el stepper' },
-    }
-};
-
-
-export const ColorStepper: Story = {
-    render: (args) => {
-        const [currentStep, setCurrentStep] = useState(0);
-        return (
-            <Box>
-                <Stepper currentStep={currentStep} {...args}>
-                    <Step
-                        label="Paso 1"
-                        dotColor="#1976d2"
-                    >
-                        <div>Contenido del paso 1</div>
-                    </Step>
-                    <Step
-                        label="Paso 2"
-                        dotColor="#ffa726"
-                    >
-                        <div>Contenido del paso 2</div>
-                    </Step>
-                    <Step
-                        label="Paso 3"
-                        dotColor="#4caf50"
-                    >
-                        <div>Contenido del paso 3</div>
-                    </Step>
-                </Stepper>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Atras
-                </Button>
-                <Button
-                    type="button"
-                    onClick={() => setCurrentStep((prev) => Math.min(prev + 1, 2))}
-                    sx={{ marginTop: 16 }}
-                >
-                    Siguiente
-                </Button>
-            </Box>
-        );
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: "Stepper con variantes de color en los dots"
-            },
-             source: {
-                code: stepperWithColorDots
-            }
-        }
-    }
-};

package/src/components/Stepper/Stepper.tsx

@@ -1,59 +0,0 @@
-import React, { ReactElement } from "react";
-import { Stepper as MuiStepper, Step as MuiStep, StepLabel as MuiStepLabel, Box } from "@mui/material";
-import { StepProps } from "./Step";
-
-interface MyStepperProps {
-  children: ReactElement<StepProps>[];
-  orientation?: "horizontal" | "vertical";
-  sx?: object;
-  alternateLabel?: boolean;
-  currentStep?: number;
-}
-
-export const Stepper: React.FC<MyStepperProps> = ({
-  children,
-  orientation = "horizontal",
-  alternateLabel = false,
-
-  sx,
-  currentStep = 0,
-}) => {
-
-  return (
-    <Box sx={sx}>
-      <MuiStepper activeStep={currentStep} orientation={orientation} alternativeLabel={alternateLabel} >
-        {children.map((child, idx) => {
-          const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
-          return (
-            <MuiStep key={idx} completed={completed} disabled={disabled} className={className} sx={stepSx}>
-              <MuiStepLabel sx={{
-                pointerEvents: 'none',
-                "& .MuiStepIcon-root": {
-                  color: dotColor,
-                },
-                "& .MuiStepIcon-active": {
-                  color: activeDotColor,
-                },
-                "& .MuiStepIcon-completed": {
-                  color: completedDotColor,
-                },
-                "& .MuiStepIcon-text": {
-                  fill: iconTextColor,
-                },
-              }}
-              >{label}
-              </MuiStepLabel>
-            </MuiStep>
-          );
-        })}
-      </MuiStepper>
-      <Box mt={2}>
-        {children.map((child, idx) =>
-          idx === currentStep ? <Box key={idx}>{child.props.children}</Box> : null
-        )}
-      </Box>
-    </Box>
-  );
-};
-
-export default Stepper;

package/src/components/Stepper/index.ts

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