@soyfri/shared-library 2.0.0-beta.2 → 2.0.0-beta.21

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

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

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