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

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,438 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Box, Typography, Avatar } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
-import PersonIcon from '@mui/icons-material/Person';
-import SettingsIcon from '@mui/icons-material/Settings';
-import ReceiptIcon from '@mui/icons-material/Receipt';
-import LogoutIcon from '@mui/icons-material/Logout';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-
-import { Drawer } from './Drawer';
-import { DrawerItem } from './DrawerItem';
-import { useDrawerContext } from './DrawerContext';
-
-const meta: Meta<typeof Drawer> = {
-  title: 'Components/Drawer',
-  component: Drawer,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Drawer lateral para navegación. Soporta modo `collapsed` (mini-variant con solo iconos) y reemplaza el `DrawerComponent` de Metronic. Los sub-componentes `DrawerItem` reaccionan al estado `collapsed` vía context y muestran tooltip automático al hover cuando el drawer está mini.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['permanent', 'persistent', 'temporary'],
-      description:
-        '`permanent` (default) = siempre visible en desktop. `persistent` = oculta/muestra empujando contenido. `temporary` = flotante con backdrop (típico móvil).',
-    },
-    anchor: {
-      control: 'select',
-      options: ['left', 'right', 'top', 'bottom'],
-    },
-    collapsed: {
-      control: 'boolean',
-      description: 'Estado mini (solo iconos). Solo aplica en `permanent`/`persistent`.',
-    },
-    expandedWidth: { control: { type: 'number', min: 180, max: 400, step: 10 } },
-    collapsedWidth: { control: { type: 'number', min: 48, max: 120, step: 4 } },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Drawer>;
-
-// ── Helpers ──────────────────────────────────────────────────────────────
-
-const SampleLogo = () => (
-  <Typography variant="h6" sx={{ fontWeight: 700, color: 'primary.main' }}>
-    soyfri
-  </Typography>
-);
-
-// Logo "inteligente" que usa el context para adaptarse: texto completo cuando
-// está expandido, inicial cuando está colapsado. Es el patrón esperado para el
-// nuevo prop `logo` del Drawer.
-const BrandLogo = () => {
-  const { collapsed } = useDrawerContext();
-  return collapsed ? (
-    <Box
-      sx={{
-        width: 32,
-        height: 32,
-        borderRadius: 1,
-        bgcolor: 'primary.main',
-        color: '#fff',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontWeight: 700,
-      }}
-    >
-      s
-    </Box>
-  ) : (
-    <Typography variant="h6" sx={{ fontWeight: 700, color: 'primary.main' }}>
-      soyfri
-    </Typography>
-  );
-};
-
-const SampleFooter = ({ collapsed }: { collapsed: boolean }) => (
-  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-    <Avatar sx={{ width: 36, height: 36 }}>AP</Avatar>
-    {!collapsed && (
-      <Box sx={{ minWidth: 0 }}>
-        <Typography variant="body2" noWrap sx={{ fontWeight: 600 }}>
-          Andrea Pérez
-        </Typography>
-        <Typography variant="caption" color="text.secondary" noWrap>
-          admin@soyfri.com
-        </Typography>
-      </Box>
-    )}
-  </Box>
-);
-
-// ── Stories ──────────────────────────────────────────────────────────────
-
-export const ExpandedPermanent: Story = {
-  args: {
-    variant: 'permanent',
-    anchor: 'left',
-    collapsed: false,
-    expandedWidth: 260,
-    collapsedWidth: 72,
-    header: <SampleLogo />,
-  },
-  render: (args) => (
-    <Box sx={{ display: 'flex', height: '100vh' }}>
-      <Drawer {...args}>
-        <DrawerItem icon={<HomeIcon />} label="Inicio" active />
-        <DrawerItem icon={<PersonIcon />} label="Perfil" />
-        <DrawerItem
-          icon={<NotificationsIcon />}
-          label="Notificaciones"
-          endAdornment={
-            <Typography
-              variant="caption"
-              sx={{
-                bgcolor: 'primary.main',
-                color: '#fff',
-                borderRadius: 10,
-                px: 1,
-                py: 0.25,
-                fontWeight: 600,
-              }}
-            >
-              3
-            </Typography>
-          }
-        />
-        <DrawerItem icon={<ReceiptIcon />} label="Facturación" />
-        <DrawerItem icon={<SettingsIcon />} label="Configuración" />
-      </Drawer>
-      <Box sx={{ flex: 1, p: 3 }}>
-        <Typography variant="h5">Contenido principal</Typography>
-        <Typography color="text.secondary">
-          El drawer permanente convive con el contenido y no lo tapa.
-        </Typography>
-      </Box>
-    </Box>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Drawer permanente expandido con logo en header y lista de items. Uno de los items tiene un badge como `endAdornment`.',
-      },
-    },
-  },
-};
-
-export const CollapsedPermanent: Story = {
-  ...ExpandedPermanent,
-  args: {
-    ...ExpandedPermanent.args,
-    collapsed: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'El mismo drawer en modo mini. Los labels se ocultan y al hacer hover sobre cada item aparece un tooltip con su texto. Notar que el badge `endAdornment` se oculta también en modo collapsed.',
-      },
-    },
-  },
-};
-
-export const ToggleableDrawer: Story = {
-  render: () => {
-    const [collapsed, setCollapsed] = useState(false);
-
-    return (
-      <Box sx={{ display: 'flex', height: '100vh' }}>
-        <Drawer
-          variant="permanent"
-          collapsed={collapsed}
-          onToggleCollapse={() => setCollapsed((v) => !v)}
-          header={<SampleLogo />}
-          footer={<SampleFooter collapsed={collapsed} />}
-        >
-          <DrawerItem icon={<HomeIcon />} label="Inicio" active />
-          <DrawerItem icon={<PersonIcon />} label="Perfil" />
-          <DrawerItem icon={<ReceiptIcon />} label="Facturación" />
-          <DrawerItem icon={<SettingsIcon />} label="Configuración" />
-          <DrawerItem icon={<LogoutIcon />} label="Cerrar sesión" danger />
-        </Drawer>
-        <Box sx={{ flex: 1, p: 3 }}>
-          <Typography variant="h5">
-            Drawer: {collapsed ? 'colapsado' : 'expandido'}
-          </Typography>
-          <Typography color="text.secondary">
-            Usá el chevron del header para alternar. El footer se adapta
-            (avatar solo cuando está mini, avatar + texto cuando está
-            expandido).
-          </Typography>
-        </Box>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Drawer con botón chevron funcional (el que provee el paquete) y footer que reacciona al estado. Incluye un item `danger` (cerrar sesión) que se pinta en color error.',
-      },
-    },
-  },
-};
-
-export const TemporaryDrawer: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-
-    return (
-      <Box sx={{ height: '100vh', p: 3 }}>
-        <Typography variant="h5" gutterBottom>
-          Drawer temporal (para móvil)
-        </Typography>
-        <Typography
-          sx={{ cursor: 'pointer', color: 'primary.main' }}
-          onClick={() => setOpen(true)}
-        >
-          → Abrir drawer
-        </Typography>
-
-        <Drawer
-          variant="temporary"
-          open={open}
-          onClose={() => setOpen(false)}
-          header={<SampleLogo />}
-        >
-          <DrawerItem
-            icon={<HomeIcon />}
-            label="Inicio"
-            onClick={() => setOpen(false)}
-          />
-          <DrawerItem
-            icon={<PersonIcon />}
-            label="Perfil"
-            onClick={() => setOpen(false)}
-          />
-          <DrawerItem
-            icon={<SettingsIcon />}
-            label="Configuración"
-            onClick={() => setOpen(false)}
-          />
-        </Drawer>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Drawer `temporary`: flota por encima del contenido con backdrop. Cierra con ESC, click en backdrop, o handler explícito en cada item. El modo `collapsed` no aplica acá.',
-      },
-    },
-  },
-};
-
-// ── Nuevo prop `logo` (beta 6) ──────────────────────────────────────────
-
-export const WithLogoExpanded: Story = {
-  args: {
-    variant: 'permanent',
-    collapsed: false,
-    expandedWidth: 260,
-    collapsedWidth: 72,
-    logo: <BrandLogo />,
-  },
-  render: (args) => (
-    <Box sx={{ display: 'flex', height: '100vh' }}>
-      <Drawer
-        {...args}
-        onToggleCollapse={() => {
-          /* noop para que aparezca el chevron */
-        }}
-      >
-        <DrawerItem icon={<HomeIcon />} label="Inicio" active />
-        <DrawerItem icon={<PersonIcon />} label="Perfil" />
-        <DrawerItem icon={<ReceiptIcon />} label="Facturación" />
-        <DrawerItem icon={<SettingsIcon />} label="Configuración" />
-      </Drawer>
-      <Box sx={{ flex: 1, p: 3 }}>
-        <Typography variant="h5">Prop `logo` expandido</Typography>
-        <Typography color="text.secondary">
-          Logo a la izquierda, chevron a la derecha en la misma fila.
-        </Typography>
-      </Box>
-    </Box>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Nuevo prop `logo`: brand + toggle alineados horizontalmente cuando el drawer está expandido. El consumer solo pasa el nodo del logo y el Drawer se encarga del layout.',
-      },
-    },
-  },
-};
-
-export const WithLogoCollapsed: Story = {
-  ...WithLogoExpanded,
-  args: {
-    ...WithLogoExpanded.args,
-    collapsed: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Mismo drawer colapsado: el `logo` sigue visible (a diferencia del viejo `header` que se ocultaba). Layout vertical: logo-mini arriba centrado, chevron debajo centrado. El `BrandLogo` usa `useDrawerContext()` para mostrar la versión mini.',
-      },
-    },
-  },
-};
-
-export const WithLogoToggleable: Story = {
-  render: () => {
-    const [collapsed, setCollapsed] = useState(false);
-    return (
-      <Box sx={{ display: 'flex', height: '100vh' }}>
-        <Drawer
-          variant="permanent"
-          collapsed={collapsed}
-          onToggleCollapse={() => setCollapsed((v) => !v)}
-          logo={<BrandLogo />}
-          footer={<SampleFooter collapsed={collapsed} />}
-        >
-          <DrawerItem icon={<HomeIcon />} label="Inicio" active />
-          <DrawerItem icon={<PersonIcon />} label="Perfil" />
-          <DrawerItem icon={<ReceiptIcon />} label="Facturación" />
-          <DrawerItem icon={<SettingsIcon />} label="Configuración" />
-          <DrawerItem icon={<LogoutIcon />} label="Cerrar sesión" danger />
-        </Drawer>
-        <Box sx={{ flex: 1, p: 3 }}>
-          <Typography variant="h5">
-            Drawer con `logo`: {collapsed ? 'colapsado' : 'expandido'}
-          </Typography>
-          <Typography color="text.secondary">
-            Alterná con el chevron: logo y toggle quedan alineados en ambos
-            estados (fila horizontal expandido, stack vertical colapsado).
-          </Typography>
-        </Box>
-      </Box>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Caso interactivo: mismo patrón que `ToggleableDrawer` pero usando el nuevo prop `logo` en lugar de `header`. Comparar contra `ToggleableDrawer` para ver la diferencia de alineación al colapsar.',
-      },
-    },
-  },
-};
-
-export const WithLogoAndHeader: Story = {
-  args: {
-    variant: 'permanent',
-    collapsed: false,
-    logo: <BrandLogo />,
-    header: (
-      <Typography variant="caption" color="text.secondary">
-        Workspace: Afiliaciones · v2.1
-      </Typography>
-    ),
-  },
-  render: (args) => (
-    <Box sx={{ display: 'flex', height: '100vh' }}>
-      <Drawer
-        {...args}
-        onToggleCollapse={() => {
-          /* noop */
-        }}
-      >
-        <DrawerItem icon={<HomeIcon />} label="Inicio" active />
-        <DrawerItem icon={<PersonIcon />} label="Perfil" />
-        <DrawerItem icon={<SettingsIcon />} label="Configuración" />
-      </Drawer>
-      <Box sx={{ flex: 1, p: 3 }}>
-        <Typography variant="h5">`logo` + `header` combinados</Typography>
-        <Typography color="text.secondary">
-          El `logo` vive junto al toggle. El `header` queda debajo como fila
-          secundaria y se oculta al colapsar.
-        </Typography>
-      </Box>
-    </Box>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Ambos props conviven: `logo` es la sección de brand siempre visible (junto al toggle), `header` sigue siendo una fila secundaria que se oculta al colapsar.',
-      },
-    },
-  },
-};
-
-export const RightAnchored: Story = {
-  args: {
-    variant: 'permanent',
-    anchor: 'right',
-    expandedWidth: 320,
-    header: (
-      <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-        Panel lateral
-      </Typography>
-    ),
-  },
-  render: (args) => (
-    <Box sx={{ display: 'flex', height: '100vh' }}>
-      <Box sx={{ flex: 1, p: 3 }}>
-        <Typography variant="h5">Contenido principal</Typography>
-      </Box>
-      <Drawer {...args}>
-        <DrawerItem icon={<NotificationsIcon />} label="Notificaciones" />
-        <DrawerItem icon={<PersonIcon />} label="Contactos" />
-        <DrawerItem icon={<SettingsIcon />} label="Ajustes" />
-      </Drawer>
-    </Box>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Drawer anclado a la derecha. Útil para paneles secundarios (inbox, notificaciones, detalles) en lugar de navegación principal.',
-      },
-    },
-  },
-};

