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

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,224 @@
+import { useMemo, type ReactNode } from 'react';
+import {
+  Drawer as MuiDrawer,
+  IconButton,
+  Box,
+  type DrawerProps as MuiDrawerProps,
+} from '@mui/material';
+import {
+  useTheme,
+  type SxProps,
+  type Theme,
+} from '@mui/material/styles';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
+import { DrawerContext } from './DrawerContext';
+import { buildDrawerSx } from './Drawer.sx';
+import { resolvePreset } from '../_shared/resolvePreset';
+
+// ── Tipos públicos ──────────────────────────────────────────────────────
+export type DrawerVariant = 'permanent' | 'persistent' | 'temporary';
+export type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
+
+export interface DrawerProps {
+  /** Contenido del drawer (típicamente `<DrawerItem>`s). */
+  children?: ReactNode;
+  /**
+   * Variante del drawer:
+   * - `permanent` (default): siempre visible en desktop, soporta collapsed (mini).
+   * - `persistent`: se oculta/muestra, empuja el contenido principal.
+   * - `temporary`: flotante con backdrop (típico móvil).
+   */
+  variant?: DrawerVariant;
+  /** Lado del viewport. Default: `'left'`. */
+  anchor?: DrawerAnchor;
+  /**
+   * Estado mini (solo iconos). Solo se aplica con `variant="permanent"` o
+   * `"persistent"`. Si no se provee, el drawer está siempre expandido.
+   */
+  collapsed?: boolean;
+  /** Callback del botón de toggle (chevron). */
+  onToggleCollapse?: () => void;
+  /** Estado abierto/cerrado (aplica a `temporary` y `persistent`). */
+  open?: boolean;
+  /** Callback de cierre (backdrop o ESC en temporary). */
+  onClose?: MuiDrawerProps['onClose'];
+  /** Ancho en estado expandido. Default: 260. */
+  expandedWidth?: number;
+  /** Ancho en estado colapsado (solo iconos). Default: 72. */
+  collapsedWidth?: number;
+  /** Muestra el botón chevron para toggle collapsed. Default: true si `onToggleCollapse` está definido. */
+  showCollapseButton?: boolean;
+  /** Contenido del header (por encima de los items). Típicamente logo/brand. */
+  header?: ReactNode;
+  /**
+   * Logo/brand que se muestra junto al botón de toggle.
+   * - Expandido: logo a la izquierda, toggle a la derecha en la misma fila.
+   * - Colapsado: logo arriba centrado, toggle debajo centrado (stack vertical).
+   * Siempre visible (a diferencia de `header`, que se oculta al colapsar).
+   */
+  logo?: ReactNode;
+  /** Contenido del footer (por debajo de los items). Típicamente user profile. */
+  footer?: ReactNode;
+  /**
+   * Nombre del preset de estilo registrado en `theme.styles.Drawer`.
+   * - `"default"` (o ausente) = estilo built-in del paquete.
+   */
+  preset?: string;
+  /** sx aplicado al Drawer (root). Se mergea después del preset. */
+  sx?: SxProps<Theme>;
+  /** sx aplicado al Paper interno. */
+  paperSx?: SxProps<Theme>;
+  className?: string;
+}
+
+export function Drawer({
+  children,
+  variant = 'permanent',
+  anchor = 'left',
+  collapsed = false,
+  onToggleCollapse,
+  open,
+  onClose,
+  expandedWidth = 260,
+  collapsedWidth = 72,
+  showCollapseButton,
+  header,
+  logo,
+  footer,
+  preset,
+  sx,
+  paperSx,
+  className,
+}: DrawerProps) {
+  const theme = useTheme();
+  const presetSx = resolvePreset('Drawer', preset, theme);
+
+  // El mini-variant solo tiene sentido en permanent / persistent.
+  const supportsCollapsed = variant !== 'temporary';
+  const effectiveWidth =
+    supportsCollapsed && collapsed ? collapsedWidth : expandedWidth;
+
+  const contextValue = useMemo(
+    () => ({
+      collapsed: supportsCollapsed && collapsed,
+      width: effectiveWidth,
+    }),
+    [supportsCollapsed, collapsed, effectiveWidth],
+  );
+
+  const rootSx: SxProps<Theme> = [
+    buildDrawerSx({ width: effectiveWidth }),
+    ...(presetSx ? [presetSx] : []),
+    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+  ];
+
+  const shouldShowToggle =
+    showCollapseButton ?? (supportsCollapsed && !!onToggleCollapse);
+
+  const openProp =
+    variant === 'permanent'
+      ? true
+      : open !== undefined
+        ? open
+        : false;
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <MuiDrawer
+        variant={variant}
+        anchor={anchor}
+        open={openProp}
+        onClose={onClose}
+        className={className}
+        sx={rootSx}
+        slotProps={{
+          paper: {
+            sx: paperSx,
+          },
+        }}
+      >
+        {(logo || shouldShowToggle) && (
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: contextValue.collapsed ? 'column' : 'row',
+              alignItems: 'center',
+              justifyContent: contextValue.collapsed
+                ? 'center'
+                : logo
+                  ? 'space-between'
+                  : 'flex-end',
+              gap: contextValue.collapsed ? 0.5 : 0,
+              px: contextValue.collapsed ? 1 : 2,
+              py: 1,
+              minHeight: 64,
+              flexShrink: 0,
+            }}
+          >
+            {logo && (
+              <Box sx={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>
+                {logo}
+              </Box>
+            )}
+            {shouldShowToggle && (
+              <IconButton
+                size="small"
+                onClick={onToggleCollapse}
+                aria-label={collapsed ? 'Expandir menú' : 'Colapsar menú'}
+              >
+                {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+              </IconButton>
+            )}
+          </Box>
+        )}
+
+        {header && !contextValue.collapsed && (
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              px: 2,
+              py: 1.5,
+              minHeight: 56,
+              flexShrink: 0,
+            }}
+          >
+            <Box sx={{ flex: 1, minWidth: 0 }}>{header}</Box>
+          </Box>
+        )}
+
+        <Box
+          component="nav"
+          sx={{
+            flex: 1,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            py: 1,
+          }}
+        >
+          {children}
+        </Box>
+
+        {footer && (
+          <Box
+            sx={{
+              flexShrink: 0,
+              borderTop: (t) => `1px solid ${t.palette.divider}`,
+              p: contextValue.collapsed ? 1 : 1.5,
+              display: 'flex',
+              justifyContent: contextValue.collapsed
+                ? 'center'
+                : 'flex-start',
+            }}
+          >
+            {footer}
+          </Box>
+        )}
+      </MuiDrawer>
+    </DrawerContext.Provider>
+  );
+}
+
+export default Drawer;

