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

package/src/components/AppBar/AppBar.stories.tsx

@@ -1,272 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Box, Typography, Button, IconButton, Tooltip } from '@mui/material';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import PersonIcon from '@mui/icons-material/Person';
-import SettingsIcon from '@mui/icons-material/Settings';
-import LogoutIcon from '@mui/icons-material/Logout';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-
-import { AppBar } from './AppBar';
-import { AppBarBrand } from './AppBarBrand';
-import { AppBarMenuToggle } from './AppBarMenuToggle';
-import { AppBarUserMenu } from './AppBarUserMenu';
-
-const meta: Meta<typeof AppBar> = {
-  title: 'Components/AppBar',
-  component: AppBar,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'AppBar (header superior) pensado como shell compositivo. El consumer arma su contenido con los sub-componentes `AppBarBrand`, `AppBarMenuToggle` y `AppBarUserMenu`, además de cualquier acción custom. Reemplaza el header de Metronic.',
-      },
-    },
-  },
-  argTypes: {
-    position: {
-      control: 'select',
-      options: ['fixed', 'sticky', 'static', 'absolute', 'relative'],
-    },
-    color: {
-      control: 'select',
-      options: ['default', 'primary', 'secondary', 'transparent', 'inherit'],
-    },
-    elevation: { control: { type: 'number', min: 0, max: 24, step: 1 } },
-    height: { control: { type: 'number', min: 48, max: 96, step: 4 } },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof AppBar>;
-
-// ── Helpers ──────────────────────────────────────────────────────────────
-
-const SampleLogo = () => (
-  <Box
-    sx={{
-      width: 32,
-      height: 32,
-      borderRadius: 1,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: 'primary.main',
-      color: 'primary.contrastText',
-      fontWeight: 700,
-      fontSize: 14,
-    }}
-  >
-    F
-  </Box>
-);
-
-const SampleBody = () => (
-  <Box sx={{ p: 3 }}>
-    <Typography variant="h5" gutterBottom>
-      Contenido de la página
-    </Typography>
-    <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-      Este bloque sólo demuestra el layout bajo el AppBar.
-    </Typography>
-    {Array.from({ length: 20 }).map((_, idx) => (
-      <Typography key={idx} variant="body2" sx={{ mb: 1 }}>
-        Línea {idx + 1} — contenido de ejemplo para scroll sticky.
-      </Typography>
-    ))}
-  </Box>
-);
-
-const userMenuItems = [
-  {
-    label: 'Mi perfil',
-    icon: <PersonIcon fontSize="small" />,
-    onClick: () => console.log('profile'),
-  },
-  {
-    label: 'Configuración',
-    icon: <SettingsIcon fontSize="small" />,
-    onClick: () => console.log('settings'),
-  },
-  {
-    label: 'Cerrar sesión',
-    icon: <LogoutIcon fontSize="small" />,
-    onClick: () => console.log('logout'),
-    danger: true,
-    dividerBefore: true,
-  },
-];
-
-// ── Stories ──────────────────────────────────────────────────────────────
-
-export const BasicHeader: Story = {
-  args: {
-    position: 'sticky',
-    color: 'default',
-    elevation: 1,
-    height: 64,
-  },
-  render: (args) => (
-    <>
-      <AppBar {...args}>
-        <AppBarBrand
-          logo={<SampleLogo />}
-          title="Afiliaciones"
-          subtitle="Panel administrativo"
-        />
-      </AppBar>
-      <SampleBody />
-    </>
-  ),
-};
-
-export const WithMenuToggle: Story = {
-  render: (args) => {
-    const [open, setOpen] = useState(false);
-    return (
-      <>
-        <AppBar
-          {...args}
-          onMenuToggle={() => setOpen((value) => !value)}
-          menuOpen={open}
-        >
-          <AppBarMenuToggle />
-          <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" />
-        </AppBar>
-        <Box sx={{ p: 3 }}>
-          <Typography variant="body2">
-            Drawer {open ? 'abierto' : 'cerrado'} — el icono cambia según el
-            estado. Click en el botón hamburguesa para alternar.
-          </Typography>
-        </Box>
-      </>
-    );
-  },
-};
-
-export const WithUserMenu: Story = {
-  render: (args) => (
-    <>
-      <AppBar {...args}>
-        <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" />
-        <Box sx={{ flex: 1 }} />
-        <AppBarUserMenu
-          user={{
-            name: 'Andrea Pineda',
-            email: 'andrea@soyfri.com',
-          }}
-          items={userMenuItems}
-        />
-      </AppBar>
-      <SampleBody />
-    </>
-  ),
-};
-
-export const CompleteDashboardHeader: Story = {
-  render: (args) => {
-    const [open, setOpen] = useState(true);
-    return (
-      <>
-        <AppBar
-          {...args}
-          onMenuToggle={() => setOpen((value) => !value)}
-          menuOpen={open}
-        >
-          <AppBarMenuToggle />
-          <AppBarBrand
-            logo={<SampleLogo />}
-            title="Afiliaciones"
-            subtitle="Panel administrativo"
-            onClick={() => console.log('go home')}
-          />
-          <Box sx={{ flex: 1 }} />
-          <Tooltip title="Notificaciones" arrow>
-            <IconButton color="inherit">
-              <NotificationsIcon />
-            </IconButton>
-          </Tooltip>
-          <Tooltip title="Ayuda" arrow>
-            <IconButton color="inherit">
-              <HelpOutlineIcon />
-            </IconButton>
-          </Tooltip>
-          <AppBarUserMenu
-            user={{
-              name: 'Andrea Pineda',
-              email: 'andrea@soyfri.com',
-            }}
-            items={userMenuItems}
-          />
-        </AppBar>
-        <SampleBody />
-      </>
-    );
-  },
-};
-
-export const TransparentVariant: Story = {
-  args: {
-    color: 'transparent',
-    elevation: 0,
-  },
-  render: (args) => (
-    <Box
-      sx={{
-        minHeight: '100vh',
-        background:
-          'linear-gradient(135deg, #f0f4ff 0%, #e6f7ff 50%, #fff5f5 100%)',
-      }}
-    >
-      <AppBar {...args}>
-        <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" />
-        <Box sx={{ flex: 1 }} />
-        <Button variant="contained" color="primary" size="small">
-          Iniciar sesión
-        </Button>
-      </AppBar>
-      <Box sx={{ p: 3 }}>
-        <Typography variant="h5">Landing page transparente</Typography>
-        <Typography variant="body2" color="text.secondary">
-          Sin sombra, con borde sutil — útil para headers sobre hero sections.
-        </Typography>
-      </Box>
-    </Box>
-  ),
-};
-
-export const PrimaryColorWithMenu: Story = {
-  args: {
-    color: 'primary',
-  },
-  render: (args) => {
-    const [open, setOpen] = useState(false);
-    return (
-      <>
-        <AppBar
-          {...args}
-          onMenuToggle={() => setOpen((value) => !value)}
-          menuOpen={open}
-        >
-          <AppBarMenuToggle />
-          <DashboardIcon sx={{ mr: 1 }} />
-          <Typography variant="h6" sx={{ fontWeight: 700 }}>
-            Dashboard
-          </Typography>
-          <Box sx={{ flex: 1 }} />
-          <AppBarUserMenu
-            user={{
-              name: 'Andrea Pineda',
-              email: 'andrea@soyfri.com',
-            }}
-            items={userMenuItems}
-          />
-        </AppBar>
-        <SampleBody />
-      </>
-    );
-  },
-};

package/src/components/AppBar/AppBar.sx.ts

@@ -1,32 +0,0 @@
-import type { SxProps, Theme } from '@mui/material/styles';
-
-export interface BuildAppBarSxArgs {
-  /** Altura en px. Default: 64. */
-  height?: number;
-  /** Color del AppBar (se pasa al MuiAppBar). */
-  transparent?: boolean;
-}
-
-/**
- * sx del root del MuiAppBar. Define altura fija y layout flex del Toolbar
- * interno. El color/elevación se dejan a las props nativas de MuiAppBar.
- */
-export function buildAppBarSx({
-  height = 64,
-  transparent = false,
-}: BuildAppBarSxArgs): SxProps<Theme> {
-  return (theme) => ({
-    minHeight: height,
-    justifyContent: 'center',
-    backgroundImage: 'none',
-    ...(transparent && {
-      backgroundColor: 'transparent',
-      boxShadow: 'none',
-      borderBottom: `1px solid ${theme.palette.divider}`,
-    }),
-    '& .MuiToolbar-root': {
-      minHeight: height,
-      gap: 1.5,
-    },
-  });
-}

package/src/components/AppBar/AppBar.tsx

@@ -1,123 +0,0 @@
-import React, { useMemo, type ReactNode } from 'react';
-import {
-  AppBar as MuiAppBar,
-  Toolbar,
-  type AppBarProps as MuiAppBarProps,
-} from '@mui/material';
-import {
-  useTheme,
-  type SxProps,
-  type Theme,
-} from '@mui/material/styles';
-
-import { AppBarContext } from './AppBarContext';
-import { buildAppBarSx } from './AppBar.sx';
-import { resolvePreset } from '../_shared/resolvePreset';
-
-export type AppBarPosition = 'fixed' | 'sticky' | 'static' | 'absolute' | 'relative';
-export type AppBarColor =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'transparent'
-  | 'inherit';
-
-export interface AppBarProps {
-  /** Contenido del AppBar (típicamente sub-componentes + acciones custom). */
-  children?: ReactNode;
-  /** Posicionamiento. Default: `'sticky'`. */
-  position?: AppBarPosition;
-  /** Color. Default: `'default'`. */
-  color?: AppBarColor;
-  /** Nivel de sombra. Default: 1. */
-  elevation?: number;
-  /** Altura en px. Default: 64. */
-  height?: number;
-  /**
-   * Handler del botón hamburguesa. Se expone vía AppBarContext para que el
-   * sub-componente `<AppBarMenuToggle>` lo consuma sin prop drilling.
-   */
-  onMenuToggle?: () => void;
-  /** Estado del drawer asociado (para que el icono del toggle cambie). */
-  menuOpen?: boolean;
-  /**
-   * Nombre del preset de estilo registrado en `theme.styles.AppBar`.
-   * - `"default"` (o ausente) = estilo built-in del paquete.
-   */
-  preset?: string;
-  /** sx del root (se mergea después del preset). */
-  sx?: SxProps<Theme>;
-  /** sx del Toolbar interno. */
-  toolbarSx?: SxProps<Theme>;
-  className?: string;
-  /** Otras props nativas del MuiAppBar (ej. `enableColorOnDark`). */
-  appBarProps?: Omit<
-    MuiAppBarProps,
-    'position' | 'color' | 'elevation' | 'sx' | 'children' | 'className'
-  >;
-}
-
-/**
- * AppBar (header superior) del paquete. Se diseñó como un shell compositivo
- * — el consumer arma el contenido con los sub-componentes que exporta el
- * paquete (`AppBarBrand`, `AppBarMenuToggle`, `AppBarUserMenu`) + cualquier
- * otra cosa custom.
- *
- * Patrón recomendado para navegación en dashboards:
- *
- * ```tsx
- * <AppBar onMenuToggle={toggleDrawer}>
- *   <AppBarMenuToggle />
- *   <AppBarBrand logo={<Logo />} title="Afiliaciones" />
- *   <Box sx={{ flex: 1 }} />
- *   <AppBarUserMenu user={user} items={menuItems} />
- * </AppBar>
- * ```
- */
-export function AppBar({
-  children,
-  position = 'sticky',
-  color = 'default',
-  elevation = 1,
-  height = 64,
-  onMenuToggle,
-  menuOpen,
-  preset,
-  sx,
-  toolbarSx,
-  className,
-  appBarProps,
-}: AppBarProps) {
-  const theme = useTheme();
-  const presetSx = resolvePreset('AppBar', preset, theme);
-
-  const transparent = color === 'transparent';
-
-  const rootSx: SxProps<Theme> = [
-    buildAppBarSx({ height, transparent }),
-    ...(presetSx ? [presetSx] : []),
-    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
-  ];
-
-  const contextValue = useMemo(
-    () => ({ onMenuToggle, menuOpen }),
-    [onMenuToggle, menuOpen],
-  );
-
-  return (
-    <AppBarContext.Provider value={contextValue}>
-      <MuiAppBar
-        position={position}
-        color={color === 'transparent' ? 'transparent' : color}
-        elevation={elevation}
-        className={className}
-        sx={rootSx}
-        {...appBarProps}
-      >
-        <Toolbar sx={toolbarSx}>{children}</Toolbar>
-      </MuiAppBar>
-    </AppBarContext.Provider>
-  );
-}
-
-export default AppBar;

package/src/components/AppBar/AppBarBrand.tsx

@@ -1,120 +0,0 @@
-import React, { type ReactNode, type MouseEvent } from 'react';
-import { Box, Typography } from '@mui/material';
-import type { SxProps, Theme } from '@mui/material/styles';
-
-export interface AppBarBrandProps {
-  /** Logo (img, svg, componente). Se muestra a la izquierda del título. */
-  logo?: ReactNode;
-  /** Título del sistema. */
-  title?: ReactNode;
-  /** Subtítulo opcional (p.ej. nombre de módulo actual). */
-  subtitle?: ReactNode;
-  /** Handler de click sobre todo el brand (típicamente navega al home). */
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  /** Oculta solo el título en viewports pequeños (mantiene el logo). Default: true. */
-  hideTitleOnMobile?: boolean;
-  sx?: SxProps<Theme>;
-  className?: string;
-}
-
-/**
- * Brand del AppBar: combina logo + título + subtítulo opcional con un
- * click handler global (típicamente para navegar al home).
- *
- * ```tsx
- * <AppBarBrand
- *   logo={<img src={logo} alt="" height={32} />}
- *   title="Afiliaciones"
- *   subtitle="Panel administrativo"
- *   onClick={() => navigate('/')}
- * />
- * ```
- */
-export function AppBarBrand({
-  logo,
-  title,
-  subtitle,
-  onClick,
-  hideTitleOnMobile = true,
-  sx,
-  className,
-}: AppBarBrandProps) {
-  const clickable = !!onClick;
-
-  const rootSx: SxProps<Theme> = [
-    {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 1.25,
-      cursor: clickable ? 'pointer' : 'default',
-      userSelect: 'none',
-      minWidth: 0,
-    },
-    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
-  ];
-
-  return (
-    <Box
-      role={clickable ? 'button' : undefined}
-      tabIndex={clickable ? 0 : undefined}
-      onClick={onClick}
-      onKeyDown={(event) => {
-        if (!clickable) return;
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault();
-          onClick?.(event as unknown as MouseEvent<HTMLDivElement>);
-        }
-      }}
-      className={className}
-      sx={rootSx}
-    >
-      {logo && (
-        <Box
-          component="span"
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            flexShrink: 0,
-          }}
-        >
-          {logo}
-        </Box>
-      )}
-      {(title || subtitle) && (
-        <Box
-          sx={{
-            display: hideTitleOnMobile
-              ? { xs: 'none', sm: 'flex' }
-              : 'flex',
-            flexDirection: 'column',
-            minWidth: 0,
-            lineHeight: 1.2,
-          }}
-        >
-          {title && (
-            <Typography
-              component="span"
-              variant="subtitle1"
-              noWrap
-              sx={{ fontWeight: 700 }}
-            >
-              {title}
-            </Typography>
-          )}
-          {subtitle && (
-            <Typography
-              component="span"
-              variant="caption"
-              color="text.secondary"
-              noWrap
-            >
-              {subtitle}
-            </Typography>
-          )}
-        </Box>
-      )}
-    </Box>
-  );
-}
-
-export default AppBarBrand;

