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

package/src/components/Button/Button.stories.tsx

@@ -1,285 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./Button";
-import NotificationsIcon from "@mui/icons-material/Notifications";
-import { expect, within } from "storybook/test";
-import {
-  ContainedButtonDefinition,
-  DefaultButtonDefinition,
-  DisabledStateButtonDefinition,
-  LoadingButtonDefinition,
-  LoadingIndicatorEndButtonDefinition,
-  LoadingIndicatorStartButtonDefinition,
-  OutlinedButtonDefinition,
-  WithEndIconButtonDefinition,
-  WithLargeSizeButtonDefinition,
-  WithSmallSizeButtonDefinition,
-  WithStartIconButtonDefinition
-} from "./Button.definition";
-
-
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
-  component: Button,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["autodocs"]
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-  args: {
-    children: "Button",
-    variant: "text"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton con el texto \"Button\" y el estilo \"default\"."
-      },
-      source: {
-        code: DefaultButtonDefinition.trim()
-      }
-    }
-  }
-};
-
-export const Outlined: Story = {
-  args: {
-    children: "Button",
-    variant: "outlined"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton con el texto \"Button\" y el estilo \"outlined\"."
-      },
-      source: {
-        code: OutlinedButtonDefinition.trim()
-      }
-    }
-  }
-};
-
-export const Contained: Story = {
-  args: {
-    children: "Button",
-    variant: "contained"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton con el texto \"Button\" y el estilo \"contained\"."
-      },
-      source: {
-        code: ContainedButtonDefinition.trim()
-      }
-    }
-  }
-};
-
-
-export const WithStartIcon: Story = {
-  args: {
-    children: "Button",
-    variant: "contained",
-    startIcon: <NotificationsIcon />,
-    "data-testid": "button"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton con el texto \"Button\", el estilo \"contained\" y un icono al inicio."
-      },
-      source: {
-        code: WithStartIconButtonDefinition.trim()
-      }
-    }
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByTestId("button");
-    expect(within(button).getByText("Button")).toBeInTheDocument();
-  }
-};
-
-
-export const WithEndIcon: Story = {
-  args: {
-    children: "Button",
-    variant: "contained",
-    endIcon: <NotificationsIcon />,
-    "data-testid": "button"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton con el texto \"Button\", el estilo \"contained\" y un icono al final."
-      },
-      source: {
-        code: WithEndIconButtonDefinition.trim()
-      }
-    }
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByTestId("button");
-    expect(within(button).getByText("Button")).toBeInTheDocument();
-  }
-};
-
-export const WithSmallSize: Story = {
-  args: {
-    children: "Button",
-    variant: "contained",
-    size: "small",
-    "data-testid": "button"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton tamaño \"small\"."
-      },
-      source: {
-        code: WithSmallSizeButtonDefinition.trim()
-      }
-    }
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByTestId("button");
-    expect(within(button).getByText("Button")).toBeInTheDocument();
-  }
-};
-
-
-export const WithLargeSize: Story = {
-  args: {
-    children: "Button",
-    variant: "contained",
-    size: "large",
-    "data-testid": "button"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton tamaño \"large\"."
-      },
-      source: {
-        code: WithLargeSizeButtonDefinition.trim()
-      }
-    }
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByTestId("button");
-    expect(within(button).getByText("Button")).toBeInTheDocument();
-  }
-};
-
-export const Disabled: Story = {
-  args: {
-    children: "Button",
-    variant: "contained",
-    "data-testid": "button",
-    disabled: true
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton deshabilitado."
-      },
-      source: {
-        code: DisabledStateButtonDefinition.trim()
-      }
-    }
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByTestId("button");
-    expect(within(button).getByText("Button")).toBeInTheDocument();
-    expect(button).toBeDisabled();
-  }
-};
-
-
-export const Loading: Story = {
-  args: {
-    children: "Button",
-    variant: "contained",
-    loading: true,
-    "data-testid": "button"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton con loader."
-      },
-      source: {
-        code: LoadingButtonDefinition.trim()
-      }
-    }
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByTestId("button");
-    expect(within(button).getByText("Button")).toBeInTheDocument();
-    expect(button).toBeDisabled();
-  }
-};
-
-export const LoadingStart: Story = {
-  args: {
-    children: "Button",
-    variant: "contained",
-    loading: true,
-    loadingPosition: "start",
-    "data-testid": "button"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton con al inicio loader."
-      },
-      source: {
-        code: LoadingIndicatorStartButtonDefinition.trim()
-      }
-    }
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByTestId("button");
-    expect(within(button).getByText("Button")).toBeInTheDocument();
-    expect(button).toBeDisabled();
-  }
-};
-
-
-export const LoadingEnd: Story = {
-  args: {
-    children: "Button",
-    variant: "contained",
-    loading: true,
-    loadingPosition: "end",
-    "data-testid": "button"
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Boton con al inicio loader."
-      },
-      source: {
-        code: LoadingIndicatorEndButtonDefinition.trim()
-      }
-    }
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByTestId("button");
-    expect(within(button).getByText("Button")).toBeInTheDocument();
-    expect(button).toBeDisabled();
-  }
-};

