@soyfri/shared-library 2.0.0-beta.20 → 2.0.0-beta.22

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,66 +0,0 @@
-import { Button as MuiButton } from "@mui/material";
-import type { SxProps, Theme } from "@mui/material/styles";
-import React from "react";
-
-export interface ButtonProps {
-  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?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
-  href?: string;
-  "data-testid"?: string;
-  type?: "button" | "submit";
-  sx?: SxProps<Theme>;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  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,2 +0,0 @@
-export { default as Button } from './Button';
-export type { ButtonProps } 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,102 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Stack, Typography } from '@mui/material';
-
-import { Card } from './Card';
-
-const meta: Meta<typeof Card> = {
-  title: 'Components/Card',
-  component: Card,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Contenedor simple basado en MUI Card con variantes y padding configurable. El contenido se renderiza como `children`.',
-      },
-    },
-  },
-  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 Default: Story = {
-  args: {
-    children: 'Contenido simple del card.',
-  },
-};
-
-export const OutlinedVariant: Story = {
-  args: {
-    variant: 'outlined',
-    children: (
-      <Typography variant="body2">
-        Card con borde, sin sombra. Útil cuando vive sobre un fondo con
-        elevation mayor.
-      </Typography>
-    ),
-  },
-};
-
-export const PlainVariant: Story = {
-  args: {
-    variant: 'plain',
-    children: (
-      <Typography variant="body2">
-        Card sin borde ni sombra. Ideal para composición interna (cards
-        anidados sin doble sombra).
-      </Typography>
-    ),
-  },
-};
-
-export const Clickable: Story = {
-  args: {
-    clickable: true,
-    children: (
-      <Typography variant="body2" color="text.secondary">
-        Haz hover y click. El cursor cambia y hay un lift sutil.
-      </Typography>
-    ),
-    onClick: () => console.log('card clicked'),
-  },
-};
-
-export const DensePadding: Story = {
-  args: {
-    padding: 'dense',
-    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 LoosePadding: Story = {
-  args: {
-    padding: 'loose',
-    children: (
-      <Typography variant="body2">
-        Card con padding amplio. Útil para hero sections o tarjetas destacadas.
-      </Typography>
-    ),
-  },
-};

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

@@ -1,58 +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. La prop `sx` del consumer se compone encima junto al
- * preset resuelto (en Card.tsx). Este builder solo se ocupa de 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)',
-      },
-    }),
-    p: paddingMap[padding],
-  });
-}

package/src/components/Card/Card.tsx

@@ -1,85 +0,0 @@
-import { type ReactNode } from 'react';
-import { Card as MuiCard, useTheme } from '@mui/material';
-import type { SxProps, Theme } from '@mui/material/styles';
-
-import { resolvePreset } from '../_shared/resolvePreset';
-import { buildCardSx, type CardVariant, type CardPadding } from './Card.sx';
-
-export interface CardProps {
-  /** Contenido del Card. */
-  children?: ReactNode;
-  /**
-   * Variante visual.
-   * - `elevated` (default): sombra sutil.
-   * - `outlined`: borde sin sombra.
-   * - `plain`: sin borde ni sombra, útil para layouts con nesting.
-   */
-  variant?: CardVariant;
-  /** Densidad del padding interno. */
-  padding?: CardPadding;
-  /** Si `true`, muestra feedback de hover/active (cursor, sombra). */
-  clickable?: boolean;
-  /**
-   * Preset registrado en `theme.styles.Card`. `"default"` usa el estilo
-   * built-in sin preset extra.
-   */
-  preset?: string;
-  /**
-   * MUI `raised` legacy — mantenido por backward-compat. Equivale a
-   * `variant="elevated"` con sombra mayor. Ignora `variant` si se usa.
-   */
-  raised?: boolean;
-  /** sx del root. Se compone sobre el base + preset. */
-  sx?: SxProps<Theme>;
-  onClick?: () => void;
-  onBlur?: () => void;
-  className?: string;
-  'data-testid'?: string;
-}
-
-export function Card({
-  children,
-  variant,
-  padding = 'normal',
-  clickable = false,
-  preset,
-  raised,
-  sx,
-  onClick,
-  onBlur,
-  className,
-  'data-testid': dataTestId,
-}: CardProps) {
-  const theme = useTheme();
-
-  const resolvedVariant: CardVariant = raised
-    ? 'elevated'
-    : (variant ?? 'elevated');
-
-  const presetSx = resolvePreset('Card', preset, theme);
-
-  const rootSx: SxProps<Theme> = [
-    buildCardSx({
-      variant: resolvedVariant,
-      padding,
-      clickable: clickable || Boolean(onClick),
-    }),
-    ...(presetSx ? [presetSx] : []),
-    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
-  ];
-
-  return (
-    <MuiCard
-      sx={rootSx}
-      className={className}
-      data-testid={dataTestId}
-      onClick={onClick}
-      onBlur={onBlur}
-      elevation={0}
-    >
-      {children}
-    </MuiCard>
-  );
-}
-
-export default Card;

package/src/components/Card/index.ts

@@ -1,4 +0,0 @@
-export { Card, default } from './Card';
-export type { CardProps } from './Card';
-export type { CardVariant, CardPadding } from './Card.sx';
-export { buildCardSx } from './Card.sx';