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

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

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

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

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

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

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

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

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

@@ -0,0 +1,104 @@
+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,
+  });
+}