package/src/components/Button/Button.tsx

@@ -1,67 +0,0 @@
-import { Button as MuiButton } from "@mui/material";
-import type { ButtonProps } from "@mui/material/Button";
-import React from "react";
-
-type PickButtonProps = Pick<ButtonProps, "href" | "children" | "onClick" | "color" | "disabled" | "className" | "endIcon" | "startIcon" | "loading" | "loadingIndicator" | "variant" | "size" | "loadingPosition" | "type" | "sx">;
-
-export interface MyButtonProps extends PickButtonProps {
-  children?: React.ReactNode;
-  variant?: "text" | "outlined" | "contained";
-  disabled?: boolean;
-  endIcon?: React.ReactNode;
-  startIcon?: React.ReactNode;
-  size?: "small" | "medium" | "large";
-  className?: string;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  loading?: boolean;
-  loadingIndicator?: React.ReactNode;
-  loadingPosition?: "start" | "end" | "center";
-  color?: "primary" | "success" | "error" | "info" | "warning"; //change for tailwind  class colors
-  href?: string;
-  "data-testid"?: string;
-  type?: "button" | "submit" ;
-}
-
-export const Button: React.FC<MyButtonProps> = ({
-  children,
-  variant,
-  disabled,
-  startIcon,
-  endIcon,
-  size,
-  className,
-  onClick,
-  loading,
-  loadingPosition,
-  loadingIndicator,
-  color,
-  href,
-  "data-testid": dataTestId,
-  type,
-  sx
-}) => {
-  return (
-    <MuiButton
-      disabled={disabled}
-      variant={variant}
-      startIcon={startIcon}
-      endIcon={endIcon}
-      size={size}
-      className={className}
-      onClick={onClick}
-      loading={loading}
-      loadingPosition={loadingPosition}
-      loadingIndicator={loadingIndicator}
-      sx={{ textTransform: "none", ...sx }}
-      disableRipple={true}
-      disableElevation={true}
-      color={color}
-      data-testid={dataTestId}
-      href={href}
-      type={type}
-    >
-      {children}
-    </MuiButton>);
-};
-
-export default Button;

package/src/components/Button/index.ts

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

package/src/components/Card/Card.definition.ts

@@ -1,5 +0,0 @@
-export const DefaultCardDefinition = `
-<Card>
-  Card
-</Card>
-`

package/src/components/Card/Card.stories.tsx