package/src/components/AppBar/AppBarContext.ts

@@ -1,25 +0,0 @@
-import { createContext, useContext } from 'react';
-
-/**
- * Context interno del AppBar. Permite que sub-componentes (MenuToggle, etc.)
- * consuman callbacks registrados en el AppBar padre sin tener que pasarlos
- * por props explícitas.
- */
-export interface AppBarContextValue {
-  /** Handler del botón hamburguesa. Si es undefined, el toggle se oculta. */
-  onMenuToggle?: () => void;
-  /** Estado actual del drawer asociado (usado por el icono del toggle). */
-  menuOpen?: boolean;
-}
-
-export const AppBarContext = createContext<AppBarContextValue | null>(null);
-
-/**
- * Hook para leer el contexto del AppBar. Si se llama fuera de un `<AppBar>`,
- * devuelve un objeto vacío — los sub-componentes caen en modo "standalone"
- * con sus defaults en lugar de romper.
- */
-export function useAppBarContext(): AppBarContextValue {
-  const ctx = useContext(AppBarContext);
-  return ctx ?? {};
-}

package/src/components/AppBar/AppBarMenuToggle.tsx

@@ -1,90 +0,0 @@
-import React, { type ReactNode } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
-import MenuOpenIcon from '@mui/icons-material/MenuOpen';
-import type { SxProps, Theme } from '@mui/material/styles';
-
-import { useAppBarContext } from './AppBarContext';
-
-export interface AppBarMenuToggleProps {
-  /**
-   * Callback explícito. Si se omite, se consume del `AppBarContext`. Útil para
-   * usar el toggle fuera de un `<AppBar>` (p.ej. en un header custom).
-   */
-  onClick?: () => void;
-  /** Estado del drawer asociado. Si se omite, se lee del `AppBarContext`. */
-  menuOpen?: boolean;
-  /** Icono custom cuando el drawer está cerrado. Default: `<MenuIcon />`. */
-  closedIcon?: ReactNode;
-  /** Icono custom cuando el drawer está abierto. Default: `<MenuOpenIcon />`. */
-  openIcon?: ReactNode;
-  /** Texto de tooltip. Default: "Menú". */
-  tooltip?: string;
-  /** aria-label del botón. Default: el mismo tooltip. */
-  ariaLabel?: string;
-  /** Tamaño del IconButton. Default: `'medium'`. */
-  size?: 'small' | 'medium' | 'large';
-  /** Oculta el botón cuando no hay handler disponible. Default: true. */
-  hideIfNoHandler?: boolean;
-  sx?: SxProps<Theme>;
-  className?: string;
-}
-
-/**
- * Botón hamburguesa del AppBar. Por default consume `onMenuToggle` y
- * `menuOpen` del `AppBarContext` (pattern composicional), pero permite
- * overrides explícitos si se usa fuera de un `<AppBar>`.
- *
- * ```tsx
- * <AppBar onMenuToggle={toggleDrawer} menuOpen={open}>
- *   <AppBarMenuToggle />
- *   ...
- * </AppBar>
- * ```
- */
-export function AppBarMenuToggle({
-  onClick,
-  menuOpen,
-  closedIcon,
-  openIcon,
-  tooltip = 'Menú',
-  ariaLabel,
-  size = 'medium',
-  hideIfNoHandler = true,
-  sx,
-  className,
-}: AppBarMenuToggleProps) {
-  const ctx = useAppBarContext();
-
-  const handler = onClick ?? ctx.onMenuToggle;
-  const open = menuOpen ?? ctx.menuOpen ?? false;
-
-  if (!handler && hideIfNoHandler) {
-    return null;
-  }
-
-  const icon = open
-    ? (openIcon ?? <MenuOpenIcon />)
-    : (closedIcon ?? <MenuIcon />);
-
-  return (
-    <Tooltip title={tooltip} arrow>
-      <span>
-        <IconButton
-          size={size}
-          edge="start"
-          color="inherit"
-          aria-label={ariaLabel ?? tooltip}
-          onClick={handler}
-          disabled={!handler}
-          className={className}
-          sx={sx}
-        >
-          {icon}
-        </IconButton>
-      </span>
-    </Tooltip>
-  );
-}
-
-export default AppBarMenuToggle;