package/src/components/Drawer/DrawerContext.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Context interno del Drawer. Permite que los sub-componentes (DrawerItem,
+ * DrawerSection, etc.) reaccionen al estado `collapsed` sin necesidad de
+ * recibirlo por props explícitas.
+ */
+export interface DrawerContextValue {
+  /** Si el drawer está en modo mini (solo iconos). */
+  collapsed: boolean;
+  /** Ancho actual del drawer (útil para sub-componentes que necesiten layout). */
+  width: number;
+}
+
+export const DrawerContext = createContext<DrawerContextValue | null>(null);
+
+/**
+ * Hook para leer el estado del drawer desde cualquier sub-componente. Si se
+ * llama fuera de un `<Drawer>`, devuelve valores por defecto (collapsed=false)
+ * para que los items renderizados sueltos no exploten.
+ */
+export function useDrawerContext(): DrawerContextValue {
+  const ctx = useContext(DrawerContext);
+  if (ctx) return ctx;
+  return { collapsed: false, width: 260 };
+}

package/src/components/Drawer/DrawerItem.tsx

@@ -0,0 +1,120 @@
+import React, { type ReactNode, type MouseEvent } from 'react';
+import { Box, Tooltip, Typography } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';
+
+import { useDrawerContext } from './DrawerContext';
+import { buildDrawerItemSx } from './Drawer.sx';
+
+export interface DrawerItemProps {
+  /** Icono del item. Se muestra siempre (expanded y collapsed). */
+  icon?: ReactNode;
+  /** Texto del item. Se oculta cuando el drawer está colapsado (muestra tooltip). */
+  label: ReactNode;
+  /**
+   * Texto del tooltip en modo collapsed. Si no se provee y `label` es string,
+   * se usa `label`. Necesario cuando `label` es un ReactNode complejo.
+   */
+  tooltipText?: string;
+  /** Handler de click. */
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  /** Marca el item como activo (destaca color y fondo). */
+  active?: boolean;
+  /** Marca el item como "destructivo" (p.ej. cerrar sesión): color error. */
+  danger?: boolean;
+  /** Deshabilita click + bajo opacidad. */
+  disabled?: boolean;
+  /** Contenido adicional a la derecha del label (badge, count, chevron). */
+  endAdornment?: ReactNode;
+  /** sx override del consumer, se mergea al final. */
+  sx?: SxProps<Theme>;
+  className?: string;
+}
+
+/**
+ * Item de un Drawer de shared-library. Lee el estado `collapsed` del
+ * DrawerContext para adaptar layout y mostrar tooltip en modo mini.
+ *
+ * Uso típico:
+ * ```tsx
+ * <Drawer collapsed={collapsed} onToggleCollapse={toggle}>
+ *   <DrawerItem icon={<HomeIcon />} label="Inicio" active />
+ *   <DrawerItem icon={<UserIcon />} label="Perfil" />
+ * </Drawer>
+ * ```
+ */
+export function DrawerItem({
+  icon,
+  label,
+  tooltipText,
+  onClick,
+  active = false,
+  danger = false,
+  disabled = false,
+  endAdornment,
+  sx,
+  className,
+}: DrawerItemProps) {
+  const { collapsed } = useDrawerContext();
+
+  const baseSx = buildDrawerItemSx({ collapsed, active, danger });
+
+  const mergedSx: SxProps<Theme> = [
+    baseSx,
+    disabled && { pointerEvents: 'none', opacity: 0.5 },
+    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+  ].filter(Boolean) as SxProps<Theme>;
+
+  const content = (
+    <Box
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled}
+      onClick={disabled ? undefined : onClick}
+      onKeyDown={(event) => {
+        if (disabled) return;
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onClick?.(event as unknown as MouseEvent<HTMLDivElement>);
+        }
+      }}
+      className={className}
+      sx={mergedSx}
+    >
+      {icon && (
+        <Box className="drawer-item__icon" component="span">
+          {icon}
+        </Box>
+      )}
+      <Typography
+        component="span"
+        variant="body2"
+        className="drawer-item__label"
+        sx={{ fontWeight: active ? 600 : 400 }}
+      >
+        {label}
+      </Typography>
+      {!collapsed && endAdornment && (
+        <Box component="span" sx={{ flexShrink: 0, ml: 'auto' }}>
+          {endAdornment}
+        </Box>
+      )}
+    </Box>
+  );
+
+  // Cuando está colapsado, envolvemos en tooltip para revelar el label al hover.
+  // Prioriza `tooltipText` explícito; si no, cae al `label` si es string.
+  const resolvedTooltip =
+    tooltipText ?? (typeof label === 'string' ? label : undefined);
+
+  if (collapsed && resolvedTooltip) {
+    return (
+      <Tooltip title={resolvedTooltip} placement="right" arrow>
+        {content}
+      </Tooltip>
+    );
+  }
+
+  return content;
+}
+
+export default DrawerItem;