@@ -1,221 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Box, Button, Chip, Stack, Typography } from '@mui/material';
-import EditIcon from '@mui/icons-material/Edit';
-import DeleteIcon from '@mui/icons-material/Delete';
-import PersonIcon from '@mui/icons-material/Person';
-
-import { Card } from './Card';
-import { ActionMenu } from '../ActionMenu';
-
-const meta: Meta<typeof Card> = {
-  title: 'Components/Card',
-  component: Card,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Contenedor semántico con slots `title` / `subtitle` / `actions` / `footer`. Reemplaza el patrón `.card` + `.card-header` + `.card-body` de Metronic con composición declarativa. Backward-compat: si solo se pasa `children`, se comporta como el Card original.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['elevated', 'outlined', 'plain'],
-    },
-    padding: {
-      control: 'select',
-      options: ['none', 'dense', 'normal', 'loose'],
-    },
-    clickable: { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Card>;
-
-// ── Stories ──────────────────────────────────────────────────────────────
-
-export const LegacyBodyOnly: Story = {
-  args: {
-    children: 'Contenido simple del card — sin header ni footer.',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Modo backward-compat: pasando solo `children` el Card se comporta como el original (body con padding, sombra sutil).',
-      },
-    },
-  },
-};
-
-export const WithTitleAndSubtitle: Story = {
-  args: {
-    title: 'Datos del cliente',
-    subtitle: 'Última actualización: hace 2 horas',
-    children: (
-      <Typography variant="body2" color="text.secondary">
-        Aquí va el contenido del card, por ejemplo un formulario o una tabla.
-      </Typography>
-    ),
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    title: 'Afiliación #12458',
-    subtitle: 'Aprobada el 10 abril 2026',
-    actions: (
-      <ActionMenu
-        items={[
-          { label: 'Editar', icon: <EditIcon fontSize="small" />, onClick: () => {} },
-          {
-            label: 'Eliminar',
-            icon: <DeleteIcon fontSize="small" />,
-            onClick: () => {},
-            danger: true,
-            dividerBefore: true,
-          },
-        ]}
-      />
-    ),
-    children: (
-      <Stack direction="row" spacing={2} alignItems="center">
-        <PersonIcon color="action" />
-        <Box>
-          <Typography variant="body2" sx={{ fontWeight: 600 }}>
-            Andrea Pineda
-          </Typography>
-          <Typography variant="caption" color="text.secondary">
-            andrea@soyfri.com
-          </Typography>
-        </Box>
-        <Chip label="Activo" color="success" size="small" sx={{ ml: 'auto' }} />
-      </Stack>
-    ),
-  },
-};
-
-export const WithFooter: Story = {
-  args: {
-    title: 'Nueva afiliación',
-    children: (
-      <Stack spacing={1}>
-        <Typography variant="body2">
-          Confirma los datos antes de enviar la solicitud.
-        </Typography>
-        <Typography variant="caption" color="text.secondary">
-          Campos marcados con * son obligatorios.
-        </Typography>
-      </Stack>
-    ),
-    footer: (
-      <>
-        <Button variant="outlined" color="secondary">
-          Cancelar
-        </Button>
-        <Button variant="contained">Enviar</Button>
-      </>
-    ),
-  },
-};
-
-export const OutlinedVariant: Story = {
-  args: {
-    variant: 'outlined',
-    title: 'Card outlined',
-    subtitle: 'Sin sombra, solo borde',
-    children: (
-      <Typography variant="body2">
-        Útil cuando el card vive sobre un fondo con elevation mayor, o para
-        evitar stacked shadows en listas densas.
-      </Typography>
-    ),
-  },
-};
-
-export const PlainVariant: Story = {
-  args: {
-    variant: 'plain',
-    title: 'Card plain',
-    subtitle: 'Sin borde ni sombra',
-    children: (
-      <Typography variant="body2">
-        Perfecto para composición interna — por ejemplo, cuando un card va
-        dentro de otro y quieres evitar doble sombra.
-      </Typography>
-    ),
-  },
-};
-
-export const Clickable: Story = {
-  args: {
-    clickable: true,
-    title: 'Haz click en este card',
-    subtitle: 'Fíjate en el hover',
-    children: (
-      <Typography variant="body2" color="text.secondary">
-        El cursor cambia y aparece un lift sutil en hover. Se dispara `onClick`.
-      </Typography>
-    ),
-    onClick: () => console.log('card clicked'),
-  },
-};
-
-export const DensePadding: Story = {
-  args: {
-    padding: 'dense',
-    title: 'Card denso',
-    subtitle: 'Padding reducido',
-    children: (
-      <Stack spacing={0.5}>
-        <Typography variant="body2">Línea 1</Typography>
-        <Typography variant="body2">Línea 2</Typography>
-        <Typography variant="body2">Línea 3</Typography>
-      </Stack>
-    ),
-  },
-};
-
-export const CustomHeader: Story = {
-  args: {
-    header: (
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, width: '100%' }}>
-        <Box
-          sx={{
-            width: 40,
-            height: 40,
-            borderRadius: 2,
-            bgcolor: 'primary.main',
-            color: 'primary.contrastText',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontWeight: 700,
-          }}
-        >
-          42
-        </Box>
-        <Box sx={{ flex: 1 }}>
-          <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
-            Header totalmente custom
-          </Typography>
-          <Typography variant="caption" color="text.secondary">
-            Tomas control del slot entero
-          </Typography>
-        </Box>
-        <Chip label="v2" size="small" variant="outlined" />
-      </Box>
-    ),
-    children: (
-      <Typography variant="body2">
-        Cuando `header` se usa, los props `title`/`subtitle`/`actions` son
-        ignorados.
-      </Typography>
-    ),
-  },
-};

