@soyfri/shared-library 1.5.0 → 2.0.0-beta.1

package/src/components/Drawer/DrawerItem.tsx

@@ -0,0 +1,110 @@
+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;
+  /** 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,
+  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 !== undefined && (
+        <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.
+  if (collapsed && typeof label === 'string') {
+    return (
+      <Tooltip title={label} 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

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import { Box, Button, List, ListItem, ListItemText, TextField, Typography } from '@mui/material';
+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> = {
@@ -55,6 +56,19 @@ 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>
@@ -76,13 +90,7 @@ const DemoContent: React.FC = () => (
         </ListItem>
       ))}
     </List>
-    <TextField
-      label="Input Field"
-      variant="outlined"
-      fullWidth
-      margin="normal"
-      defaultValue="Some text"
-    />
+    <DefaultValueInput />
     <Button variant="contained" color="primary" sx={{ mt: 2 }}>
       Action Button
     </Button>
@@ -247,16 +255,16 @@ export const CustomContent: Story = {
         <Flyout {...args} open={isOpen} onClose={() => setIsOpen(false)}>
           <Box sx={{ p: 2 }}>
             <Typography variant="h6" gutterBottom>Custom Form</Typography>
-            <TextField
-              label="Your Message"
-              multiline
-              rows={4}
-              fullWidth
-              variant="outlined"
-              value={customText}
-              onChange={(e) => setCustomText(e.target.value)}
-              sx={{ mb: 2 }}
-            />
+            <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>

package/src/components/Icon/Icon.stories.tsx

@@ -8,6 +8,12 @@ const meta: Meta<typeof Icon> = {
   component: Icon,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente Icon con soporte para 3 fuentes: `children` (elemento MUI), `path` (string SVG inline, para los iconos custom de Metronic) y `url` (ruta a un archivo `.svg`).',
+      },
+    },
   },
   tags: ['autodocs'],
 };
@@ -15,9 +21,11 @@ const meta: Meta<typeof Icon> = {
 export default meta;
 type Story = StoryObj<typeof Icon>;
 
+// ── Modo legacy: children ──────────────────────────────────────────────
+
 export const Default: Story = {
   args: {
-    children: <NotificationsIcon />
+    children: <NotificationsIcon />,
   },
 };
 
@@ -52,3 +60,62 @@ export const LargeWhiteIcon: Story = {
     badgeColor: 'primary',
   },
 };
+
+// ── Nuevas fuentes: path + url ────────────────────────────────────────
+
+export const FromPathD: Story = {
+  args: {
+    path: 'M12 2L2 22h20L12 2zm0 3.83L19.17 20H4.83L12 5.83zM11 16h2v2h-2v-2zm0-6h2v5h-2v-5z',
+    color: '#f59e0b',
+    size: 'lg',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renderiza un SVG a partir del atributo `d` de un `<path>`. Es la forma en que Metronic suele entregar iconos custom.',
+      },
+    },
+  },
+};
+
+export const FromFullSvg: Story = {
+  args: {
+    path: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2" stroke="white" stroke-width="2" fill="none"/></svg>',
+    color: '#2563eb',
+    size: 'lg',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Si `path` contiene un `<svg>` completo (con `viewBox`, múltiples paths, etc), se inyecta tal cual.',
+      },
+    },
+  },
+};
+
+export const FromUrl: Story = {
+  args: {
+    url: 'https://upload.wikimedia.org/wikipedia/commons/4/4f/SVG_Logo.svg',
+    alt: 'SVG logo',
+    size: 'xl',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renderiza un `<img>` apuntando a un archivo `.svg`. Útil para assets locales (p.ej. `/public/icons/foo.svg`).',
+      },
+    },
+  },
+};
+
+export const PathWithBadge: Story = {
+  args: {
+    path: 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z',
+    badge: '9+',
+    badgeColor: 'error',
+    size: 'md',
+  },
+};

package/src/components/Icon/Icon.tsx

@@ -1,10 +1,43 @@
-import React, { ReactNode, useMemo } from 'react';
-import { Badge, SvgIconProps, styled } from '@mui/material';
+import React, { type ReactNode, useMemo } from 'react';
+import { Badge, styled } from '@mui/material';
 
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export interface IconProps {
-  children: ReactNode;
+  /**
+   * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.
+   * Si se usa junto con `path` o `url`, `children` tiene prioridad.
+   */
+  children?: ReactNode;
+  /**
+   * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para
+   * los iconos custom de Metronic que vienen como strings de path.
+   *
+   * ```tsx
+   * <Icon path="M12 2L2 22h20L12 2z" />
+   * ```
+   *
+   * Si el string contiene el tag `<svg>` completo (no solo el `d`), también
+   * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.
+   */
+  path?: string;
+  /**
+   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.
+   *
+   * ```tsx
+   * <Icon url="/assets/icons/custom-warning.svg" />
+   * ```
+   */
+  url?: string;
+  /**
+   * Alt text cuando se usa `url`. Default: `"icon"`.
+   */
+  alt?: string;
+  /**
+   * ViewBox cuando se usa `path`. Default: `"0 0 24 24"`. Ignorado si `path`
+   * ya viene como `<svg>` completo.
+   */
+  viewBox?: string;
   color?: string;
   outlined?: boolean;
   spin?: boolean;