package/src/components/Drawer/index.ts

@@ -0,0 +1,10 @@
+export { Drawer, default } from './Drawer';
+export { DrawerItem } from './DrawerItem';
+export { useDrawerContext } from './DrawerContext';
+export type {
+  DrawerProps,
+  DrawerVariant,
+  DrawerAnchor,
+} from './Drawer';
+export type { DrawerItemProps } from './DrawerItem';
+export type { DrawerContextValue } from './DrawerContext';

package/src/components/Flyout/Flyout.stories.tsx

@@ -0,0 +1,282 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { Box, Button, List, ListItem, ListItemText, Typography } from '@mui/material';
+import Flyout from './Flyout'; // Adjust the import path if your Flyout.tsx is in a different directory
+import { Input } from '../Input/Input';
+
+// Define the Meta for the Flyout component
+const meta: Meta<typeof Flyout> = {
+  title: 'Components/Flyout', // Category in Storybook
+  component: Flyout,
+  tags: ['autodocs'], // Automatically generate documentation
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Controls the visibility of the flyout.',
+    },
+    onClose: {
+      action: 'closed', // Log the onClose event in Storybook actions panel
+      description: 'Callback function when the flyout is requested to close.',
+    },
+    title: {
+      control: 'text',
+      description: 'Title displayed at the top of the flyout.',
+    },
+    anchor: {
+      control: 'select',
+      options: ['left', 'top', 'right', 'bottom'],
+      description: 'Side from which the flyout will appear.',
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Predefined size of the flyout (width for left/right, height for top/bottom).',
+    },
+    height: {
+      control: 'text',
+      description: 'Custom height for top/bottom anchored flyouts (e.g., "50vh", "300px").',
+      if: { arg: 'anchor', eq: ['top', 'bottom'] }, // Only show if anchor is top or bottom
+    },
+    children: {
+      control: 'text', // Can be set to 'text' for simple string content, or 'disable'
+      description: 'Content to be rendered inside the flyout.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A customizable Drawer component that slides in from a specified anchor point, ideal for displaying supplementary content or forms without navigating away from the main page.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Flyout>;
+
+// --- Helper component for demonstration content ---
+const DefaultValueInput: React.FC = () => {
+  const [value, setValue] = useState<string | number>('Some text');
+  return (
+    <Box sx={{ my: 2 }}>
+      <Input
+        label="Input Field"
+        value={value}
+        onChange={(next) => setValue(next)}
+      />
+    </Box>
+  );
+};
+
+const DemoContent: React.FC = () => (
+  <Box>
+    <Typography variant="body1" paragraph>
+      This is some example content inside the flyout. It can contain any React elements.
+    </Typography>
+    <List dense>
+      <ListItem disablePadding>
+        <ListItemText primary="Item 1:" secondary="Detail A" />
+      </ListItem>
+      <ListItem disablePadding>
+        <ListItemText primary="Item 2:" secondary="Detail B" />
+      </ListItem>
+      <ListItem disablePadding>
+        <ListItemText primary="Item 3:" secondary="Detail C" />
+      </ListItem>
+      {[...Array(15)].map((_, i) => ( // Add more items to demonstrate scrolling
+        <ListItem key={i + 4} disablePadding>
+          <ListItemText primary={`More Item ${i + 4}:`} secondary={`More Detail ${i + 4}`} />
+        </ListItem>
+      ))}
+    </List>
+    <DefaultValueInput />
+    <Button variant="contained" color="primary" sx={{ mt: 2 }}>
+      Action Button
+    </Button>
+  </Box>
+);
+
+
+// --- Stories ---
+
+// Default story for a basic right-anchored flyout
+export const Default: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <Box sx={{ height: '200vh', p: 2, backgroundColor: '#f0f0f0' }}> {/* Added height to simulate scrollable page */}
+        <Typography variant="h5" mb={2}>Default Flyout Example</Typography>
+        <Button variant="contained" onClick={() => setIsOpen(true)}>
+          Open Flyout (Right)
+        </Button>
+        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+          <DemoContent />
+        </Flyout>
+      </Box>
+    );
+  },
+  args: {
+    title: 'Flyout Title',
+    anchor: 'right',
+    size: 'medium',
+    // children is handled by the render function with DemoContent
+  },
+};
+
+// Story for a small flyout from the left
+export const SmallLeft: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="h5" mb={2}>Small Flyout from Left</Typography>
+        <Button variant="contained" onClick={() => setIsOpen(true)}>
+          Open Small Flyout (Left)
+        </Button>
+        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+          <DemoContent />
+        </Flyout>
+      </Box>
+    );
+  },
+  args: {
+    title: 'Small Flyout',
+    anchor: 'left',
+    size: 'small',
+  },
+};
+
+// Story for a large flyout from the right
+export const LargeRight: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="h5" mb={2}>Large Flyout from Right</Typography>
+        <Button variant="contained" onClick={() => setIsOpen(true)}>
+          Open Large Flyout (Right)
+        </Button>
+        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+          <DemoContent />
+        </Flyout>
+      </Box>
+    );
+  },
+  args: {
+    title: 'Large Flyout',
+    anchor: 'right',
+    size: 'large',
+  },
+};
+
+// Story for a top-anchored flyout with custom height
+export const TopAnchor: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="h5" mb={2}>Top Anchored Flyout</Typography>
+        <Button variant="contained" onClick={() => setIsOpen(true)}>
+          Open Top Flyout
+        </Button>
+        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+          <DemoContent />
+        </Flyout>
+      </Box>
+    );
+  },
+  args: {
+    title: 'Top Flyout',
+    anchor: 'top',
+    height: '300px', // Custom height for top/bottom anchor
+    size: 'medium', // Size prop still applies but width is 100% for top/bottom
+  },
+};
+
+// Story for a bottom-anchored flyout with custom height
+export const BottomAnchor: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="h5" mb={2}>Bottom Anchored Flyout</Typography>
+        <Button variant="contained" onClick={() => setIsOpen(true)}>
+          Open Bottom Flyout
+        </Button>
+        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+          <DemoContent />
+        </Flyout>
+      </Box>
+    );
+  },
+  args: {
+    title: 'Bottom Flyout',
+    anchor: 'bottom',
+    height: '40vh', // Custom height using viewport units
+    size: 'medium',
+  },
+};
+
+// Story with no title
+export const NoTitle: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="h5" mb={2}>Flyout with No Title</Typography>
+        <Button variant="contained" onClick={() => setIsOpen(true)}>
+          Open Flyout (No Title)
+        </Button>
+        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+          <DemoContent />
+        </Flyout>
+      </Box>
+    );
+  },
+  args: {
+    title: undefined, // Explicitly no title
+    anchor: 'right',
+    size: 'medium',
+  },
+};
+
+// Story with custom content
+export const CustomContent: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [customText, setCustomText] = useState('This is some custom text that can be edited.');
+    return (
+      <Box sx={{ p: 2 }}>
+        <Typography variant="h5" mb={2}>Flyout with Custom Content</Typography>
+        <Button variant="contained" onClick={() => setIsOpen(true)}>
+          Open Custom Content Flyout
+        </Button>
+        <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
+          <Box sx={{ p: 2 }}>
+            <Typography variant="h6" gutterBottom>Custom Form</Typography>
+            <Box sx={{ mb: 2 }}>
+              <Input
+                label="Your Message"
+                multiline
+                rows={4}
+                fullWidth
+                value={customText}
+                onChange={(next) => setCustomText(String(next))}
+              />
+            </Box>
+            <Button variant="contained" color="secondary">
+              Submit Custom Content
+            </Button>
+          </Box>
+        </Flyout>
+      </Box>
+    );
+  },
+  args: {
+    title: 'Custom Content Flyout',
+    anchor: 'right',
+    size: 'medium',
+    // children is handled by the render function
+  },
+};