@soyfri/shared-library 2.0.0-beta.17 → 2.0.0-beta.18

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

@@ -0,0 +1,159 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box, Button, Stack } 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>;
+
+// ── Alerts (inline) ──────────────────────────────────────────────────────
+
+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.',
+  },
+};
+
+/**
+ * Demo del botón de cerrar en modo alert.
+ *
+ * Cuando `close` se pasa, aparece la X de MUI. El StatusMessage maneja su
+ * propio state interno de visibilidad — al clickear la X, el alert se
+ * oculta automáticamente (sin controlar `open` desde afuera).
+ */
+export const AlertWithClose: Story = {
+  render: () => {
+    const [key, setKey] = useState(0);
+    return (
+      <Stack spacing={2}>
+        <Box>
+          <Button variant="outlined" size="small" onClick={() => setKey((k) => k + 1)}>
+            Reiniciar
+          </Button>
+        </Box>
+        <StatusMessage
+          key={key}
+          messageType="success"
+          displayType="alert"
+          title="Guardado correctamente"
+          description="Hacé click en la X — el alert se oculta solo."
+          close={() => {
+            /* opcional: side effect del consumer */
+          }}
+        />
+      </Stack>
+    );
+  },
+};
+
+// ── Modals ───────────────────────────────────────────────────────────────
+
+export const ModalSuccess: Story = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="contained" color="success">
+          Mostrar modal de éxito
+        </Button>
+        <StatusMessage {...args} open={open} close={() => setOpen(false)} />
+      </>
+    );
+  },
+  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);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="contained" color="warning">
+          Mostrar modal de advertencia
+        </Button>
+        <StatusMessage {...args} open={open} close={() => setOpen(false)} />
+      </>
+    );
+  },
+  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);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="contained" color="error">
+          Mostrar modal de error
+        </Button>
+        <StatusMessage {...args} open={open} close={() => setOpen(false)} />
+      </>
+    );
+  },
+  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,143 @@
+import { useId, useState, type FC } 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';
+
+export interface StatusMessageProps {
+  /** Título del mensaje. */
+  title?: string;
+  /** Descripción/contenido detallado. Requerido para que el componente renderice. */
+  description?: string;
+  /** Tipo de mensaje (controla color + icono). `danger` mapea a `error` de MUI. */
+  messageType?: 'success' | 'danger' | 'warning';
+  /** Forma de presentación: alerta inline o modal. Default: `'alert'`. */
+  displayType?: 'alert' | 'modal';
+  /** Callback al cerrar. Si se omite, no se muestra botón de cerrar. */
+  close?: () => void;
+  /**
+   * Controla visibilidad. Si se omite, el componente maneja su propio
+   * state (se oculta solo al llamar `close`). Si se pasa, queda controlled
+   * y el consumer es responsable de actualizarlo.
+   */
+  open?: boolean;
+}
+
+/**
+ * Mensaje de éxito / error / advertencia en forma de alerta inline o modal.
+ *
+ * - **Uncontrolled**: sin pasar `open`, el componente maneja su propia
+ *   visibilidad. Al llamar `close`, se oculta automáticamente.
+ * - **Controlled**: pasando `open`, el consumer decide cuándo mostrar/ocultar.
+ */
+export const StatusMessage: FC<StatusMessageProps> = ({
+  title,
+  description,
+  messageType = 'success',
+  displayType = 'alert',
+  close,
+  open: controlledOpen,
+}) => {
+  const [internalOpen, setInternalOpen] = useState(true);
+  const titleId = useId();
+  const descId = useId();
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const handleClose = () => {
+    if (!isControlled) setInternalOpen(false);
+    close?.();
+  };
+
+  const alertVariant = messageType === 'danger' ? 'error' : messageType;
+
+  const icon =
+    messageType === 'success' ? (
+      <CheckCircleOutlineIcon sx={{ fontSize: 64, color: 'success.main' }} />
+    ) : messageType === 'danger' ? (
+      <ErrorOutlineIcon sx={{ fontSize: 64, color: 'error.main' }} />
+    ) : (
+      <WarningAmberIcon sx={{ fontSize: 64, color: 'warning.main' }} />
+    );
+
+  if (!description) return null;
+  if (!isOpen) return null;
+
+  if (displayType === 'modal') {
+    return (
+      <Dialog
+        open={isOpen}
+        onClose={handleClose}
+        aria-labelledby={title ? titleId : undefined}
+        aria-describedby={descId}
+        maxWidth="md"
+        slotProps={{
+          paper: {
+            sx: { borderRadius: '16px', p: 2 },
+          },
+        }}
+      >
+        <DialogContent
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center',
+            p: 4,
+            gap: 2,
+          }}
+        >
+          <Box sx={{ mb: 2 }}>{icon}</Box>
+          {title && (
+            <Typography
+              id={titleId}
+              variant="h4"
+              component="h2"
+              sx={{ fontWeight: 'bold' }}
+            >
+              {title}
+            </Typography>
+          )}
+          <Typography id={descId} variant="body1" color="text.secondary">
+            {description}
+          </Typography>
+        </DialogContent>
+        <DialogActions sx={{ justifyContent: 'center', p: 2 }}>
+          <Button onClick={handleClose} variant="contained" color={alertVariant}>
+            Aceptar
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Alert
+      severity={alertVariant}
+      sx={{ mb: 2, mt: 2 }}
+      onClose={close !== undefined ? handleClose : undefined}
+    >
+      {title && (
+        <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,3 @@
+
+export { StatusMessage, default } from './StatusMessage'
+export type { StatusMessageProps } 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,194 @@
+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 ScrollableHorizontal: Story = {
+    render: (args) => {
+        const [currentStep, setCurrentStep] = useState(0);
+        const totalSteps = 7;
+        return (
+            <Box>
+                <Box
+                    sx={{
+                        // Simulamos un viewport angosto (mobile) para ver el scroll horizontal
+                        // sin romper el layout del contenedor padre.
+                        width: 360,
+                        maxWidth: "100%",
+                        border: "1px dashed",
+                        borderColor: "divider",
+                        p: 2,
+                    }}
+                >
+                    <Stepper currentStep={currentStep} {...args}>
+                        <Step label="Datos del cupón">
+                            <div>Contenido del paso 1</div>
+                        </Step>
+                        <Step label="Monto">
+                            <div>Contenido del paso 2</div>
+                        </Step>
+                        <Step label="Restricciones">
+                            <div>Contenido del paso 3</div>
+                        </Step>
+                        <Step label="Recursos visuales">
+                            <div>Contenido del paso 4</div>
+                        </Step>
+                        <Step label="Vigencia">
+                            <div>Contenido del paso 5</div>
+                        </Step>
+                        <Step label="Usuarios dirigidos">
+                            <div>Contenido del paso 6</div>
+                        </Step>
+                        <Step label="Confirmación">
+                            <div>Contenido del paso 7</div>
+                        </Step>
+                    </Stepper>
+                </Box>
+                <Button
+                    type="button"
+                    onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
+                    sx={{ marginTop: 16, marginRight: 8 }}
+                >
+                    Atras
+                </Button>
+                <Button
+                    type="button"
+                    onClick={() => setCurrentStep((prev) => Math.min(prev + 1, totalSteps - 1))}
+                    sx={{ marginTop: 16 }}
+                >
+                    Siguiente
+                </Button>
+            </Box>
+        );
+    },
+    parameters: {
+        docs: {
+            description: {
+                story:
+                    "Stepper horizontal dentro de un contenedor angosto (simula mobile). " +
+                    "Cuando los steps no caben, el header muestra scroll horizontal en lugar " +
+                    "de desbordar el contenedor. El cuerpo (contenido del step activo) mantiene " +
+                    "su ancho normal."
+            }
+        }
+    }
+};
+
+
+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
+            }
+        }
+    }
+};