@@ -36,8 +69,12 @@ const StyledIcon = styled('span')<{
   outlined?: boolean;
 }>(({ color, fontSize, spin, outlined }) => ({
   display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
   color: color,
   fontSize: fontSize,
+  width: fontSize,
+  height: fontSize,
   animation: spin ? 'spin 1s linear infinite' : undefined,
   border: outlined ? '1px solid currentColor' : undefined,
   borderRadius: '50%',
@@ -46,17 +83,31 @@ const StyledIcon = styled('span')<{
     '0%': { transform: 'rotate(0deg)' },
     '100%': { transform: 'rotate(360deg)' },
   },
+  '& svg': {
+    width: '100%',
+    height: '100%',
+    fill: 'currentColor',
+    display: 'block',
+  },
+  '& img': {
+    width: '100%',
+    height: '100%',
+    display: 'block',
+  },
 }));
 
 export const Icon: React.FC<IconProps> = ({
   children,
+  path,
+  url,
+  alt = 'icon',
+  viewBox = '0 0 24 24',
   color = 'var(--primary-color)',
   outlined = false,
   spin = false,
   badge,
   badgeColor = 'primary',
   badgePosition = { vertical: 'bottom', horizontal: 'right' },
-  badgeSize = 'medium',
   size = 'sm',
   black,
   white,
@@ -70,6 +121,36 @@ export const Icon: React.FC<IconProps> = ({
 
   const iconSize = sizeMap[size];
 
+  // Resolver el contenido según la prop activa.
+  const content = useMemo(() => {
+    if (children) return children;
+
+    if (path) {
+      const trimmed = path.trim();
+      // Si es un SVG completo (empieza con <svg), lo inyectamos tal cual.
+      if (trimmed.startsWith('<svg')) {
+        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;
+      }
+      // Si no, asumimos que es el atributo `d` de un <path>.
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox={viewBox}
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path d={trimmed} />
+        </svg>
+      );
+    }
+
+    if (url) {
+      return <img src={url} alt={alt} />;
+    }
+
+    return null;
+  }, [children, path, url, alt, viewBox]);
+
   return (
     <Badge
       badgeContent={badge}
@@ -85,10 +166,10 @@ export const Icon: React.FC<IconProps> = ({
         outlined={outlined}
         className={`hsi-icon ${className || ''}`}
       >
-        {children}
+        {content}
       </StyledIcon>
     </Badge>
   );
 };
 
-export default Icon;
+export default Icon;

package/src/components/Input/Input.definitions.ts

@@ -42,7 +42,7 @@ export const NumberInputExample = () => {
 `;
 
 export const EmailInputDefinition = `
-import React, { useState } => from 'react';
+import React, { useState } from 'react';
 import { Input } from './Input'; // Ajusta la ruta si es necesario
 import { Box, Typography } from '@mui/material';
 
@@ -149,7 +149,7 @@ export const DisabledInputExample = () => {
 `;
 
 export const ReadOnlyInputDefinition = `
-import React, { useState } => from 'react';
+import React, { useState } from 'react';
 import { Input } from './Input'; // Ajusta la ruta si es necesario
 import { Box, Typography } from '@mui/material';
 
@@ -250,3 +250,75 @@ export const FullWidthInputExample = () => {
   );
 };
 `;
+
+export const LabelPositionFloatingDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box } from '@mui/material';
+
+export const LabelPositionExample = () => {
+  const [outside, setOutside] = useState('Outside (default)');
+  const [floating, setFloating] = useState('Floating');
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
+      <Input
+        label="Label outside"
+        value={outside}
+        onChange={setOutside}
+        labelPosition="outside"
+      />
+      <Input
+        label="Label floating (MUI clásico)"
+        value={floating}
+        onChange={setFloating}
+        labelPosition="floating"
+      />
+    </Box>
+  );
+};
+`;
+
+export const CustomBorderRadiusDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box } from '@mui/material';
+
+export const CustomBorderRadiusExample = () => {
+  const [v, setV] = useState('Texto');
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, width: 300 }}>
+      <Input label="Sin radius" value={v} onChange={setV} borderRadius={0} />
+      <Input label="Radius 4px" value={v} onChange={setV} borderRadius={4} />
+      <Input label="Default (10px)" value={v} onChange={setV} />
+      <Input label="Pill (24px)" value={v} onChange={setV} borderRadius={24} />
+    </Box>
+  );
+};
+`;
+
+export const CustomStylingDefinition = `
+import React, { useState } from 'react';
+import { Input } from './Input'; // Ajusta la ruta si es necesario
+import { Box } from '@mui/material';
+
+export const CustomStylingExample = () => {
+  const [v, setV] = useState('Custom completo');
+  return (
+    <Box sx={{ width: 300 }}>
+      <Input
+        label="Combinado: bg + borderColor + label color"
+        value={v}
+        onChange={setV}
+        sx={{
+          '& .MuiInputLabel-root': { color: 'primary.main' },
+          '& .MuiOutlinedInput-root': { bgcolor: '#fff7e6' },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'warning.main',
+            borderWidth: 2,
+          },
+        }}
+      />
+    </Box>
+  );
+};
+`;

package/src/components/Input/Input.helpers.ts

@@ -0,0 +1,49 @@
+import type { InputHTMLAttributes } from 'react';
+import type { TextFieldProps } from '@mui/material';
+import type { InputType, LabelPosition } from './Input';
+
+/**
+ * Convierte el valor raw del evento al tipo apropiado.
+ * Para type="number" intenta parsear a número; si falla, devuelve el raw
+ * (permite estados intermedios como "" o "-" mientras el usuario tipea).
+ */
+export const parseValue = (raw: string, type: InputType): string | number => {
+  if (type !== 'number') return raw;
+  if (raw === '' || raw === '-') return raw;
+  const n = parseFloat(raw);
+  return isNaN(n) ? raw : n;
+};
+
+/**
+ * Construye los slotProps del TextField consolidando htmlInput + inputLabel.
+ * Maneja los atributos min/max cuando type="number" y readOnly.
+ */
+export const buildSlotProps = (
+  type: InputType,
+  min: number | undefined,
+  max: number | undefined,
+  customSlotProps: TextFieldProps['slotProps'],
+  customInputProps: InputHTMLAttributes<HTMLInputElement> | undefined,
+  _labelPosition: LabelPosition,
+  readOnly?: boolean,
+): TextFieldProps['slotProps'] => {
+  const numberAttrs =
+    type === 'number'
+      ? { min: min ?? Number.NEGATIVE_INFINITY, ...(max !== undefined && { max }) }
+      : {};
+
+  return {
+    ...customSlotProps,
+    htmlInput: {
+      ...customInputProps,
+      ...(customSlotProps as any)?.htmlInput,
+      ...numberAttrs,
+      ...(readOnly && { readOnly: true }),
+    },
+    // Dejamos que MUI maneje el shrink nativamente (animación inside → up).
+    // El consumidor puede forzar shrink con slotProps.inputLabel.shrink=true si lo necesita.
+    inputLabel: {
+      ...(customSlotProps as any)?.inputLabel,
+    },
+  };
+};