@soyfri/shared-library 2.0.0-beta.10 → 2.0.0-beta.11

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

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

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

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

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