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

package/src/components/Stat/Stat.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Stat, StatChip } from './Stat';
+import { Typography } from '@mui/material';
+import { expect, within } from 'storybook/test';
+
+const meta: Meta<typeof Stat> = {
+    title: 'Components/Stat',
+    component: Stat,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Stat>;
+
+export const Default: Story = {
+    args: {
+        stat: 100,
+        label: 'Total Sales',
+    },
+};
+
+export const Simple: Story = {
+    args: {
+        stat: 75,
+        stat2: 'Last Week',
+        label: 'Completed Orders',
+        simple: true,
+    },
+};
+
+export const Chip: Story = {
+    args: {
+        stat: 42,
+        label: 'New Users',
+        chip: true,
+        chipColor: '#673AB7',
+    },
+};
+
+export const ChipList: Story = {
+    args: {
+        label: 'Status',
+        chipList: true,
+        chips: [
+            { stat: 'Active', chipColor: '#4CAF50' },
+            { stat: 'Pending', chipColor: '#FFC107' },
+            { stat: 'Blocked', chipColor: '#F44336' },
+        ] as StatChip[],
+    },
+};
+
+export const WithCustomDisplay: Story = {
+    args: {
+        stat: 350,
+        label: 'Revenue',
+        chip: true,
+        chipColor: '#2E7D32',
+        statDisplay: (stat: any) => (
+            <Typography variant="h6" fontWeight="bold">
+                ${stat.toLocaleString()}
+            </Typography>
+        ),
+    },
+};
+
+export const aStat: Story = {
+    args: {
+        stat: 42,
+        label: 'New Users',
+        chip: true,
+        chipColor: '#673AB7',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const stat = canvas.getByTestId('chip-template-option-outlet');
+        expect(stat).toBeInTheDocument();
+
+        expect(canvas.getByText('42')).toBeInTheDocument();
+
+    }
+}

package/src/components/Stat/Stat.tsx

@@ -0,0 +1,117 @@
+import React, { useMemo } from 'react';
+import { Chip, Stack, Typography, Box } from '@mui/material';
+
+export interface StatChip {
+  stat: any;
+  chipColor: string;
+}
+
+export interface StatProps {
+  stat: any; // Replace 'any' with the actual type of 'stat'
+  stat2?: any; // Replace 'any' with the actual type of'stat2'
+  label: string; // Replace 'any' with the actual type of'label'
+  color?: string;
+  chipColor?: string;
+  chips?: StatChip[]; // Replace 'any' with the actual type of'chips'
+  simple?: boolean;
+  chip?: boolean;
+  chipList?: boolean;
+  children?: React.ReactNode;
+  statDisplay?: (stat: any) => React.ReactNode;
+}
+
+export const Stat: React.FC<StatProps> = ({
+  stat,
+  stat2,
+  label,
+  color = '#1469B8',
+  chipColor = '#1469B8',
+  chips = [],
+  simple = false,
+  chip = false,
+  chipList = false,
+  children,
+  statDisplay,
+}) => {
+  const selectedTemplate = useMemo(() => {
+    if (simple) return 'simple';
+    if (chip) return 'chip';
+    if (chipList) return 'chipList';
+    return 'default';
+  }, [simple, chip, chipList]);
+
+  const renderStatDisplay = () => {
+    return statDisplay ? statDisplay(stat) : <Typography variant="h6">{stat}</Typography>;
+  };
+
+  return (
+    <>
+      {selectedTemplate === 'default' && (
+        <Box className="stat">
+          <Typography variant="h4" data-testid="selection-template-option-outlet">
+            {renderStatDisplay()}
+          </Typography>
+          <Box className="stat__label" display="flex" alignItems="center" gap={1}>
+            <Typography variant="body1">{label}</Typography>
+            <Box
+              width={40}
+              height={4}
+              bgcolor={color}
+              data-testid="stat-border"
+              borderRadius={2}
+            />
+          </Box>
+        </Box>
+      )}
+
+      {selectedTemplate === 'simple' && (
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Typography variant="body1">{label}</Typography>
+          <Typography data-testid="selection-template-option-outlet">
+            {renderStatDisplay()}
+          </Typography>
+          {stat2 && <Typography>{stat2}</Typography>}
+        </Stack>
+      )}
+
+      {selectedTemplate === 'chip' && (
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Typography variant="body1">{label}</Typography>
+          <Chip
+            data-testid="chip-template-option-outlet"
+            label={renderStatDisplay()}
+            sx={{
+              backgroundColor: chipColor,
+              color: '#fff',
+              fontWeight: 'bold',
+            }}
+          />
+        </Stack>
+      )}
+
+      {selectedTemplate === 'chipList' && (
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Typography variant="body1">{label}</Typography>
+          <Stack direction="row" spacing={1}>
+            {chips.map((chip, i) => (
+              <Chip
+                key={i}
+                label={chip.stat}
+                sx={{
+                  backgroundColor: chip.chipColor,
+                  color: '#fff',
+                  fontWeight: 'bold',
+                }}
+              />
+            ))}
+          </Stack>
+        </Stack>
+      )}
+
+      {/* Content projection (similar to ng-content) */}
+      {children}
+    </>
+  );
+};
+
+export default Stat;

package/src/components/Stat/index.ts

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

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();