package/src/components/Card/Card.sx.ts

@@ -1,104 +0,0 @@
-import type { SxProps, Theme } from '@mui/material/styles';
-
-export type CardVariant = 'elevated' | 'outlined' | 'plain';
-export type CardPadding = 'none' | 'dense' | 'normal' | 'loose';
-
-export interface BuildCardSxArgs {
-  variant: CardVariant;
-  padding: CardPadding;
-  clickable: boolean;
-}
-
-const paddingMap: Record<CardPadding, number> = {
-  none: 0,
-  dense: 1.5,
-  normal: 2.5,
-  loose: 4,
-};
-
-/**
- * Estilo base del Card (root). La props `sx` del consumer se compone encima
- * junto al preset resuelto (en Card.tsx). Este builder solo se ocupa del
- * variant + padding, para que siga siendo predecible.
- */
-export function buildCardSx({
-  variant,
-  padding,
-  clickable,
-}: BuildCardSxArgs): SxProps<Theme> {
-  return (theme) => ({
-    borderRadius: 2,
-    backgroundColor: 'background.paper',
-    boxShadow:
-      variant === 'elevated'
-        ? theme.shadows[1]
-        : 'none',
-    border:
-      variant === 'outlined'
-        ? `1px solid ${theme.palette.divider}`
-        : 'none',
-    transition: theme.transitions.create(
-      ['box-shadow', 'transform', 'border-color'],
-      { duration: theme.transitions.duration.shorter },
-    ),
-    cursor: clickable ? 'pointer' : 'default',
-    ...(clickable && {
-      '&:hover': {
-        boxShadow:
-          variant === 'elevated'
-            ? theme.shadows[3]
-            : variant === 'outlined'
-              ? theme.shadows[1]
-              : 'none',
-        transform: variant !== 'plain' ? 'translateY(-1px)' : 'none',
-      },
-      '&:active': {
-        transform: 'translateY(0)',
-      },
-    }),
-    // Body padding (cuando no hay header/footer envolventes). Para el caso
-    // compuesto los slots manejan su propio padding, dejamos el root en 0.
-    p: paddingMap[padding],
-  });
-}
-
-export function buildCardHeaderSx(): SxProps<Theme> {
-  return (theme) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: 1.5,
-    px: 2.5,
-    py: 1.75,
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    '& .card-header-text': {
-      flex: 1,
-      minWidth: 0,
-    },
-    '& .card-header-actions': {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 0.5,
-      flexShrink: 0,
-    },
-  });
-}
-
-export function buildCardBodySx(padding: CardPadding): SxProps<Theme> {
-  return {
-    px: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,
-    py: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,
-  };
-}
-
-export function buildCardFooterSx(): SxProps<Theme> {
-  return (theme) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: 1,
-    px: 2.5,
-    py: 1.5,
-    borderTop: `1px solid ${theme.palette.divider}`,
-    backgroundColor: theme.palette.action.hover,
-  });
-}