@soyfri/shared-library 2.0.0-beta.16 → 2.0.0-beta.18

package/src/components/Button/Button.definition.ts

@@ -0,0 +1,97 @@
+export const DefaultButtonDefinition = `
+<Button variant="text">
+  Button
+</Button>
+`
+
+export const OutlinedButtonDefinition = `
+<Button variant="outlined">
+  Button
+</Button>
+`
+
+export const ContainedButtonDefinition = `
+<Button variant="contained">
+  Button
+</Button>
+`
+
+export const WithStartIconButtonDefinition = `
+<Button
+  data-testid="button"
+  startIcon={<NotificationsIcon/>}
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const WithEndIconButtonDefinition = `
+<Button
+  data-testid="button"
+  endIcon={<NotificationsIcon/>}
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const WithSmallSizeButtonDefinition = `
+<Button
+  data-testid="button"
+  size="small"
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const WithLargeSizeButtonDefinition = `
+<Button
+  data-testid="button"
+  size="large"
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const DisabledStateButtonDefinition = `
+<Button
+  data-testid="button"
+  disabled
+  variant="contained"
+>
+  Button
+</Button>`
+
+export const LoadingButtonDefinition = `
+<Button
+  data-testid="button"
+  loading
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const LoadingIndicatorStartButtonDefinition = `
+<Button
+  data-testid="button"
+  loading
+  loadingPosition="start"
+  variant="contained"
+>
+  Button
+</Button>
+`
+
+export const LoadingIndicatorEndButtonDefinition = `
+<Button
+  data-testid="button"
+  loading
+  loadingPosition="end"
+  variant="contained"
+>
+  Button
+</Button>`

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,66 @@
+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

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export type { ButtonProps } 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,102 @@
+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

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

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

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