package/src/components/Drawer/Drawer.sx.ts

@@ -1,106 +0,0 @@
-import { alpha, type SxProps, type Theme } from '@mui/material/styles';
-
-export interface BuildDrawerSxArgs {
-  /** Ancho actual del drawer (expanded o collapsed). */
-  width: number;
-  /** Duración de la transición de ancho en ms. */
-  transitionDuration?: number;
-}
-
-/**
- * sx aplicado al root del MuiDrawer. Controla el ancho animado y el paper
- * interno. Los estilos visuales del paper (background, border) se dejan en
- * manos del theme / preset.
- */
-export function buildDrawerSx({
-  width,
-  transitionDuration = 200,
-}: BuildDrawerSxArgs): SxProps<Theme> {
-  return {
-    width,
-    flexShrink: 0,
-    whiteSpace: 'nowrap',
-    boxSizing: 'border-box',
-    transition: (theme) =>
-      theme.transitions.create('width', {
-        easing: theme.transitions.easing.sharp,
-        duration: transitionDuration,
-      }),
-    '& .MuiDrawer-paper': {
-      width,
-      boxSizing: 'border-box',
-      overflowX: 'hidden',
-      transition: (theme) =>
-        theme.transitions.create('width', {
-          easing: theme.transitions.easing.sharp,
-          duration: transitionDuration,
-        }),
-    },
-  };
-}
-
-export interface BuildDrawerItemSxArgs {
-  collapsed: boolean;
-  active?: boolean;
-  danger?: boolean;
-}
-
-/**
- * sx para un item del drawer. Centra el icono cuando está colapsado y
- * tiñe el fondo cuando el item está activo.
- */
-export function buildDrawerItemSx({
-  collapsed,
-  active,
-  danger,
-}: BuildDrawerItemSxArgs): SxProps<Theme> {
-  return (theme) => ({
-    minHeight: 44,
-    px: collapsed ? 1 : 2,
-    py: 1,
-    mx: 1,
-    my: 0.25,
-    borderRadius: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: collapsed ? 'center' : 'flex-start',
-    gap: collapsed ? 0 : 1.5,
-    cursor: 'pointer',
-    color: danger
-      ? theme.palette.error.main
-      : active
-        ? theme.palette.primary.main
-        : theme.palette.text.primary,
-    backgroundColor: active
-      ? theme.palette.action.selected
-      : 'transparent',
-    transition: theme.transitions.create(
-      ['background-color', 'color', 'padding'],
-      { duration: 150 },
-    ),
-    '&:hover': {
-      backgroundColor: danger
-        ? alpha(theme.palette.error.main, 0.08)
-        : theme.palette.action.hover,
-    },
-    '& .drawer-item__icon': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexShrink: 0,
-      minWidth: 24,
-    },
-    '& .drawer-item__label': {
-      flex: 1,
-      minWidth: 0,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      opacity: collapsed ? 0 : 1,
-      width: collapsed ? 0 : 'auto',
-      transition: theme.transitions.create(['opacity', 'width'], {
-        duration: collapsed ? 100 : 200,
-      }),
-    },
-  });
-}