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

package/src/components/Drawer/Drawer.tsx

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

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

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

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

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