@soyfri/shared-library 1.5.0-beta.3 → 1.5.0

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

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

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

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

package/src/components/Stepper/Step.tsx

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

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

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

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

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